:root{
  --felt:#1F4A3A;
  --glow:0.18;
  --vignette:#0E2219;
  --ivory:#F3EBDC;
  --ivory-edge:#D8CBB3;
  --red:#B3261E;
  --black:#1C1A17;
  --gold:#C9A45C;
  --gold-hi:#E3C47E;
  --gold-lo:#A9843C;
  --burgundy:#6E1E2B;
  --draw-ms:450ms;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  font-family:"PT Sans",system-ui,sans-serif;
  color:var(--ivory);
  background:var(--felt);
  overflow:hidden;
  overscroll-behavior:none;
  height:100dvh;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:-5%;
  background:
    radial-gradient(ellipse 48% 30% at 50% 3%, rgba(252,236,198,calc(var(--glow) * 2.9)) 0%, rgba(252,236,198,0) 74%),
    radial-gradient(ellipse 88% 54% at 50% -2%, rgba(244,217,160,calc(var(--glow) * 1.9)) 0%, rgba(244,217,160,0) 66%),
    radial-gradient(ellipse 122% 104% at 50% 36%, rgba(0,0,0,0) 12%, rgba(6,18,13,0.97) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.10) 52%, rgba(0,0,0,0.26) 100%),
    var(--felt);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

#app{
  position:relative;
  height:100dvh;
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  gap:6px;
}

/* ---------- top bar ---------- */
#topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 2px 4px;
  position:relative;
  z-index:6;
}
#title{
  font-family:"Ruslan Display",serif;
  font-weight:400;
  font-size:clamp(20px,6.6vw,32px);
  line-height:0.98;
  letter-spacing:0.5px;
  color:var(--ivory);
  text-shadow:0 2px 6px rgba(0,0,0,0.55);
  flex:0 0 auto;
  white-space:nowrap;
}
#title span{display:block}
#crowns{
  display:flex;
  gap:5px;
  flex:1 1 auto;
  justify-content:center;
  align-items:center;
}
.crown{width:clamp(20px,6.4vw,28px);height:auto;display:block;transition:transform .35s ease}
.crown.active{transform:translateY(-1px) scale(1.06);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.crown.pop{animation:crownPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes crownPop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1.06)}}

#rulesBtn{
  flex:0 0 auto;
  font-family:"PT Sans",sans-serif;
  font-size:clamp(13px,3.7vw,15px);
  color:var(--ivory);
  background:rgba(0,0,0,0.28);
  border:1px solid var(--gold);
  border-radius:999px;
  padding:9px 16px;
  min-height:44px;
  cursor:pointer;
  transition:background .2s,box-shadow .2s;
}
#rulesBtn:active{background:rgba(0,0,0,0.45)}

/* ---------- table ---------- */
#table{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
}

#centre{
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-around;
  padding:6px 8px 0;
  gap:8px;
}
#deckWrap{display:flex;flex-direction:column;align-items:center;gap:5px}
#deck{
  position:relative;
  width:min(35vw,142px,162px);
}
#deckStack{position:relative;width:100%;aspect-ratio:0.714;margin-bottom:14px}
#deckStack .stackCard{
  position:absolute;
  inset:0;
  border-radius:7px;
  overflow:hidden;
  box-shadow:
    inset -2px 0 0 rgba(243,235,220,0.9),
    inset 0 -2px 0 rgba(243,235,220,0.55),
    0 7px 15px rgba(0,0,0,0.5);
}
#deckStack .stackCard svg{display:block;width:100%;height:100%}
#left{
  font-family:"PT Sans",sans-serif;
  font-size:clamp(12px,3.3vw,15px);
  color:rgba(243,235,220,0.85);
  letter-spacing:0.3px;
}

#glassWrap{
  width:min(31vw,120px,140px);
  height:auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
#glassBox{position:relative;width:100%;aspect-ratio:408/606}
#glassBox img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#glassFull{clip-path:inset(100% 0 0 0);transition:clip-path .6s cubic-bezier(.3,.8,.2,1)}
#meniscus{position:absolute;height:4.2%;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(250,214,140,0.85),rgba(222,160,52,0.75) 60%,rgba(190,120,30,0.0) 100%);
  box-shadow:inset 0 1px 1px rgba(255,240,200,0.6);
  transition:top .6s cubic-bezier(.3,.8,.2,1),left .6s cubic-bezier(.3,.8,.2,1),width .6s cubic-bezier(.3,.8,.2,1),opacity .3s;opacity:0}
