/* ============================================================================
   Chipped — "Underground Casino Vault" theme.
   Felt-green velvet + charcoal components + thin gold-neon borders + amber type.
   Mobile-first.
   ========================================================================== */
:root {
  --felt: #0d3a2f;
  --felt-2: #0a2c24;
  --felt-3: #072019;
  --panel: #14140f;
  --panel-2: #1c1b14;
  --line: #33301f;
  --gold: #e8c66a;
  --gold-2: #ffdd8a;
  --gold-dim: #a99248;
  --ink: #f4ead3;
  --muted: #a9a284;
  --good: #52d08a;
  --bad: #e8596b;
  --red: #e8596b;      /* hearts / diamonds */
  --chip: #e8c66a;
  --r: 16px;
  --r-lg: 22px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --shadow: 0 24px 60px -24px rgba(0,0,0,.85);
  --glow-gold: 0 0 0 1px rgba(232,198,106,.55), 0 10px 30px -10px rgba(232,198,106,.4);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html {
  /* CRITICAL — without this iOS Safari (and Android Chrome) apply "text
     autosizing"/font boosting and inflate every font on a landscape phone,
     which is what made the whole app render enormous on a real device. It
     does NOT reproduce in Chrome DevTools' mobile emulation, so it has to be
     set explicitly rather than tested away. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'Rubik', system-ui, sans-serif; color: var(--ink); font-weight: 500;
  background:
    radial-gradient(120% 80% at 50% -10%, #14503f 0%, var(--felt) 45%, var(--felt-2) 100%),
    var(--felt-2);
  background-attachment: fixed; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%); }
#app { position: relative; z-index: 1; min-height: 100%; }
h1, h2, h3, .display { font-family: 'Suez One', serif; font-weight: 400; }
button, input { font-family: inherit; }
.mono { font-variant-numeric: tabular-nums; }
.ic { display: inline-block; vertical-align: -.15em; }

.screen { min-height: 100dvh; width: 100%; max-width: 540px; margin: 0 auto; padding: calc(20px + var(--safe-t)) 18px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; animation: rise .35s var(--ease) both; }
.center { align-items: center; justify-content: center; text-align: center; }
.grow { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.row { display: flex; gap: 10px; align-items: center; }
.spread { justify-content: space-between; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
@keyframes deal { from { opacity: 0; transform: translateY(-24px) rotate(-6deg); } }

.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.title { font-family: 'Suez One'; font-size: clamp(30px, 8vw, 42px); line-height: 1.05; color: var(--gold-2); }
h2.title { font-size: clamp(24px, 6vw, 32px); }
.sub { color: var(--muted); font-size: 15px; line-height: 1.55; }
.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.gold { color: var(--gold-2); }

/* ---- Buttons -------------------------------------------------------------- */
.btn { appearance: none; cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--r); font-weight: 800; font-size: 16px; padding: 15px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .1s var(--ease), filter .15s, box-shadow .2s; color: var(--ink); background: var(--panel-2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 22px; font-size: 17px; }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; border-color: transparent; box-shadow: var(--glow-gold); }
.btn-gold:hover { filter: brightness(1.05); }
.btn-danger { background: linear-gradient(180deg, #ef6f7e, var(--bad)); color: #2a0710; border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }

/* ---- Cards (containers) --------------------------------------------------- */
.panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.panel-gold { border-color: rgba(232,198,106,.4); }
.tap-card { cursor: pointer; text-align: right; display: flex; gap: 14px; align-items: center; transition: border-color .15s, transform .1s var(--ease); }
.tap-card:active { transform: scale(.99); }
.tap-card:hover { border-color: rgba(232,198,106,.45); }
.tap-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--felt); color: var(--gold); border: 1.5px solid var(--line); }
.tap-card.primary .tap-ic { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; border-color: transparent; }
.tap-t { font-family: 'Suez One'; font-size: 19px; color: var(--ink); }
.tap-d { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.4; }
.tap-card .chev { margin-inline-start: auto; color: var(--muted); flex: none; }
.tap-card.soon { opacity: .6; }
.soon-tag { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--felt); border-radius: 999px; padding: 2px 8px; margin-inline-start: 6px; }

