/* App shell: top bar, screen container, login, lobby. */

/* Top bar (persists across screens) */
#topbar{
  position:relative;            /* positioning context for the dropdown menu */
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:linear-gradient(180deg, rgba(2,18,31,.9), rgba(2,18,31,.4));
  border-bottom:1px solid var(--stroke); z-index:var(--z-topbar); flex:0 0 auto;
}
#topbar.hidden{display:none;}
#topbar .brand{font-weight:900; letter-spacing:.01em; font-size:24px; white-space:nowrap; cursor:pointer;
  padding:2px 6px; margin:-2px -2px; border-radius:8px; transition:filter .15s, transform .1s;
  text-shadow:0 0 16px rgba(67,224,255,.35);}
#topbar .brand span{color:var(--gold);}
#topbar .brand:hover{filter:brightness(1.12);}
#topbar .brand:active{transform:translateY(1px);}
#topbar .brand:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
@media (max-width:560px){ #topbar .brand{font-size:20px;} }
/* Short/landscape: compact the bar to ~42px (it was a fixed ~60px — a sixth of a 360px-tall
   landscape screen). Keep in sync with --topbar-h in design-system.css. */
@media (max-height:500px){
  #topbar{padding:4px 10px; gap:8px;}
  #topbar .brand{font-size:17px;}
  #topbar .iconbtn{width:32px; height:32px; font-size:14px; border-radius:8px;}
  #topbar .balance .v{font-size:15px;}
  #topbar .balance .k{font-size:8px;}
}
#topbar .spacer{flex:1;}
#topbar .balance{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; gap:3px; min-width:0;}
#topbar .balance .k{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:1px;}
#topbar .balance .v{font-size:19px; font-weight:800; color:var(--gold); transition:color .2s;}
#topbar .balance .v.flash-up{color:var(--green);} #topbar .balance .v.flash-down{color:var(--red);}
#topbar .balance .v .coin{transform-origin:center;}
/* Coins flying up from a fish win land here and bounce the logo (see src/ui/coinfly.js). */
#balCoin.coin-bounce{animation:coinBounce .34s cubic-bezier(.3,1.4,.5,1);}
@keyframes coinBounce{0%{transform:scale(1);}30%{transform:scale(1.55);}55%{transform:scale(.85);}100%{transform:scale(1);}}
.coinfly-layer{position:fixed; inset:0; z-index:var(--z-fx); pointer-events:none; overflow:hidden;}
.coinfly{position:fixed; width:18px; height:18px; opacity:1; will-change:transform,opacity;
  transition:transform .6s cubic-bezier(.35,.6,.2,1), opacity .6s ease; filter:drop-shadow(0 0 4px rgba(255,211,77,.7));}
.coinfly .coin{display:block; width:18px; height:18px;}
/* DOM headline-win pop (mines/bingo) — coin + amount that springs in, rises and fades. */
.win-pop{position:fixed; z-index:var(--z-fx); transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:6px;
  font-weight:900; font-size:30px; color:var(--wc,#54e08a); text-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 18px var(--wc,#54e08a);
  white-space:nowrap; will-change:transform,opacity; animation:win-pop 1.5s cubic-bezier(.2,.7,.2,1) forwards;}
.win-pop .coin{width:26px; height:26px; filter:drop-shadow(0 0 8px rgba(255,176,32,.8));}
@keyframes win-pop{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4);}
  14%{opacity:1; transform:translate(-50%,-64%) scale(1.18);}
  30%{transform:translate(-50%,-72%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-140%) scale(.96);}
}
@media (prefers-reduced-motion: reduce){ .win-pop{animation-duration:.9s;} }
@media (prefers-reduced-motion: reduce){
  .coinfly{transition-duration:.35s;}
  #balCoin.coin-bounce{animation-duration:.2s;}
}
#topbar .iconbtn{
  background:transparent; border:1px solid var(--stroke); color:var(--ink);
  width:40px; height:40px; border-radius:10px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .12s, background .12s;
}
#topbar .iconbtn:hover{border-color:var(--cyan);}
#topbar .iconbtn.active{border-color:var(--gold); background:rgba(255,211,77,.08);}

/* dropdown menu — a FIXED body-level layer. It used to live inside #topbar (position:absolute),
   which trapped it in the topbar's z-index stacking context (every body-level overlay painted
   over it), and its max-height math ignored the safe-area inset so the last item ("Request
   deposit") was cut off on notched phones. Now it anchors below the live --topbar-h and caps to
   the real remaining space. */
.topmenu{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + var(--topbar-h) + 6px);
  right:calc(12px + env(safe-area-inset-right, 0px));
  z-index:var(--z-menu);
  min-width:220px; padding:6px; border-radius:14px;
  background:var(--panel); border:1px solid var(--stroke); backdrop-filter:blur(10px);
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  /* vh fallback FIRST: some mobile browsers lack dvh and an invalid calc() drops the whole
     declaration (which was the original "menu runs off screen" bug). */
  max-height:calc(100vh - env(safe-area-inset-top, 0px) - var(--topbar-h) - 18px);
  max-height:calc(100dvh - env(safe-area-inset-top, 0px) - var(--topbar-h) - 18px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.topmenu[hidden]{display:none;}
/* Short viewport (landscape phone): tighten the rows so more fit before scrolling.
   (--topbar-h flips to the compact height automatically, so no max-height override needed.) */
@media (max-height: 500px){
  .topmenu-item{ padding:8px 12px; font-size:13px; }
}
.topmenu-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--ink); font-size:14px; font-weight:600;
  padding:11px 12px; border-radius:9px; cursor:pointer;
}
.topmenu-item:hover{background:rgba(56,230,255,.10);}
.topmenu-item.danger{color:var(--red);}
.topmenu-item.danger:hover{background:rgba(255,90,110,.10);}
.topmenu-item .mi-ico{width:20px; text-align:center; font-size:15px;}
.topmenu-sep{height:1px; background:var(--stroke); margin:4px 6px;}

/* Screen container fills remaining height */
#screen{position:relative; flex:1 1 auto; min-height:0; overflow:hidden;}

/* Centered forms (login) */
.center-wrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto;}
.card{
  background:var(--surface); border:1px solid var(--edge); border-radius:20px;
  padding:26px 22px; width:100%; max-width:380px; backdrop-filter:blur(10px);
  box-shadow:var(--card-shadow);
}
.card h1{margin:0 0 4px; font-size:24px; text-align:center;}
.card h1 span{color:var(--gold);}
.card .sub{color:var(--dim); font-size:13px; margin-bottom:18px; text-align:center;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:5px;}
.field input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:var(--ink); font-size:16px;
}
.field input:focus{outline:none; border-color:var(--cyan);}
.field-note{display:block; margin-top:5px; font-size:11.5px; color:var(--dim); text-transform:none; letter-spacing:0;}
.err-msg{color:var(--red); font-size:13px; min-height:18px; margin:2px 0 8px;}
/* Fine-print footer under an auth card (e.g. the login disclaimer). NOTE: this used to be
   `.switch`, but that class was later taken over by the toggle-pill component (see ~line 520),
   whose 50px fixed width crushed this text into a sliver — hence its own name now. */
.fineprint{text-align:center; margin-top:14px; font-size:13px; color:var(--dim); line-height:1.5;}
.fineprint a{color:var(--cyan); cursor:pointer; text-decoration:underline dotted;}
.divider{display:flex; align-items:center; gap:10px; color:var(--dim); font-size:12px; margin:16px 0;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--stroke);}

