:root{
  --bg:#efeeec;            /* exact site background */
  --surface:#f8f7f3;       /* cream plates / cards-ui */
  --rail:#d9cdb0;          /* champagne table rail */
  --felt-hi:#1C5642; --felt:#123D2E; --felt-lo:#0B2A20;  /* GREEN — felt only */
  --gold:#b08c2b;          /* site gold (borders/accents) */
  --gold-text:#83660b;     /* site text/heading gold-bronze */
  --gold-hi:#E6CF86; --gold-lo:#8A6E1F;
  --champagne:#cdb88a;     /* site primary-button fill */
  --cream:#F7F5EF;         /* text on green felt */
  --ink:#1c1c1c;           /* button label ink */
  --ink-soft:rgba(35,32,26,.55);
  --gilt:linear-gradient(180deg,#F3E2A6 0%,#E6CF86 18%,#b08c2b 50%,#8A6E1F 78%,#C9A94A 100%);
  --serif:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--serif);color:var(--gold-text);
  background:radial-gradient(140% 100% at 50% 0%, #f4f3f1 0%, #efeeec 60%, #e8e7e3 100%);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
#app{max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;position:relative;}
.gilt-text{background:var(--gilt);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 1px rgba(11,42,32,.35);}
.brand h1.gilt-text{background-size:220% auto;animation:shimmer 7s linear infinite;}
@keyframes shimmer{0%{background-position:0 50%;}100%{background-position:220% 50%;}}

/* top bar — site chrome */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 3px calc(12px + env(safe-area-inset-left));}
.brand{text-align:center;line-height:1.04;flex:1;min-width:0;}
.brand-sub{font-family:var(--serif);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);}
.brand h1{font-family:var(--serif);font-weight:500;font-size:20px;margin:1px 0 0;color:var(--gold-text);letter-spacing:.14em;text-transform:uppercase;line-height:1.05;}
.ghost{background:transparent;border:1px solid rgba(176,140,43,.5);color:var(--gold-text);font-family:var(--serif);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:0 13px;min-height:42px;display:inline-flex;align-items:center;gap:5px;border-radius:2px;cursor:pointer;transition:.2s;white-space:nowrap;line-height:1.15;}
.ghost:hover{background:rgba(176,140,43,.1);}
.ghost:active{transform:scale(.96);}

/* ===== green felt table on the site's light room ===== */
#table{
  position:relative;flex:1;margin:10px 13px 0;
  border-radius:88px / 78px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(255,248,225,.12), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 42%, #1C5642 0%, #123D2E 40%, #0B2A20 74%, #07211a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(243,226,166,.5),
    inset 0 0 0 13px var(--rail),
    inset 0 0 0 14px rgba(138,110,31,.55),
    inset 0 0 0 16px rgba(0,0,0,.18),
    inset 0 0 70px rgba(4,26,18,.62),
    0 18px 44px rgba(120,110,90,.3);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:26px 22px;overflow:visible;
}
#table::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 46%, rgba(0,0,0,.42) 100%);}
#table::after{content:'';position:absolute;inset:16px;border-radius:inherit;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;}
.filigree{position:absolute;inset:28px;border-radius:inherit;border:1px solid rgba(205,184,138,.28);pointer-events:none;z-index:1;}
.felt-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;font-size:22px;letter-spacing:.18em;
  color:rgba(205,184,138,.10);text-shadow:0 1px 0 rgba(0,0,0,.4);white-space:nowrap;pointer-events:none;z-index:1;}

#deck{position:absolute;top:36%;right:14px;width:62px;height:88px;transform:translateY(-50%);z-index:1;}
#deck span{position:absolute;inset:0;border-radius:7px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.45);}
#deck span svg{width:100%;height:100%;display:block;}
#deck span:nth-child(2){transform:translate(-1.5px,-1.5px);}
#deck span:nth-child(3){transform:translate(-3px,-3px);}
#deck span:nth-child(4){transform:translate(-4.5px,-4.5px);}
#deck span:nth-child(5){transform:translate(-6px,-6px);}