/* ---- Wallet header -------------------------------------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand-sm { display: inline-flex; align-items: center; gap: 8px; font-family: 'Suez One'; font-size: 18px; color: var(--gold-2); }
.wallet-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; background: var(--panel-2); border: 1.5px solid rgba(232,198,106,.4); border-radius: 999px; padding: 8px 14px; font-weight: 800; box-shadow: var(--glow-gold); }
.wallet-pill .amt { font-family: 'Suez One'; color: var(--gold-2); font-size: 18px; display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-ic { width: 22px; height: 22px; flex: none; }

.wallet-hero { text-align: center; }
.wallet-hero .lbl { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wallet-hero .amt { font-family: 'Suez One'; font-size: clamp(48px, 15vw, 76px); line-height: 1; color: var(--gold-2); display: inline-flex; align-items: center; gap: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-hero .amt .chip-ic { width: clamp(34px, 9vw, 48px); height: clamp(34px, 9vw, 48px); }

/* ---- Inputs / avatars ----------------------------------------------------- */
.input { width: 100%; background: var(--felt-3); border: 1.5px solid var(--line); color: var(--ink); border-radius: 14px; padding: 15px 16px; font-size: 17px; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,198,106,.18); }
.input.center { text-align: center; }
.err { color: var(--bad); font-size: 13.5px; font-weight: 700; min-height: 17px; text-align: center; }
.seg { display: flex; background: var(--felt-3); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: none; background: transparent; color: var(--muted); font-weight: 800; font-size: 15px; padding: 10px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #2a1e05; font-weight: 900; font-size: 15px; flex: none; }
.av-lg { width: 64px; height: 64px; font-size: 28px; }

/* ---- Bet stepper / chips -------------------------------------------------- */
.bet-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bet-row button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 24px; font-weight: 800; cursor: pointer; }
.bet-row button:active { transform: scale(.94); }
.bet-val { font-family: 'Suez One'; font-size: 40px; color: var(--gold-2); min-width: 96px; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.chip-quick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip-btn { border: 1.5px solid var(--line); background: var(--panel-2); color: var(--gold-2); font-weight: 800; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.chip-btn:active { transform: scale(.95); }

/* ---- Playing cards: a real two-sided, flip-capable component --------------
   .pcard-3d (perspective) > .pcard-inner (rotates on reveal) > two
   .pcard-face children (front = card-back pattern, back-face = the real
   rank/suit, pre-rotated 180deg). backface-visibility keeps the wrong face
   hidden throughout the turn, so no content needs to be swapped mid-flip —
   by the time a card is animated the server has already sent its real value. */
.felt-table { background: radial-gradient(90% 70% at 50% 30%, #10473a, var(--felt-2)); border: 1.5px solid rgba(232,198,106,.25); border-radius: var(--r-lg); padding: 20px 16px; box-shadow: inset 0 0 60px rgba(0,0,0,.4), var(--shadow); }
.seat-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.hand { display: flex; justify-content: center; gap: 10px; margin: 8px 0; }
.pcard-3d { width: var(--pcard-w, 84px); height: var(--pcard-h, 118px); max-width: 110px; max-height: 154px; perspective: 800px; position: relative; flex: none; }
.pcard-3d.deal-in { animation: dealIn .35s var(--ease) both; }
.pcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s var(--ease); }
.pcard-inner.flipped { transform: rotateY(180deg); }
.pcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 22px -8px rgba(0,0,0,.6); }
.pcard-face.front { background: repeating-linear-gradient(45deg, #123f33, #123f33 6px, #0e352b 6px, #0e352b 12px); border: 2px solid var(--gold-dim); }
.pcard-face.back-face { background: linear-gradient(160deg, #fffdf5, #f2ead6); transform: rotateY(180deg); }
.pcard-face.back-face.red { color: var(--red); }
.pcard-face.back-face.black { color: #1a1712; }
.pcard-face.back-face .rank { font-family: 'Suez One'; font-size: 24px; line-height: 1; }
.pcard-face.back-face .suit-lg { align-self: center; }
.pcard-face.back-face .rank.b { transform: rotate(180deg); align-self: flex-end; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-24px) rotate(-6deg) scale(.9); } }
.vs { text-align: center; font-family: 'Suez One'; color: var(--muted); font-size: 14px; letter-spacing: .2em; }

/* ---- Transient FX (chip flights, win particles) — spawned on <body>, ------
   outside #app, so they survive the next mount() wipe and finish on their own. */
.fx-chip, .fx-particle { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 60; }
.fx-chip { width: 22px; height: 22px; }
.fx-chip svg { width: 100%; height: 100%; color: var(--chip); }
.fx-particle { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px rgba(232,198,106,.6); }

.outcome { text-align: center; font-family: 'Suez One'; font-size: clamp(28px, 8vw, 40px); animation: pop .4s var(--ease) both; }
.outcome.win { color: var(--good); }
.outcome.lose { color: var(--bad); }
.outcome.push { color: var(--gold-2); }
.delta { font-family: 'Suez One'; font-size: 26px; animation: pop .4s var(--ease) both; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }

/* ---- Stats / leaderboard -------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-family: 'Suez One'; font-size: 24px; color: var(--gold-2); margin-top: 2px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 14px; animation: dealIn .32s var(--ease) both; }
.lb-row.me { border-color: rgba(232,198,106,.5); box-shadow: var(--glow-gold); }
.lb-rank { font-family: 'Suez One'; font-size: 18px; color: var(--muted); width: 30px; text-align: center; }
.lb-rank.top { color: var(--gold-2); }
.lb-name { font-weight: 700; }
.lb-wallet { margin-inline-start: auto; font-family: 'Suez One'; color: var(--gold-2); display: inline-flex; align-items: center; gap: 6px; }

/* ---- Toast ---------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translate(-50%, 12px); background: var(--panel-2); border: 1.5px solid var(--line); color: var(--ink); padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; z-index: 50; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.pulse { width: 58px; height: 58px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(232,198,106,.5); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232,198,106,.5);} 70% { box-shadow: 0 0 0 20px rgba(232,198,106,0);} 100% { box-shadow: 0 0 0 0 rgba(232,198,106,0);} }

/* ---- Landscape gate ------------------------------------------------------- */
.rotate-gate { position: fixed; inset: 0; z-index: 9999; display: none; background: var(--felt-2); }
.rotate-gate .rg-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px; }
.rotate-gate .rg-inner svg { animation: rock 2s ease-in-out infinite; }
@keyframes rock { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
.rg-t { font-family: 'Suez One'; font-size: 24px; color: var(--gold-2); }
.rg-d { color: var(--muted); }
@media (orientation: portrait) and (pointer: coarse) { .rotate-gate { display: grid; place-items: center; } }

/* ---- Category grid -------------------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cat-card { text-align: center; cursor: pointer; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color .15s, transform .1s var(--ease); }
.cat-card:active { transform: scale(.98); }
.cat-card:not(.soon):hover { border-color: rgba(232,198,106,.5); }
.cat-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--felt); color: var(--gold); border: 1.5px solid var(--line); }
.cat-card:not(.soon) .cat-ic { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; border-color: transparent; }
.cat-name { font-family: 'Suez One'; font-size: 19px; }
.cat-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.cat-card.soon { opacity: .6; }
.table-row .badge { margin-inline-start: auto; }

/* ---- Landscape table view ------------------------------------------------- */
.table-view { height: 100dvh; display: flex; flex-direction: column; padding: calc(9px + var(--safe-t)) 12px calc(9px + var(--safe-b)); gap: 9px; overflow: hidden; animation: rise .3s var(--ease) both; }
.table-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.felt { flex: 1; min-height: 0; background: radial-gradient(80% 92% at 50% 12%, #10473a, var(--felt-2)); border: 2px solid rgba(232,198,106,.3); border-radius: 26px; box-shadow: inset 0 0 70px rgba(0,0,0,.45), var(--shadow); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; overflow: hidden; }
.dealer-area { text-align: center; }
.dealer-area .seat-hand { min-height: 0; }
.seats-row { display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.seats-row::-webkit-scrollbar { height: 0; }
.seat { flex: 1 1 0; min-width: 100px; max-width: 160px; background: rgba(0,0,0,.2); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; }
.seat.empty { display: grid; place-items: center; border-style: dashed; opacity: .5; min-height: 118px; }
.seat.mine { border-color: rgba(232,198,106,.55); box-shadow: var(--glow-gold); }
.seat.active { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold-2); }
.seat-empty { color: var(--muted); font-size: 13px; }
.seat-hand { display: flex; justify-content: center; gap: 5px; min-height: 64px; }
.hand-val { font-family: 'Suez One'; color: var(--gold-2); font-size: 18px; margin-top: 3px; }
.seat-name { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 13px; margin-top: 3px; }
.seat-name .av { width: 22px; height: 22px; font-size: 11px; }
.seat-chips { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.seat-chips.bet-pulse, .pseat-stack.bet-pulse { animation: betPulse .4s var(--ease); }
@keyframes betPulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--gold-2); } 100% { transform: scale(1); } }
.seat-res { margin-top: 4px; font-weight: 800; font-size: 13px; }
.seat-res.win, .seat-res.blackjack { color: var(--good); }
.seat-res.lose { color: var(--bad); }
.seat-res.push { color: var(--gold-2); }
.table-controls { display: flex; gap: 10px; justify-content: center; align-items: center; min-height: 56px; flex-wrap: wrap; }
.bet-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* compact cards on the felt */
.felt .pcard-3d { --pcard-w: 52px; --pcard-h: 74px; }
.felt .pcard-face { padding: 5px; border-radius: 9px; }
.felt .pcard-face .rank { font-size: 15px; }
.felt .pcard-face .suit-lg svg { width: 20px; height: 20px; }
.seat.empty { min-height: 100px; }
.seat-hand { min-height: 60px; }

/* ---- Texas Hold'em table --------------------------------------------------- */
.poker-felt { justify-content: space-between; }
.board { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pot { font-family: 'Suez One'; color: var(--gold-2); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 999px; padding: 5px 15px; }
.community { display: flex; gap: 5px; min-height: 64px; align-items: center; }
.board-wait { color: var(--muted); font-size: 13px; }
.pseats { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.pseats::-webkit-scrollbar { height: 0; }
.pseat { flex: 1 1 0; min-width: 98px; max-width: 150px; background: rgba(0,0,0,.22); border: 1.5px solid var(--line); border-radius: 12px; padding: 7px; text-align: center; position: relative; }
.pseat.empty { display: grid; place-items: center; border-style: dashed; opacity: .5; color: var(--muted); min-height: 108px; font-size: 12px; }
.pseat.mine { border-color: rgba(232,198,106,.55); box-shadow: var(--glow-gold); }
.pseat.active { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold-2); }
.pseat.folded { opacity: .42; }
.pseat-holes { display: flex; justify-content: center; gap: 4px; min-height: 56px; }
.pseat-name { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; margin-top: 4px; }
.pseat-name .av { width: 20px; height: 20px; font-size: 10px; }
.pseat-stack { color: var(--muted); font-size: 11px; margin-top: 2px; }
.pseat-res { font-weight: 800; font-size: 12px; margin-top: 2px; }
.pseat-res.win { color: var(--good); }
.pseat-hand-name { font-size: 11px; color: var(--gold-2); margin-top: 2px; }
.dealer-btn { position: absolute; top: 4px; inset-inline-start: 4px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; font-weight: 900; font-size: 12px; display: grid; place-items: center; }
.allin-b { font-size: 9px; background: var(--bad); color: #fff; border-radius: 4px; padding: 1px 4px; font-weight: 800; }
.poker-felt .pcard-3d { --pcard-w: 40px; --pcard-h: 56px; }
.poker-felt .pcard-face { padding: 3px; border-radius: 7px; }
.poker-felt .pcard-face .rank { font-size: 12px; }
.poker-felt .pcard-face .suit-lg svg { width: 14px; height: 14px; }
.community .pcard-3d { --pcard-w: 46px; --pcard-h: 64px; }
.raise-box { display: flex; align-items: center; gap: 8px; }
.raise-box input[type=range] { width: 110px; accent-color: var(--gold); }

/* ---- Casino lobby: one landscape screen, category TABS on top, no page scroll */
.casino { height: 100dvh; display: flex; flex-direction: column; padding: calc(10px + var(--safe-t)) 14px calc(10px + var(--safe-b)); gap: 10px; overflow: hidden; animation: rise .3s var(--ease) both; }
.casino-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.topbtn { padding: 8px 10px; }
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; flex: none; padding-bottom: 2px; }
.cat-tabs::-webkit-scrollbar { height: 0; }
.cat-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 15px; cursor: pointer; white-space: nowrap; transition: transform .1s var(--ease); }
.cat-tab:active { transform: scale(.96); }
.cat-tab.on { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; border-color: transparent; box-shadow: var(--glow-gold); }
.cat-tab.soon { opacity: .7; }
.cat-tab .soon-i { font-size: 10px; font-style: normal; opacity: .8; }
.casino-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.main-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.main-title { font-family: 'Suez One'; font-size: 20px; display: inline-flex; align-items: center; gap: 8px; }
.tables-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-inline-end: 2px; }
.tables-scroll::-webkit-scrollbar { width: 0; }
.table-row { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: right; transition: border-color .15s, transform .1s var(--ease); }
.table-row:hover { border-color: rgba(232,198,106,.45); }
.table-row:active { transform: scale(.99); }
.tr-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--felt); color: var(--gold); border: 1.5px solid var(--line); flex: none; }
.tr-name { font-family: 'Suez One'; font-size: 17px; }
.tr-sub { color: var(--muted); font-size: 12.5px; }
.table-row .badge { margin-inline-start: auto; }
.empty-tables { text-align: center; color: var(--muted); padding: 22px; background: var(--panel-2); border: 1.5px dashed var(--line); border-radius: 16px; }
.cat-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.cat-hero-ic { width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1e05; box-shadow: var(--glow-gold); }
.cat-hero-ic.soon { background: var(--felt); color: var(--gold); border: 1.5px solid var(--line); box-shadow: none; }

/* Fit EVERY screen to one landscape viewport — no page scrolling anywhere. */
@media (orientation: landscape) {
  .screen { height: 100dvh; min-height: 0; overflow: hidden; justify-content: center; gap: 6px; padding-top: calc(8px + var(--safe-t)); padding-bottom: calc(8px + var(--safe-b)); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .title { font-size: 28px; }
  .sub { font-size: 13px; }
  .btn { padding: 12px 18px; }
  .btn-lg { padding: 14px 20px; }
}
.auth-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 360px; }
.auth-brand { text-align: center; }
.auth-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
@media (orientation: landscape) {
  .auth-wrap { flex-direction: row; max-width: 760px; align-items: center; gap: 34px; }
  .auth-brand, .auth-form { flex: 1; }
}
.war-duel { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 6vw, 44px); }
.duel-side { text-align: center; }
.duel-side .hand { margin-top: 6px; }
.war-duel .pcard-3d { --pcard-w: 58px; --pcard-h: 82px; }
.war-duel .pcard-face { padding: 5px; border-radius: 9px; }
.war-duel .pcard-face .rank { font-size: 16px; }
.war-duel .pcard-face .suit-lg svg { width: 22px; height: 22px; }
.vs { font-family: 'Suez One'; color: var(--gold-2); font-size: 20px; letter-spacing: .12em; }
@media (orientation: landscape) { .felt-table { padding: 10px; } .outcome { font-size: clamp(24px, 6vw, 30px); } .duel-side .seat-label { font-size: 11px; } }
.lb-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; width: 100%; padding-inline-end: 2px; }
.lb-scroll::-webkit-scrollbar { width: 0; }

