/* PvP Teen Patti. One stylesheet; the table's geometry is in --u, a unit
   derived from the viewport so every table element scales together
   (portrait design 400x720, landscape 880x500). */

:root {
  --bg: #0B0A1A; --bg2: #14132B; --panel: #1C1B3A; --panel2: #23224A; --line: rgba(244,241,234,0.12);
  --gold: #E4B95B; --gold-light: #F6E3A6; --gold-dark: #B98A2E; --mint: #5EE3A6; --red: #FF5A78; --blue: #6FA8FF;
  --text: #F4F1EA; --muted: #A4A8B4; --dim: #6E7383;
  --felt-a: #3A45B8; --felt-b: #1F2670; --felt-c: #121640; --rail-a: #2A1E14; --rail-b: #14100B;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Bricolage Grotesque', var(--font);
  --u: min(100vw / 400, 100dvh / 720);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { position: fixed; inset: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; user-select: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--gold-light); }
b { font-weight: 700; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12px; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; background: var(--bg); }
.screen.active { display: flex; }
.page { overflow-y: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: transform .08s, filter .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-gold { background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); color: #1A1204; box-shadow: 0 6px 18px rgba(228,185,91,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-ghost { background: rgba(244,241,234,.06); border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: rgba(244,241,234,.1); }
.btn-link { background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.btn-lg { min-height: 52px; font-size: 16px; border-radius: 14px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text); background: rgba(244,241,234,.06); border: 1px solid var(--line); }
.icon-btn:active { background: rgba(244,241,234,.12); }

/* ---------- splash ---------- */
.splash { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #1E1C48 0%, var(--bg) 65%); z-index: 50; }
.splash-inner { text-align: center; padding: 24px; }
.splash-logo img { width: 132px; height: 132px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(228,185,91,.25)); }
.splash-word { font-family: var(--display); font-size: 44px; margin: 14px 0 0; letter-spacing: -.02em; font-weight: 800; }
.splash-word b { color: var(--gold); }
.splash-sub { margin: 4px 0 24px; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.splash-bar { width: 200px; height: 4px; margin: 0 auto; background: rgba(244,241,234,.1); border-radius: 4px; overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); border-radius: 4px; animation: slide 1.2s ease-in-out infinite; }
.splash-note { color: var(--dim); font-size: 12px; margin-top: 12px; }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }

/* ---------- sign in ---------- */
.login { align-items: center; justify-content: center; padding: 20px; background: radial-gradient(ellipse at 50% 0%, #1E1C48 0%, var(--bg) 60%); overflow-y: auto; }
.login-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.login-brand b { display: block; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.login-brand small { color: var(--muted); letter-spacing: .25em; text-transform: uppercase; font-size: 10px; font-weight: 700; }
.login-lead { color: var(--muted); margin: 0 0 18px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; margin: 18px 0 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.phone-row { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg2); margin-bottom: 10px; }
.phone-row .cc { display: flex; align-items: center; padding: 0 12px; color: var(--gold); font-weight: 700; border-right: 1px solid var(--line); }
.phone-row input, .otp-input, textarea, .field input, .field select { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; outline: none; width: 100%; }
.phone-row input { border: 0; border-radius: 0; }
.otp-input { text-align: center; letter-spacing: .3em; font-weight: 700; font-size: 22px; margin-bottom: 10px; text-transform: uppercase; }
.login-error { color: var(--red); font-size: 13px; margin: 10px 0 0; }
.login-fine { color: var(--dim); font-size: 11px; margin: 14px 0 0; line-height: 1.5; }

/* ---------- shared top bar ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 14px 10px; background: linear-gradient(180deg, rgba(20,19,43,.98), rgba(20,19,43,.9)); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.topbar-name { flex: 1; min-width: 0; line-height: 1.15; }
.topbar-name b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-name small { color: var(--muted); font-size: 11px; }
.avatar-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.avatar-btn img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: #fff; display: block; }
.avatar-btn .lvl { position: absolute; right: -4px; bottom: -3px; background: var(--gold); color: #1A1204; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 8px; border: 2px solid var(--bg2); }
.chips-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(228,185,91,.12); border: 1px solid rgba(228,185,91,.45); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-light); }
.chips-pill i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #1A1204; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.chips-pill.small { padding: 4px 8px 4px 4px; font-size: 13px; }
.chip-ico { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3C9, var(--gold) 45%, var(--gold-dark) 90%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.6); border: 1px dashed rgba(0,0,0,.35); flex: 0 0 auto; }

/* ---------- lobby ---------- */
.lobby-main { flex: 1; overflow-y: auto; padding: 14px 14px calc(80px + var(--safe-b)); width: min(960px, 100%); margin: 0 auto; }
.lobby h2 { font-family: var(--display); font-size: 16px; font-weight: 700; margin: 14px 0 8px; letter-spacing: -.01em; }
.promo-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(228,185,91,.18), rgba(94,227,166,.12)); border: 1px solid rgba(228,185,91,.4); }
.promo-card small { display: block; font-size: 11px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
.promo-card b { display: block; font-size: 15px; }
.quick { margin-top: 14px; }
.quick-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; text-align: left; background: linear-gradient(135deg, #2B2A6E, #1B1A45); border: 1px solid rgba(111,168,255,.35); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.quick-btn b { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; }
.quick-btn small { color: var(--muted); }
.qp-ico { width: 52px; height: 52px; border-radius: 14px; background: radial-gradient(circle at 30% 30%, var(--gold-light), var(--gold-dark)); flex: 0 0 auto; position: relative; }
.qp-ico::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #1A1204; font-size: 22px; }
.quick-row { display: flex; gap: 10px; margin-top: 10px; }
.quick-row .btn { flex: 1; }
.var-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.var-row::-webkit-scrollbar { display: none; }
.var-chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: 13px; color: var(--muted); }
.var-chip.active { background: var(--gold); color: #1A1204; border-color: var(--gold); }
.var-desc { color: var(--muted); font-size: 12px; margin: 8px 0 0; min-height: 17px; }
.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tier-grid { grid-template-columns: repeat(5, 1fr); } }
.tier { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); text-align: left; position: relative; overflow: hidden; }
.tier::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(228,185,91,.18), transparent 55%); }
.tier b { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--gold-light); }
.tier small { color: var(--muted); font-size: 11px; }
.tier .tier-play { margin-top: 6px; align-self: flex-start; }
.tier.locked { opacity: .5; }
.tier .tier-live { position: absolute; top: 10px; right: 10px; font-size: 10px; color: var(--mint); font-weight: 700; }
.tier .tier-live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-right: 5px; box-shadow: 0 0 8px var(--mint); }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; background: rgba(20,19,43,.97); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); backdrop-filter: blur(8px); }
.bn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 11px; font-weight: 700; color: var(--dim); position: relative; }
.bn.active { color: var(--gold); }
.bn.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
body[data-screen="lobby"] .bottom-nav, body[data-screen="leaderboard"] .bottom-nav, body[data-screen="profile"] .bottom-nav, body[data-screen="download"] .bottom-nav, body[data-screen="rules"] .bottom-nav { display: flex; }
.page { padding-bottom: calc(64px + var(--safe-b)); }
html, body, button, .card, .felt, .pocket, .sb, .seat { touch-action: manipulation; }
.bn-ico { font-size: 20px; }
.bn-dot { position: absolute; top: 6px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }

