/* Last Call HUD (0.5.2 clean pass). Two type families only:
   Geist (UI, sans) and Instrument Serif (display, italic). Both OFL, self-hosted in /fonts. */
@font-face { font-family: 'Geist'; src: url('/fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --ui: 'Geist', system-ui, 'Segoe UI', Roboto, sans-serif; --disp: 'Instrument Serif', Georgia, serif;
  --ink: #f3ead6; --dim: #b9a98f; --gold: #d9b45a; --gold2: #8a6a24; --red: #d8434b; --red2: #6e1218;
  --plum: #2a0f18; --glass: rgba(18, 9, 11, .62); --ok: #6fcf7f;
  --s0: #7fb2ff; --s1: #ff7b72; --s2: #7ee08a; --s3: #d7a6ff;
  --card-h: clamp(104px, 19vh, 176px);
}
/* ===== Last Call design tokens (docs/DESIGN_SYSTEM.md, 0.10.5) =====
   Type: Instrument Serif italic for the voice of the bar (titles, the turn line, banners);
   Geist for everything you read or tap; Geist Mono for anything counted or typed (codes, odds, timers, counts). */
:root {
  --num: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* type scale: 1.15 steps, 11px floor (nothing smaller is ever drawn) */
  --t-2xs: 11px; --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 36px;
  --t-hero: clamp(54px, 12vh, 112px);
  --track-label: .08em; --track-caps: .14em;
  /* surfaces: smoked glass over the 3D room */
  --glass: rgba(14, 10, 9, .62); --glass-strong: rgba(14, 10, 9, .82); --hair: rgba(255, 255, 255, .09); --hair-gold: rgba(217, 180, 90, .35);
  --blur: blur(14px) saturate(1.3);
  /* radius and spacing: 4-point grid */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* danger ramp (revolver odds): safe -> wary -> hot -> lethal */
  --d0: #8fd19e; --d1: #d9c45a; --d2: #e8903a; --d3: #e5484d;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0809; color: var(--ink); font: 500 var(--t-sm)/1.35 var(--ui); font-feature-settings: 'ss01', 'tnum'; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
.display { font-family: var(--disp); font-style: italic; letter-spacing: .02em; }

/* ---------- orbs (every button is round or a soft pill) ---------- */
button { font: inherit; color: var(--ink); cursor: pointer; }
.orb, #panel button, #lobbyBox button {
  border: 0; border-radius: 999px; min-height: 44px; min-width: 44px; padding: 0 16px;
  background: radial-gradient(circle at 35% 30%, #4a2a30, #1a0d10 75%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.55), 0 0 0 2px rgba(217,180,90,.18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.orb:hover:not(:disabled), #panel button:hover:not(:disabled), #lobbyBox button:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.6), 0 0 0 2px rgba(217,180,90,.55), 0 0 22px rgba(217,180,90,.25); }
button:disabled { opacity: .35; cursor: default; filter: grayscale(.6); }
button.primary, .orb.primary, #panel button.primary, #lobbyBox button.primary { background: radial-gradient(circle at 35% 30%, #ffe3a0, #d9a43e 55%, #7a5418); color: #2a1606; font-weight: 800; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
button.danger, .orb.danger, #panel button.danger, #lobbyBox button.danger { background: radial-gradient(circle at 35% 30%, #ff8a7a, #c22b36 55%, #4e0a10); color: #fff4ef; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
button.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(217,180,90,.6); }
.orb.small { width: 46px; height: 46px; padding: 0; font-size: var(--t-xs); }
input, select {
  font: inherit; color: var(--ink); background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.07), rgba(0,0,0,.35));
  border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; outline: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 1.5px rgba(217,180,90,.25);
}
input:focus, select:focus { box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 2px rgba(217,180,90,.7); }
select option { background: #1a0d10; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 50px; height: 28px; min-height: 0; padding: 0; position: relative; cursor: pointer; vertical-align: middle; }
input[type=checkbox]::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--dim); transition: left .2s, background .2s; }
input[type=checkbox]:checked::after { left: 26px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
input[type=range] { padding: 0 10px; min-height: 30px; }

/* ---------- top-right orbs ---------- */
#top { position: fixed; top: 12px; right: 14px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#top .netdot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
#top .netdot.off { background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1s infinite; }
.ring { position: fixed; top: 12px; right: 70px; display: flex; gap: 10px; align-items: center; animation: fanIn .25s ease; }
.ring .orb:nth-child(odd) { transform: translateY(8px); }
#emotes { top: 66px; right: 70px; flex-wrap: wrap; max-width: 420px; justify-content: flex-end; }
#emotes button { width: 46px; height: 46px; padding: 0; font-size: var(--t-lg); }
#emotes button.phrase { width: auto; padding: 0 14px; font-size: var(--t-xs); }
@keyframes fanIn { from { opacity: 0; transform: translateX(20px) scale(.9); } }
#buildTag { position: fixed; left: 14px; bottom: 6px; z-index: 3; font-size: var(--t-2xs); color: rgba(185,169,143,.55); pointer-events: none; }

/* ---------- crown: arc status + medallion + timer ring ---------- */
#crown { position: fixed; top: 2px; left: 50%; transform: translateX(-50%); width: clamp(330px, 30vw, 460px); z-index: 6; pointer-events: none; }
#crown svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.arcText { fill: var(--ink); font: italic 400 var(--t-lg) var(--disp); letter-spacing: .14em; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 4px; }
.arcText .t { fill: var(--gold); }
#timerRing { transition: stroke-dashoffset .5s linear, opacity .3s; }
#medalInner { position: absolute; left: 50%; top: 63.2%; transform: translate(-50%, -50%); width: 21%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font: italic 400 var(--t-sm) var(--disp); color: var(--gold); line-height: 1.1; }
#medalInner img { height: 82%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
#medalInner .big { font-size: var(--t-xl); }
#medalInner .small { font-size: var(--t-2xs); color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
#subStatus { text-align: center; margin-top: -4px; font-size: var(--t-xs); color: var(--dim); text-shadow: 0 1px 3px #000; }
#subStatus b { color: var(--ink); }
#status { position: fixed; left: -9999px; }

/* ---------- event feed (fades, no box) ---------- */
#feed { position: fixed; left: 18px; top: 22vh; width: min(320px, 26vw); z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
#feed div { font-size: var(--t-xs); text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.9); animation: feedIn .35s ease, feedOut 1s ease 9s forwards; }
#feed div.key { color: var(--gold); font-weight: 700; }
#feed div.bad { color: #ff9a8f; font-weight: 700; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-16px); } }
@keyframes feedOut { to { opacity: 0; } }

/* ---------- opponent plates & bubbles ---------- */
#plates, #bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.plate { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; transition: opacity .3s; }
.plate svg { width: 200px; height: 46px; overflow: visible; display: block; margin: 0 auto -6px; }
.plate .nm { font: italic 400 var(--t-md) var(--disp); fill: var(--ink); paint-order: stroke; stroke: rgba(0,0,0,.8); stroke-width: 4px; letter-spacing: .04em; }
.plate .pips { display: inline-flex; gap: 4px; align-items: center; padding: 3px 10px; border-radius: 999px; background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 72%); font-size: var(--t-xs); color: var(--dim); }
.plate .pip { width: 9px; height: 9px; border-radius: 50%; background: rgba(217,180,90,.25); box-shadow: inset 0 0 0 1.5px rgba(217,180,90,.6); }
.plate .pip.on { background: var(--red); box-shadow: 0 0 6px var(--red); }
.plate .cb { width: 10px; height: 14px; border-radius: 3px; background: radial-gradient(circle at 50% 40%, #8c2a34, #3a0b10); box-shadow: 0 0 0 1px rgba(217,180,90,.5); }
.plate.turn .nm { fill: var(--gold); }
.plate.turn::after { content: ''; position: absolute; left: 50%; top: -14px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: var(--gold); box-shadow: 0 0 16px 4px rgba(217,180,90,.7); animation: pulse 1.1s infinite; }
.plate.out { opacity: .55; }
.plate.out .nm { fill: #9a8f80; }
.bubble { position: absolute; transform: translate(-50%, -100%); padding: 10px 18px; border-radius: 26px 26px 26px 6px; background: radial-gradient(ellipse at 40% 30%, #fffaf0, #eadcc0); color: #2a1606; font: italic 400 var(--t-sm) var(--disp); box-shadow: 0 8px 22px rgba(0,0,0,.55); animation: bubIn .3s cubic-bezier(.2,1.6,.4,1), bubOut .4s ease 2.6s forwards; white-space: nowrap; }
.bubble.emote { font-size: var(--t-2xl); padding: 6px 12px; border-radius: 50%; }
.bubble img { height: 26px; vertical-align: middle; margin: 0 2px; }
@keyframes bubIn { from { opacity: 0; transform: translate(-50%, -60%) scale(.5); } }
@keyframes bubOut { to { opacity: 0; transform: translate(-50%, -140%); } }

/* ---------- my medallion (bottom left) ---------- */
#meMedal { position: fixed; left: 18px; bottom: 22px; z-index: 6; width: clamp(120px, 16vh, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a1d22, #0e0708 72%); box-shadow: 0 10px 30px rgba(0,0,0,.7), 0 0 0 2px rgba(217,180,90,.35), inset 0 0 22px rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; }
#meMedal svg { width: 78%; height: 78%; overflow: visible; }
#meMedal .lbl { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: italic 400 var(--t-xs) var(--disp); color: var(--gold); text-shadow: 0 1px 3px #000; }
#meMedal.dead { filter: grayscale(1) brightness(.6); }

/* ---------- my hand (fanned real cards) ---------- */
#hand { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 1px; height: calc(var(--card-h) * 1.15); z-index: 7; }
#hand .card { position: absolute; left: 0; bottom: 16px; height: var(--card-h); aspect-ratio: 256 / 360; padding: 0; border: 0; background: none; border-radius: 12px; transform-origin: 50% 280%;
  transition: transform .25s cubic-bezier(.2,1.3,.4,1), filter .2s; filter: drop-shadow(0 8px 14px rgba(0,0,0,.65)); min-height: 0; cursor: pointer; }
#hand .card img { width: 100%; height: 100%; display: block; pointer-events: none; }
#hand .card:hover:not(:disabled) { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) brightness(1.08); }
#hand .card.selected { filter: drop-shadow(0 0 14px rgba(255,214,120,.95)) drop-shadow(0 12px 18px rgba(0,0,0,.7)); }
#hand .card .num { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: var(--t-2xs); color: var(--dim); text-shadow: 0 1px 2px #000; }
#hand .card.fly { transition: transform .45s cubic-bezier(.4,0,.6,1), opacity .45s; opacity: 0; }
#hand .card.dealt { animation: dealIn .45s cubic-bezier(.2,1.2,.4,1) backwards; }
@keyframes dealIn { from { transform: translate(-50%, -80vh) rotate(180deg) scale(.4); opacity: 0; } }
#hand .card.collect { animation: collectOut .4s cubic-bezier(.5,0,.8,.4) forwards; pointer-events: none; }
@keyframes collectOut { to { transform: translate(-50%, -60vh) rotate(-160deg) scale(.4); opacity: 0; } }
#hand .die { position: absolute; bottom: 18px; width: clamp(54px, 9vh, 76px); height: clamp(54px, 9vh, 76px); transform-origin: 50% 300%; transition: transform .3s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
#hand .die img { width: 100%; height: 100%; }
#hand .die.match { filter: drop-shadow(0 0 12px rgba(255,214,120,.9)); }
#hand .hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--dim); font-style: italic; text-shadow: 0 1px 3px #000; }
#hand .reel { position: absolute; bottom: 24px; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--t-2xl); background: radial-gradient(circle at 40% 35%, #fff8e8, #d9c8a2); color: #2a1606; box-shadow: 0 6px 14px rgba(0,0,0,.6); }
#hand .reel.pub { box-shadow: 0 0 0 3px var(--s0), 0 6px 14px rgba(0,0,0,.6); }
#hand .reel.heart { color: #c0283a; }

/* ---------- action arc (bottom right) ---------- */
#panel { position: fixed; right: 0; bottom: 0; width: clamp(300px, 46vh, 420px); height: clamp(300px, 46vh, 420px); z-index: 8; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, rgba(10,4,6,.78) 0, rgba(10,4,6,.5) 40%, rgba(10,4,6,0) 70%); }
#panel > * { pointer-events: auto; }
#panel button { position: absolute; transform: translate(-50%, -50%); padding: 0 10px; font-size: var(--t-xs); line-height: 1.1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#panel button:hover:not(:disabled) { transform: translate(-50%, -52%) scale(1.06); }
#panel button.big { width: clamp(96px, 15vh, 128px); height: clamp(96px, 15vh, 128px); font-size: var(--t-md); }
#panel button.mid { width: clamp(70px, 11vh, 88px); height: clamp(70px, 11vh, 88px); font-size: var(--t-xs); }
#panel button.tiny { width: 46px; height: 46px; font-size: var(--t-md); padding: 0; }
#panel button.face { width: 46px; height: 46px; padding: 3px; background: none; box-shadow: none; }
#panel button.face img { width: 100%; height: 100%; }
#panel button.face.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(217,180,90,.7); border-radius: 12px; }
#panel button kbd { font: var(--t-2xs) var(--ui); opacity: .6; margin-top: 3px; }
#panel .bidread { position: absolute; transform: translate(-50%, -50%); font: italic 400 var(--t-lg) var(--disp); color: var(--gold); text-shadow: 0 2px 6px #000; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
#panel .bidread img { height: 30px; }
#panel .note { position: absolute; right: 18px; bottom: 12px; max-width: 260px; text-align: right; font-size: var(--t-xs); color: #ffcf7a; text-shadow: 0 1px 3px #000; }

/* ---------- banner & vignette ---------- */
#banner { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 9; pointer-events: none; text-align: center; font: italic 400 clamp(40px, 9vh, 86px) var(--disp); letter-spacing: .04em; color: var(--ink); text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 40px rgba(0,0,0,.9); opacity: 0; white-space: nowrap; }
#banner small { display: block; font: 600 clamp(14px, 2.4vh, 20px) var(--ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
#banner.show { animation: bannerPop 1.6s cubic-bezier(.2,1.4,.4,1) forwards; }
#banner.red { color: #ff6b5e; } #banner.gold { color: var(--gold); }
@keyframes bannerPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); } }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 100%); transition: background .6s; }
#vignette.tense { animation: tense .84s ease-in-out infinite; }
#vignette.dead { background: radial-gradient(ellipse at 50% 50%, rgba(80,0,0,.45) 0%, rgba(20,0,0,.92) 70%); transition: background 1.2s; }
#vignette.poison { background: radial-gradient(ellipse at 50% 50%, rgba(40,120,50,.08) 30%, rgba(20,80,30,.7) 100%); filter: blur(0); }
#vignette.ghost { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 40%, rgba(10,0,4,.75) 100%); filter: saturate(.3); }
@keyframes tense { 0%, 100% { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 40%, rgba(40,0,0,.75) 100%); } 50% { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 28%, rgba(70,0,0,.88) 100%); } }
@keyframes pulse { 50% { opacity: .45; } }
#spectate { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; font: italic 400 var(--t-md) var(--disp); color: var(--dim); text-shadow: 0 2px 6px #000; }
#toast { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 40; padding: 10px 22px; border-radius: 999px; background: radial-gradient(ellipse, #b0262f, #5a0c12); box-shadow: 0 8px 24px rgba(0,0,0,.6); font-weight: 600; }