/* seats */
.seat{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:2;}
.who{display:flex;align-items:center;gap:9px;background:linear-gradient(177deg,#fdfcf8 0%,#f8f7f3 48%,#f0eee7 100%);border:1px solid rgba(176,140,43,.55);
  padding:5px 12px;border-radius:2px;max-width:280px;margin:0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -1px 0 rgba(120,100,50,.10),0 1px 1px rgba(11,42,32,.22),0 6px 14px rgba(11,42,32,.34);}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#5a4a08;
  background:radial-gradient(circle at 36% 28%,#fbfaf6,#d8d2c4 62%,#a89f8c);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 3px rgba(0,0,0,.3);}
.avatar svg{width:20px;height:20px;}
/* animated perfumer portrait */
.portrait{width:58px;height:58px;border-radius:50%;position:relative;overflow:hidden;flex:0 0 auto;color:#23201a;
  background:radial-gradient(circle at 36% 28%,#F3E2A6,#b08c2b 62%,#8A6E1F);
  box-shadow:inset 0 0 0 2px rgba(243,226,166,.6),0 0 0 1px var(--gold),0 4px 12px rgba(20,40,30,.4);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,filter .35s;animation:floaty 4s ease-in-out infinite;}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;}
.portrait .pfallback{display:none;width:30px;height:30px;}
.portrait.noimg{display:flex;align-items:center;justify-content:center;}
.portrait.noimg .pfallback{display:block;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.portrait.think{box-shadow:inset 0 0 0 2px rgba(243,226,166,.6),0 0 0 1px var(--gold),0 0 18px 3px rgba(176,140,43,.55),0 4px 12px rgba(20,40,30,.4);}
.portrait.taunt,.portrait.win,.portrait.lose{animation:none;}
.portrait.taunt{transform:scale(1.08) translateY(-2px);box-shadow:inset 0 0 0 2px rgba(243,226,166,.75),0 0 0 1px var(--gold),0 0 22px 5px rgba(176,140,43,.5),0 8px 18px rgba(20,40,30,.45);}
.portrait.win{transform:scale(1.06);box-shadow:inset 0 0 0 2px #F3E2A6,0 0 0 1px var(--gold),0 0 28px 7px rgba(230,207,134,.65);}
.portrait.lose{transform:scale(.98);filter:grayscale(.25) brightness(.96);}
.meta .name{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:8px;color:var(--gold-text);}
.rank-tag{font-family:var(--serif);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#23201a;background:var(--champagne);padding:2px 7px;border-radius:2px;}
.chips{display:flex;align-items:center;gap:6px;font-size:14px;}
.chip-dot{width:13px;height:13px;border-radius:50%;display:inline-block;background:radial-gradient(circle at 36% 30%,#F3E2A6,#b08c2b 65%,#7c6420);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1.5px var(--gold-lo),0 1px 2px rgba(0,0,0,.4);}
.stack{font-variant-numeric:tabular-nums;font-weight:600;color:var(--gold-text);}
.dealer-btn{width:21px;height:21px;border-radius:50%;font-family:var(--serif);font-size:11px;font-weight:600;color:#23201a;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 36% 28%,#F3E2A6,#cdb88a 70%,#9a8657);box-shadow:0 1px 3px rgba(0,0,0,.4);opacity:0;transition:.2s;}
.dealer-btn.on{opacity:1;}

/* chip stacks in front of each player */
.felt-row{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:12px;width:100%;}
.bank{display:flex;gap:5px;align-items:flex-end;flex:0 0 auto;position:absolute;left:3%;bottom:0;z-index:2;}
.chip-col{position:relative;width:27px;height:50px;}
.cic{position:absolute;left:0;animation:chipIn .28s ease both;}
.cic .gr-chip{filter:drop-shadow(0 1px 1px rgba(4,26,18,.4));}
@keyframes chipIn{0%{opacity:0;transform:translateY(-7px) scale(.82);}100%{opacity:1;transform:none;}}
.bank.betting{cursor:pointer;animation:bankpulse 1.6s ease-in-out infinite;}
.bank.betting .chip-col{transition:transform .12s;}
.bank.betting .chip-col:hover{transform:translateY(-3px);}
.bank.betting .chip-col:active{transform:translateY(-1px) scale(.96);}
@keyframes bankpulse{0%,100%{filter:drop-shadow(0 0 0 rgba(176,140,43,0));}50%{filter:drop-shadow(0 0 4px rgba(176,140,43,.45));}}

/* cards */
.hole{display:flex;gap:2px;min-height:78px;align-items:center;justify-content:center;}
.hole .card{transform-origin:50% 92%;}
.me .hole{min-height:92px;}
.board{display:flex;gap:6px;justify-content:center;align-items:center;min-height:72px;}
.board .card{width:46px;height:64px;}
.card{width:50px;height:70px;position:relative;perspective:850px;}
.perfumer .hole .card{width:50px;height:70px;}
.me .hole .card{width:58px;height:81px;}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card.down .card-inner{transform:rotateY(180deg);}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:11px;overflow:hidden;
  box-shadow:0 1px 2px rgba(7,33,26,.4),2px 5px 10px hsl(157 45% 6%/.4),5px 12px 22px hsl(157 45% 6%/.26);}
.face.back{transform:rotateY(180deg);}
.face svg{display:block;width:100%;height:100%;}
.card.win .face.front{box-shadow:0 0 0 1.5px var(--gold-hi),0 0 16px rgba(230,207,134,.6),1px 2px 2px hsl(157 45% 6%/.45);border-radius:11px;}

/* middle (on felt → cream/gold text) */
.middle{display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;}
.pot{display:flex;flex-direction:column;align-items:center;gap:5px;padding:3px 12px;border-radius:30px;transition:.3s;}
.pot.live{animation:potpulse 1.8s ease-in-out infinite;}
.pot.collect{transform:scale(1.18);}
@keyframes potpulse{0%,100%{box-shadow:0 0 14px rgba(230,207,134,.16);}50%{box-shadow:0 0 30px rgba(230,207,134,.42);}}
.who.winner{box-shadow:0 0 0 1px var(--gold),0 0 22px rgba(230,207,134,.65),0 3px 10px rgba(20,40,30,.26);}
.seat.me .who.active{animation:turnbreath 1.8s ease-in-out infinite;}
@keyframes turnbreath{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px var(--gold),0 0 12px rgba(230,207,134,.35),0 6px 14px rgba(11,42,32,.34);}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px var(--gold),0 0 22px rgba(230,207,134,.6),0 6px 14px rgba(11,42,32,.34);}}
.pot-label{font-family:var(--serif);font-size:11px;letter-spacing:.28em;padding-left:.28em;text-transform:uppercase;color:var(--champagne);}
.pot-row{display:flex;align-items:center;gap:9px;}
.pot-chip{display:flex;}
.pot-val{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 10px rgba(230,207,134,.25);
  background:linear-gradient(180deg,#F3E2A6 0%,#E6CF86 30%,#C9A94A 52%,#8A6E1F 88%);-webkit-background-clip:text;background-clip:text;}
.status{font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.02em;line-height:1.35;color:rgba(247,245,239,.92);text-align:center;min-height:26px;padding:0 8px;text-shadow:0 1px 3px rgba(0,0,0,.45);}

/* bet chips */
.bet-line{min-height:24px;display:flex;align-items:center;gap:7px;font-size:14px;color:var(--cream);font-variant-numeric:tabular-nums;font-weight:600;}
.gr-chip{width:var(--chip,34px);height:auto;display:block;}
.bet-amt{text-shadow:0 1px 3px rgba(0,0,0,.55);}

/* banter */
.bubble{position:absolute;top:72px;left:50%;transform:translateX(-50%);
  background:var(--surface);color:var(--gold-text);font-family:var(--serif);font-style:italic;font-size:15px;
  padding:8px 16px;border-radius:3px;border:1px solid rgba(176,140,43,.45);max-width:262px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:0 10px 24px rgba(20,40,30,.5);z-index:33;}
.bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);animation:bpop .4s cubic-bezier(.2,1.4,.4,1);}
@keyframes bpop{0%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.8);}60%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.05);}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}
.bubble::after{content:'';position:absolute;top:-6px;left:46px;border:6px solid transparent;border-bottom-color:var(--surface);border-top:0;}

/* controls — exact site button language (Cormorant uppercase, 2px, champagne primary) */
#controls{padding:12px 14px calc(12px + env(safe-area-inset-bottom));min-height:84px;display:flex;flex-direction:column;gap:9px;justify-content:center;}
.actions{display:flex;gap:9px;}
#controls .actions{animation:turnRise .34s cubic-bezier(.2,.7,.2,1) both;}
@keyframes turnRise{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
.btn{flex:1;border-radius:2px;padding:15px 8px;font-family:var(--serif);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;color:var(--gold-text);background:linear-gradient(180deg,#fbfaf6 0%,#f6f4ef 100%);border:1px solid rgba(176,140,43,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(11,42,32,.18);}
.btn:hover{background:#fcfbf7;border-color:rgba(176,140,43,.7);box-shadow:0 2px 8px rgba(20,40,30,.12);}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:inset 0 1px 3px rgba(20,40,30,.14);}
.btn.gold,.btn.primary-deal{color:var(--ink);font-weight:600;background:linear-gradient(180deg,#e0cfa3 0%,#cdb88a 52%,#bca676 100%);border:1px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,70,20,.25),0 2px 5px rgba(11,42,32,.3);}
.btn.gold:hover,.btn.primary-deal:hover{background:linear-gradient(180deg,#e7d8b0 0%,#d6c39a 52%,#c2ac7d 100%);box-shadow:0 3px 12px rgba(176,140,43,.3);}
.btn.gold:active,.btn.primary-deal:active{transform:translateY(1px) scale(.99);box-shadow:inset 0 2px 4px rgba(90,70,20,.35);}
.btn.danger{color:rgba(131,102,11,.62);border-color:rgba(176,140,43,.28);background:transparent;box-shadow:none;}
.btn.danger:hover{background:rgba(176,140,43,.06);color:rgba(131,102,11,.85);border-color:rgba(176,140,43,.42);box-shadow:none;}
.btn.danger:active{transform:translateY(1px);background:rgba(176,140,43,.1);box-shadow:inset 0 1px 2px rgba(20,40,30,.12);}
.raise-panel{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid rgba(176,140,43,.32);border-radius:2px;padding:12px 13px;box-shadow:0 4px 14px rgba(20,40,30,.18);}
.raise-bar{display:flex;flex-direction:column;gap:9px;}
.raise-slide{display:flex;align-items:center;gap:12px;padding:0 4px;}
.raise-slide .raise-amt{min-width:80px;}
.raise-row{display:flex;align-items:center;gap:11px;}
.raise-amt{font-family:var(--serif);font-size:22px;color:var(--gold-text);font-variant-numeric:tabular-nums;min-width:72px;}
input[type=range]{flex:1;-webkit-appearance:none;height:3px;padding:11px 0;background-clip:content-box;border-radius:3px;background:linear-gradient(90deg,var(--champagne) 0 var(--fill,0%),rgba(176,140,43,.32) var(--fill,0%) 100%);outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#F3E2A6,#b08c2b 65%,#7c6420);border:3px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer;transition:transform .12s,box-shadow .12s;}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.16);box-shadow:0 0 0 4px rgba(176,140,43,.18),0 2px 6px rgba(0,0,0,.45);}
.quick{display:flex;gap:7px;}
.quick button{flex:1;background:transparent;border:1px solid rgba(176,140,43,.3);color:var(--gold-text);border-radius:2px;padding:8px 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--serif);cursor:pointer;}
.quick button:active{background:rgba(176,140,43,.12);}
.bet-hint{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ink-soft);text-align:center;}
.chip-bet{display:flex;justify-content:center;gap:12px;padding:2px 0 4px;}
.chip-btn{background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px;transition:transform .12s;}
.chip-btn .gr-chip{width:46px;}
.chip-btn span{font-family:var(--serif);font-size:12px;font-weight:600;color:var(--gold-text);letter-spacing:.03em;}
.chip-btn:active{transform:scale(.9);}
.chip-btn:hover .gr-chip{filter:drop-shadow(0 2px 5px rgba(176,140,43,.45));}

/* fx */
#fx{position:absolute;inset:0;pointer-events:none;z-index:30;}
.fly-chip{position:absolute;width:22px;height:22px;}

/* overlay */
#overlay{position:absolute;inset:0;background:rgba(239,238,236,.94);backdrop-filter:blur(3px);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:32px;transition:.3s;overflow-y:auto;}
/* content-heavy screens (final win) must scroll, not clip, on short viewports */
@media (max-height:640px){#overlay{justify-content:flex-start;padding:24px 28px;}}
#overlay.hidden{opacity:0;pointer-events:none;}
#overlay h2{font-family:var(--serif);font-size:30px;font-weight:500;margin:0;color:var(--gold-text);text-transform:uppercase;letter-spacing:.05em;}
#overlay p{font-family:var(--serif);font-style:italic;font-size:17px;margin:0;color:#6f5709;max-width:300px;}
.prize{background:var(--surface);border:1px solid var(--gold);border-radius:2px;padding:14px 22px;color:var(--gold-text);font-size:13px;letter-spacing:.16em;text-transform:uppercase;}

@media (max-height:720px){
  .brand h1{font-size:20px;}
  .card{width:52px;height:73px;} .perfumer .hole .card{width:58px;height:81px;} .me .hole .card{width:70px;height:98px;}
  .hole{min-height:86px;} .me .hole{min-height:104px;} .board{min-height:76px;}
  #table{border-radius:100px / 110px;padding:34px 20px;}
  .chip-col{height:40px;} .portrait{width:62px;height:62px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ===== the climb: ladder indicator + lives ===== */
#ladder{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 16px 6px;}
#ladder .rungs{display:flex;align-items:center;gap:14px;}
#ladder .rung{display:flex;align-items:center;gap:5px;font-family:var(--serif);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(124,100,20,.38);transition:.3s;}
#ladder .rung b{font-weight:500;}
#ladder .rung .vglass{width:8px;height:13px;border-radius:2px 2px 4px 4px;border:1px solid currentColor;position:relative;display:inline-block;flex:none;}
#ladder .rung.current{color:var(--gold-text);}
#ladder .rung.current .vglass{background:linear-gradient(180deg,transparent 0 48%,var(--champagne) 48% 100%);box-shadow:0 0 7px rgba(176,140,43,.5);}
#ladder .rung.current b{font-weight:600;}
#ladder .rung.cleared{color:var(--gold);}
#ladder .rung.cleared .vglass{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold);}
#ladder .rung.cleared .vglass::after{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:3px;border-radius:1px;background:var(--gold);box-shadow:0 0 4px rgba(176,140,43,.6);}
#ladder .lives{display:flex;gap:4px;align-items:center;}
#ladder .life{width:9px;height:13px;border-radius:2px 2px 4px 4px;border:1px solid rgba(176,140,43,.45);background:transparent;transition:.3s;}
#ladder .life.on{background:radial-gradient(circle at 40% 30%,var(--gold-hi),#b9863f 72%);border-color:var(--gold);box-shadow:0 0 5px rgba(176,140,43,.4);}

/* nameplate concentration sub-label */
.tier-sub{font-family:var(--serif);font-style:italic;font-size:11px;letter-spacing:.05em;color:var(--gold);margin-top:1px;opacity:.95;}

/* ===== climb overlay screens ===== */
#overlay.screen{gap:15px;background:rgba(242,241,238,.992);backdrop-filter:blur(7px);}
#overlay .btn{flex:initial;width:100%;max-width:260px;padding:14px 8px;}
#overlay .card-eyebrow{font-family:var(--serif);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);}
#overlay .tier-name{font-size:26px;line-height:1.08;}
#overlay .tier-persona{font-style:italic;color:#6f5709;}
#overlay .tier-tell{font-family:var(--serif);font-style:normal;font-size:14px;line-height:1.45;color:var(--gold-text);background:var(--surface);border:1px solid rgba(176,140,43,.4);border-radius:2px;padding:12px 18px;max-width:330px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
#overlay .tier-tell .tell-label{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
#overlay .ascend-note,#overlay .coach,#overlay .vials-left{font-size:14px;font-style:italic;color:#6f5709;}
#overlay .coach{color:var(--gold-text);}
#overlay .win-line{font-size:18px;line-height:1.4;max-width:330px;}
#overlay .win-sub{font-style:normal;font-size:11px;letter-spacing:.03em;text-transform:none;color:var(--ink-soft);max-width:320px;}
#overlay .crown-mark{font-size:42px;color:var(--gold);line-height:1;filter:drop-shadow(0 2px 7px rgba(176,140,43,.45));}
#overlay .claimed{font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
#overlay .btn.ghost-deal{background:transparent;border:1px solid rgba(176,140,43,.45);color:var(--gold-text);box-shadow:none;font-weight:500;}
#overlay .btn.ghost-deal:hover{background:rgba(176,140,43,.08);}
#overlay .btn[disabled]{opacity:.5;pointer-events:none;}
#overlay.finalwin{background:rgba(244,242,237,.994);}

@media (max-width:360px){
  #ladder{padding:2px 10px 5px;}
  #ladder .rungs{gap:9px;}
  #ladder .rung{font-size:9px;letter-spacing:.08em;}
}

/* ===== per-tier visual escalation (the climb gets richer: champagne -> gold -> gilt) ===== */
/* Tier 0 (Apprentice) keeps the base look. Tier 1 (Artisan) warms into richer gold; Tier 2 (Master) = deep, gilded, spotlit. */

/* --- Tier 1: The Artisan — warmer, richer gold rail + deeper felt --- */
#app[data-tier="1"] #table{
  background:
    radial-gradient(ellipse 56% 44% at 50% 40%, rgba(255,247,221,.17), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 42%, #1a4f3c 0%, #103526 42%, #0a261c 76%, #061d16 100%);
  box-shadow:
    inset 0 0 0 1px rgba(243,226,166,.72),
    inset 0 0 0 13px #c9af77,
    inset 0 0 0 14px rgba(138,110,31,.8),
    inset 0 0 0 16px rgba(0,0,0,.22),
    inset 0 0 82px rgba(3,22,16,.72),
    0 4px 22px rgba(176,140,43,.12),
    0 20px 48px rgba(110,95,60,.34);
}
#app[data-tier="1"] #table::before{background:radial-gradient(circle at 50% 44%, transparent 44%, rgba(0,0,0,.48) 100%);}
#app[data-tier="1"] .filigree{border-color:rgba(212,190,140,.42);}
#app[data-tier="1"] .seat.perfumer .portrait{box-shadow:inset 0 0 0 2px rgba(243,226,166,.7),0 0 0 1.5px var(--gold),0 0 14px 2px rgba(176,140,43,.4),0 4px 12px rgba(20,40,30,.4);}

/* --- Tier 2: The Master — deepest felt, concentrated spotlight, gilt rail + outer glow --- */
#app[data-tier="2"] #table{
  background:
    radial-gradient(ellipse 44% 35% at 50% 38%, rgba(255,245,212,.23), transparent 62%),
    radial-gradient(ellipse 120% 100% at 50% 42%, #164533 0%, #0c2f21 44%, #07221a 78%, #04140e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(243,226,166,.96),
    inset 0 0 0 12px #b8902f,
    inset 0 0 0 13px rgba(243,226,166,.5),
    inset 0 0 0 15px rgba(90,70,20,.6),
    inset 0 0 0 17px rgba(0,0,0,.3),
    inset 0 0 98px rgba(1,18,12,.84),
    0 0 34px rgba(176,140,43,.3),
    0 22px 54px rgba(85,70,42,.44);
}
#app[data-tier="2"] #table::before{background:radial-gradient(circle at 50% 40%, transparent 38%, rgba(0,0,0,.6) 100%);}
#app[data-tier="2"] #table::after{opacity:.09;}
#app[data-tier="2"] .filigree{border-color:rgba(243,226,166,.5);box-shadow:inset 0 0 22px rgba(176,140,43,.12);}
#app[data-tier="2"] .felt-mark{color:rgba(243,226,166,.12);}
#app[data-tier="2"] .seat.perfumer .portrait{box-shadow:inset 0 0 0 2px #F3E2A6,0 0 0 1.5px var(--gold-hi),0 0 0 3px rgba(138,110,31,.5),0 0 20px 4px rgba(230,207,134,.5),0 5px 14px rgba(20,40,30,.45);}
/* ladder + nameplate pick up the intensity too */
#app[data-tier="2"] #pName{color:#7a5e08;text-shadow:0 0 12px rgba(230,207,134,.3);}

/* current rung's vial gently breathes so the eye tracks your place in the climb */
@keyframes vialGlow{0%,100%{box-shadow:0 0 5px rgba(176,140,43,.4);}50%{box-shadow:0 0 11px rgba(230,207,134,.7);}}
#ladder .rung.current .vglass{animation:vialGlow 2.6s ease-in-out infinite;}

/* ===== landing — the welcome + prize ladder are printed ON THE FELT; the table is the hero ===== */
.felt-welcome{display:none;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:0 16px;width:100%;}
#app.is-landing .felt-welcome{display:flex;}
/* while landing, the table's empty centre furniture steps aside for the welcome */
#app.is-landing #pot,#app.is-landing #status{display:none;}
#app.is-landing #deck,#app.is-landing .felt-mark{display:none;}
#app.is-landing .board{min-height:0;}
.fw-head{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.08;letter-spacing:.04em;color:#e8c860;text-shadow:0 1px 6px rgba(0,0,0,.55);max-width:300px;}
.fw-tag{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.4;max-width:296px;color:rgba(247,245,239,.9);text-shadow:0 1px 4px rgba(0,0,0,.55);}
.fw-ladder{display:flex;flex-direction:column;gap:0;width:100%;max-width:300px;margin-top:2px;}
.fw-row{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:15px;color:var(--cream);
  text-shadow:0 1px 3px rgba(0,0,0,.55);padding:7px 2px;border-top:1px solid rgba(243,226,166,.16);}
.fw-row:first-child{border-top:0;}
.fw-num{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--gold-hi);min-width:24px;text-align:left;}
.fw-who{letter-spacing:.03em;}
.fw-gift{margin-left:auto;font-style:italic;font-weight:500;color:#e8c860;}
.fw-row:last-child .fw-gift{font-size:16px;}
/* per-tier intro prize line */
#overlay .tier-prize{font-family:var(--serif);font-size:14px;letter-spacing:.02em;color:var(--gold-text);}
#overlay .tier-prize b{color:#7a5e08;font-weight:600;font-style:italic;}

/* ===== feel pass: choreography ===== */
/* dealt cards overshoot then settle with weight (CSS-var driven; reduced-motion auto-covers) */
@keyframes cardLand{
  0%{transform:translate(var(--dx,0),var(--dy,0)) rotate(calc(var(--ang,0deg) - 10deg)) scale(1.05);}
  68%{transform:translate(0,0) rotate(var(--ang,0deg)) scale(1.02);}
  85%{transform:translate(0,0) rotate(var(--ang,0deg)) scale(.99);}
  100%{transform:translate(0,0) rotate(var(--ang,0deg)) scale(1);}
}
/* pot gathers itself before it's raked to the winner */
@keyframes potRake{0%{transform:scale(1.18);}22%{transform:scale(1.22);}48%{transform:scale(1.1) translateY(-2px);}100%{transform:scale(1);}}
.pot.rake{animation:potRake .48s cubic-bezier(.3,.8,.3,1);}
/* receiving plate recoils as chips land */
@keyframes trayBump{0%,100%{transform:translateY(0);}45%{transform:translateY(-2px);}}
.who.collecting{animation:trayBump .34s ease;}
/* the Perfumer visibly mulls */
@keyframes ponder{0%,100%{box-shadow:inset 0 0 0 2px rgba(243,226,166,.55),0 0 0 1px var(--gold),0 0 13px 2px rgba(176,140,43,.42),0 4px 12px rgba(20,40,30,.4);}
  50%{box-shadow:inset 0 0 0 2px rgba(243,226,166,.72),0 0 0 1px var(--gold),0 0 22px 5px rgba(176,140,43,.6),0 4px 12px rgba(20,40,30,.4);}}
.portrait.think{animation:ponder 1.5s ease-in-out infinite;}
/* the lone deal CTA gently invites the tap */
@keyframes dealBreath{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,70,20,.22),0 2px 5px rgba(11,42,32,.3);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 17px rgba(176,140,43,.4),0 3px 9px rgba(11,42,32,.32);}}
#controls > .btn.primary-deal{animation:dealBreath 2.6s ease-in-out infinite;}
/* landing welcome composes onto the felt instead of appearing flat */
@keyframes fwRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
#app.is-landing .fw-head{animation:fwRise .55s .02s both;}
#app.is-landing .fw-tag{animation:fwRise .55s .14s both;}
#app.is-landing .fw-row:nth-child(1){animation:fwRise .55s .26s both;}
#app.is-landing .fw-row:nth-child(2){animation:fwRise .55s .36s both;}
#app.is-landing .fw-row:nth-child(3){animation:fwRise .55s .46s both;}
/* firmer button press */
.btn:active{transform:translateY(1px) scale(.985);}

/* ===== feel pass: big moments ===== */
/* ALL IN — a contained felt jolt (<=2px) + a gilt typographic banner, never a slot shake */
@keyframes feltJolt{0%,100%{transform:translate(0,0);}18%{transform:translate(-1.5px,1px);}38%{transform:translate(1.5px,-1px);}58%{transform:translate(-1px,1px);}78%{transform:translate(1px,0);}}
#table.jolt{animation:feltJolt .3s ease;}
.all-in-banner{position:absolute;left:50%;top:43%;z-index:32;font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.34em;padding-left:.34em;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%);animation:allInBanner 1.1s ease forwards;}
@keyframes allInBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.55);}16%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}30%{transform:translate(-50%,-50%) scale(1);}78%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.03);}}
/* the verdict animates in instead of snapping */
@keyframes statusFade{0%{opacity:0;letter-spacing:.16em;}100%{opacity:.85;letter-spacing:.01em;}}
.status.reveal{animation:statusFade .42s ease both;}
/* the river lands with a touch more weight */
@keyframes cardLandThud{0%{transform:translateY(-3px);}60%{transform:translateY(1px);}100%{transform:translateY(0);}}
.board .card.river-card{animation:cardLandThud .26s ease;}
/* the winning cards ignite, then settle */
@keyframes winCardPulse{0%{box-shadow:0 0 0 1.5px var(--gold),0 0 6px rgba(176,140,43,.4);}45%{box-shadow:0 0 0 1.5px var(--gold-hi),0 0 26px rgba(230,207,134,.78);}100%{box-shadow:0 0 0 1.5px var(--gold-hi),0 0 16px rgba(230,207,134,.6);}}
.card.win .face.front{animation:winCardPulse .6s ease both;animation-delay:var(--igDelay,0s);}
/* a tie glows neutral silver on both seats */
.who.tie{box-shadow:0 0 0 1px rgba(210,210,214,.8),0 0 18px rgba(220,222,228,.5),0 3px 10px rgba(20,40,30,.26)!important;}

/* ===== feel pass: ascension + final win ===== */
/* the rail morphs (rather than snaps) when the tier escalates */
#table{transition:box-shadow .85s ease;}
/* a gold bloom masks the felt swap during ascension */
.ascend-bloom{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:radial-gradient(circle at 50% 44%, rgba(230,207,134,.55), rgba(176,140,43,.18) 45%, transparent 72%);
  animation:ascendBloom 1.15s ease forwards;}
@keyframes ascendBloom{0%{opacity:0;}40%{opacity:1;}100%{opacity:0;}}
/* the final win is STAGED — crown rises, then each line composes in */
@keyframes crownRise{0%{opacity:0;transform:translateY(14px) scale(.8);}100%{opacity:1;transform:translateY(0) scale(1);}}
#overlay.finalwin .crown-mark{animation:crownRise .9s cubic-bezier(.2,.8,.3,1) both;}
#overlay.finalwin .card-eyebrow{animation:fwRise .6s .30s both;}
#overlay.finalwin .tier-name{animation:fwRise .6s .44s both;}
#overlay.finalwin .win-line{animation:fwRise .6s .62s both;}
#overlay.finalwin .prize{animation:fwRise .6s .84s both;}
#overlay.finalwin .win-sub{animation:fwRise .6s .98s both;}
#overlay.finalwin .btn{animation:fwRise .55s 1.14s both;}

/* ===== showdown: show WHICH cards won — winners ignite (same warm gold as hole cards), losers dim, both rippling ===== */
.board.show-best .card.dim-card{opacity:.4;transition:opacity .45s ease;transition-delay:var(--dimDelay,0s);}
.board.show-best .card.in-hand .face.front{box-shadow:0 0 0 1.5px var(--gold-hi),0 0 16px rgba(230,207,134,.6),1px 2px 2px hsl(157 45% 6%/.4);animation:winCardPulse .6s ease both;animation-delay:var(--igDelay,0s);}

/* ===== idle table life (only at rest) ===== */
@keyframes markBreathe{0%,100%{opacity:.85;}50%{opacity:1.25;}}
#app.idle .felt-mark{animation:markBreathe 6.5s ease-in-out infinite;}
@keyframes deckSheen{0%,90%,100%{filter:brightness(1);}95%{filter:brightness(1.13);}}
#app.idle #deck span:nth-child(1){animation:deckSheen 5.5s ease-in-out infinite;}

/* ===== credits + gamble-up prize ladder ===== */
#ladder .credits{display:flex;align-items:center;gap:5px;}
#ladder .cred-coin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 38% 30%,var(--gold-hi),#b9863f 70%);border:1px solid var(--gold);box-shadow:0 0 5px rgba(176,140,43,.4);flex:none;}
#ladder .cred-n{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--gold-text);font-variant-numeric:lining-nums;min-width:9px;text-align:center;}
.fw-credits{font-family:var(--serif);font-size:12px;letter-spacing:.04em;color:rgba(247,245,239,.78);text-shadow:0 1px 3px rgba(0,0,0,.5);margin-top:3px;}
/* gamble + bank screens */
#overlay .prize-detail{font-family:var(--serif);font-style:italic;font-size:14px;color:#6f5709;margin:-4px 0 0;}
#overlay .gamble-note{font-family:var(--serif);font-size:13px;line-height:1.45;color:var(--gold-text);background:var(--surface);border:1px solid rgba(176,140,43,.4);border-radius:2px;padding:11px 16px;max-width:320px;}
#overlay .gamble-note b{color:#7a5e08;}
/* earn-credits panel */
#overlay .earn-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:320px;}
#overlay .earn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--serif);font-size:14px;color:var(--gold-text);background:var(--surface);border:1px solid rgba(176,140,43,.3);border-radius:2px;padding:9px 13px;}
#overlay .earn-row.done{opacity:.72;}
#overlay .earn-label{letter-spacing:.01em;}
#overlay .earn-check{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
#overlay .earn-btn{font-family:var(--serif);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,#e0cfa3 0%,#cdb88a 52%,#bca676 100%);border:1px solid var(--gold);border-radius:2px;padding:7px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:transform .12s;}
#overlay .earn-btn:active{transform:translateY(1px) scale(.97);}

/* ===== overlay result screens compose in with a gentle stagger (children live inside .ov-card) ===== */
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *{animation:fwRise .5s both;}
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *:nth-child(1){animation-delay:.03s;}
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *:nth-child(2){animation-delay:.11s;}
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *:nth-child(3){animation-delay:.19s;}
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *:nth-child(4){animation-delay:.27s;}
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *:nth-child(5){animation-delay:.35s;}
#overlay.screen:not(.landing):not(.finalwin) .ov-card > *:nth-child(6){animation-delay:.43s;}
/* loss screens settle in heavier/slower; the gamble warning lands last */
#overlay.loss .ov-card > *{animation-duration:.66s!important;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
#overlay.cleared .ov-card .gamble-note{animation-delay:.5s!important;}
/* the gamble-up button glints to tempt the risk (after it has composed in) */
@keyframes temptGlint{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,70,20,.25),0 2px 5px rgba(11,42,32,.3);}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 18px rgba(230,207,134,.5),0 2px 8px rgba(11,42,32,.3);}}
#overlay.cleared .btn.primary-deal{animation:fwRise .5s .35s both, temptGlint 2.2s 1s ease-in-out infinite;}

