:root{
  --bg:#ffffff;
  --surface:#f8f7f3;
  --rail:#c3ab6d;
  --felt-hi:#164434; --felt:#123D2E; --felt-lo:#0B2A20;
  --gold:#b08c2b;
  --gold-text:#83660b;
  --gold-hi:#E6CF86; --gold-lo:#8A6E1F;
  --champagne:#cdb88a;
  --cream:#F7F5EF;
  --ink:#1c1c1c;
  --ink-soft:rgba(35,32,26,.55);
  --claret:#7e2f2a; --claret-hi:#96423c; --claret-lo:#54201c;
  --noir:#17251f; --noir-hi:#22352c; --noir-lo:#0d1712;
  --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;}
button,input,select,textarea{font-family:var(--serif);}
#overlay,#overlay *{font-family:var(--serif);}
html,body{margin:0;height:100%;}
body{
  font-family:var(--serif);color:var(--gold-text);
  background:radial-gradient(140% 100% at 50% 0%, #fafafa 0%, #ffffff 60%, #f0f0f0 100%);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
#app{max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;position:relative;}

/* corner discs — identical chrome to the poker table */
.corner-btn{position:absolute;top:calc(4px + env(safe-area-inset-top));z-index:20;width:30px;height:30px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(circle at 38% 30%,rgba(24,60,46,.62),rgba(8,28,20,.64));border:1px solid rgba(230,207,134,.5);color:#E6CF86;
  box-shadow:inset 0 1px 0 rgba(243,226,166,.18),0 2px 9px rgba(4,20,14,.45);transition:transform .18s,border-color .2s,color .2s,box-shadow .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.corner-btn:hover{border-color:#F3E2A6;color:#F6E9B8;box-shadow:inset 0 1px 0 rgba(243,226,166,.25),0 0 14px rgba(230,207,134,.3),0 2px 9px rgba(4,20,14,.45);}
.corner-btn:active{transform:scale(.93);}
.corner-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.corner-btn .cbi{width:15px;height:15px;display:block;}
.corner-btn .snd-off{display:none;}
#soundBtn.muted .snd-on{display:none;}
#soundBtn.muted .snd-off{display:block;}
#soundBtn.muted{color:rgba(230,207,134,.55);}
.corner-tl{left:5px;}
.corner-tr{right:5px;}

/* ===== the felt ===== */
#table{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  margin:calc(8px + env(safe-area-inset-top)) 9px 4px;
  border-radius:30px;
  background:radial-gradient(ellipse 135% 116% at 50% 38%, #164636 0%, #123D2E 46%, #0B2A20 78%, #061e17 100%);
  box-shadow:
    inset 0 0 0 1px rgba(247,235,190,.9),
    inset 0 0 0 4px #dcc487,
    inset 0 0 0 8px #c3ab6d,
    inset 0 0 0 12px #97792f,
    inset 0 0 0 13px rgba(18,12,3,.5),
    inset 0 0 74px rgba(4,26,18,.64),
    0 20px 46px rgba(120,110,90,.32);
  padding:20px 16px 28px;overflow:hidden;
}
#table::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 40%, transparent 46%, rgba(0,0,0,.42) 100%);}
#table::after{content:'';position:absolute;inset:14px;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:18px;border-radius:20px;border:1px solid rgba(220,200,150,.3);box-shadow:inset 0 0 32px rgba(4,24,16,.3);pointer-events:none;z-index:1;}
.felt-mark{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:120px;height:150px;
  background:url('/gr-logo-gold.png') center/contain no-repeat;opacity:.07;font-size:0;pointer-events:none;z-index:1;}

/* ===== top: the wheel is the hero, a slim info strip beneath ===== */
.top-row{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;padding:2px 2px 8px;}
#wheelWrap{position:relative;flex:0 0 auto;width:min(84vw,320px);}
#wheelSvg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 24px rgba(3,18,12,.6));}

.info-strip{display:flex;align-items:stretch;gap:8px;width:100%;max-width:340px;}
.result{flex:1.15;display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;border-radius:4px;padding:4px 10px;
  background:linear-gradient(180deg,rgba(4,22,15,.55),rgba(4,22,15,.3));border:1px solid rgba(230,207,134,.28);box-shadow:inset 0 2px 8px rgba(0,0,0,.4);}
.res-num{font-size:34px;font-weight:600;letter-spacing:.04em;color:var(--cream);line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.6);}
.result.is-red .res-num{color:#e9a49b;}
.result.is-black .res-num{color:#dfe8e2;}
.result.is-zero .res-num{color:#e8c860;}
.result.punch .res-num{animation:resPunch .5s cubic-bezier(.2,.9,.3,1.4);}
@keyframes resPunch{0%{transform:scale(.55);opacity:.2;}60%{transform:scale(1.14);opacity:1;}100%{transform:scale(1);}}

.history{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;max-width:88px;}
.hist-dot{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:var(--cream);border:1px solid rgba(230,207,134,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);}
.hist-dot.red{background:radial-gradient(circle at 38% 30%,var(--claret-hi),var(--claret-lo));}
.hist-dot.black{background:radial-gradient(circle at 38% 30%,var(--noir-hi),var(--noir-lo));}
.hist-dot.zero{background:radial-gradient(circle at 38% 30%,#2f8666,#0e3527);color:#F3E2A6;}

.bankplate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 10px 7px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,254,251,.08),rgba(255,254,251,.03));border:1px solid rgba(230,207,134,.32);}
.bank-label{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,245,239,.66);}
.bank-val{font-size:22px;font-weight:600;color:#F3E2A6;line-height:1.05;text-shadow:0 1px 5px rgba(0,0,0,.55);}
.bank-next{font-size:10.5px;font-style:italic;color:rgba(247,245,239,.72);min-height:12px;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.bank-track{width:100%;height:4px;border-radius:2px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
.bank-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8A6E1F,#E6CF86);transition:width .5s ease;}

/* croupier bubble — same voice chrome as the poker table */
.bubble{position:absolute;top:4px;left:10px;max-width:250px;z-index:6;
  background:var(--surface);color:var(--ink);border:1px solid rgba(176,140,43,.5);border-radius:10px;padding:8px 12px;
  font-family:var(--serif);font-size:14px;font-style:italic;line-height:1.3;box-shadow:0 4px 14px rgba(11,42,32,.28);
  opacity:0;transform:translateY(-4px) scale(.97);transition:opacity .25s,transform .25s;pointer-events:none;}
.bubble.show{opacity:1;transform:translateY(0) scale(1);}
.bubble::after{content:'';position:absolute;bottom:-6px;left:26px;border:6px solid transparent;border-top-color:var(--surface);border-bottom:0;}

/* ===== betting board — the classic casino layout: continuous fine white lines on felt ===== */
#board{position:relative;z-index:2;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 2px 10px;scrollbar-width:thin;scrollbar-color:rgba(230,207,134,.4) transparent;}
.layout{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr 38px;gap:1px;max-width:342px;margin:0 auto;
  background:rgba(250,247,238,.82);border:1px solid rgba(250,247,238,.85);
  border-radius:26px 26px 4px 4px;overflow:hidden;
  box-shadow:0 0 0 4px rgba(9,38,27,.55),0 0 0 5px rgba(250,247,238,.35),0 6px 18px rgba(0,0,0,.35);}
.layout::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.07;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;}
.cell{position:relative;display:flex;align-items:center;justify-content:center;min-height:35px;border:0;border-radius:0;cursor:pointer;
  font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;letter-spacing:.01em;
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;
  background:#0d3b29;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.45);
  transition:filter .12s;user-select:none;-webkit-user-select:none;}
.cell:hover{filter:brightness(1.18);}
.cell:active{filter:brightness(1.32);}
.cell.red{background:#b01e2e;}
.cell.black{background:#17191d;}
.cell.zero{background:#12744a;grid-column:1 / -1;font-size:20px;color:#fff;min-height:42px;}
.cell.outside{background:#0d3b29;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#f3ecd9;}
.cell.dz{grid-column:4;writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;letter-spacing:.22em;min-height:0;}
.cell.colbet{font-size:12.5px;letter-spacing:.1em;}
.cell.diamond::before{content:'';width:17px;height:17px;transform:rotate(45deg) scale(.78,1);border:1px solid rgba(255,255,255,.85);}
.cell.diamond.red-d::before{background:#b01e2e;}
.cell.diamond.black-d::before{background:#17191d;}
.cell.hit{animation:cellHit 1.6s ease;}
@keyframes cellHit{0%{box-shadow:inset 0 0 0 2.5px #F3E2A6,inset 0 0 22px rgba(243,226,166,.55);}100%{box-shadow:none;}}
.cell.lit{box-shadow:inset 0 0 0 2px rgba(243,226,166,.85),inset 0 0 16px rgba(243,226,166,.4);filter:brightness(1.16);}
#board.locked .cell{pointer-events:none;opacity:.92;}
.cell.filler{cursor:default;pointer-events:none;min-height:0;}

/* the croupier's dolly, set on the winning number until the next spin */
.dolly{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;z-index:4;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#F8ECC4,#c9a24a 55%,#8A6E1F);
  box-shadow:0 2px 6px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 0 5px rgba(138,110,31,.5);
  animation:dollyIn .5s cubic-bezier(.2,.9,.3,1.45);}
.dolly::after{content:'';position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff8dd,#AE8A2A);}
@keyframes dollyIn{0%{transform:scale(.2) translateY(-16px);opacity:0;}60%{opacity:1;}100%{transform:scale(1) translateY(0);}}

/* the win amount floats off the plaque */
.result{position:relative;overflow:visible;}
.winfloat{position:absolute;right:10px;top:2px;font-size:17px;font-weight:700;color:#F3E2A6;text-shadow:0 1px 5px rgba(0,0,0,.65);
  pointer-events:none;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;animation:winUp 1.85s ease forwards;}
@keyframes winUp{0%{opacity:0;transform:translateY(10px);}16%{opacity:1;}100%{opacity:0;transform:translateY(-18px);}}
/* the casino's straight numerals everywhere chips and results live */
#wheelSvg text,.res-num,.hist-dot,.bank-val,.staked{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;}

/* a placed stake: one clay chip, centred on the cell, showing the total */
.bet-chip{position:absolute;left:50%;top:50%;width:31px;height:31px;margin:-15.5px 0 0 -15.5px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 2.5px 4px rgba(0,0,0,.55));animation:chipDrop .24s cubic-bezier(.2,.9,.3,1.25);}
.bet-chip svg{width:100%;height:100%;display:block;}
@keyframes chipDrop{0%{transform:scale(.4) translateY(-14px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}
.bet-chip.won{animation:chipWon .9s ease;}
@keyframes chipWon{0%,60%{filter:drop-shadow(0 0 8px rgba(243,226,166,.95));}100%{filter:drop-shadow(0 2.5px 4px rgba(0,0,0,.55));}}

/* ===== landing printed on the felt ===== */
.felt-welcome{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px 26px;}
#app.is-landing .felt-welcome{display:flex;}
#app.is-landing .top-row,#app.is-landing #board,#app.is-landing .status{visibility:hidden;}
.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:300px;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:302px;margin-top:2px;}
.fw-row{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:15px;color:var(--cream);padding:8px 2px;border-top:1px solid rgba(230,207,134,.22);}
.fw-row:first-child{border-top:0;}
.fw-num{font-size:12.5px;font-weight:500;letter-spacing:.12em;color:var(--gold-hi);min-width:24px;text-align:left;}
.fw-who{letter-spacing:.03em;white-space:nowrap;}
.fw-gift{margin-left:auto;font-style:italic;font-weight:500;color:#e8c860;text-align:right;}
.fw-row:last-child .fw-gift{font-size:16px;}
.fw-credits{font-family:var(--serif);font-size:13px;letter-spacing:.04em;color:rgba(247,245,239,.78);text-shadow:0 1px 3px rgba(0,0,0,.5);margin-top:3px;}

.status{position:relative;z-index:2;flex:0 0 auto;text-align:center;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.25;color:rgba(247,245,239,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);padding:6px 8px 2px;min-height:22px;}

/* ===== cash-out bar ===== */
#cashbar{flex:0 0 auto;padding:0 10px;}
#cashbar .cashout{width:100%;border-radius:2px;padding:11px 8px;font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  color:var(--ink);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);
  transition:transform .15s,box-shadow .15s;}
#cashbar .cashout:active{transform:translateY(1px) scale(.995);}
#cashbar .cashout.arm{animation:cashPulse 1.9s ease-in-out infinite;}
@keyframes cashPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 5px rgba(11,42,32,.3);}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 18px rgba(176,140,43,.55);}}

/* ===== chip picker — the rack of clay chips ===== */
#chipbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 2px;}
.chip-picks{display:flex;gap:10px;align-items:flex-end;}
.chip-btn{width:52px;height:52px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;position:relative;
  filter:drop-shadow(0 3px 6px rgba(11,42,32,.4));transition:transform .18s cubic-bezier(.2,.8,.3,1),filter .2s;outline-offset:4px;}
.chip-btn svg{width:100%;height:100%;display:block;}
.chip-btn:hover{transform:translateY(-3px);}
.chip-btn:active{transform:scale(.93);}
.chip-btn.sel{transform:translateY(-7px);
  filter:drop-shadow(0 0 7px rgba(230,207,134,.75)) drop-shadow(0 6px 10px rgba(11,42,32,.45));}
.chip-btn.sel::after{content:'';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:26px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#E6CF86,transparent);}
.staked{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--gold-text);text-align:right;line-height:1.3;min-width:86px;}
.staked b{font-style:normal;font-weight:600;}

/* ===== controls ===== */
#controls{flex:0 0 auto;display:flex;gap:8px;padding:7px 10px calc(10px + env(safe-area-inset-bottom));}
.btn{flex:1;min-width:0;border-radius:2px;padding:15px 8px;font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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[disabled]{opacity:.45;pointer-events:none;}
#controls > .btn.primary-deal{animation:dealBreath 2.6s ease-in-out infinite;}
@keyframes dealBreath{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 5px rgba(11,42,32,.3);}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 14px rgba(176,140,43,.42);}}

/* ===== overlay (screens) — same chrome as the poker table ===== */
#overlay{position:absolute;inset:0;background:rgba(255,255,255,.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;}
#overlay.hidden{opacity:0;pointer-events:none;}
#overlay.screen{gap:15px;background:rgba(250,250,250,.992);backdrop-filter:blur(7px);transition:opacity .3s ease;animation:overlayIn .28s ease both;}
@keyframes overlayIn{0%{opacity:0;}100%{opacity:1;}}
.ov-card{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;}
#overlay .btn{flex:initial;width:100%;max-width:260px;padding:14px 8px;}
#overlay .btn.ghost-deal{background:transparent;border:1px solid rgba(176,140,43,.45);color:var(--gold-text);box-shadow:none;font-weight:500;animation:none;}
#overlay .btn.ghost-deal:hover{background:rgba(176,140,43,.08);}
#overlay .btn[disabled]{opacity:.5;pointer-events:none;}
#overlay .card-eyebrow{font-family:var(--serif);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text);}
#overlay .tier-name{font-size:26px;line-height:1.08;font-weight:500;color:var(--gold-text);margin:0;}
#overlay .prize-detail{font-family:var(--serif);font-style:italic;font-size:14.5px;color:#6f5709;margin:-4px 0 0;}
#overlay .win-sub{font-style:normal;font-size:12.5px;letter-spacing:.03em;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 .crown-mark{font-size:38px;}
#overlay.screen .ov-card > *{animation:fwRise .5s both;}
#overlay.screen .ov-card > *:nth-child(1){animation-delay:.03s;}
#overlay.screen .ov-card > *:nth-child(2){animation-delay:.11s;}
#overlay.screen .ov-card > *:nth-child(3){animation-delay:.19s;}
#overlay.screen .ov-card > *:nth-child(4){animation-delay:.27s;}
#overlay.screen .ov-card > *:nth-child(5){animation-delay:.35s;}
#overlay.screen .ov-card > *:nth-child(6){animation-delay:.43s;}
@keyframes fwRise{0%{opacity:0;transform:translateY(9px);}100%{opacity:1;transform:translateY(0);}}

#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;
  background:var(--surface);border:1px solid rgba(176,140,43,.35);border-radius:2px;padding:10px 14px;color:var(--ink);transition:border-color .15s,background .15s,transform .1s;}
#overlay .pick:active{transform:scale(.99);}
#overlay .pick:hover{border-color:rgba(176,140,43,.6);}
#overlay .pick .pick-house{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);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;}
#overlay .pick-list.nudge{animation:pickNudge .26s ease;}
@keyframes pickNudge{0%,100%{transform:translateX(0);}30%{transform:translateX(-5px);}65%{transform:translateX(5px);}}

#overlay .claim-cash{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--serif);font-style:italic;font-size:14px;color:#6f5709;}
#overlay .claim-cash .cash-coin{width:15px;height:15px;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;}
#overlay .claim-form{display:flex;flex-direction:column;gap:11px;width:100%;max-width:330px;}
#overlay .claim-input{font-family:var(--serif);font-size:16px;color:var(--ink);background:#fff;border:1px solid rgba(176,140,43,.5);border-radius:2px;padding:13px 14px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;}
#overlay .claim-input::placeholder{color:rgba(35,32,26,.4);font-style:italic;}
#overlay .claim-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,140,43,.16);}
#overlay .claim-age{display:flex;align-items:flex-start;gap:9px;font-family:var(--serif);font-size:14px;line-height:1.35;color:#6f5709;text-align:left;cursor:pointer;}
#overlay .claim-age input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin-top:1px;border:1px solid rgba(176,140,43,.6);border-radius:2px;background:#fff;cursor:pointer;position:relative;transition:.15s;}
#overlay .claim-age input:checked{background:linear-gradient(180deg,#e0cfa3,#cdb88a);border-color:var(--gold);}
#overlay .claim-age input:checked::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#3a2d06;font-weight:700;}
#overlay .claim-age input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
#overlay .claim-err{font-family:var(--serif);font-style:italic;font-size:14px;color:#9a3526;min-height:0;margin:0;}
#overlay .claim-code{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:.12em;color:#5a4a08;background:linear-gradient(180deg,#fbf4e2,#f3e9cf);border:1px dashed var(--gold);border-radius:3px;padding:14px 20px;user-select:all;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
#overlay .claim-code .cc{display:inline-block;animation:ccIn .4s both;}
@keyframes ccIn{0%{opacity:0;transform:translateY(6px) scale(.7);}100%{opacity:1;transform:translateY(0) scale(1);}}
#overlay .claim-code .cc{animation-delay:calc(var(--i) * 45ms);}

#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:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:600;}
#overlay .earn-btn{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer;white-space:nowrap;background:linear-gradient(180deg,#e0cfa3,#cdb88a);border:1px solid var(--gold);border-radius:2px;padding:7px 12px;}
#overlay .earn-btn:active{transform:translateY(1px) scale(.97);}

.ghost:focus-visible,.btn:focus-visible,.pick:focus-visible,.earn-btn:focus-visible,.chip-btn:focus-visible,.cell:focus-visible,#cashbar .cashout:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* desktop inside the wide store iframe: same portrait column, a touch roomier */
@media (min-width:700px){
  #app{max-width:520px;}
  #wheelWrap{width:min(80vw,360px);}
  .info-strip{max-width:380px;}
  .layout{max-width:380px;}
  .cell{min-height:38px;}
  #overlay .pick{font-size:16px;padding:11px 16px;}
  #overlay .pick .pick-name{font-size:17px;}
  #overlay .earn-row{font-size:15px;}
  #overlay .crown-mark{font-size:54px;}
}
/* true desktop: one wide felt, wheel at the left hand, the layout at the right —
   the classic table orientation instead of a stretched phone column */
@media (min-width:900px){
  #app{max-width:1080px;}
  #table{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:minmax(0,1fr) auto;
    column-gap:26px;align-items:center;padding:22px 30px 24px;}
  .top-row{grid-column:1;grid-row:1;padding:0;}
  #wheelWrap{width:min(34vw,390px);}
  .info-strip{max-width:390px;}
  #board{grid-column:2;grid-row:1;flex:none;align-self:center;width:100%;max-height:100%;padding:4px 0;}
  .layout{max-width:372px;}
  .cell{min-height:32px;font-size:17px;}
  .cell.zero{min-height:40px;}
  .status{grid-column:1 / -1;grid-row:2;padding:8px 8px 0;}
  .felt-welcome{gap:14px;}
  .fw-head{font-size:34px;max-width:460px;}
  .fw-tag{font-size:16px;max-width:430px;}
  .fw-ladder{max-width:360px;}
  .bubble{max-width:300px;}
  #cashbar,#chipbar,#controls{width:100%;max-width:760px;margin:0 auto;}
}
@media (max-width:420px){
  #overlay .claim-code{font-size:20px;letter-spacing:.1em;padding:12px 14px;}
}
@media (max-height:700px){
  #wheelWrap{width:min(66vw,250px);}
  .res-num{font-size:28px;}
  .bank-val{font-size:19px;}
  .result{min-height:48px;}
  .cell{min-height:30px;font-size:16px;}
  .btn{padding:12px 8px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}