:root{
  --void:#000000;
  --lit:#171613;
  --stock-hi:#FFFEFB;
  --stock-lo:#EFEBE1;
  --ink:#0B0B0B;
  --rouge:#B3121F;
  --hair:rgba(255,255,255,.10);
  --quiet:#8A867E;

  --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --cw:clamp(92px,15vw,222px);
  --foil:linear-gradient(176deg,#FFFFFF 0%,#FFFFFF 26%,#8F8C85 48%,#FFFFFF 62%,#E6E2D9 82%,#A9A69F 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:var(--ui);
  color:#EDEAE3;
  background:var(--void);
  display:flex; justify-content:center;
  overflow-x:hidden;
}

/* a single light source: the table is dark, the hand is lit */
.room{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  background:
    radial-gradient(ellipse 64% 44% at 50% 52%, rgba(44,41,35,.82) 0%, rgba(18,17,15,.5) 40%, rgba(0,0,0,0) 74%),
    radial-gradient(ellipse 130% 92% at 50% 38%, #0F0E0C 0%, #000 72%);
}

.keylight{
  position:absolute; left:50%; top:50%;
  width:100vw; height:64vw;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(255,247,233,.075) 0%, rgba(255,247,233,.022) 38%, rgba(0,0,0,0) 70%);
  animation:breathe 13s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes breathe{
  0%,100%{ opacity:.82; transform:translate(-50%,-50%) scale(1) }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.05) }
}

.veil{ position:absolute; border-radius:50%; filter:blur(52px); will-change:transform }
.veil.a{
  width:78vw; height:54vw; left:-10vw; top:-4vw;
  background:radial-gradient(circle, rgba(255,245,228,.05) 0%, rgba(255,245,228,0) 68%);
  animation:driftA 37s ease-in-out infinite alternate;
}
.veil.b{
  width:66vw; height:50vw; right:-12vw; top:16vw;
  background:radial-gradient(circle, rgba(244,242,238,.038) 0%, rgba(244,242,238,0) 68%);
  animation:driftB 53s ease-in-out infinite alternate;
}
.veil.c{
  width:92vw; height:42vw; left:6vw; bottom:-16vw;
  background:radial-gradient(circle, rgba(255,239,216,.042) 0%, rgba(255,239,216,0) 70%);
  animation:driftC 43s ease-in-out infinite alternate;
}
@keyframes driftA{ from{transform:translate3d(0,0,0) scale(1)}    to{transform:translate3d(10vw,6vw,0) scale(1.18)} }
@keyframes driftB{ from{transform:translate3d(0,0,0) scale(1.12)} to{transform:translate3d(-9vw,-5vw,0) scale(1)} }
@keyframes driftC{ from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(-7vw,-4vw,0) scale(1.22)} }

.sheen{
  position:absolute; inset:-35%;
  background:linear-gradient(104deg, transparent 38%, rgba(255,250,240,.026) 50%, transparent 62%);
  animation:sweep 21s linear infinite;
  will-change:transform;
}
@keyframes sweep{ from{transform:translateX(-44%)} to{transform:translateX(44%)} }

.motes{ position:absolute; inset:0 }
.mote{
  position:absolute; bottom:-4vh; border-radius:50%;
  background:#FFF8EC; opacity:0;
  animation:rise linear infinite; will-change:transform,opacity;
}
@keyframes rise{
  0%  { transform:translate3d(0,0,0);              opacity:0 }
  14% { opacity:var(--o) }
  80% { opacity:var(--o) }
  100%{ transform:translate3d(var(--dx),-108vh,0); opacity:0 }
}

.flare{
  position:absolute; left:50%; top:52%;
  width:74vw; height:42vw; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,252,245,.11) 0%, rgba(0,0,0,0) 66%);
  opacity:0; transition:opacity 1s ease-out;
}
.flare.on{ opacity:1; transition:opacity .1s ease-out }
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.frame{
  position:relative; z-index:1;
  width:min(1480px,100%);
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:calc(clamp(16px,2vw,28px) + env(safe-area-inset-top))
          calc(clamp(16px,3vw,52px) + env(safe-area-inset-right))
          calc(clamp(18px,2.4vw,34px) + env(safe-area-inset-bottom))
          calc(clamp(16px,3vw,52px) + env(safe-area-inset-left));
}