/* ===== prize chooser (real catalogue picks per tier) ===== */
#overlay .pick-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:330px;}
#overlay .pick{display:flex;align-items:baseline;gap:9px;width:100%;min-height:48px;text-align:left;cursor:pointer;
  font-family:var(--serif);color:var(--gold-text);background:var(--surface);border:1px solid rgba(176,140,43,.32);border-radius:2px;padding:12px 16px;transition:border-color .15s,box-shadow .15s,background .15s,transform .12s;}
#overlay .pick:active{transform:scale(.99);}
#overlay .pick:hover{border-color:rgba(176,140,43,.6);}
#overlay .pick .pick-house{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);flex:none;}
#overlay .pick .pick-name{font-size:16px;letter-spacing:.01em;}
#overlay .pick.sel{background:linear-gradient(180deg,#fbf4e2,#f3e9cf);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 0 12px rgba(176,140,43,.3);}
#overlay .pick.sel .pick-name,#overlay .pick.sel .pick-house{color:#5a4a08;}
#overlay .pick.sel .pick-name{font-weight:600;}

/* ===== phone fit: the lone deal / "Take your seat" CTA is a smaller, centred pill ===== */
#controls{min-height:0;padding:8px 14px calc(8px + env(safe-area-inset-bottom));}
/* but during a hand, reserve a constant action-bar height so the felt never jumps between turns */
#app:not(.is-landing) #controls{min-height:74px;padding-bottom:calc(12px + env(safe-area-inset-bottom));}
#controls > .btn.primary-deal{flex:initial;align-self:center;width:auto;min-width:220px;max-width:330px;padding:11px 30px;font-size:13px;letter-spacing:.13em;}
/* a touch more compaction on shorter phones so nothing is clipped */
@media (max-height:700px){
  #ladder{padding:2px 16px 4px;}
  .fw-head{font-size:22px;} .fw-tag{font-size:14px;} .fw-row{font-size:14px;padding:6px 2px;}
  #controls > .btn.primary-deal{padding:10px 28px;}
}