#glassWrap.wobble{animation:glassWobble .7s cubic-bezier(.3,.8,.3,1)}
@keyframes glassWobble{
  0%{transform:rotate(0)}
  20%{transform:rotate(-6deg) translateX(-2px)}
  40%{transform:rotate(5deg) translateX(2px)}
  60%{transform:rotate(-3deg)}
  80%{transform:rotate(1.5deg)}
  100%{transform:rotate(0)}
}


/* ---------- card zone ---------- */
#cardZone{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  perspective:1400px;
  padding-top:4px;
  overflow:visible;
}
#cardStage{
  position:relative;
  width:min(60vw,32vh,300px);
  aspect-ratio:0.714;
  border-radius:9px;
  opacity:0;
  transform:scale(0.96);
  transition:opacity .18s ease;
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
  pointer-events:none;
}
#cardStage.show{opacity:1;transform:scale(1)}
#stageFace,#stageFace svg{width:100%;height:100%;display:block}
#stageFace svg{border-radius:9px}
#cardStage.placeholder{
  opacity:1;transform:scale(1);
  background:rgba(243,235,220,0.05);
  border:1.5px dashed rgba(201,164,92,0.4);
  box-shadow:inset 0 0 40px rgba(0,0,0,0.25);
}
#cardStage.placeholder #stageFace{display:none}
#stageHint{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(14px,4vw,17px);
  line-height:1.3;
  color:rgba(201,164,92,0.85);
}
#cardStage.placeholder #stageHint{display:flex}

#rulePanel{
  width:min(84vw,420px);
  border-radius:8px;
  padding:10px 16px 12px;
  text-align:center;
  background:linear-gradient(180deg,rgba(9,26,19,0.62),rgba(9,26,19,0.78));
  border:1.5px solid rgba(201,164,92,0.55);
  box-shadow:
    inset 0 0 0 1px rgba(201,164,92,0.22),
    inset 0 0 0 4px rgba(201,164,92,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 16px rgba(0,0,0,0.4);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
  position:relative;
}
#rulePanel.show{opacity:1;transform:translateY(0)}
#rulePanel::before,#rulePanel::after{
  content:"";
  position:absolute;
  top:5px;
  width:14px;height:14px;
  border:1.5px solid var(--gold);
  opacity:0.85;
}
#rulePanel::before{left:5px;border-right:none;border-bottom:none}
#rulePanel::after{right:5px;border-left:none;border-bottom:none}
#rankName{
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(19px,5.6vw,25px);
  line-height:1.1;
  color:var(--ivory);
}
#ruleText{
  font-family:"PT Sans",sans-serif;
  font-size:clamp(14px,4vw,16px);
  line-height:1.3;
  margin-top:3px;
  color:rgba(243,235,220,0.95);
}

/* ---------- bottom ---------- */
#bottom{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding-top:6px;
  position:relative;
  z-index:6;
}
#drawBtn{
  width:100%;
  min-height:52px;
  font-family:"PT Sans",sans-serif;
  font-size:clamp(16px,4.6vw,18px);
  letter-spacing:0.4px;
  color:var(--ivory);
  border:1.5px solid var(--gold);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(31,74,58,0.9),rgba(12,34,25,0.95));
  box-shadow:0 6px 16px rgba(0,0,0,0.45),inset 0 1px 0 rgba(201,164,92,0.25);
  cursor:pointer;
  transition:transform .1s ease,box-shadow .2s;
}
#drawBtn:active{transform:translateY(1px)}
#drawBtn:disabled{opacity:0.45;cursor:default}
#newBtn{
  min-height:44px;
  padding:9px 22px;
  font-family:"PT Sans",sans-serif;
  font-size:clamp(13px,3.7vw,15px);
  color:rgba(243,235,220,0.9);
  background:transparent;
  border:1px solid rgba(201,164,92,0.55);
  border-radius:999px;
  cursor:pointer;
}
#newBtn:active{background:rgba(0,0,0,0.3)}

/* ---------- flying card ---------- */
.flyCard{
  position:fixed;
  z-index:60;
  pointer-events:none;
  perspective:1400px;
}
.flyCard .flipInner{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}
.flyCard .face{
  position:absolute;
  inset:0;
  border-radius:9px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
}
.flyCard .face.front{transform:rotateY(180deg)}
.flyCard .face svg{display:block;width:100%;height:100%}