/* ── masthead ─────────────────────────────────────────── */
header{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-bottom:clamp(12px,1.5vw,20px);
  border-bottom:1px solid var(--hair);
}
.mark{ text-align:center; line-height:1 }
.mark b{
  display:block;
  font-family:var(--display); font-weight:500;
  font-size:clamp(24px,2.9vw,42px);
  letter-spacing:.2em; text-indent:.2em;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mark span{
  display:block; margin-top:9px;
  font-size:10.5px; letter-spacing:.42em; text-indent:.42em; color:#6E6A63;
}

.chip{
  font-family:var(--ui); font-size:12px; color:#8A867E;
  background:rgba(255,255,255,.02);
  border:1px solid var(--hair); border-radius:999px;
  padding:9px 16px; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.chip:hover{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.05) }
.chip:focus-visible{ outline:1px solid #fff; outline-offset:3px }
.l{ justify-self:start } .r{ justify-self:end }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px }
.icon-btn svg{ display:block }

/* ── the figure ───────────────────────────────────────── */
.stage{
  position:relative;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2vw,30px);
  padding:clamp(10px,1.6vw,24px) 0;
}

.balance-wrap{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height:clamp(70px,10vw,132px);
}
.balance-block{ text-align:center }
.balance-block.mini{ position:absolute; left:0; top:50%; transform:translateY(-50%); text-align:left }
.mini-label{
  display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--quiet); margin-bottom:8px;
}

