/* DollarSigns site styles. Base = the approved floor prototype (v3, 2026-11-11), ported as-is; the real-site layers follow
   after the PORT END marker. Blue Seal palette, Marquee type (Big Shoulders Display / Instrument Sans / Chakra Petch). */
/* Layout: a full-screen casino you move through, not a page you scroll. Gate → floor scene (hotspots on the art) → camera
   push into a room (Hold'em table or the Vault). One glass HUD rides on top. Single dark Blue Seal world by choice. */
:root {
  --midnight: #0d131b;
  --ink: #090d13;
  --panel: rgba(16, 26, 39, .78);
  --panel-solid: #111b29;
  --seal: #2d5da8;
  --seal-hi: #6fa8ff;
  --felt: #1d3a5f;
  --silver: #c3ccd4;
  --paper: #eef0ee;
  --slate: #8796a6;
  --gold: #d4a537;
  --gold-hi: #f3d27a;
  --gunmetal: #2b2f33;
  --red: #c8333b;
  --rule: rgba(111, 168, 255, .16);
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Chakra Petch", ui-monospace, "Consolas", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--ink); color: var(--paper); }
body { font-family: var(--ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--seal-hi); outline-offset: 2px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

#app { position: fixed; inset: 0; overflow: hidden; }
.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.view.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }

/* ---------------- HUD ---------------- */
.hud {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(9,13,19,.92), rgba(9,13,19,.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-110%); transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.hud.on { transform: none; }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 0; }
.brand img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px var(--rule), 0 0 18px rgba(111,168,255,.35); }
.brand span { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .06em; line-height: 1; }
.brand b { color: var(--seal-hi); font-weight: 900; }
.nav { display: flex; gap: 4px; margin-left: 10px; }
.nav button { background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); transition: color .2s, background .2s; }
.nav button:hover { color: var(--paper); background: rgba(111,168,255,.08); }
.nav button[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--seal-hi); }
.hud .spacer { flex: 1; }
.wallet { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 999px; background: rgba(13,19,27,.8); border: 1px solid var(--rule); }
.coin { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--display); color: #6b4c0c; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, #8f6a16); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15), 0 0 12px rgba(212,165,55,.35); }
.wallet .bal { font-size: 19px; font-weight: 700; min-width: 5.5ch; text-align: right; }
.wallet .claim { border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; transition: filter .2s, transform .2s; }
.wallet .claim:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wallet .claim[disabled] { background: rgba(212,165,55,.18); color: var(--gold); cursor: default; transform: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(13,19,27,.8); cursor: pointer; display: grid; place-items: center; transition: border-color .2s; }
.icon-btn:hover { border-color: var(--seal-hi); }
.icon-btn svg { width: 20px; height: 20px; stroke: var(--silver); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.me { display: flex; align-items: center; gap: 8px; }
.me .face { width: 40px; height: 40px; }
.me span { font-weight: 600; font-size: 14px; }

/* face sprite: the 3×3 portrait sheet, one cell per player */
.face { border-radius: 50%; background: var(--panel-solid) center / cover no-repeat; flex: none; display: grid; place-items: center; overflow: hidden; }

/* ---------------- Gate ---------------- */
#v-gate { display: grid; place-items: center; background: var(--ink); }
#v-gate .bg { position: absolute; inset: -40px; background: url("/img/floor-blur.webp") center/cover; filter: blur(18px) brightness(.35) saturate(1.2); transform: scale(1.05); }
#v-gate .bulbs { position: absolute; inset: 22px; border-radius: 28px; pointer-events: none;
  background:
    radial-gradient(circle, var(--gold-hi) 0 2.6px, transparent 3.2px) 0 0 / 26px 26px repeat-x,
    radial-gradient(circle, var(--gold-hi) 0 2.6px, transparent 3.2px) 0 100% / 26px 26px repeat-x;
  opacity: .55; animation: chase 1.2s steps(2) infinite; mask: linear-gradient(#000, transparent 18%, transparent 82%, #000); }
@keyframes chase { to { background-position: 13px 0, 13px 100%; } }
.gate-card { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; padding: 24px; max-width: 640px; }
.gate-card img { width: min(300px, 62vw); border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), 0 30px 90px -20px rgba(111,168,255,.55); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.gate-card p { margin: 0; color: var(--silver); max-width: 46ch; }
.enter { border: 0; cursor: pointer; padding: 18px 40px; border-radius: 6px; font: 900 26px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--silver)); box-shadow: 0 0 0 1px #fff, 0 0 40px rgba(111,168,255,.55), 0 18px 40px -16px rgba(0,0,0,.8); transition: transform .2s, box-shadow .2s; }
.enter:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px #fff, 0 0 60px rgba(111,168,255,.8), 0 22px 50px -16px rgba(0,0,0,.8); }
.fine { font-size: 12.5px; color: var(--slate); }

/* ---------------- Floor ---------------- */
#v-floor { background: var(--ink); }
.stage { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.8vh); height: max(100vh, 56.25vw); transform: translate(-50%, -50%); transition: scale 1.1s cubic-bezier(.6,0,.2,1), translate .4s ease-out; will-change: transform; }
/* tall screens (phones held upright): the scene keeps its full width and you swipe across the floor */
@media (max-aspect-ratio: 1/1) {
  #v-floor { overflow-x: auto; overflow-y: hidden; }
  .stage { position: relative; left: 0; top: 0; transform: none; height: 100%; width: auto; aspect-ratio: 1376 / 768; }
}
.stage img.scene { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.stage .shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(9,13,19,.65) 100%), linear-gradient(180deg, rgba(9,13,19,.45), transparent 22%, transparent 75%, rgba(9,13,19,.7)); pointer-events: none; }
#dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hs { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 8px; z-index: 2; }
.hs .ring { width: 46px; height: 46px; border-radius: 50%; position: relative; display: grid; place-items: center; }
.hs .ring::before, .hs .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--seal-hi); box-shadow: 0 0 18px var(--seal-hi); animation: pulse 2.4s ease-out infinite; }
.hs .ring::after { animation-delay: 1.2s; }
.hs .ring i { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff, 0 0 30px var(--seal-hi); }
.hs.vault .ring::before, .hs.vault .ring::after { border-color: var(--gold-hi); box-shadow: 0 0 18px var(--gold); }
.hs.vault .ring i { box-shadow: 0 0 14px #fff, 0 0 30px var(--gold); }
@keyframes pulse { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.hs .tag { display: grid; justify-items: center; gap: 2px; padding: 7px 14px 8px; border-radius: 4px; background: rgba(9,13,19,.78); border: 1px solid var(--rule); backdrop-filter: blur(6px); white-space: nowrap; transition: transform .25s, border-color .25s, background .25s; }
.hs .tag b { font: 800 19px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.hs .tag small { font: 600 11.5px/1.2 var(--num); color: var(--seal-hi); letter-spacing: .06em; }
.hs.vault .tag small { color: var(--gold-hi); }
.hs:hover .tag, .hs:focus-visible .tag { transform: translateY(-4px) scale(1.06); border-color: var(--seal-hi); background: rgba(13,19,27,.92); }
.hs.vault:hover .tag { border-color: var(--gold); }
.hs:focus-visible { outline: none; }
.floor-intro { position: absolute; left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 3; max-width: 420px; display: grid; gap: 6px; pointer-events: none; }
.floor-intro h1 { margin: 0; font: 900 clamp(40px, 6vw, 76px)/.92 var(--display); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.floor-intro h1 em { font-style: normal; color: var(--seal-hi); text-shadow: 0 0 24px rgba(111,168,255,.6); }
.floor-intro p { margin: 0; color: var(--silver); text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.live { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 12px 16px; border-radius: 6px; background: var(--panel); border: 1px solid var(--rule); backdrop-filter: blur(8px); display: grid; gap: 4px; min-width: 210px; }
.live .k { font: 700 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.live .k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 10px #3ee08f; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.live .v { font: 700 30px/1 var(--num); }

/* ---------------- Hold'em room ---------------- */
/* rooms start under the HUD, so anything that does scroll stays framed beneath the header */
#v-holdem { top: var(--hud-h, 64px); overflow-x: hidden; overflow-y: auto; background: var(--ink); }
#v-holdem::before { content: ""; position: fixed; inset: -30px; background: url("/img/floor-blur.webp") 18% 80% / cover; filter: blur(22px) brightness(.28) saturate(1.3); z-index: 0; }
/* desktop: the whole room fits one screen; the table takes whatever height is left between the header and the action bar */
.room { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch;
  padding-top: 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1640px; margin: 0 auto; }
.room-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-width: 0; min-height: 0; justify-items: center; }
.tbox { width: 100%; min-height: 0; display: grid; justify-items: center; align-items: center; }
.room-head { width: 100%; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; }
.room-head h2 { margin: 0; font: 900 clamp(30px, 3.4vw, 46px)/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.room-head h2 span { color: var(--seal-hi); }
.room-head .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 6px 10px; border-radius: 4px; background: var(--panel); border: 1px solid var(--rule); font: 600 12.5px/1 var(--num); color: var(--silver); letter-spacing: .04em; }
.pill b { color: var(--paper); }
.leave { border: 1px solid var(--rule); background: var(--panel); cursor: pointer; padding: 8px 14px; border-radius: 4px; font: 700 13px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); transition: color .2s, border-color .2s; }
.leave:hover { color: var(--paper); border-color: var(--seal-hi); }

/* table: font-size is set from JS to 1% of the table's width, so every piece scales with it in em */
.tablewrap { position: relative; width: 100%; min-width: 300px; aspect-ratio: 1376 / 768; background: url("/img/table.webp") center / 100% 100% no-repeat; border-radius: 3em; margin-bottom: 4.5em; }
.tablewrap::after { content: ""; position: absolute; inset: 9% 7%; border-radius: 40%; pointer-events: none; box-shadow: inset 0 0 6em rgba(111,168,255,.12); }
.felt-brand { position: absolute; left: 50%; top: 63%; transform: translate(-50%, -50%); font: 900 3.2em/1 var(--display); letter-spacing: .3em; color: rgba(238,240,238,.07); text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.pot { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .6em; padding: .45em 1em .45em .5em; border-radius: 999px; background: rgba(9,13,19,.7); border: 1px solid var(--rule); z-index: 6; }
.pot .k { font: 700 1.05em/1 var(--display); letter-spacing: .14em; color: var(--slate); }
.pot .v { font: 700 1.7em/1 var(--num); }
.pot .chips { width: 1.9em; height: 1.9em; }
.hand-name { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); font: 800 1.9em/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 0 1em rgba(212,165,55,.6); opacity: 0; transition: opacity .4s; z-index: 6; white-space: nowrap; }
.hand-name.on { opacity: 1; }
.dealer-shoe { position: absolute; left: 50%; top: 13%; transform: translate(-50%, -50%); width: 5.4em; height: 3em; border-radius: .6em; background: linear-gradient(180deg, #3a4048, #1b1f24); border: 1px solid rgba(195,204,212,.3); display: grid; place-items: center; font: 800 1em/1 var(--display); letter-spacing: .2em; color: var(--silver); z-index: 4; }
.btn-dealer { position: absolute; width: 2.4em; height: 2.4em; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #fff, #d9dde1 60%, #9aa3ab); color: var(--ink); font: 900 1.2em/2.4em var(--display); text-align: center; box-shadow: 0 .2em .6em rgba(0,0,0,.6); transition: left .8s cubic-bezier(.2,.7,.2,1), top .8s cubic-bezier(.2,.7,.2,1); z-index: 7; }

.seat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .35em; z-index: 8; transition: opacity .4s, filter .4s; }
.seat.top { grid-template-areas: "plate" "av"; }
.seat .av { grid-area: av; position: relative; width: 7em; height: 7em; }
.seat .plate { grid-area: plate; }
.seat.top .plate { grid-area: plate; }
.seat:not(.top) { grid-template-areas: "av" "plate"; }
.seat .face { position: absolute; inset: .55em; box-shadow: 0 0 0 .2em var(--ink), 0 .4em 1.2em rgba(0,0,0,.6); }
.seat .ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.seat .ringsvg circle { fill: none; stroke-width: 4; }
.seat .ringsvg .bg { stroke: rgba(195,204,212,.18); }
.seat .ringsvg .fg { stroke: var(--seal-hi); stroke-dasharray: 289; stroke-dashoffset: 289; filter: drop-shadow(0 0 4px var(--seal-hi)); }
.seat.turn .ringsvg .fg { stroke-dashoffset: 289; }
.seat.turn .face { box-shadow: 0 0 0 .2em var(--ink), 0 0 1.6em var(--seal-hi); }
.seat .plate { min-width: 9.5em; padding: .35em .7em .4em; border-radius: .45em; background: rgba(9,13,19,.86); border: 1px solid var(--rule); display: grid; justify-items: center; gap: .1em; }
.seat .plate .n { font: 600 1.15em/1.15 var(--ui); white-space: nowrap; }
.seat .plate .s { font: 700 1.25em/1 var(--num); color: var(--seal-hi); }
.seat.you .plate { border-color: var(--seal-hi); box-shadow: 0 0 1.2em rgba(111,168,255,.35); }
.seat.folded { opacity: .45; filter: grayscale(.7); }
.seat.winner .face { box-shadow: 0 0 0 .2em var(--ink), 0 0 2.4em var(--gold), 0 0 4em rgba(212,165,55,.6); }
.act-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); padding: .3em .7em; border-radius: .35em; font: 800 1.15em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--seal); color: var(--paper); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2,1.4,.4,1); white-space: nowrap; z-index: 3; pointer-events: none; }
.act-label.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.act-label.fold { background: #3a4048; color: var(--silver); }
.act-label.raise { background: var(--gold); color: var(--ink); }

.bet { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .35em; padding: .2em .55em .2em .25em; border-radius: 999px; background: rgba(9,13,19,.7); opacity: 0; transition: opacity .25s; z-index: 6; }
.bet.on { opacity: 1; }
.bet .v { font: 700 1.2em/1 var(--num); }
.chips { position: relative; width: 1.7em; height: 1.7em; }
.chips i { position: absolute; left: 0; width: 100%; height: 50%; border-radius: 50%; background: var(--seal); box-shadow: inset 0 0 0 .14em rgba(238,240,238,.85), inset 0 0 0 .3em var(--seal); }
.chips i:nth-child(1) { bottom: 0; } .chips i:nth-child(2) { bottom: 18%; background: var(--paper); box-shadow: inset 0 0 0 .14em var(--seal), inset 0 0 0 .3em var(--paper); } .chips i:nth-child(3) { bottom: 36%; background: var(--gold); box-shadow: inset 0 0 0 .14em #fff7, inset 0 0 0 .3em var(--gold); }
.chipfly { position: absolute; transform: translate(-50%, -50%); width: 1.7em; height: 1.7em; z-index: 20; transition: left .55s cubic-bezier(.3,.6,.2,1), top .55s cubic-bezier(.3,.6,.2,1), opacity .2s .45s; pointer-events: none; }

/* cards */
.card { position: absolute; width: 5.6em; height: 7.8em; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--k, 1)); perspective: 40em; z-index: 9;
  transition: left .5s cubic-bezier(.2,.7,.2,1), top .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.card .c-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
.card.up .c-in { transform: rotateY(180deg); }
.c-face { position: absolute; inset: 0; border-radius: .5em; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 .25em .8em rgba(0,0,0,.55); }
.c-back { background:
    radial-gradient(circle at 50% 50%, transparent 0 1.1em, rgba(238,240,238,.85) 1.15em 1.25em, transparent 1.3em),
    repeating-radial-gradient(circle at 50% 50%, rgba(111,168,255,.35) 0 .08em, transparent .1em .38em),
    linear-gradient(135deg, #24477c, #142a4a);
  border: .28em solid var(--paper); }
.c-back::after { content: "$"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 1.8em/1 var(--display); color: var(--paper); }
.c-front { transform: rotateY(180deg); background: linear-gradient(160deg, #ffffff, #e8ebee); color: #121821; display: grid; padding: .35em .45em; }
.c-front.red { color: var(--red); }
.c-front .r { font: 800 2em/1 var(--display); }
.c-front .s { position: absolute; left: .45em; top: 2.15em; font: 700 1.25em/1 var(--ui); }
.c-front .big { position: absolute; right: .3em; bottom: .05em; font: 400 3.4em/1 var(--ui); opacity: .92; }
.card.best .c-front { box-shadow: 0 0 0 .2em var(--gold-hi), 0 0 1.8em var(--gold); }
.card.dim .c-front { filter: brightness(.55); }

/* winner banner */
.win-banner { position: absolute; left: 50%; top: 47%; z-index: 30; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; padding: 1.6em 3.4em 1.4em; border-radius: 1.2em; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #1b345a, #0b1422 70%); border: .2em solid rgba(243,210,122,.7);
  box-shadow: 0 0 0 .5em rgba(9,13,19,.6), 0 0 6em rgba(212,165,55,.45); transition: opacity .35s, transform .55s cubic-bezier(.2,1.5,.4,1); }
.win-banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.win-banner::before { content: ""; position: absolute; inset: .5em; border-radius: .8em; pointer-events: none;
  background: radial-gradient(circle, var(--gold-hi) 0 .22em, transparent .28em) 0 0 / 1.4em 1.4em repeat-x, radial-gradient(circle, var(--gold-hi) 0 .22em, transparent .28em) 0 100% / 1.4em 1.4em repeat-x;
  animation: chase2 .5s steps(2) infinite; }
@keyframes chase2 { to { background-position: .7em 0, .7em 100%; } }
.win-banner .t { font: 900 5.4em/.9 var(--display); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #fff, #c9d3dc 55%, #8fa2b4); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .06em .2em rgba(0,0,0,.6)); }
.win-banner .a { margin-top: .2em; font: 700 3em/1 var(--num); color: var(--gold-hi); text-shadow: 0 0 .6em rgba(212,165,55,.7); }
.win-banner .h { margin-top: .5em; font: 700 1.3em/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.win-banner.small .t { font-size: 3em; }
.win-banner.small .a { font-size: 2em; }

/* action bar */
.actions { width: min(100%, 1180px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 8px; background: var(--panel); border: 1px solid var(--rule); backdrop-filter: blur(8px); }
.clock { display: grid; justify-items: center; gap: 2px; min-width: 78px; }
.clock .v { font: 700 30px/1 var(--num); color: var(--seal-hi); }
.clock .k { font: 700 11px/1 var(--display); letter-spacing: .18em; color: var(--slate); text-transform: uppercase; }
.clock.hot .v { color: #ff7a7a; animation: blink .5s infinite; }
.status { min-width: 0; display: grid; gap: 4px; }
.status .msg { font-weight: 600; font-size: 15px; }
.status .sub { font-size: 13px; color: var(--slate); }
.raise-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.raise-row input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--gold); }
.raise-row .preset { border: 1px solid var(--rule); background: rgba(13,19,27,.8); cursor: pointer; padding: 6px 9px; border-radius: 4px; font: 600 12px/1 var(--num); color: var(--silver); }
.raise-row .preset:hover { color: var(--paper); border-color: var(--seal-hi); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.act { border: 0; cursor: pointer; min-width: 112px; padding: 15px 18px; border-radius: 5px; font: 800 19px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: transform .15s, filter .2s, opacity .2s; }
.act:hover:not([disabled]) { transform: translateY(-2px); filter: brightness(1.08); }
.act:active:not([disabled]) { transform: translateY(1px); }
.act[disabled] { opacity: .35; cursor: default; }
.act.fold { background: #2a3038; color: var(--silver); }
.act.call { background: var(--paper); color: var(--ink); }
.act.raise { background: var(--gold); color: var(--ink); box-shadow: 0 0 22px rgba(212,165,55,.35); }
.act.deal { background: linear-gradient(180deg, #fff, var(--silver)); color: var(--ink); box-shadow: 0 0 26px rgba(111,168,255,.45); }

/* side panel */
.side { display: grid; gap: 14px; align-content: start; min-height: 0; overflow-y: auto; }
.card-panel { padding: 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--rule); backdrop-filter: blur(8px); display: grid; gap: 10px; }
.card-panel h3 { margin: 0; font: 800 18px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.chat { display: grid; gap: 8px; max-height: 280px; overflow: auto; font-size: 13.5px; }
.chat .m { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.chat .m .face { width: 28px; height: 28px; }
.chat .m b { font-weight: 600; color: var(--seal-hi); margin-right: 6px; }
.chat .m.sys { grid-template-columns: 1fr; color: var(--slate); font-style: italic; }
.chat-in { display: flex; gap: 6px; }
.chat-in input { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 4px; border: 1px solid var(--rule); background: rgba(9,13,19,.8); color: var(--paper); font: inherit; font-size: 13.5px; }
.chat-in button { border: 0; border-radius: 4px; padding: 0 12px; background: var(--seal); cursor: pointer; font-weight: 600; font-size: 13px; }
/* voice clips: recorded, sent, played back like a walkie-talkie, never a live call */
.chat-in .mic { width: 40px; flex: none; padding: 0; border: 1px solid var(--rule); background: rgba(9,13,19,.8); display: grid; place-items: center; transition: border-color .2s, background .2s; }
.chat-in .mic:hover { border-color: var(--seal-hi); background: rgba(45,93,168,.25); }
.chat-in .mic svg { width: 18px; height: 18px; stroke: var(--silver); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.rec { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 4px; background: rgba(200,51,59,.12); border: 1px solid rgba(255,122,122,.4); }
.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 10px #ff5a5a; animation: blink 1s infinite; flex: none; }
.rec .t { font: 600 13px/1 var(--num); min-width: 3.4ch; }
.rec canvas { flex: 1; min-width: 0; height: 26px; }
.rec button { border: 0; border-radius: 4px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
#recCancel { background: #2a3038; color: var(--silver); }
#recSend { background: var(--seal); color: var(--paper); }
.vclip { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(45,93,168,.2); border: 1px solid var(--rule); max-width: 230px; }
.vplay { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 0; padding: 0; background: var(--seal-hi); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.vplay:hover { transform: scale(1.08); }
.vplay svg { width: 12px; height: 12px; fill: var(--ink); }
.vbars { flex: 1; height: 22px; display: flex; align-items: center; gap: 2px; min-width: 0; }
.vbars i { flex: 1; min-width: 2px; border-radius: 2px; background: rgba(195,204,212,.4); transition: background .1s; }
.vbars i.on { background: var(--seal-hi); box-shadow: 0 0 6px rgba(111,168,255,.6); }
.vdur { font-size: 11.5px; color: var(--silver); }
.m.unread .vclip { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,165,55,.3); }
.vtxt { margin-top: 3px; font-size: 12px; color: var(--slate); font-style: italic; }
.soon { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--silver); }
.soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); flex: none; }
.legend { display: grid; gap: 6px; font-size: 13px; color: var(--silver); }
.legend div { display: flex; justify-content: space-between; gap: 10px; }
.legend b { font-family: var(--num); color: var(--paper); font-weight: 600; }

/* ---------------- Vault ---------------- */
#v-vault { top: var(--hud-h, 64px); overflow-x: hidden; overflow-y: auto; background: var(--ink); }
#v-vault::before { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg, rgba(9,13,19,.92) 0%, rgba(9,13,19,.74) 45%, rgba(9,13,19,.55)), url("/img/vault.webp") 70% center / cover; z-index: 0; }
/* desktop: three framed columns that exactly fill the screen; only the activity list scrolls, inside its own panel */
.vault-wrap { position: relative; z-index: 1; max-width: 1560px; margin: 0 auto; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch;
  padding-top: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.vault-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.panel.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel.grow .ledger { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.vault-title { display: grid; gap: 4px; }
.vault-title .k { font: 700 13px/1 var(--display); letter-spacing: .24em; color: var(--gold-hi); text-transform: uppercase; }
.vault-title h2 { margin: 0; font: 900 clamp(40px, 9vh, 92px)/.88 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.vault-bal { display: flex; align-items: center; gap: 14px; }
.vault-bal .coin { width: 46px; height: 46px; font-size: 24px; }
.vault-bal .v { font: 700 clamp(36px, 7vh, 72px)/1 var(--num); text-shadow: 0 0 30px rgba(212,165,55,.35); }
.vault-bal small { display: block; font-size: 13px; color: var(--slate); }
.panel { padding: 18px; border-radius: 8px; background: var(--panel); border: 1px solid var(--rule); backdrop-filter: blur(10px); display: grid; gap: 14px; }
.panel h3 { margin: 0; font: 800 22px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.panel h3 small { font: 600 13px/1 var(--num); color: var(--gold-hi); letter-spacing: .04em; text-transform: none; }
.panel p { margin: 0; font-size: 14px; color: var(--silver); }
.daily { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.door { position: relative; width: clamp(104px, 17vh, 150px); aspect-ratio: 1; perspective: 600px; }
.door .inside { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, var(--gold-hi), var(--gold) 45%, #6a4a0c 80%); box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.door .leaf { position: absolute; inset: 0; border-radius: 50%; transform-origin: 100% 50%; transition: transform 1.2s cubic-bezier(.6,0,.2,1);
  background: radial-gradient(circle at 40% 35%, #d7dde2, #8e979f 45%, #4b5258 80%); box-shadow: inset 0 0 0 6px #5c646b, inset 0 0 0 9px #aeb6bd, 0 10px 30px rgba(0,0,0,.6); }
.door .leaf::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 2px dashed rgba(43,47,51,.5); }
.door .wheel { position: absolute; left: 26.5%; top: 26.5%; width: 47%; height: 47%; border-radius: 50%; transition: transform 1s cubic-bezier(.4,0,.2,1);
  background: conic-gradient(from 0deg, transparent 0 10deg, #2b2f33 10deg 20deg, transparent 20deg 70deg, #2b2f33 70deg 80deg, transparent 80deg 130deg, #2b2f33 130deg 140deg, transparent 140deg 190deg, #2b2f33 190deg 200deg, transparent 200deg 250deg, #2b2f33 250deg 260deg, transparent 260deg 310deg, #2b2f33 310deg 320deg, transparent 320deg); }
.door .wheel::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold)); box-shadow: 0 0 0 4px #2b2f33; }
.door.open .wheel { transform: rotate(300deg); }
.door.open .leaf { transform: rotateY(-78deg); transition-delay: .7s; }
.big-claim { border: 0; cursor: pointer; padding: 14px 20px; border-radius: 6px; background: var(--gold); color: var(--ink); font: 900 22px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 30px rgba(212,165,55,.4); transition: transform .2s, filter .2s; justify-self: start; }
.big-claim:hover:not([disabled]) { transform: translateY(-2px); filter: brightness(1.06); }
.big-claim[disabled] { background: rgba(212,165,55,.16); color: var(--gold-hi); box-shadow: none; cursor: default; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 6px; background: rgba(9,13,19,.6); border: 1px solid var(--rule); }
.day .d { font: 800 15px/1 var(--display); letter-spacing: .1em; color: var(--slate); }
.day .mm { font: 600 12px/1 var(--num); color: var(--silver); }
.day svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.day svg circle { fill: none; stroke-width: 4; }
.day svg .bg { stroke: rgba(195,204,212,.16); }
.day svg .fg { stroke: var(--seal-hi); stroke-dasharray: 88; transition: stroke-dashoffset .6s; }
.day.done { border-color: rgba(111,168,255,.5); }
.day.done .d { color: var(--paper); }
.day.today { border-color: var(--gold); box-shadow: 0 0 18px rgba(212,165,55,.25); }
.day.today .d { color: var(--gold-hi); }
.bar { height: 12px; border-radius: 999px; background: rgba(195,204,212,.12); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--seal), var(--seal-hi)); box-shadow: 0 0 14px var(--seal-hi); }
.bar.gold i { background: linear-gradient(90deg, #a67c1c, var(--gold-hi)); box-shadow: 0 0 14px var(--gold); }
.row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--silver); }
.row b { font-family: var(--num); color: var(--paper); font-weight: 600; }
.ledger { display: grid; gap: 2px; }
.ledger div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(111,168,255,.08); font-size: 14px; }
.ledger span:first-child small { display: block; color: var(--slate); font-size: 12px; }
.ledger .amt { font: 700 16px/1.4 var(--num); }
.ledger .amt.plus { color: #63e6a3; }
.ledger .amt.minus { color: var(--silver); }
.example { font-size: 12px; color: var(--slate); font-style: italic; }

/* ---------------- shared overlays ---------------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
#zoomveil { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--zx, 50%) var(--zy, 50%), rgba(255,255,255,.18), rgba(9,13,19,.95) 45%); transition: opacity .5s; }
#zoomveil.on { opacity: 1; }
.toast { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); transform: translateX(-50%) translateY(-16px); z-index: 70; padding: 11px 16px; border-radius: 6px; background: #0f1724; border: 1px solid var(--rule); font-size: 14px; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translateX(-50%); }
.toast b { font-family: var(--num); color: var(--gold-hi); }
.bm-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5,8,12,.55); padding: 16px; }
.bm { position: relative; padding: 26px 40px; background: #0f1724; border: 1px solid var(--seal-hi); border-radius: 6px; box-shadow: 0 0 0 5px #0f1724, 0 0 0 6px rgba(111,168,255,.35), 0 0 60px rgba(111,168,255,.35); animation: bmIn .3s ease-out; }
.bm p { margin: 0; font: 800 26px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.bm button { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: var(--silver); font-size: 22px; cursor: pointer; padding: 4px; }
@keyframes bmIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* narrow or very short screens stack the room and let it scroll; desktop never does */
@media (max-width: 1180px), (max-height: 560px) {
  .room { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  .room-main { grid-template-rows: auto auto auto; }
  .side { overflow: visible; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* smaller screens: the Vault stacks and scrolls inside its frame under the header */
@media (max-width: 1100px), (max-height: 600px) {
  .vault-wrap { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); height: auto; min-height: 100%; }
  .panel.grow { flex: none; }
  .panel.grow .ledger { max-height: 340px; }
}
@media (max-width: 900px) {
  .vault-wrap { grid-template-columns: 1fr; }
  .nav { display: none; }
  .me span { display: none; }
  .hs .tag b { font-size: 15px; }
  .live { display: none; }
  .actions { grid-template-columns: 1fr; }
  .btns { justify-content: stretch; } .act { flex: 1; min-width: 0; }
  .daily { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 560px) {
  .brand span { display: none; }
  .wallet .claim { display: none; }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
}
/* ===== PORT END: everything below is the real site ===== */

/* backdrops are pre-blurred at build time (img/floor-blur.webp): no live CSS blur on a full-screen layer */
#v-gate .bg { filter: brightness(.38) saturate(1.2); }
.room-view { top: var(--hud-h, 64px); overflow-x: hidden; overflow-y: auto; background: var(--ink); }
.room-view::before { content: ""; position: fixed; inset: -30px; background: url("/img/floor-blur.webp") 18% 80% / cover; filter: brightness(.3) saturate(1.3); z-index: 0; }
#v-vault::before { background: linear-gradient(90deg, rgba(9,13,19,.92) 0%, rgba(9,13,19,.74) 45%, rgba(9,13,19,.55)), url("/img/vault.webp") 70% center / cover; filter: none; inset: 0; }
.room-view > * { position: relative; z-index: 1; }

/* ---------- shared controls ---------- */
.k { font: 700 13px/1 var(--display); letter-spacing: .24em; color: var(--gold-hi); text-transform: uppercase; }
.primary, .ghost, .buy, .link { font: inherit; cursor: pointer; transition: transform .15s, filter .2s, background .2s, border-color .2s, color .2s; }
.primary { border: 0; padding: 13px 20px; border-radius: 6px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); font: 800 18px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 26px rgba(212,165,55,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.primary:hover:not([disabled]) { transform: translateY(-2px); filter: brightness(1.06); }
.primary[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.primary.file { display: inline-grid; place-items: center; }
.ghost { border: 1px solid var(--rule); background: rgba(13,19,27,.75); color: var(--silver); padding: 10px 14px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.ghost:hover:not([disabled]) { color: var(--paper); border-color: var(--seal-hi); }
.ghost.on { border-color: var(--gold); color: var(--gold-hi); }
.link { background: none; border: 0; padding: 0; color: var(--seal-hi); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: #ff8f8f; }
.empty { color: var(--slate); font-size: 14px; padding: 18px 4px; text-align: center; margin: 0; }
.fine { font-size: 12.5px; color: var(--slate); margin: 0; }
.note { margin: 0; padding: 10px 12px; border-radius: 6px; background: rgba(45,93,168,.18); border: 1px solid var(--rule); font-size: 14px; color: var(--silver); }
.note.dev { background: rgba(212,165,55,.12); border-color: rgba(212,165,55,.35); }
.err { margin: 0; padding: 9px 12px; border-radius: 6px; background: rgba(200,51,59,.14); border: 1px solid rgba(255,122,122,.4); font-size: 14px; color: #ffb3b3; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: rgba(9,13,19,.7); border: 1px solid var(--rule); }
.tabs button { border: 0; background: none; cursor: pointer; padding: 6px 10px; border-radius: 4px; font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.tabs button[aria-pressed="true"] { background: var(--seal); color: var(--paper); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--silver); user-select: none; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 38px; height: 22px; border-radius: 999px; background: rgba(195,204,212,.18); position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--silver); transition: transform .25s cubic-bezier(.3,1.4,.5,1), background .2s; }
.switch input:checked + span { background: var(--seal); }
.switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--seal-hi); outline-offset: 2px; }

/* monogram faces (people without a photo, house players without art) */
.face.mono { background: radial-gradient(circle at 30% 25%, hsl(var(--hue) 55% 55%), hsl(var(--hue) 45% 26%)); }
.face.mono b { font: 900 1em/1 var(--display); color: rgba(255,255,255,.92); letter-spacing: .04em; font-size: 40%; }
.face { container-type: inline-size; }
.face.mono b { font-size: 38cqw; }

/* ---------- HUD additions ---------- */
.hud { z-index: 40; }
.icon-btn { position: relative; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font: 700 11px/18px var(--num); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--ink); }
.badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 2px; right: 2px; background: var(--seal-hi); box-shadow: 0 0 10px var(--seal-hi), 0 0 0 2px var(--ink); }
.me { background: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 10px 2px 2px; cursor: pointer; color: inherit; transition: border-color .2s, background .2s; }
.me:hover { border-color: var(--rule); background: rgba(13,19,27,.6); }
.signin-btn { border: 0; cursor: pointer; padding: 10px 16px; border-radius: 6px; font: 800 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, #fff, var(--silver)); box-shadow: 0 0 20px rgba(111,168,255,.4); }
.desk-link { padding: 7px 11px; border-radius: 4px; border: 1px solid rgba(212,165,55,.45); color: var(--gold-hi); font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.vps-bar { position: absolute; z-index: 39; left: 0; right: 0; top: var(--hud-only, 64px); padding: 8px 16px; text-align: center; font-size: 13.5px; color: var(--paper); background: linear-gradient(90deg, rgba(212,165,55,.12), rgba(212,165,55,.28), rgba(212,165,55,.12)); border-bottom: 1px solid rgba(212,165,55,.45); backdrop-filter: blur(8px); }
.vps-bar b { color: var(--gold-hi); }

/* ---------- gate ---------- */
.gate-live { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--silver); }
.gate-live b { color: var(--paper); font-size: 16px; }
.dotlive { width: 9px; height: 9px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 10px #3ee08f; animation: blink 1.6s infinite; }

/* ---------- floor ---------- */
.hs.soon .ring::before, .hs.soon .ring::after { border-color: rgba(195,204,212,.55); box-shadow: 0 0 10px rgba(195,204,212,.3); animation-duration: 3.6s; }
.hs.soon .ring i { background: var(--silver); box-shadow: 0 0 8px var(--silver); }
.hs.soon .tag small { color: var(--slate); }
.floor-side { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: grid; gap: 10px; justify-items: end; }
.floor-side .live { position: static; }
.jackpot-ticker { padding: 10px 16px; border-radius: 6px; display: grid; gap: 3px; min-width: 210px; background: radial-gradient(ellipse at 30% 0%, rgba(243,210,122,.22), rgba(9,13,19,.86) 70%); border: 1px solid rgba(212,165,55,.45); box-shadow: 0 0 30px rgba(212,165,55,.18); }
.jackpot-ticker .k { font-size: 11.5px; }
.jackpot-ticker .v { font: 700 28px/1 var(--num); color: var(--gold-hi); text-shadow: 0 0 18px rgba(212,165,55,.55); }
.spotlight { padding: 10px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--rule); display: grid; gap: 8px; max-width: 360px; }
.spotlight .row { display: flex; gap: 8px; flex-wrap: wrap; }
.spot { display: grid; justify-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--silver); font-size: 11.5px; }
.spot .face { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(212,165,55,.6); animation: spotPulse 2.4s ease-in-out infinite; }
@keyframes spotPulse { 50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 28px rgba(243,210,122,.85); } }

/* ---------- sheets + modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(5,8,12,.0); transition: background .22s; }
.modal-back.on { background: rgba(5,8,12,.62); backdrop-filter: blur(3px); }
.modal { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 24px 22px; border-radius: 12px; background: radial-gradient(ellipse at 50% -10%, #1b2c45, #0e1622 60%); border: 1px solid rgba(111,168,255,.28); box-shadow: 0 30px 90px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4), 0 0 60px rgba(111,168,255,.12);
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .3s cubic-bezier(.2,1.2,.4,1), opacity .22s; }
.modal-back.on .modal { transform: none; opacity: 1; }
.modal.wide { width: min(720px, 100%); }
.modal > .x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--silver); font-size: 26px; line-height: 1; cursor: pointer; padding: 6px; z-index: 2; }
.modal > .x:hover { color: #fff; }
.sheet { display: grid; gap: 14px; }
.sheet.center { justify-items: center; text-align: center; }
.sheet h2 { margin: 0; font: 900 34px/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.sheet .sub { margin: 0; color: var(--silver); }
.sheet form { display: grid; gap: 12px; }
.sheet-logo { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), 0 0 30px rgba(111,168,255,.4); }
.sheet-mula { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px rgba(111,168,255,.35), 0 0 40px rgba(111,168,255,.35); animation: float 5s ease-in-out infinite; }
.sheet-mula.big { width: 170px; height: 170px; }
.f { display: grid; gap: 6px; font-size: 13px; color: var(--silver); font-weight: 600; }
.f input, .f select, .f textarea, .code-in input, .host select { width: 100%; padding: 11px 12px; border-radius: 6px; border: 1px solid var(--rule); background: rgba(9,13,19,.85); color: var(--paper); font: 500 15px/1.3 var(--ui); transition: border-color .2s, box-shadow .2s; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--seal-hi); box-shadow: 0 0 0 3px rgba(111,168,255,.18); }
.f textarea { resize: vertical; min-height: 96px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--silver); cursor: pointer; }
.chk input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.chk a { color: var(--seal-hi); }
.auth .alt { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.buyin .buy-v { font: 700 54px/1 var(--num); color: var(--gold-hi); text-shadow: 0 0 24px rgba(212,165,55,.5); }
.buyin input[type=range] { width: 100%; accent-color: var(--gold); }
.buyin .row { width: 100%; }
.payday-total { font: 700 64px/1 var(--num); color: var(--gold-hi); text-shadow: 0 0 30px rgba(212,165,55,.7); }
.qty { display: flex; align-items: center; gap: 16px; }
.qty .num { font: 700 40px/1 var(--num); min-width: 2ch; }
.qty .ghost { width: 44px; height: 44px; font-size: 22px; padding: 0; }
.blist > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(111,168,255,.08); }

/* ---------- lobby ---------- */
.lobby-wrap { max-width: 1560px; margin: 0 auto; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lobby-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; }
.lobby-head h2, .store-head h2, .boards-head h2 { margin: 4px 0 0; font: 900 clamp(38px, 5vw, 64px)/.9 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.lobby-head h2 span, .store-head h2 span, .boards-head h2 span { color: var(--seal-hi); text-shadow: 0 0 26px rgba(111,168,255,.45); }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; min-height: 0; }
.lobby-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; min-height: 0; }
.lobby-side { display: grid; gap: 14px; align-content: start; overflow-y: auto; min-height: 0; }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.roomcard { position: relative; text-align: left; cursor: pointer; display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 10px; color: var(--paper); overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rh) 22%, transparent), rgba(9,13,19,.88) 60%); border: 1px solid color-mix(in srgb, var(--rh) 40%, transparent); transition: transform .2s, box-shadow .25s, border-color .2s; }
.roomcard::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rh) 40%, transparent), transparent 70%); opacity: .7; transition: transform .4s; }
.roomcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--rh) 70%, transparent); border-color: var(--rh); }
.roomcard:hover::after { transform: scale(1.3); }
.roomcard .rk { font: 700 11px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rh); }
.roomcard b { font: 900 25px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.roomcard .rs { font-size: 15px; color: var(--paper); }
.roomcard .rb { font-size: 12.5px; color: var(--silver); }
.roomcard .rp { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--silver); margin-top: 4px; }
.roomcard .rp i { width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 8px #3ee08f; }
.roomcard em { position: absolute; right: 10px; top: 10px; font: 700 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--ink); background: var(--rh); padding: 4px 6px; border-radius: 3px; }
.roomcard em.lk { background: rgba(9,13,19,.8); color: var(--slate); }
.roomcard.locked { opacity: .55; }
.roomcard.suggested { box-shadow: 0 0 0 1px var(--rh), 0 0 30px -6px color-mix(in srgb, var(--rh) 60%, transparent); }
.tlist { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 6px; align-content: start; padding-right: 4px; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(9,13,19,.55); border: 1px solid rgba(111,168,255,.1); border-left: 3px solid var(--rh); transition: background .2s, transform .2s; }
.trow:hover { background: rgba(29,58,95,.45); transform: translateX(3px); }
.trow .tn b { display: block; font: 800 17px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.trow .tn small { color: var(--slate); font-size: 12.5px; }
.trow .ts { color: var(--silver); font-size: 14px; }
.pips { display: flex; gap: 3px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(195,204,212,.15); }
.pips i.h { background: var(--seal-hi); box-shadow: 0 0 6px var(--seal-hi); }
.pips i.b { background: var(--slate); }
.join { border: 0; cursor: pointer; padding: 9px 16px; border-radius: 5px; background: var(--paper); color: var(--ink); font: 800 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.join[disabled] { background: rgba(195,204,212,.12); color: var(--slate); cursor: default; }
.code-in { display: flex; gap: 8px; }
.code-in input { text-transform: uppercase; font-family: var(--num); letter-spacing: .2em; }
.code-in button { border: 0; border-radius: 6px; padding: 0 16px; background: var(--seal); color: var(--paper); font-weight: 700; cursor: pointer; }
.host { display: grid; gap: 10px; }
.host > label:not(.switch) { display: grid; gap: 5px; font-size: 12.5px; color: var(--silver); font-weight: 600; }

/* ---------- table additions ---------- */
.pot { opacity: .5; transition: opacity .3s; }
.pot.on { opacity: 1; }
.seat .av { cursor: pointer; }
.seat .house { position: absolute; left: 50%; bottom: -.2em; transform: translateX(-50%); padding: .12em .45em; border-radius: .3em; background: rgba(9,13,19,.9); border: 1px solid var(--rule); font: 700 .8em/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.seat .crown { position: absolute; left: 50%; top: -.75em; transform: translateX(-50%) rotate(-8deg); font-size: 2.2em; line-height: 1; filter: drop-shadow(0 .1em .3em rgba(0,0,0,.6)); }
.crown.gold { color: var(--gold-hi); text-shadow: 0 0 .5em rgba(243,210,122,.9); }
.crown.silver { color: #e6edf3; text-shadow: 0 0 .5em rgba(195,204,212,.9); }
.seat.out { opacity: .55; }
.seat.vacant .open-seat { width: 6.4em; height: 6.4em; border-radius: 50%; border: .18em dashed rgba(195,204,212,.35); background: rgba(9,13,19,.45); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; color: var(--silver); font: 800 1.4em/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.seat.vacant button.open-seat:hover { border-color: var(--seal-hi); background: rgba(45,93,168,.35); transform: scale(1.06); color: #fff; }
.seat.vacant .open-seat.dim { opacity: .35; }
.seat.glow .face { box-shadow: 0 0 0 .2em var(--ink), 0 0 1.6em var(--seal-hi), 0 0 3em rgba(111,168,255,.5); }
.seat.vip .plate { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,165,55,.18), rgba(9,13,19,.9)); }
.seat .plate .n i { display: inline-block; margin-right: .3em; vertical-align: -.1em; }
.card.mine .c-face { box-shadow: 0 .4em 1.2em rgba(0,0,0,.6), 0 0 1em rgba(111,168,255,.25); }
.card.gone { opacity: 0; transform: translate(-50%, -30%) scale(.4); }
.chipfly { transition: left .7s cubic-bezier(.3,.6,.2,1), top .7s cubic-bezier(.3,.6,.2,1), opacity .25s .55s; }
.bet { transition: left .55s cubic-bezier(.3,.6,.2,1), top .55s cubic-bezier(.3,.6,.2,1), opacity .3s .3s; }
.raise-v { min-width: 6ch; font-size: 15px; color: var(--gold-hi); }
.react { position: absolute; left: 50%; top: -1.6em; transform: translateX(-50%); padding: .3em .7em; border-radius: .5em; background: var(--paper); color: var(--ink); font: 700 1.3em/1.1 var(--ui); white-space: nowrap; z-index: 12; animation: reactUp 2.6s ease-out forwards; pointer-events: none; }
@keyframes reactUp { 0% { opacity: 0; transform: translate(-50%, .6em) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -1.2em); } }
.chat-panel .chat { max-height: none; flex: 1; min-height: 120px; }
.side .chat-panel { display: flex; flex-direction: column; min-height: 0; }
.side { grid-template-rows: minmax(0, 1fr) auto; }
.quick { display: flex; flex-wrap: wrap; gap: 5px; }
.quick button { border: 1px solid var(--rule); background: rgba(9,13,19,.7); color: var(--silver); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; transition: border-color .2s, transform .15s; }
.quick button:hover { border-color: var(--seal-hi); color: #fff; transform: translateY(-1px); }
.tbl-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.pill.code { cursor: pointer; border-color: rgba(212,165,55,.5); }
.pill.code b { color: var(--gold-hi); letter-spacing: .14em; }

/* action emotes: a flash at the target + a shake/blush on them */
.action-fx { position: absolute; left: 50%; top: 40%; width: 9em; height: 9em; transform: translate(-50%, -50%); pointer-events: none; z-index: 15; border-radius: 50%; animation: actFx 1.4s ease-out forwards; }
.action-fx::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.2em; animation: actPop 1.4s cubic-bezier(.2,1.6,.4,1) forwards; }
.a-hug::after { content: "🤗"; } .a-kiss::after { content: "😘"; } .a-slap::after { content: "🖐️"; } .a-kick::after { content: "🦵"; } .a-punch::after { content: "👊"; } .a-bite::after { content: "😬"; }
.action-fx.a-hug, .action-fx.a-kiss { background: radial-gradient(circle, rgba(255,140,190,.45), transparent 65%); }
.action-fx.a-slap, .action-fx.a-punch, .action-fx.a-kick, .action-fx.a-bite { background: radial-gradient(circle, rgba(255,240,180,.6), rgba(255,120,80,.25) 40%, transparent 70%); }
@keyframes actFx { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@keyframes actPop { 0% { transform: scale(.2) rotate(-20deg); } 30% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) translateY(-.6em); opacity: 0; } }
.seat.hit-slap, .seat.hit-punch, .seat.hit-kick { animation: shake .5s; }
.seat.hit-hug, .seat.hit-kiss { animation: squish .7s; }
.seat.hit-bite { animation: shake .3s 2; }
.seat.throw { animation: throwIt .4s; }
@keyframes shake { 20% { translate: -.6em 0; } 40% { translate: .6em 0; } 60% { translate: -.4em 0; } 80% { translate: .3em 0; } }
@keyframes squish { 30% { scale: 1.12 .92; } 60% { scale: .95 1.06; } }
@keyframes throwIt { 50% { scale: 1.08; } }
body.hit-slap #app, body.hit-punch #app, body.hit-kick #app { animation: shake .45s; }
.m.sys.action { color: var(--gold-hi); font-style: normal; font-weight: 600; }

/* ---------- Mula moments ---------- */
.moment { position: fixed; z-index: 70; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 10px; pointer-events: none; opacity: 0; transform: translateY(30px); }
.moment.on { animation: momentIn 4.2s cubic-bezier(.2,1.2,.3,1) forwards; }
.moment img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold), 0 0 40px rgba(212,165,55,.6); background: var(--midnight); }
.moment .bubble { margin-bottom: 70px; max-width: 320px; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--paper); color: var(--ink); font: 800 21px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 16px 40px -14px rgba(0,0,0,.8); }
.moment .bubble small { display: block; font: 700 11px/1 var(--display); letter-spacing: .2em; color: var(--seal); margin-bottom: 4px; }
@keyframes momentIn { 0% { opacity: 0; transform: translateY(40px) scale(.8); } 10% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(20px); } }

/* ---------- floor chat dock ---------- */
.dock { position: fixed; z-index: 35; right: 14px; top: calc(var(--hud-h, 64px) + 14px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 330px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: rgba(11,17,26,.92); border: 1px solid var(--rule); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); animation: dockIn .35s cubic-bezier(.2,1,.3,1); }
@keyframes dockIn { from { opacity: 0; transform: translateX(24px); } }
.dock-head { display: flex; align-items: center; gap: 10px; }
.dock-head h3 { margin: 0; font: 800 19px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.dock-live { flex: 1; font-size: 12px; color: var(--slate); }
.dock .x { background: none; border: 0; color: var(--silver); font-size: 24px; cursor: pointer; line-height: 1; }
.dock-feed { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.dock-fine { margin: 0; font-size: 11.5px; color: var(--slate); }
.chat .m .who { cursor: pointer; font-weight: 600; color: var(--seal-hi); margin-right: 6px; }
.chat .m .who .crown-s { color: var(--gold-hi); font-style: normal; margin-right: 3px; }
.chat .m.vip .who { color: var(--gold-hi); }
.chat .m .face { cursor: pointer; }
.chat .m .rep { opacity: 0; border: 0; background: none; color: var(--slate); cursor: pointer; font-size: 12px; margin-left: 4px; transition: opacity .2s; }
.chat .m:hover .rep { opacity: 1; }
.chat .m.muted { display: none; }
body.dock-open #v-floor .floor-side { right: 360px; }

/* ---------- mail drawer ---------- */
.drawer { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: rgba(11,17,26,.97); border-left: 1px solid var(--rule); box-shadow: -40px 0 80px -30px rgba(0,0,0,.9); transform: translateX(100%); transition: transform .32s cubic-bezier(.2,1,.3,1); }
.drawer.on { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 12px; border-bottom: 1px solid var(--rule); }
.drawer-head h3 { margin: 0; flex: 1; font: 900 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.drawer-head .x { background: none; border: 0; color: var(--silver); font-size: 26px; cursor: pointer; }
.mlist { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.drawer-foot { padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); display: grid; }
.letter { padding: 12px; border-radius: 8px; background: linear-gradient(180deg, rgba(238,240,238,.05), rgba(238,240,238,.02)); border: 1px solid rgba(111,168,255,.12); display: grid; gap: 8px; animation: dockIn .3s ease-out both; }
.letter.new { border-color: rgba(212,165,55,.55); box-shadow: 0 0 20px rgba(212,165,55,.12); }
.letter.house { background: linear-gradient(160deg, rgba(45,93,168,.25), rgba(9,13,19,.6)); }
.letter header { display: flex; align-items: center; gap: 10px; }
.letter header .face { width: 36px; height: 36px; cursor: pointer; }
.letter header div { flex: 1; display: grid; }
.letter header small { color: var(--slate); font-size: 12px; }
.letter .del { background: none; border: 0; color: var(--slate); cursor: pointer; font-size: 18px; }
.letter .body p { margin: 0 0 6px; white-space: pre-wrap; font-size: 14.5px; }
.giftmail { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(212,165,55,.12); border: 1px solid rgba(212,165,55,.35); font-weight: 600; }
.giftmail .gi { width: 40px; height: 40px; font-size: 26px; }
.compose .vrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- store ---------- */
.store-wrap, .boards-wrap { max-width: 1440px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
.store-head, .boards-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.store-bal { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(9,13,19,.8); border: 1px solid rgba(212,165,55,.4); font: 700 26px/1 var(--num); }
.store-tabs, .board-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.store-tabs button { border: 1px solid var(--rule); background: rgba(9,13,19,.65); color: var(--silver); padding: 10px 18px; border-radius: 999px; cursor: pointer; font: 800 16px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; transition: all .2s; }
.store-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 0 24px rgba(238,240,238,.25); }
.store-blurb { margin: 0; color: var(--silver); }
.store-grid h3.slot { margin: 6px 0 0; font: 800 18px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.item { --rc: var(--silver); position: relative; display: grid; grid-template-rows: auto 1fr auto; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(17,27,41,.95), rgba(9,13,19,.95)); border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); transition: transform .25s cubic-bezier(.2,1,.3,1), box-shadow .3s, border-color .2s; }
.item:hover { transform: translateY(-4px) rotateX(2deg); box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--rc) 70%, transparent); border-color: var(--rc); }
.item.r-rare { --rc: var(--seal-hi); } .item.r-epic { --rc: #c48bff; } .item.r-legendary { --rc: var(--gold-hi); }
.item.r-legendary::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.18) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 3.5s linear infinite; z-index: 2; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.item.own { box-shadow: inset 0 0 0 1px rgba(62,224,143,.35); }
.prev { position: relative; height: 130px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), rgba(9,13,19,.6); overflow: hidden; }
.prev > .gi { position: absolute; }
.prev > :not(.gi) { position: relative; z-index: 1; }
.ib { padding: 12px 14px 6px; display: grid; gap: 4px; align-content: start; }
.ib .rar { font: 700 10.5px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--rc); }
.ib b { font: 800 21px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ib p { margin: 0; font-size: 13px; color: var(--silver); line-height: 1.4; }
.ifoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; }
.ifoot .have { font-size: 12px; color: #63e6a3; }
.ifoot .hint { font-size: 12px; color: var(--slate); }
.buy { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 8px 14px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); font: 700 16px/1 var(--num); box-shadow: 0 0 18px rgba(212,165,55,.3); }
.buy .coin { width: 20px; height: 20px; font-size: 11px; }
.buy:hover:not([disabled]) { transform: translateY(-2px); }
.buy[disabled] { filter: grayscale(.8); opacity: .5; cursor: default; }
/* gift + perk + emote icons (emoji on a glowing tile; Mula's plush is his own face) */
.gi { width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; font-size: 44px; font-style: normal; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 60%); }
.gi::before { content: ""; }
.gi-gift-rose::before { content: "🌹"; } .gi-gift-cigar::before { content: "🚬"; } .gi-gift-champagne::before { content: "🍾"; } .gi-gift-diamondvault::before { content: "💎"; }
.gi-gift-goldbar::before { content: ""; width: 60%; height: 34%; background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, #8f6a16); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); filter: drop-shadow(0 4px 8px rgba(212,165,55,.6)); }
.gi-gift-plush { background: url("/img/mula/hi.webp") center 20% / 150% no-repeat; border-radius: 50%; box-shadow: 0 0 0 3px rgba(196,139,255,.6); }
.gi-perk-glow-7::before { content: "✨"; } .gi-perk-vip-7::before { content: "🎩"; } .gi-perk-host-7::before { content: "🃏"; } .gi-perk-double-7::before { content: "💰"; } .gi-perk-spot-1::before { content: "🔦"; } .gi-perk-emotes-7::before { content: "🎭"; }
.gi-emote-hug::before { content: "🤗"; } .gi-emote-kiss::before { content: "😘"; } .gi-emote-slap::before { content: "🖐️"; } .gi-emote-kick::before { content: "🦵"; } .gi-emote-punch::before { content: "👊"; } .gi-emote-bite::before { content: "😬"; }
.gi-entrance-coins::before { content: "🪙"; } .gi-entrance-vault::before { content: "🚪"; }
.prev-frame > .gi, .prev-name_fx > .gi, .prev-chat_color > .gi, .prev-badge > .gi, .prev-cards > .gi, .prev-chips > .gi, .prev-felt > .gi { display: none; }

/* cosmetic previews + the real thing on seats and in chat */
.pv-name { font: 800 26px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.pv-chat { padding: 8px 14px; border-radius: 10px 10px 10px 2px; background: rgba(9,13,19,.85); font-size: 16px; }
.nfx-name-mint, .ink-chat-emerald { color: #5ee6a8 !important; }
.nfx-name-goldfoil { background: linear-gradient(100deg, #8f6a16, #fff3c4 30%, var(--gold) 50%, #fff3c4 70%, #8f6a16); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sheenText 3s linear infinite; }
.nfx-name-ticker { color: #7dffb0 !important; font-family: var(--num) !important; text-shadow: 0 0 10px rgba(125,255,176,.6); }
@keyframes sheenText { to { background-position: -200% 0; } }
.ink-chat-champagne { color: #f6e3a8 !important; }
.glow { text-shadow: 0 0 12px var(--seal-hi), 0 0 24px rgba(111,168,255,.6); }
[class^="badge-"], [class*=" badge-"] { display: inline-block; width: 1em; height: 1em; font-style: normal; line-height: 1; }
.badge-badge-dice::before { content: "🎲"; } .badge-badge-crownlet::before { content: "👑"; } .badge-badge-diamond::before { content: "◆"; color: #1a1a1a; text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.pv-frame { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; }
.pv-frame .face { width: 74px; height: 74px; }
.frame-frame-brass, .seat .av.frame-frame-brass .face { box-shadow: 0 0 0 4px #b98a3c, 0 0 0 6px #5c4319 !important; }
.frame-frame-gilded, .seat .av.frame-frame-gilded .face { box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px #8f6a16, 0 0 24px rgba(243,210,122,.7) !important; }
.frame-frame-neon, .seat .av.frame-frame-neon .face { box-shadow: 0 0 0 3px #ff4fd8, 0 0 18px #ff4fd8, 0 0 36px #6fa8ff !important; animation: neon 2.2s infinite; }
.frame-frame-mula, .seat .av.frame-frame-mula .face { box-shadow: 0 0 0 4px var(--silver), 0 0 0 7px var(--seal), 0 0 0 9px var(--gold), 0 0 34px rgba(243,210,122,.9) !important; }
@keyframes neon { 45% { filter: brightness(1); } 50% { filter: brightness(.6); } 55% { filter: brightness(1.15); } }
.pv-cards { display: flex; gap: 6px; } .pv-cards i { width: 46px; height: 64px; border-radius: 6px; border: 3px solid var(--paper); background: linear-gradient(135deg, #24477c, #142a4a); box-shadow: 0 6px 14px rgba(0,0,0,.5); } .pv-cards i:last-child { transform: rotate(8deg); }
.cb-cards-noir i { background: radial-gradient(circle, var(--gold) 0 18%, transparent 20%), #0b0b0d; border-color: #1c1c1c; }
.cb-cards-banknote i { background: repeating-linear-gradient(45deg, #335a3a 0 3px, #2a4a30 3px 6px); border-color: #e9e4cf; }
.pv-chips { position: relative; width: 60px; height: 50px; } .pv-chips i { position: absolute; left: 0; width: 60px; height: 22px; border-radius: 50%; background: var(--seal); box-shadow: inset 0 0 0 3px #eef0ee, inset 0 0 0 6px var(--seal); } .pv-chips i:nth-child(1) { bottom: 0; } .pv-chips i:nth-child(2) { bottom: 9px; } .pv-chips i:nth-child(3) { bottom: 18px; }
.ch-chips-obsidian i { background: #111; box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 6px #111; }
.ch-chips-platinum i { background: linear-gradient(180deg, #f4f6f8, #9aa3ab); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #b8c0c7; }
.pv-felt { width: 140px; height: 80px; border-radius: 40px; box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 0 0 6px #3a2a1a; }
.fe-felt-midnight { background: radial-gradient(ellipse, #1d2a5f, #0b1230); } .fe-felt-crimson { background: radial-gradient(ellipse, #8a1d26, #3d0a10); }

/* ---------- leaderboards ---------- */
.champs .champ { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, rgba(212,165,55,.25), rgba(9,13,19,.8)); border: 1px solid rgba(212,165,55,.5); color: var(--paper); }
.champs .crown { font-size: 28px; }
.champs small { display: block; font: 700 10.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.board-tabs button { display: grid; gap: 3px; text-align: left; min-width: 150px; flex: 1 1 150px; cursor: pointer; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--rule); background: rgba(9,13,19,.65); color: var(--silver); transition: all .2s; }
.board-tabs button b { font: 800 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.board-tabs button small { font-size: 11.5px; line-height: 1.3; }
.board-tabs button[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(160deg, rgba(212,165,55,.22), rgba(9,13,19,.85)); box-shadow: 0 0 24px rgba(212,165,55,.18); }
.board-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.board-bar select { padding: 9px 12px; border-radius: 6px; border: 1px solid var(--rule); background: rgba(9,13,19,.85); color: var(--paper); font: 600 14px/1 var(--ui); }
.stale { font-size: 12.5px; color: var(--gold-hi); }
.board-body { display: grid; gap: 16px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; max-width: 900px; width: 100%; margin: 0 auto; }
.pod { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 12px 16px; border-radius: 12px 12px 4px 4px; cursor: pointer; color: var(--paper); border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(29,58,95,.55), rgba(9,13,19,.9)); transition: transform .25s; }
.pod:hover { transform: translateY(-4px); }
.pod .face { width: 86px; height: 86px; box-shadow: 0 0 0 3px var(--silver); }
.pod.p1 { padding-top: 34px; border-color: rgba(212,165,55,.6); background: linear-gradient(180deg, rgba(212,165,55,.3), rgba(9,13,19,.92)); box-shadow: 0 0 50px -10px rgba(212,165,55,.5); }
.pod.p1 .face { width: 112px; height: 112px; box-shadow: 0 0 0 4px var(--gold), 0 0 30px rgba(243,210,122,.7); }
.pod .crown { position: absolute; top: -18px; font-size: 40px; animation: float 3s ease-in-out infinite; }
.pod b { font: 800 20px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.pod .num { font-size: 22px; font-weight: 700; color: var(--gold-hi); }
.pod > i { position: absolute; left: 10px; top: 8px; font: 900 22px/1 var(--display); font-style: normal; color: var(--slate); }
.pod.p1 > i { color: var(--gold-hi); }
.pod.empty { visibility: hidden; }
.pod-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; color: var(--silver); text-align: center; }
.pod-empty img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.blist { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; }
.brow { display: grid; grid-template-columns: 3ch 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; border: 0; background: rgba(9,13,19,.5); color: var(--paper); cursor: pointer; text-align: left; transition: background .2s; }
.brow:hover { background: rgba(29,58,95,.5); }
.brow.me { box-shadow: inset 3px 0 0 var(--gold); }
.brow .face { width: 40px; height: 40px; }
.brow .rk { color: var(--slate); font-weight: 700; }
.brow b { font-weight: 600; }
.brow .v { color: var(--gold-hi); font-weight: 700; }
.brow .ex, .pod .ex { color: var(--slate); font-size: 12px; }
.me-rank { text-align: center; color: var(--silver); }
.me-rank b { color: var(--gold-hi); }

/* ---------- player cards ---------- */
.pcard { width: min(520px, 100%); }
.card-sheet { display: grid; gap: 16px; }
.pc-head { display: flex; align-items: center; gap: 16px; }
.pc-face { position: relative; }
.pc-face .face { width: 96px; height: 96px; box-shadow: 0 0 0 3px var(--rule); }
.pc-face .crown { position: absolute; left: 50%; top: -20px; transform: translateX(-50%) rotate(-8deg); font-size: 34px; }
.pc-head h2 { margin: 0; font: 900 34px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.pc-head .sub { margin: 4px 0 0; color: var(--silver); font-size: 13.5px; }
.vip-tag { color: var(--ink); background: var(--gold); padding: 1px 6px; border-radius: 3px; font: 800 12px/1.5 var(--display); letter-spacing: .14em; }
.pc-head.vip h2 { color: var(--gold-hi); }
.pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pc-stats div { padding: 10px; border-radius: 8px; background: rgba(9,13,19,.6); border: 1px solid var(--rule); display: grid; gap: 2px; }
.pc-stats span { font-size: 12px; color: var(--slate); }
.pc-stats b { font-size: 22px; }
.pc-stats small { font-size: 11.5px; color: var(--silver); }
.pc-wall h3 { margin: 0 0 8px; font: 800 17px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.pc-wall h3 small { color: var(--gold-hi); font-family: var(--num); }
.gifts { display: flex; flex-wrap: wrap; gap: 6px; }
.gift .gi { width: 46px; height: 46px; font-size: 28px; border-radius: 12px; background-color: rgba(9,13,19,.6); border: 1px solid var(--rule); }
.gift.r-epic .gi { border-color: rgba(196,139,255,.6); } .gift.r-legendary .gi { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,165,55,.5); }
.pc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-actions > * { flex: 1; }
.pc-emotes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pc-emotes > span { width: 100%; font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); }
.pc-emotes button { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--rule); background: rgba(9,13,19,.6); font-size: 24px; cursor: pointer; transition: transform .15s, border-color .2s; }
.pc-emotes button small { font-size: 11px; color: var(--silver); }
.pc-emotes button:hover { transform: translateY(-3px) scale(1.05); border-color: var(--seal-hi); }
.pc-foot { display: flex; justify-content: space-between; }
.gpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gopt { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--rule); background: rgba(9,13,19,.6); color: var(--paper); cursor: pointer; transition: all .2s; }
.gopt .gi { width: 52px; height: 52px; font-size: 32px; }
.gopt b { font-size: 12.5px; }
.gopt span { font-size: 13px; color: var(--gold-hi); }
.gopt.on { border-color: var(--gold); box-shadow: 0 0 20px rgba(212,165,55,.3); background: rgba(212,165,55,.12); }
.gopt[disabled] { opacity: .4; cursor: default; }

/* ---------- vault additions ---------- */
.vault-mula { width: 100%; max-height: 70vh; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); animation: float 6s ease-in-out infinite; }
.panel h3 .tabs { font-size: 12px; }
.paused { font-size: 13px !important; color: var(--gold-hi) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .lobby-grid { grid-template-columns: 1fr; } .lobby-wrap { height: auto; min-height: 100%; }
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlist { max-height: 420px; }
  .dock { width: min(330px, calc(100% - 28px)); }
  body.dock-open #v-floor .floor-side { right: max(24px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 900px) {
  .floor-side .jackpot-ticker, .spotlight { display: none; }
  .podium { gap: 8px; } .pod .face { width: 60px; height: 60px; } .pod.p1 .face { width: 78px; height: 78px; } .pod b { font-size: 15px; }
  .signin-btn { padding: 9px 12px; font-size: 13px; }
  .moment img { width: 100px; height: 100px; } .moment .bubble { font-size: 17px; margin-bottom: 40px; }
}
@media (max-width: 560px) {
  .rooms { grid-template-columns: 1fr; }
  .trow { grid-template-columns: minmax(0, 1fr) auto; } .trow .ts, .trow .pips { display: none; }
  .gpick { grid-template-columns: repeat(2, 1fr); }
  .dock { left: 14px; right: 14px; width: auto; }
}

/* ---------- QA fixes (round 1) ---------- */
.side { grid-template-columns: minmax(0, 1fr); }
.side > * { min-width: 0; }
.ledger { align-content: start; }
.hs { z-index: 4; }
.floor-intro h1 { font-size: clamp(34px, 4.6vw, 64px); }
.me .meface { display: grid; }
.me .meface .face { width: 40px; height: 40px; }
/* phones held upright: the floor scrolls sideways under a fixed title and live counters */
@media (max-aspect-ratio: 1/1) {
  .floor-intro { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 62vw; }
  .floor-intro h1 { font-size: 34px; }
  .floor-intro p { font-size: 13px; }
  .floor-side { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .floor-side .live { min-width: 0; padding: 8px 12px; } .floor-side .live .v { font-size: 22px; }
}
.board-body .panel.grow:has(.blist:empty) { display: none; }
/* action labels sit under the face (never over it); the HOUSE tag moves to the corner */
.seat .act-label { top: auto; bottom: -.15em; transform: translate(-50%, 0) scale(.6); font-size: 1em; }
.seat .act-label.on { transform: translate(-50%, 0) scale(1); }
.seat .house { left: auto; right: -.2em; bottom: auto; top: .2em; transform: none; font-size: .7em; }
.seat .av .face { inset: .45em; }
/* nothing inside a table may ever push the room sideways (flying chips, banners, long names) */
.tbox { overflow: clip; overflow-clip-margin: 0; }
.room-main { min-width: 0; }
@media (max-width: 560px) {
  .hud { gap: 8px; }
  .brand img { width: 36px; height: 36px; }
  .icon-btn { width: 36px; height: 36px; }
  .wallet { gap: 6px; padding: 4px 10px 4px 6px; } .wallet .bal { font-size: 16px; min-width: 0; }
  .me { padding: 0; } .me .meface .face { width: 36px; height: 36px; }
  .vault-title h2 { font-size: 52px; }
}

/* ---------- phone tab bar ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  :root { --tab-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; height: var(--tab-h); padding: 6px 6px env(safe-area-inset-bottom, 0px);
    display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(9,13,19,.94); border-top: 1px solid var(--rule); backdrop-filter: blur(12px);
    transform: translateY(110%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .tabbar.on { transform: none; }
  .tabbar button { background: none; border: 0; color: var(--slate); display: grid; justify-items: center; align-content: center; gap: 3px; cursor: pointer; font: 700 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
  .tabbar svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar button[aria-current="page"] { color: var(--paper); }
  .tabbar button[aria-current="page"] svg { stroke: var(--seal-hi); filter: drop-shadow(0 0 6px var(--seal-hi)); }
  #chatBtn { display: none; }
  .room-view { bottom: var(--tab-h); }
  .floor-intro, .floor-side { bottom: calc(var(--tab-h) + 14px) !important; }
  #v-floor { bottom: var(--tab-h); }
  .dock { bottom: calc(var(--tab-h) + 10px); }
  .moment { bottom: calc(var(--tab-h) + 12px); }
}
/* phones: stop the browser's "font boosting" from inflating the table (it sizes everything in em off 1% of its width) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) { .me #meName { display: none; } .me .meface { display: grid !important; } }
@media (max-width: 900px) { .me .meface .face, .me .meface .face b { display: grid !important; } .me .meface .face b { display: block !important; } }

/* ---------- store rentals (0005): looks rent by the week or month; Forever is the splurge ---------- */
.item { grid-template-rows: auto 1fr auto auto; }
.ib .rar .per { font-style: normal; margin-left: 6px; color: var(--slate); }
.terms { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 0 14px 12px; }
.term { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 10px; cursor: pointer; border: 1px solid var(--rule); background: rgba(9,13,19,.7); color: var(--paper); font: inherit; transition: transform .18s cubic-bezier(.2,1,.3,1), border-color .2s, background .2s, box-shadow .25s; }
.term > span:first-child { font: 800 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.term .tp { display: inline-flex; align-items: center; gap: 5px; }
.term .coin { flex: none; width: 16px; height: 16px; font-size: 9px; }
.term .num { font: 700 15px/1 var(--num); color: var(--gold-hi); }
.term:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 22px -14px rgba(212,165,55,.8); }
/* Forever reads as the premium rung: foil edge and a slow sheen, so the price gap feels earned, not hidden */
.term.t-forever { border-color: rgba(212,165,55,.55); background: linear-gradient(160deg, rgba(212,165,55,.16), rgba(9,13,19,.85) 60%); overflow: hidden; }
.term.t-forever::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,236,190,.22) 50%, transparent 65%); background-size: 260% 100%; animation: sheen 4.5s linear infinite; }
.term[data-short] { opacity: .45; }
.term-pick { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; width: min(440px, 100%); margin: 18px auto 8px; }
.term-pick .term { padding: 14px 6px 12px; }
.term-pick .term .num { font-size: 22px; } .term-pick .term .coin { width: 20px; height: 20px; font-size: 11px; }
.term-pick .term em { font: 500 11.5px/1.2 var(--body); font-style: normal; color: var(--slate); }
.term-pick .term[aria-pressed="true"] { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(212,165,55,.25), rgba(9,13,19,.85)); box-shadow: 0 0 0 1px var(--gold-hi), 0 14px 30px -16px rgba(212,165,55,.9); transform: translateY(-2px); }
.ifoot .have.forever { color: var(--gold-hi); font-weight: 700; letter-spacing: .04em; }
.ifoot .ghost + .buy.ext { margin-left: 0; }
.buy.ext { padding: 8px 14px; font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.ifoot:empty { display: none; }
@media (max-width: 420px) { .term-pick .term .num { font-size: 18px; } .term-pick { gap: 6px; } }

/* ---------- rotating lineup (0006): restock clock, stock badges, hot tags, off-shelf cards ---------- */
.store-bar { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.store-bar .store-blurb { flex: 1 1 380px; }
.restock { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(111,168,255,.35); background: rgba(9,13,19,.75); font: 700 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.restock b { font: 700 16px/1 var(--num); letter-spacing: .02em; color: var(--paper); min-width: 62px; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--seal-hi); box-shadow: 0 0 10px var(--seal-hi); animation: rsPulse 2s ease-in-out infinite; }
.restock.soon { border-color: rgba(212,165,55,.6); } .restock.soon .rs-dot { background: var(--gold-hi); box-shadow: 0 0 12px var(--gold-hi); animation-duration: .9s; }
@keyframes rsPulse { 50% { transform: scale(.55); opacity: .5; } }
.instock { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--silver); user-select: none; }
.instock input { accent-color: var(--gold); width: 16px; height: 16px; }
.prev { position: relative; }
/* beats `.prev > :not(.gi)` (which stacks previews in the grid) so the badges float in the corners */
.prev > .stk, .prev > .hot { position: absolute; }
.stk { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 9px; border-radius: 999px; font: 800 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #9ff0c6; background: rgba(9,13,19,.82); border: 1px solid rgba(62,224,143,.35); backdrop-filter: blur(4px); }
.stk.low { color: #ffd9a0; border-color: rgba(255,170,60,.6); animation: stkLow 1.6s ease-in-out infinite; }
@keyframes stkLow { 50% { box-shadow: 0 0 14px rgba(255,170,60,.55); } }
.stk.out { color: var(--slate); border-color: var(--rule); }
.stk.sold { color: #ff9a9a; border-color: rgba(255,90,90,.45); }
.hot { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 5px 9px 5px 22px; border-radius: 999px; font: 800 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #fff3e0; background: linear-gradient(90deg, #ff5a2e, #ffb02e); box-shadow: 0 6px 18px -6px rgba(255,110,40,.8); }
.hot::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 10px; margin-top: -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #fff3c4; box-shadow: 0 0 6px #fff3c4; animation: flick 0.7s ease-in-out infinite alternate; }
@keyframes flick { to { transform: scaleY(.75) translateY(1px); opacity: .8; } }
/* Off the shelf this rotation: still on display (L), but dimmed behind glass so it's obviously not buyable right now */
.item.oos .prev > :not(.stk):not(.hot) { filter: grayscale(.85) brightness(.55); }
.item.oos .ib { opacity: .62; }
.item.oos:hover { transform: none; box-shadow: none; }
.item.oos .prev::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.025) 14px 15px); pointer-events: none; }
.gopt.oos { opacity: .45; filter: grayscale(.7); }
.gopt .stk { position: static; margin-top: 2px; font-style: normal; }

/* ============ Item Studio looks (0007): generic renders driven by --fa / --fb, styles = the Studio's presets ============ */
/* frames: the ring sits on the face (box-shadow escapes the face's overflow clip) */
.fx-frame .face, .face.fx-frame { box-shadow: 0 0 0 4px var(--fa), 0 0 0 6px color-mix(in srgb, var(--fb) 70%, #000) !important; }
.fx-frame-double .face { box-shadow: 0 0 0 3px var(--fa), 0 0 0 6px #0b1018, 0 0 0 8px var(--fb) !important; }
.fx-frame-glow .face { box-shadow: 0 0 0 4px var(--fa), 0 0 22px 4px color-mix(in srgb, var(--fb) 80%, transparent) !important; }
.fx-frame-neon .face { box-shadow: 0 0 0 3px var(--fa), 0 0 16px var(--fa), 0 0 34px var(--fb) !important; animation: neon 2.2s infinite; }
.fx-frame-pulse .face { animation: fxPulse 2.4s ease-in-out infinite; }
@keyframes fxPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--fa), 0 0 14px color-mix(in srgb, var(--fa) 60%, transparent); } 50% { box-shadow: 0 0 0 4px var(--fb), 0 0 28px color-mix(in srgb, var(--fb) 80%, transparent); } }
/* name styles */
.fx-name_fx { color: var(--fa) !important; }
.fx-name_fx-gradient, .fx-name_fx-shimmer { background: linear-gradient(100deg, var(--fa), var(--fb), var(--fa)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.fx-name_fx-shimmer { animation: fxShimmer 3s linear infinite; }
@keyframes fxShimmer { to { background-position: -200% 0; } }
.fx-name_fx-glow { text-shadow: 0 0 10px var(--fb), 0 0 22px color-mix(in srgb, var(--fb) 60%, transparent); }
.fx-name_fx-outline { -webkit-text-stroke: 1px var(--fb); paint-order: stroke fill; }
/* chat ink */
.fx-chat_color { color: var(--fa) !important; }
/* Studio badges + icons with uploaded art */
.bdg { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-right: .25em; font-style: normal; line-height: 1; vertical-align: -.1em; }
.bdg.art, .gi.art, .ef-i.art, .entrance-fx .art { background: center / contain no-repeat; }
.gi.emo { font-style: normal; }
/* your own table skin: card backs, chips, felt (classes on the table root, colours as --slot-a/b) */
.fx-cards .c-back { background: linear-gradient(135deg, var(--cards-a), var(--cards-b)) !important; }
.fx-cards-stripes .c-back { background: repeating-linear-gradient(45deg, var(--cards-a) 0 .35em, var(--cards-b) .35em .7em) !important; }
.fx-cards-diamonds .c-back { background: conic-gradient(from 45deg, var(--cards-a) 25%, var(--cards-b) 0 50%, var(--cards-a) 0 75%, var(--cards-b) 0) 0 0 / 1.1em 1.1em !important; }
.fx-cards-dots .c-back { background: radial-gradient(circle, var(--cards-b) 22%, transparent 24%) 0 0 / .9em .9em, var(--cards-a) !important; }
.fx-cards .c-back::after { content: var(--cards-mark, "$"); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.fx-chips .chips i { background: var(--chips-a) !important; box-shadow: inset 0 0 0 .14em var(--chips-b), inset 0 0 0 .3em var(--chips-a) !important; }
.fx-chips-stripes .chips i { background: repeating-conic-gradient(var(--chips-a) 0 30deg, var(--chips-b) 0 60deg) !important; }
.fx-chips-dots .chips i { background: radial-gradient(circle at 50% 50%, var(--chips-b) 0 18%, var(--chips-a) 20%) !important; }
.fx-felt .tablewrap::before { content: ""; position: absolute; inset: 9% 7.5% 13%; border-radius: 50% / 46%; background: radial-gradient(ellipse at 50% 45%, var(--felt-a), var(--felt-b)); mix-blend-mode: color; opacity: .9; pointer-events: none; z-index: 0; }
/* built-in table skins on the real table (the store previews already had theirs) */
.cb-cards-noir .c-back { background: radial-gradient(circle, var(--gold) 0 14%, transparent 16%), #0b0b0d !important; }
.cb-cards-banknote .c-back { background: repeating-linear-gradient(45deg, #335a3a 0 3px, #2a4a30 3px 6px) !important; }
.ch-chips-obsidian .chips i { background: #111 !important; box-shadow: inset 0 0 0 .14em var(--gold), inset 0 0 0 .3em #111 !important; }
.ch-chips-platinum .chips i { background: linear-gradient(180deg, #f4f6f8, #9aa3ab) !important; box-shadow: inset 0 0 0 .14em #fff, inset 0 0 0 .3em #b8c0c7 !important; }
.fe-felt-midnight .tablewrap::before, .fe-felt-crimson .tablewrap::before { content: ""; position: absolute; inset: 9% 7.5% 13%; border-radius: 50% / 46%; mix-blend-mode: color; opacity: .9; pointer-events: none; z-index: 0; }
.fe-felt-midnight .tablewrap::before { background: radial-gradient(ellipse, #2a3d8f, #0b1230); }
.fe-felt-crimson .tablewrap::before { background: radial-gradient(ellipse, #b0222e, #3d0a10); }
/* store previews for Studio table items */
.pv-cards.fx-cards i { background: linear-gradient(135deg, var(--fa), var(--fb)); }
.pv-cards.fx-cards-stripes i { background: repeating-linear-gradient(45deg, var(--fa) 0 5px, var(--fb) 5px 10px); }
.pv-cards.fx-cards-diamonds i { background: conic-gradient(from 45deg, var(--fa) 25%, var(--fb) 0 50%, var(--fa) 0 75%, var(--fb) 0) 0 0 / 14px 14px; }
.pv-cards.fx-cards-dots i { background: radial-gradient(circle, var(--fb) 22%, transparent 24%) 0 0 / 11px 11px, var(--fa); }
.pv-chips.fx-chips i { background: var(--fa); box-shadow: inset 0 0 0 3px var(--fb), inset 0 0 0 6px var(--fa); }
.pv-chips.fx-chips-stripes i { background: repeating-conic-gradient(var(--fa) 0 30deg, var(--fb) 0 60deg); }
.pv-felt.fx-felt { background: radial-gradient(ellipse, var(--fa), var(--fb)); }

/* ============ action emotes from the Studio: pop / shake / rain / fly / spin ============ */
.emote-fx { position: absolute; left: 50%; top: 40%; width: 9em; height: 9em; transform: translate(-50%, -50%); pointer-events: none; z-index: 15; }
.emote-fx.fixed, .action-fx.fixed { position: fixed; top: 46%; font-size: 22px; z-index: 80; }
.emote-fx::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,190,.55), rgba(111,168,255,.2) 45%, transparent 70%); animation: actFx 1.4s ease-out forwards; }
.ef-i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.2em; font-style: normal; }
.ef-i.art { inset: 18%; }
.ef-pop .ef-i { animation: actPop 1.4s cubic-bezier(.2,1.6,.4,1) forwards; }
.ef-shake .ef-i { animation: efShake 1.2s ease-out forwards; }
.ef-spin .ef-i { animation: efSpin 1.4s cubic-bezier(.2,.9,.3,1) forwards; }
.ef-fly .ef-i { animation: efFly 1.4s cubic-bezier(.3,.7,.2,1) forwards; }
.ef-rain .ef-i { animation: actPop 1.4s ease-out forwards; }
.ef-rain .drop { position: absolute; top: -40%; font-size: 1.8em; font-weight: 400; animation: efDrop 1.3s ease-in forwards; opacity: 0; }
@keyframes efShake { 0% { transform: scale(.3); } 20% { transform: scale(1.2) rotate(-14deg); } 35% { transform: rotate(12deg); } 50% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } 100% { transform: scale(1); opacity: 0; } }
@keyframes efSpin { 0% { transform: scale(.2) rotate(-360deg); } 60% { transform: scale(1.15) rotate(20deg); } 100% { transform: scale(1) rotate(0); opacity: 0; } }
@keyframes efFly { 0% { transform: translate(-260%, 140%) scale(.4) rotate(-30deg); } 55% { transform: translate(0, 0) scale(1.2) rotate(8deg); } 100% { transform: translateY(-.6em) scale(1); opacity: 0; } }
@keyframes efDrop { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(260%) rotate(160deg); opacity: 0; } }
.seat.hit-fx-shake, .seat.hit-fx-pop { animation: shake .5s; } .seat.hit-fx-spin { animation: squish .7s; }

/* ============ seat entrances: rain / burst / spotlight / sparkle ============ */
.entrance-fx { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 16; }
.entrance-fx b { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.6em; height: 1.6em; margin: -.8em; font-size: 1.5em; font-weight: 400; opacity: 0; }
.entrance-fx b .art { display: block; width: 100%; height: 100%; }
.en-burst b { animation: enBurst 1.3s cubic-bezier(.15,.8,.3,1) forwards; }
.en-rain b { top: -5em; left: var(--x); animation: enRain 1.5s ease-in forwards; }
.en-sparkle b { left: calc(var(--dx) * .7); top: calc(var(--dy) * .7); animation: enTwinkle 1.2s ease-in-out forwards; font-size: 1.1em; }
.en-spotlight::before { content: ""; position: absolute; left: -4em; top: -14em; width: 8em; height: 16em; background: linear-gradient(180deg, rgba(255,246,214,0), rgba(255,246,214,.35) 70%, rgba(255,246,214,0)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(4px); animation: enBeam 2.2s ease-out forwards; }
.en-spotlight b { animation: enPop 1.6s cubic-bezier(.2,1.6,.4,1) .2s forwards; font-size: 2.4em; }
@keyframes enBurst { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(120deg); opacity: 0; } }
@keyframes enRain { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 100% { transform: translateY(9em) rotate(220deg); opacity: 0; } }
@keyframes enTwinkle { 0%, 100% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
@keyframes enBeam { 0% { opacity: 0; transform: scaleY(.3); transform-origin: top; } 30% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; } }
@keyframes enPop { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1) translateY(-1em); } }

/* ============ Desk announcement banner (under the HUD, everyone sees it) ============ */
.ann { position: fixed; z-index: 45; left: 50%; top: calc(var(--hud-h, 64px) + 10px); transform: translateX(-50%); width: min(760px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 11px 16px; border-radius: 12px; background: linear-gradient(100deg, rgba(17,27,41,.96), rgba(23,39,64,.96)); border: 1px solid rgba(111,168,255,.4);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); color: var(--paper); font-weight: 600; animation: annIn .6s cubic-bezier(.2,1.2,.3,1); }
.ann.gold { border-color: rgba(212,165,55,.7); background: linear-gradient(100deg, rgba(40,30,8,.96), rgba(17,27,41,.96)); }
.ann.alert { border-color: rgba(255,110,90,.7); background: linear-gradient(100deg, rgba(60,14,14,.96), rgba(17,27,41,.96)); }
.ann .ann-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--seal-hi); box-shadow: 0 0 10px var(--seal-hi); animation: rsPulse 1.6s infinite; }
.ann.gold .ann-dot { background: var(--gold-hi); box-shadow: 0 0 10px var(--gold-hi); } .ann.alert .ann-dot { background: #ff7a6a; box-shadow: 0 0 10px #ff7a6a; }
.ann .ann-t { flex: 1; line-height: 1.35; }
.ann button { flex: none; border: 0; background: transparent; color: var(--silver); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
@keyframes annIn { from { opacity: 0; transform: translate(-50%, -14px); } }
@media (max-width: 760px) { .ann { top: calc(var(--hud-h, 56px) + 6px); font-size: 14px; } }

/* ============ 5-Card Stud: fanned up-cards, hold-to-peek hole card, visible-hand labels ============ */
.card.peek { cursor: grab; }
.card.peek::after { content: "Hold to peek"; position: absolute; left: 50%; top: 104%; transform: translateX(-50%); white-space: nowrap; font: 700 .62em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 6px rgba(0,0,0,.8); animation: peekHint 2.4s ease-in-out infinite; pointer-events: none; }
.card.peek.peeking { cursor: grabbing; }
.card.peek.peeking .c-in { transform: rotateY(180deg) rotateX(14deg) !important; }
.card.peek.peeking::after { opacity: 0; animation: none; }
@keyframes peekHint { 50% { opacity: .45; } }
.vis-hand { position: absolute; z-index: 14; transform: translate(-50%, 0); padding: .25em .7em; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(9,13,19,.82); border: 1px solid rgba(111,168,255,.3); color: var(--silver); font: 700 1.05em/1.3 var(--ui); box-shadow: 0 6px 16px -8px #000; }