/* ---------- banner ---------- */
#banner{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  z-index:80;
}
#banner.show{opacity:1}
#banner span{
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(38px,13vw,64px);
  color:var(--burgundy);
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
  padding:20px 40px;
  background:linear-gradient(180deg,#F6EFE1,#EFE4CE);
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
  box-shadow:0 22px 55px rgba(0,0,0,0.6);
  transform:scale(0.8);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1);
}
#banner.show span{transform:scale(1)}

body#app #banner{}

body.pulse::before{filter:brightness(1.18) saturate(1.05);transition:filter .5s}
body::before{transition:filter .5s}

/* ---------- empty overlay ---------- */
#emptyOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,18,13,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s;
  z-index:70;
}
#emptyOverlay.show{opacity:1;pointer-events:auto}
#emptyCard{
  width:min(74vw,340px);
  aspect-ratio:1.15;
  border-radius:12px;
  background:var(--ivory);
  color:#25211b;
  border:1px solid var(--ivory-edge);
  box-shadow:0 20px 44px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:24px;
  transform:scale(0.92);
  transition:transform .4s cubic-bezier(.2,1.3,.4,1);
}
#emptyOverlay.show #emptyCard{transform:scale(1)}
#emptyTitle{
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(20px,6vw,26px);
  text-align:center;
}
#emptyNew{
  min-height:48px;
  padding:11px 28px;
  font-family:"PT Sans",sans-serif;
  font-size:16px;
  color:var(--ivory);
  background:#1F4A3A;
  border:1.5px solid var(--gold);
  border-radius:10px;
  cursor:pointer;
}

/* ---------- rules sheet ---------- */
#sheetWrap{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
}
#sheetWrap.open{pointer-events:auto}
#sheetBackdrop{
  position:absolute;
  inset:0;
  background:rgba(4,12,9,0.5);
  opacity:0;
  transition:opacity .3s;
}
#sheetWrap.open #sheetBackdrop{opacity:1}
#sheet{
  position:absolute;
  left:0;right:0;bottom:0;
  max-height:88dvh;
  margin:0 auto;
  width:100%;
  max-width:560px;
  background:linear-gradient(180deg,#F6EFE1,#EFE4CE);
  color:#25211b;
  border-radius:18px 18px 0 0;
  border-top:2px solid var(--gold);
  box-shadow:0 -18px 50px rgba(0,0,0,0.55);
  transform:translateY(102%);
  transition:transform .38s cubic-bezier(.2,.9,.25,1);
  display:flex;
  flex-direction:column;
  padding:6px 0 calc(8px + env(safe-area-inset-bottom));
  overflow:hidden;
}
#sheetWrap.open #sheet{transform:translateY(0)}
#sheetHead{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 52px 12px;
  flex:0 0 auto;
}
#sheetHead h2{
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(21px,6.4vw,28px);
}
#sheetClose{
  position:absolute;
  right:12px;top:12px;
  width:40px;height:40px;
  border:none;background:transparent;
  font-size:22px;line-height:1;
  color:#25211b;
  cursor:pointer;
}
#sheetRows{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 20px;
  flex:1 1 auto;
}
.sheetRow{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:9px 2px;
  border-bottom:1px solid rgba(37,33,27,0.12);
}
.sheetRow:last-child{border-bottom:none}
.sheetIdx{
  flex:0 0 auto;
  width:38px;
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(17px,4.8vw,21px);
  text-align:center;
}
.sheetRow.red .sheetIdx{color:var(--red)}
.sheetRow.black .sheetIdx{color:var(--black)}
.sheetRow.gold .sheetIdx{display:flex;align-items:center;justify-content:center}
.sheetRow.gold .sheetIdx svg{width:26px;height:26px}
.sheetName{
  flex:0 0 auto;
  min-width:74px;
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(15px,4.2vw,18px);
  color:#25211b;
}
.sheetRule{
  flex:1 1 auto;
  font-family:"PT Sans",sans-serif;
  font-size:clamp(13px,3.7vw,15.5px);
  line-height:1.28;
  color:#3a342c;
}
#sheetFoot{
  flex:0 0 auto;
  text-align:center;
  padding:12px 0 4px;
  font-family:"PT Serif",serif;
  font-style:italic;
  font-size:clamp(13px,3.8vw,16px);
  color:#4a443a;
  letter-spacing:0.4px;
}

