/* =====================================================================
   BURN — design tokens
   ===================================================================== */
:root{
  --bg-0:#0a0b10;
  --bg-1:#14161f;
  --felt-0:#5a1a24;
  --felt-1:#3b0f18;
  --felt-2:#210810;
  --gold:#e3b95c;
  --gold-2:#b98a2e;
  --gold-soft:rgba(227,185,92,.35);
  --ember:#ff7b3a;
  --ember-2:#ff3d2e;
  --mint:#3ddc97;
  --sky:#5cc8ff;
  --cream:#f7f1e3;
  --cream-2:#d9cfb8;
  --muted:#9a927f;
  --ink:#17131a;
  --red:#c2273a;
  --card-face:#fbf7ee;
  --cw: clamp(58px, 7.4vw, 96px);            /* base card width */
  --ch: calc(var(--cw) * 1.42);
  --radius: calc(var(--cw) * .09);
  --ease-out: cubic-bezier(.22,.9,.32,1);
  --ease-move: cubic-bezier(.3,.7,.2,1);
  --move: 460ms;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  background: var(--bg-0);
  color: var(--cream);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
button{font-family:inherit;}
.display{font-family:'Cinzel', 'Palatino Linotype', Georgia, serif;}
.hidden{display:none !important;}

/* =====================================================================
   Room background (shared by all screens)
   ===================================================================== */
.room{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(255,120,60,.14), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% -20%, #20232f, transparent 65%),
    linear-gradient(180deg, #0e1017 0%, #0a0b10 100%);
}
.room::before{ /* fine grain */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
.room::after{ /* vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%);
}

/* =====================================================================
   Screens
   ===================================================================== */
.screen{position:fixed; inset:0; display:none;}
.screen.active{display:block;}

/* ---------- Title / setup ---------- */
#setupScreen{display:none; overflow:auto; -webkit-overflow-scrolling:touch;}
#setupScreen.active{display:flex; align-items:center; justify-content:center; padding:24px 16px;}
.setup-card{
  width:min(560px, 100%); position:relative;
  background: linear-gradient(180deg, rgba(28,30,42,.92), rgba(16,17,25,.94));
  border:1px solid rgba(227,185,92,.25);
  border-radius:22px; padding:28px 28px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation: rise .6s var(--ease-out) both;
}
@keyframes rise{from{opacity:0; transform:translateY(18px) scale(.985);} to{opacity:1; transform:none;}}
.logo{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.flame{
  width:46px; height:46px; position:relative; flex:0 0 auto;
  filter: drop-shadow(0 0 14px rgba(255,123,58,.55));
}
.flame i{
  position:absolute; left:50%; bottom:2px; width:26px; height:34px;
  transform:translateX(-50%) rotate(-45deg);
  border-radius: 0 60% 60% 60%;
  background: radial-gradient(circle at 35% 70%, #ffe08a 0%, #ff9a3c 35%, #ff4b2b 70%, #b4162a 100%);
  animation: flicker 1.6s ease-in-out infinite alternate;
}
.flame i:nth-child(2){width:15px;height:20px;bottom:6px; background:radial-gradient(circle at 40% 70%, #fff7c2, #ffd36e 60%, #ff9a3c); animation-duration:1.1s;}
@keyframes flicker{from{transform:translateX(-50%) rotate(-45deg) scale(1);} to{transform:translateX(-52%) rotate(-42deg) scale(1.06,1.1);}}
.logo h1{
  margin:0; font-size:38px; letter-spacing:6px; font-weight:800; line-height:1;
  background: linear-gradient(180deg, #fff1c2 0%, var(--gold) 45%, #9a6d1c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.logo small{display:block; color:var(--cream-2); font-size:11px; letter-spacing:4px; text-transform:uppercase; margin-top:6px; opacity:.8;}
.setup-card p.lead{color:var(--cream-2); font-size:14px; line-height:1.55; margin:12px 0 18px;}
.field{display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; font-weight:600;}
.segmented{display:flex; gap:6px; background:rgba(0,0,0,.35); padding:5px; border-radius:14px; border:1px solid rgba(255,255,255,.06);}
.segmented button{
  flex:1; padding:10px 0; border:none; border-radius:10px; background:transparent; color:var(--cream-2);
  font-size:15px; font-weight:600; cursor:pointer; transition: all .18s var(--ease-out);
}
.segmented button:hover{color:var(--cream); background:rgba(255,255,255,.05);}
/* "Need a tutorial?" — two plain radio options */
.radio-row{display:flex; gap:22px; flex-wrap:wrap; padding:4px 2px 2px;}
.radio-row button{display:flex; align-items:center; gap:10px; background:none; border:none; padding:6px 0; color:var(--muted, #b8a78a); font:600 15px Inter, system-ui, sans-serif; cursor:pointer;}
.radio-row button::before{content:""; width:18px; height:18px; flex:none; border-radius:50%; border:2px solid rgba(227,185,92,.55); box-sizing:border-box; transition:box-shadow .2s, border-color .2s;}
.radio-row button.selected{color:var(--cream, #f3e6c8);}
.radio-row button.selected::before{border-color:#e3b95c; box-shadow:inset 0 0 0 3px #1a0a10, inset 0 0 0 9px #e3b95c;}
.radio-row button:hover{color:var(--cream, #f3e6c8);}
.radio-row button:focus-visible{outline:2px solid #e3b95c; outline-offset:3px; border-radius:6px;}
.segmented button.selected{background:linear-gradient(180deg,#f0cf74,#b98a2e); color:#241a06; box-shadow:0 4px 14px rgba(227,185,92,.3);}
.deck-note{font-size:12px; color:var(--muted); margin-top:8px;}
.seat-row{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:8px 10px; margin-bottom:8px;
  animation: rise .35s var(--ease-out) both;
}
.avatar{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:13px; color:#1a1208; flex:0 0 auto;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.4);
}
.seat-row input{
  flex:1; min-width:0; background:transparent; border:none; border-bottom:1px solid rgba(227,185,92,.25);
  color:var(--cream); font-size:15px; padding:6px 2px; font-family:inherit; outline:none;
}
.seat-row input:focus{border-bottom-color:var(--gold);}
.toggle{
  font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:var(--cream-2); transition:all .18s; white-space:nowrap;
}
.toggle.bot{background:rgba(92,200,255,.14); color:var(--sky); border-color:rgba(92,200,255,.45);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:14px; padding:14px 22px; font-size:15px; font-weight:700; letter-spacing:.5px; cursor:pointer;
  transition: transform .15s var(--ease-out), box-shadow .2s, filter .2s;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-gold{
  width:100%; margin-top:18px; color:#241a06;
  background: linear-gradient(180deg, #f6d98a 0%, #e3b95c 45%, #b98a2e 100%);
  box-shadow: 0 10px 28px rgba(227,185,92,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{filter:brightness(1.06); box-shadow:0 14px 34px rgba(227,185,92,.38);}
.btn-ghost{
  background:rgba(255,255,255,.06); color:var(--cream); border:1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.setup-links{display:flex; gap:8px; margin-top:10px;}
.setup-links .btn{flex:1; padding:11px; font-size:13px;}

/* =====================================================================
   Game screen
   ===================================================================== */
#gameScreen{
  display:none; grid-template-rows: auto 1fr auto; overflow:hidden;
  padding-top: env(safe-area-inset-top);
}
#gameScreen.active{display:grid;}

/* ---------- HUD ---------- */
.hud{
  position:relative; z-index:30; display:flex; align-items:center; gap:10px;
  padding:8px 14px 4px; min-height:54px; flex-wrap:wrap;
}
.hud .brand{display:flex; align-items:center; gap:8px;}
.hud .brand .flame{width:26px;height:26px;}
.hud .brand .flame i{width:15px;height:20px;bottom:0;}
.hud .brand .flame i:nth-child(2){width:8px;height:11px;bottom:3px;}
.hud .brand b{font-size:18px; letter-spacing:4px; color:var(--gold);}
.hud .spacer{flex:1;}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); font-size:12px; color:var(--cream-2);
  white-space:nowrap;
}
.chip b{color:var(--cream); font-weight:600;}
.icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.35); color:var(--cream); cursor:pointer; font-size:15px; display:grid; place-items:center;
  transition: background .15s, transform .15s;
}
.icon-btn:hover{background:rgba(255,255,255,.1);}
.icon-btn:active{transform:scale(.95);}
.log-ticker{
  flex-basis:100%; margin:4px auto 0; min-height:22px;
  font-size:12px; color:var(--cream-2); max-width:min(80vw, 560px); text-align:center;
  padding:3px 12px; border-radius:999px; background:rgba(0,0,0,.3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.log-ticker.flash{animation: tickerIn .45s var(--ease-out);}
@keyframes tickerIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

/* ---------- Arena ---------- */
.arena{position:relative; z-index:5; min-height:0;}
.table{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(96vw, 1100px); height:min(90%, 560px);
  border-radius:50% / 46%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(ellipse at 50% 55%, var(--felt-0) 0%, var(--felt-1) 55%, var(--felt-2) 100%);
  box-shadow:
    0 0 0 6px #3a2a17, 0 0 0 9px #8a6a2c, 0 0 0 10px #2a1c0c,
    0 40px 90px rgba(0,0,0,.7), inset 0 0 90px rgba(0,0,0,.55);
}
.table::before{ /* felt weave */
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:.35; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
.table::after{ /* gold inlay */
  content:""; position:absolute; inset:14px; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(227,185,92,.22);
  box-shadow: inset 0 0 40px rgba(0,0,0,.25);
}
.table-emblem{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:min(20vw, 160px); letter-spacing:.2em; color:rgba(255,255,255,.035); pointer-events:none;
  font-weight:800; user-select:none; padding-left:.2em;
}

/* ---------- Opponent seats ---------- */
.seats{
  position:absolute; left:0; right:0; top:8px; display:flex; justify-content:space-evenly; align-items:flex-start;
  padding:0 2vw; pointer-events:none; z-index:6;
}
.seat{
  position:relative; width:clamp(112px, 15vw, 168px); text-align:center; pointer-events:auto;
  transition: transform .5s var(--ease-out);
}
.seat .plate{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px;
  background:rgba(10,10,16,.72); border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  position:relative; transition: border-color .3s, box-shadow .3s;
  max-width:100%;
}
.seat .plate .avatar{width:30px;height:30px;font-size:12px;}
.seat .who{display:flex; flex-direction:column; align-items:flex-start; min-width:0;}
.seat .name{font-size:12px; font-weight:600; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92px;}
.seat .count{font-size:11px; color:var(--muted); white-space:nowrap;}
.seat .cards-anchor{ /* where the hidden hand goes */
  height: calc(var(--ch) * .42 + 10px); width:100%; margin-top:6px; position:relative;
}
.seat .home-anchor{
  display:flex; justify-content:center; gap:calc(var(--cw) * .12); height:calc(var(--ch) * .38 + 14px);
}
.seat .home-anchor i{display:block; width:calc(var(--cw) * .38); height:calc(var(--ch) * .38); border-radius:6px; border:1px dashed rgba(255,255,255,.12);}
.seat.active .plate{
  border-color:var(--gold);
  box-shadow: 0 0 0 1px rgba(227,185,92,.35), 0 0 22px rgba(227,185,92,.45), 0 6px 18px rgba(0,0,0,.5);
  animation: seatPulse 1.6s ease-in-out infinite;
}
@keyframes seatPulse{0%,100%{box-shadow:0 0 0 1px rgba(227,185,92,.35), 0 0 18px rgba(227,185,92,.35), 0 6px 18px rgba(0,0,0,.5);} 50%{box-shadow:0 0 0 2px rgba(227,185,92,.55), 0 0 30px rgba(227,185,92,.65), 0 6px 18px rgba(0,0,0,.5);}}
.seat .turn-dot{
  position:absolute; top:-5px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px var(--gold); opacity:0; transform:scale(.4); transition:all .3s var(--ease-out);
}
.seat.active .turn-dot{opacity:1; transform:scale(1); animation: dotPulse 1.2s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.35);}}
.seat .thinking{
  position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 2px); font-size:10px; color:var(--gold); letter-spacing:1px;
  opacity:0; transition:opacity .2s;
}
.seat.active.bot .thinking{opacity:1;}
.seat .thinking span{animation: blink 1s infinite;}
.seat .thinking span:nth-child(2){animation-delay:.2s}
.seat .thinking span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
.seat.finished .plate{border-color:rgba(61,220,151,.5); opacity:.85;}
.seat .badge{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; letter-spacing:1px;
  padding:2px 8px; border-radius:999px; background:var(--mint); color:#062b19; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.seat .badge.first{background:linear-gradient(180deg,#f6d98a,#b98a2e); color:#241a06;}
.seat .status-tag{
  position:absolute; left:50%; top:38px; transform:translate(-50%, 0) scale(.6); opacity:0;
  padding:4px 10px; border-radius:8px; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  pointer-events:none; z-index:5; white-space:nowrap;
}
.seat .status-tag.show{animation: tagPop 1.5s var(--ease-out) forwards;}
@keyframes tagPop{0%{opacity:0; transform:translate(-50%,6px) scale(.6);} 15%{opacity:1; transform:translate(-50%,0) scale(1.05);} 80%{opacity:1; transform:translate(-50%,-2px) scale(1);} 100%{opacity:0; transform:translate(-50%,-14px) scale(.95);}}
.tag-skip{background:#ffb347; color:#3a1e00;}
.tag-pickup{background:#e05c5c; color:#fff;}
.tag-finish{background:var(--mint); color:#062b19;}
.tag-again{background:var(--sky); color:#062334;}

/* ---------- Center (deck + pile) ---------- */
.center{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:clamp(30px, 6vw, 80px); z-index:28; pointer-events:none;
}
.center .slot{pointer-events:auto;}
.slot{position:relative; width:var(--cw); height:var(--ch);}
.slot .well{
  position:absolute; inset:0; border-radius:var(--radius); border:2px dashed rgba(255,255,255,.14);
  display:grid; place-items:center; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.slot.drop-ok .well{border-color:rgba(61,220,151,.7); background:rgba(61,220,151,.08); box-shadow:0 0 24px rgba(61,220,151,.25);}
.slot .slot-label{
  position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45); white-space:nowrap;
}
.slot .counter{
  position:absolute; right:-16px; bottom:-14px; min-width:24px; height:24px; padding:0 7px; border-radius:12px;
  background:rgba(10,10,16,.9); border:1px solid rgba(255,255,255,.14); color:var(--cream); font-size:12px; font-weight:700;
  display:grid; place-items:center; z-index:60; transition: transform .2s var(--ease-out);
}
.slot .counter.bump{animation: bump .35s var(--ease-out);}
@keyframes bump{50%{transform:scale(1.25);}}
.req-badge{
  position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%);
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; letter-spacing:.3px;
  background:rgba(10,10,16,.85); border:1px solid rgba(255,255,255,.14); color:var(--cream);
  box-shadow:0 6px 18px rgba(0,0,0,.5); z-index:60; transition: all .25s var(--ease-out);
}
.req-badge.pulse{animation: bump .4s var(--ease-out);}
.req-badge.below7{border-color:#ff9a3c; color:#ffd7ad; box-shadow:0 0 18px rgba(255,154,60,.35);}
.req-badge.above8{border-color:#ffb347; color:#ffe0b2;}
.req-badge.any{border-color:rgba(61,220,151,.6); color:#c9ffe6;}
.pile-glow{
  position:absolute; inset:-30%; border-radius:50%; pointer-events:none; opacity:0;
  background: radial-gradient(circle, rgba(255,123,58,.45), transparent 60%);
  transition: opacity .3s;
}
.pile-glow.burning{animation: burnGlow 1s ease-out;}
@keyframes burnGlow{0%{opacity:0; transform:scale(.6);} 30%{opacity:1; transform:scale(1.1);} 100%{opacity:0; transform:scale(1.6);}}
.reset-ring{
  position:absolute; inset:-12%; border-radius:var(--radius); border:2px solid var(--mint); opacity:0; pointer-events:none;
}
.reset-ring.go{animation: ring .8s var(--ease-out);}
@keyframes ring{0%{opacity:1; transform:scale(.9);} 100%{opacity:0; transform:scale(1.6);}}

/* ---------- Viewer (bottom) ---------- */
.me{
  position:relative; z-index:20;
  display:grid; grid-template-columns: auto 1fr auto; grid-template-areas: "home hand actions"; align-items:end; gap:12px;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
}
.me .me-home{grid-area:home;} .me .me-hand{grid-area:hand;} .me .me-actions{grid-area:actions;}
.me .me-home{display:flex; flex-direction:column; align-items:center; gap:6px;}
.me .home-anchor{display:flex; gap:calc(var(--cw) * .18);}
.me .home-anchor i{display:block; width:calc(var(--cw) * .74); height:calc(var(--ch) * .74); border-radius:var(--radius); border:1.5px dashed rgba(255,255,255,.14); position:relative;}
.me .home-anchor i.hot{border-color:rgba(61,220,151,.7); box-shadow:0 0 20px rgba(61,220,151,.25);}
.me .home-anchor i.blind::after{
  content:"TAP TO FLIP"; position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%);
  font-size:9px; letter-spacing:1.5px; color:var(--mint); white-space:nowrap; animation: blink 1.4s infinite;
}
.me .home-label{font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4);}
.me .me-hand{position:relative; min-width:0;}
.me .hand-anchor{
  position:relative; height:calc(var(--ch) + 34px); width:100%; max-width:820px; margin:0 auto;
}
.me .me-plate{
  position:absolute; left:50%; top:-16px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:999px;
  background:rgba(10,10,16,.75); border:1px solid rgba(255,255,255,.08); white-space:nowrap; z-index:2;
  transition: border-color .3s, box-shadow .3s;
}
.me .me-plate .avatar{width:26px;height:26px;font-size:11px;}
.me .me-plate .name{font-size:13px; font-weight:600;}
.me .me-plate .phase{font-size:11px; color:var(--muted); margin-left:4px;}
.me.active .me-plate{border-color:var(--gold); box-shadow:0 0 0 1px rgba(227,185,92,.35), 0 0 22px rgba(227,185,92,.45); animation: seatPulse 1.6s ease-in-out infinite;}
.me .me-actions{display:flex; flex-direction:column; gap:8px; min-width:150px;}
.act{
  border:none; border-radius:12px; padding:12px 16px; font-size:14px; font-weight:700; cursor:pointer; letter-spacing:.3px;
  transition: transform .15s var(--ease-out), box-shadow .2s, opacity .2s, filter .2s;
  position:relative; overflow:hidden;
}
.act:active:not(:disabled){transform:translateY(1px) scale(.98);}
.act:disabled{opacity:.42; cursor:not-allowed; filter:saturate(.4);}
.act.play{background:linear-gradient(180deg,#5ff0b0,#25a86c); color:#04261a; box-shadow:0 8px 22px rgba(61,220,151,.25);}
.act.play:not(:disabled):hover{filter:brightness(1.07);}
.act.pickup{background:linear-gradient(180deg,#ff8f6b,#c93b2a); color:#2c0a04; box-shadow:0 8px 22px rgba(255,123,58,.2);}
.act.pickup.urgent:not(:disabled){animation: urgent 1.2s ease-in-out infinite;}
@keyframes urgent{0%,100%{box-shadow:0 8px 22px rgba(255,123,58,.2);} 50%{box-shadow:0 0 0 3px rgba(255,143,107,.45), 0 8px 26px rgba(255,123,58,.45);}}
.act.pass{background:rgba(255,255,255,.08); color:var(--cream); border:1px solid rgba(255,255,255,.14);}
.act.clear{background:transparent; color:var(--muted); font-weight:500; font-size:12px; padding:6px;}
.hint{
  font-size:12px; color:var(--cream-2); text-align:center; min-height:16px; margin-top:4px; transition:opacity .2s;
}
.hint.warn{color:#ffb8a3;}
.hint.good{color:#a8f2d0;}

/* =====================================================================
   Cards (persistent elements in the card layer)
   ===================================================================== */
.card-layer{position:absolute; inset:0; z-index:25; pointer-events:none; perspective:1400px;}
.card{
  position:absolute; left:0; top:0; width:var(--cw); height:var(--ch);
  transform-origin:center center; will-change:transform;
  transition: transform var(--move) var(--ease-move), opacity .35s;
  pointer-events:none;
}
.card.interactive{pointer-events:auto; cursor:pointer;}
.card.instant, .card.instant .card-body{transition:none !important;}
.card.gone{opacity:0;}
.card.flat .face{box-shadow:none;}
.card-body{
  position:absolute; inset:0; transform-style:preserve-3d;
  --lift:0px; --flip:0deg; --tilt:0deg;
  transform: translateY(var(--lift)) rotateY(var(--flip));
  transition: transform .42s var(--ease-out);
}
.card.face-down .card-body{--flip:180deg;}
.card.interactive:hover .card-body{--lift:-10px;}
.card.interactive:hover .face{box-shadow: 0 18px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.6);}
.card.selected .card-body, .card.selected:hover .card-body{--lift:-26px;}
.card.selected .face.front{box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(227,185,92,.7), 0 18px 22px rgba(0,0,0,.5) !important;}
.card.playable .face.front::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 2px rgba(61,220,151,.55), 0 0 14px rgba(61,220,151,.25);
}
.card.locked{ }
.card.dim .face.front{filter: brightness(.62) saturate(.55);}
.card.shake .card-body{animation: shake .45s var(--ease-out);}
@keyframes shake{0%,100%{transform:translateY(var(--lift)) rotateY(var(--flip)) translateX(0);} 20%{transform:translateY(var(--lift)) rotateY(var(--flip)) translateX(-9px) rotate(-3deg);} 40%{transform:translateY(var(--lift)) rotateY(var(--flip)) translateX(8px) rotate(3deg);} 60%{transform:translateY(var(--lift)) rotateY(var(--flip)) translateX(-6px);} 80%{transform:translateY(var(--lift)) rotateY(var(--flip)) translateX(4px);}}
.card.pop .card-body{animation: pop .5s var(--ease-out);}
@keyframes pop{0%{transform:translateY(var(--lift)) rotateY(var(--flip)) scale(1);} 40%{transform:translateY(var(--lift)) rotateY(var(--flip)) scale(1.12);} 100%{transform:translateY(var(--lift)) rotateY(var(--flip)) scale(1);}}
.face{
  position:absolute; inset:0; border-radius:var(--radius); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden; box-shadow: 0 8px 14px rgba(0,0,0,.45); transition: box-shadow .25s, filter .25s;
}
.face.front{
  background:
    radial-gradient(ellipse at 50% 30%, #ffffff 0%, var(--card-face) 60%, #efe8d8 100%);
  color:var(--ink); border:1px solid rgba(0,0,0,.22);
  box-shadow: 0 8px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.6);
}
.face.front.red{color:var(--red);}
.face.back{
  transform:rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,200,120,.16), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, #7a1a2a 0%, #4a0f1a 60%, #2c0810 100%);
  border:1px solid rgba(0,0,0,.4);
  box-shadow: 0 8px 14px rgba(0,0,0,.45), inset 0 0 0 3px rgba(227,185,92,.85), inset 0 0 0 5px #4a0f1a, inset 0 0 0 6px rgba(227,185,92,.45);
}
.face.back::before{
  content:"B"; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  font-family:'Cinzel', Georgia, serif; font-weight:800; font-size:calc(var(--cw) * .5);
  color:rgba(227,185,92,.9); text-shadow:0 0 14px rgba(255,123,58,.7);
}
.face.back::after{
  content:""; position:absolute; left:50%; top:50%; width:calc(var(--cw) * .62); height:calc(var(--cw) * .62);
  transform:translate(-50%,-50%) rotate(45deg); border:1px solid rgba(227,185,92,.5); border-radius:12%;
  box-shadow: 0 0 0 4px rgba(227,185,92,.12);
}
.corner{
  position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1;
  font-weight:700; font-size:calc(var(--cw) * .2); left:calc(var(--cw) * .07); top:calc(var(--cw) * .07);
}
.corner .s{font-size:calc(var(--cw) * .17); margin-top:2px;}
.corner.br{left:auto; top:auto; right:calc(var(--cw) * .07); bottom:calc(var(--cw) * .07); transform:rotate(180deg);}
.pip{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:calc(var(--cw) * .5); opacity:.92; line-height:1;
}
.pip.big{font-size:calc(var(--cw) * .46); font-family:'Cinzel', Georgia, serif; font-weight:800; }
.pip.big small{position:absolute; left:50%; top:calc(100% - 4px); transform:translateX(-50%); font-size:calc(var(--cw) * .18); opacity:.8;}
.band{
  position:absolute; left:8%; right:8%; bottom:calc(var(--cw) * .28); padding:2px 0; text-align:center;
  font-size:calc(var(--cw) * .1); font-weight:800; letter-spacing:.12em; text-transform:uppercase; border-radius:4px;
  color:#fff;
}
.band.reset{background:linear-gradient(90deg,#1f9d6b,#3ddc97); box-shadow:0 2px 6px rgba(61,220,151,.4);}
.band.skip{background:linear-gradient(90deg,#d97a1a,#ffb347); box-shadow:0 2px 6px rgba(255,179,71,.4);}
.band.burn{background:linear-gradient(90deg,#c62828,#ff7b3a); box-shadow:0 2px 6px rgba(255,123,58,.5);}
.band.force{background:rgba(0,0,0,.08); color:currentColor; border:1px solid currentColor; opacity:.8;}
.band.novalue{background:rgba(0,0,0,.06); color:#6b6577; border:1px solid rgba(0,0,0,.18); letter-spacing:.08em;}
.face.front.special{
  background: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #fff6e6 55%, #f4e4c4 100%);
}
.face.front.special::before{
  content:""; position:absolute; inset:5px; border-radius:calc(var(--radius) - 3px); border:1.5px solid rgba(227,185,92,.7); pointer-events:none;
}
.face.front.queen .pip{opacity:.28;}
.face.front .glint{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 60%);
  transform: translateX(-100%);
}
.card.pop .glint{animation: glint .7s var(--ease-out);}
@keyframes glint{0%{opacity:0; transform:translateX(-100%);} 30%{opacity:1;} 100%{opacity:0; transform:translateX(100%);}}

/* =====================================================================
   FX & overlays
   ===================================================================== */
.fx-layer{position:absolute; inset:0; z-index:40; pointer-events:none; overflow:hidden;}
.ember{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, #fff3b0, #ff9a3c 50%, transparent 70%);
  animation: ember 1s ease-out forwards;
}
@keyframes ember{0%{opacity:1; transform:translate(0,0) scale(1);} 100%{opacity:0; transform:translate(var(--dx), var(--dy)) scale(.2);}}
.confetti{position:absolute; width:8px; height:12px; top:-20px; animation: confetti linear forwards;}
@keyframes confetti{to{transform:translate(var(--dx), 110vh) rotate(720deg);} }

.toasts{
  position:absolute; left:50%; bottom:31%; transform:translateX(-50%); z-index:45;
  display:flex; flex-direction:column-reverse; align-items:center; gap:6px; pointer-events:none; width:max-content; max-width:92vw;
}
.toast{
  padding:9px 16px; border-radius:12px; font-size:13px; font-weight:600; color:var(--cream);
  background:rgba(12,12,18,.9); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation: toastIn .35s var(--ease-out) both; max-width:92vw; text-align:center;
}
.toast.out{animation: toastOut .3s ease-in forwards;}
.toast.warn{border-color:rgba(255,123,58,.6); color:#ffd0bd;}
.toast.good{border-color:rgba(61,220,151,.6); color:#c9ffe6;}
.toast.gold{border-color:var(--gold); color:#ffeab5;}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px) scale(.96);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px);}}

.event-banner{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) scale(.6); z-index:46; pointer-events:none;
  font-family:'Cinzel', Georgia, serif; font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  font-size:clamp(28px, 7vw, 64px); opacity:0; padding-left:.3em;
  text-shadow: 0 4px 30px rgba(0,0,0,.8);
}
.event-banner.show{animation: bannerPop 1.3s var(--ease-out) forwards;}
@keyframes bannerPop{0%{opacity:0; transform:translate(-50%,-50%) scale(.6);} 18%{opacity:1; transform:translate(-50%,-50%) scale(1.06);} 70%{opacity:1; transform:translate(-50%,-50%) scale(1);} 100%{opacity:0; transform:translate(-50%,-56%) scale(1.02);}}
.event-banner.burn{color:#ff9a3c; text-shadow:0 0 30px rgba(255,123,58,.9), 0 4px 30px rgba(0,0,0,.8);}
.event-banner.reset{color:#6ff2bd; text-shadow:0 0 30px rgba(61,220,151,.8), 0 4px 30px rgba(0,0,0,.8);}
.event-banner.skip{color:#ffcf7a; text-shadow:0 0 30px rgba(255,179,71,.8), 0 4px 30px rgba(0,0,0,.8);}
.event-banner.seven{color:#ffd7ad; font-size:clamp(20px, 5vw, 44px);}
.event-banner.win{color:var(--gold); text-shadow:0 0 40px rgba(227,185,92,.9), 0 4px 30px rgba(0,0,0,.8);}

.overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(6,6,10,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .3s both;
}
.overlay.opaque{background:rgba(6,6,10,.97);}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal{
  width:min(440px, 100%); max-height:90vh; overflow:auto;
  background: linear-gradient(180deg, rgba(30,32,44,.98), rgba(16,17,25,.98));
  border:1px solid rgba(227,185,92,.35); border-radius:22px; padding:28px; text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  animation: rise .45s var(--ease-out) both;
}
.modal h2{margin:0 0 8px; font-size:24px; letter-spacing:2px; color:var(--gold);}
.modal p{color:var(--cream-2); font-size:14px; line-height:1.55; margin:0 0 8px;}
.modal .btn{width:100%; margin-top:10px;}
.standings{list-style:none; padding:0; margin:14px 0 6px; text-align:left;}
.standings li{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; margin-bottom:6px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:14px;
}
.standings li:first-child{border-color:rgba(227,185,92,.5); background:rgba(227,185,92,.08);}
.standings .pos{font-weight:800; color:var(--gold); width:34px;}
.pass-card{
  width:120px; height:170px; margin:10px auto 18px; border-radius:12px;
  background:linear-gradient(160deg, #7a1a2a, #2c0810); box-shadow:inset 0 0 0 3px rgba(227,185,92,.85), inset 0 0 0 5px #4a0f1a, 0 20px 40px rgba(0,0,0,.6);
  display:grid; place-items:center; font-family:'Cinzel',serif; font-size:44px; color:var(--gold); font-weight:800;
  animation: floaty 2.4s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-8px) rotate(2deg);}}
.rules-body{text-align:left; max-height:56vh; overflow:auto; font-size:13px; line-height:1.6; color:var(--cream-2); padding-right:6px;}
.rules-body h3{color:var(--gold); font-size:12px; letter-spacing:2px; text-transform:uppercase; margin:16px 0 6px;}
.rules-body h3:first-child{margin-top:4px;}
.rules-body ul{margin:4px 0 4px 18px; padding:0;}
.rules-body li{margin-bottom:4px;}
.rules-body b{color:var(--cream);}
.rules-body .tag{display:inline-block; padding:1px 7px; border-radius:6px; font-size:11px; font-weight:700; margin-right:4px; color:#fff;}
.rules-body .tag.reset{background:#25a86c;} .rules-body .tag.skip{background:#d97a1a;} .rules-body .tag.burn{background:#c62828;}

/* =====================================================================
   Card art on DOM cards (2D fallback) · rule book · help · tutorial · coach
   ===================================================================== */
.face.art{background-size:100% 100% !important; background-repeat:no-repeat; background-color:#F0E6D2; border:none !important; border-radius:calc(var(--cw) * .06);
  box-shadow: 0 10px 16px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.35) !important; image-rendering:auto;}
.face.art .corner, .face.art .pip, .face.art .band{display:none;}
.face.back.art::before, .face.back.art::after{display:none;}
.card.selected .face.front.art{box-shadow: 0 0 0 2.5px #e3b95c, 0 0 22px rgba(227,185,92,.55), 0 16px 22px rgba(0,0,0,.5) !important;}
.card.playable .face.front.art::after{box-shadow: inset 0 0 0 2px rgba(227,185,92,.55), 0 0 12px rgba(227,185,92,.25);}
.card.interactive:hover .face.art{box-shadow: 0 0 0 1.5px rgba(227,185,92,.6), 0 18px 24px rgba(0,0,0,.55) !important;}
.mini{border-radius:6%;}
.mini{display:inline-block; width:44px; height:62px; border-radius:5px; background:#F0E6D2 center/100% 100% no-repeat; box-shadow:0 3px 8px rgba(0,0,0,.5); vertical-align:middle; flex:0 0 auto;}
.mini.lg{width:64px; height:90px; border-radius:7px;}
.rb-ex{display:inline-flex; gap:3px; vertical-align:middle; margin:0 4px;}
.rb-ex .mini{width:26px; height:37px; border-radius:3px;}
.help-menu .btn{width:100%; margin-top:8px; justify-content:flex-start;}
.help-menu .btn b{color:var(--mint); margin-left:4px;}
.rulebook{max-width:640px; width:min(640px,100%); padding:22px 22px 20px;}
.rb-head{display:flex; align-items:center; gap:12px; text-align:left; margin-bottom:10px;}
.rb-head .flame{width:38px; height:38px;} .rb-head .flame i{width:22px; height:28px;} .rb-head .flame i:nth-child(2){width:12px;height:16px;bottom:5px;}
.rb-head h2{margin:0; letter-spacing:6px;} .rb-head small{display:block; color:var(--cream-2); letter-spacing:3px; text-transform:uppercase; font-size:11px;}
.rb-nav{display:flex; gap:4px; overflow-x:auto; padding-bottom:6px; margin-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.rb-nav::-webkit-scrollbar{display:none;}
.rb-nav button{flex:0 0 auto; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--cream-2); border-radius:999px; padding:6px 11px; font-size:12px; cursor:pointer; font-weight:600;}
.rb-nav button.on{background:linear-gradient(180deg,#f0cf74,#b98a2e); color:#241a06; border-color:transparent;}
.rb-body{max-height:min(62vh, 560px);}
.rb-section{padding:4px 2px 14px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:10px; scroll-margin-top:6px;}
.rb-section h3{margin-top:4px;}
.rb-flow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0;}
.rb-stage{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; background:rgba(255,255,255,.04); border:1px solid rgba(227,185,92,.2); border-radius:12px; min-width:110px; text-align:center;}
.rb-stage .mini{width:34px; height:48px; border-radius:4px; margin:0 -6px;}
.rb-stage b{color:var(--cream); font-size:12px; margin-top:4px;} .rb-stage small{font-size:10px; color:var(--muted); max-width:120px;}
.rb-arrow{color:var(--gold); font-size:20px;}
.rb-order{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:8px 0;}
.rb-order .chip-rank{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-family:'Cinzel',serif; font-weight:800; color:#241a06; background:linear-gradient(180deg,#f6d98a,#b98a2e); font-size:15px;}
.rb-order .chip-rank.hi{background:linear-gradient(180deg,#ffd7ad,#c2273a); color:#fff;}
.rb-order .lt{color:var(--muted); font-size:12px;}
.rb-order-title{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:6px 0 0;}
.rb-specials{display:flex; flex-direction:column; gap:8px;}
.rb-sp{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:8px 10px;}
.rb-sp .mini{width:54px; height:76px; border-radius:6px;}
.rb-sp p{margin:2px 0 0; font-size:12.5px;}
.rules-body .tag.seven{background:#8a6a2c;} .rules-body .tag.queen{background:#5a1a2a;}
.rb-fine{font-size:12px; color:var(--muted); margin-top:10px;}
.ref-modal{max-width:520px; width:min(520px,100%);}
.ref-grid{display:flex; flex-direction:column; gap:6px; text-align:left; margin:10px 0 4px;}
.ref-item{display:flex; align-items:center; gap:12px; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.035);}
.ref-item b{color:var(--cream); font-size:13px; display:block;} .ref-item small{color:var(--cream-2); font-size:12px;}
.coach{
  position:absolute; left:50%; top:calc(92px + env(safe-area-inset-top)); translate:-50% 0; z-index:44; pointer-events:none;
  max-width:min(92vw, 520px); padding:8px 14px 8px 10px; border-radius:14px; display:flex; align-items:center; gap:8px;
  background:rgba(14,12,18,.9); border:1px solid rgba(227,185,92,.5); color:#ffeab5; font-size:13px; line-height:1.35; box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation: toastIn .35s var(--ease-out) both;
}
.coach .coach-icon{font-size:16px; filter:drop-shadow(0 0 6px rgba(255,200,90,.6));}
.tutor-layer{position:fixed; inset:0; z-index:95; pointer-events:none;}
.tutor-spot{
  position:absolute; border-radius:16px; border:2px solid var(--gold); box-shadow:0 0 0 9999px rgba(4,4,8,.62), 0 0 30px rgba(227,185,92,.55);
  transition: left .45s var(--ease-out), top .45s var(--ease-out), width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s; opacity:0;
}
.tutor-spot.on{opacity:1;}
.tutor-layer.dim-all::before{content:""; position:absolute; inset:0; background:rgba(4,4,8,.72);}
.tutor-panel{
  position:absolute; left:50%; top:calc(70px + env(safe-area-inset-top)); translate:-50% 0; width:min(92vw, 400px); pointer-events:auto;
  background:linear-gradient(180deg, rgba(30,32,44,.98), rgba(16,17,25,.98)); border:1px solid rgba(227,185,92,.45); border-radius:18px; padding:16px 18px 14px;
  box-shadow:0 30px 80px rgba(0,0,0,.7); animation: rise .4s var(--ease-out) both;
}
.tutor-panel.tp-center{top:50%; translate:-50% -50%; text-align:center;}
.tutor-panel.bottom{top:auto; bottom:calc(90px + env(safe-area-inset-bottom));}
.tutor-kicker{font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:4px;}
.tutor-panel h3{margin:0 0 6px; font-size:20px; letter-spacing:1px; color:var(--cream);}
.tutor-panel p{margin:0; color:var(--cream-2); font-size:13.5px; line-height:1.5; white-space:pre-line;}
.tutor-actions{display:flex; gap:8px; margin-top:12px;}
.tutor-actions .btn{padding:10px 14px; font-size:13px; flex:1;}
.tutor-progress{display:flex; gap:4px; margin-top:10px; justify-content:center;}
.tutor-progress i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18);} .tutor-progress i.on{background:var(--gold);}
.act.tutor-hot, .icon-btn.tutor-hot{box-shadow:0 0 0 3px var(--gold), 0 0 24px rgba(227,185,92,.7) !important; position:relative; z-index:96;}
@media (max-width:760px){
  .tutor-panel{width:min(94vw, 360px); padding:12px 14px 12px; top:calc(58px + env(safe-area-inset-top));}
  .tutor-panel h3{font-size:17px;} .tutor-panel p{font-size:12.5px;}
  .coach{top:calc(84px + env(safe-area-inset-top)); font-size:12px; max-width:94vw; padding:6px 10px 6px 8px;}
  .rulebook{padding:16px 14px;} .rb-sp .mini{width:44px; height:62px;} .rb-body{max-height:58vh;}
}

/* =====================================================================
   BURN identity pass — HUD, controls, plates, badges
   ===================================================================== */
.chip{background:rgba(22,8,12,.78); border:1px solid rgba(227,185,92,.32); color:var(--cream-2); letter-spacing:.4px; font-family:'Cinzel', Georgia, serif; font-weight:600; font-size:11.5px; box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);}
.chip b{color:var(--gold); font-family:'Inter', system-ui, sans-serif; font-weight:700; font-size:12.5px;}
.icon-btn{background:rgba(22,8,12,.78); border:1px solid rgba(227,185,92,.32); color:var(--gold);}
.icon-btn:hover{background:rgba(227,185,92,.16);}
.log-ticker{background:rgba(22,8,12,.6); border:1px solid rgba(227,185,92,.14); color:var(--cream-2); font-size:12px;}
.seat .plate, .me .me-plate{background:linear-gradient(180deg, rgba(34,10,16,.9), rgba(14,5,8,.92)); border:1px solid rgba(227,185,92,.32); box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);}
.seat .name, .me .me-plate .name{font-family:'Cinzel', Georgia, serif; font-weight:700; letter-spacing:.3px; color:#f3e6c8;}
.seat .count, .me .me-plate .phase{color:#b8a78a;}
.req-badge{background:linear-gradient(180deg, rgba(34,10,16,.95), rgba(14,5,8,.96)); border:1px solid rgba(227,185,92,.45); color:#f3e6c8; font-family:'Cinzel', Georgia, serif; font-weight:700; letter-spacing:.6px; font-size:12px; padding:7px 14px;}
.req-badge.below7{border-color:#ff9a3c; color:#ffd7ad;} .req-badge.above8{border-color:#e3b95c; color:#ffe6b0;} .req-badge.any{border-color:rgba(61,220,151,.6); color:#c9ffe6;}
.slot .counter{background:rgba(22,8,12,.92); border:1px solid rgba(227,185,92,.4); color:var(--gold); font-family:'Cinzel', Georgia, serif;}
.slot .slot-label{font-family:'Cinzel', Georgia, serif; color:rgba(227,185,92,.55); letter-spacing:2.5px;}
.act{font-family:'Cinzel', Georgia, serif; font-weight:700; letter-spacing:.8px; border-radius:12px;}
.act.play{background:linear-gradient(180deg,#f6d98a 0%,#e3b95c 45%,#b98a2e 100%); color:#241a06; box-shadow:0 8px 22px rgba(227,185,92,.28), inset 0 1px 0 rgba(255,255,255,.5);}
.act.play:not(:disabled):hover{filter:brightness(1.06);}
.act.pickup{background:linear-gradient(180deg,#b4303f 0%,#8d1f2e 55%,#5c1420 100%); color:#ffe6d6; box-shadow:0 8px 22px rgba(157,38,52,.35), inset 0 1px 0 rgba(255,255,255,.15); border:1px solid rgba(227,185,92,.25);}
@keyframes urgent{0%,100%{box-shadow:0 8px 22px rgba(157,38,52,.35);} 50%{box-shadow:0 0 0 3px rgba(227,185,92,.45), 0 8px 26px rgba(255,123,58,.45);}}
.act.pass{background:rgba(22,8,12,.8); color:var(--cream); border:1px solid rgba(227,185,92,.35);}
.act.clear{font-family:'Inter', system-ui, sans-serif; letter-spacing:0;}
.hint{color:#d9cbb0;} .hint.good{color:#f3e2b5;} .hint.warn{color:#ffb8a3;}
.toast{background:linear-gradient(180deg, rgba(34,10,16,.94), rgba(14,5,8,.95)); border:1px solid rgba(227,185,92,.3);}
.coach{background:linear-gradient(180deg, rgba(34,10,16,.94), rgba(14,5,8,.95)); border-color:rgba(227,185,92,.45);}
.modal{border-color:rgba(227,185,92,.4); background:linear-gradient(180deg, rgba(36,14,20,.98), rgba(14,6,9,.98));}
.setup-card{background:linear-gradient(180deg, rgba(36,14,20,.94), rgba(14,6,9,.96)); border-color:rgba(227,185,92,.3);}
.tutor-panel{background:linear-gradient(180deg, rgba(36,14,20,.98), rgba(14,6,9,.98));}
.room{background: radial-gradient(ellipse 90% 70% at 50% 120%, rgba(255,120,60,.12), transparent 60%), radial-gradient(ellipse 80% 60% at 50% -20%, #2a1219, transparent 65%), linear-gradient(180deg, #120a0d 0%, #0a0507 100%);}
.table{background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.05), transparent 55%), radial-gradient(ellipse at 50% 55%, #5a1424 0%, #3b0d18 55%, #22070f 100%); box-shadow: 0 0 0 6px #2a1a0e, 0 0 0 9px #b48a3c, 0 0 0 11px #1a1008, 0 0 0 26px #3b2414, 0 40px 90px rgba(0,0,0,.7), inset 0 0 90px rgba(0,0,0,.6);}
.slot .well{border-color:rgba(227,185,92,.25); color:rgba(227,185,92,.5); font-family:'Cinzel', Georgia, serif;}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 760px){
  :root{ --cw: clamp(52px, 15vw, 72px); }
  .hud{padding:8px 10px; min-height:48px;}
  .hud .brand b{font-size:15px;}
  .chip{font-size:11px; padding:5px 9px;}
  .chip.hide-sm{display:none;}
  .table{width:140vw; height:min(88%, 520px); top:50%;}
  .seats{padding:0 4px; top:4px;}
  .seat{width:clamp(88px, 24vw, 120px);}
  .seat .name{max-width:64px; font-size:11px;}
  .seat .plate{padding:4px 8px 4px 4px;}
  .seat .plate .avatar{width:24px;height:24px;font-size:10px;}
  .seat .home-anchor{height:calc(var(--ch) * .34 + 10px);}
  .seat .home-anchor i{width:calc(var(--cw) * .34); height:calc(var(--ch) * .34);}
  .center{top:56%; gap:clamp(24px, 9vw, 60px);}
  .me{grid-template-columns: auto auto 1fr; grid-template-areas: "plate home actions" "hand hand hand"; gap:4px 8px; padding:4px 8px calc(8px + env(safe-area-inset-bottom)); align-items:center;}
  .me .me-plate{position:static; transform:none; grid-area:plate; justify-self:start; padding:4px 10px 4px 4px;}
  .me .me-plate .phase{display:none;}
  .me .me-home{align-items:center; padding-top:8px;}
  .me .me-actions{flex-direction:row; justify-content:flex-end; min-width:0; align-self:center;}
  .me .home-anchor{gap:calc(var(--cw) * .1);}
  .me .home-anchor i{width:calc(var(--cw) * .58); height:calc(var(--ch) * .58); border-radius:6px;}
  .me .home-anchor i.blind::after{top:auto; bottom:calc(100% + 4px); font-size:8px;}
  .me .me-home .home-label{display:none;}
  .me .hand-anchor{height:calc(var(--ch) + 30px);}
  .me .hand-anchor{height:calc(var(--ch) + 26px);}
  .act{padding:10px 12px; font-size:13px;}
  .act.clear{display:none;}
  .hint{font-size:11px;}
  .toasts{bottom:30%;}
  .seat .plate{flex-direction:column; gap:2px; padding:4px 8px 5px; border-radius:14px;}
  .seat .who{align-items:center;}
  .seat .name{max-width:76px;}
  .seat .count{font-size:10px;}
}
@media (max-height: 640px) and (min-width: 761px){
  :root{ --cw: clamp(52px, 6vw, 76px); }
}

/* =====================================================================
   3D table mode (Three.js layer active) — HTML stays for HUD/controls
   ===================================================================== */
.gl-stage{position:absolute; inset:0; z-index:1; display:none;}
.mode-3d .gl-stage{display:block;}
.mode-3d .table, .mode-3d .me-home, .mode-3d .slot .well, .mode-3d .seat .cards-anchor, .mode-3d .seat .home-anchor,
.mode-3d .reset-ring, .mode-3d .pile-glow, .mode-3d .hand-anchor{display:none !important;}
.mode-3d .arena{pointer-events:none;}
.mode-3d .seats{display:block; position:fixed; inset:0; top:0; padding:0;}
.mode-3d .seat{position:absolute; left:0; top:0; transition:none; pointer-events:none; will-change:transform;}
.mode-3d .center{position:fixed; inset:0; left:0; top:0; transform:none; display:block;}
.mode-3d .slot{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;}
.mode-3d .slot .counter, .mode-3d .req-badge{pointer-events:auto;}
.mode-3d .slot .slot-label{opacity:.7;}
.mode-3d .me{
  grid-template-columns:auto 1fr auto; grid-template-areas:"plate hint actions"; align-items:center; gap:10px;
  padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(6,6,10,0) 0%, rgba(6,6,10,.78) 60%);
}
.mode-3d .me .me-plate{position:static; transform:none; grid-area:plate; justify-self:start;}
.mode-3d .me .me-hand{grid-area:hint; min-width:0;}
.mode-3d .me .me-actions{grid-area:actions; flex-direction:row; align-items:center; min-width:0;}
.mode-3d .hint{margin:0; min-height:0;}
.mode-3d .seat.dimmed .plate, .mode-3d #mePlate.dimmed{opacity:.35; filter:grayscale(.6);}
.mode-3d .seat .plate, .mode-3d #mePlate{transition: border-color .3s, box-shadow .3s, opacity .3s, filter .3s;}
.mode-3d .toasts{bottom:auto; top:16%;}
@media (max-width: 760px){
  .mode-3d .me{grid-template-columns:auto 1fr auto; grid-template-areas:"plate hint actions"; gap:6px; padding:6px 8px calc(8px + env(safe-area-inset-bottom));}
  .mode-3d .me .me-plate{display:inline-flex;}
  .mode-3d .hint{font-size:11px; line-height:1.3;}
  .mode-3d .seat{width:clamp(88px, 24vw, 120px);}
  .mode-3d .toasts{top:14%;}
}
@media (prefers-reduced-motion: reduce){
  .card{transition-duration:.01ms;}
  .card-body{transition-duration:.01ms;}
}

/* =====================================================================
   Online play — lobby, room, turn clock, connection state
   ===================================================================== */
#onlineScreen{display:none; overflow:auto; -webkit-overflow-scrolling:touch;}
#onlineScreen.active{display:flex; align-items:flex-start; justify-content:center; padding:24px 16px;}
@media (min-height:760px){ #onlineScreen.active{align-items:center;} }
.online-card{width:min(640px, 100%);}
.btn-online{width:100%; margin-top:10px; color:#f3e6c8; background:linear-gradient(180deg, rgba(120,26,44,.95), rgba(70,14,26,.95)); border:1px solid rgba(227,185,92,.55); font-family:'Cinzel', Georgia, serif; letter-spacing:.8px; box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);}
.btn-online:hover{filter:brightness(1.1);}
.ol-input{width:100%; background:rgba(0,0,0,.35); border:1px solid rgba(227,185,92,.3); border-radius:12px; color:var(--cream); font:600 16px/1.2 'Inter', system-ui, sans-serif; padding:12px 14px; outline:none;}
.ol-input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(227,185,92,.18);}
.ol-code{font-family:'Cinzel', Georgia, serif; font-size:24px; letter-spacing:.4em; text-align:center; text-transform:uppercase; padding:10px 0 10px .4em;}
.ol-split{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;}
.ol-box{background:rgba(255,255,255,.035); border:1px solid rgba(227,185,92,.2); border-radius:16px; padding:14px 14px 12px; display:flex; flex-direction:column;}
.ol-box h3{margin:0 0 2px; font-size:15px; letter-spacing:1px; color:var(--gold);}
.ol-box .field{margin-top:12px;}
.ol-box .btn{width:100%; margin-top:14px;}
.ol-box .segmented button{font-size:13px; padding:8px 0;}
.ol-status{min-height:20px; margin-top:12px; font-size:13px; color:var(--cream-2); text-align:center;}
.ol-status.warn{color:#ffb8a3;} .ol-status.good{color:#f3e2b5;}
.ol-room-head{display:flex; gap:16px; align-items:center; justify-content:space-between; margin-top:6px;}
.ol-room-id{min-width:0; flex:1;}
.ol-room-id .field{margin:0 0 4px;}
.ol-roomcode{font-size:52px; line-height:1; letter-spacing:.18em; color:var(--gold); text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 24px rgba(227,185,92,.25);}
.ol-link{font-size:12px; color:var(--muted); margin-top:8px; word-break:break-all;}
.ol-sharebtn{margin-top:10px; padding:10px 14px; font-size:13px;}
.ol-qr{display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto;}
.ol-qr canvas{width:150px; height:150px; border-radius:12px; border:3px solid #b98a2e; box-shadow:0 10px 26px rgba(0,0,0,.5); image-rendering:pixelated; background:#F0E6D2;}
.ol-qr span{font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold);}
.ol-seat .ol-seat-name{flex:1; min-width:0; font-weight:600; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ol-seat .ol-seat-name em{font-style:normal; color:var(--muted); font-weight:500;}
.ol-seat .ol-tag{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); border:1px solid rgba(227,185,92,.35); padding:3px 8px; border-radius:999px; white-space:nowrap;}
.ol-seat.open{opacity:.65; border-style:dashed;} .ol-seat.open .ol-tag{color:var(--sky); border-color:rgba(92,200,255,.4);}
.ol-seat.away{opacity:.6;} .ol-seat.away .ol-tag{color:#ffb8a3; border-color:rgba(255,143,107,.45);}
.ol-wait{margin-top:16px; text-align:center; color:var(--cream-2); font-size:14px; padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px dashed rgba(227,185,92,.3);}
.ol-wait:not(.hidden)::after{content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; background:var(--gold); animation: blink 1s infinite;}
#olHostCtl .btn{width:100%; margin-top:16px;}
@media (max-width:560px){
  .ol-split{grid-template-columns:1fr;}
  .ol-room-head{flex-direction:column-reverse; align-items:center; text-align:center;}
  .ol-roomcode{font-size:44px;}
  .ol-qr canvas{width:180px; height:180px;}
}
/* in-game: turn clock + offline players + connection banner */
.turn-clock{position:absolute; right:16px; bottom:calc(74px + env(safe-area-inset-bottom)); z-index:45; padding:6px 12px; border-radius:999px; font:700 14px 'Cinzel', Georgia, serif; color:var(--gold); background:rgba(22,8,12,.88); border:1px solid rgba(227,185,92,.45); box-shadow:0 6px 18px rgba(0,0,0,.45);}
.turn-clock::before{content:"Your turn · "; font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:11px; color:var(--cream-2);}
.turn-clock.urgent{color:#ffd0bd; border-color:#ff7b3a; animation: urgent 1s ease-in-out infinite;}
.seat-clock{margin-left:6px; font:700 11px 'Cinzel', Georgia, serif; color:var(--gold);}
.seat.offline .plate{opacity:.55; filter:grayscale(.6);}
.seat.offline .plate::after{content:"away"; position:absolute; right:-6px; top:-8px; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:#5c1420; color:#ffd0bd; border:1px solid rgba(227,185,92,.35);}
body.net-down .hud::after{content:"Reconnecting…"; position:absolute; left:50%; top:100%; transform:translateX(-50%); font-size:11px; padding:3px 10px; border-radius:999px; background:#5c1420; color:#ffe6d6; border:1px solid rgba(227,185,92,.35);}
body.online #rulesBtn2{}

/* ---------- BURN transition (transition.js) ---------- */
#gameScreen > :not(.gl-stage){transition:opacity .45s ease;}
body.bt-active #gameScreen > :not(.gl-stage){opacity:0; pointer-events:none; transition:none;}
.bt-catch{position:fixed; inset:0; z-index:120; cursor:pointer; background:transparent; touch-action:none;}
.bt-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:110; pointer-events:none;}
@media (prefers-reduced-motion: reduce){ #gameScreen > :not(.gl-stage){transition:none;} }