/* ---------- sheets (rules / log / settings): soft scroll, no edges ---------- */
.sheet { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 44vw); z-index: 25; overflow: auto; padding: 70px 34px 40px 60px; font-size: var(--t-xs);
  background: radial-gradient(ellipse at 100% 50%, rgba(22,10,13,.97) 55%, rgba(22,10,13,.85) 72%, rgba(22,10,13,0) 100%); border-radius: 50% 0 0 50% / 30% 0 0 30%; animation: sheetIn .3s ease; }
@keyframes sheetIn { from { transform: translateX(60px); opacity: 0; } }
.sheet h3 { font: italic 400 var(--t-xl) var(--disp); color: var(--gold); margin: 0 0 10px; }
.sheet .x { position: absolute; top: 18px; right: 74px; }
.sheet ul { padding-left: 18px; } .sheet li { margin: 4px 0; }
#log div { padding: 3px 0; color: var(--ink); opacity: .9; }
.prov { color: #ffcf7a; }
.dim { color: var(--dim); font-size: var(--t-xs); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }

/* ---------- lobby: a round table ---------- */
#overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 55%, rgba(11,8,9,.25) 0%, rgba(11,8,9,.78) 62%, rgba(11,8,9,.96) 100%); }
#lobbyBox { position: relative; width: min(94vw, 1100px); height: min(96vh, 760px); display: flex; align-items: center; justify-content: center; }
.neon { font: italic 400 clamp(46px, 10vh, 92px) var(--disp); color: #fff2f7; text-shadow: 0 0 6px #ff7fb0, 0 0 18px #ff3f8a, 0 0 42px #ff3f8a, 0 0 80px rgba(255,63,138,.6); margin: 0; text-align: center; animation: flicker 6s infinite; }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }
.tag { text-align: center; color: var(--dim); font-style: italic; margin: 4px 0 18px; }
.welcome { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.welcome .bigrow { display: flex; gap: 24px; align-items: center; }
.welcome .bigrow button { width: 150px; height: 150px; font: italic 400 var(--t-lg) var(--disp); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.welcome .bigrow button small { font: var(--t-xs) var(--ui); opacity: .75; margin-top: 4px; }
.welcome .joinrow { display: flex; gap: 10px; align-items: center; }
.welcome #nm { width: 260px; text-align: center; font: italic 400 var(--t-md) var(--disp); }
.welcome #code { width: 120px; text-align: center; letter-spacing: .3em; text-transform: uppercase; }
.roundtable { position: relative; width: min(66vh, 600px); aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 45%, #22573f 0%, #133524 55%, #0a1f15 70%, #3a1d12 71%, #241008 76%, rgba(0,0,0,0) 77%); }
.roundtable::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(217,180,90,.35), inset 0 0 0 7px rgba(0,0,0,0), inset 0 0 0 8.5px rgba(217,180,90,.2); pointer-events: none; }
.tablecenter { position: absolute; inset: 22%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.tablecenter .code { font: 700 var(--t-xs) var(--ui); color: var(--dim); letter-spacing: .2em; }
.tablecenter .code b { font: italic 400 var(--t-2xl) var(--disp); color: var(--ink); letter-spacing: .25em; display: block; }
.tablecenter select { max-width: 100%; font-size: var(--t-xs); }
.tablecenter .row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
#start, #ready { width: 112px; height: 112px; font: italic 400 var(--t-md) var(--disp); }
.seatdisc { position: absolute; width: 27%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: var(--t-xs); padding: 8px;
  background: radial-gradient(circle at 40% 30%, #3a1d22, #120809 75%); box-shadow: 0 10px 26px rgba(0,0,0,.7), 0 0 0 3px var(--sc, rgba(217,180,90,.3)); }
.seatdisc .who { font: italic 400 var(--t-xs) var(--disp); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seatdisc .pat { font: italic 400 var(--t-2xs) var(--disp); color: var(--gold); }
.seatdisc .st { font-size: var(--t-2xs); color: var(--dim); }
.seatdisc .st.ok { color: var(--ok); }
.seatdisc button, .seatdisc select { min-height: 30px; padding: 2px 12px; font-size: var(--t-xs); }
.seatdisc.me { box-shadow: 0 10px 26px rgba(0,0,0,.7), 0 0 0 3px var(--gold), 0 0 24px rgba(217,180,90,.4); }
.seatdisc .face { font-size: var(--t-xl); line-height: 1; }
.lobbyside { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 25%; display: flex; flex-direction: column; gap: 10px; }
.lobbyside.right { left: auto; right: 0; align-items: flex-end; text-align: right; }
.warnline { color: #ffcf7a; font-size: var(--t-xs); max-width: 220px; }
.stats { display: flex; flex-direction: column; gap: 6px; }
.stats .srow { display: grid; grid-template-columns: 1fr repeat(4, 44px); gap: 4px; align-items: center; padding: 6px 14px; border-radius: 999px; background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%); font-size: var(--t-xs); }
.stats .srow.head { background: none; color: var(--dim); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em; }
.stats .srow.win { background: radial-gradient(ellipse at 30% 50%, rgba(217,180,90,.25), rgba(217,180,90,0) 75%); color: var(--gold); }
.stats .srow span:not(:first-child) { text-align: center; }
.result { font: italic 400 clamp(26px, 5vh, 40px) var(--disp); color: var(--gold); text-shadow: 0 0 20px rgba(217,180,90,.4); }

#rotate { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; display: none !important; align-items: center; justify-content: center; font: italic 400 var(--t-3xl) var(--disp); text-align: center; padding: 20px; }

@media (max-aspect-ratio: 1/1) { #rotate { display: flex !important; } }
@media (max-height: 640px) {
  #crown { width: 340px; }
  .roundtable { width: 60vh; }
  .welcome .bigrow button { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { #banner.show { animation-duration: .9s; } }

/* ---------- 0.5: online lobby bits, tutorial ---------- */
.welcome .bigrow button small { max-width: 120px; }
.welcome #qmode { min-width: 190px; }
#tut { position: fixed; left: 50%; bottom: calc(var(--card-h) * 1.25); transform: translateX(-50%); z-index: 30; width: min(460px, 86vw); padding: 18px 26px 14px; border-radius: 34px 34px 34px 10px;
  background: radial-gradient(ellipse at 30% 20%, #fffaf0, #e9dcc0); color: #2a1606; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: bubIn .35s cubic-bezier(.2,1.6,.4,1); }
#tut b { font: italic 400 var(--t-lg) var(--disp); }
#tut p { margin: 6px 0 10px; font-size: var(--t-sm); line-height: 1.4; }
#tut .tutrow { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#tut .tutrow .dim { margin-right: auto; color: #7a6a52; }
#tut button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #2a1606; color: #f3ead6; font-weight: 700; }
#tut button.primary { background: radial-gradient(circle at 35% 30%, #ffe3a0, #d9a43e 55%, #7a5418); color: #2a1606; }
.seatdisc button[data-kick] { background: radial-gradient(circle at 35% 30%, #5a2a30, #2a0d10 75%); }

/* ---------- phones in landscape (short screens) ---------- */
@media (max-height: 520px) {
  :root { --card-h: clamp(78px, 24vh, 110px); }
  html, body { font-size: var(--t-xs); }
  #crown { width: 250px; top: 0; }
  .arcText { font-size: var(--t-xl); }
  #subStatus { font-size: var(--t-2xs); }
  #feed { top: 18vh; width: 34vw; gap: 2px; }
  #feed div { font-size: var(--t-2xs); }
  #feed div:nth-last-child(n+4) { display: none; }
  #panel { width: 56vh; height: 56vh; min-width: 200px; min-height: 200px; }
  #panel button.big { width: 74px; height: 74px; font-size: var(--t-xs); }
  #panel button.mid { width: 54px; height: 54px; font-size: var(--t-2xs); }
  #panel button.tiny, #panel button.face { width: 38px; height: 38px; font-size: var(--t-sm); }
  #panel button kbd { display: none; }
  #panel .bidread { font-size: var(--t-sm); } #panel .bidread img { height: 22px; }
  #panel .note { display: none; }
  #meMedal { width: 78px; left: 10px; bottom: 14px; }
  #meMedal .lbl { font-size: var(--t-2xs); bottom: -14px; }
  #hand .card { bottom: 6px; }
  #hand .die { width: 44px; height: 44px; bottom: 8px; }
  #hand .reel { width: 44px; height: 44px; font-size: var(--t-lg); }
  .orb.small { width: 38px; height: 38px; font-size: var(--t-2xs); }
  #top { top: 8px; right: 8px; gap: 6px; }
  .ring { right: 54px; top: 8px; gap: 6px; }
  #emotes { top: 52px; right: 54px; }
  #emotes button { width: 38px; height: 38px; font-size: var(--t-md); }
  .plate svg { width: 140px; height: 32px; }
  .plate .nm { font-size: var(--t-sm); }
  .bubble { font-size: var(--t-xs); padding: 6px 12px; }
  #banner { font-size: 42px; }
  #banner small { font-size: var(--t-2xs); }
  .sheet { width: 62vw; padding: 50px 20px 20px 40px; font-size: var(--t-xs); }
  #tut { width: 70vw; padding: 12px 18px 10px; bottom: auto; top: 18vh; }
  #tut p { font-size: var(--t-xs); }
  /* lobby */
  #lobbyBox { height: 100vh; width: 100vw; }
  .neon { font-size: 40px !important; }
  .tag { margin: 0 0 6px; font-size: var(--t-xs); }
  .welcome { gap: 8px; }
  .welcome .bigrow { gap: 14px; }
  .welcome .bigrow button { width: 104px; height: 104px; font-size: var(--t-sm); }
  .welcome .bigrow button small { font-size: var(--t-2xs); }
  .welcome #nm { width: 180px; font-size: var(--t-sm); }
  input, select { min-height: 38px; padding: 6px 14px; }
  #lobbyBox button { min-height: 36px; }
  .roundtable { width: 70vh; }
  .lobbyside.right > .dim { display: none; }
  .lobbyside { width: 24%; }
  #buildTag { display: none; }
  .seatdisc { width: 30%; padding: 4px; font-size: var(--t-2xs); gap: 2px; }
  .seatdisc .who { font-size: var(--t-2xs); } .seatdisc .pat { font-size: var(--t-2xs); }
  .seatdisc button, .seatdisc select { min-height: 26px; padding: 0 8px; font-size: var(--t-2xs); }
  #start, #ready { width: 76px; height: 76px; font-size: var(--t-xs); }
  .tablecenter { inset: 24%; gap: 4px; }
  .tablecenter .code b { font-size: var(--t-lg); }
  .tablecenter select { font-size: var(--t-2xs); max-width: 150px; }
  .lobbyside { width: 27%; gap: 6px; font-size: var(--t-2xs); }
  .lobbyside .dim { font-size: var(--t-2xs); }
  .stats .srow { grid-template-columns: 1fr repeat(4, 28px); padding: 3px 8px; font-size: var(--t-2xs); }
  .result { font-size: var(--t-md); }
}
@media (max-height: 380px) {
  .roundtable { width: 68vh; }
  .welcome .bigrow button { width: 90px; height: 90px; font-size: var(--t-xs); }
  #crown { width: 210px; }
}
/* notches / rounded corners on phones */
@supports (padding: max(0px)) {
  #top { right: max(8px, env(safe-area-inset-right)); }
  #meMedal { left: max(10px, env(safe-area-inset-left)); }
  #feed { left: max(18px, env(safe-area-inset-left)); }
}

/* =====================================================================
   0.5.2 clean pass: no bubbles, no small print, plates above heads,
   floating text that rises and fades. Overrides earlier rules.
   ===================================================================== */
:root { --glass2: rgba(16, 9, 11, .72); /* no backdrop blur: it is costly over the 3D canvas on phones */ --line: rgba(243, 234, 214, .14); }

/* buttons: quiet glass, one accent each */
.orb, #panel button, #lobbyBox button {
  background: var(--glass2);
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.45);
  font: 600 var(--t-xs) var(--ui); letter-spacing: .01em;
}
.orb:hover:not(:disabled), #panel button:hover:not(:disabled), #lobbyBox button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(243,234,214,.35), 0 10px 28px rgba(0,0,0,.5); }
button.primary, .orb.primary, #panel button.primary, #lobbyBox button.primary { background: linear-gradient(160deg, #f6dc9a, #d6a84a 60%, #b8862f); color: #1d1206; text-shadow: none; box-shadow: 0 10px 30px rgba(214,168,74,.25); font-weight: 700; }
button.danger, .orb.danger, #panel button.danger, #lobbyBox button.danger { background: linear-gradient(160deg, #ff7a6e, #d23a42 60%, #a01f2a); color: #fff; text-shadow: none; box-shadow: 0 10px 30px rgba(210,58,66,.25); font-weight: 700; }
#lobbyBox button.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
#panel button { font: 700 var(--t-sm) var(--ui); letter-spacing: .02em; }
#panel button.big { font-size: var(--t-lg); }
#panel button kbd, #panel .note:empty { display: none; }
#panel .note { font: 500 var(--t-xs) var(--ui); color: var(--ink); opacity: .85; }
#panel .bidread { font: 600 var(--t-xl) var(--ui); color: var(--ink); }
#panel { background: radial-gradient(circle at 100% 100%, rgba(10,4,6,.6) 0, rgba(10,4,6,.3) 40%, rgba(10,4,6,0) 68%); }

/* things removed from the screen */
#feed, #subStatus, #buildTag, #meMedal .lbl, #hand .card .num, #hand .hint, .bubble { display: none !important; }

/* crown: just the turn line and the medallion */
#crown svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.arcText { font: italic 400 var(--t-2xl) var(--disp); letter-spacing: .03em; stroke-width: 5px; stroke: rgba(0,0,0,.55); }
#medalInner { font: 600 var(--t-sm) var(--ui); color: var(--ink); }
#medalInner .big { font: 600 var(--t-2xl) var(--ui); }
#medalInner .small { font: 500 var(--t-2xs) var(--ui); letter-spacing: .14em; }

/* name plates: one clean line above the hat, pips under it */
.plate { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 5px; white-space: nowrap; transition: opacity .3s, transform .3s; pointer-events: none; }
.plate[data-mode="beside"] { transform: translate(0, -50%); align-items: flex-start; }
.plate .nm { font: 600 var(--t-sm) var(--ui); letter-spacing: .02em; color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.8); }
.plate .pips { padding: 0; background: none; gap: 4px; }
.plate .pip { width: 7px; height: 7px; }
.plate .cb { width: 8px; height: 11px; border-radius: 2px; }
.plate .pips b { font: 600 var(--t-xs) var(--ui); color: var(--gold); }
.plate .pips .dead { font-style: normal; color: #ff8a80; font-weight: 700; }
.plate.turn .nm { color: var(--gold); }
.plate.turn::after { top: auto; bottom: calc(100% + 6px); width: 8px; height: 8px; box-shadow: 0 0 14px 3px rgba(217,180,90,.7); }
.plate[data-mode="beside"].turn::after { left: -14px; top: 50%; bottom: auto; transform: translateY(-50%); }
.plate.out { opacity: .45; }
.plate.out .nm { color: #b5aa98; text-decoration: line-through; text-decoration-thickness: 1px; }

/* floating text: no box, rises and fades */
#bubbles { z-index: 9; }
.floater { position: absolute; transform: translate(0, -50%); white-space: nowrap; pointer-events: none;
  font: italic 400 clamp(26px, 4.4vh, 38px) var(--disp); color: #fff7e6; letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 28px rgba(0,0,0,.6);
  display: flex; align-items: center; gap: 8px; animation: floatUp 2.4s cubic-bezier(.2,.8,.2,1) forwards; transition: top .35s ease; }
.floater.left { transform: translate(-100%, -50%); }
.floater img { height: 1.05em; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.floater.emote { font-size: clamp(34px, 6vh, 50px); font-style: normal; }
.floater.me { transform: translate(-50%, -50%); }
@keyframes floatUp {
  0% { opacity: 0; translate: 0 14px; filter: blur(4px); }
  14% { opacity: 1; translate: 0 0; filter: blur(0); }
  72% { opacity: 1; translate: 0 -16px; }
  100% { opacity: 0; translate: 0 -42px; filter: blur(2px); }
}

/* banner: big serif line, small caps-free subline */
#banner { font: italic 400 clamp(54px, 12vh, 112px) var(--disp); letter-spacing: 0; text-shadow: 0 6px 30px rgba(0,0,0,.85); }
#banner small { font: 600 clamp(15px, 2.6vh, 22px) var(--ui); letter-spacing: .04em; text-transform: none; color: var(--ink); opacity: .85; margin-top: 4px; }
@keyframes bannerPop { 0% { opacity: 0; transform: translate(-50%, -42%); filter: blur(8px); } 14% { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); } 74% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%); filter: blur(3px); } }
#spectate { font: italic 400 var(--t-xl) var(--disp); }
#toast { background: var(--glass2); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.5); font: 600 var(--t-sm) var(--ui); }

/* tutorial: a glass card, not a speech bubble */
#tut { background: rgba(14,8,10,.82); color: var(--ink); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.6); animation: floatIn .35s ease; }
#tut b { font: italic 400 var(--t-2xl) var(--disp); color: var(--gold); }
#tut p { font: 500 var(--t-sm)/1.45 var(--ui); }
#tut .tutrow .dim { color: var(--dim); }
#tut button { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
@keyframes floatIn { from { opacity: 0; transform: translate(-50%, 12px); } }

/* lobby */
.neon { font: italic 400 clamp(64px, 14vh, 128px) var(--disp); letter-spacing: -.01em; }
.neon.side { font-size: clamp(40px, 8vh, 72px); text-align: left; }
.tag { font: 500 var(--t-xs) var(--ui); font-style: normal; letter-spacing: .08em; color: var(--dim); display: flex; align-items: center; gap: 8px; justify-content: center; }
.tag .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); display: inline-block; }
.welcome .bigrow button { font: 600 var(--t-lg)/1.15 var(--ui); }
.welcome .bigrow button small { display: none; }
.welcome #nm { font: 600 var(--t-md) var(--ui); }
.tablecenter .code { font: 500 var(--t-xs) var(--ui); letter-spacing: .14em; text-transform: uppercase; }
.tablecenter .code b { font: 600 var(--t-3xl) var(--ui); letter-spacing: .22em; margin-top: 2px; }
.tablecenter .row label { font: 500 var(--t-xs) var(--ui); color: var(--ink); opacity: .8; min-width: 54px; text-align: right; }
#start, #ready { font: 700 var(--t-md) var(--ui); }
.seatdisc { gap: 6px; }
.seatdisc .who { font: 600 var(--t-sm) var(--ui); }
.seatdisc .hostmark { font-style: normal; color: var(--gold); }
.seatdisc .pat { display: none; }
.seatdisc .st { font: 500 var(--t-xs) var(--ui); display: inline-flex; align-items: center; gap: 6px; color: var(--dim); }
.seatdisc .st .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.seatdisc .st.ok { color: var(--ok); }
.lobbyside.right { gap: 14px; }
.warnline { font: 600 var(--t-xs) var(--ui); color: #ffcf7a; }
.result { font: italic 400 clamp(30px, 6vh, 48px) var(--disp); line-height: 1.1; }
.stats { gap: 4px; margin-top: 6px; }
.stats .srow { grid-template-columns: 28px 1fr; font: 600 var(--t-sm) var(--ui); padding: 6px 14px; }
.stats .srow .rk { color: var(--dim); font-weight: 500; text-align: left !important; }
.stats .srow.win { color: var(--gold); }
.sheet { font: 500 var(--t-xs)/1.5 var(--ui); }
.sheet h3 { font: italic 400 var(--t-3xl) var(--disp); }

@media (max-height: 520px) {
  .arcText { font-size: var(--t-3xl); }
  .plate .nm { font-size: var(--t-xs); }
  .floater { font-size: var(--t-xl); }
  #banner { font-size: 48px; }
  #banner small { font-size: var(--t-xs); }
  .neon { font-size: 52px !important; }
  .neon.side { font-size: var(--t-3xl) !important; }
  .tablecenter .code b { font-size: var(--t-lg); }
  .seatdisc .who { font-size: var(--t-xs); } .seatdisc .st { font-size: var(--t-2xs); }
  .stats .srow { font-size: var(--t-xs); padding: 3px 8px; grid-template-columns: 20px 1fr; }
  .result { font-size: var(--t-lg); }
  #panel button { font-size: var(--t-xs); } #panel button.big { font-size: var(--t-xs); }
  #tut b { font-size: var(--t-lg); } #tut p { font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) { .floater { animation-duration: 1.6s; } }
.stats .srow span:not(:first-child) { text-align: left; }
#lobbyBox .seatdisc button.xbtn { position: absolute; top: 6%; right: 6%; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; font: 600 var(--t-xs) var(--ui); }
@media (max-height: 520px) { #lobbyBox .seatdisc button.xbtn { width: 24px; height: 24px; font-size: var(--t-2xs); top: 2%; right: 2%; } }

/* ---------- 0.6: character picker and portraits ---------- */
.charchip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 18px 4px 4px !important; min-height: 48px; }
.charchip img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(217,180,90,.6); }
.charchip span { font: 600 var(--t-sm) var(--ui); }
.charchip.empty { padding: 0 20px !important; box-shadow: inset 0 0 0 1.5px var(--gold) !important; }
#picker { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(22,11,14,.975), rgba(8,4,6,.99)); animation: floatIn2 .25s ease; }
@keyframes floatIn2 { from { opacity: 0; } }
#picker .pk { width: min(1000px, 94vw); height: min(640px, 94vh); display: flex; flex-direction: column; gap: 10px; }
#picker .pkhead { display: flex; align-items: center; justify-content: space-between; }
#picker h2 { margin: 0; font: italic 400 clamp(30px, 6vh, 48px) var(--disp); color: var(--ink); }
#picker .pkbody { flex: 1; min-height: 0; display: flex; gap: 24px; }
#picker .pklist { display: flex; flex-direction: column; gap: 10px; overflow: auto; padding: 4px; }
#picker .pkitem { display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 var(--t-sm) var(--ui); text-align: left; min-width: 210px; }
#picker .pkitem img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
#picker .pkitem.on { background: rgba(217,180,90,.14); box-shadow: inset 0 0 0 2px var(--gold); }
#picker .pkview { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 22px; border-radius: 28px; padding: 18px 24px;
  background: radial-gradient(ellipse at 35% 70%, rgba(217,180,90,.14), rgba(0,0,0,0) 60%); }
#picker .pkfull { height: 100%; max-height: 100%; max-width: 46%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.7)); }
#picker .pktext { flex: 1; padding-bottom: 12px; }
#picker .pktext h3 { margin: 0 0 6px; font: italic 400 clamp(40px, 8vh, 72px) var(--disp); color: var(--gold); line-height: 1; }
#picker .pktext p { margin: 0 0 18px; font: 500 var(--t-sm)/1.5 var(--ui); color: var(--ink); opacity: .88; max-width: 34ch; }
#picker #pkgo { min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 var(--t-sm) var(--ui); border: 0; }
.seatdisc .pic { width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: block; flex: none; padding: 0 !important; min-height: 0 !important; box-shadow: 0 0 0 2px var(--sc, rgba(217,180,90,.5)) !important; background: #000; }
.seatdisc .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seatdisc .pic.mine { cursor: pointer; }
.seatdisc .pic.empty { font: 600 var(--t-lg) var(--ui); background: rgba(255,255,255,.06); }
.seatdisc.haschar { justify-content: center; gap: 3px; }
.plate .nm { display: inline-flex; align-items: center; gap: 7px; }
.plate .av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(243,234,214,.6), 0 2px 8px rgba(0,0,0,.7); }
@media (max-height: 520px) {
  #picker .pk { height: 96vh; gap: 4px; }
  #picker h2 { font-size: var(--t-xl); }
  #picker .pkitem { min-width: 150px; padding: 3px 12px 3px 3px; font-size: var(--t-xs); gap: 8px; }
  #picker .pkitem img { width: 36px; height: 36px; }
  #picker .pklist { gap: 5px; }
  #picker .pktext h3 { font-size: var(--t-3xl); }
  #picker .pktext p { font-size: var(--t-xs); margin-bottom: 10px; }
  #picker #pkgo { min-height: 40px; font-size: var(--t-xs); padding: 0 16px; }
  #picker .pkview { padding: 8px 14px; gap: 12px; }
  .charchip { min-height: 38px; } .charchip img { width: 30px; height: 30px; } .charchip span { font-size: var(--t-xs); }
  .seatdisc .pic { width: 38%; }
  .plate .av { width: 18px; height: 18px; }
}

/* 0.6.2: camera-view note, own-character frame, performance display */
.floater.note { left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: clamp(30px, 5.4vh, 46px); }
#perf { position: fixed; z-index: 30; left: max(14px, env(safe-area-inset-left)); bottom: 14px; padding: 12px 16px; border-radius: 16px; pointer-events: none;
  background: rgba(8,6,8,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #f4efe6; font: 600 var(--t-sm)/1.45 var(--ui); font-variant-numeric: tabular-nums; text-align: left; }
#perf .big { font: 700 44px/1 var(--ui); margin-bottom: 4px; }
#perf .big small { font: 600 var(--t-sm) var(--ui); margin-left: 4px; opacity: .8; }
#perf .good { color: #7fe3a1; } #perf .ok { color: #ffd479; } #perf .bad { color: #ff7a7a; }
@media (max-height: 430px) { #perf { font-size: var(--t-xs); padding: 8px 12px; } #perf .big { font-size: var(--t-3xl); } }

/* 0.7: Devanagari fallback fonts, larger text, colour-blind friendly cues */
:root { --ui: 'Geist', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', system-ui, 'Segoe UI', Roboto, sans-serif; --disp: 'Instrument Serif', 'Noto Serif Devanagari', 'Nirmala UI', Georgia, serif; }
html[lang="hi"] .floater, html[lang="hi"] #banner { font-style: normal; }
html.bigtext .plate .nm { font-size: var(--t-lg); }
html.bigtext .plate .pip { width: 10px; height: 10px; }
html.bigtext .floater { font-size: clamp(32px, 5.6vh, 46px); }
html.bigtext .setrow, html.bigtext #tut p, html.bigtext .sheet p, html.bigtext .tablecenter .row label { font-size: var(--t-md); }
html.bigtext #perf { font-size: var(--t-md); }
html.bigtext .orb { font-size: 1.12em; }
html.cb .plate .pip.on { background: #f2f2f2; box-shadow: none; position: relative; }
html.cb .plate .pip.on::after { content: '×'; position: absolute; inset: -4px 0 0; font: 700 var(--t-2xs)/1 var(--ui); color: #111; text-align: center; }
html.cb .plate.turn::after { background: none; border: 3px solid #fff; animation: none; box-shadow: none; }
html.cb .plate.turn .nm { text-decoration: underline; text-underline-offset: 4px; }
html.cb #perf .good::after { content: ' ●'; } html.cb #perf .ok::after { content: ' ▲'; } html.cb #perf .bad::after { content: ' ■'; }
/* welcome footer: language, about, privacy */
.footlinks { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 6px; font: 500 var(--t-xs) var(--ui); }
.footlinks a { color: var(--dim); text-decoration: none; } .footlinks a:hover { color: var(--ink); }
.footlinks button { padding: 6px 12px; font: 600 var(--t-xs) var(--ui); }
/* players and profile sheets */
.prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.prow .pn { display: flex; align-items: center; gap: 8px; font: 600 var(--t-sm) var(--ui); }
.prow .pa { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.prow button, .prow select { padding: 6px 12px; font: 600 var(--t-xs) var(--ui); background: rgba(255,255,255,.06); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; min-width: 64px; }
.prow select option { color: #111; }
.sheet .av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.sheet .av.big { width: 56px; height: 56px; }
.sheet p.small { font-size: var(--t-xs); line-height: 1.45; }
.pfhead { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.pfhead b { display: block; font: 600 var(--t-md) var(--ui); } .pfhead span { font-size: var(--t-xs); }
.pfgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pfgrid div { background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 8px; text-align: center; }
.pfgrid b { display: block; font: 700 var(--t-lg) var(--ui); color: var(--gold); } .pfgrid span { font-size: var(--t-xs); color: var(--dim); }

/* Devanagari: letter-spacing breaks conjuncts */
html[lang="hi"] body, html[lang="hi"] body * { letter-spacing: 0 !important; }

/* connection lost while seated */
#reconn { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(14,8,10,.9); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.5); font: 500 var(--t-xs) var(--ui); color: var(--ink); }
#reconn button { margin-left: 4px; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--gold); color: #1a0f08; font: 700 var(--t-xs) var(--ui); pointer-events: auto; }
#reconn b { font-weight: 700; } #reconn span { color: var(--dim); }
#reconn i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold); border-top-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* short phones (iPhone SE and smaller, landscape): the whole welcome fits, footer included */
@media (max-height: 400px) {
  .welcome { gap: 6px; }
  .welcome .neon { font-size: clamp(34px, 12vh, 50px); line-height: 1; }
  .welcome .footlinks { margin-top: 0; gap: 10px; }
  .welcome .footlinks button { padding: 4px 10px; font-size: var(--t-xs); }
}
@media (max-height: 340px) {
  .welcome .tag { display: none; }
  .welcome .neon { font-size: var(--t-2xl); }
  .welcome .bigrow button { width: 78px; height: 78px; font-size: var(--t-xs); }
  .welcome #nm, .welcome #qmode, .welcome #code, .welcome .joinrow button { height: 34px; font-size: var(--t-xs); }
}
/* 0.8: locked characters (Ravana unlocks by play) */
#picker .pkitem.locked img { filter: grayscale(.85) brightness(.6); }
#picker .pkitem .lock { font-style: normal; margin-left: auto; font-size: var(--t-xs); opacity: .85; }
#picker .unlock { color: var(--gold); margin: 10px 0 2px; }
#picker #pkgo[disabled] { opacity: .45; cursor: not-allowed; }
/* 0.8: feedback sheet */
#feedback textarea { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font: var(--t-sm) var(--ui); resize: vertical; }
#feedback select { max-width: 60%; }
#feedback pre { white-space: pre-wrap; word-break: break-all; max-height: 140px; overflow: auto; opacity: .75; }
#feedback .row { display: flex; gap: 10px; margin-top: 6px; }
/* 0.8: About / Privacy / Terms over the game in the Android app */
#pageView { position: fixed; inset: 0; z-index: 60; background: #0b0809; }
#pageView iframe { width: 100%; height: 100%; border: 0; background: #0b0809; }
#pageView .x { position: absolute; top: 10px; right: 12px; z-index: 1; }
#pageView.hidden { display: none; }
/* 0.9: account section of the profile */
#profile h4 { margin: 18px 0 4px; font: 600 var(--t-sm) var(--ui); color: var(--gold); }
#profile .row { display: flex; gap: 8px; margin: 6px 0; align-items: center; }
#profile .row.wrap { flex-wrap: wrap; }
#profile input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); font: var(--t-sm) var(--ui); }
#profile .danger { color: #ff8a80; }
/* sheet buttons (profile, feedback): readable pills, not browser defaults */
.sheet button.ghost, .sheet button.primary { border: 0; border-radius: 999px; padding: 8px 16px; font: 600 var(--t-xs) var(--ui); cursor: pointer; }
.sheet button.ghost { background: rgba(255,255,255,.05); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sheet button.ghost.danger { color: #ff8a80; box-shadow: inset 0 0 0 1px rgba(255,138,128,.45); }
.sheet button.primary { background: var(--gold); color: #1a1008; }
.sheet button[disabled] { opacity: .45; cursor: not-allowed; }

/* 0.9.1: the room's centre on short (phone) screens: code, invite, mode, toggles and Start must fit
   inside the felt without covering a seat (the Start button sat on your own seat on phones) */
.tablecenter .toggles { display: flex; flex-direction: column; gap: 8px; align-items: center; }
@media (max-height: 520px) {
  .tablecenter { inset: 25%; gap: 3px; }
  .tablecenter .code { font-size: var(--t-2xs); letter-spacing: .12em; }
  .tablecenter .code b { font-size: var(--t-md); margin-top: 0; }
  .tablecenter #invite { min-height: 26px; padding: 0 12px; font-size: var(--t-2xs); }
  .tablecenter select { min-height: 28px; padding: 2px 10px; }
  .tablecenter .toggles { flex-direction: row; gap: 10px; }
  .tablecenter .row { gap: 4px; }
  .tablecenter .row label { min-width: 0; font-size: var(--t-2xs); }
  .tablecenter input[type=checkbox] { transform: scale(.8); margin: 0 -4px; }
  /* Start / Ready leave the crowded centre for the bottom-right corner, under the thumb */
  .tablecenter #start, .tablecenter #ready { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 84px; height: 84px; min-height: 0; font-size: var(--t-sm); z-index: 6; }
  .tablecenter .toggles .row { flex-direction: row; }
}
@media (max-height: 380px) { .tablecenter select { max-width: 118px; font-size: var(--t-2xs); } .tablecenter .toggles { gap: 6px; } }

/* =====================================================================
   0.9.2 corrective pass: state-dependent menu panel, touch mode picker,
   illustrated rules, practice, confirmations, offline note, tips placement.
   ===================================================================== */
.menupanel { position: fixed; top: 60px; right: max(12px, env(safe-area-inset-right)); z-index: 31; display: flex; flex-direction: column; gap: 4px; min-width: 190px; padding: 8px;
  background: rgba(16,9,11,.96); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(0,0,0,.6); animation: popIn .18s ease; }
.menupanel .orb.small, .menupanel .orb.small:nth-child(odd) { width: auto; height: 44px; border-radius: 12px; transform: none; justify-content: flex-start; text-align: left; padding: 0 14px; font: 600 var(--t-sm) var(--ui); background: transparent; box-shadow: none; }
.menupanel .orb.small:hover, .menupanel .orb.small:focus-visible { background: rgba(255,255,255,.06); }
.menupanel .orb.small.danger { color: #ff8a80; margin-top: 4px; box-shadow: inset 0 1px 0 var(--line); border-radius: 0 0 12px 12px; }
.menupanel .hidden { display: none !important; }

.sheet.wide { z-index: 36; width: min(680px, 94vw); padding: 14px 22px 24px; border-radius: 0; background: rgb(18,10,12); box-shadow: -20px 0 50px rgba(0,0,0,.5); }
.ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -14px; padding: 6px 0 8px; background: inherit; z-index: 1; }
.ghead h3 { margin: 0; }
.gx { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: var(--ink); font-size: var(--t-md); flex: none; }

/* mode picker */
.mpick { display: flex; flex-direction: column; gap: 8px; }
.mcard { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 10px 14px; border: 0; border-radius: 16px; text-align: left; color: var(--ink);
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.mcard.on { background: rgba(217,164,62,.14); box-shadow: inset 0 0 0 2px var(--gold); }
.mcard:disabled { opacity: .7; }
.mcard .mtext { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mcard .mtext b { font: 600 var(--t-sm) var(--ui); color: #fff3dc; }
.mcard .mtext span { font: 500 var(--t-xs)/1.35 var(--ui); color: var(--dim); }
.mcheck { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #2a1606; box-shadow: inset 0 0 0 2px var(--line); }
.mcard.on .mcheck { background: var(--gold); box-shadow: none; }
.micon { display: inline-flex; align-items: center; flex: none; width: 58px; justify-content: center; }
.micon .gcard.mini { width: 30px; margin: 0 -6px; transform: rotate(-6deg); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.micon .gcard.mini.b2 { transform: rotate(8deg); }
.micon .gdie { width: 24px; height: 24px; margin: 0 1px; }
.modebtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border: 0; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.modebtn .micon { width: 46px; }
.modebtn > span { display: inline-flex; align-items: center; gap: 8px; } .modebtn b { font: 600 var(--t-xs) var(--ui); } .modebtn i { font-style: normal; color: var(--gold); }
.modebtn:disabled { opacity: .85; } .modebtn:disabled i { display: none; }
.tablecenter .modebtn { max-width: 100%; }

/* offline note */
.offnote { display: flex; flex-direction: column; gap: 2px; max-width: 420px; margin: 4px auto; padding: 10px 16px; border-radius: 14px; text-align: center; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); font: 500 var(--t-xs)/1.4 var(--ui); color: var(--dim); }
.offnote b { color: #ffcf7a; font-size: var(--t-xs); } .offnote.small { padding: 6px 12px; font-size: var(--t-xs); }
.bigrow.solo1 button { width: 150px !important; height: 150px !important; font-size: var(--t-lg) !important; }

/* illustrated rules */
.guide { display: flex; flex-direction: column; gap: 12px; }
.gtabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.gtabs button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.05); font: 600 var(--t-xs) var(--ui); }
.gtabs button.on { background: var(--gold); color: #2a1606; }
.gstep { display: grid; grid-template-columns: minmax(150px, 42%) 1fr; gap: 18px; align-items: center; min-height: 190px; }
.gart { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 18px; background: radial-gradient(ellipse at 50% 40%, #1f4a32 0%, #12261b 100%); min-height: 160px; }
.gtxt b { display: block; font: italic 400 var(--t-xl) var(--disp); color: var(--gold); margin-bottom: 6px; }
.gtxt p { margin: 0; font: 500 var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.gcard { width: 56px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.gcard.hl { outline: 3px solid var(--gold); outline-offset: 2px; } .gcard.dim { opacity: .45; }
.gdie { width: 34px; height: 34px; border-radius: 6px; }
.gsvg { width: 84px; height: 84px; } .gsvg.wide { width: 140px; }
.gmark { font: 800 var(--t-xl) var(--ui); margin-left: 6px; } .gmark.ok { color: #5fd38a; } .gmark.no { color: #ff6b5e; }
.gsay { display: inline-block; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: #f3ead6; color: #2a1606; font: 700 var(--t-xs) var(--ui); margin: 2px; }
.grow { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; flex-wrap: wrap; }
.gnav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.gnav button, .ghostbtn { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.07); font: 600 var(--t-xs) var(--ui); }
.gnav button.primary { background: radial-gradient(circle at 35% 30%, #ffe3a0, #d9a43e 55%, #7a5418); color: #2a1606; }
.gnav button:disabled { opacity: .35; }
.gcount { margin-right: auto; color: var(--dim); font: 600 var(--t-xs) var(--ui); }
.gfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gkeys { color: var(--dim); font: 500 var(--t-xs) var(--ui); }
.gnote { color: var(--dim); font: 500 var(--t-xs)/1.4 var(--ui); margin: 0; }

/* practice and confirmations: centred cards over a dimmed table */
#practice, #confirm { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(6,3,4,.72); padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
#practice.hidden, #confirm.hidden { display: none; }
.practice, .cbox { width: min(560px, 94vw); max-height: 94vh; overflow: auto; padding: 14px 20px 18px; border-radius: 22px; background: rgba(20,11,13,.98); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px rgba(0,0,0,.6); animation: popIn .2s ease; }
.pbody p, .pnote { font: 500 var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.phand { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 10px; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #1f4a32 0%, #12261b 100%); }
.pcard { border: 0; padding: 0; background: none; border-radius: 8px; transition: transform .12s; min-width: 44px; }
.pcard .gcard { width: 60px; } .pcard.on { transform: translateY(-12px); } .pcard.on .gcard { outline: 3px solid var(--gold); }
.pgun { display: grid; place-items: center; cursor: pointer; } .pgun .gsvg { width: 120px; height: 120px; }
.cbox b { font: italic 400 var(--t-xl) var(--disp); color: var(--gold); } .cbox p { font: 500 var(--t-sm)/1.45 var(--ui); }
.crow { display: flex; gap: 10px; justify-content: flex-end; }
.crow button { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; font: 700 var(--t-sm) var(--ui); color: var(--ink); background: rgba(255,255,255,.08); }
.crow button.primary { background: radial-gradient(circle at 35% 30%, #ffe3a0, #d9a43e 55%, #7a5418); color: #2a1606; }
.crow button.danger { background: #8c1d26; color: #fff; }

/* in-match tips: bottom-left, clear of every face at the table */
@keyframes popIn { from { opacity: 0; transform: translateY(8px); } }
#tut { animation: popIn .3s ease; left: max(12px, env(safe-area-inset-left)); right: auto; top: auto; bottom: calc(var(--card-h) * 1.3); transform: none; width: min(340px, 38vw); padding: 12px 16px 10px; }
#tut b { font-size: var(--t-lg); } #tut p { font-size: var(--t-xs); }

@media (max-height: 520px) {
  .menupanel { top: 50px; min-width: 170px; } .menupanel .orb.small, .menupanel .orb.small:nth-child(odd) { height: 40px; font-size: var(--t-xs); }
  .sheet.wide { width: 100vw; padding: 8px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left)); }
  .gstep { grid-template-columns: 40% 1fr; min-height: 0; gap: 12px; } .gart { min-height: 120px; padding: 8px; }
  .gtxt b { font-size: var(--t-lg); } .gtxt p { font-size: var(--t-xs); }
  .gcard { width: 44px; } .gdie { width: 28px; height: 28px; } .gsvg { width: 66px; height: 66px; } .gsvg.wide { width: 110px; }
  .mcard { min-height: 56px; padding: 6px 10px; } .mcard .mtext span { font-size: var(--t-xs); }
  .practice, .cbox { padding: 8px 14px 12px; } .pbody p, .pnote { font-size: var(--t-xs); margin: 6px 0; } .pcard .gcard { width: 48px; }
  #tut { width: 38vw; bottom: calc(var(--card-h) * 1.15); } #tut b { font-size: var(--t-sm); } #tut p { font-size: var(--t-xs); margin: 4px 0 6px; }
  .bigrow.solo1 button { width: 110px !important; height: 110px !important; font-size: var(--t-md) !important; }
  .offnote { font-size: var(--t-2xs); padding: 6px 12px; }
}
html.bigtext .gtxt p, html.bigtext .pbody p, html.bigtext .mcard .mtext span { font-size: var(--t-md); }
#vignette.devil { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 35%, rgba(90,0,8,.7) 100%); transition: background .6s; }
#vignette.chaos { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 35%, rgba(50,0,90,.7) 100%); transition: background .6s; }
#skipFx { position: fixed; z-index: 32; right: max(14px, env(safe-area-inset-right)); bottom: calc(var(--card-h) * 1.4); min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(20,11,13,.9); color: var(--ink); font: 700 var(--t-xs) var(--ui); box-shadow: inset 0 0 0 1px var(--line); }
#skipFx.hidden { display: none; }
/* 0.9.2: the claim on the table, readable at a glance */
#crown #subStatus { display: flex !important; gap: 6px; justify-content: center; flex-wrap: wrap; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; margin: 0; }
#subStatus .pill { padding: 3px 10px; border-radius: 999px; background: rgba(14,8,10,.78); box-shadow: inset 0 0 0 1px var(--line); font: 600 var(--t-xs) var(--ui); color: var(--dim); white-space: nowrap; }
#subStatus .pill.hi { color: #fff3dc; } #subStatus .pill.red { color: #ff8a80; }
#crown.mine .arcText { fill: #ffd35e; } #crown.mine svg { filter: drop-shadow(0 0 10px rgba(255,200,80,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
@media (max-height: 520px) { #subStatus .pill { font-size: var(--t-2xs); padding: 2px 8px; } }
/* 0.9.2 voice chat: mic button (slashed when off), speaking glow, mic icon on name plates */
#micBtn { color: var(--dim); }
#micBtn.on { color: #2a1606; background: radial-gradient(circle at 35% 30%, #ffe3a0, #d9a43e 55%, #7a5418); }
#micBtn.on .slash { display: none; }
#micBtn.speaking { box-shadow: 0 0 0 3px rgba(95,211,138,.85), 0 0 16px rgba(95,211,138,.6); }
#emoteBtn, #micBtn { width: 44px; height: 44px; font-size: var(--t-lg); }
.plate .mic { display: inline-block; width: 10px; height: 14px; margin-left: 6px; border-radius: 5px; background: #5fd38a; vertical-align: middle; }
.plate .mic.off { background: #7a6a6e; }
.plate.speaking { filter: drop-shadow(0 0 8px rgba(95,211,138,.9)); }

/* 0.9.3 voice states (functional placeholders; final look is Codex's): data-state on #micBtn is one of
   unavailable | denied | idle | connecting | connected | muted | reconnecting (public/voice.js) */
#micBtn[data-state="denied"] { color: #ff7a6a; }
#micBtn[data-state="unavailable"] { opacity: .45; }
#micBtn[data-state="connecting"], #micBtn[data-state="reconnecting"] { animation: micWait 1.1s ease-in-out infinite; }
@keyframes micWait { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #micBtn[data-state="connecting"], #micBtn[data-state="reconnecting"] { animation: none; opacity: .7; } }

/* 0.9.4 aim by looking: a ring round the person you are looking at, a dot at the centre of the view */
#aimMark { position: fixed; left: 0; top: 0; width: 60px; height: 60px; border-radius: 50%; pointer-events: none; z-index: 6;
  border: 2px solid rgba(255, 92, 70, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 60, 40, .45), inset 0 0 12px rgba(255, 60, 40, .25);
  transition: width .12s, height .12s, opacity .15s; }
#aimMark::before, #aimMark::after { content: ''; position: absolute; left: 50%; top: -9px; width: 2px; height: 14px; margin-left: -1px; background: rgba(255, 92, 70, .9); }
#aimMark::after { top: auto; bottom: -9px; }
#aimMark.lost, #aimMark.hidden { opacity: 0; }
#reticle { position: fixed; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; z-index: 6;
  border: 1.5px solid rgba(255, 240, 220, .85); box-shadow: 0 0 4px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .2s; }
body.aiming #reticle { opacity: 1; }
#panel button.fire:disabled { opacity: .45; }
#panel button.fire.armed { box-shadow: 0 0 0 3px rgba(255, 92, 70, .35), 0 0 22px rgba(255, 60, 40, .55); }

/* =====================================================================
   0.9.4 "Menu card" pass (owner rejected 0.9.2's flat dark/brass home).
   Surfaces that hold reading or choices are ivory card stock with oxblood ink and
   deco double rules, like the playing cards on the table; actions are poker chips.
   The scene stays visible and uncluttered. Overrides earlier rules.
   ===================================================================== */
:root {
  --paper: #efe5cf; --paper2: #e3d4b3; --paperline: rgba(58, 24, 20, .28); --inkp: #24110e; --inkp2: #5b3a2c;
  --ox: #7a1626; --ox2: #a3263a; --verm: #d8432f; --chip-edge: #f6efe0;
  --cardshadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(58, 24, 20, .35);
  --grain: repeating-linear-gradient(0deg, rgba(90, 60, 30, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 60, 30, .02) 0 1px, transparent 1px 4px);
}

/* ---------- in game: actions are poker chips ---------- */
#panel button { border-radius: 50%; color: var(--inkp); font: 800 var(--t-xs) var(--ui); letter-spacing: .06em; text-transform: uppercase;
  background: radial-gradient(circle, var(--paper) 0 55%, transparent 55.5%), repeating-conic-gradient(var(--ox) 0 15deg, var(--chip-edge) 15deg 30deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0,0,0,.4); }
#panel button::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1.5px dashed rgba(122, 22, 38, .45); pointer-events: none; }
#panel button.primary { color: var(--inkp); background: radial-gradient(circle, var(--paper) 0 55%, transparent 55.5%), repeating-conic-gradient(#1d3b2c 0 15deg, var(--chip-edge) 15deg 30deg); }
#panel button.primary::before { border-color: rgba(29, 59, 44, .5); }
#panel button.danger { color: #fff4ea; background: radial-gradient(circle, var(--ox2) 0 55%, transparent 55.5%), repeating-conic-gradient(var(--chip-edge) 0 15deg, var(--ox) 15deg 30deg); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
#panel button.danger::before { border-color: rgba(255, 240, 220, .55); }
#panel button.fire.armed { box-shadow: 0 0 0 4px rgba(216, 67, 47, .35), 0 0 26px rgba(216, 67, 47, .6), 0 8px 20px rgba(0,0,0,.55); }
#panel button.tiny { background: rgba(239, 229, 207, .92); color: var(--inkp); }
#panel button.tiny::before { display: none; }
#panel button:disabled { filter: brightness(.72); opacity: .62; }
#panel .note { color: var(--paper); text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.8); }

/* name tags: small ivory cards under the gaslight */
.plate .nm { padding: 3px 12px 3px 3px; border-radius: 999px; background: rgba(239, 229, 207, .93); color: var(--inkp); text-shadow: none; font: 700 13.5px var(--ui); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.plate .nm:not(:has(.av)) { padding-left: 12px; }
.plate .av { box-shadow: 0 0 0 1.5px var(--ox); }
.plate.turn .nm { color: var(--paper); background: linear-gradient(180deg, var(--ox2), var(--ox)); box-shadow: 0 0 0 2px rgba(239,229,207,.8), 0 0 18px rgba(216, 67, 47, .45); }
.plate.turn::after { display: none; }
.plate.out .nm { background: rgba(120, 110, 100, .75); color: #2b2420; text-decoration: line-through; }
.plate .pip { background: rgba(239, 229, 207, .3); box-shadow: inset 0 0 0 1.5px rgba(239, 229, 207, .85); }
.plate .pip.on { background: var(--verm); box-shadow: 0 0 6px var(--verm); }
.plate .cb { background: linear-gradient(160deg, var(--ox2), var(--ox)); box-shadow: 0 0 0 1px rgba(239,229,207,.7); }

/* the crown medallion and turn line */
.arcText { fill: var(--paper); }
#crown circle[fill] { stroke: rgba(239, 229, 207, .7); }

/* top-right controls: small ivory chips */
#top .orb.small { background: rgba(239, 229, 207, .92); color: var(--inkp); box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px var(--paperline); }
#top .orb.small:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 0 0 1.5px var(--ox); }
#menu .orb.small { width: auto; padding: 0 14px; border-radius: 4px; font: 700 var(--t-xs) var(--ui); letter-spacing: .04em; }
#menu .orb.small.danger { background: linear-gradient(180deg, var(--ox2), var(--ox)); color: var(--paper); }

/* reading surfaces: rules, settings, log, players, profile, feedback, modes */
.sheet { background: var(--grain), linear-gradient(170deg, var(--paper), var(--paper2)); color: var(--inkp); border-radius: 0; box-shadow: -18px 0 50px rgba(0,0,0,.5); padding: 64px 30px 36px 34px; border-left: 6px double rgba(122, 22, 38, .55); }
.sheet h3 { color: var(--ox); }
.sheet .dim, .sheet .setrow .dim { color: var(--inkp2); }
.sheet a { color: var(--ox); }
.sheet button, .sheet .orb { background: var(--inkp); color: var(--paper); box-shadow: none; border-radius: 4px; }
.sheet button.primary { background: linear-gradient(180deg, var(--ox2), var(--ox)); color: var(--paper); }
.sheet input, .sheet select { background: rgba(255,255,255,.55); color: var(--inkp); box-shadow: inset 0 0 0 1px var(--paperline); border-radius: 4px; }
.sheet input[type=checkbox] { background: rgba(58, 24, 20, .18); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--paperline); }
.sheet input[type=checkbox]::after { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sheet input[type=checkbox]:checked { background: var(--ox); }
.sheet input[type=checkbox]:checked::after { background: var(--paper); box-shadow: none; }
.sheet input[type=range] { accent-color: var(--ox); background: none; box-shadow: none; }
.sheet .setrow { border-bottom: 1px solid rgba(58, 24, 20, .12); padding-bottom: 10px; }
#log div { color: var(--inkp); }
.sheet .x { background: none !important; color: var(--inkp) !important; font-size: var(--t-lg); }

/* banners and toasts keep to the scene; the toast is a card */
#toast { background: var(--paper); color: var(--inkp); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px var(--paperline); border-radius: 4px; }
#tut { background: var(--grain), linear-gradient(170deg, var(--paper), var(--paper2)); color: var(--inkp); border-radius: 6px; box-shadow: var(--cardshadow); }
#tut b { color: var(--ox); }
#tut .tutrow .dim { color: var(--inkp2); }
#tut button { color: var(--inkp); box-shadow: inset 0 0 0 1px var(--paperline); border-radius: 4px; }
#tut button.primary { background: linear-gradient(180deg, var(--ox2), var(--ox)); color: var(--paper); box-shadow: none; }

/* room lobby: seats as chips around the felt; side buttons as cards */
.seatdisc { background: radial-gradient(circle, var(--paper) 0 62%, transparent 62.5%), repeating-conic-gradient(var(--sc, var(--ox)) 0 12deg, var(--chip-edge) 12deg 24deg); color: var(--inkp); }
.seatdisc .who { color: var(--inkp); } .seatdisc .st { color: var(--inkp2); } .seatdisc .st.ok { color: #1f7a3a; }
.seatdisc.me { box-shadow: 0 10px 26px rgba(0,0,0,.7), 0 0 0 3px var(--paper), 0 0 24px rgba(239,229,207,.4); }
.seatdisc button, .seatdisc select { background: var(--inkp); color: var(--paper); box-shadow: none; }
.lobbyside button.ghost, #lobbyBox .lobbyside button { background: rgba(239, 229, 207, .92) !important; color: var(--inkp) !important; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.4) !important; }

/* phones in landscape */
@media (max-height: 520px) {
  .plate .nm { font-size: 11.5px; padding: 2px 9px 2px 2px; }
  .sheet { padding: 44px 18px 20px 22px; }
}
/* 0.9.4: the smallest landscape phones (≈740×360): the room centre stays clear of the seats */
@media (max-height: 370px) {
  .tablecenter { inset: 25%; gap: 2px; }
  .tablecenter .code b { font-size: var(--t-md); }
  .tablecenter .modebtn { min-height: 30px; padding: 2px 10px 2px 4px; } .tablecenter .modebtn .micon { width: 30px; }
  #start, #ready { width: 66px; height: 66px; font-size: var(--t-xs); }
}

/* 0.9.4 home polish (owner, 14 Oct): the original centred welcome, refined in place.
   No panels, rules or flat fills: light, glow and depth on the same round controls. */
#overlay.home { background: radial-gradient(ellipse at 50% 50%, rgba(11,8,9,.12) 0%, rgba(11,8,9,.55) 58%, rgba(11,8,9,.9) 100%); }
#overlay.home .neon { animation: flicker 7s infinite, neonBreath 5s ease-in-out infinite; }
@keyframes neonBreath { 50% { text-shadow: 0 0 8px #ff8fbb, 0 0 24px #ff3f8a, 0 0 56px #ff3f8a, 0 0 110px rgba(255,63,138,.55); } }
#overlay.home .tag { letter-spacing: .22em; text-transform: uppercase; font-size: var(--t-xs); opacity: .85; }
#overlay.home .welcome .bigrow button:not(.primary) {
  background: radial-gradient(circle at 34% 26%, rgba(255,240,220,.13), rgba(20,11,13,.74) 58%, rgba(10,5,7,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(243,234,214,.16), 0 16px 36px rgba(0,0,0,.55); }
#overlay.home .welcome .bigrow button:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(217,180,90,.55), 0 18px 40px rgba(0,0,0,.6), 0 0 34px rgba(217,180,90,.28); }
#overlay.home .welcome .bigrow button.primary { animation: halo 3.2s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 10px 30px rgba(214,168,74,.25), 0 0 0 10px rgba(214,168,74,.08), 0 0 46px rgba(214,168,74,.35); } }
#overlay.home .welcome #nm, #overlay.home .welcome #code { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.1), rgba(0,0,0,.42)); }
#overlay.home .charchip img { box-shadow: 0 0 0 2px rgba(217,180,90,.75), 0 0 16px rgba(217,180,90,.35); }
@media (prefers-reduced-motion: reduce) { #overlay.home .neon, #overlay.home .welcome .bigrow button.primary { animation: none; } }

/* 0.9.5: the loading ritual caption (one bullet, spin, odds): text in light and shadow, no panel; wraps on phones */
#ritual { position: fixed; left: 50%; bottom: 24%; transform: translate(-50%, 12px); z-index: 9; pointer-events: none; text-align: center; max-width: min(92vw, 640px); opacity: 0; transition: opacity .45s, transform .45s; }
#ritual.show { opacity: 1; transform: translate(-50%, 0); }
#ritual b { display: block; font: italic 400 clamp(30px, 6.5vh, 60px) var(--disp); color: var(--gold); text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 28px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.7); }
#ritual small { display: block; margin-top: 6px; font: 600 clamp(14px, 2.4vh, 19px) var(--ui); color: var(--ink); opacity: .95; text-shadow: 0 1px 3px #000, 0 0 16px rgba(0,0,0,.95), 0 0 34px rgba(0,0,0,.8); }
#meMedal.spin svg > g { animation: medalSpin .9s cubic-bezier(.3,.1,.2,1) infinite; }
@keyframes medalSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #meMedal.spin svg > g { animation: none; } #ritual { transition: none; } }

/* 0.9.5 shop: round swatches like the table's own controls; a coin is a small gold disc */
.coin { display: inline-block; width: .95em; height: .95em; border-radius: 50%; vertical-align: -.12em; margin-right: .3em;
  background: radial-gradient(circle at 35% 30%, #fff3c4 0, #e8c56a 28%, #b8913e 62%, #7a5a1e 100%); box-shadow: inset 0 0 0 1.5px rgba(122,90,30,.8), 0 0 8px rgba(232,197,106,.35); }
.coin.big { width: 34px; height: 34px; margin: 0; }
#shop .purse { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 6px; }
#shop .purse b { font: italic 400 44px var(--disp); color: var(--ox, #6e1a20); line-height: 1; }
#shop h4 { margin: 18px 0 8px; font: italic 400 var(--t-lg) var(--disp); color: var(--ox, #6e1a20); text-align: center; }
#shop .items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
#shop .item { all: unset; cursor: pointer; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; -webkit-tap-highlight-color: transparent; }
#shop .item .sw { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; transition: transform .2s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(36,17,14,.35), 0 0 0 1px rgba(36,17,14,.25); }
#shop .item .sw i, #shop .item .sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
#shop .item b { font: 600 var(--t-xs) var(--ui); color: var(--inkp); }
#shop .item small { font: 600 var(--t-xs) var(--ui); color: var(--inkp2); }
#shop .item:hover .sw, #shop .item:focus-visible .sw { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px rgba(0,0,0,.5), 0 0 0 2px rgba(217,180,90,.6); }
#shop .item.on .sw { box-shadow: 0 0 0 3px #b8913e, 0 0 18px rgba(184,145,62,.55); }
#shop .item.on small { color: var(--ox, #6e1a20); }
#shop .item.arm .sw { box-shadow: 0 0 0 3px #e8c56a, 0 0 26px rgba(232,197,106,.6); animation: halo 1.6s ease-in-out infinite; }
#shop .item.arm small { color: var(--ox, #6e1a20); font-weight: 800; }
#shopBtn { white-space: nowrap; }

/* 0.9.6: About and Privacy sit in the bottom-right corner of the home screen */
#overlay .welcome .legal { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 14px; z-index: 2; }
#overlay .welcome .legal a { font: 500 12.5px var(--ui); color: var(--dim); text-decoration: none; opacity: .85; }
#overlay .welcome .legal a:hover { color: var(--ink); opacity: 1; }

/* 0.9.9: provisional rule steps are labelled */
.gprov { display: inline-block; margin: 4px 0 2px; padding: 2px 8px; border-radius: 999px; font-size: var(--t-2xs); letter-spacing: .02em; color: #f3d38a; background: rgba(160, 110, 30, .22); border: 1px solid rgba(243, 211, 138, .35); }
/* 0.10.0: the Last Call difference label, and the "Table choices" list (no picture: full width, scrolls) */
.gdiff { color: #f1c6b0; background: rgba(150, 50, 30, .25); border-color: rgba(241, 198, 176, .4); }
.gstep.noart { grid-template-columns: 1fr; align-items: start; }
.gitems { margin: 8px 0 0; padding-left: 18px; max-height: 44vh; overflow-y: auto; font: 500 13.5px/1.45 var(--ui); color: var(--ink); }
.gitems li { margin: 0 0 5px; }
/* 0.10.0: performance scenes overlay */
#bench { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; min-width: min(420px, 92vw); max-width: 92vw; padding: 18px 20px; border-radius: 16px; background: rgba(20, 12, 8, .94); border: 1px solid rgba(243, 211, 138, .35); color: var(--ink); font: 500 var(--t-xs)/1.45 var(--ui); }
#bench b { color: var(--gold); } #bench table { width: 100%; border-collapse: collapse; margin: 8px 0; } #bench td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
/* 0.10.0: Reduced motion (Settings): event banners fade in place, no zoom or blur */
@keyframes bannerFade { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
html.rm #banner.show { animation: bannerFade 1.4s linear forwards; }
html.rm #hand .card.fly { transition: none !important; }

/* 0.10.1 online test build: which server this is (client.js testBadge) */
#testBadge { position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; pointer-events: none; padding: 2px 9px; border-radius: 999px; font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .08em; color: #1a1406; background: #e0b46a; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
#testBadge.warn { color: #fff; background: #b3261e; }
.setrow.testsrv { flex-wrap: wrap; gap: 6px; }
.testsrvbox { display: flex; gap: 6px; flex: 1 1 260px; }
.testsrvbox input { flex: 1; min-width: 0; }
.testshop { margin-top: 6px; }
/* 0.10.2: the server address box on the online test app's home screen (and the "can't reach" note) */
.offnote.srvcard { gap: 6px; max-width: 460px; }
.offnote.srvcard .testsrvbox { flex: none; width: 100%; gap: 8px; margin-top: 2px; }
.offnote.srvcard input { height: 38px; padding: 0 12px; border-radius: 10px; font: 500 var(--t-sm) var(--ui); text-align: left; }
.offnote.srvcard button { height: 38px; padding: 0 18px; border-radius: 999px; font: 600 var(--t-xs) var(--ui); flex: none; width: auto; animation: none; }
.offnote.srvcard #srvChange { align-self: center; height: 32px; margin-top: 2px; }

/* ---------- 0.10.2 in-match layout (game-night feedback: overlapping names, counters and messages) ---------- */
/* the crown is a compact strip at the very top, above every player's head: the turn line, then the table
   card (small) with the table card and the last claim as pills beside it, then a thin turn timer */
#crown { top: 6px !important; left: 50%; transform: translateX(-50%); width: auto !important; max-width: 64vw; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#crown svg { display: none !important; }
#turnLine { font: italic 400 var(--t-lg)/1.1 var(--disp); letter-spacing: .08em; color: var(--ink); white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.8); }
#crown.mine #turnLine { color: #ffd35e; }
#crown .crownrow { display: flex; align-items: center; gap: 7px; }
#crown #medalInner { position: static !important; transform: none !important; width: auto !important; height: 34px; aspect-ratio: auto !important; border-radius: 5px; display: flex; flex-direction: row; gap: 3px; align-items: center; font-size: var(--t-xs); }
#crown #medalInner img { height: 34px !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
#crown #medalInner .big { font-size: var(--t-sm) !important; } #crown #medalInner .small { font-size: var(--t-2xs) !important; }
#crown #subStatus { position: static !important; transform: none !important; display: flex !important; flex-wrap: nowrap; gap: 6px; width: auto !important; margin: 0 !important; }
#turnBar { width: 120px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; transition: opacity .2s; }
#turnBar i { display: block; height: 100%; width: 100%; background: #d9b45a; transform-origin: left center; }
@media (max-height: 520px) { #turnLine { font-size: var(--t-sm); } #crown #medalInner, #crown #medalInner img { height: 26px !important; } #crown .crownrow { gap: 5px; } }

/* name plates: name on top, then two labelled counters with room between them */
.plate { gap: 4px; }
.plate[data-mode="besideL"] { transform: translate(-100%, -50%); align-items: flex-end; }
.plate[data-mode="besideL"].turn::after { left: auto; right: -14px; top: 50%; bottom: auto; transform: translateY(-50%); }
.plate .pips { display: inline-flex; align-items: center; gap: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(12,7,9,.72); box-shadow: inset 0 0 0 1px rgba(217,180,90,.28); }
.plate .st { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--t-xs)/1 var(--ui); color: var(--ink); }
.plate .st small { font: 600 var(--t-2xs)/1 var(--ui); color: var(--dim); margin-left: 1px; }
.plate .st .cb { width: 9px; height: 12px; }
.plate .st .cyl { width: 13px; height: 13px; border-radius: 50%; display: inline-block; background:
  radial-gradient(circle at 50% 22%, #0c0708 0 1.6px, transparent 2px), radial-gradient(circle at 80% 38%, #0c0708 0 1.6px, transparent 2px),
  radial-gradient(circle at 80% 68%, #0c0708 0 1.6px, transparent 2px), radial-gradient(circle at 50% 82%, #0c0708 0 1.6px, transparent 2px),
  radial-gradient(circle at 20% 68%, #0c0708 0 1.6px, transparent 2px), radial-gradient(circle at 20% 38%, #0c0708 0 1.6px, transparent 2px), #b9b2a6; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.plate .st.gun.warm b { color: #ffc56b; }
.plate .st.gun.hot b { color: #ff7b6e; }
@media (max-height: 520px) { .plate .st { font-size: var(--t-xs); } .plate .pips { padding: 2px 8px; gap: 7px; } }
/* the big action chip: long words (PULL THE TRIGGER, Hindi) stay inside the ring */
#panel button.big { padding: 0 18px; font-size: clamp(13px, 2.1vh, 16px); line-height: 1.12; overflow-wrap: anywhere; }

/* 0.10.5: phone typing bar, always above the on-screen keyboard (the app is full screen, so the keyboard covers
   the page instead of shrinking it) */
#typebar { position: fixed; z-index: 10000; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(94vw, 620px); box-sizing: border-box; padding: 10px 12px 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(38,24,20,.98), rgba(20,12,11,.98)); border: 1px solid rgba(217,180,90,.55);
  box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 0 100vmax rgba(0,0,0,.55); }
#typebar.hidden { display: none; }
#typebar label { display: block; font-size: var(--t-xs); color: var(--dim); margin: 0 2px 6px; letter-spacing: .02em; }
#typebar .trow { display: flex; gap: 8px; }
#typebar input { flex: 1; min-width: 0; font-size: var(--t-lg); padding: 10px 12px; -webkit-user-select: text; user-select: text; }
#typebar button { flex: none; padding: 0 18px; font-size: var(--t-sm); min-height: 44px; }

/* ===== 0.10.5 player tag: minimal, shown only for the player you look at (DESIGN_SYSTEM.md "Tag").
   #plates prefix: overrides every earlier tag style (0.8 to 0.10.2) in one place ===== */
#plates .plate { opacity: 0; transition: opacity .28s var(--ease); gap: 5px; align-items: flex-start;
  padding: 7px 11px 8px; border-radius: var(--r-md); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--hair), 0 8px 28px rgba(0,0,0,.45); filter: none; }
#plates .plate.gaze { opacity: 1; }
#plates .plate .nm { display: inline-flex; align-items: center; gap: var(--s2); padding: 0; background: none; box-shadow: none; text-shadow: none; text-decoration: none;
  font: 600 var(--t-sm)/1.1 var(--ui); letter-spacing: .01em; color: var(--ink); }
#plates .plate .av { width: 22px; height: 22px; box-shadow: 0 0 0 1px var(--hair-gold); }
#plates .plate .pips { display: flex; align-items: center; gap: var(--s3); padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--dim); }
#plates .plate .st { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--t-2xs)/1 var(--num); color: var(--dim); }
#plates .plate .st b { font: 600 var(--t-2xs)/1 var(--num); color: var(--ink); }
#plates .plate .cb { width: 7px; height: 10px; border-radius: 2px; }
#plates .plate .dead { font: 600 var(--t-2xs) var(--num); color: var(--d3); }
#plates .plate.turn { box-shadow: inset 0 0 0 1px rgba(217,180,90,.6), 0 0 22px rgba(217,180,90,.18), 0 8px 28px rgba(0,0,0,.45); }
#plates .plate.turn .nm { color: var(--gold); background: none; }
#plates .plate.turn::after { display: none; }
#plates .plate.out.gaze { opacity: .55; }
#plates .plate.out .nm { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
#plates .plate.speaking { box-shadow: inset 0 0 0 1px rgba(95,211,138,.8), 0 0 18px rgba(95,211,138,.35); }
html.bigtext #plates .plate .nm { font-size: var(--t-md); }

/* the revolver: cylinder, meter and odds */
.gun { display: inline-flex; align-items: center; gap: 6px; }
.gun .cyl { width: 22px; height: 22px; flex: none; }
.gun .meter { width: 44px; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; }
.gun .meter i { display: block; height: 100%; border-radius: inherit; background: var(--d0); transition: width .5s var(--ease), background .5s; }
.gun.lvl1 .meter i { background: var(--d1); } .gun.lvl2 .meter i { background: var(--d2); } .gun.lvl3 .meter i { background: var(--d3); box-shadow: 0 0 8px var(--d3); }
#plates .gun b, .gun b { font: 600 var(--t-2xs) var(--num); letter-spacing: .02em; color: var(--d0); min-width: 5.2ch; }
#plates .gun.lvl1 b, .gun.lvl1 b { color: var(--d1); } #plates .gun.lvl2 b, .gun.lvl2 b { color: var(--d2); } #plates .gun.lvl3 b, .gun.lvl3 b { color: var(--d3); }
svg.cyl .ring { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2.5; }
svg.cyl .arc { fill: none; stroke-width: 2.5; stroke-linecap: round; transform: rotate(-90deg); transition: stroke-dasharray .6s var(--ease); }
svg.cyl .body { fill: #23201f; stroke: rgba(255,255,255,.18); stroke-width: 1; }
svg.cyl .live { fill: #0d0b0b; stroke-width: 1.4; }
svg.cyl .spent circle { fill: none; stroke: rgba(243,234,214,.28); stroke-width: 1; stroke-dasharray: 2 1.6; }
svg.cyl .spent path { stroke: rgba(243,234,214,.4); stroke-width: 1.1; stroke-linecap: round; }
svg.cyl .pin { fill: #3a3634; }
svg.cyl .odds { font: 600 13px var(--num); letter-spacing: .02em; }
svg.cyl.lvl3 { animation: cylpulse 1.1s ease-in-out infinite; }
@keyframes cylpulse { 50% { filter: drop-shadow(0 0 6px rgba(229,72,77,.65)); } }
#meMedal svg.cyl { width: 86%; height: 86%; }
@media (prefers-reduced-motion: reduce) { svg.cyl.lvl3 { animation: none; } }

/* numbers and codes in mono */
.code b, #code, #srvQuick, #setSrv, #acCode, #typeProxy[inputmode="url"], .coin + span, #turnBar + *, .stats .rk { font-family: var(--num); }
#code, #acCode { letter-spacing: .18em; }
/* action chips: never break a word across lines */
#panel button.big { overflow-wrap: normal; word-break: keep-all; hyphens: none; line-height: 1.05; }
#typebar[data-for="code"] input, #typebar[data-for="acCode"] input { font-family: var(--num); letter-spacing: .2em; text-transform: uppercase; }
#typebar[data-for="srvQuick"] input, #typebar[data-for="setSrv"] input { font-family: var(--num); font-size: var(--t-md); }
/* Large text: every step moves up one (DESIGN_SYSTEM.md 2) */
html.bigtext { --t-2xs: 13px; --t-xs: 15px; --t-sm: 17px; --t-md: 20px; --t-lg: 24px; --t-xl: 30px; --t-2xl: 36px; --t-3xl: 42px; }

/* ===== 0.10.5 sheets: smoked glass instead of paper (DESIGN_SYSTEM.md 4). The paper variables are remapped
   inside sheets, so every earlier paper rule now draws in the glass palette. Poker-chip actions stay. ===== */
.sheet { --paper: #f3ead6; --paper2: #e9dcc1; --paperline: rgba(255,255,255,.12); --inkp: #f3ead6; --inkp2: #b9a98f; --ox: #d9b45a; --ox2: #e8c870; --grain: none;
  background: var(--glass-strong) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--ink); box-shadow: inset 1px 0 0 var(--hair), -24px 0 60px rgba(0,0,0,.55); border-left: 0; }
.sheet::before, .sheet::after { display: none !important; }
.sheet h3 { font: italic 400 var(--t-3xl) var(--disp); color: var(--ink); letter-spacing: -.01em; }
.sheet .dim, .sheet .setrow .dim { color: var(--dim); }
.sheet .setrow { border-bottom: 1px solid var(--hair); font: 500 var(--t-sm) var(--ui); }
.sheet .setrow .dim { font: 400 var(--t-xs) var(--ui); }
.sheet button, .sheet .orb { background: rgba(255,255,255,.08); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); border-radius: var(--r-pill); }
.sheet button.primary { background: var(--gold); color: #1a1310; box-shadow: none; }
.sheet input, .sheet select { background: rgba(255,255,255,.06); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); border-radius: var(--r-sm); }
.sheet select option { background: #1a1310; color: var(--ink); }
.sheet input[type=checkbox] { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px var(--hair); }
.sheet input[type=checkbox]::after { background: #f3ead6; }
.sheet input[type=checkbox]:checked { background: var(--gold); }
.sheet input[type=checkbox]:checked::after { background: #1a1310; }
.sheet input[type=range] { accent-color: var(--gold); }
.sheet .x { color: var(--ink) !important; }
.sheet a { color: var(--gold); }
/* 0.10.6 laptop address box: fixed http:// and :8790 around the numbers you type */
.addrbox { display: inline-flex; align-items: center; flex: 1; min-width: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hair-gold); padding: 0 14px; font: 500 var(--t-sm) var(--num); }
.addrbox .pre, .addrbox .suf { color: var(--dim); flex: none; }
.addrbox input { flex: 1; min-width: 6ch; background: none !important; box-shadow: none !important; border: 0; padding: 10px 2px; font: 600 var(--t-sm) var(--num); color: var(--ink); letter-spacing: .02em; }
.addrbox:focus-within { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(217,180,90,.18); }
/* 0.10.6 name box with a re-roll die */
.nmbox { position: relative; display: inline-flex; flex: 1; min-width: 0; }
.nmbox input { flex: 1; min-width: 0; padding-right: 44px !important; }
.nmbox .roll { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--hair); display: grid; place-items: center; }
.nmbox .roll svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.nmbox .roll svg circle { fill: var(--gold); stroke: none; }
.nmbox .roll:active { transform: translateY(-50%) rotate(90deg); transition: transform .2s var(--ease); }

/* ===== 0.10.6 one language for the whole table (DESIGN_SYSTEM.md 5): the traditional objects stay (playing
   cards, poker chips, the serif voice, brass and oxblood), framed by the modern layer (smoked glass, hairlines,
   small-caps labels, mono numbers, meters) ===== */
/* the table capsule at the top: turn line, table card, claim, timer */
#crown { padding: 7px 16px 8px !important; border-radius: var(--r-lg); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--hair), 0 10px 30px rgba(0,0,0,.45); gap: 5px !important; }
#crown.mine { box-shadow: inset 0 0 0 1px rgba(217,180,90,.55), 0 0 26px rgba(217,180,90,.16), 0 10px 30px rgba(0,0,0,.45); }
#turnLine { font: italic 400 var(--t-lg)/1.05 var(--disp) !important; letter-spacing: .06em; text-shadow: none !important; }
#crown.mine #turnLine { color: var(--gold) !important; }
#crown #medalInner { background: none !important; box-shadow: none !important; }
#crown #medalInner img { height: 30px !important; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.6); filter: none !important; }
#crown #subStatus { gap: 0 !important; }
#subStatus .pill { background: none !important; box-shadow: none !important; padding: 0 10px !important; border-radius: 0 !important; font: 500 var(--t-xs)/1.2 var(--ui) !important; color: var(--dim) !important; }
#subStatus .pill + .pill { box-shadow: inset 1px 0 0 var(--hair) !important; }
#subStatus .pill.hi { color: var(--ink) !important; font-weight: 600 !important; }
#subStatus .pill.red { color: var(--d3) !important; }
#turnBar { width: 100% !important; max-width: 220px; height: 2px !important; position: relative; overflow: visible !important; }
#turnBar i { border-radius: 2px; }
#turnBar[data-s]:not([data-s=""])::after { content: attr(data-s); position: absolute; right: -26px; top: 50%; transform: translateY(-50%); font: 600 var(--t-2xs)/1 var(--num); color: var(--gold); }
#turnBar.low::after { color: var(--d3) !important; }
@media (max-height: 520px) { #crown { padding: 5px 12px 6px !important; } #turnLine { font-size: var(--t-md) !important; } #crown #medalInner img { height: 24px !important; } #subStatus .pill { font-size: var(--t-2xs) !important; padding: 0 8px !important; } }

/* banners: the serif voice between two thin brass rules */
#banner { text-shadow: 0 4px 24px rgba(0,0,0,.8) !important; }
#banner small { font: 500 var(--t-sm) var(--ui) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--ink) !important; opacity: .9;
  display: inline-block !important; margin-top: 8px !important; padding: 5px 14px; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--hair); }
#banner::before, #banner::after { content: ''; position: absolute; top: 46%; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,180,90,.7)); }
#banner::before { right: calc(100% + 14px); } #banner::after { left: calc(100% + 14px); transform: scaleX(-1); }
#banner:not(.show)::before, #banner:not(.show)::after { display: none; }

/* toast: a glass pill (was paper) */
#toast { background: var(--glass-strong) !important; color: var(--ink) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--hair), 0 12px 32px rgba(0,0,0,.5) !important; border-radius: var(--r-pill) !important; font: 500 var(--t-sm) var(--ui) !important; }

/* dice: drinks as small vials beside the same meter */
.gun .vial { width: 6px; height: 11px; border-radius: 2px 2px 3px 3px; box-shadow: inset 0 0 0 1px rgba(159,212,168,.6); background: rgba(159,212,168,.08); }
.gun .vial.on { background: linear-gradient(0deg, #2fbf4f 70%, rgba(47,191,79,.2) 70%); box-shadow: inset 0 0 0 1px #9fd4a8; }

/* end of match: the finishing order in the same style */
.stats .srow { font: 500 var(--t-sm) var(--ui); }
.stats .rk { font: 600 var(--t-xs) var(--num); color: var(--dim); }
.stats .srow.win { color: var(--gold); }

/* home: room code field and Join in the same pill language */
#code { font-family: var(--num) !important; letter-spacing: .3em !important; text-transform: uppercase; }
/* compact capsule: never reaches the far player's head */
#crown { padding: 4px 14px 5px !important; gap: 3px !important; }
#turnLine { font-size: var(--t-md) !important; }
#crown #medalInner img { height: 24px !important; }
@media (max-height: 520px) { #crown { padding: 3px 10px 4px !important; } #turnLine { font-size: var(--t-sm) !important; } #crown #medalInner img { height: 20px !important; } }
.linkbtn { background: none !important; border: 0; padding: 0; box-shadow: none !important; color: var(--gold); font: 500 var(--t-xs) var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }
.addrbox.full { padding: 0 6px 0 14px; }

/* 0.11 matchmaking */
.welcome .joinrow .mmrow { display: flex; gap: 8px; align-items: center; margin-left: 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); }
.welcome .joinrow .mmrow button { white-space: nowrap; }
@media (max-width: 700px) { .welcome .joinrow { flex-wrap: wrap; justify-content: center; } .welcome .joinrow .mmrow { margin-left: 0; padding-left: 0; border-left: 0; } }
.badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 8px; background: #c8323c; color: #fff; font: 700 10px var(--ui); font-style: normal; padding: 0 4px; margin-left: 4px; }
.tagpill { font: 700 10px var(--ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: rgba(255, 207, 122, .18); color: #ffcf7a; }
.pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); margin-right: 8px; vertical-align: middle; }
.pdot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .pdot.busy { background: #ffcf7a; }
.sheet .btns { display: flex; gap: 6px; flex-shrink: 0; } .sheet .btns button { padding: 4px 10px; font-size: var(--t-xs); }
.sheet button.xs { padding: 4px 8px; }
.sheet .board .setrow.me { outline: 1px solid rgba(255, 207, 122, .5); border-radius: 6px; }
.sheet .mono { font-family: ui-monospace, monospace; letter-spacing: .05em; }
.sheet #fcode { flex: 1; min-width: 0; margin-right: 8px; }
.mcard .mlive { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ok); margin-top: 2px; }
.mcard .mlive .live { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; }
.lobbyside #startNow, .lobbyside #suggestGo { margin-top: 8px; }
.lobbyside .dim.small { margin-top: 6px; max-width: 240px; }
#invitebar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px;
  background: var(--glass-strong, rgba(20,16,16,.92)); box-shadow: inset 0 0 0 1px var(--line, rgba(255,255,255,.12)), 0 10px 30px rgba(0,0,0,.5); font: 600 var(--t-sm) var(--ui); max-width: calc(100vw - 32px); }
#invitebar button { padding: 6px 12px; font-size: var(--t-xs); }

.tablecenter .invrow { display: flex; gap: 6px; justify-content: center; }
.lobbyside .together { display: flex; gap: 6px; }
#friends .setrow, #tables .setrow, #ranked .setrow { padding-right: 26px; }
/* 0.11: the right-hand lobby buttons grow upwards from above the Start button, so the voice and emote
   buttons in the top corner never cover them on a phone */
@media (max-height: 520px) { .lobbyside.right { top: auto; bottom: 106px; transform: none; gap: 10px; } }

/* 0.12: generated key art behind the page until the 3D room has drawn its first frame */
body { background: #0b0809 url(/art/keyart.webp) center / cover no-repeat; }