/* ============================================================================
   SHORT-LANDSCAPE PHONES — the app forces landscape, so on a phone the usable
   height is only ~330-430px. Everything below scales the UI down to fit that
   band instead of assuming a tablet-sized landscape viewport.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 460px) {
  .casino, .table-view { padding: calc(6px + var(--safe-t)) 10px calc(6px + var(--safe-b)); gap: 6px; }
  .brand-sm { font-size: 15px; }
  .wallet-pill { padding: 5px 11px; gap: 6px; }
  .wallet-pill .amt { font-size: 15px; }
  .chip-ic { width: 17px; height: 17px; }
  .topbtn { padding: 6px 8px; }
  .cat-tab { padding: 7px 13px; font-size: 13px; gap: 6px; }
  .main-title { font-size: 16px; }
  .btn { padding: 9px 14px; font-size: 14px; }
  .btn-lg { padding: 10px 16px; font-size: 15px; }

  .felt { border-radius: 18px; padding: 8px; gap: 6px; }
  .seat, .pseat { padding: 6px; }
  .seat-label { font-size: 10px; }
  .hand-val { font-size: 15px; }
  .seat-name, .pseat-name { font-size: 11px; }
  .seat-chips, .pseat-stack { font-size: 10px; }
  .table-controls { min-height: 44px; gap: 8px; }

  .felt .pcard-3d { --pcard-w: 42px; --pcard-h: 60px; }
  .felt .pcard-face .rank { font-size: 12px; }
  .felt .pcard-face .suit-lg svg { width: 15px; height: 15px; }
  .poker-felt .pcard-3d { --pcard-w: 34px; --pcard-h: 48px; }
  .poker-felt .pcard-face .rank { font-size: 10px; }
  .poker-felt .pcard-face .suit-lg svg { width: 11px; height: 11px; }
  .community .pcard-3d { --pcard-w: 38px; --pcard-h: 54px; }
  .war-duel .pcard-3d { --pcard-w: 48px; --pcard-h: 68px; }

  .title { font-size: 22px; }
  h2.title { font-size: 20px; }
  .sub { font-size: 12px; }
  .bet-val { font-size: 26px; min-width: 74px; }
  .bet-row button { width: 40px; height: 40px; font-size: 20px; }
  .outcome { font-size: 24px; }
  .delta { font-size: 20px; }
  .stat { padding: 8px; }
  .stat .v { font-size: 18px; }
  .av-lg { width: 44px; height: 44px; font-size: 20px; }
}
/* Very short (older/smaller phones in landscape) — one more step down. */
@media (orientation: landscape) and (max-height: 360px) {
  .cat-tab { padding: 6px 11px; font-size: 12px; }
  .felt .pcard-3d { --pcard-w: 36px; --pcard-h: 51px; }
  .poker-felt .pcard-3d { --pcard-w: 29px; --pcard-h: 41px; }
  .community .pcard-3d { --pcard-w: 32px; --pcard-h: 45px; }
  .btn, .btn-lg { padding: 8px 12px; font-size: 13px; }
  .title { font-size: 19px; }
}