/* ===== keyboard focus states (accessible on every control, both layouts) ===== */
.ghost:focus-visible,.btn:focus-visible,.pick:focus-visible,.earn-btn:focus-visible,.chip-btn:focus-visible,.quick button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
input[type=range]:focus-visible{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(176,140,43,.55),0 1px 3px rgba(0,0,0,.4);}
.bank.betting:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* darker gold for tiny labels so they clear AA contrast on cream */
.card-eyebrow,.pick .pick-house,.tier-tell .tell-label,.earn-check{color:var(--gold-text);}

/* ===== desktop: a distinct FULL-SCREEN LANDSCAPE table — You sit left, the Perfumer sits right ===== */
@media (min-width:900px){
  html,body{overflow:hidden;}
  body{background:radial-gradient(130% 110% at 50% -10%, #f4f3ef 0%, #e9e7e2 60%, #dcdad4 100%);}
  #app{max-width:none;width:100vw;height:100dvh;}
  .topbar{padding:12px 28px 4px;}
  .brand h1{font-size:24px;line-height:1.05;}
  .ghost{padding:0 14px;}
  #ladder{padding:2px 28px 6px;}

  /* the felt is a wide landscape oval; narrower side tracks so it never overflows, clip any spill */
  #table{display:grid;grid-template-columns:minmax(190px,0.92fr) minmax(360px,1.55fr) minmax(190px,0.92fr);
    grid-template-rows:1fr;align-items:center;justify-items:center;gap:8px;min-height:0;
    margin:10px 24px 12px;padding:30px 42px;border-radius:230px / 150px;overflow:hidden;}

  /* both seats: identical internal order (plate → cards → bet), centred & matched-width — a balanced duel */
  .seat{width:100%;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;}
  .seat.me{grid-column:1;grid-row:1;}
  .middle{grid-column:2;grid-row:1;width:100%;gap:16px;}
  .seat.perfumer{grid-column:3;grid-row:1;}
  .seat .who{order:0;} .seat .felt-row{order:1;} .seat .bet-line{order:2;}
  .who{width:300px;max-width:min(300px,100%);justify-content:flex-start;padding:8px 15px;}
  .who .dealer-btn{margin-left:auto;}
  .meta .name{font-size:16px;}

  /* the Perfumer has a touch more gravity; the YOU avatar grows to match */
  .seat.perfumer .portrait{width:84px;height:84px;}
  .seat.me .avatar{width:54px;height:54px;} .seat.me .avatar svg{width:28px;height:28px;}

  /* chip banks centred beneath each player */
  .felt-row{flex-direction:column-reverse;align-items:center;gap:11px;width:auto;}
  .bank{position:static;justify-content:center;left:auto;bottom:auto;}

  /* bets advance toward the centre pot (inner felt edge, equal height) */
  .seat.me .bet-line{position:absolute;right:-4px;top:50%;transform:translateY(-50%);}
  .seat.perfumer .bet-line{position:absolute;left:-4px;top:50%;transform:translateY(-50%);}

  /* the board + pot are the centrepiece */
  .board{min-height:92px;} .board .card{width:60px;height:84px;}
  .perfumer .hole .card{width:58px;height:81px;} .me .hole .card{width:64px;height:90px;}
  .pot-val{font-size:38px;} .pot-label{font-size:12px;}
  .status{font-size:19px;min-height:30px;max-width:440px;}
  .felt-mark{font-size:48px;}

  /* banter bubble floats ABOVE the Perfumer plate, tail pointing down at him */
  .seat.perfumer .bubble{top:auto;bottom:calc(100% + 12px);left:50%;max-width:300px;}
  .seat.perfumer .bubble::after{top:auto;bottom:-6px;left:50%;transform:translateX(-50%);border-bottom:0;border-top:6px solid var(--surface);}

  /* deck rests in the top-centre of the felt */
  #deck{top:14%;right:auto;left:50%;transform:translate(-50%,-50%);}

  /* controls = a centred bottom bar of clean rectangle buttons, with a reserved height (no jump) */
  #controls{max-width:700px;margin:0 auto;padding:8px 14px 18px;min-height:74px;}
  #controls .actions{justify-content:center;gap:12px;}
  #controls .actions > .btn{flex:1 1 0;min-width:160px;max-width:220px;padding:14px 10px;}
  #controls > .btn.primary-deal{min-width:280px;max-width:340px;padding:14px 30px;}

  /* overlays: a composed verdict CARD, not a thin ribbon stranded in a cream void */
  #overlay{padding:48px;}
  #overlay .tier-name,#overlay h2{font-size:34px;}
  #overlay .crown-mark{font-size:54px;}
  #overlay p,#overlay .win-sub,#overlay .tier-persona,#overlay .ascend-note,#overlay .vials-left,#overlay .coach,#overlay .prize-detail{max-width:480px;}
  #overlay .tier-tell,#overlay .win-line,#overlay .gamble-note,#overlay .pick-list,#overlay .earn-list,#overlay .prize{max-width:480px;}
  #overlay .btn{max-width:340px;}
  #overlay .pick{font-size:16px;padding:11px 16px;} #overlay .pick .pick-name{font-size:17px;}
  #overlay .earn-row{font-size:15px;}

  /* landing hero — scoped to beat the unscoped #app.is-landing rules, so it actually scales up */
  #app.is-landing .fw-head{font-size:30px;} #app.is-landing .fw-tag{font-size:17px;line-height:1.42;max-width:460px;}
  #app.is-landing .fw-row{font-size:16px;} .fw-ladder{max-width:440px;} .felt-welcome{padding:0 8px;}
}

/* short desktop windows: compress the felt so the controls + YOU plate stay on-screen */
@media (min-width:900px) and (max-height:680px){
  #table{padding:16px 40px;}
  .me .hole .card{width:52px;height:73px;} .perfumer .hole .card{width:48px;height:67px;} .board .card{width:50px;height:70px;}
  .seat.perfumer .portrait{width:62px;height:62px;} .seat.me .avatar{width:46px;height:46px;}
  .pot-val{font-size:30px;} .felt-mark{font-size:34px;} .status{font-size:17px;}
  #controls{min-height:62px;padding-bottom:12px;}
}

/* landing must fit a phone: empty card rows + bet lines collapse so the seat CTA never clips */
#app.is-landing .hole,#app.is-landing .me .hole,#app.is-landing .perfumer .hole,#app.is-landing .bet-line{min-height:0;}
#app.is-landing .felt-welcome{gap:9px;}
#app.is-landing .fw-head{font-size:24px;}
#app.is-landing .fw-tag{font-size:14.5px;line-height:1.38;}
/* chip trays are gameplay furniture — hide them on the landing so they never overlap the plates */
#app.is-landing .bank{display:none;}

/* =================================================================================
   FEEL PASS v9 (9-lens audit) — staging, framing, tactility
   ================================================================================= */

/* ---- overlay: fade the verdict in like a dry-down, and hold a content card ---- */
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
#overlay.screen{transition:opacity .3s ease;animation:overlayIn .28s ease both;}
.ov-card{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;}

/* ---- showdown: the hole-card flip lifts toward you, then settles (anticipation+follow-through) ---- */
@keyframes cardFlipPop{0%{transform:rotateY(180deg) scale(1);}55%{transform:rotateY(40deg) scale(1.06);}100%{transform:rotateY(0) scale(1);}}
.card.revealing .card-inner{animation:cardFlipPop .55s cubic-bezier(.2,.8,.25,1) both;}

/* ---- chip tray: the tapped column physically depresses; hitting the ceiling 'thunks' ---- */
@keyframes colTap{0%{transform:translateY(0);}40%{transform:translateY(-2px) scale(.94);}100%{transform:translateY(0);}}
.bank.betting .chip-col.tapped{animation:colTap .18s ease;}
@keyframes maxNudge{0%,100%{transform:translateX(0);}33%{transform:translateX(-2px);}66%{transform:translateX(2px);}}
.bet-line.maxnudge{animation:maxNudge .2s ease;}

/* ---- the deal CTA's invite-breath stops the instant you press, so the sink reads ---- */
#controls > .btn.primary-deal:active{animation:none;transform:translateY(2px) scale(.985);box-shadow:inset 0 2px 5px rgba(90,70,20,.4);}

/* ---- mobile banter tail centres under the bubble instead of drifting at a fixed offset ---- */
.bubble::after{left:50%;transform:translateX(-50%);}

/* ---- the All-in shortcut in the raise tray wears a faint gilt keyline (the edge of the cliff) ---- */
.btn.allin-shortcut{position:relative;}
.btn.allin-shortcut::after{content:'';position:absolute;left:9px;right:9px;bottom:5px;height:1px;pointer-events:none;opacity:.6;background:linear-gradient(90deg,transparent,var(--champagne),transparent);}
.btn.armed{animation:temptGlint 1.1s ease;}

/* ---- reward goal buttons (Bank/Claim): dim but guide to the pick-list, then 'arm' when chosen ---- */
#overlay .btn.await{opacity:.55;cursor:not-allowed;}
@keyframes pickNudge{0%,100%{transform:translateX(0);}33%{transform:translateX(-3px);}66%{transform:translateX(3px);}}
#overlay .pick-list.nudge{animation:pickNudge .26s ease;}
#overlay .btn.ready{animation:fwRise .4s ease;}

/* ---- idle: the crowned Perfumer quietly inhabits the table between hands (slow, dignified) ---- */
@keyframes idleGlance{0%,100%{object-position:50% 18%;}45%{object-position:54% 17%;}}
#app.idle .seat.perfumer .portrait img{animation:idleGlance 11s ease-in-out infinite;}

/* ---- the all-in run-out stills the room and concentrates light on the pot ---- */
@keyframes runoutPot{0%,100%{box-shadow:0 0 18px rgba(230,207,134,.2);}50%{box-shadow:0 0 40px rgba(230,207,134,.5);}}
#table.runout .pot.live{animation:runoutPot 2.6s ease-in-out infinite;}
#table.runout::before{background:radial-gradient(circle at 50% 44%, transparent 40%, rgba(0,0,0,.5) 100%);transition:background .8s ease;}

/* ============ desktop landscape: frame the verdict + recompose the centre axis ============ */
@media (min-width:900px){
  /* the result overlay becomes a real centred cream plate with the house's gold hairline */
  #overlay.screen{padding:24px;}
  .ov-card{width:min(560px,90vw);gap:16px;background:var(--surface);border:1px solid rgba(176,140,43,.4);border-radius:2px;
    padding:38px 46px;box-shadow:0 18px 44px rgba(120,110,90,.3),inset 0 1px 0 rgba(255,255,255,.6);}
  #overlay.finalwin .ov-card{padding:42px 48px;}

  /* three center-anchored elements no longer collide: wordmark sinks to a lower watermark, banner clears the board */
  .felt-mark{top:78%;font-size:42px;opacity:.85;}
  .all-in-banner{top:30%;}

  /* the Perfumer's taunt leans inward across the felt toward you, not into the far corner */
  .seat.perfumer .bubble{left:auto;right:calc(100% - 56px);width:232px;max-width:232px;bottom:auto;top:50%;transform:translateY(-50%);}
  .seat.perfumer .bubble.show{animation:none;transform:translateY(-50%);} /* the translateX-based bpop doesn't apply here — fade in place */
  .seat.perfumer .bubble::after{top:50%;right:-6px;left:auto;bottom:auto;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--surface);border-right:0;border-bottom:0;}

  /* matched seat mass — the YOU plate gains a sub-line + larger avatar to equal the Perfumer's gravity */
  .seat.me .avatar{width:60px;height:60px;} .seat.me .avatar svg{width:30px;height:30px;}

  /* engraved seat stations ground each player in the otherwise-empty side columns */
  .seat.me::after,.seat.perfumer::after{content:attr(data-felt);position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
    font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(205,184,138,.13);text-shadow:0 1px 0 rgba(0,0,0,.35);pointer-events:none;white-space:nowrap;z-index:0;}
  #app.is-landing .seat.me::after,#app.is-landing .seat.perfumer::after{display:none;}

  /* a cursor passing the furniture earns a whisper of life (fine-pointer only, never on touch) */
  @media (hover:hover){
    .seat.perfumer .portrait{transition:transform .4s,box-shadow .4s,filter .35s;}
    .seat.perfumer .portrait:hover{transform:translateY(-2px) scale(1.03);box-shadow:inset 0 0 0 2px rgba(243,226,166,.7),0 0 18px 3px rgba(176,140,43,.4),0 6px 16px rgba(20,40,30,.45);}
    .pot{transition:box-shadow .4s;} .pot:hover{box-shadow:0 0 24px rgba(230,207,134,.3);}
  }

  /* the deck rests on a faint engraved shoe rather than floating in empty upper felt */
  #deck::after{content:'';position:absolute;inset:-6px -8px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(205,184,138,.18);pointer-events:none;}
}