/* ---------- wide / short screens ---------- */
@media (min-height:820px){
  #cardStage{width:min(60vw,34vh,320px)}
}
@media (max-height:760px){
  #title{font-size:clamp(18px,5.6vw,26px)}
  #deck{width:min(30vw,118px,138px)}
  #glassWrap{width:min(26vw,102px,118px)}
  #cardStage{width:min(54vw,29vh,264px)}
  #rulePanel{padding:8px 14px 10px}
  #drawBtn{min-height:48px}
}
@media (max-height:640px){
  #app{gap:3px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  #cardStage{width:min(46vw,25vh,220px)}
  #rankName{font-size:clamp(17px,5vw,21px)}
  #ruleText{font-size:clamp(13px,3.6vw,15px)}
  #drawBtn{min-height:46px}
  #newBtn{min-height:40px}
}
@media (orientation:landscape) and (max-height:520px){
  #app{max-width:100%;padding:6px 12px;gap:4px}
  #topbar{padding:0}
  #title{font-size:clamp(18px,5vh,26px)}
  #title span{display:inline}
  #crowns{justify-content:flex-start;gap:4px}
  .crown{width:clamp(18px,4.6vh,24px)}
  #rulesBtn{padding:6px 14px;min-height:36px}
  #table{flex-direction:row;align-items:stretch;gap:12px}
  #centre{flex:0 0 34%;flex-direction:row;justify-content:center;align-items:flex-end;gap:6px;padding:0}
  #deck{width:min(11vw,74px,86px)}
  #glassWrap{width:min(9vw,56px,66px)}
  #cardZone{flex:1 1 auto;flex-direction:row;align-items:center;justify-content:center;gap:14px;padding-top:0}
  #cardStage{width:min(20vh,26vw,190px);flex:0 0 auto}
  #rulePanel{width:auto;flex:0 1 auto;max-width:360px;min-width:180px}
  #bottom{flex-direction:row;justify-content:center;gap:12px;padding-top:0}
  #drawBtn{width:auto;min-width:190px;padding:0 22px}
  #emptyCard{aspect-ratio:auto;width:min(70vw,420px)}
}
#deckStack.empty{border:1.5px dashed rgba(201,164,92,0.4);border-radius:7px;background:rgba(243,235,220,0.04)}
#rulePanel{opacity:1;transform:none;transition:none}
#rulePanel.flash #rankName,#rulePanel.flash #ruleText{animation:ruleIn .28s ease-out}
@keyframes ruleIn{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
#rulePanel.intro #rankName{color:var(--gold-hi)}
#rulePanel.intro #ruleText{color:rgba(243,235,220,0.8)}
.flyCard .flipInner{will-change:auto}
#cardZone{perspective:none}
#cardStage,#cardStage.show,#cardStage.placeholder{transform:none}
.flyCard .flipInner{transform-style:flat}
.flyCard .face{backface-visibility:visible;-webkit-backface-visibility:visible}
.flyCard .face.front{transform:none}
#cardStage.show{transition:none}

/* ---------- round 4: bolder top bar, bigger card + rule ---------- */
#topbar{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"title btn" "crowns crowns";
  align-items:center;
  column-gap:10px;
  row-gap:4px;
  padding:2px 2px 2px;
}
#title{grid-area:title;font-size:clamp(24px,7.6vw,40px);line-height:1.05;white-space:nowrap;min-width:0}
#title span{display:inline}
#rulesBtn{grid-area:btn;min-height:48px;padding:12px 20px;font-size:clamp(15px,4.2vw,17px);border-width:1.5px;background:rgba(0,0,0,0.34)}
#crowns{grid-area:crowns;justify-content:center;gap:12px}
#crowns .crownLabel{font-family:"PT Serif",serif;font-weight:700;font-size:14px;color:rgba(243,235,220,0.78);letter-spacing:0.4px;margin-right:2px}
.crown{width:clamp(24px,6.6vw,30px)}
.crown.off{opacity:0.9}
.crown.active{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 0 6px rgba(227,196,126,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#deck{width:min(31vw,128px,150px)}
#glassWrap{width:min(27vw,108px,130px)}
#rankName{font-size:clamp(24px,7.2vw,30px);line-height:1.1}
#ruleText{font-size:clamp(16px,4.6vw,18px);line-height:1.32;margin-top:4px}
#rulePanel{padding:10px 18px 12px;width:min(90vw,440px)}
#cardStage.flying #stageFace{visibility:hidden}
#cardStage.flying{box-shadow:none}
@media (max-height:760px){
  #title{font-size:clamp(22px,6.8vw,34px)}
  #deck{width:min(27vw,108px,124px)}
  #glassWrap{width:min(23vw,92px,108px)}
  #drawBtn{min-height:48px}
}
@media (max-height:640px){
  #rankName{font-size:clamp(20px,6vw,24px)}
  #ruleText{font-size:16px}
  #deck{width:min(22vw,88px,100px)}
  #glassWrap{width:min(19vw,76px,90px)}
  .crown{width:22px}
}
@media (orientation:landscape) and (max-height:520px){
  #topbar{grid-template-columns:auto 1fr auto;grid-template-areas:"title crowns btn"}
  #title{font-size:clamp(22px,6.4vh,30px)}
  .crown{width:clamp(20px,5.4vh,26px)}
  #rulesBtn{min-height:44px;padding:8px 18px}
  #rankName{font-size:clamp(20px,6vh,26px)}
  #ruleText{font-size:16px}
}
#rulePanel{min-height:108px;display:flex;flex-direction:column;justify-content:center}
@media (max-height:640px){#rulePanel{min-height:92px}}
@media (orientation:landscape) and (max-height:520px){#rulePanel{min-height:0}}
/* deck and glass take a share of the height, so the drawn card stays the biggest thing */
#deck{width:min(31vw,15.5vh,150px)}
#glassWrap{width:min(27vw,13vh,130px)}
#deckStack{margin-bottom:14px}
@media (max-height:640px){
  #deck{width:min(22vw,14vh,100px)}
  #glassWrap{width:min(19vw,12vh,90px)}
  #topbar{row-gap:0}
  #rulesBtn{padding:10px 16px}
  #newBtn{min-height:38px;padding:6px 18px}
  #bottom{gap:6px;padding-top:4px}
}
/* wide screens that are not phone-short: deck and glass flank the card, all centred under the lamp */
@media (min-aspect-ratio:1/1) and (min-height:521px){
  #app{max-width:min(1000px,100%);padding-left:24px;padding-right:24px}
  #topbar{grid-template-columns:1fr auto 1fr;grid-template-areas:"title crowns btn";max-width:900px;width:100%;margin:0 auto}
  #title{justify-self:start}
  #rulesBtn{justify-self:end}
  #table{display:grid;grid-template-columns:1fr minmax(0,1.5fr) 1fr;grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;gap:12px;max-width:900px;width:100%;margin:0 auto}
  #centre{display:contents}
  #deckWrap{grid-column:1;grid-row:1}
  #glassWrap{grid-column:3;grid-row:1}
  #cardZone{grid-column:2;grid-row:1;height:100%}
  #deck{width:min(15vw,22vh,180px)}
  #glassWrap{width:min(12vw,18vh,150px)}
  #bottom{flex-direction:row;justify-content:center;gap:14px}
  #drawBtn{width:min(420px,60%)}
}
@media (min-aspect-ratio:1/1) and (min-height:521px){
  #app{max-width:min(1180px,100%)}
  #table,#topbar{max-width:min(1100px,max(900px,105vh))}
}
@media (max-height:640px) and (orientation:portrait){
  #deck{width:min(22vw,12vh,100px)}
  #glassWrap{width:min(19vw,10vh,90px)}
}
/* phone held sideways: deck | card + call-out | glass in one row, centred */
@media (orientation:landscape) and (max-height:520px){
  #app{padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
  #topbar{grid-template-columns:1fr auto 1fr}
  #title{justify-self:start}
  #rulesBtn{justify-self:end}
  #table{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;gap:14px;width:100%;max-width:980px;margin:0 auto}
  #centre{display:contents}
  #deckWrap{grid-column:1;grid-row:1}
  #glassWrap{grid-column:3;grid-row:1;width:min(10vw,22vh,110px)}
  #deck{width:min(11vw,26vh,120px)}
  #cardZone{grid-column:2;grid-row:1;flex-direction:row;gap:16px;height:100%}
  #cardStage{width:min(46vh,24vw,240px)}
  #rulePanel{width:min(34vw,340px);min-width:200px}
}
@media (max-height:600px) and (orientation:portrait){
  #rulePanel{min-height:0;padding:6px 14px 8px}
  #rankName{font-size:21px}
  #ruleText{font-size:16px;margin-top:2px}
}