/* ---------- pages ---------- */
.tabs { display: flex; gap: 6px; padding: 10px 14px; }
.tab { flex: 1; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--muted); }
.tab.active { color: #1A1204; background: var(--gold); border-color: var(--gold); }
.lb-list { list-style: none; margin: 0; padding: 0 14px 20px; width: min(720px, 100%); align-self: center; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; margin-bottom: 6px; background: var(--panel); }
.lb-row.me { border: 1px solid var(--gold); }
.lb-row .rank { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.lb-row .rank.top { color: var(--gold); }
.lb-row img { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.lb-row .who { flex: 1; min-width: 0; }
.lb-row .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .who small { color: var(--dim); font-size: 11px; }
.lb-row .val { font-weight: 800; color: var(--gold-light); font-variant-numeric: tabular-nums; }

.profile { padding: 16px 14px 30px; width: min(600px, 100%); align-self: center; }
.profile-hero { text-align: center; }
.avatar-big { position: relative; width: 96px; height: 96px; border-radius: 50%; }
.avatar-big img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--gold); background: #fff; display: block; }
.avatar-big span { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 10px; font-weight: 800; background: var(--panel2); padding: 2px 8px; border-radius: 8px; border: 1px solid var(--line); }
.profile-name-row { display: flex; gap: 8px; justify-content: center; margin: 16px auto 8px; max-width: 320px; }
.profile-name-row input { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-weight: 700; text-align: center; }
.level-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 6px 0; }
.xp { width: 140px; height: 8px; background: rgba(244,241,234,.1); border-radius: 8px; overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); width: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.stat-grid div { background: var(--panel); border-radius: 12px; padding: 10px 6px; text-align: center; }
.stat-grid b { display: block; font-family: var(--display); font-size: 18px; color: var(--gold-light); }
.stat-grid small { color: var(--muted); font-size: 11px; }
.avatar-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 16px; }
.avatar-picker button { border-radius: 50%; padding: 0; border: 2px solid transparent; }
.avatar-picker button.on { border-color: var(--gold); }
.avatar-picker img { width: 100%; border-radius: 50%; background: #fff; display: block; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; }
.history { margin-top: 16px; }
.h-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel); margin-bottom: 6px; font-size: 13px; }
.h-row small { color: var(--dim); display: block; }
.h-row .d { font-weight: 800; font-variant-numeric: tabular-nums; }
.h-row .d.up { color: var(--mint); } .h-row .d.down { color: var(--red); }
.rules { padding: 16px 16px 40px; width: min(640px, 100%); align-self: center; line-height: 1.55; }
.rules h3 { font-family: var(--display); margin: 22px 0 8px; font-size: 18px; }
.rules p { margin: 0 0 10px; color: var(--muted); }
.rules p b { color: var(--text); }
.rank-list div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rank-list b { color: var(--gold-light); }
.rank-list span { color: var(--muted); }
.steps { color: var(--muted); padding-left: 20px; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(5,4,14,.7); backdrop-filter: blur(4px); }
.modal-box { width: min(480px, 100%); background: var(--panel); border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + var(--safe-b)); border: 1px solid var(--line); animation: up .22s ease-out; max-height: 86dvh; overflow-y: auto; }
@media (min-width: 640px) { .modal { align-items: center; } .modal-box { border-radius: 20px; } }
@keyframes up { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head b { font-family: var(--display); font-size: 20px; }
.field { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.field > span { width: 70px; color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.field select { appearance: none; -webkit-appearance: none; }
.field.check { cursor: pointer; }
.field.check input { width: 20px; height: 20px; accent-color: var(--gold); flex: 0 0 auto; }
.field.check span { width: auto; color: var(--text); }
textarea { resize: vertical; margin-bottom: 10px; }
.menu-box { padding: 8px; }
.menu-item { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.menu-item:active { background: rgba(244,241,234,.08); }
.bonus-title { font-family: var(--display); font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; }
.bonus-title small { color: var(--muted); font-family: var(--font); font-size: 12px; }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 12px 0; }
.streak div { text-align: center; padding: 8px 2px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.streak div b { display: block; font-size: 12px; color: var(--gold-light); }
.streak div.done { background: rgba(94,227,166,.12); border-color: rgba(94,227,166,.45); }
.streak div.today { border-color: var(--gold); background: rgba(228,185,91,.15); box-shadow: 0 0 12px rgba(228,185,91,.3); }
.bonus-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.bonus-row small { display: block; color: var(--muted); font-size: 12px; }
.code-big { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: .25em; text-align: center; color: var(--gold-light); margin: 6px 0 16px; }
.gift-amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.gift-amts button { padding: 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font-weight: 800; color: var(--gold-light); }

.toasts { position: fixed; top: calc(12px + var(--safe-t)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 60; }
.toast { padding: 9px 16px; border-radius: 999px; background: rgba(20,19,43,.96); border: 1px solid var(--line); font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: up .2s ease-out; max-width: 92vw; }
.toast.warn { border-color: rgba(255,90,120,.6); color: #FFC1CC; }
.toast.good { border-color: rgba(94,227,166,.6); color: #C7F7E2; }
.offline { position: fixed; bottom: calc(12px + var(--safe-b)); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: 13px; z-index: 60; }

/* =====================================================================
   TABLE
   ===================================================================== */
.table { background: radial-gradient(ellipse at 50% 25%, #1B1A42 0%, #0B0A1A 70%); }
.tbar { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 10px 6px; flex: 0 0 auto; }
.tbar-title { flex: 1; min-width: 0; line-height: 1.15; }
.tbar-title b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar-title small { color: var(--muted); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table .icon-btn { width: 36px; height: 36px; }

.felt-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.felt { position: relative; width: calc(376 * var(--u)); height: clamp(calc(400 * var(--u)), calc(100dvh - 300 * var(--u)), calc(540 * var(--u))); }
.felt-rim { position: absolute; inset: 0; border-radius: 50% / 46%; background: linear-gradient(160deg, #6B4B2A, var(--rail-a) 40%, var(--rail-b)); box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.6); }
.felt-rim::after { content: ''; position: absolute; inset: calc(9 * var(--u)); border-radius: 50% / 46%; border: calc(1.5 * var(--u)) solid rgba(228,185,91,.55); box-shadow: 0 0 calc(10 * var(--u)) rgba(228,185,91,.25); }
.felt-cloth { position: absolute; inset: calc(14 * var(--u)); border-radius: 50% / 46%; background: radial-gradient(ellipse at 50% 38%, var(--felt-a) 0%, var(--felt-b) 55%, var(--felt-c) 100%); box-shadow: inset 0 0 calc(40 * var(--u)) rgba(0,0,0,.55); overflow: hidden; }
.felt-cloth::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.felt-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-family: var(--display); font-weight: 800; font-size: calc(30 * var(--u)); color: rgba(244,241,234,.08); letter-spacing: -.02em; line-height: 1; pointer-events: none; }
.felt-logo span { display: block; font-size: calc(12 * var(--u)); letter-spacing: .35em; text-transform: uppercase; font-weight: 700; }
.centre { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); width: calc(200 * var(--u)); }
.pot { display: flex; flex-direction: column; align-items: center; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: rgba(5,4,14,.45); border: 1px solid rgba(228,185,91,.4); }
.pot small { font-size: calc(9 * var(--u)); text-transform: uppercase; letter-spacing: .2em; color: var(--gold-light); font-weight: 700; }
.pot b { font-family: var(--display); font-size: calc(22 * var(--u)); color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pot.bump { animation: bump .3s ease-out; }
@keyframes bump { 40% { transform: scale(1.12) } }
.stake { font-size: calc(10 * var(--u)); color: var(--muted); }
.stake b { color: var(--gold-light); }
.deck-spot { display: flex; gap: calc(6 * var(--u)); align-items: center; margin-top: calc(2 * var(--u)); }
.deck-spot .card { width: calc(26 * var(--u)); height: calc(36 * var(--u)); }
.extra-card { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(10 * var(--u)); color: var(--gold-light); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.extra-card .card { width: calc(28 * var(--u)); height: calc(39 * var(--u)); }
.extra-card { flex-wrap: wrap; justify-content: center; row-gap: calc(3 * var(--u)); }
.extra-card .mix-chip { display: inline-flex; gap: calc(4 * var(--u)); align-items: baseline; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,215,120,.35); font-size: calc(7.5 * var(--u)); letter-spacing: .05em; text-transform: none; color: #F6EEDC; flex-basis: 100%; justify-content: center; }
.extra-card .mix-chip b { color: var(--gold-light); text-transform: uppercase; letter-spacing: .1em; }
.extra-card .rule { font-size: calc(8 * var(--u)); letter-spacing: .04em; text-transform: none; color: #F6EEDC; font-weight: 600; }
.msg { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(228,185,91,.92); color: #1A1204; font-weight: 800; font-size: calc(11 * var(--u)); white-space: nowrap; }

/* cards */
.card { position: relative; width: calc(64 * var(--u)); height: calc(90 * var(--u)); border-radius: calc(5 * var(--u)); background: #F4F1EA; box-shadow: 0 2px 6px rgba(0,0,0,.5); overflow: hidden; flex: 0 0 auto; }
.card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card.back { background: linear-gradient(135deg, #1D1B45, #0F0E2A); border: calc(2 * var(--u)) solid #F4F1EA; }
.card.back::before { content: ''; position: absolute; inset: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); border: 1px solid rgba(228,185,91,.7); background: repeating-linear-gradient(45deg, rgba(228,185,91,.16) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(6 * var(--u))), repeating-linear-gradient(-45deg, rgba(228,185,91,.16) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(6 * var(--u))); }
.card.back::after { content: 'PvP'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; color: var(--gold); font-size: calc(11 * var(--u)); letter-spacing: -.02em; }
.card.wild::after { content: 'WILD'; position: absolute; left: 0; right: 0; bottom: 0; background: var(--gold); color: #1A1204; font-size: calc(8 * var(--u)); font-weight: 900; text-align: center; letter-spacing: .1em; padding: 1px 0; }
.card.dealt { animation: deal .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes deal { from { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(-8deg) scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }
.card.flip { animation: flip .4s ease-out both; }
@keyframes flip { 0% { transform: rotateY(90deg) } 100% { transform: none } }

/* seats */
.seats { position: absolute; inset: 0; pointer-events: none; }
.seat { position: absolute; width: calc(88 * var(--u)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); pointer-events: auto; transition: opacity .3s; }
.seat.empty .avatar { border-style: dashed; border-color: rgba(244,241,234,.35); background: rgba(5,4,14,.35); color: var(--muted); font-size: calc(9 * var(--u)); font-weight: 700; }
.seat .avatar { position: relative; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid #F4F1EA; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.seat .avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.seat.turn .avatar { border-color: var(--gold); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(228,185,91,.35), 0 0 calc(20 * var(--u)) rgba(228,185,91,.7); }
.seat .ring { position: absolute; inset: calc(-6 * var(--u)); border-radius: 50%; background: conic-gradient(var(--gold) var(--p, 100%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5 * var(--u)), #000 calc(100% - 3 * var(--u))); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5 * var(--u)), #000 calc(100% - 3 * var(--u))); display: none; }
.seat.turn .ring { display: block; }
.seat .name { font-size: calc(10.5 * var(--u)); font-weight: 700; max-width: calc(88 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
.seat .chips { font-size: calc(10 * var(--u)); font-weight: 800; color: var(--gold-light); background: rgba(5,4,14,.6); padding: 1px calc(7 * var(--u)); border-radius: 999px; font-variant-numeric: tabular-nums; }
.seat .tag { position: absolute; top: calc(-4 * var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(8 * var(--u)); font-weight: 900; letter-spacing: .12em; padding: 1px calc(6 * var(--u)); border-radius: 999px; background: var(--blue); color: #fff; white-space: nowrap; z-index: 2; }
.seat .tag.seen { background: var(--mint); color: #062A1B; }
.seat .tag.allin { background: var(--gold, #E4B95B); color: #2A1A00; }
.seat .tag.packed { background: #3A3A4A; color: #CFCFD6; }
.seat .tag.dealer { background: var(--gold); color: #1A1204; }
.seat .dealer-btn { position: absolute; right: calc(-6 * var(--u)); top: calc(30 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--gold-light); color: #1A1204; font-size: calc(9 * var(--u)); font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1px solid #1A1204; z-index: 2; }
.seat .scards { display: flex; gap: calc(-6 * var(--u)); height: calc(32 * var(--u)); margin-top: calc(1 * var(--u)); }
.seat .scards .card { width: calc(23 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(-7 * var(--u)); border-radius: calc(2.5 * var(--u)); }
.seat .scards .card:first-child { margin-left: 0; }
.seat .scards .card.back::after { display: none; }
.seat.packed { opacity: .55; }
.seat.packed .scards { visibility: hidden; }
.seat.away .avatar { filter: grayscale(1); opacity: .7; }
.seat .bet { position: absolute; font-size: calc(9.5 * var(--u)); font-weight: 800; color: #fff; background: rgba(5,4,14,.7); border: 1px solid rgba(228,185,91,.6); padding: 1px calc(6 * var(--u)); border-radius: 999px; display: none; white-space: nowrap; }
.seat .bet.on { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); }
.seat .bet .chip-ico { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.seat .hname { font-size: calc(9 * var(--u)); color: var(--gold-light); font-weight: 700; white-space: nowrap; }
.seat.winner .avatar { border-color: var(--mint); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(94,227,166,.4), 0 0 calc(24 * var(--u)) rgba(94,227,166,.8); animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 calc(5 * var(--u)) rgba(94,227,166,.55), 0 0 calc(34 * var(--u)) rgba(94,227,166,1) } }
.seat .emo { position: absolute; top: calc(-24 * var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(24 * var(--u)); animation: emo 1.8s ease-out both; pointer-events: none; }
@keyframes emo { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0 } 20% { transform: translate(-50%, 0) scale(1.2); opacity: 1 } 80% { opacity: 1 } 100% { transform: translate(-50%, -20px) scale(1); opacity: 0 } }
.seat .bubble { position: absolute; bottom: calc(100% + 4 * var(--u)); left: 50%; transform: translateX(-50%); background: #fff; color: #1A1204; font-size: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); max-width: calc(140 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 10px rgba(0,0,0,.4); animation: up .2s ease-out; z-index: 3; }

/* Seat positions, portrait: 0 = me at the bottom, then clockwise. */
.seat[data-pos="0"] { left: 50%; top: 91%; }
.seat[data-pos="0"] .scards { display: none; }
.seat[data-pos="1"] { left: 11%; top: 72%; }
.seat[data-pos="2"] { left: 13%; top: 27%; }
.seat[data-pos="3"] { left: 50%; top: 10%; }
.seat[data-pos="4"] { left: 87%; top: 25%; }
.seat[data-pos="5"] { left: 88%; top: 76%; }
.seat[data-pos="1"] .bet, .seat[data-pos="2"] .bet { left: 100%; top: 40%; }
.seat[data-pos="4"] .bet, .seat[data-pos="5"] .bet { right: 100%; top: 40%; }
.seat[data-pos="3"] .bet { top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(2 * var(--u)); }
.seat[data-pos="0"] .bet { bottom: 100%; left: 110%; }

/* my cards */
.mine { position: relative; flex: 0 0 auto; height: calc(118 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(4 * var(--u)); }
.my-cards { display: flex; justify-content: center; height: calc(90 * var(--u)); }
.my-cards .card { margin-left: calc(-14 * var(--u)); transform-origin: 50% 110%; transition: transform .25s; }
.my-cards .card:first-child { margin-left: 0; }
.my-cards.fan .card:nth-child(1) { transform: rotate(-9deg) translateY(calc(3 * var(--u))); }
.my-cards.fan .card:nth-child(3) { transform: rotate(9deg) translateY(calc(3 * var(--u))); }
.my-cards.packed { opacity: .35; }
.my-hand-name { font-size: calc(12 * var(--u)); font-weight: 800; color: var(--gold-light); min-height: calc(16 * var(--u)); text-shadow: 0 1px 4px #000; }
.btn-see { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); min-height: calc(40 * var(--u)); font-size: calc(14 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: 999px; }

/* actions */
.presets { display: flex; gap: calc(8 * var(--u)); justify-content: center; margin-bottom: calc(5 * var(--u)); }
.presets[hidden] { display: none; }
.preset { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; border: 1px solid rgba(244,241,234,.25); background: rgba(244,241,234,.06); color: var(--muted); font: 700 calc(11 * var(--u))/1 var(--body); }
.preset.on { background: var(--gold); border-color: var(--gold); color: #1a1500; }
.actions { position: relative; flex: 0 0 auto; padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6px + var(--safe-b)); }
.turn-bar { height: calc(4 * var(--u)); border-radius: 4px; background: rgba(244,241,234,.1); overflow: hidden; margin-bottom: calc(6 * var(--u)); }
.turn-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--gold), var(--mint)); transition: width .25s linear; }
.turn-bar.on i { width: var(--w, 100%); }
.action-row { display: grid; grid-template-columns: .8fr 1.2fr 1fr 1fr; gap: calc(6 * var(--u)); }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(52 * var(--u)); border-radius: calc(14 * var(--u)); font-weight: 800; font-size: calc(13 * var(--u)); letter-spacing: .04em; text-transform: uppercase; background: var(--panel2); border: 1px solid var(--line); color: var(--text); transition: transform .08s, opacity .15s; }
.act b { font-size: calc(11 * var(--u)); color: var(--gold-light); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.act:disabled { opacity: .35; }
.act:active:not(:disabled) { transform: scale(.96); }
.act-pack { background: rgba(255,90,120,.15); border-color: rgba(255,90,120,.5); color: #FFC1CC; }
.act-bet { background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); color: #1A1204; border: 0; }
.act-bet b { color: #3A2A08; }
.act-show { background: rgba(94,227,166,.15); border-color: rgba(94,227,166,.5); color: #C7F7E2; }
.act-show b { color: #C7F7E2; }
.action-hint { text-align: center; font-size: calc(11 * var(--u)); color: var(--muted); min-height: calc(16 * var(--u)); margin-top: calc(4 * var(--u)); }

.sideshow-ask { position: absolute; left: 50%; bottom: calc(190 * var(--u)); transform: translateX(-50%); z-index: 10; background: var(--panel); border: 1px solid var(--gold); border-radius: 16px; padding: 12px 16px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: up .2s ease-out; width: min(320px, 90vw); }
.sideshow-ask b { display: block; margin-bottom: 8px; }
.sideshow-ask div { display: flex; gap: 8px; justify-content: center; }
.sideshow-ask small { display: block; margin-top: 6px; color: var(--muted); }

.table-tools { position: absolute; right: calc(6 * var(--u)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: max(6px, calc(5 * var(--u))); z-index: 5; }
/* A finger needs about 36 px: on a phone 30u comes to some 23 px. */
.tool { width: max(36px, calc(30 * var(--u))); height: max(36px, calc(30 * var(--u))); flex: none; padding: 0; border-radius: 50%; background: rgba(20,19,43,.85); border: 1px solid var(--line); font-size: max(18px, calc(16 * var(--u))); display: flex; align-items: center; justify-content: center; color: var(--text); font-weight: 800; }
.drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--panel); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; max-height: 55%; display: flex; flex-direction: column; animation: up .2s ease-out; padding-bottom: var(--safe-b); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-list { flex: 1; overflow-y: auto; padding: 8px 14px; font-size: 13px; min-height: 120px; }
.chat-list div { margin-bottom: 4px; }
.chat-list b { color: var(--gold-light); margin-right: 4px; }
.chat-form { display: flex; gap: 8px; padding: 8px 14px; }
.chat-form input { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.emoji-tray { position: absolute; left: 50%; bottom: calc(180 * var(--u)); transform: translateX(-50%); z-index: 20; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; animation: up .2s ease-out; }
.emoji-tray button { font-size: 24px; width: 40px; height: 40px; border-radius: 10px; }
.emoji-tray button:active { background: rgba(244,241,234,.1); }

.result { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; }
.result-card { text-align: center; padding: 14px 24px; border-radius: 18px; background: rgba(20,19,43,.94); border: 1px solid var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(228,185,91,.25); animation: pop .35s cubic-bezier(.2,.9,.3,1.3) both; min-width: 200px; }
@keyframes pop { from { transform: scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }
.result-card small { display: block; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-light); font-weight: 800; }
.result-card b { display: block; font-family: var(--display); font-size: 22px; margin: 2px 0; }
.result-hand { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.result-hand .card { width: calc(40 * var(--u)); height: calc(56 * var(--u)); }
.result-amt { font-weight: 800; color: var(--mint); font-size: 18px; font-variant-numeric: tabular-nums; }
.result-amt.mine { color: var(--gold-light); font-size: 22px; }
/* Real-money players: rupees, the operator's cashier, nothing that hands out free chips. */
body.real-money .chip-ico, body.real-money #bn-bonus, body.real-money #promo-bonus, body.real-money .promo, body.real-money #menu-bonus,
body.real-money #btn-attach-phone, body.real-money #tool-gift, body.real-money section.tournaments, body.real-money [data-screen="leaderboard"],
body.real-money #btn-invite, body.real-money #result-share, body.real-money #otp-test-note { display: none !important; }
body.real-money .chips-pill i { font-style: normal; }
.result-share { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,215,120,.45); background: rgba(0,0,0,.35); color: var(--gold-light); font: 700 12px/1 inherit; letter-spacing: .06em; cursor: pointer; }
.invite-app { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* flying chips and cards */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: visible; }
.fx .fchip { position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3C9, var(--gold) 45%, var(--gold-dark) 90%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.6); transform: translate(-50%, -50%); transition: left .55s cubic-bezier(.2,.7,.2,1), top .55s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.fx .fcard { position: absolute; width: calc(23 * var(--u)); height: calc(32 * var(--u)); transform: translate(-50%, -50%) rotate(-10deg); transition: left .4s cubic-bezier(.2,.8,.2,1), top .4s cubic-bezier(.2,.8,.2,1), transform .4s; }

/* ---------- landscape / desktop table ---------- */
@media (min-aspect-ratio: 1.15/1) {
  :root { --u: min(100vw / 880, 100dvh / 500); }
  .felt-wrap { flex: 0 0 auto; height: calc(100dvh - 58px - 126 * var(--u)); }
  .felt { width: calc(560 * var(--u)); height: min(calc(320 * var(--u)), calc(100dvh - 70px - 130 * var(--u))); }
  .felt-rim, .felt-rim::after, .felt-cloth { border-radius: 50% / 50%; }
  .seat[data-pos="0"] { left: 50%; top: 95%; }
  .seat[data-pos="1"] { left: 8%; top: 74%; }
  .seat[data-pos="2"] { left: 16%; top: 16%; }
  .seat[data-pos="3"] { left: 50%; top: 6%; }
  .seat[data-pos="4"] { left: 84%; top: 16%; }
  .seat[data-pos="5"] { left: 92%; top: 74%; }
  .mine { position: absolute; left: calc(50% - 250 * var(--u)); bottom: calc(6 * var(--u)); width: calc(240 * var(--u)); height: calc(116 * var(--u)); }
  .my-cards { height: calc(84 * var(--u)); }
  .my-cards .card { width: calc(58 * var(--u)); height: calc(82 * var(--u)); }
  .actions { position: absolute; left: calc(50% + 4 * var(--u)); width: calc(380 * var(--u)); bottom: calc(6 * var(--u)); padding: 0; }
  .act { min-height: calc(48 * var(--u)); }
  .table-tools { left: calc(16 * var(--u)); right: auto; top: auto; bottom: calc(16 * var(--u)); transform: none; flex-direction: row; }
  .result { top: 36%; }
  .sideshow-ask { bottom: calc(150 * var(--u)); }
  .emoji-tray { bottom: calc(60 * var(--u)); }
  .drawer { left: auto; right: 0; top: 60px; bottom: 0; width: 320px; max-height: none; border-radius: 18px 0 0 0; }
  .lobby-main { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) { .card.dealt, .card.flip, .splash-logo img, .seat.winner .avatar { animation: none; } }

/* ---- testers' round 1 (30 Sep): felt banner, in-app confirm ---- */
.banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 12; max-width: 92%; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: rgba(20,19,43,.95); border: 1px solid var(--gold); color: var(--gold-light); font-weight: 800; font-size: calc(12.5 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 24px rgba(228,185,91,.25); pointer-events: none; }
.banner.pop { animation: bannerIn .3s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes bannerIn { from { transform: translateX(-50%) scale(.7); opacity: 0 } to { transform: translateX(-50%); opacity: 1 } }
.confirm-text { font-size: 17px; font-weight: 700; margin: 6px 4px 16px; text-align: center; }
.confirm-row { display: flex; gap: 10px; }
.confirm-row .btn { flex: 1; }
#modal-confirm { z-index: 45; }

/* ---- tournaments ---- */
.tour-list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; scroll-snap-type: x mandatory; }
.tour-list::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .tour-list { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.tour { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: linear-gradient(135deg, #2B2A6E, #1B1A45); border: 1px solid rgba(111,168,255,.3); }
.tour.running { border-color: rgba(94,227,166,.5); } .tour.finished { opacity: .75; }
.tour b { font-family: var(--display); font-size: 15px; font-weight: 800; }
.tour .tour-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); }
.tour .tour-meta i { font-style: normal; color: var(--gold-light); font-weight: 700; }
.tour .tour-names { grid-column: 1 / -1; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour .status { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(244,241,234,.1); color: var(--muted); }
.tour .status.open { color: var(--mint); background: rgba(94,227,166,.14); } .tour .status.running { color: var(--gold-light); background: rgba(228,185,91,.16); }
.tour .countdown { color: var(--gold-light); font-weight: 800; }
.tour-hud { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--muted); padding: 2px 10px 4px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.tour-hud b { color: var(--gold-light); font-size: 12px; } .tour-hud span { background: rgba(244,241,234,.08); padding: 1px 8px; border-radius: 999px; }
.tour-box { text-align: center; }
.tour-box small { display: block; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-light); font-weight: 800; }
.tour-box b { display: block; font-family: var(--display); font-size: 26px; margin: 4px 0 6px; }
.tour-box p { color: var(--muted); margin: 0 0 14px; }

/* Icons and reaction art (21 Oct 2026): Phosphor icons from /icons.svg, 3D reactions from /fx3d/. */
.ico { width: 1em; height: 1em; fill: currentColor; display: block; flex: none; }
.icon-btn .ico { width: 20px; height: 20px; }
.bn-ico { display: flex; } .bn-ico .ico { width: 24px; height: 24px; }
.bn.active .bn-ico .ico { filter: drop-shadow(0 2px 6px rgba(228,185,91,.35)); }
.tool { display: inline-flex; align-items: center; justify-content: center; }
.tool .ico { width: 55%; height: 55%; }
.emoji-tray { left: 0; right: 0; margin-inline: auto; width: max-content; transform: none; }
.emoji-tray button { display: flex; align-items: center; justify-content: center; transition: transform .12s, background .12s; }
.emoji-tray button:active { transform: scale(.9); background: rgba(0,0,0,.06); }
.emoji-tray .r3d { width: 32px; height: 32px; pointer-events: none; }
.seat .emo .r3d { width: calc(34 * var(--u)); height: calc(34 * var(--u)); min-width: 26px; min-height: 26px; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
/* Toasts sit under the header bar instead of on top of the player's name. */
.toasts { top: calc(72px + var(--safe-t)); }

/* ---- Seats on the rail (22 Oct 2026, the GG / PokerStars pattern) ----
   Every seat is an avatar whose centre sits on the rail, with one plate
   under it that tucks over the avatar's bottom edge: the name, then the
   chips at the table. Status (blind, seen, packed, all in) is a badge on
   the avatar's shoulder; the dealer chip sits on the seat's inner side. The
   player to act gets a lit plate and the ring; everyone else is dimmer,
   packed players dimmer still. The pot is a pill just above the centre
   cards, which sit at the felt's centre; bets lie on the line from each seat
   towards the centre, a third of the way or so in.

   The felt fits its box: .felt-wrap is a size container and the oval takes
   the height it leaves, less room above for a head seat and below for the
   player's own plate. Seat points are worked out on the oval (portrait
   border-radius 50% / 46%, landscape a true ellipse) for five seats 72
   degrees apart, me at 6 o'clock; the seat box is inset to the rail's
   centre line. Sizes are in --u. */
.felt-wrap { container-type: size; }
.felt {
  --fw: calc(336 * var(--u));
  --fh: min(calc(540 * var(--u)), calc(100cqh - 84 * var(--u)));
  --av: calc(44 * var(--u));
  --tuck: calc(8 * var(--u));
  --plate-name: max(8px, calc(9 * var(--u)));
  --plate-num: max(8px, calc(10 * var(--u)));
  --plate-h: calc(var(--plate-name) * 1.12 + var(--plate-num) * 1.06 + 4 * var(--u) + 2px);
  --plate-max: calc(84 * var(--u));
  width: var(--fw); height: var(--fh);
}
.seats { inset: calc(7 * var(--u)); }
#seats .seat {
  left: calc(var(--sx, 50) * 1%); top: calc(var(--sy, 0) * 1%);
  width: var(--plate-max); gap: 0;
  transform: translate(-50%, calc(var(--av) / -2));
  opacity: .8;
}
#seats .seat.turn, #seats .seat.winner { opacity: 1; }
#seats .seat.packed { opacity: 1; }
#seats .seat.packed > .avatar, #seats .seat.packed > .plate { opacity: .4; }
.seat[data-pos="0"] { --sx: 50;   --sy: 100;  --bf: .34; }
.seat[data-pos="1"] { --sx: 2.4;  --sy: 68.2; --bf: .62; }
.seat[data-pos="2"] { --sx: 20.6; --sy: 8.8;  --bf: .38; }
.seat[data-pos="3"] { --sx: 50;   --sy: 0;    --bf: .46; }
.seat[data-pos="4"] { --sx: 79.4; --sy: 8.8;  --bf: .38; }
.seat[data-pos="5"] { --sx: 97.6; --sy: 68.2; --bf: .62; }

#seats .seat .avatar { width: var(--av); height: var(--av); flex: 0 0 auto; }
/* The plate: name, then chips. */
#seats .seat .plate {
  position: relative; z-index: 3; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-top: calc(var(--tuck) * -1);
  min-width: calc(var(--av) * 1.3); max-width: var(--plate-max); height: var(--plate-h);
  padding: 0 calc(7 * var(--u));
  border-radius: min(var(--r-ctl, 12px), calc(9 * var(--u)));
  background: rgba(8, 7, 22, 0.86); border: 1px solid rgba(244, 241, 234, 0.16);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
#seats .seat .plate .name {
  display: block; max-width: 100%; font-size: var(--plate-name); line-height: 1.12; font-weight: 700; color: var(--text);
  text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#seats .seat .plate .chips {
  display: block; padding: 0; background: none; border-radius: 0;
  font-size: var(--plate-num); line-height: 1.06; font-weight: 800; color: var(--gold-light); font-variant-numeric: tabular-nums;
}
#seats .seat.turn .plate {
  background: linear-gradient(180deg, rgba(228, 185, 91, 0.36), rgba(56, 38, 8, 0.94));
  border-color: var(--gold);
  box-shadow: 0 0 calc(12 * var(--u)) rgba(228, 185, 91, 0.55), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45);
}
#seats .seat.turn .plate .chips { color: #FFF1C9; }
#seats .seat.empty .name { display: none; }
/* Status: a badge on the avatar's upper shoulder. */
#seats .seat > .tag {
  top: calc(-3 * var(--u)); left: calc(50% + var(--av) / 2 - 14 * var(--u)); transform: none; z-index: 4;
  font-size: max(7px, calc(7.5 * var(--u))); letter-spacing: .08em; padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: var(--r-ctl, 12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
/* Dealer chip: the seat's inner side, towards the centre. */
#seats .seat .dealer-btn { right: calc(-8 * var(--u)); left: auto; top: calc(50% - 8 * var(--u)); }
.seat[data-pos="4"] .dealer-btn, .seat[data-pos="5"] .dealer-btn { right: auto; left: calc(-8 * var(--u)); }
/* Their cards sit beside the avatar on the inner side (under the plate for a
   head seat); the hand name at a show goes under them. */
#seats .seat .scards { position: absolute; top: calc(var(--av) / 2 - 4 * var(--u)); transform: translateY(-50%); height: calc(32 * var(--u)); margin: 0; z-index: 2; }
.seat[data-pos="1"] .scards, .seat[data-pos="2"] .scards { left: calc(50% + var(--av) / 2 + 10 * var(--u)); }
.seat[data-pos="4"] .scards, .seat[data-pos="5"] .scards { right: calc(50% + var(--av) / 2 + 10 * var(--u)); flex-direction: row-reverse; }
.seat[data-pos="4"] .scards .card, .seat[data-pos="5"] .scards .card { margin-left: 0; margin-right: calc(-7 * var(--u)); }
.seat[data-pos="4"] .scards .card:first-child, .seat[data-pos="5"] .scards .card:first-child { margin-right: 0; }
/* The head seat: cards left of the avatar, bet beside the plate (stacked
   downwards they would meet the pot on a short felt). */
#seats .seat[data-pos="3"] .scards { left: auto; right: calc(50% + var(--av) / 2 + 10 * var(--u)); flex-direction: row-reverse; }
#seats .seat[data-pos="3"] .scards .card { margin-left: 0; margin-right: calc(-7 * var(--u)); }
#seats .seat[data-pos="3"] .scards .card:first-child { margin-right: 0; }
#seats .seat .hname { position: absolute; top: calc(var(--av) / 2 + 18 * var(--u)); font-size: max(8px, calc(9 * var(--u))); text-shadow: 0 1px 3px #000; z-index: 2; }
.seat[data-pos="1"] .hname, .seat[data-pos="2"] .hname { left: calc(50% + var(--av) / 2 + 10 * var(--u)); }
.seat[data-pos="4"] .hname, .seat[data-pos="5"] .hname { right: calc(50% + var(--av) / 2 + 10 * var(--u)); }
#seats .seat[data-pos="3"] .hname { left: auto; right: calc(50% + var(--av) / 2 + 10 * var(--u)); }
.seat[data-pos="0"] .hname { display: none; }
/* Bets: on the line from the seat to the centre, --bf of the way in. */
#seats .seat .bet {
  left: calc(50% + (50 - var(--sx)) * (var(--fw) - 14 * var(--u)) * var(--bf) / 100);
  top: calc(var(--av) / 2 + (50 - var(--sy)) * (var(--fh) - 14 * var(--u)) * var(--bf) / 100);
  right: auto; bottom: auto; margin: 0; transform: translate(-50%, -50%); z-index: 2;
}

/* Upright, the upper seats' line to the centre runs into the pot on a short
   felt, so their bets sit under their cards, still on the inner side. */
@media (max-aspect-ratio: 1149/1000) {
  #seats .seat[data-pos="2"] .bet { left: calc(50% + var(--av) / 2 + 45 * var(--u)); top: calc(var(--av) / 2 + 24 * var(--u)); }
  #seats .seat[data-pos="4"] .bet { left: calc(50% - var(--av) / 2 - 45 * var(--u)); top: calc(var(--av) / 2 + 24 * var(--u)); }
}
#seats .seat[data-pos="3"] .bet { left: calc(50% + 50 * var(--u)); top: calc(var(--av) - var(--tuck) + var(--plate-h) / 2); transform: translate(0, -50%); }

/* The centre: the pot pill, the stake under it, then the cards, which sit
   on the felt's centre. */
.centre { top: 50%; transform: translate(-50%, calc(-100% + 19 * var(--u))); gap: calc(4 * var(--u)); }
.centre .pot { order: 1; } .centre .stake { order: 2; } .centre .extra-card { order: 3; } .centre .deck-spot { order: 4; }
/* With a head seat (2- and 4-seat tables) the centre keeps clear of its
   plate: on a short, wide felt the cards come down from the exact centre
   just far enough. The group above the cards' centre is the card half, the
   stake and the pot pill (and the joker card when it shows). */
.felt {
  --pot-h: calc(max(11px, calc(15 * var(--u))) * 1.15 + 6 * var(--u) + 2px);
  --stake-h: calc(max(8px, calc(9 * var(--u))) * 1.3 + 3 * var(--u) + 2px);
  --centre-up: calc(26 * var(--u) + var(--stake-h) + var(--pot-h));
}
.felt:has(.seat[data-pos="3"]) .centre { top: max(50%, calc(19 * var(--u) + var(--plate-h) + var(--centre-up))); }
.felt:has(.seat[data-pos="3"]):has(.extra-card:not([hidden])) .centre { top: max(50%, calc(60 * var(--u) + var(--plate-h) + var(--centre-up))); }
.pot {
  flex-direction: row; align-items: baseline; gap: calc(5 * var(--u));
  padding: calc(3 * var(--u)) calc(11 * var(--u)); border-radius: var(--r-ctl, 12px);
  background: rgba(5, 4, 14, 0.62); border: 1px solid rgba(228, 185, 91, 0.45);
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.35);
}
.pot small { font-size: max(8px, calc(9 * var(--u))); letter-spacing: .14em; }
.pot b { font-size: max(11px, calc(15 * var(--u))); line-height: 1.15; }
.stake {
  padding: calc(1.5 * var(--u)) calc(8 * var(--u)); border-radius: var(--r-ctl, 12px);
  background: rgba(5, 4, 14, 0.42); border: 1px solid rgba(244, 241, 234, 0.12);
  font-size: max(8px, calc(9 * var(--u))); line-height: 1.3;
}

/* Tools beside my cards on a phone held upright (the felt's right edge is a
   seat now), a 2 x 2 block. */
.mine .table-tools {
  position: absolute; right: calc(8 * var(--u)); left: auto; top: 50%; bottom: auto; transform: translateY(-50%);
  display: grid; grid-template-columns: repeat(2, auto); gap: max(6px, calc(5 * var(--u)));
}

@media (min-aspect-ratio: 1.15/1) {
  .felt-wrap { align-items: flex-end; }
  .felt {
    --fw: calc(560 * var(--u));
    --fh: min(calc(320 * var(--u)), calc(100cqh - 24 * var(--u)));
    --av: calc(50 * var(--u));
    --plate-max: calc(92 * var(--u));
  }
  .seat[data-pos="0"] { --plate-max: calc(76 * var(--u)); }
  .seat[data-pos="0"] { --sx: 50;   --sy: 100;  --bf: .34; }
  .seat[data-pos="1"] { --sx: 2.4;  --sy: 65.5; --bf: .45; }
  .seat[data-pos="2"] { --sx: 20.6; --sy: 9.5;  --bf: .46; }
  .seat[data-pos="3"] { --sx: 50;   --sy: 0;    --bf: .36; }
  .seat[data-pos="4"] { --sx: 79.4; --sy: 9.5;  --bf: .46; }
  .seat[data-pos="5"] { --sx: 97.6; --sy: 65.5; --bf: .45; }
  /* My plate hangs below the felt between my cards and the buttons. */
  .actions { left: calc(50% + 40 * var(--u)); }
  .mine .table-tools {
    left: calc(16 * var(--u) - (50vw - 250 * var(--u))); right: auto; top: auto; bottom: calc(10 * var(--u)); transform: none;
    display: flex; flex-direction: row;
  }
}

/* Four-colour cards (Settings): diamonds blue, clubs green, on the same
   card art. A blend layer recolours the suit ink and leaves the white face
   alone: the whole card on a number card, the corner index on a court card
   (whose picture keeps its colours). */
body.deck-four .card.s-diamonds, body.deck-four .card.s-clubs { isolation: isolate; }
body.deck-four .card.s-diamonds::before, body.deck-four .card.s-clubs::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 0; border-radius: 0; background-image: none;
}
body.deck-four .card.s-diamonds::before { background-color: #1F5FE0; mix-blend-mode: hue; }
body.deck-four .card.s-clubs::before { background-color: #00A35A; mix-blend-mode: lighten; }
body.deck-four .card.face.s-diamonds::before, body.deck-four .card.face.s-clubs::before { inset: 0 66% 49.5% 0; }

body.deck-four .card.wild::after { z-index: 2; }

/* ---- Top bar and table menu (round 2, 22 Oct 2026, the GG / PokerStars way) ----
   A thin bar: the menu, the table's name and boot with its limits small
   under it, then the chips, last hand and settings. The menu is a sheet over
   the dimmed table and holds leave, sit out, invite, table info, settings,
   rules, report, free chips, profile and the leaderboard. */
.tbar { gap: 6px; padding: calc(6px + var(--safe-t)) 8px 4px; }
.table .tbar .icon-btn { width: 36px; height: 36px; flex: 0 0 auto; }
.table-menu .modal-head { margin-bottom: 8px; }
.tinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 14px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-ctl, 12px); background: rgba(244, 241, 234, 0.05); font-size: 12px; }
.tinfo > div { display: flex; flex-direction: column; min-width: 0; }
.tinfo > div[hidden] { display: none; }
.tinfo span { color: var(--muted); font-size: 11px; }
.tinfo b { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmenu-list { display: grid; grid-template-columns: 1fr; gap: 2px; }
.tmenu-list .menu-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.tmenu-list .menu-item[hidden] { display: none; }
.tmenu-list .menu-item .ico { width: 18px; height: 18px; color: var(--gold-light); flex: 0 0 auto; }
@media (min-aspect-ratio: 1.15/1) and (max-height: 520px) {
  .table-menu { width: min(640px, 100%); max-height: 96dvh; overflow-y: auto; padding: 10px 12px 12px; }
  .tmenu-list { grid-template-columns: 1fr 1fr; }
  .tmenu-list .menu-item { padding: 8px 12px; font-size: 14px; }
  .tinfo { grid-template-columns: repeat(3, 1fr); padding: 6px 10px; }
}

/* Controls (21 Oct 2026). One radius for controls, one for cards, one for
   sheets; everything tappable answers a press; keyboard focus is visible.
   The press uses the scale property, which composes with a rule's own
   transform: .btn:active used to replace the See button's centring
   translate, so the button jumped when pressed. */
:root { --r-ctl: 12px; --r-card: 16px; --r-sheet: 20px; }
.btn, .btn-sm, .btn-lg, .icon-btn, .tab, .menu-item, .gift-amts button, .emoji-tray button { border-radius: var(--r-ctl); }
.btn-see { border-radius: 999px; }
.quick-btn, .tier, .promo-card, .drawer, .result-card, .sideshow-ask { border-radius: var(--r-card); }
.btn, .icon-btn, .quick-btn, .tier, .var-chip, .tab, .gift-amts button, .bn, .tool, .avatar-picker button, .chips-pill { transition: scale .09s ease-out, filter .15s, background-color .15s, border-color .15s; }
.btn:active { transform: none; }
.btn-see:active { transform: translate(-50%, -50%); }
.btn:not(:disabled):active, .icon-btn:active, .quick-btn:active, .tier:not(.locked):active, .var-chip:active, .tab:active,
.gift-amts button:active, .bn:active, .tool:active, .avatar-picker button:active, .chips-pill:active { scale: .97; }
@media (hover: hover) {
  .icon-btn:hover, .quick-btn:hover, .tier:not(.locked):hover, .var-chip:hover, .tab:hover, .gift-amts button:hover, .tool:hover { filter: brightness(1.1); }
}
:where(button, a, [role="button"]):focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.tier.locked { cursor: not-allowed; }