/* Lobby */
.lobby{position:absolute; inset:0; overflow:auto; padding:0 0 40px;}
.lobby-inner{max-width:1040px; margin:0 auto; padding:0 20px;}
/* hero: underwater gradient band with drifting shimmer */
.lobby-hero{position:relative; overflow:hidden; padding:34px 20px 30px; margin-bottom:6px;
  background:linear-gradient(180deg, #0b5d86 0%, #07425f 55%, transparent 100%);}
.lobby-hero::before{content:''; position:absolute; inset:-40% -20%;
  background:radial-gradient(ellipse 30% 45% at 20% 30%, rgba(120,235,255,.16), transparent 60%),
             radial-gradient(ellipse 26% 40% at 70% 20%, rgba(255,211,77,.10), transparent 60%),
             radial-gradient(ellipse 30% 45% at 90% 60%, rgba(197,139,255,.12), transparent 60%);
  animation:heroDrift 14s ease-in-out infinite alternate; pointer-events:none;}
@keyframes heroDrift{from{transform:translateX(-3%) translateY(-2%)}to{transform:translateX(3%) translateY(2%)}}
.lobby-hero h2{position:relative; margin:0 auto; max-width:1000px; font-size:clamp(24px,3.4vw,34px); letter-spacing:.01em; text-align:center;}
.lobby-hero .tag{position:relative; margin:6px auto 0; max-width:1000px; color:#bfe4f5; font-size:14px; text-align:center;}
.lobby .bonus-bar{max-width:1000px; margin:18px auto 30px;}

/* ---- live lobby strip: shared jackpots + cross-account recent wins ---- */
.live-strip{max-width:1000px; margin:18px auto 22px; display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:820px){ .live-strip{grid-template-columns:1.35fr 1fr;} }
.jp-banner{position:relative; overflow:hidden; border-radius:18px; padding:16px 18px 18px;
  display:flex; flex-direction:column;                 /* so the pods can grow to fill a stretched banner */
  background:linear-gradient(160deg, rgba(255,211,77,.10), rgba(10,36,51,.5) 60%);
  border:1px solid rgba(255,211,77,.28); box-shadow:inset 0 0 40px rgba(255,211,77,.06);}
.jp-banner::before{content:''; position:absolute; inset:-50%; pointer-events:none;
  background:radial-gradient(ellipse 40% 60% at 50% 0%, rgba(255,211,77,.14), transparent 60%);
  animation:heroDrift 9s ease-in-out infinite alternate;}
.jp-head{position:relative; font:800 12px system-ui; letter-spacing:.08em; text-transform:uppercase; color:#ffe9a8; margin-bottom:14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;}
.jp-head-main{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
.jp-head small{font:600 11px system-ui; letter-spacing:.02em; text-transform:none; color:var(--dim);}
/* LIVE pill: GREEN on the production server, RED on the test server — driven by data-mode on <html>
   (set in main.js from /healthz), so you can tell at a glance which backend the lobby is talking to. */
.jp-live{display:inline-flex; align-items:center; gap:6px; color:#41f0a0; font-weight:900;}
.jp-live i{width:8px; height:8px; border-radius:50%; background:#41f0a0; box-shadow:0 0 8px #41f0a0; animation:jpPulse 1.4s ease-in-out infinite;}
:root[data-mode="test"] .jp-live{color:#ff6b8f;}
:root[data-mode="test"] .jp-live i{background:#ff5a7e; box-shadow:0 0 8px #ff5a7e;}
@keyframes jpPulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.4; transform:scale(.7);}}
.jp-pods{position:relative; display:flex; gap:10px; align-items:stretch;}
.jp-pod{flex:1 1 0; min-width:0; overflow:hidden; text-align:center; border-radius:13px; padding:11px 6px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.12)); border:1.5px solid;}
.jp-pod.minor{border-color:#43b6ff; box-shadow:0 0 14px rgba(67,182,255,.18);}
.jp-pod.major{border-color:#ff4fd8; box-shadow:0 0 14px rgba(255,79,216,.18);}
.jp-pod.grand{border-color:#ffd34d; box-shadow:0 0 20px rgba(255,211,77,.3); transform:scale(1.06);}
.jp-lbl{display:block; font:800 10px system-ui; letter-spacing:.12em; margin-bottom:3px;}
.jp-pod.minor .jp-lbl{color:#8fd2ff;} .jp-pod.major .jp-lbl{color:#ff9bec;} .jp-pod.grand .jp-lbl{color:#ffe08a;}
.jp-val{display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; max-width:100%; min-width:0;}
.jp-val .coin{flex:none;}
.jp-val b{font:900 clamp(12px,2.6vw,20px)/1 system-ui; color:#fff; min-width:0; white-space:nowrap;}
.jp-pod.grand .jp-val b{color:#fff2c4;}
/* Narrow phones: the grand pool routinely shows 6–7 digit numbers (seed 100k, climbing), so shrink the
   in-pod coin + tighten spacing to keep the amount inside its pod instead of spilling out. */
@media (max-width:560px){
  .jp-pods{gap:7px;}
  .jp-pod{padding:10px 4px 11px;}
  .jp-val{gap:3px;}
  .jp-val .coin{width:13px !important; height:13px !important;}   /* override coinMarkup's inline 18px */
}
/* Desktop (≥820px) 2-column layout stretches the banner to the taller wins panel. CENTER the pods in
   that height at their natural size (don't stretch them into tall boxes), and enlarge the label / coin /
   digits. Scoped to ≥820px so mobile + the 560–820px single column are untouched. The digit clamp stays
   bounded so a 6-digit grand can't overflow the pod. */
@media (min-width:820px){
  .jp-head{font-size:16px; margin-bottom:18px;}                   /* larger, centered title + subtitle */
  .jp-head small{font-size:13.5px;}
  .jp-pods{flex:1 1 auto; align-items:center;}                    /* fill the height but keep pods compact + centered */
  .jp-pod{padding:26px 10px 28px;}
  .jp-lbl{font-size:13px; letter-spacing:.14em; margin-bottom:9px;}
  .jp-val{gap:9px;}
  .jp-val .coin{width:22px !important; height:22px !important;}   /* override coinMarkup's inline 18px */
  .jp-val b{font-size:clamp(17px, 1.9vw, 23px);}
}

.wins-panel{border-radius:18px; padding:14px 16px; background:var(--panel); border:1px solid var(--stroke); display:flex; flex-direction:column; min-height:0;}
.wins-head{font:800 13px system-ui; color:var(--ink); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.wins-stats{font:600 11px system-ui; color:var(--dim); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.wins-stats b{color:#ffd98a; font-weight:800; display:inline-flex; align-items:center; gap:3px;}
.wins-stats .dot{color:var(--faint); margin:0 2px;}
.wins-stats .coin{width:13px; height:13px;}
.wins-feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto;}
.wins-empty{color:var(--faint); font-size:12.5px; padding:8px 2px;}
.win-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); font-size:12.5px;}
.win-row .win-who{font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.win-row .win-game{color:var(--dim); font-size:11px; white-space:nowrap;}
.win-row .win-amt{display:inline-flex; align-items:center; gap:4px; font-weight:800; color:var(--green);}
.win-row .win-amt .coin{width:15px; height:15px;}
.win-row .win-ago{color:var(--faint); font-size:10.5px; white-space:nowrap; text-align:right; min-width:52px;}
.win-row.fresh{animation:winFlash 1.1s ease;}
@keyframes winFlash{0%{background:rgba(65,240,160,.22); border-color:rgba(65,240,160,.5);}100%{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.05);}}
@media (prefers-reduced-motion: reduce){.jp-live i,.jp-banner::before{animation:none;} .win-row.fresh{animation:none;}}

.game-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:1000px; margin:0 auto;}
@media (min-width:700px){ .game-grid{grid-template-columns:repeat(3,1fr);} }
/* Lobby category groups (Arcade · Casino · Card Games). */
.game-section{max-width:1000px; margin:0 auto;}
.game-section .game-grid{margin:0;}
.game-cat{margin:26px 0 14px; padding:0 4px; font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px;}
.game-cat::before{content:''; flex:0 0 auto; width:4px; height:15px; border-radius:2px; background:var(--gold);
  box-shadow:0 0 10px color-mix(in srgb, var(--gold) 60%, transparent);}
.game-cat::after{content:''; flex:1 1 auto; height:1px; margin-left:4px;
  background:linear-gradient(90deg, var(--stroke), transparent);}
.game-card{
  position:relative; border-radius:20px; padding:22px 18px 18px; min-height:196px; cursor:pointer;
  /* min-width:0 — iOS Safari gives grid items min-width:auto (min-content), so a wide child expands
     the 1fr track and text spills off the card. Letting it shrink + wrapping words keeps text inside. */
  min-width:0;
  border:1.5px solid var(--stroke); overflow:hidden;
  /* Centered vertical stack: icon (top) → name → description, PLAY anchored at the bottom. */
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%),
    linear-gradient(160deg, var(--bg2), var(--bg0));
  transition:transform .16s ease, border-color .16s, box-shadow .16s;
}
.game-card::after{content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%);
  transform:translateX(-100%); transition:transform .5s ease; pointer-events:none;}
.game-card:hover{transform:translateY(-5px); border-color:var(--accent);
  box-shadow:0 10px 34px rgba(0,0,0,.45), 0 0 24px color-mix(in srgb, var(--accent) 38%, transparent);}
.game-card:hover::after{transform:translateX(100%);}
.game-card:active{transform:scale(.98);}
.game-card .emoji{font-size:50px; line-height:1; margin:2px 0 12px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); transition:transform .18s ease;}
.game-card:hover .emoji{transform:scale(1.12) rotate(-6deg);}
.game-card .name{font-weight:900; font-size:20px; letter-spacing:.01em; overflow-wrap:break-word; min-width:0; width:100%;}
.game-card .desc{color:var(--dim); font-size:13px; margin-top:5px; line-height:1.45; overflow-wrap:break-word; min-width:0; width:100%;}
.game-card .play{margin-top:auto; align-self:center; font:800 11px system-ui; letter-spacing:.1em;
  color:var(--accent); border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius:999px; padding:6px 14px; opacity:.85; transition:all .16s;}
.game-card:hover .play{background:var(--accent); color:#04202e; opacity:1; box-shadow:0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);}
.game-card .badge{position:absolute; top:14px; left:16px; font:900 9.5px system-ui; letter-spacing:.12em;
  padding:4px 9px; border-radius:999px; color:#2a1400;
  background:linear-gradient(180deg,#fff2b0,#ffd34d); box-shadow:0 0 10px rgba(255,211,77,.5);}
.game-card .badge.new{color:#04202e; background:linear-gradient(180deg,#b8fbe0,#41f0a0); box-shadow:0 0 10px rgba(65,240,160,.5);}
/* Locked by an active house loan: dimmed + not clickable (click shows a toast). */
.game-card.locked{opacity:.5; filter:grayscale(.5); cursor:not-allowed;}
.game-card.locked .play{color:#ffb3bd;}
.game-card.locked:hover{transform:none;}
.game-card.locked:hover .play{background:none; color:#ffb3bd; box-shadow:none;}

/* Range sliders — remove the native track inset so the thumb travels flush edge-to-edge (fixes the
   small gap at each end) and give a consistent themed look across the loan + poker sliders. */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:22px; margin:0; padding:0; background:transparent; cursor:pointer;}
input[type=range]:focus{outline:none;}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:99px; background:rgba(255,255,255,.16);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#eaf6ff; border:2px solid var(--gold,#ffd34d); box-shadow:0 1px 5px rgba(0,0,0,.55);}
input[type=range]::-moz-range-track{height:6px; border-radius:99px; background:rgba(255,255,255,.16);}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#eaf6ff; border:2px solid var(--gold,#ffd34d); box-shadow:0 1px 5px rgba(0,0,0,.55);}
input[type=range]::-moz-range-progress{height:6px; border-radius:99px; background:var(--gold,#ffd34d);}
.lobby .foot{max-width:1000px; margin:30px auto 0; color:var(--dim); font-size:11.5px; text-align:center; line-height:1.9;}

/* History */
.history{position:absolute; inset:0; display:flex; flex-direction:column;}
.hist-head{display:flex; align-items:center; gap:12px; padding:14px 16px 8px;}
.hist-head h2{margin:0; font-size:20px;}
.hist-list{flex:1; overflow:auto; padding:6px 12px calc(16px + env(safe-area-inset-bottom)); max-width:640px; width:100%; margin:0 auto;}
.hist-empty{color:var(--dim); text-align:center; padding:40px 12px; font-size:14px;}
.hist-row{
  display:grid; grid-template-columns:1fr auto auto; grid-template-areas:"g when amt" "g when bal";
  gap:0 14px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--stroke);
}
.hist-g{grid-area:g; font-weight:700; font-size:14px; display:flex; flex-direction:column;}
.hist-k{color:var(--dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;}
.hist-when{grid-area:when; color:var(--dim); font-size:12px; text-align:right; white-space:nowrap;}
.hist-amt{grid-area:amt; font-weight:800; font-size:16px; text-align:right;}
.hist-amt.up{color:var(--green);} .hist-amt.down{color:var(--red);}
.hist-bal{grid-area:bal; color:var(--dim); font-size:11px; text-align:right;}

/* History — modern grouped list (#/history) */
/* Higher specificity than `.admin-body` (which is defined later + becomes a 2-col grid ≥760px) so
   the history stays a centred single column instead of splitting the summary and list into columns. */
.admin-body.hist-body{display:flex; flex-direction:column; gap:14px; max-width:640px; margin:0 auto; width:100%;}
.hist-summary{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.hist-stat{background:var(--surface); border:1px solid var(--edge); border-radius:14px; padding:11px 12px; box-shadow:var(--card-shadow);}
.hist-stat label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin-bottom:4px;}
.hist-stat b{font-size:15px; font-weight:800; display:flex; align-items:center; gap:4px;}
.hist-stat b.up{color:var(--green);} .hist-stat b.down{color:var(--red);}
/* The list scrolls WITHIN its own card (capped height) so the page/summary stay put instead of
   scrolling the whole screen. Day headers stay sticky at the top of this scroll area. */
.hist-list2{display:flex; flex-direction:column; border:1px solid var(--edge); border-radius:16px;
  overflow-y:auto; background:var(--surface); box-shadow:var(--card-shadow);
  max-height:calc(100vh - 300px); min-height:220px;}
.hist-day{position:sticky; top:0; z-index:1; padding:9px 16px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); background:linear-gradient(180deg, rgba(6,32,50,.96), rgba(4,22,36,.92)); border-bottom:1px solid rgba(120,205,255,.1); backdrop-filter:blur(4px);}
.hist-row2{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.05);}
.hist-row2:last-child{border-bottom:none;}
.hist-ava{flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px;
  background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow:0 0 14px -4px var(--c);}
.hist-main{flex:1 1 auto; min-width:0;}
.hist-title{font-weight:700; font-size:14px;}
.hist-sub{font-size:11.5px; color:var(--dim); margin-top:2px; text-transform:capitalize;}
.hist-right{text-align:right; flex:0 0 auto;}
.hist-pill{font-weight:800; font-size:15px; display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px;}
.hist-pill.up{color:#8ff0bd; background:rgba(84,224,138,.12);}
.hist-pill.down{color:#ff9aa8; background:rgba(255,90,110,.1);}
.hist-run{font-size:11px; color:var(--dim); margin-top:3px; display:flex; align-items:center; gap:3px; justify-content:flex-end;}

/* Admin console */
.admin-screen{position:absolute; inset:0; display:flex; flex-direction:column; overflow:auto;}
.admin-head{
  display:flex; align-items:center; gap:20px;
  padding:20px 24px 16px; max-width:1200px; width:100%; margin:0 auto;
}
.admin-title h1{margin:0; font-size:24px; line-height:1.15;}
.admin-sub{color:var(--dim); font-size:13px; margin-top:2px;}
.btn.ghost{background:transparent; padding:9px 14px;}

.admin-body{
  flex:1 0 auto; display:grid; grid-template-columns:1fr; gap:20px;
  padding:0 24px calc(28px + env(safe-area-inset-bottom)); max-width:1200px; width:100%; margin:0 auto;
}
/* Cards inside a shell body fill their column. The 380px cap on `.card` is only meant for the
   centred login form (under `.center-wrap`); here it just crushed every panel into a narrow strip
   and left the desktop half-empty. */
.admin-body .card{max-width:none;}
/* Grid items default to min-width:auto, so a wide child (the 640px-min accounts table, the per-game
   house-bank table) stretches its track and drags the WHOLE dashboard — bank cards and all — past the
   phone viewport, forcing left/right scroll. Let items shrink to their track; wide tables then scroll
   inside their own .ab-scroll / .hb-scroll instead of blowing out the page. */
.admin-body > *{min-width:0;}
/* The sidebar + main 2-column split is OPT-IN (Accounts, Profile) via `.split` — it used to be
   forced on EVERY `.admin-body`, squeezing single-content pages (forms, lists, card grids) into a
   320px column with a sea of empty space beside them. */
@media (min-width:820px){ .admin-body.split{grid-template-columns:340px 1fr; align-items:start;} }

/* Accounts & House — dashboard. Full-width at the top (KPI strip → health alerts → House bank), then a
   TWO-COLUMN split so the lower half reads side-by-side instead of one long scroll: a wide MAIN column
   (the big Accounts + Ledger tables) beside a narrower RAIL (pending requests + the monitoring logs).
   Everything collapses to a single stacked column on narrow screens / mobile. */
.admin-body.acct-dash{display:flex; flex-direction:column; gap:16px;}
@media (min-width:1000px){
  .acct-screen .admin-head, .admin-body.acct-dash{max-width:1560px;}
}
/* Use the wide desktop: a roomier cap so the split has real room for both the tables and the rail,
   instead of centering at 1560 with big empty margins on a 2k+ monitor. */
@media (min-width:1700px){
  .acct-screen .admin-head, .admin-body.acct-dash{max-width:min(96vw,2040px);}
}
/* The two-column region (main + rail). Column-stacked by default; side-by-side from 1180px up. */
.acct-cols{display:flex; flex-direction:column; gap:16px;}
.acct-main, .acct-rail{display:flex; flex-direction:column; gap:16px; min-width:0;}
.acct-main > .card, .acct-rail > .card{min-width:0;}
@media (min-width:1180px){
  .acct-cols{flex-direction:row; align-items:flex-start;}
  .acct-main{flex:1 1 0; min-width:0;}                       /* wide — holds the big tables */
  .acct-rail{flex:0 0 clamp(360px, 32%, 720px); min-width:0;}/* narrower fixed rail */
}
/* The rail's log tables can be wide (long DETAIL text); let them scroll inside their card rather than
   force the whole layout wider. */
.acct-rail #auditLog, .acct-rail #journalLog, .acct-rail #colSignals{overflow-x:auto;}
/* House-bank deep analytics (income statement, monthly close, reconciliation, hold-by-game +
   top-contributors, write-offs) go two-up on a wide screen to cut the bank's height; 1 col on mobile. */
.bank-analytics{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:1280px){ .bank-analytics{grid-template-columns:1fr 1fr; align-items:start;} }
.acct-new-btn{margin-left:auto;}
/* KPI strip */
.acct-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.acct-kpi{padding:14px 16px; border:1px solid var(--stroke); border-radius:14px; background:rgba(2,18,31,.4); min-width:0;}
.acct-kpi label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#8fb0c4); margin-bottom:6px;}
.acct-kpi .kpi-v{display:flex; align-items:baseline; gap:5px; font-weight:800; font-size:20px; flex-wrap:wrap;}
.acct-kpi .kpi-sub{font-size:10.5px; color:var(--dim); margin-top:3px;}
.acct-kpi.good .kpi-v{color:#41f0a0;}
.acct-kpi.bad{border-color:rgba(255,90,110,.4); background:rgba(255,70,90,.08);}
.acct-kpi.bad .kpi-v{color:#ff8a98;}
/* Critical/warning alert bar (reuses .acct-alert colours) */
.acct-alertbar{display:flex; flex-direction:column; gap:6px;}
.acct-alertbar:empty{display:none;}
/* Accounts table: search + manage column */
.ab-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ab-search{padding:7px 11px; border-radius:9px; border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--ink); font-size:13px; min-width:150px;}
.ab-search:focus{outline:none; border-color:var(--cyan);}
.ab-table td.ab-manage{text-align:right; white-space:nowrap;}
.btn.xs{padding:4px 10px; font-size:11px; min-height:26px;}
.admin-requests .admin-list-head.req-co{margin-top:16px; padding-top:14px; border-top:1px solid var(--stroke);}
.modal.create-modal{max-width:440px;}
.acct-style-toggle{margin-left:auto;}
/* Reversible CHART VIEW — restyle the house card-grids (bank + reserves + earmarks) into one connected
   themed chart. Card view is the default; toggled from the header, persisted per-browser. */
.chart-style .bank-grid, .chart-style .reserve-grid{
  gap:0; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(11,26,40,.94), rgba(4,13,21,.96));
  border:1px solid rgba(255,211,77,.38); box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 20px -12px rgba(255,211,77,.4);}
.chart-style .bank-cell, .chart-style .rsv-cell{
  background:none; border:none; border-left:1px solid rgba(255,255,255,.08); border-radius:0; box-shadow:none;}
.chart-style .bank-grid > :first-child, .chart-style .reserve-grid > :first-child{border-left:none;}

/* Focused single-column pages: cap width and keep the header aligned with the content column. */
.cashout-screen .admin-head, .cashout-screen .admin-body{max-width:560px;}
.leaderboard-screen .admin-head, .leaderboard-screen .admin-body{max-width:760px;}
.tournaments-screen .admin-head, .tournaments-screen .admin-body{max-width:1180px;}
.admin-new{padding:22px;}
.admin-new h3{margin:0 0 16px; font-size:16px;}
.admin-check{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); margin:6px 0 14px; cursor:pointer;}
.admin-check input{width:18px; height:18px; accent-color:var(--cyan);}

.admin-list-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;}
.admin-list-head h3{margin:0; font-size:16px;}
/* Inside the House-bank card the Deposit/Cash-out request headers follow body text with no gap and
   read as scrunched. Give each a clear top divider + breathing room so the sections are distinct. */
.admin-bank .admin-list-head{margin-top:22px; padding-top:16px; border-top:1px solid var(--stroke);}
.admin-count{color:var(--dim); font-size:12px;}
.admin-empty{color:var(--dim); padding:28px 4px; text-align:center; font-size:14px;}
.user-list{border:1px solid var(--edge); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--card-shadow);}

.user-row{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"av main bal" "av acts acts";
  gap:6px 14px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--stroke);
}
.user-row:last-child{border-bottom:none;}
.av{
  grid-area:av; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#04121e; background:linear-gradient(150deg,#7fd6ff,#3a9ec2);
}
.av.admin{background:linear-gradient(150deg,#ffe488,#e0952a);}
.av.guest{background:linear-gradient(150deg,#9fb4c4,#5c7488);}
.u-main{grid-area:main; min-width:0;}
.u-name{font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; word-break:break-word;}
.u-handle{color:var(--dim); font-size:11px; margin-top:2px;}
.u-bal{grid-area:bal; font-weight:800; color:var(--gold); font-size:16px; white-space:nowrap;}
.u-acts{grid-area:acts; display:flex; gap:8px; margin-top:4px;}
@media (min-width:760px){
  .user-row{grid-template-columns:auto 1fr auto auto; grid-template-areas:"av main bal acts"; gap:0 16px;}
  .u-acts{margin-top:0;}
}
.role{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); border:1px solid var(--stroke); border-radius:6px; padding:2px 7px; font-weight:700;}
.role.admin{color:var(--gold); border-color:rgba(255,211,77,.5);}
.role.guest{color:var(--dim);}
.btn.sm{padding:7px 12px; font-size:12px; min-height:34px;}

/* Manage account panel (modal) */
.modal.manage{max-width:460px;}
/* Desktop: lay the manage panel out as a wide dashboard (stats · money records · admin controls)
   instead of one tall ribbon, so the width is used and the height stays in view. Mobile keeps the
   single-column stack — the .mg-grid/.mg-col wrappers are inert (plain blocks) until the first
   breakpoint turns them into a grid: 2 columns on tablets/small laptops, 3 on a real desktop. */
@media (min-width:760px){
  .modal.manage{max-width:min(1500px,97vw); width:min(1500px,97vw);}
  .mg-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start;}
  .mg-col{display:flex; flex-direction:column; gap:14px; min-width:0;}
  .mg-col .mg-sec, .mg-col .mg-bal, .mg-col .mg-headline{margin:0;}
  /* Each admin control gets its own themed card so the controls read as grouped categories in a column. */
  .mg-col-admin .mg-sec{background:rgba(2,18,31,.4); border:1px solid var(--stroke); border-radius:12px; padding:12px 13px;}
  /* Wide tables (money statement, records) never force the modal to scroll sideways. */
  .mg-stats, .mg-records{overflow-x:auto;}
}
/* Real desktop: three columns — stats | money records | controls. stats+records get the extra width;
   the controls rail is a touch narrower. */
@media (min-width:1160px){
  .mg-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,0.86fr);}
}
.co-creepage{color:#ffcf9a;}
.mg-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.mg-id{min-width:0;}
.mg-head h2{margin:0; font-size:18px; word-break:break-word;}
.mg-sub{color:var(--dim); font-size:12px; margin-top:2px;}
.mg-bal{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dim);
  padding:12px 14px; border:1px solid var(--stroke); border-radius:12px; margin-bottom:16px;}
.mg-bal #mgBal{margin-left:auto; color:var(--gold); font-weight:800; font-size:18px; display:inline-flex; align-items:center; gap:5px;}
.mg-sec{margin-bottom:14px;}
.mg-sec > label{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:7px;}
.mg-row{display:flex; gap:8px; flex-wrap:wrap;}
.mg-row input{flex:1 1 120px; min-width:110px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--ink); font-size:15px;}
.mg-row input:focus{outline:none; border-color:var(--cyan);}
.mg-row .btn{min-height:40px; padding:9px 13px; font-size:13px;}
.mg-row select{flex:1 1 120px; min-width:110px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--ink); font-size:15px;}
.mg-row select:focus{outline:none; border-color:var(--cyan);}
.mg-foot{display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--stroke); flex-wrap:wrap;}
.btn.warn{border-color:rgba(255,180,90,.5); color:#ffcf9a;}
.role.locked{color:#ff8a98; border-color:rgba(255,90,110,.5);}
/* Type-to-confirm destructive modal (delete admin). */
.modal.tconfirm{max-width:440px; border-color:rgba(255,90,110,.4);}
.tc-title{margin:0 0 12px; font-size:18px; color:#ff8a98;}
.tc-warn{font-size:14px; line-height:1.5; color:var(--ink-soft,#c7d2dd); background:rgba(255,90,110,.08); border:1px solid rgba(255,90,110,.28); border-radius:12px; padding:12px 14px;}
.tc-warn p{margin:0 0 9px;} .tc-warn p:last-child{margin-bottom:0;}
.tc-warn code{background:rgba(255,255,255,.08); padding:1px 5px; border-radius:5px; font-size:12.5px;}
.tc-label{display:block; margin:16px 0 6px; font-size:13px;}
.tc-input{width:100%; box-sizing:border-box; padding:11px 12px; border-radius:10px; border:1px solid var(--stroke); background:rgba(0,0,0,.25); color:var(--ink,#eaf2f8); font-size:15px; letter-spacing:.05em;}
.tc-input:focus{outline:none; border-color:rgba(255,90,110,.6);}
.tc-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.btn.danger[disabled]{opacity:.45; cursor:not-allowed;}
/* Net-position headline in the Manage panel. */
.mg-headline{display:flex; flex-direction:column; gap:2px; margin:-6px 0 16px; padding:11px 14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--stroke);}
.mg-headline:empty{display:none;}
.mgh-net{font-size:16px; font-weight:800; display:inline-flex; align-items:center; gap:6px;}
.mgh-net.up{color:#41f0a0;} .mgh-net.down{color:#ff8a98;}
.mgh-sub{font-size:11.5px; color:var(--dim);}
/* Adjustment memo input + record display; record actions + toolbar. */
.mg-memo{width:100%; margin-top:8px; padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--ink); font-size:13px;}
.mg-memo:focus{outline:none; border-color:var(--cyan);}
/* Manage → active-loan callout: bordered box with the write-off action in its header (not crammed
   beside the amounts, which looked out of place). */
.mg-loan-sec{border:1px solid color-mix(in srgb, #ff5a6e 34%, var(--stroke)); background:color-mix(in srgb, #ff5a6e 7%, transparent); border-radius:12px; padding:11px 13px;}
.mg-loan-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.mg-loan-head label{margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);}
.mg-loan-head .btn{flex:0 0 auto;}
.mg-loan-acts{display:flex; gap:8px; flex:0 0 auto;}
.mg-loan-info{font-size:14px; color:var(--ink); line-height:1.5;}
.mg-loan-note{margin-top:8px;}
.rec-memo{font-size:11.5px; color:#cfe0ee; font-style:italic; margin-top:3px;}
.rec-acts{display:flex; gap:6px; flex:none;}
.rec-toolbar{display:flex; justify-content:flex-end; margin-bottom:2px;}

/* --- virtual-dollar (vUSD) display + cash-out ---------------------------------------- */
.vusd{font-size:12px; color:var(--muted, #8fb0c4); font-weight:600; white-space:nowrap;}
#balVusd{display:block; font-size:10px; line-height:1; margin-top:1px; text-align:right;}
.legal-note{font-size:12px; color:var(--muted, #8fb0c4); line-height:1.45; margin:12px 0 0;}
.admin-bank{padding:22px; grid-column:1 / -1;}
.admin-bank h3{margin:0 0 14px; font-size:16px;}
.bank-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.bank-cell label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted, #8fb0c4); margin-bottom:4px;}
/* Amount + vUSD share a row but WRAP: on a narrow cell the "≈ v$…" drops to its own line under
   the number instead of overflowing the cell (which clipped the v$ figure). */
.bank-cell div{display:flex; align-items:baseline; gap:4px 6px; font-weight:800; font-size:15px; flex-wrap:wrap; min-width:0;}
.bank-cell .amt{font-variant-numeric:tabular-nums;}
.bank-cell .vusd{flex:1 0 100%; font-size:11.5px; font-weight:600;}
/* Emphasise the two headline figures: the total take and the rake physically banked. */
.bank-cell{padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--stroke); min-width:0; overflow:hidden;}
.bank-cell.hero{background:linear-gradient(180deg, rgba(255,211,77,.12), rgba(255,211,77,.03)); border-color:rgba(255,211,77,.35);}

/* House-loan screen (#/loans) */
.ln-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:4px 0 12px;}
.ln-cell{padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--stroke); min-width:0;}
.ln-cell label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#8fb0c4); margin-bottom:4px;}
.ln-cell div{display:flex; align-items:baseline; gap:4px 6px; font-weight:800; font-size:15px; flex-wrap:wrap; min-width:0;}
.ln-cell.locked{background:linear-gradient(180deg, rgba(255,211,77,.12), rgba(255,211,77,.03)); border-color:rgba(255,211,77,.35);}
.ln-cell.locked div{color:var(--gold);}
.ln-sub{font-size:11px; font-weight:600; color:var(--dim);}
.ln-amt{display:flex; align-items:baseline; justify-content:center; gap:6px; font-size:20px; margin-top:6px;}
.ln-preview{background:rgba(56,230,255,.06); border:1px solid var(--stroke); border-radius:12px; padding:10px 12px; font-size:13px; line-height:1.5; color:var(--ink); margin:8px 0;}
.ln-terms{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--dim); margin:10px 0; cursor:pointer;}
.ln-terms input{margin-top:2px; flex:0 0 auto;}
.ln-explain{font-size:13.5px; color:var(--dim); line-height:1.5;}
.ln-list{margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:7px; color:var(--dim); font-size:13.5px; line-height:1.5;}
/* House-loan "how it works" breakdown: clear sub-sections + the give-back tier table */
.ln-how h4{margin:20px 0 6px; font-size:14px; font-weight:700; color:var(--text, #eaf6ff); letter-spacing:.2px;}
.ln-how h4:first-of-type{margin-top:6px;}
.ln-how .ln-explain{margin:6px 0 0;}
.ln-how b{color:var(--text, #eaf6ff);}
.ln-tiers{margin-top:8px; padding-left:0; gap:0; border:1px solid var(--line, rgba(127,225,255,.14)); border-radius:10px; overflow:hidden;}
.ln-tiers li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; flex-wrap:wrap;}
.ln-tiers li:nth-child(odd){background:rgba(127,225,255,.04);}
.ln-tier-band{display:inline-flex; align-items:center; gap:3px;}
.ln-pct{font-weight:800; color:var(--gold, #ffcf3d); white-space:nowrap;}
.bank-cell.rake{background:linear-gradient(180deg, rgba(65,240,160,.12), rgba(65,240,160,.03)); border-color:rgba(65,240,160,.30);}
.bank-cell.hero div, .bank-cell.rake div{font-size:17px;}

/* House liquidity / reserve panel — FREE vs RESERVED "on hand" view. */
.reserve{margin-top:16px; border:1px solid var(--stroke); border-radius:14px; padding:14px 16px;
  background:linear-gradient(180deg, rgba(65,240,160,.06), rgba(65,240,160,.02));}
.reserve.warn{border-color:rgba(255,140,90,.5); background:linear-gradient(180deg, rgba(255,140,90,.1), rgba(255,90,90,.04));}
.reserve-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.rsv-title{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--gold,#ffd34d);}
.rsv-health{font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px;}
.rsv-health.ok{color:#41f0a0; background:rgba(65,240,160,.14);}
.rsv-health.bad{color:#ff9a6a; background:rgba(255,140,90,.16);}
.reserve-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.rsv-cell{padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--stroke); min-width:0;}
.rsv-cell.free{background:linear-gradient(180deg, rgba(65,240,160,.14), rgba(65,240,160,.03)); border-color:rgba(65,240,160,.32);}
.rsv-cell label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#8fb0c4); margin-bottom:4px;}
.rsv-cell > div{display:flex; align-items:baseline; gap:4px 6px; font-weight:800; font-size:15px; flex-wrap:wrap;}
.rsv-cell.free > div{font-size:17px;}
.rsv-sub{font-size:10.5px; color:var(--dim); font-weight:600; margin-top:4px;}
/* Jackpot pools stacked (Grand/Major/Minor), each a labelled row with the value aligned right. */
.jp-breakdown{display:flex; flex-direction:column; gap:3px; margin-top:8px;}
.jp-breakdown span{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px;}
.jp-breakdown i{font-style:normal; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); font-weight:700; font-size:9.5px;}
/* Value = coin + number, kept together on the right with a real gap (no bunching against the coin). */
.jp-v{display:inline-flex; align-items:center; gap:5px;}
.jp-v b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;}
.rsv-alert{margin:12px 0 0; font-size:12px; line-height:1.5; color:#ffcbb0;
  background:rgba(255,90,60,.1); border:1px solid rgba(255,120,80,.34); border-radius:10px; padding:9px 12px;}

/* Accounting Tier 3 — health alerts + the house-dividend pipeline. */
.acct-alerts{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.acct-alert{font-size:12px; line-height:1.45; border-radius:10px; padding:9px 12px; border:1px solid var(--stroke); background:rgba(255,255,255,.03);}
.acct-alert.ok{color:#8ff0c0; border-color:rgba(65,240,160,.28); background:rgba(65,240,160,.07);}
.acct-alert.info{color:#a9d8ff; border-color:rgba(120,190,255,.28); background:rgba(120,190,255,.07);}
.acct-alert.warning{color:#ffcf9a; border-color:rgba(255,180,90,.34); background:rgba(255,180,90,.08);}
.acct-alert.critical{color:#ffb3bd; border-color:rgba(255,90,110,.4); background:rgba(255,70,90,.1); font-weight:700;}
/* Health alerts as a responsive GRID of clean cards (replaces the full-width strips) — many alerts
   wrap into columns instead of stacking and pushing the page down. */
.alert-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px;}
.alert-card{border:1px solid var(--stroke); border-left-width:3px; border-radius:12px; padding:11px 13px; background:rgba(255,255,255,.02); min-width:0;}
.alert-card.critical{border-left-color:#ff5a6e; background:rgba(255,70,90,.06);}
.alert-card.warning{border-left-color:#ffb45a; background:rgba(255,180,90,.05);}
.alert-card.info{border-left-color:#78beff; background:rgba(120,190,255,.05);}
.alert-card-head{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.alert-ico{font-size:13px; line-height:1;}
.alert-title{font-weight:800; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.alert-badge{font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; padding:2px 7px; border-radius:20px; white-space:nowrap;}
.alert-badge.critical{background:rgba(255,90,110,.18); color:#ff8a98;}
.alert-badge.warning{background:rgba(255,180,90,.16); color:#ffcf9a;}
.alert-badge.info{background:rgba(120,190,255,.16); color:#a9d8ff;}
.alert-stat{font-size:18px; font-weight:800; margin-bottom:3px; font-variant-numeric:tabular-nums;}
.alert-card.critical .alert-stat{color:#ff8a98;}
.alert-card.warning .alert-stat{color:#ffcf9a;}
.alert-card.info .alert-stat{color:#a9d8ff;}
.alert-detail{font-size:11px; line-height:1.4; color:var(--dim);}
.acct-div-row{display:flex; gap:14px; flex-wrap:wrap; align-items:stretch;}
.acct-div-row .rsv-cell.free{flex:1 1 200px;}
.acct-div-form{flex:1 1 220px; display:flex; flex-direction:column; gap:8px; justify-content:center;}
.acct-divtotal{margin-top:10px;}
.acct-divlog{margin-top:10px;}

/* Reusable "info chart" — a themed strip of labeled stat cells (mirrors the poker room .pk-info),
   used wherever loose stats would otherwise float as plaintext inside a card. */
.statchart{display:inline-flex; align-items:stretch; border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg, rgba(11,26,40,.94), rgba(4,13,21,.96)); border:1px solid rgba(255,211,77,.4);
  box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 20px -12px rgba(255,211,77,.4);}
.statchart-cell{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:6px 13px;
  border-left:1px solid rgba(255,255,255,.08); min-width:0;}
.statchart-cell:first-child{border-left:none;}
.statchart-lbl{font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); white-space:nowrap;}
.statchart-val{font-size:13px; font-weight:800; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
/* Keep its own layout when nested in a card cell whose `> div` rule would otherwise flatten it. */
.rsv-cell > .statchart{display:flex; align-items:stretch; margin-top:9px;}
/* KPI variant: full-width strip, bigger values, health colours. */
.statchart--kpi{display:flex; width:100%; flex-wrap:wrap;}
.statchart--kpi .statchart-cell{flex:1 1 150px; padding:12px 16px; gap:4px;}
.statchart-val.big{font-size:20px; display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;}
.statchart-sub{font-size:10.5px; font-weight:600; color:var(--dim); white-space:nowrap;}
.statchart-cell.bad .statchart-val{color:#ff8a98;}
.statchart-cell.bad .statchart-sub{color:#ffb3bd;}
.statchart-cell.good .statchart-val{color:#41f0a0;}

/* Per-account money statement (Manage panel). */
.stmt{margin:14px 0; border:1px solid var(--edge); border-radius:14px; padding:12px 14px; background:rgba(2,18,31,.4);}
.stmt-head{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold,#ffd34d); margin-bottom:8px;}
.stmt-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.stmt-table td:first-child, .stmt-table th:first-child{text-align:left;}
.stmt .stmt-table th{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); padding:5px 8px; border-bottom:1px solid var(--stroke);}
.stmt .stmt-table td{padding:6px 8px;}
.stmt .stmt-table td:not(:first-child){text-align:right; font-variant-numeric:tabular-nums;}   /* financial: numbers right-aligned */
.stmt-table .stmt-total td{border-top:1px solid var(--edge); font-weight:800; padding-top:8px;}   /* emphasize the Lifetime row */
.stmt-chart{display:flex; width:100%; flex-wrap:wrap; margin-top:14px;}

/* Full-screen account-statement viewer: the standalone statement document hosted in a style-isolated
   iframe (its global CSS can't leak into the console), layered above the manage modal (--z-modal:80). */
.stmt-overlay{position:fixed; inset:0; z-index:88; display:flex; flex-direction:column;
  background:rgba(1,9,16,.92); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);}
.stmt-ov-bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; background:linear-gradient(180deg,var(--bg1),var(--bg0)); border-bottom:1px solid var(--stroke); flex:0 0 auto;}
.stmt-ov-title{font-weight:800; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stmt-ov-actions{display:flex; gap:8px; flex:0 0 auto;}
.stmt-frame{flex:1 1 auto; width:100%; border:0; background:#02101a;}
@media (max-width:640px){ .stmt-overlay .stmt-ov-title{display:none;} .stmt-ov-actions{width:100%; justify-content:space-between;} }

/* Income statement (P&L) — financial columns right-aligned; section + total rows emphasized. */
.pnl-table td:not(:first-child), .pnl-table th:not(:first-child){text-align:right; font-variant-numeric:tabular-nums;}
.pnl-table .pnl-sec td{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold,#ffd34d);
  font-weight:800; padding-top:11px; border-bottom:1px solid var(--stroke); text-align:left;}
.pnl-table .pnl-total td{font-weight:800; border-top:1px solid var(--stroke);}
.pnl-badge{margin-left:8px;}
/* Reconciliation cell: a tie-out that has drifted turns red. */
.rsv-cell.warn{border-color:rgba(255,90,110,.45); background:rgba(255,90,110,.07);}

/* General ledger viewer (raw transactions) + system-event journal. */
.lg-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
.lg-filters .ab-search{flex:1 1 200px; min-width:150px;}
.lg-sel{background:var(--panel); border:1px solid var(--stroke); color:var(--ink); border-radius:8px; padding:6px 9px; font:inherit; font-size:12px;}
.lg-table th, .lg-table td{white-space:nowrap;}
.lg-doc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:var(--gold,#ffd34d); font-weight:700;}
.lg-hash{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; color:var(--dim);}
.lg-memo{max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--dim); font-size:11.5px;}
.lg-pager{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px;}
.lg-page{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;}
.jn-src{display:inline-block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:6px; border:1px solid var(--stroke); color:var(--dim);}
.jn-src.jn-admin{color:#e7dcff; border-color:rgba(183,155,255,.4);}
.jn-src.jn-house{color:var(--gold,#ffd34d); border-color:rgba(255,211,77,.4);}
.jn-src.jn-system{color:var(--cyan,#38e6ff); border-color:rgba(56,230,255,.4);}

/* Pending-request aging chips. */
.req-aging:empty{display:none;}
.req-aging{margin-bottom:10px;}
.aging-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px;}
.aging-lbl{color:var(--dim); font-weight:600;}
.age-chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--stroke); color:var(--dim);}
.age-chip b{color:var(--ink); font-variant-numeric:tabular-nums;}
.age-chip.warn{border-color:rgba(255,90,110,.4); color:#ff8a98;}
.age-chip.warn b{color:#ff8a98;}

/* Itemized money records (Manage panel) — every deposit / cash-out / adjustment with date + status.
   Each group's list scrolls WITHIN its own capped box so a long history never blows out the modal. */
.mg-records{display:flex; flex-direction:column; gap:12px;}
.rec-group{border:1px solid var(--edge); border-radius:12px; background:rgba(2,18,31,.4); overflow:hidden;}
.rec-head{display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold,#ffd34d); border-bottom:1px solid var(--stroke); background:rgba(255,255,255,.02);}
.rec-count{font-size:10px; color:var(--dim); background:rgba(255,255,255,.08); border-radius:999px; padding:1px 8px; font-weight:700;}
.rec-list{max-height:200px; overflow-y:auto;}
.rec-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.05);}
.rec-row:last-child{border-bottom:none;}
.rec-main{min-width:0;}
.rec-main b{font-size:13px; color:var(--ink);}
.rec-sub{font-size:11px; color:var(--dim);}
.rec-when{font-size:11px; color:var(--dim); margin-top:2px; font-variant-numeric:tabular-nums;}
.rec-empty{padding:16px 4px;}
/* The coin sits inline right before the amount here (no flex gap), so add breathing room — a
   negative amount's minus sign was touching the coin. */
.rec-main .coin, .stmt-table .coin{margin-right:4px;}

/* Fair page: the "Verify a round" list scrolls INSIDE its own box (capped height) instead of making
   the whole page scroll. */
#fvRounds{max-height:calc(100vh - 260px); overflow-y:auto;}

/* House-book breakdown: collapsible per-game hold + top contributors. */
.house-breakdown{margin-top:14px; border-top:1px solid var(--stroke); padding-top:8px;}
.house-breakdown > summary{cursor:pointer; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--gold,#ffd34d); text-transform:uppercase; padding:6px 0; list-style:none;}
.house-breakdown > summary::-webkit-details-marker{display:none;}
.house-breakdown > summary::before{content:'▸ '; color:var(--muted,#8fb0c4);}
.house-breakdown[open] > summary::before{content:'▾ ';}
.hb-scroll{max-height:280px; overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:6px;}
.hb-table{width:100%; border-collapse:collapse;}
.hb-scroll .hb-table{min-width:460px;}   /* keep the 5 columns legible on phones; scroll within the card */
/* Sticky header must be OPAQUE or the first data row shows through it as it scrolls under. `--surface`
   is a translucent glass gradient, so use the opaque, theme-aware `--deep2` as the fill (with the
   glass sheen on top) plus a hairline divider. */
.hb-table th{position:sticky; top:0; z-index:2; background-color:var(--deep2,#03192a); background-image:var(--surface-hi);
  box-shadow:inset 0 -1px 0 var(--stroke);}
.hb-table td:first-child{text-align:left; font-weight:600;}
.hold-tag{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:999px; margin-left:4px; background:rgba(255,255,255,.08); color:var(--muted,#8fb0c4); vertical-align:middle;}
.hold-tag.rake{background:rgba(65,240,160,.16); color:#41f0a0;}
.dimc{color:var(--muted,#8fb0c4);}
.co-status{font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.08);}
.co-status.pending{color:#ffd34d;}
.co-status.approved{color:#41f0a0;}
.co-status.denied{color:#ff5a6e;}
/* Cash-out daily-window banner. Empty until load() fills it, so it takes no space when hidden. */
.co-window{font-size:12.5px; line-height:1.45; border-radius:10px; margin:2px 0 12px;}
.co-window:not(:empty){padding:9px 12px; border:1px solid var(--stroke);}
.co-window.open{color:#c6ffe4; background:rgba(65,240,160,.10); border-color:rgba(65,240,160,.32);}
.co-window.closed{color:#ffd9a8; background:rgba(255,180,90,.10); border-color:rgba(255,180,90,.32);}
.co-window b{color:#fff;}

/* --- tiered win celebration overlay (BIG/MEGA/EPIC) ---------------------------------- */
/* pointer-events:none — the celebration never blocks or swallows gameplay clicks
   (fish keeps shooting right through it); it leaves on its own timer. */
/* No backdrop dim — the celebration floats over live gameplay without darkening it. */
.bigwin{position:fixed; inset:0; z-index:var(--z-fx); display:flex; align-items:center; justify-content:center;
  background:none; overflow:hidden;
  animation:bwFade .25s ease-out; pointer-events:none;}
@keyframes bwFade{from{opacity:0}to{opacity:1}}
.bigwin.bw-out{animation:bwOut .3s ease-in forwards;}
@keyframes bwOut{to{opacity:0}}
.bw-inner{text-align:center; animation:bwPop .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes bwPop{from{transform:scale(.4); opacity:0}to{transform:scale(1); opacity:1}}
/* NOTE: use background-image (not the background shorthand) so background-clip:text is never
   reset by a tier override — the shorthand reset painted a solid bar instead of lettering. */
/* Dark outline via drop-shadows keeps the lettering readable over bright water without a dim. */
.bw-title{font-size:clamp(40px,9vw,84px); font-weight:900; letter-spacing:.04em;
  background-image:linear-gradient(180deg,#fff2b0,#ffd34d 45%,#e8a21f); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,10,20,.85)) drop-shadow(0 4px 18px rgba(255,176,32,.55));
  animation:bwPulse 1s ease-in-out infinite alternate;}
.bw-amount, .bw-mult{text-shadow:0 2px 3px rgba(0,10,20,.85), 0 0 14px rgba(0,10,20,.6);}
.bigwin.mega .bw-title{background-image:linear-gradient(180deg,#d9f6ff,#38e6ff 45%,#1f8fb0); filter:drop-shadow(0 2px 2px rgba(0,10,20,.85)) drop-shadow(0 4px 18px rgba(56,230,255,.55));}
.bigwin.epic .bw-title{background-image:linear-gradient(180deg,#ffd9f0,#ff5a9e 45%,#c22860); filter:drop-shadow(0 2px 2px rgba(0,10,20,.85)) drop-shadow(0 4px 18px rgba(255,90,158,.6));}
@keyframes bwPulse{from{transform:scale(1)}to{transform:scale(1.05)}}
.bw-amount{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px;
  font-size:clamp(28px,6vw,52px); font-weight:900; color:#ffe9a0;}
.bw-coin{width:1em; height:1em;}
.bw-mult{margin-top:6px; font-size:clamp(16px,3vw,24px); font-weight:800; color:rgba(234,246,255,.85);}
.bw-rain{position:absolute; top:-40px; animation-name:bwRain; animation-timing-function:linear; animation-iteration-count:infinite;}
@keyframes bwRain{to{transform:translateY(110vh) rotate(540deg)}}

/* --- JACKPOT celebration (grander than a normal big win) --------------------------------- */
.bigwin.jackpot{background:radial-gradient(circle at 50% 45%, rgba(255,211,77,.16), rgba(2,8,16,.66) 62%);}
.jp-burst{position:absolute; left:50%; top:45%; width:150vmax; height:150vmax; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(255,211,77,.13) 0 5deg, transparent 5deg 20deg);
  animation:jpSpin 9s linear infinite; pointer-events:none;}
@keyframes jpSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .jp-burst{animation:none;} }
.jp-eyebrow{font-weight:900; letter-spacing:.34em; font-size:clamp(12px,2.6vw,20px); color:#ffe9a0;
  text-shadow:0 2px 8px rgba(0,10,20,.9); margin-bottom:2px;}
.bw-title.jp-title{font-size:clamp(52px,13vw,124px); line-height:.95;}
.jp-sub{font-weight:900; letter-spacing:.1em; font-size:clamp(26px,6vw,52px); color:#fff; margin-top:-2px;
  text-shadow:0 2px 12px rgba(255,176,32,.75), 0 2px 4px rgba(0,10,20,.9); animation:bwPulse 1s ease-in-out infinite alternate;}
.bigwin.jp-minor .bw-title{background-image:linear-gradient(180deg,#dff2ff,#43b6ff 45%,#1f6fb0);}
.bigwin.jp-major .bw-title{background-image:linear-gradient(180deg,#ffd9f5,#ff4fd8 45%,#a01c8f);}
.bigwin.jp-grand .bw-title{background-image:linear-gradient(180deg,#fff2b0,#ffd34d 45%,#e8a21f);}

/* --- daily bonus (lobby) --------------------------------------------------------------- */
.bonus-bar{display:flex; align-items:center; gap:14px; margin:14px 0 4px; padding:14px 16px;
  border:1px solid rgba(255,211,77,.35); border-radius:14px;
  background:linear-gradient(90deg, rgba(255,211,77,.12), rgba(255,211,77,.03));}
.bonus-bar .coin{width:28px; height:28px; flex:none;}
.bonus-bar.ready{animation:bonusGlow 1.6s ease-in-out infinite alternate;}
@keyframes bonusGlow{from{box-shadow:0 0 0 rgba(255,211,77,0)}to{box-shadow:0 0 22px rgba(255,211,77,.35)}}
.bonus-info{flex:1; min-width:0;}
.bonus-info b{display:block; font-size:15px;}
.bonus-info span{font-size:12px; color:var(--muted, #8fb0c4);}

/* --- loyalty tier card (lobby) -------------------------------------------------------- */
.tier-card{max-width:1000px; margin:18px auto 26px; padding:14px 18px; border-radius:16px;
  border:1px solid rgba(255,211,77,.28); background:linear-gradient(120deg, rgba(255,211,77,.10), rgba(120,90,255,.06));}
.tier-card.t1{border-color:rgba(120,200,235,.4);} .tier-card.t2{border-color:rgba(65,240,160,.4);}
.tier-card.t3{border-color:rgba(201,162,255,.45);} .tier-card.t4{border-color:rgba(255,211,77,.6); box-shadow:0 0 22px rgba(255,211,77,.18);}
.tier-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.tier-name{font-size:17px; font-weight:800; letter-spacing:.02em;}
.tier-perks{font-size:12.5px; color:var(--gold,#ffd34d); font-weight:700;}
.tier-track{height:7px; border-radius:99px; background:rgba(255,255,255,.08); margin:10px 0 6px; overflow:hidden;}
.tier-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,#43e0ff,#ffd34d); transition:width .4s;}
.tier-next{font-size:11.5px; color:var(--muted,#8fb0c4);}
.tier-next b{color:#eaf6ff;}
/* Tier footer: the "x/7 daily logins → Tier N" text on the left, the timed-faucet claim/countdown
   pushed to the right — a real gap + wrap so the claim button never sits on top of the tier text. */
.tier-foot{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-top:8px;}
.tier-faucet{margin-left:auto; display:inline-flex; align-items:center;}
.faucet-claim{white-space:nowrap;}
.faucet-wait{font-size:11.5px; color:var(--muted,#8fb0c4); white-space:nowrap;}
.faucet-wait b{color:#ffe08a;}

/* --- Loyalty tier SHOWCASE (lobby): a left→right row of the 5 tiers and their perks ------------- */
.tier-showcase{max-width:1040px; margin:2px auto 26px;}
.tier-showcase-head{display:flex; align-items:baseline; gap:10px; margin:0 2px 12px; flex-wrap:wrap;}
.tier-showcase-head h3{font-size:15px; font-weight:800; letter-spacing:.02em; margin:0;}
.tier-showcase-head small{color:var(--dim,#8fb6cc); font-size:12px;}
/* Desktop: 5 equal columns that FILL the container — no horizontal scrollbar. minmax(0,1fr) lets the
   cards shrink to fit instead of overflowing. Narrow screens fall back to a swipe carousel (below). */
.tier-row{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; padding:13px 2px 10px;}
.tcard{min-width:0; min-height:328px;
  display:flex; flex-direction:column; border-radius:16px; padding:16px 15px 14px; position:relative;
  border:1px solid var(--tc,#2a4a5f);
  background:var(--surface,linear-gradient(180deg,rgba(11,40,60,.66),rgba(3,20,33,.8)));
  box-shadow:var(--card-shadow); transition:transform .15s ease, box-shadow .2s, border-color .2s;}
.tcard:hover{transform:translateY(-3px);}
.tcard-top{display:flex; align-items:center; gap:9px; margin-bottom:3px;}
.tcard-badge{font-size:26px; line-height:1;}
.tcard-name{font-size:16px; font-weight:850; letter-spacing:.02em; color:var(--ink,#eaf6ff);}
.tcard-tagline{font-size:11px; color:var(--dim,#8fb6cc); margin:0 0 12px; min-height:14px;}
.tcard-perks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1;}
.tcard-perks li{font-size:12.5px; line-height:1.35; color:#cfe6f4; display:flex; gap:8px; align-items:flex-start;}
.tcard-perks li .pi{flex:none; opacity:.9;}
.tcard-perks li b{color:var(--ink,#eaf6ff); font-weight:800;}
.tcard-perks li.off{color:var(--dim,#7f9db0);}
.tcard-foot{margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); font-size:11px; color:var(--dim,#8fb6cc); text-align:center;}
.tcard.current{box-shadow:0 0 0 2px var(--tc) inset, var(--card-shadow);}
.tcard-you{position:absolute; top:-9px; right:12px; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; background:var(--tc); color:#04121a; box-shadow:0 3px 10px rgba(0,0,0,.4);}
/* per-tier accent colours (Starter→Tier 3), matching the status-card language */
.tcard.t0{--tc:#5fe6ff;} .tcard.t1{--tc:#5cf0c2;} .tcard.t2{--tc:#5aa9ff;} .tcard.t3{--tc:#b79bff;}
/* VIP — the premium one: gold gradient ground, gold glow, gilded name, a slow shimmer sweep */
.tcard.t4{--tc:#ffd34d; border-color:rgba(255,211,77,.55);
  background:linear-gradient(165deg, rgba(255,211,77,.16), rgba(120,90,255,.10) 58%, rgba(3,20,33,.85));
  box-shadow:0 0 26px rgba(255,211,77,.22), var(--card-shadow);}
.tcard.t4 .tcard-name{background:linear-gradient(92deg,#fff2c4,#ffd34d); -webkit-background-clip:text; background-clip:text; color:transparent;}
.tcard.t4 .tcard-perks li b{color:#ffe9a8;}
.tcard.t4::after{content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.12) 48%, transparent 62%);
  background-size:250% 100%; animation:tshimmer 5s ease-in-out infinite;}
@keyframes tshimmer{0%,100%{background-position:160% 0;} 50%{background-position:-60% 0;}}
@media (prefers-reduced-motion:reduce){ .tcard.t4::after{animation:none;} .tcard:hover{transform:none;} }
/* Narrow screens: a swipe carousel (peek the next card) with NO visible scrollbar. The 13px row
   padding-top keeps the "You're here" pill (which sits above the card) from being clipped by the
   horizontal-scroll container. */
@media (max-width:720px){
  .tier-row{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;}
  .tier-row::-webkit-scrollbar{display:none; width:0; height:0;}
  .tcard{flex:0 0 78%; scroll-snap-align:center; min-height:302px;}
}

/* --- idle auto-logout dialog ---------------------------------------------------------- */
.idle-back{z-index:var(--z-system);}
.idle-modal{max-width:360px; text-align:center;}
.idle-modal .idle-icon{font-size:44px; margin-bottom:6px;}
.idle-modal h2{margin:0 0 8px;}
.idle-modal p{color:var(--dim, #8fb0c4); font-size:14px; line-height:1.5; margin:0 0 18px;}
.idle-modal #idleCount{color:var(--gold, #ffd34d); font-size:16px;}

/* Token-grant notification cards (welcome bonus / admin add) — top-center non-blocking stack.
   Below modals/system dialogs (--z-notice): a grant card must never cover the idle-logout
   countdown or a blocking dialog. Offset past the top toast slot so they don't collide. */
.grant-notices{position:fixed; top:calc(env(safe-area-inset-top, 0px) + var(--topbar-h) + 58px); left:50%; transform:translateX(-50%);
  z-index:var(--z-notice); display:flex; flex-direction:column; gap:8px; align-items:center; width:min(92vw,360px); pointer-events:none;}
.grant-card{pointer-events:auto; display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px;
  border-radius:14px; cursor:pointer; opacity:0; transform:translateY(-12px) scale(.96);
  transition:opacity .3s, transform .3s;
  background:linear-gradient(180deg, rgba(10,60,40,.97), rgba(6,40,28,.97));
  border:1px solid rgba(65,240,160,.5); box-shadow:0 8px 24px rgba(0,0,0,.45);}
.grant-card.in{opacity:1; transform:translateY(0) scale(1);}
.grant-card.welcome{background:linear-gradient(180deg, rgba(72,52,10,.97), rgba(50,34,6,.97)); border-color:rgba(255,211,77,.6);}
.gc-icon{flex:none; font-size:24px; display:flex; align-items:center;}
.gc-txt{display:flex; flex-direction:column; line-height:1.25;}
.gc-txt b{font-size:15px; font-weight:800; color:#eafff5;}
.grant-card.welcome .gc-txt b{color:#ffe9ad;}
.gc-txt small{font-size:11.5px; color:var(--dim,#8fb0c4);}
.grant-card.tier-promo{background:linear-gradient(180deg, rgba(60,40,90,.97), rgba(38,24,60,.97)); border-color:rgba(201,162,255,.7);}
.grant-card.tier-promo .gc-txt b{color:#e6d6ff;}
.grant-card.tier-demo{background:linear-gradient(180deg, rgba(70,30,30,.97), rgba(46,20,20,.97)); border-color:rgba(255,120,120,.5);}
.grant-card.tier-warn{background:linear-gradient(180deg, rgba(72,52,10,.97), rgba(50,34,6,.97)); border-color:rgba(255,190,60,.6);}
.grant-card .gc-icon{font-size:22px; min-width:26px; justify-content:center;}

/* TEST-mode badge — always-visible marker that the server is on the test database (not live).
   A vertical tag floated just off the LEFT edge (fully rounded — the old flush-to-edge ribbon
   read as clipped in every screenshot), below menus/dialogs so it never covers anything
   interactive, and never intercepts taps. */
.mode-badge{position:fixed; left:calc(4px + env(safe-area-inset-left, 0px)); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  z-index:var(--z-badge); pointer-events:none; font:800 9px/1 system-ui; letter-spacing:.16em;
  color:#2a1400; background:linear-gradient(90deg,#ffd34d,#e8a21f); border:1px solid rgba(0,0,0,.35);
  padding:10px 4px; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.28); opacity:.9;}

/* --- admin: online status + player stats ---------------------------------------------- */
.online-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px;
  background:#ff5a6e; box-shadow:0 0 7px rgba(255,90,110,.55); vertical-align:middle;}   /* offline = red */
.online-dot.on{background:#41f0a0; box-shadow:0 0 8px rgba(65,240,160,.8);}               /* online = green */
/* colored status pill (Manage panel) */
.status-pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.02em; line-height:1;
  background:rgba(74,91,102,.18); color:#9fb3c0; border:1px solid rgba(120,140,155,.35);}
.status-pill::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor;}
.status-pill.on{background:rgba(65,240,160,.14); color:#41f0a0; border-color:rgba(65,240,160,.45);
  box-shadow:0 0 10px rgba(65,240,160,.18);}
.status-pill.on::before{box-shadow:0 0 7px currentColor;}
/* login-lockout indicator (auto-lock from repeated wrong passwords) — the ::before dot carries the icon
   already via the emoji in the label, so hide the generic dot for this variant. */
.status-pill.locked{background:rgba(229,72,77,.14); color:#ff7a7f; border-color:rgba(229,72,77,.45);}
.status-pill.locked::before{display:none;}
.mg-stats{background:rgba(2,18,31,.4); border:1px solid var(--stroke); border-radius:12px; padding:12px;}
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; margin-bottom:12px;}
.stat-grid label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim,#8fb0c4);}
.stat-grid b{display:flex; align-items:center; gap:5px; font-size:14px; font-weight:800;}
.stat-grid .win{color:#41f0a0;} .stat-grid .loss{color:#ff5a6e;}
.stat-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.stat-table th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim,#8fb0c4); padding:4px 6px; border-bottom:1px solid var(--stroke);}
.stat-table td{padding:5px 6px; border-bottom:1px solid rgba(255,255,255,.05);}
.stat-table td:not(:first-child){text-align:center; font-weight:700;}
/* Headers must sit ABOVE their data. Base: align every header to its (centered) column. */
.stat-table th:not(:first-child){text-align:center;}
/* Financial data tables — right-align numbers AND their headers together (money reads flush-right,
   so each header sits directly over its column). First column (name/game) stays left. */
.ab-table th:not(:first-child), .ab-table td:not(:first-child),
.hb-table th:not(:first-child), .hb-table td:not(:first-child),
.stmt-table th:not(:first-child), .stmt-table td:not(:first-child){text-align:right;}
.stat-table .win{color:#41f0a0;} .stat-table .loss{color:#ff5a6e;}
.stat-table .fav{font-size:9.5px; color:var(--gold,#ffd34d); font-weight:800; letter-spacing:.04em;}
/* All-accounts books table (every account + its accounting) */
.admin-books{margin-top:14px;}
.admin-books .admin-list-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
/* Full-books table: expands fully (no inner vertical scrollbar) and, only if the 9 columns can't
   fit (narrow phones), scrolls horizontally INSIDE its own card so the page never overflows. On a
   full-width desktop row the columns fit with no scrollbar at all. */
.ab-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:6px;}
.ab-scroll .ab-table{min-width:640px;}   /* keep columns legible on phones; scroll within the card */
/* Mobile admin: dense financial tables cannot fit 5–9 wide number columns on a phone, and the
   horizontal-scroll fallback read as broken (the pinned label column overlapped the data mid-scroll).
   So on phones every .stat-table REFLOWS to stacked, labelled cards (labelizeReflowTables() in admin.js
   stamps each cell with data-label + tags the title/section rows). Nothing scrolls sideways. The lone
   exception is the general ledger (.lg-table) — a 100-row spreadsheet that stays a clean scroll table.
   Belt-and-suspenders: min-width:0 on the grid/flex ancestors (the min-width:auto track trap) + a hard
   overflow-x:clip on the page so a stray wide element can never push the whole admin view sideways. */
@media (max-width:640px){
  .admin-body, .admin-body.acct-dash, .admin-head{max-width:100%; overflow-x:clip;}
  .bank-analytics, .bank-analytics > *, .house-breakdown, #bank,
  .acct-cols, .acct-main, .acct-rail, .acct-main > .card, .acct-rail > .card{min-width:0;}
  .ab-scroll, .hb-scroll{max-width:100%; overflow-x:visible; max-height:none;}

  /* --- Reflow: each row → a card --- */
  table.stat-table.reflow{display:block; min-width:0 !important; border-collapse:separate;}
  .reflow thead{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0;}
  .reflow tbody{display:block;}
  .reflow tbody > tr{display:block; background:var(--deep2,#03192a); border:1px solid var(--stroke); border-radius:12px;
    padding:9px 12px; margin:0 0 9px;}
  .reflow tbody > tr:last-child{margin-bottom:0;}
  .reflow td{display:flex; align-items:baseline; justify-content:space-between; gap:14px; text-align:right;
    padding:4px 0; border:none; white-space:normal; font-variant-numeric:tabular-nums;}
  .reflow td[data-label]::before{content:attr(data-label); color:var(--dim,#8fb0c4); font-weight:700;
    font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; text-align:left; flex:0 0 auto; align-self:center;}
  /* First cell = the card title (row name / timestamp / account): full width, left-aligned, no label. */
  .reflow td.reflow-title{justify-content:flex-start; text-align:left; font-weight:800; font-size:14px;
    max-width:none; overflow:visible; white-space:normal; text-overflow:clip;
    padding:0 0 6px; margin-bottom:5px; border-bottom:1px solid var(--stroke);}
  .reflow td.reflow-title small{display:inline; margin-left:6px;}
  /* Accounts table: its .ab-name cell truncates to 180px by default — as a card title it needs full width. */
  .reflow td.ab-name.reflow-title{max-width:none; overflow:visible; white-space:normal; text-overflow:clip;}
  .reflow td.ab-name.reflow-title small{text-transform:capitalize;}
  /* Section-divider rows (colspan) become a small heading between cards; empty-state stays a message. */
  .reflow tbody > tr.reflow-secrow{background:none; border:none; padding:14px 2px 3px; margin:0;}
  .reflow td.reflow-sec{display:block; color:var(--gold,#ffd34d); font-weight:800; font-size:11px;
    letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:0;}
  .reflow td.admin-empty{justify-content:center; text-align:center; color:var(--dim,#8fb0c4);}

  /* --- General ledger stays a clean horizontal-scroll table (pinned Doc# column) --- */
  .lg-scroll{overflow-x:auto; max-width:100%;
    box-shadow:inset -16px 0 13px -13px rgba(0,0,0,.6); border-radius:8px;}
  .lg-scroll .lg-table th, .lg-scroll .lg-table td{white-space:nowrap;}
  .lg-scroll .lg-table th:first-child, .lg-scroll .lg-table td:first-child{
    position:sticky; left:0; z-index:2; background:var(--bg1,#0b1622); box-shadow:8px 0 8px -8px rgba(0,0,0,.5);
  }
}
.ab-table td.ab-name{text-align:left; font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ab-table td.ab-name small{display:block; font-weight:600; font-size:10px; color:var(--dim,#8fb0c4); text-transform:capitalize;}
.ab-table tr.ab-house td.ab-name, .ab-table tr.ab-admin td.ab-name{color:var(--gold,#ffd34d);}
.ab-table tr.ab-house, .ab-table tr.ab-admin{background:rgba(255,211,77,.04);}

/* --- Provably Fair verifier (#/fair) --- */
.btn.small{padding:7px 13px; font-size:13px; min-height:36px; flex:0 0 auto;}
/* Provably-Fair: single centred column on mobile, two balanced columns on desktop so the page
   uses the width instead of leaving the right half empty. Higher specificity than `.admin-body`. */
.admin-body.fair-grid{display:grid; grid-template-columns:1fr; gap:16px; max-width:1000px; margin:0 auto; align-items:start;}
@media (min-width:900px){ .admin-body.fair-grid{grid-template-columns:1fr 1fr;} }
.fair-col{display:flex; flex-direction:column; gap:16px; min-width:0;}
.fair-col > .card{max-width:none;}   /* fill the column instead of the 380px cap */
/* How-it-works steps as a clean icon + text list */
.fv-def{color:var(--dim); font-size:13.5px; line-height:1.6; margin:0 0 14px;}
.fv-def b{color:var(--ink);}
.fv-how{display:flex; flex-direction:column; gap:14px;}
.fv-step{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"i t" "i d"; column-gap:12px; row-gap:2px;}
.fv-step-ico{grid-area:i; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(56,230,255,.08); border:1px solid var(--stroke);}
.fv-step-t{grid-area:t; font-weight:800; font-size:14px; align-self:center;}
.fv-step-d{grid-area:d; font-size:12.5px; color:var(--dim); line-height:1.5;}
.fv-steps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px; color:var(--dim);}
.fv-steps li{font-size:13.5px; line-height:1.5;}
.fv-steps b{color:var(--ink);}
.fv-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:13px;}
.fv-line:last-child{border-bottom:none;}
.fv-line > span:first-child{color:var(--dim); text-transform:uppercase; font-size:10.5px; letter-spacing:.06em; flex:0 0 auto;}
.fv-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--cyan);
  word-break:break-all; text-align:right; background:rgba(56,230,255,.07); padding:2px 6px; border-radius:6px;}
.fv-two{display:grid; grid-template-columns:1fr 100px; gap:12px;}
/* Fair round rows: override .user-row's grid-areas layout with a simple flex row so the
   Verify button sits in its own cell (a bare button in the borrowed grid auto-placed into an
   overlapping area, which stole/blocked clicks on all but the first row). Each round's result
   renders INLINE, in its own slot beneath the row — no shared panel, no scroll jump. */
.fv-round-wrap{border-bottom:1px solid var(--stroke);}
.fv-round-wrap:last-child{border-bottom:none;}
.fv-round{border-bottom:none;}
.fv-round{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.fv-round .u-main{flex:1 1 auto; min-width:0;}
.fv-round .btn{flex:0 0 auto;}
.fv-rowresult{padding:2px 16px 16px; background:rgba(56,230,255,.05);}
.fv-rowresult[hidden]{display:none;}
.fv-head{font-size:14.5px; font-weight:800; margin:2px 0 8px; text-align:center;}
.fv-ok, .fv-verify-ok{color:#41f0a0; font-weight:800;}
.fv-bad, .fv-verify-bad{color:#ff5a6e; font-weight:800;}
.fv-pending{color:var(--gold);}
.fv-manual-out{margin-top:10px;}
.fv-manual-out:empty{display:none;}

/* --- Profile & Settings (#/profile) --- */
.prof-col{display:flex; flex-direction:column; gap:20px; min-width:0;}
.prof-account{display:flex; flex-direction:column; gap:16px;}
.prof-id{display:flex; align-items:center; gap:14px;}
.prof-id .av{width:52px; height:52px; font-size:18px; flex:0 0 auto;}
.prof-handle{font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.prof-email{color:var(--dim); font-size:13px; word-break:break-all;}
.prof-bal{font-size:22px; font-weight:800; color:var(--gold); display:flex; align-items:center; gap:6px;}
.prof-meta{display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid rgba(255,255,255,.07); padding-top:14px;}
.prof-meta label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin-bottom:3px;}
.prof-meta b{font-size:14px;}
.prof-links{display:flex; flex-wrap:wrap; gap:8px;}
.prof-tier{background:rgba(2,18,31,.5); border:1px solid var(--stroke); border-radius:12px; padding:12px 14px;}
.tier-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.tier-daily{font-size:11.5px; color:var(--dim);}
.tier-badge{font-weight:800; font-size:14px; padding:4px 11px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(56,230,255,.1); color:var(--cyan); white-space:nowrap;}
.tier-badge.tier-0{color:#9fb4c4; border-color:rgba(159,180,196,.4); background:rgba(159,180,196,.08);}
.tier-badge.tier-1{color:#54e08a; border-color:rgba(84,224,138,.5); background:rgba(84,224,138,.1);}
.tier-badge.tier-2{color:#38e6ff; border-color:rgba(56,230,255,.5); background:rgba(56,230,255,.1);}
.tier-badge.tier-3{color:#c58bff; border-color:rgba(197,139,255,.5); background:rgba(197,139,255,.1);}
.tier-badge.tier-4{color:#ffd34d; border-color:rgba(255,211,77,.6); background:rgba(255,211,77,.12);}
.tier-bar{height:7px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:6px;}
.tier-bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .4s;}
.tier-note{font-size:12px; color:var(--dim);}

.pref-row{display:flex; align-items:center; gap:14px; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06);}
.pref-row:last-child{border-bottom:none;}
.pref-txt{min-width:0;}
.pref-label{font-size:14.5px; font-weight:700;}
.pref-desc{font-size:12px; color:var(--dim); margin-top:2px;}
.switch{flex:0 0 auto; width:50px; height:29px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.08); position:relative; cursor:pointer; padding:0; transition:background .15s, border-color .15s;}
.switch .knob{position:absolute; top:2px; left:2px; width:23px; height:23px; border-radius:50%;
  background:#cdd9e2; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .16s, background .16s;}
.switch.on{background:linear-gradient(180deg,var(--gold),var(--gold2)); border-color:transparent;}
.switch.on .knob{transform:translateX(21px); background:#3a2600;}
.switch:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

/* --- Cosmetic shop (#/shop) --- */
.shop-body{display:block;}
/* Roomy on desktop: wider container, larger cards, generous gap so the themes breathe instead of
   bunching in a narrow strip. */
.shop-screen .admin-head, .shop-screen .admin-body{max-width:1340px;}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:30px;}
.shop-card{display:flex; align-items:center; gap:18px; padding:22px; border:1px solid var(--edge);
  border-radius:18px; background:var(--surface); backdrop-filter:blur(8px); box-shadow:var(--card-shadow);
  transition:transform .12s, border-color .12s, box-shadow .12s;}
.shop-card:hover{transform:translateY(-2px); border-color:rgba(120,205,255,.32);}
.shop-card.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 26px rgba(255,211,77,.22), var(--card-shadow);}
.shop-swatch{flex:0 0 auto; width:60px; height:60px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--sw) 92%, #fff), var(--sw) 55%, #041018);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 24px -4px var(--sw), inset 0 2px 6px rgba(255,255,255,.25);}
.shop-swatch span{width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 12px #fff;}
.shop-info{flex:1 1 auto; min-width:0;}
.shop-name{font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.shop-owned{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); border:1px solid rgba(84,224,138,.5); border-radius:6px; padding:1px 6px; font-weight:800;}
.shop-desc{font-size:12px; color:var(--dim); margin-top:3px;}
.shop-act{flex:0 0 auto;}
/* Theme-equip makeover flash: a radial wash in the new accent that blooms then fades. */
.theme-flash{position:fixed; inset:0; z-index:var(--z-flash); pointer-events:none;
  background:radial-gradient(circle at 50% 45%, var(--accent), transparent 60%);
  animation:theme-flash .72s ease-out forwards;}
@keyframes theme-flash{0%{opacity:0;} 22%{opacity:.5;} 100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .theme-flash{animation-duration:.3s;} }

/* --- Leaderboards (#/leaderboard) --- */
.lb-body{display:flex; flex-direction:column; gap:14px;}
.lb-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.lb-tab{background:var(--panel); border:1px solid var(--stroke); color:var(--ink); border-radius:999px;
  padding:9px 16px; font-weight:700; font-size:13.5px; cursor:pointer; min-height:40px;}
.lb-tab.on{border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.lb-list{display:flex; flex-direction:column; border:1px solid var(--edge); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--card-shadow);}
.lb-row{display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06);}
.lb-row:last-child{border-bottom:none;}
.lb-row:nth-child(1){background:linear-gradient(90deg, rgba(255,211,77,.12), transparent 70%);}
.lb-row:nth-child(2){background:linear-gradient(90deg, rgba(200,220,235,.08), transparent 70%);}
.lb-row:nth-child(3){background:linear-gradient(90deg, rgba(224,149,42,.08), transparent 70%);}
.lb-rank{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; background:rgba(255,255,255,.06); color:var(--dim);}
.lb-rank.gold{background:linear-gradient(150deg,#ffe488,#e0952a); color:#3a2600; box-shadow:0 0 16px rgba(255,211,77,.5);}
.lb-rank.silver{background:linear-gradient(150deg,#e6eef5,#9fb4c4); color:#1a2733; box-shadow:0 0 12px rgba(200,220,235,.4);}
.lb-rank.bronze{background:linear-gradient(150deg,#f0b98a,#b06a34); color:#2a1508; box-shadow:0 0 12px rgba(224,149,42,.4);}
.lb-handle{font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; letter-spacing:.02em;}
.lb-val{font-weight:800; color:var(--gold); font-size:16px; display:flex; align-items:center; gap:5px;}

/* --- Achievements (#/missions) --- */
.ms-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
.ms-card{border:1px solid var(--edge); border-radius:18px; padding:16px 18px; background:var(--surface); backdrop-filter:blur(8px); box-shadow:var(--card-shadow); transition:transform .12s, border-color .12s;}
.ms-card:hover{transform:translateY(-2px);}
.ms-card.ready{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 26px rgba(255,211,77,.22), var(--card-shadow);}
.ms-card.done{opacity:.72;}
.ms-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.ms-head{display:flex; align-items:center; gap:12px; min-width:0;}
.ms-ico{flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow:0 0 16px -5px var(--c);}
.ms-name{font-weight:800; font-size:15px; overflow-wrap:break-word; min-width:0;}
.ms-desc{font-size:12px; color:var(--dim); margin-top:2px; overflow-wrap:break-word; min-width:0;}
.shop-card, .ms-card{min-width:0;}   /* iOS grid-item shrink safety (see .game-card) */
.ms-bar{height:8px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden;}
.ms-bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .4s;}
.ms-prog{font-size:11px; color:var(--dim); margin-top:5px; text-align:right;}
.ms-reward{font-size:13px; color:var(--gold); font-weight:800; display:inline-flex; align-items:center; gap:4px;}
.ms-claimed{font-size:12px; color:var(--green); font-weight:800;}

/* --- Tournaments (#/tournaments) --- */
.tn-body-wrap{display:block;}
.tn-live{display:flex; flex-direction:column; gap:18px; max-width:100%; padding:22px;}
/* Hero band: metric badge + name on the left, big countdown pill on the right, over a subtle glow. */
.tn-hero{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 22px; border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(255,211,77,.14), rgba(120,90,255,.10) 55%, rgba(3,20,33,.5));
  border:1px solid rgba(255,211,77,.35);}
.tn-hero-main{display:flex; flex-direction:column; gap:8px; min-width:0;}
.tn-badge{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#04121a; background:linear-gradient(180deg,#ffe488,#e0952a); border-radius:999px; padding:4px 12px;}
.tn-name{font-weight:850; font-size:clamp(22px, 4vw, 34px); letter-spacing:.01em; text-wrap:balance; margin:0;}
.tn-name.sm{font-size:15px; font-weight:800;}
.tn-sub{font-size:12px; color:var(--dim); margin-top:2px;}
.tn-timer{font-weight:800; color:var(--gold); font-size:16px; white-space:nowrap;
  border:1px solid rgba(255,211,77,.5); border-radius:999px; padding:9px 16px; background:rgba(2,18,31,.5);}
/* time-elapsed bar */
.tn-elapsed{height:7px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden;}
.tn-elapsed > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#5ceaff,#ffd34d);
  box-shadow:0 0 12px -2px rgba(255,211,77,.6); transition:width .5s ease;}
.tn-kpis{margin:0;}
/* podium — three prize columns */
.tn-podium{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.tn-pod{display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px 16px; border-radius:16px;
  border:1px solid var(--edge); background:radial-gradient(120% 120% at 50% 0%, rgba(14,58,86,.55), rgba(3,20,33,.85));
  box-shadow:var(--card-shadow); position:relative;}
.tn-pod.pod1{border-color:rgba(255,211,77,.55); background:radial-gradient(120% 120% at 50% 0%, rgba(255,211,77,.14), rgba(3,20,33,.85)); box-shadow:0 0 24px -8px rgba(255,211,77,.5);}
.tn-pod.pod2{border-color:rgba(200,220,235,.4);}
.tn-pod.pod3{border-color:rgba(224,149,42,.4);}
.tn-pod .lb-rank{width:38px; height:38px; font-size:15px;}
.tn-pod-k{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);}
.tn-pod-v{font-size:19px; font-weight:850; display:flex; align-items:center; gap:6px; color:var(--ink);}
.tn-you{background:rgba(56,230,255,.08); border:1px solid var(--stroke); border-radius:10px; padding:9px 12px; font-size:13.5px; display:flex; align-items:center; gap:6px;}
.tn-you-none{color:var(--dim);}
.tn-standings-h{margin:2px 2px -4px; font-size:14px; font-weight:800; letter-spacing:.02em;}
.tn-standings{display:flex; flex-direction:column; border:1px solid var(--edge); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--card-shadow);}
.tn-row{display:grid; grid-template-columns:46px 1fr auto auto; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px;}
.tn-row:last-child{border-bottom:none;}
.tn-row:nth-child(1){background:linear-gradient(90deg, rgba(255,211,77,.12), transparent 70%);}
.tn-row:nth-child(2){background:linear-gradient(90deg, rgba(200,220,235,.08), transparent 70%);}
.tn-row:nth-child(3){background:linear-gradient(90deg, rgba(224,149,42,.08), transparent 70%);}
.tn-row.me{box-shadow:inset 3px 0 0 var(--cyan); background:linear-gradient(90deg, rgba(56,230,255,.12), transparent 70%);}
.tn-handle{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; font-size:15px; letter-spacing:.02em;}
.tn-score{color:var(--ink); font-weight:800; display:flex; align-items:center; gap:4px;}
.tn-win{color:var(--gold); font-weight:800; display:flex; align-items:center; gap:3px; font-size:13px;}
.tn-win-none{color:var(--dim);}
.tn-h3{margin:24px 0 10px; font-size:16px; font-weight:800;}
.tn-past{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--edge); border-radius:12px; background:var(--panel); margin-bottom:8px;}
.tn-past-state{font-size:12px; color:var(--green); font-weight:700;}
@media (max-width:620px){
  .tn-live{padding:15px;}
  .tn-podium{grid-template-columns:1fr; gap:10px;}
  .tn-pod{flex-direction:row; justify-content:flex-start; gap:12px; padding:12px 14px;}
  .tn-pod-v{margin-left:auto;}
}

/* --- Bingo Hall (#/bingo) --- */
.bingo-body{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:760px){
  /* Let the room use more of a wide desktop (the global 1200 cap left it a small island). */
  .bingo-screen .admin-head, .bingo-body{max-width:1520px;}
  .bingo-body{grid-template-columns:340px minmax(0,1fr); gap:32px; align-items:start; align-content:safe center;}
  .bg-pot{font-size:30px;} .bg-side{gap:12px;}
}
.bg-col{display:flex; flex-direction:column; gap:16px; min-width:0;}
.bg-side{display:flex; flex-direction:column; gap:10px; text-align:center;}
.bg-pot-k{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim);}
.bg-pot{font-size:26px; font-weight:800; color:var(--gold); display:flex; align-items:center; justify-content:center; gap:6px;}
.bg-meta{font-size:12px; color:var(--dim);}
/* Room mode toggle: agreed-wager (matched) vs buy-multiples (cards). Locked once you hold a seat. */
.bg-modes{display:flex; gap:6px; justify-content:center; margin-top:2px;}
.bg-mode{flex:1 1 0; padding:8px 6px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.04);
  color:var(--ink); font-weight:800; font-size:12px; cursor:pointer; line-height:1.2;
  transition:background .12s, border-color .12s, transform .1s;}
.bg-mode small{display:block; font-weight:600; font-size:9.5px; color:var(--dim); margin-top:2px;}
.bg-mode:hover:not(:disabled){background:rgba(120,205,255,.1);}
.bg-mode:active:not(:disabled){transform:translateY(1px);}
.bg-mode.on{background:linear-gradient(180deg, rgba(56,230,255,.2), rgba(56,230,255,.06));
  border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset;}
.bg-mode.on small{color:var(--cyan);}
.bg-mode:disabled{opacity:.5; cursor:default;}
/* Buy-in chips (matched) / card-count stepper (buy multiples). */
.bg-stake-k{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-top:2px;}
.bg-cardstep{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.bg-cardstep button{width:40px; height:40px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.05);
  color:var(--ink); font-size:22px; font-weight:800; cursor:pointer; line-height:1;
  transition:background .12s, transform .1s;}
.bg-cardstep button:hover:not(:disabled){background:rgba(120,205,255,.12);}
.bg-cardstep button:active:not(:disabled){transform:translateY(1px);}
.bg-cardstep button:disabled{opacity:.4; cursor:default;}
.bg-cardstep .n{font-size:24px; font-weight:900; min-width:34px; text-align:center; color:var(--gold);}
.bg-cardtotal{font-size:13px; font-weight:700; color:var(--dim);}
/* Buy-multiples: stacked wager-per-card chips + a card-count stepper. */
.bg-multi-ctl{display:flex; flex-direction:column; gap:8px;}
.bg-sub-k{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); font-weight:800;}
.bg-stakes{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.bg-stake{padding:6px 10px; min-width:52px; border-radius:10px; font-weight:800; font-size:13px;
  color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--stroke); cursor:pointer;
  transition:background .12s, border-color .12s, transform .1s;}
.bg-stake:hover:not(:disabled){background:rgba(120,205,255,.1);}
.bg-stake:active:not(:disabled){transform:translateY(1px);}
.bg-stake.on{background:linear-gradient(180deg, rgba(255,211,77,.22), rgba(255,211,77,.08));
  border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
.bg-stake:disabled{opacity:.45; cursor:default;}
.bg-match-note{font-size:11px; color:var(--dim); line-height:1.4; opacity:.85;}
.bg-status{font-size:13px; color:var(--cyan); min-height:20px;}
.bg-last-wrap{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:4px;}
.bg-last{display:inline-block; margin-top:4px; font-size:30px; font-weight:800; color:var(--ink);}
.bg-last.pop{animation:bg-pop .3s ease;}
@keyframes bg-pop{0%{transform:scale(.4); color:var(--gold);} 100%{transform:scale(1);}}
.bg-main{display:flex; flex-direction:column; gap:16px; min-width:0; align-items:center;}
/* Landscape / short viewport: the card + the 75-number board stacked vertically make a ~700px-tall
   scroll. Put them side-by-side so both are visible without deep scrolling. */
@media (max-height: 620px) and (min-width: 760px){
  .bg-main{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; justify-content:center; }
  .bg-main > *{ flex:1 1 300px; min-width:0; }
  .bg-cardgrid{ max-width:340px; }
}
/* Wide desktop: the old "card | board" split stacked N bought cards in a narrow left column (a tall
   scroll) while the board's column wasted the whole lower-right. The 75-number board is naturally WIDE
   (15 across), so lay it as a full-width caller strip on TOP, with the card(s) in a grid BELOW that
   fills the width — 6 cards flow into a couple of rows instead of a six-tall column. */
@media (min-width:1000px){
  .bg-main{ display:grid; grid-template-columns:1fr; gap:16px 0; align-items:start; justify-items:stretch;
    grid-template-areas:"cd" "boardk" "board" "rr" "cards"; }
  .bg-countdown{ grid-area:cd; }
  .bg-board-k{ grid-area:boardk; text-align:left; font-size:14px; }
  .bg-board{ grid-area:board; max-width:none; gap:9px; padding:20px; }
  .bg-num{ font-size:20px; border-radius:11px; }
  .bg-reroll{ grid-area:rr; justify-content:flex-start; }
  /* Cards fill the width and wrap: one comfortable card in matched mode, a multi-column grid of
     smaller cards in buy-multiples mode. */
  .bg-cards{ grid-area:cards; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
  .bg-cards .bg-cardgrid{ max-width:380px; }
  .bg-cards.multi .bg-cardgrid{ flex:1 1 250px; min-width:220px; max-width:300px; }
}
/* The card sits on its own felt ticket. */
.bg-cardgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; max-width:400px;
  padding:16px; border-radius:20px; border:1px solid var(--edge); box-shadow:var(--card-shadow);
  background:radial-gradient(120% 120% at 50% 0%, rgba(14,58,86,.7), rgba(3,20,33,.9));}
/* Card area: one full card (matched / single) or a wrapped grid of smaller cards (buy multiples). */
/* Pre-draw countdown: clean, prominent seconds-left with a shrinking bar (hidden when not counting) */
.bg-countdown{display:flex; flex-direction:column; align-items:center; gap:5px; width:100%;
  background:linear-gradient(180deg, rgba(56,230,255,.12), rgba(56,230,255,.03));
  border:1px solid rgba(56,230,255,.35); border-radius:12px; padding:10px 14px;}
.bg-countdown[hidden]{display:none;}
.bg-cd-k{font:800 11px system-ui; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);}
.bg-cd-num{font:900 36px/1 system-ui; color:var(--cyan,#38e6ff); font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(56,230,255,.5);}
.bg-cd-num.urgent{color:#ffd34d; text-shadow:0 0 18px rgba(255,211,77,.6); animation:bg-cd-pulse .5s ease infinite alternate;}
@keyframes bg-cd-pulse{from{transform:scale(1);} to{transform:scale(1.14);}}
.bg-cd-bar{width:100%; max-width:240px; height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden;}
.bg-cd-bar i{display:block; height:100%; width:100%; border-radius:3px;
  background:linear-gradient(90deg,#38e6ff,#43e0c9); transition:width .2s linear;}
@media (prefers-reduced-motion: reduce){ .bg-cd-num.urgent{animation:none;} }

/* Manual card selection: reroll your card(s) during the pre-start countdown (hidden otherwise) */
.bg-reroll{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; width:100%;}
.bg-reroll[hidden]{display:none;}
.bg-reroll-hint{font-size:12px; color:var(--dim); max-width:340px;}
.bg-cards{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; width:100%;}
.bg-cards.multi .bg-cardgrid{width:auto; max-width:220px; flex:0 1 220px; padding:10px; gap:5px;}
.bg-cards.multi .bg-h{font-size:15px; padding-bottom:2px;}
.bg-cards.multi .bg-cell{font-size:clamp(11px,3vw,15px); border-radius:8px;}
/* Empty card slot: a proper "your card appears here" placeholder box so the card column keeps its
   presence (and the desktop card|board split stays balanced) before you buy in. */
.bg-cardempty{width:100%; grid-column:1/-1; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--dim); min-height:200px; padding:24px; border:1px dashed var(--stroke); border-radius:20px; background:rgba(255,255,255,.02);}
.bg-h{display:flex; align-items:center; justify-content:center; font-weight:900; font-size:20px; padding-bottom:4px;
  color:var(--gold); text-shadow:0 0 12px rgba(255,211,77,.4);}
.bg-cell{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:clamp(15px,4.6vw,22px);
  border:1px solid var(--edge); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(2,18,31,.5));
  color:var(--ink); transition:background .2s, transform .2s, box-shadow .2s;}
.bg-cell.on{background:linear-gradient(160deg,#57e89a,#0d6b45);
  border-color:#57e89a; color:#04240f; transform:scale(1.04); box-shadow:0 0 18px -3px rgba(84,224,138,.7);}
.bg-cell.free{background:linear-gradient(160deg,var(--gold),var(--gold2)); border-color:var(--gold); color:#3a2600; box-shadow:0 0 18px -3px rgba(255,211,77,.6);}
.bg-board-k{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); text-align:center; font-weight:700;}
.bg-board{display:grid; grid-template-columns:repeat(15,1fr); gap:6px; max-width:720px; margin:0 auto; width:100%;
  padding:16px; border-radius:16px; border:1px solid var(--edge); background:var(--surface); box-shadow:var(--card-shadow);}
.bg-num{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:clamp(12px,1.7vw,15px); font-weight:800;
  border-radius:8px; background:rgba(255,255,255,.04); color:var(--dim); transition:background .2s, color .2s, box-shadow .2s;}
.bg-num.on{background:linear-gradient(180deg,#5ceaff,#1596c4); color:#02121f; box-shadow:0 0 12px -2px rgba(56,230,255,.7);}

/* "In the hall" occupancy card — who's in a live round vs waiting, and at which buy-ins. */
.bg-hall-card{display:flex; flex-direction:column; gap:10px; text-align:left; padding:16px;}
.bg-hall-title{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);}
.bg-hall-sum{display:flex; gap:10px;}
.bg-hall-stat{flex:1 1 0; display:flex; flex-direction:column; gap:2px; align-items:center; padding:8px 6px;
  border-radius:12px; border:1px solid var(--edge); background:rgba(255,255,255,.03);}
.bg-hall-stat .bh-k{font-size:10.5px; color:var(--dim); font-weight:700; white-space:nowrap;}
.bg-hall-stat b{font-size:20px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums;}
.bg-hall-tbl{width:100%; border-collapse:collapse; font-size:12.5px;}
.bg-hall-tbl th{text-align:left; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
  font-weight:800; padding:4px 6px; border-bottom:1px solid rgba(255,255,255,.1);}
.bg-hall-tbl td{padding:6px 6px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--ink); vertical-align:middle;}
.bg-hall-tbl tr:last-child td{border-bottom:none;}
.bg-hall-tbl .bh-buy{display:flex; align-items:center; gap:4px; font-weight:700; color:var(--gold); white-space:nowrap;}
.bg-hall-tbl .bh-n{font-weight:800; text-align:center; font-variant-numeric:tabular-nums;}
.bg-hall-badge{font-size:10px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.bg-hall-badge.live{background:rgba(84,224,138,.16); color:#7ff0b0; border:1px solid rgba(84,224,138,.4);}
.bg-hall-badge.wait{background:rgba(56,230,255,.1); color:#8fe4ff; border:1px solid rgba(56,230,255,.3);}
.bg-hall-empty{font-size:12px; color:var(--dim); text-align:center; padding:12px 8px; line-height:1.5;}

/* --- Poker Room (#/poker) --- */
.pk-loading{color:var(--dim); text-align:center; padding:40px 0;}
.pk-note{font-size:12px; color:var(--cyan); min-height:18px; text-align:center; margin-top:8px;}
/* Desktop: the buy-in panel is short, so centre it in the page instead of stranding it at the top,
   and give the header a little more room below the top bar. (Mobile fills the screen, so leave it.) */
@media (min-width:760px){
  .poker-screen .admin-head{padding-top:34px;}
  .poker-screen.pk-in-lobby .admin-body{align-content:safe center;}
}
/* Lobby */
.pk-lobby{max-width:540px; margin:0 auto; display:flex; flex-direction:column; gap:13px;}
.pk-lobby h3{margin:4px 0 0;}
.pk-sub{font-size:13px; color:var(--dim); line-height:1.5; margin:0;}
/* Mode picker — Practice vs Bots / Live Tables, a clear up-front choice before the stake. */
.pk-modes{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pk-mode{padding:14px 12px; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.04);
  color:var(--ink); cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:background .14s,border-color .14s,transform .1s,box-shadow .14s;}
.pk-mode:hover{background:rgba(120,205,255,.08);} .pk-mode:active{transform:translateY(1px);}
.pk-mode.on{background:linear-gradient(180deg, rgba(120,205,255,.2), rgba(120,205,255,.05)); border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan) inset, 0 0 22px -7px var(--cyan);}
.pk-mode-ico{font-size:26px; line-height:1;}
.pk-mode-k{font-weight:800; font-size:14.5px;}
.pk-mode-d{font-size:11px; color:var(--dim); line-height:1.42;}
.pk-stakes{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pk-stake{padding:10px 8px; border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.04);
  color:var(--ink); cursor:pointer; text-align:center; transition:background .12s,border-color .12s,transform .1s;}
.pk-stake:hover{background:rgba(120,205,255,.1);} .pk-stake:active{transform:translateY(1px);}
.pk-stake.on{background:linear-gradient(180deg, rgba(255,211,77,.22), rgba(255,211,77,.06)); border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
.pk-stake-k{font-weight:800; font-size:14px;}
.pk-stake-b{font-size:13px; color:var(--gold); font-weight:700; margin-top:2px;}
.pk-stake-r{font-size:10.5px; color:var(--dim); margin-top:2px;}
.pk-stake-seated{font-size:10px; color:var(--cyan); margin-top:3px;}
/* Bots: no stake picker — a one-line note stands in for the stake grid. */
.pk-bots-note{font-size:13px; color:var(--dim); text-align:center; line-height:1.5; padding:4px 6px;}
.pk-bots-note b{color:var(--gold);}
/* Live-tables-closed banner (outside scheduled hours) — bots stay open. */
.pk-live-closed{font-size:13px; line-height:1.5; color:#ffe08a; text-align:center; padding:11px 14px;
  border:1px solid rgba(255,211,77,.4); border-radius:12px; background:rgba(255,180,60,.08);}
.pk-live-closed b{color:#fff;}
/* How-to-play card in the lobby — a clean info panel covering both modes + the rules. */
.pk-howto{text-align:left; background:linear-gradient(180deg, rgba(11,26,40,.6), rgba(3,20,33,.75)); border:1px solid var(--edge);
  border-radius:16px; padding:14px 16px; box-shadow:var(--card-shadow); margin-top:8px;}
.pk-howto h4{margin:0 0 9px; font-size:14px; color:var(--gold); letter-spacing:.02em;}
.pk-howto ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px;}
.pk-howto li{font-size:12.5px; color:var(--dim); line-height:1.5;}
.pk-howto li b{color:var(--ink); font-weight:800;}
.pk-buyin-k{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); text-align:center; margin-top:4px;}
.pk-buyin-row{display:flex; align-items:center; justify-content:center; gap:14px;}
.pk-buyin{font-size:22px; font-weight:900; color:var(--gold); display:flex; align-items:center; gap:6px;}
.pk-step{width:44px; height:44px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--ink); font-size:22px; font-weight:800; cursor:pointer;}
.pk-step:active{transform:translateY(1px);}
.pk-range{width:100%; accent-color:var(--gold);}
/* Playing cards — CLASSIC WHITE face: corner index (rank + small suit) top-left, mirrored
   bottom-right, and a big centre suit pip. Crisp white with a hairline slate border + inner sheen. */
.pk-card{position:relative; width:34px; height:48px; border-radius:6px; overflow:hidden; color:#16283e; font-weight:900;
  background:linear-gradient(158deg,#ffffff,#eef2f7 90%);
  border:1px solid rgba(18,38,66,.26);
  box-shadow:0 2px 7px rgba(0,0,0,.5), inset 0 1px 0 #fff;}
.pk-card .pk-idx{position:absolute; display:flex; flex-direction:column; align-items:center; line-height:.9; font-size:11px; letter-spacing:-.04em;}
.pk-card .pk-idx i{font-style:normal; font-size:8px;}
.pk-card .pk-tl{top:3px; left:4px;}
.pk-card .pk-br{bottom:3px; right:4px; transform:rotate(180deg);}
.pk-card .pk-pip{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:.92;}
.pk-card.red{color:#d81f45;}
.pk-card.big{width:52px; height:74px; border-radius:9px;}
.pk-card.big .pk-idx{font-size:17px;} .pk-card.big .pk-idx i{font-size:12px;} .pk-card.big .pk-pip{font-size:34px;}
/* Card back — deep reef navy with a subtle inset frame + gold emblem. */
.pk-card.back{background:radial-gradient(120% 120% at 50% 0%, #17548a, #0b2c4a); border:1px solid #3079b5; color:transparent;
  box-shadow:0 3px 9px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.07), inset 0 0 0 4px rgba(0,0,0,.28);}
.pk-card.back .pk-back-mark{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,211,77,.55); font-size:18px;}
/* Deal-in: new cards glide onto the felt (stagger by --di) instead of snapping into place. Slowed
   for a more graceful reveal (esp. the flop/turn/river during an all-in run-out). */
@keyframes pk-deal{ from{opacity:0; transform:translateY(-34px) scale(.5) rotate(-10deg);} to{opacity:1; transform:none;} }
.pk-card.pk-deal{ animation:pk-deal .46s cubic-bezier(.2,.85,.25,1) backwards; animation-delay:calc(var(--di,0) * .13s); }

/* Oval poker table: a felt with seats positioned around the rim (hero bottom-centre), the community
   board + pot in the middle, and the hero's cards + action bar below. */
.pk-table{display:flex; flex-direction:column; align-items:center; gap:10px; max-width:1000px; margin:0 auto; width:100%;}
/* Info panel: a poker-themed CHART — one bordered gold-glow plate (same navy/gold styling as the
   hand-result card) split into labelled cells (Table · Stakes · Blinds · House Rake). The STREET
   lives on the felt itself, not here. */
.pk-info{display:inline-flex; align-items:stretch; margin:16px 0 4px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(11,26,40,.94), rgba(4,13,21,.96)); border:1px solid rgba(255,211,77,.5);
  box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 24px -10px rgba(255,211,77,.5);}
.pk-info-cell{display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 10px;
  border-left:1px solid rgba(255,255,255,.08); min-width:0;}
.pk-info-cell:first-child{border-left:none;}
.pk-info-lbl{font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); white-space:nowrap;}
.pk-info-val{font-size:12px; font-weight:800; color:var(--ink); white-space:nowrap;}
.pk-info-cell.mode .pk-info-val{color:#bfe8ff;}
.pk-info-cell.rake .pk-info-val{color:var(--gold);}
/* Street tag ON the felt, above the community cards (in the empty top-centre space). */
.pk-street{position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); z-index:2;
  font-size:9.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); white-space:nowrap;
  background:linear-gradient(180deg, rgba(11,26,40,.92), rgba(4,13,21,.95)); border:1px solid rgba(255,211,77,.5);
  border-radius:999px; padding:3px 11px; box-shadow:0 3px 12px rgba(0,0,0,.5), 0 0 18px -8px rgba(255,211,77,.6);}
/* Side gutters give the mid-left/mid-right seats room so they never clip; overflow-hidden still
   guards against any residual overhang causing a horizontal page scroll. Felt height-fit (see the
   desktop block for the rationale) so the whole table fits a phone screen too. */
.pk-tablewrap{position:relative; width:100%; padding:40px 30px 28px; display:flex; justify-content:center; overflow:hidden;}
.pk-felt-oval{position:relative; width:min(100%, max(240px, calc((100vh - 480px) * 1.34))); max-width:520px; aspect-ratio:1.34/1; border-radius:50%;
  background:radial-gradient(66% 64% at 50% 44%, #16906a, #0a5a3d 60%, #063827);
  border:13px solid #0b2130;
  box-shadow:inset 0 0 0 5px rgba(255,211,77,.24), inset 0 0 64px rgba(0,0,0,.55), 0 22px 54px rgba(0,0,0,.62);}
.pk-rail{position:absolute; inset:4px; border-radius:50%; border:1px solid rgba(255,255,255,.06); pointer-events:none;}
/* The BOARD is pinned to the exact centre of the felt; the pot + result float BELOW it (out of flow)
   so the community cards always sit dead-centre no matter how tall the result panel gets. */
.pk-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:86%; text-align:center;}
.pk-board{display:flex; gap:4px; justify-content:center; align-items:center; min-height:50px; flex-wrap:nowrap;}
.pk-board-empty{color:rgba(255,255,255,.35); font-size:10px; letter-spacing:.14em; font-weight:800;}
.pk-under{position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:100%;
  display:flex; flex-direction:column; align-items:center; gap:5px;}
.pk-pot{font-size:13px; font-weight:800; color:#fff; display:flex; gap:5px; justify-content:center; align-items:center; letter-spacing:.03em; text-shadow:0 1px 5px rgba(0,0,0,.75);}
.pk-pot b{color:var(--gold); text-shadow:0 0 12px rgba(255,211,77,.45);}
.pk-next,.pk-waiting{font-size:11.5px; color:rgba(255,255,255,.74);}
.pk-showdown{font-size:13px; font-weight:900; letter-spacing:.22em; color:var(--gold); text-shadow:0 0 12px rgba(255,211,77,.6); animation:pk-showdown-pulse 1s ease-in-out infinite;}
@keyframes pk-showdown-pulse{0%,100%{opacity:.65;} 50%{opacity:1;}}
/* Hand result: a glowing panel (not plain text) — trophy + hand number, then a row per winner with
   the amount and the winning hand as a chip; a pot you took is highlighted. */
.pk-result{margin-top:7px; display:inline-flex; flex-direction:column; gap:2px; align-items:stretch; text-align:center;
  background:linear-gradient(180deg, rgba(11,26,40,.95), rgba(4,13,21,.97)); border:1px solid rgba(255,211,77,.55);
  border-radius:11px; padding:6px 11px; box-shadow:0 6px 22px rgba(0,0,0,.6), 0 0 26px -8px rgba(255,211,77,.6);
  animation:pk-result-in .35s ease; max-width:100%;}
@keyframes pk-result-in{from{opacity:0; transform:translateY(6px) scale(.96);} to{opacity:1; transform:none;}}
.pk-res-head{font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  display:flex; justify-content:center; align-items:center; gap:5px;}
.pk-res-trophy{filter:drop-shadow(0 0 6px rgba(255,211,77,.7));}
/* Rake on its own footer line, clearly divided from the winners above (not crammed by the hand #). */
.pk-res-rake{margin-top:3px; padding-top:4px; border-top:1px solid rgba(255,255,255,.1); font-size:9px; font-weight:600;
  color:var(--dim); display:inline-flex; align-items:center; justify-content:center; gap:3px;}
.pk-res-row{display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:700; color:#fff; flex-wrap:wrap;}
.pk-res-row.me{color:#ffe14d; text-shadow:0 0 10px rgba(255,225,77,.4);}
.pk-res-who{font-weight:800;}
.pk-res-amt{color:var(--gold); font-weight:900; display:inline-flex; align-items:center; gap:3px;}
.pk-res-hand{font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#bfe8ff;
  background:rgba(120,205,255,.14); border:1px solid rgba(120,205,255,.35); border-radius:999px; padding:2px 7px;}
/* Seats on the rim (absolutely positioned by inline left/top %, centred on their anchor). */
.pk-seat{position:absolute; transform:translate(-50%,-50%); width:84px; padding:5px 7px; border-radius:11px; z-index:2;
  background:linear-gradient(180deg, rgba(11,26,40,.96), rgba(4,13,21,.97)); border:1px solid var(--stroke);
  box-shadow:0 5px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden;
  transition:box-shadow .2s, border-color .2s;}
/* The hero's own plate is bigger + brighter than the opponents' so "you" reads at a glance. */
.pk-seat.me{width:112px; padding:7px 10px; border-color:var(--cyan); box-shadow:0 5px 16px rgba(0,0,0,.5), 0 0 18px -6px var(--cyan);}
.pk-seat.me .pk-seat-top{font-size:11px;} .pk-seat.me .pk-seat-name{max-width:90px;} .pk-seat.me .pk-seat-bot{font-size:11.5px;}
.pk-seat.acting{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 0 0 22px -4px rgba(255,211,77,.85);}
.pk-seat.is-folded{opacity:.4;}
.pk-seat.pk-win{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset, 0 0 34px -2px rgba(255,211,77,.9); z-index:3; animation:pk-winpulse 1s ease 2;}
.pk-turnbar{position:absolute; top:0; left:0; height:5px; background:linear-gradient(90deg,var(--gold),#ff8a3d); box-shadow:0 0 10px rgba(255,211,77,.6); width:100%; animation-name:pk-shrink; animation-timing-function:linear; transform-origin:left;}
@keyframes pk-shrink{from{width:100%;} to{width:0;}}
@keyframes pk-winpulse{0%,100%{box-shadow:0 0 0 2px var(--gold) inset, 0 0 22px -4px rgba(255,211,77,.7);} 50%{box-shadow:0 0 0 2px var(--gold) inset, 0 0 40px 0 rgba(255,211,77,1);}}
.pk-seat-top{font-size:9.5px; font-weight:700; display:flex; align-items:center; gap:3px; flex-wrap:wrap; line-height:1.2;}
.pk-seat-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60px;}
.pk-seat-cards{display:flex; gap:2px; margin:4px 0;}
.pk-seat-cards .pk-card{width:24px; height:33px;} .pk-seat-cards .pk-card .pk-idx{font-size:8px;} .pk-seat-cards .pk-card .pk-idx i{font-size:6px;} .pk-seat-cards .pk-card .pk-pip{font-size:13px;}
.pk-seat-bot{display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:10px;}
.pk-stack{color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:2px;}
.pk-bet{color:var(--gold); font-weight:800;}
.pk-btn-chip{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:var(--gold); color:#2a1c00; font-size:10px; font-weight:900; flex:none;}
.pk-tag{font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; padding:1px 5px; border-radius:6px; font-weight:800;}
.pk-tag.allin{background:rgba(255,90,110,.2); color:#ff8ea0;}
.pk-tag.fold{background:rgba(255,255,255,.08); color:var(--dim);}
.pk-tag.dc{background:rgba(255,211,77,.15); color:var(--gold);}
/* Hero area below the felt: big hole cards + action bar + seat controls. */
.pk-me{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%;}
.pk-myhole{display:flex; gap:8px; min-height:74px; align-items:center; justify-content:center;}
.pk-myhole.done{opacity:.7;}   /* your cards lingering after the hand ends, until the next deal */
.pk-idle{color:var(--dim); font-size:12px; text-align:center;}
/* Prominent "your turn" countdown so the clock on you is unmistakable. */
.pk-turn{width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:1px;}
.pk-turn-lbl{font-size:11px; font-weight:900; letter-spacing:.12em; color:var(--gold); text-shadow:0 0 8px rgba(255,211,77,.4);}
.pk-turn-lbl b{font-size:13px;}
.pk-turn-track{width:100%; height:8px; border-radius:5px; background:rgba(255,255,255,.09); overflow:hidden;}
.pk-turn-fill{height:100%; border-radius:5px; width:100%; transform-origin:left;
  /* Red on the LEFT → green on the RIGHT: the bar shrinks from the right, so red is what remains
     when the clock is nearly out (urgency reads correctly). */
  background:linear-gradient(90deg,#ff5a6e,#ffd34d 45%,#41f0a0); box-shadow:0 0 12px rgba(255,211,77,.5);
  animation-name:pk-shrink; animation-timing-function:linear;}
/* Action bar: primary row (Fold / Check-Call), a full-width raise slider, then a Raise / All-in row.
   Everything on its own line with wide gaps so nothing gets tapped by accident. */
/* Generous gaps between every control so nothing (esp. money actions) gets tapped by accident. */
.pk-actions{display:flex; flex-direction:column; gap:14px; align-items:stretch; width:100%; max-width:460px;}
.pk-actions.idle{color:var(--dim); font-size:12px; text-align:center; align-items:center; min-height:46px; justify-content:center;}
.pk-act-primary{display:grid; grid-template-columns:1fr 1.35fr; gap:14px;}
.pk-act-raise{display:grid; grid-template-columns:1.55fr 1fr; gap:14px;}
.pk-a{min-height:46px; padding:0 14px; font-size:14px;}
.pk-a.pk-allin{background:rgba(255,255,255,.05); border:1px solid rgba(255,211,77,.4); color:var(--gold); box-shadow:0 0 16px -8px var(--gold);}
.pk-a.pk-raisebtn{box-shadow:0 0 20px -8px var(--cyan);}
.pk-raise-slider{width:100%; margin:5px 0;}
.pk-seatctl{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:8px;}
.pk-sc{min-height:38px; padding:0 12px; font-size:12px;}
/* Desktop: scale the whole table up so it fills the real estate like the other games, and lay the
   action bar out as one clean centred row. */
@media (min-width:760px){
  .pk-table{max-width:1080px; gap:16px;}
  .pk-info{margin:20px 0 4px;}
  .pk-info-cell{padding:9px 22px;}
  .pk-info-lbl{font-size:9.5px;}
  .pk-info-val{font-size:15px;}
  .pk-street{font-size:12.5px; padding:5px 18px; bottom:calc(100% + 20px);}
  .pk-tablewrap{padding:56px 84px;}
  /* Size the felt by the SMALLER of available width and height so the whole table — hero cards +
     action bar + Sit-out/Leave — always fits the viewport (e.g. when the browser is zoomed in, which
     shrinks the CSS viewport). The ~600px reserve covers the top bar + header + hero area + controls;
     it floors at 340px, below which the screen just scrolls (the .admin-screen overflow:auto fallback). */
  .pk-felt-oval{width:min(100%, max(340px, calc((100vh - 600px) * 1.72))); max-width:920px; aspect-ratio:1.72/1; border-width:16px;}
  .pk-center{width:60%;}
  .pk-board{min-height:104px; gap:11px;}
  .pk-board-empty{font-size:14px;}
  .pk-under{top:calc(100% + 12px); gap:8px;}
  .pk-pot{font-size:23px;}
  .pk-result{margin-top:14px; padding:10px 20px; gap:4px;}
  .pk-res-head{font-size:12.5px;}
  .pk-res-row{font-size:16px; gap:9px;}
  .pk-res-hand{font-size:12px; padding:3px 11px;}
  .pk-res-rake{font-size:12px;}
  .pk-next,.pk-waiting{font-size:14px;}
  .pk-card{width:60px; height:84px; border-radius:10px;} .pk-card .pk-idx{font-size:19px;} .pk-card .pk-idx i{font-size:13px;} .pk-card .pk-pip{font-size:34px;}
  .pk-card.big{width:92px; height:128px;} .pk-card.big .pk-idx{font-size:29px;} .pk-card.big .pk-idx i{font-size:21px;} .pk-card.big .pk-pip{font-size:54px;}
  .pk-seat{width:172px; padding:12px 15px; border-radius:16px;}
  .pk-seat.me{width:216px; padding:15px 20px;}
  .pk-seat.me .pk-seat-top{font-size:16px;} .pk-seat.me .pk-seat-name{max-width:150px;} .pk-seat.me .pk-seat-bot{font-size:16px;}
  .pk-seat-top{font-size:14px;} .pk-seat-name{max-width:120px;}
  .pk-seat-cards{margin:7px 0;}
  .pk-seat-cards .pk-card{width:54px; height:76px;} .pk-seat-cards .pk-card .pk-idx{font-size:17px;} .pk-seat-cards .pk-card .pk-idx i{font-size:12px;} .pk-seat-cards .pk-card .pk-pip{font-size:30px;}
  .pk-seat-bot{font-size:14px;}
  .pk-myhole{min-height:138px; gap:14px; margin-top:-22px;}
  .pk-actions{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:14px; max-width:940px;}
  .pk-act-primary,.pk-act-raise{display:contents;}
  .pk-raise-slider{flex:1 1 240px; min-width:200px; width:auto; margin:0;}
  .pk-a{min-height:56px; padding:0 26px; font-size:16px; min-width:130px;}
  .pk-sc{min-height:46px; padding:0 18px; font-size:15px;}
}

/* --- Shared modern polish across the utility screens --- */
/* Section headings get a small gradient accent tick for hierarchy. */
.card h3, .admin-list-head h3, .tn-h3{position:relative; padding-left:12px;}
.card h3::before, .admin-list-head h3::before, .tn-h3::before{
  content:''; position:absolute; left:0; top:.16em; bottom:.16em; width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--cyan), var(--gold));
}
/* Page header: a subtle rule under the title band so screens feel framed, not floating. */
.admin-head{border-bottom:1px solid rgba(120,205,255,.08); padding-bottom:18px; margin-bottom:4px;}
.admin-title h1{letter-spacing:.01em;}
/* A reusable balance pill for screen headers (shop/leaderboard/etc). */
.hdr-balance{margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--surface-hi);
  border:1px solid var(--edge); border-radius:999px; padding:8px 16px; box-shadow:var(--card-shadow);}
.hdr-balance .k{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);}
.hdr-balance .v{font-weight:800; font-size:17px; display:inline-flex; align-items:center; gap:5px;}