/* ---- Stack / wallet / total pill (poker tables) ---------------------------
   Splits the two places your chips actually live and shows the total, so the
   topbar answers "how much do I have?" rather than only "what's in my wallet?" */
.stack-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1.5px solid rgba(232,198,106,.4);
  border-radius: 999px; padding: 5px 14px; box-shadow: var(--glow-gold);
}
.sp-part { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.sp-part i { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sp-part b { font-family: 'Suez One'; font-weight: 400; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-part.total { align-items: center; gap: 5px; }
.sp-part.total b { color: var(--gold-2); font-size: 17px; }
.sp-sep { width: 1px; align-self: stretch; background: var(--line); }
@media (orientation: landscape) and (max-height: 460px) {
  .stack-pill { gap: 7px; padding: 4px 11px; }
  .sp-part i { font-size: 8.5px; }
  .sp-part b { font-size: 13px; }
  .sp-part.total b { font-size: 15px; }
}

/* ============================================================================
   THE TABLE — was a flat green rounded rectangle with a dead void in the
   middle, which is what read as "generic". Now it's an actual casino table:
   a dark padded rail around a felt bed, a gold inlay line following the rail,
   a lit centre where the action is, and stitched detail on the rail.
   ========================================================================== */
.felt {
  position: relative;
  border: none;
  border-radius: 999px / 46%;
  padding: 14px 22px;
  background:
    /* lit centre so the board reads as the focal point */
    radial-gradient(58% 74% at 50% 40%, rgba(255, 240, 200, .10) 0%, transparent 62%),
    radial-gradient(80% 92% at 50% 12%, #12513f 0%, #0e3f32 46%, #0a2c24 100%);
  box-shadow:
    inset 0 0 0 3px rgba(232, 198, 106, .32),          /* gold inlay */
    inset 0 0 0 16px #1b1710,                           /* the rail */
    inset 0 0 0 17px rgba(232, 198, 106, .14),
    inset 0 14px 44px rgba(0, 0, 0, .5),
    0 22px 60px -22px rgba(0, 0, 0, .85);
}
/* Stitching on the rail — the detail that sells it as a real table. */
.felt::before {
  content: ''; position: absolute; inset: 7px; border-radius: 999px / 46%;
  border: 1px dashed rgba(232, 198, 106, .16);
  pointer-events: none;
}
/* Faint house mark in the dead centre of the felt, behind everything. */
.felt::after {
  content: '♠'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Suez One', serif; font-size: 128px; line-height: 1;
  color: rgba(232, 198, 106, .045); pointer-events: none; z-index: 0;
}
.felt > * { position: relative; z-index: 1; }

/* Seats become player "pods" sitting on the rail rather than flat cards. */
.seat, .pseat {
  background: linear-gradient(180deg, rgba(28, 27, 20, .92), rgba(20, 20, 15, .92));
  border: 1.5px solid rgba(232, 198, 106, .16);
  border-radius: 16px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.seat.empty, .pseat.empty {
  background: rgba(0, 0, 0, .18);
  border-style: dashed; border-color: rgba(232, 198, 106, .13);
  box-shadow: none;
}
.seat.mine, .pseat.mine { border-color: rgba(232, 198, 106, .5); }
.seat.active, .pseat.active {
  border-color: var(--gold-2);
  box-shadow: 0 0 0 2px var(--gold-2), 0 0 22px -4px rgba(232, 198, 106, .55);
  animation: seatGlow 1.6s ease-in-out infinite;
}
@keyframes seatGlow {
  50% { box-shadow: 0 0 0 2px var(--gold-2), 0 0 30px 0 rgba(232, 198, 106, .3); }
}

/* Pot reads like a real chip tray in the middle of the table. */
.pot {
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .34));
  border: 1px solid rgba(232, 198, 106, .3);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
  letter-spacing: .02em;
}
.board-wait { opacity: .55; font-style: italic; letter-spacing: .04em; }

@media (orientation: landscape) and (max-height: 460px) {
  .felt { padding: 10px 16px; box-shadow:
    inset 0 0 0 2px rgba(232,198,106,.32), inset 0 0 0 11px #1b1710,
    inset 0 0 0 12px rgba(232,198,106,.14), inset 0 10px 30px rgba(0,0,0,.5),
    0 18px 44px -20px rgba(0,0,0,.85); }
  .felt::before { inset: 5px; }
  .felt::after { font-size: 78px; }
  .seat, .pseat { border-radius: 12px; }
}