.balance{
  font-family:var(--display); font-weight:400;
  font-size:clamp(50px,8.4vw,118px); line-height:.86;
  letter-spacing:-.022em; font-variant-numeric:tabular-nums;
  color:#FFFFFF;
  filter:drop-shadow(0 3px 22px rgba(255,255,255,.10));
}
.balance .sym{ font-size:.38em; vertical-align:.66em; margin-right:.04em; -webkit-text-fill-color:#77736C }
.balance .c{ font-size:.42em; vertical-align:.74em; margin-left:.05em }

.hand-amount{
  margin-top:calc(-1 * clamp(14px,2vw,30px) + 10px);
  font-family:var(--ui); font-size:clamp(14px,1.6vw,18px);
  color:var(--quiet); text-align:center;
}
.hand-amount b{ color:#EDEAE3; font-weight:600 }

.table{ display:flex; flex-direction:column; align-items:center }

.hand{ display:flex; gap:clamp(7px,1.05vw,19px); align-items:flex-end }
.slot{ display:flex; flex-direction:column; align-items:center; gap:12px }

.card{
  position:relative; display:block;
  width:var(--cw); aspect-ratio:5/7;
  border:none; padding:0; cursor:pointer;
  border-radius:calc(var(--cw) * .062);
  background:linear-gradient(163deg,var(--stock-hi) 0%,#FBF8F1 42%,var(--stock-lo) 100%);
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(0,0,0,.9),
    0 26px 44px -12px rgba(0,0,0,.92),
    0 60px 80px -40px rgba(0,0,0,.9);
  transition:transform .3s cubic-bezier(.2,.9,.28,1), box-shadow .3s, filter .3s;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute;
  inset:calc(var(--cw) * .042);
  border:1px solid rgba(11,11,11,.17);
  border-radius:calc(var(--cw) * .032);
  pointer-events:none;
}
.card::after{
  content:""; position:absolute;
  inset:calc(var(--cw) * .058);
  border:1px solid rgba(11,11,11,.09);
  border-radius:calc(var(--cw) * .024);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){ .card:hover{ transform:translateY(-9px) } }
.card:focus-visible{ outline:1px solid #fff; outline-offset:6px }
.card:disabled{ cursor:default }

/* Held cards stay flush ("down") — it's the cards that will actually
   change on redraw (not held) that lift, so the lift reads as "this one
   is about to be replaced," not "this one is being kept." */
.card.pending{
  transform:translateY(-24px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1.5px rgba(255,255,255,.92),
    0 0 46px rgba(255,255,255,.22),
    0 30px 52px -12px rgba(0,0,0,.95);
}
@media (hover:hover) and (pointer:fine){ .card.pending:hover{ transform:translateY(-29px) } }

.card.dim{ filter:brightness(.55) saturate(.85) }

@keyframes win-pulse{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1.5px rgba(255,255,255,.85),
      0 0 40px rgba(255,255,255,.28),
      0 30px 52px -12px rgba(0,0,0,.95);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 2.5px rgba(255,255,255,1),
      0 0 74px rgba(255,255,255,.55),
      0 30px 52px -12px rgba(0,0,0,.95);
  }
}
/* No lift once a hand is final — a raised winning card can crowd/overlap
   the message line below it, especially in portrait; the pulsing glow
   alone is enough to mark the winning cards, and it keeps every card in
   the resolved hand flush at the same height. */
.card.win-glow{
  animation:win-pulse 1.1s ease-in-out infinite;
}

.plate{
  position:absolute;
  inset:calc(var(--cw) * .1) calc(var(--cw) * .215);
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding:calc(var(--cw) * .05) 0;
}
.plate .suit{
  display:block; flex:none;
  width:calc(var(--cw) * .2); height:calc(var(--cw) * .2);
}
.plate .letter{
  font-family:var(--display); font-weight:500;
  font-size:calc(var(--cw) * .52); line-height:.76;
  letter-spacing:-.02em;
}
.plate .letter.wide{ font-size:calc(var(--cw) * .38); letter-spacing:-.05em }

.spade,.club{ fill:#0B0B0B }
.heart,.diamond{ fill:var(--rouge) }
.red{ color:var(--rouge) }

/* face-down card, used only for the gamble round */
.card.back{
  background:linear-gradient(155deg,#1c1a16 0%,var(--lit) 45%,#0b0a08 100%);
  display:flex; align-items:center; justify-content:center;
}
.card.back .plate{ display:none }
.card.back .mono{
  font-family:var(--display); font-weight:500;
  font-size:calc(var(--cw) * .16);
  color:#8A867E;
  border:1px solid var(--hair);
  border-radius:50%;
  width:calc(var(--cw) * .34); height:calc(var(--cw) * .34);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4);
}
.card.back.revealed .mono{ display:none }
.card.back.revealed .plate{ display:flex }
.card.back.revealed{ background:linear-gradient(163deg,var(--stock-hi) 0%,#FBF8F1 42%,var(--stock-lo) 100%); }

.tag{
  font-size:10px; letter-spacing:.2em; text-indent:.2em; height:12px;
  color:#6E6A63; opacity:0; transition:opacity .25s;
}
.slot.on .tag{ opacity:1; color:#EDEAE3 }

.pool{
  width:min(94%,calc(var(--cw) * 6.4));
  height:clamp(26px,4vw,64px);
  margin-top:-6px;
  pointer-events:none;
  background:radial-gradient(ellipse 62% 100% at 50% 0%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 78%);
}

.note{ font-size:clamp(12.5px,1vw,14.5px); color:var(--quiet); text-align:center; letter-spacing:.005em }
.note b{ color:#EDEAE3; font-weight:600 }
.note.win{ color:#EDEAE3 }
.note.lose{ color:#B3121F }

/* ── gamble row ───────────────────────────────────────── */
.gamble-row{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,3vw,36px);
}
.gamble-card-wrap{ --cw:clamp(150px, min(24vw,38vh), 340px) }
.btn.flank{
  min-width:180px;
  align-self:stretch;
  flex-direction:column;
  gap:10px;
  padding:clamp(20px,2.4vw,34px) clamp(24px,2.6vw,40px);
}
.btn.flank .range{
  font-family:var(--ui); font-weight:400;
  font-size:.5em; letter-spacing:.18em; text-indent:.18em;
  opacity:.6;
}

/* ── menu / buy credits / leaderboard ─────────────────── */
.overlay{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.68);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.sheet{
  width:min(440px,100%);
  max-height:min(640px,86vh);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#18170F 0%,#0c0b09 100%);
  border:1px solid var(--hair);
  border-radius:18px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.6);
  overflow:hidden;
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--hair);
  flex:none;
}
.sheet-title{
  font-family:var(--display); font-weight:500; font-size:17px;
  letter-spacing:.14em; text-indent:.14em; text-transform:uppercase;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sheet-close{
  font-family:var(--ui); font-size:24px; line-height:1; color:var(--quiet);
  background:none; border:none; cursor:pointer; padding:2px 6px;
}
.sheet-close:hover{ color:#fff }
.sheet-body{ padding:20px 22px 26px; overflow-y:auto }
.sheet-note{ margin-top:16px; text-align:left }

.menu-list{ display:flex; flex-direction:column; gap:10px }
.menu-item{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--display); font-size:16px; letter-spacing:.03em;
  color:#EDEAE3;
  background:rgba(255,255,255,.02);
  border:1px solid var(--hair); border-radius:12px;
  padding:16px 18px; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.menu-item:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.28) }
.menu-item .chev{ color:var(--quiet); font-size:19px }

.back-btn{
  display:inline-block;
  font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--quiet); background:none; border:none; cursor:pointer;
  margin-bottom:16px; padding:4px 0;
}
.back-btn:hover{ color:#fff }

.field{
  display:block; width:100%;
  font-family:var(--ui); font-size:14px; color:#EDEAE3;
  background:rgba(255,255,255,.03); border:1px solid var(--hair); border-radius:10px;
  padding:13px 14px; margin-bottom:10px;
}
.field::placeholder{ color:#6E6A63 }
.field:focus{ outline:none; border-color:rgba(255,255,255,.35) }

.btn.wide{ width:100%; box-sizing:border-box }
.account-action{ margin-top:14px }

.oauth-row{ display:flex; flex-direction:column; gap:10px; margin-top:16px }
.oauth-btn{
  font-family:var(--ui); font-size:13px; color:#EDEAE3;
  background:rgba(255,255,255,.02); border:1px solid var(--hair); border-radius:10px;
  padding:13px 14px; cursor:pointer; transition:background .2s, border-color .2s;
}
.oauth-btn:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.28) }

.account-name{ font-family:var(--display); font-size:22px; color:#fff; margin-bottom:4px }

.credits-grid{ display:flex; flex-direction:column; gap:12px }
.credit-tile{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--display);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF9F3 14%,#E2DED4 40%,#FFFEFA 52%,#E8E4DA 66%,#C6C1B6 88%,#AEA9A0 100%);
  border:1px solid #6E6A62;
  border-radius:12px;
  padding:16px 20px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(0,0,0,.4);
  transition:transform .2s;
}
.credit-tile:hover{ transform:translateY(-2px) }
.credit-tile:active{ transform:translateY(1px) }
.credit-amount{ font-size:18px; font-weight:500; color:#12110F }
.credit-price{ font-family:var(--ui); font-size:14px; color:#4A463F; border-left:1px solid rgba(18,17,15,.22); padding-left:14px }

.lb-tabs{
  display:flex; gap:6px; overflow-x:auto; margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--hair);
  scrollbar-width:none;
}
.lb-tabs::-webkit-scrollbar{ display:none }
.lb-tab{
  flex:none;
  font-family:var(--ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--quiet); background:none; border:1px solid var(--hair); cursor:pointer;
  padding:8px 13px; border-radius:999px;
  white-space:nowrap;
  transition:color .2s, background .2s, border-color .2s;
}
.lb-tab.active{ color:#12110F; background:var(--foil); border-color:transparent }
.lb-tab:hover:not(.active){ color:#fff; border-color:rgba(255,255,255,.28) }

.lb-list{
  display:flex; flex-direction:column; gap:4px;
  max-height:min(48vh,380px); overflow-y:auto;
  padding-right:2px; margin:-2px -2px 0 0;
}
.lb-status{ text-align:center; color:var(--quiet); font-size:12.5px; padding:16px 0 }
.lb-row{
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:10px;
}
.lb-rank{ font-family:var(--display); font-size:15px; color:var(--quiet); width:48px; flex:none }
.lb-name{ flex:1; font-family:var(--ui); font-size:14px; color:#C9C5BC; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lb-amount{ font-family:var(--ui); font-size:13px; color:var(--quiet); font-variant-numeric:tabular-nums; flex:none }
.lb-row.me{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.24);
}
.lb-row.me .lb-rank, .lb-row.me .lb-name{ color:#fff; font-weight:600 }
.lb-row.me .lb-amount{ color:#EDEAE3 }

/* ── celebration overlay ──────────────────────────────── */
/* A brief, high-contrast full-screen takeover (not a small badge) so the
   hand name reads instantly even for a fast "TWO PAIR" — plain bold
   white, not the foil gradient (too low-contrast to read quickly). */
.celebrate{
  position:fixed; inset:0; z-index:65;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
}
.celebrate-text{
  font-family:var(--display); font-weight:800;
  letter-spacing:.08em; text-indent:.08em; text-transform:uppercase;
  font-size:clamp(34px,7.5vw,68px); text-align:center; text-wrap:balance;
  color:#FFFFFF;
  text-shadow:0 6px 30px rgba(0,0,0,.85), 0 0 46px rgba(255,255,255,.3);
  padding:0 28px;
}
.celebrate.tier-jackpot .celebrate-text{ font-size:clamp(40px,9vw,84px) }
.celebrate.show{
  background:rgba(0,0,0,.86);
  animation:celebrate-pop .9s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes celebrate-pop{
  0%{ opacity:0; transform:scale(.8) }
  10%{ opacity:1; transform:scale(1.05) }
  18%{ transform:scale(1) }
  72%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.03) }
}

/* ── action bar ───────────────────────────────────────── */
footer{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  padding-top:clamp(12px,1.6vw,20px);
  border-top:1px solid var(--hair);
}
.btn{
  position:relative;
  font-family:var(--display);
  font-size:clamp(12px,.98vw,14.5px);
  font-weight:600;
  letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:clamp(15px,1.5vw,21px) clamp(28px,3.4vw,50px);
  border-radius:10px;
  min-width:190px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .28s,
             background .22s, color .22s, border-color .22s, opacity .2s;
}
.btn::before{
  content:""; position:absolute; inset:4px;
  border-radius:7px; pointer-events:none;
  transition:border-color .22s;
}
.btn .p{
  font-family:var(--ui); font-weight:400;
  font-size:.95em; letter-spacing:0; text-indent:0;
  font-variant-numeric:tabular-nums;
  margin-left:clamp(16px,1.8vw,24px);
  padding-left:clamp(16px,1.8vw,24px);
}
.btn:focus-visible{ outline:1px solid #fff; outline-offset:5px }
.btn:disabled{ opacity:.4; cursor:not-allowed }
[hidden]{ display:none !important }

.ghost{
  background:rgba(255,255,255,.015);
  color:#7E7A72;
  border:1px solid rgba(255,255,255,.14);
}
.ghost::before{ border:1px solid rgba(255,255,255,.055) }
.ghost .p{ border-left:1px solid rgba(255,255,255,.12); color:#65615A }
.ghost:hover{
  color:#E4E0D8;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.045);
}
.ghost:hover::before{ border-color:rgba(255,255,255,.12) }
.ghost:active{ transform:translateY(1px) }

.primary{
  border:1px solid #6E6A62;
  color:#12110F;
  background:linear-gradient(180deg,
    #FFFFFF 0%, #FBF9F3 14%, #E2DED4 40%,
    #FFFEFA 52%, #E8E4DA 66%, #C6C1B6 88%, #AEA9A0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.6),
    0 14px 34px -10px rgba(255,250,238,.34);
}
.primary::before{ border:1px solid rgba(18,17,15,.18) }
.primary .p{ border-left:1px solid rgba(18,17,15,.22); color:#4A463F }
.primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 3px 6px rgba(0,0,0,.6),
    0 22px 52px -10px rgba(255,250,238,.52);
}
.primary:active{
  transform:translateY(1px);
  background:linear-gradient(180deg,
    #E6E2D8 0%, #F4F1EA 30%, #D8D4CA 60%, #BDB8AE 100%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.5);
}

/* one orchestrated moment: the deal */
@keyframes deal{
  from{ opacity:0; transform:translateY(38px) rotate(var(--t)) scale(.95) }
  to  { opacity:1; transform:translateY(0) rotate(0) scale(1) }
}
.card{ animation:deal .7s cubic-bezier(.16,.86,.3,1) backwards; animation-delay:var(--d) }

@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }

@media (max-width:640px){
  .sheen,.veil.b{ display:none }
  .veil{ filter:blur(38px) }
  :root{ --cw:clamp(54px,17.4vw,98px) }
  .hand{ gap:5px }
  .mark b{ letter-spacing:.13em; text-indent:.13em }
  .chip{ padding:7px 12px; font-size:11px }
  footer{ gap:9px }
  .btn{ flex:1 1 40%; min-width:0; justify-content:center; padding:15px 10px; letter-spacing:.14em; text-indent:.14em }
  .btn .p{ margin-left:11px; padding-left:11px }
  /* Balance/Win during the gamble round: keep the same layout as desktop
     (mini balance pinned left, Win centered) instead of stacking them —
     stacked-and-centered was fine at first glance but reads worse than
     just reusing the layout that already works everywhere else. */

  /* Portrait phones are much taller than the design was drawn for — with
     .stage stretching to fill the whole viewport and centering its
     content, the action buttons ended up pinned far below the note text
     instead of following right after it. Let the frame size to its
     actual content and sit at the top instead of being stretched/centered
     to fill 100vh. */
  body{ align-items:flex-start }
  .frame{ min-height:auto }
  .stage{ flex:none; justify-content:flex-start }

  /* The Small/GL/Big gamble row was drawn for desktop widths — its
     buttons have a fixed 180px min-width that doesn't fit next to even a
     shrunk gamble card on a phone, pushing them off-screen. */
  .gamble-row{ gap:8px }
  .gamble-card-wrap{ --cw:clamp(72px,24vw,120px) }
  .btn.flank{ min-width:0; flex:1 1 0; padding:14px 8px }
  .btn.flank .range{ font-size:.46em }
}

/* Landscape phones are short (~380-460px tall) but the card/balance/button
   sizing was tuned against viewport WIDTH (vw), which is now the LARGE
   dimension — everything overflows the short viewport and the footer
   buttons end up unreachable. Re-tune the same elements against height,
   and let .stage fill and center within the frame (rather than pinning
   everything to the top) so the layout uses the full screen instead of
   leaving a dead band of empty space below the footer. */
@media (orientation:landscape) and (max-height:520px){
  .frame{
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  header{ padding-bottom:8px }
  .mark b{ font-size:clamp(18px,5.2vh,26px) }
  .mark span{ margin-top:5px; font-size:10.5px }
  .chip{ padding:8px 14px; font-size:11.5px }
  .stage{ gap:clamp(12px,3vh,26px); padding:0 }
  .balance-wrap{ min-height:0 }
  .balance{ font-size:clamp(34px,12.5vh,60px) }
  .hand-amount{ margin-top:calc(-1 * clamp(12px,3vh,26px) + 5px); font-size:13px }
  :root{ --cw:clamp(58px,21vh,112px) }
  .slot{ gap:6px }
  .tag{ height:10px; font-size:8.5px }
  .note{ font-size:12.5px }
  .gamble-card-wrap{ --cw:clamp(74px,26vh,132px) }
  .gamble-row{ gap:10px }
  .btn.flank{ min-width:0; flex:1 1 0; padding:13px 10px; gap:6px }
  .btn.flank .range{ font-size:.44em }
  footer{ padding-top:10px; gap:10px }
  .btn{ padding:13px 22px; min-width:0; font-size:clamp(13px,2.6vh,16px) }
  .btn .p{ margin-left:12px; padding-left:12px }
  .sheet{ max-height:92vh }
}

/* ── legal pages (terms / privacy / refund) ──────────────── */
.legal-page{
  max-width:720px; margin:0 auto;
  padding:clamp(28px,5vw,64px) clamp(20px,4vw,28px) 80px;
}
.legal-page .back-link{
  display:inline-block; margin-bottom:28px;
  font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--quiet); text-decoration:none;
}
.legal-page .back-link:hover{ color:#fff }
.legal-page h1{
  font-family:var(--display); font-weight:500; font-size:clamp(28px,5vw,42px);
  letter-spacing:.01em; margin-bottom:6px;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.legal-page .updated{ font-size:12.5px; color:var(--quiet); margin-bottom:40px }
.legal-page h2{
  font-family:var(--display); font-weight:500; font-size:19px;
  color:#EDEAE3; margin:36px 0 12px;
}
.legal-page p, .legal-page li{
  font-family:var(--ui); font-size:14.5px; line-height:1.7;
  color:#B8B4AB;
}
.legal-page p{ margin-bottom:14px }
.legal-page ul{ margin:0 0 14px 1.3em }
.legal-page li{ margin-bottom:8px }
.legal-page strong{ color:#EDEAE3; font-weight:600 }
.legal-page a{ color:#C9C5BC; text-decoration:underline; text-underline-offset:2px }
.legal-page a:hover{ color:#fff }
.trader-box{
  margin-top:14px; padding:16px 18px;
  background:rgba(255,255,255,.02); border:1px solid var(--hair); border-radius:12px;
  font-family:var(--ui); font-size:13.5px; color:#C9C5BC; line-height:1.8;
}
.trader-box a{ color:#C9C5BC; text-decoration:underline; text-underline-offset:2px }
.trader-box a:hover{ color:#fff }

/* ── purchase consent checkbox (Buy Credits) ─────────────── */
.consent-row{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:16px; cursor:pointer;
}
.consent-row input[type="checkbox"]{
  flex:none; width:16px; height:16px; margin-top:2px;
  accent-color:#C9C5BC; cursor:pointer;
}
.consent-row span{
  font-family:var(--ui); font-size:12px; line-height:1.55; color:var(--quiet);
}
.consent-row a{ color:#C9C5BC; text-decoration:underline; text-underline-offset:2px }
.consent-row a:hover{ color:#fff }
.credit-tile:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none }