/* ==========================================================================
   Hold'em — "private card room at night"
   Ink, walnut, racing green and champagne brass. Matte, sparse, warm.
   ========================================================================== */
:root {
  --ink: #07080b;
  --panel: rgba(18, 19, 22, 0.9);
  --panel-solid: #121316;
  --raise: #191a1e;
  --hi: rgba(255, 255, 255, 0.06);       /* 1px top highlight */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f3efe6;
  --muted: #a39e94;
  --dim: #8b877f;
  --brass: #c9a86a;
  --brass-hi: #e9d3a1;
  --brass-lo: #8a6a33;
  --brass-ink: #2b1f0a;
  --pos: #5bc08a;
  --neg: #e0645f;
  --radius: 12px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Fraunces, Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); overflow: hidden;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum", "cv11"; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.hidden { display: none !important; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font: 600 10px/1 var(--font); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 2px var(--ink); }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0,0,0,.7) 100%); }

/* ------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px;
  font-weight: 600; font-size: 14px; background: var(--raise); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 var(--hi);
  transition: border-color .15s, background .15s, transform .1s; white-space: nowrap; }
.btn:hover { border-color: rgba(255,255,255,.24); background: #1e1f24; }
.btn:active { transform: translateY(1px); }
.btn.gold { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); color: var(--brass-ink); border-color: rgba(233,211,161,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(201,168,106,.18); }
.btn.gold:hover { background: linear-gradient(180deg, #f2e0b4, #d4b47a); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.big { height: 52px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn.danger, .link-btn.danger { color: #eb9a96; }
.btn.danger-solid { background: #2a1416; border-color: #5a2a2c; color: #f1b3af; }
.link-btn { color: var(--muted); font-weight: 500; font-size: 13px; padding: 8px 6px; border-radius: 6px; }
.link-btn:hover { color: var(--text); }
.icon-btn { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi); color: var(--text); transition: border-color .15s; }
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn.small { width: 34px; height: 34px; border-radius: 8px; }
.icon-btn.small svg { width: 16px; height: 16px; }
#btnSound .off { display: none; }
#btnSound.muted .on { display: none; }
#btnSound.muted .off { display: block; }

/* ------------------------------------------------------------- screens / panels */
#screens { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 72px 16px 32px; overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s; pointer-events: none; }
.screen > * { transform: translateY(8px); transition: transform .35s var(--ease); }
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }
.screen.active > * { transform: none; }
.screen.dim { background: rgba(4, 5, 7, .62); }
.panel { width: min(520px, 100%); padding: 28px 32px 32px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.panel.wide { width: min(860px, 100%); }
.panel.narrow { width: min(380px, 100%); }
.panel h2 { font-family: var(--display); font-weight: 600; font-size: 28px; margin: 0; letter-spacing: .005em; }
.panel h2.center { margin-bottom: 20px; }
.panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.panel-head .back { width: 36px; height: 36px; }
.note { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 18px 0; }
.hint { color: var(--dim); font-size: 12px; margin: 8px 0 0; min-height: 1em; }
.row { display: flex; gap: 10px; }
.section { margin-bottom: 6px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; margin: 22px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.form-grid { display: grid; gap: 20px; margin-bottom: 8px; }
.form-grid.compact { gap: 14px; margin: 14px 0 6px; }
.field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.field-label.split { display: flex; justify-content: space-between; align-items: baseline; }
.field-label .v { color: var(--brass-hi); letter-spacing: .02em; text-transform: none; font-size: 13px; }
.row-field { display: flex; align-items: center; justify-content: space-between; }
.row-field .field-label { margin: 0; }
input[type=text], input:not([type]), input[type=number] { width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(0,0,0,.35); color: var(--text); padding: 0 14px; font: 500 15px var(--font); transition: border-color .15s; }
input:focus { border-color: rgba(201,168,106,.6); outline: none; }
input::placeholder { color: var(--dim); }

/* range input (menus) */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brass) var(--p, 50%), rgba(255,255,255,.12) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brass); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--brass-hi); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--brass); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: var(--brass-hi); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--brass); }

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.seg.full { display: flex; }
.seg.full button { flex: 1; }
.seg button { height: 34px; padding: 0 12px; border-radius: 7px; font-weight: 500; font-size: 13px; color: var(--muted); transition: color .15s, background .15s; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: #24252b; color: var(--text); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--line-2); }
.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.stepper button { width: 34px; height: 32px; border-radius: 7px; font-size: 18px; color: var(--muted); }
.stepper button:hover { background: rgba(255,255,255,.06); color: var(--text); }
.stepper .v { min-width: 34px; text-align: center; font-weight: 600; font-size: 16px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches button { width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; }
.swatches button.on::after { content: ''; position: absolute; inset: -4px; border-radius: 13px; border: 1.5px solid var(--brass); }
.keys { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------- home */
.bank-chip { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 8px;
  border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi); font-weight: 600; font-size: 15px;
  color: var(--brass-hi); pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.bank-chip.show { opacity: 1; visibility: visible; pointer-events: auto; }
.chip-ico { width: 24px; height: 24px; border-radius: 50%; background: repeating-conic-gradient(var(--brass) 0 30deg, #3a2c14 30deg 60deg);
  box-shadow: inset 0 0 0 5px transparent; position: relative; }
.chip-ico::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #efe4c8; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.home-wrap { width: min(440px, 100%); display: grid; gap: 22px; }
.brand { text-align: center; }
.brand h1 { font-family: var(--display); font-weight: 600; font-size: clamp(52px, 11vw, 72px); margin: 0; line-height: 1; letter-spacing: .01em; color: var(--brass-hi);
  text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,255,255,.08); }
.brand p { margin: 12px 0 0; color: var(--muted); letter-spacing: .28em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.brand-suits { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.brand-suits i { width: 12px; height: 12px; display: block; background: var(--muted); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: .8; }
.profile { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }
.profile-fields { flex: 1; min-width: 0; }
.profile .field-label { margin-bottom: 6px; }
.avatar-picker { position: absolute; top: calc(100% + 8px); left: 0; z-index: 3; display: grid; grid-template-columns: repeat(6, 32px); gap: 8px; padding: 12px; border-radius: 12px;
  background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.avatar-picker button { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.avatar-picker button.on { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--brass); }
.home-actions { display: grid; gap: 10px; }
.big-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 18px 20px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); transition: border-color .15s, transform .15s var(--ease); }
.big-btn:hover { border-color: var(--line-2); transform: translateY(-1px); }
.big-btn b { display: block; font-family: var(--display); font-weight: 600; font-size: 21px; }
.big-btn small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.big-btn svg { color: var(--muted); }
.big-btn.primary { border-color: rgba(201,168,106,.35); background: linear-gradient(180deg, rgba(201,168,106,.10), rgba(18,19,22,.9) 70%); }
.big-btn.primary b { color: var(--brass-hi); }
.big-btn.primary svg { color: var(--brass); }
.home-links { display: flex; justify-content: center; align-items: center; gap: 4px; color: var(--dim); }

/* avatars: chip-style discs */
.avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--text);
  font-family: var(--display); font-weight: 600; font-size: 17px;
  background: radial-gradient(circle at 50% 50%, #1b1c20 0 58%, transparent 59%), repeating-conic-gradient(var(--c1) 0 30deg, var(--c2) 30deg 60deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); }
.avatar.big { width: 56px; height: 56px; font-size: 24px; }

/* online */
.join-row { display: flex; gap: 10px; }
.code-cells { display: flex; gap: 6px; flex: 1; }
.code-cells input { width: 100%; min-width: 0; height: 56px; padding: 0; text-align: center; font: 600 24px var(--display); text-transform: uppercase; border-radius: 10px; }
.join-row .btn { height: 56px; padding: 0 22px; }
.host-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.host-summary span { font-size: 13px; color: var(--text); padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.customize { margin: 10px 0 16px; }
.customize summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.customize summary::before { content: '+'; color: var(--brass); font-weight: 600; }
.customize[open] summary::before { content: '−'; }
.customize summary::-webkit-details-marker { display: none; }

/* stats & summary */
.hero-stat { text-align: center; padding: 6px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.hero-v { font-family: var(--display); font-size: 44px; font-weight: 600; color: var(--brass-hi); margin-top: 6px; }
.hero-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pos { color: var(--pos) !important; } .neg { color: var(--neg) !important; }
.stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0 0 18px; }
.stat-list div { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.stat-list dt { color: var(--muted); font-size: 13px; }
.stat-list dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; }
.summary-net { font-family: var(--display); font-size: 48px; font-weight: 600; text-align: center; margin: 8px 0 18px; }
#scr-summary .stat-list, #scr-confirm .row { grid-template-columns: 1fr; }

/* rankings */
.rankings { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; counter-reset: r; }
.rankings li { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); counter-increment: r; }
.rankings li::before { content: counter(r); width: 18px; color: var(--brass); font: 600 15px var(--display); }
.rankings .rk-name { font-weight: 600; font-size: 14px; }
.rankings .rk-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rankings .rk-cards { display: flex; gap: 3px; margin-left: auto; flex: none; }
.rankings .rk-cards img { width: 30px; height: 42px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.rankings .rk-cards img.dim { opacity: .3; }
@media (max-width: 760px) { .rankings { grid-template-columns: 1fr; } .rankings .rk-cards img { width: 24px; height: 34px; } }

.stack-btns { display: grid; gap: 8px; }
.loader { text-align: center; color: var(--muted); }
.spinner { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.08); border-top-color: var(--brass); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#plates, #betLabels { position: absolute; inset: 0; pointer-events: none !important; }
#topbar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none !important; }
#topbar > div { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.pill { height: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hi); font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pill b { color: var(--text); font-weight: 600; }
.pill .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }
.code-chip .k { font-size: 10px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; }
.code-chip .v { color: var(--brass-hi); font-weight: 600; letter-spacing: .16em; font-size: 15px; font-family: var(--display); }
.code-chip svg { width: 15px; height: 15px; }
.code-chip:hover { color: var(--text); }
.net.reconnecting { color: #e7c37a; }
.net.offline { color: var(--neg); }

/* seats */
.seat { position: absolute; left: 0; top: 0; width: 148px; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.seat .disc { position: relative; width: 52px; height: 52px; z-index: 2; }
.seat .disc .avatar { width: 52px; height: 52px; font-size: 21px; transition: filter .3s; }
.seat .ring { position: absolute; inset: -6px; width: 64px; height: 64px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.seat .ring circle { fill: none; stroke-width: 3; }
.seat .ring .bg { stroke: rgba(0,0,0,.55); opacity: 0; }
.seat .ring .fg { stroke: var(--brass); stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; opacity: 0; transition: stroke .3s; }
.seat.timing .ring .bg, .seat.timing .ring .fg { opacity: 1; }
.seat.crit .ring .fg { stroke: var(--neg); }
.seat .secs { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(20,8,8,.82); color: #f3c0bc; font: 600 20px var(--display); opacity: 0; transition: opacity .2s; }
.seat.crit .secs { opacity: 1; }
.seat.thinking .disc .avatar { animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 3px rgba(201,168,106,.45), 0 0 22px rgba(201,168,106,.35); } }
.seat .plate { position: relative; margin-top: -14px; width: 132px; padding: 17px 10px 7px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, rgba(24,25,29,.94), rgba(14,15,18,.94)); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 var(--hi);
  transition: border-color .25s, box-shadow .25s; overflow: hidden; }
.seat .l1 { position: relative; height: 16px; }
.seat .l1 > span { position: absolute; inset: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s, transform .25s var(--ease); }
.seat .nm { color: var(--text); }
.seat .sact, .seat .hand { opacity: 0; transform: translateY(4px); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px !important; line-height: 16px; }
.seat.show-act .nm, .seat.show-hand .nm { opacity: 0; transform: translateY(-4px); }
.seat.show-act .sact { opacity: 1; transform: none; }
.seat.show-hand:not(.show-act) .hand { opacity: 1; transform: none; color: var(--brass-hi); letter-spacing: .04em; text-transform: none; font-size: 11.5px !important; }
.seat .sact.fold { color: #c9908c; } .seat .sact.check { color: var(--muted); } .seat .sact.call { color: #a6dcc0; }
.seat .sact.bet, .seat .sact.raise { color: var(--brass-hi); } .seat .sact.allin { color: #f0908a; } .seat .sact.blind { color: var(--muted); }
.seat .stk { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }
.seat.me .stk { color: var(--brass-hi); }
.seat.allin .stk { color: #f0908a; font-size: 11px; letter-spacing: .14em; line-height: 20px; }
.seat .status { margin-top: 5px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; min-height: 12px; }
.seat.me .plate { border-color: rgba(201,168,106,.45); }
.seat.acting .plate { border-color: rgba(201,168,106,.7); box-shadow: 0 0 0 1px rgba(201,168,106,.25), 0 10px 26px rgba(0,0,0,.5); }
.seat.folded .avatar, .seat.out .avatar { filter: grayscale(.85) brightness(.55); }
.seat.folded .stk, .seat.out .stk { color: var(--muted); }
.seat.dc .avatar { filter: grayscale(1) brightness(.5); }
.seat.winner .plate { border-color: var(--brass); }
.seat.winner .plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(233,211,161,.32) 50%, transparent 70%);
  transform: translateX(-120%); animation: shimmer 1.1s var(--ease) 1; }
@keyframes shimmer { to { transform: translateX(120%); } }
.seat.myturn .disc::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--brass-hi) var(--sweep, 0deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px); mask: radial-gradient(circle, transparent 29px, #000 30px); animation: sweep .6s var(--ease) forwards; }
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sweep { to { --sweep: 360deg; opacity: 0; } }
.seat.open .plate { background: transparent; border-style: dashed; box-shadow: none; }
.seat.open .disc .avatar { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--dim); }
.seat.open .stk { font-size: 11px; color: var(--dim); font-weight: 500; }

.bet-label { position: absolute; left: 0; top: 0; padding: 2px 7px; border-radius: 6px; background: rgba(7,8,11,.72); font-size: 11px; font-weight: 600; color: var(--text); will-change: transform; white-space: nowrap; }
#potLabel { position: absolute; left: 0; top: 0; pointer-events: none !important; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; will-change: transform; }
.pot-main { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 12px; border-radius: 8px; background: rgba(7,8,11,.66); }
.pot-k { font-size: 10px; letter-spacing: .16em; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.pot-v { font: 600 18px var(--display); color: var(--brass-hi); }
.pot-sides { display: flex; gap: 4px; }
.pot-sides span { font-size: 11px; color: var(--muted); font-weight: 500; padding: 2px 7px; border-radius: 6px; background: rgba(7,8,11,.6); }
#myHand { position: absolute; left: 0; top: 0; pointer-events: none !important; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-hi); white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.9); will-change: transform; }

/* win plaque */
#banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -6px); opacity: 0; pointer-events: none !important; text-align: center; width: max-content; text-wrap: balance;
  transition: opacity .4s var(--ease), transform .5s var(--ease); padding: 12px 26px 14px; border-radius: 12px; background: rgba(10,10,12,.88);
  border: 1px solid rgba(201,168,106,.4); box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(233,211,161,.12); max-width: min(520px, calc(100vw - 32px)); }
#banner::before, #banner::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; background: var(--brass); transform: rotate(45deg); margin-top: -2px; }
#banner::before { left: 10px; } #banner::after { right: 10px; }
#banner.show { opacity: 1; transform: translate(-50%, 0); }
#banner .b-sub { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 4px; }
#banner .b-title { font: 600 26px var(--display); color: var(--text); }
#banner.me .b-title { color: var(--brass-hi); }

/* action controls */
#actions { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px));
  display: grid; gap: 8px; animation: rise .2s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.raise-tray { padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }
.presets { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 10px; }
.presets button { height: 40px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: border-color .15s, background .15s; }
.presets button b { font-size: 12px; font-weight: 600; color: var(--text); }
.presets button small { font-size: 10px; color: var(--muted); }
.presets button:hover { background: rgba(255,255,255,.07); }
.presets button.on { border-color: rgba(201,168,106,.6); background: rgba(201,168,106,.08); }
.presets button:disabled { opacity: .3; }
.slider-row { display: flex; align-items: center; gap: 12px; }
.slider { position: relative; flex: 1; height: 32px; cursor: pointer; touch-action: none; }
.slider .track { position: absolute; left: 11px; right: 11px; top: 13px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.slider .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--brass-lo), var(--brass)); }
.slider .ticks i { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: rgba(255,255,255,.18); }
.slider .thumb { position: absolute; top: 5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6e6c0, var(--brass));
  box-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(7,8,11,.9); left: 11px; }
.slider:focus-visible { outline: none; }
.slider:focus-visible .thumb { box-shadow: 0 0 0 3px rgba(7,8,11,.9), 0 0 0 5px var(--brass); }
.slider-row .amount::-webkit-inner-spin-button, .slider-row .amount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.slider-row .amount { -moz-appearance: textfield; appearance: textfield; width: 96px; height: 38px; flex: none; text-align: right; font-size: 15px; font-weight: 600; padding: 0 10px; border-radius: 8px; }
.main-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.act { position: relative; height: 56px; border-radius: 12px; font-size: 15px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.15; border: 1px solid; box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .15s, transform .1s, background .15s; }
.act:active { transform: translateY(1px); }
.act .amt { font-size: 13px; font-weight: 500; opacity: .75; }
.act .amt:empty { display: none; }
.act kbd { position: absolute; top: 6px; right: 7px; background: transparent; border-color: currentColor; color: inherit; opacity: .35; }
.act.fold { background: #1a1617; border-color: #3a2a2c; color: #e6a3a0; }
.act.fold:hover { border-color: #5c3e40; }
.act.call { background: #14201c; border-color: #24453a; color: #bdebd5; }
.act.call:hover { border-color: #33644f; }
.act.raise { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); border-color: rgba(233,211,161,.7); color: var(--brass-ink); }
.act.raise:hover { background: linear-gradient(180deg, #f2e0b4, #d4b47a); }
.act.raise.allin { background: linear-gradient(180deg, #e88a84, #b9443e); border-color: #f0a29c; color: #fff; }

#preactions { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 6px; }
.toggle { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 var(--hi); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span::before { content: ''; display: inline-block; width: 0; overflow: hidden; vertical-align: -1px; transition: width .15s; }
.toggle:has(input:checked) { border-color: var(--brass); color: var(--brass-hi); }
.toggle:has(input:checked) span::before { content: '✓'; width: 14px; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
#sitBar { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 500; font-size: 14px; white-space: nowrap; }

/* side panel: collapsed ticker by default */
#sidePanel { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 24px));
  border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); overflow: hidden; }
.sp-ticker { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; text-align: left; color: var(--muted); font-size: 12.5px; }
.sp-ticker-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ticker svg { width: 16px; height: 16px; flex: none; }
.sp-ticker .dot { position: static; flex: none; }
#sidePanel:not(.collapsed) .sp-ticker { display: none; }
#sidePanel.collapsed .sp-body { display: none; }
.sp-tabs { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.sp-tab { padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sp-tab.active { background: rgba(255,255,255,.06); color: var(--text); }
.sp-close { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); }
.sp-close svg { width: 16px; height: 16px; }
.sp-list { height: min(220px, 30vh); overflow-y: auto; padding: 8px 12px 10px; font-size: 12.5px; line-height: 1.6; user-select: text; -webkit-user-select: text; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.log-row { color: #d6d1c6; }
.log-row.muted { color: var(--dim); }
.log-row.me { color: var(--brass-hi); }
.log-row.win { color: var(--brass-hi); font-weight: 600; }
.log-row.sep { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.log-row.sep:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.mc { display: inline-block; padding: 0 4px; margin: 0 1px; border-radius: 3px; background: #f3efe6; color: #17181c; font-weight: 700; font-size: 11px; line-height: 1.35; vertical-align: 1px; }
.mc.s1, .mc.s2 { color: #b3152c; }
.mc.four.s0 { color: #13703a; } .mc.four.s1 { color: #1b55b3; }
.mc.back { background: #24252b; color: var(--brass); }
.chat-row { color: #d6d1c6; word-wrap: break-word; }
.chat-row b { color: var(--muted); font-weight: 600; }
.chat-row.mine b { color: var(--brass-hi); }
#chatForm { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
#chatForm input { height: 36px; font-size: 13px; border-radius: 8px; }
#chatForm button { padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.06); font-weight: 600; font-size: 13px; }

/* modals in HUD */
#modalScrim { position: absolute; inset: 0; background: rgba(4,5,7,.55); }
.modal-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 24px 26px 22px; width: min(400px, calc(100vw - 32px)); text-align: center;
  border-radius: 16px; background: rgba(18,19,22,.98); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); animation: pop .3s var(--ease); z-index: 5; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -47%); } }
.modal-card h3 { margin: 6px 0 8px; font: 600 24px var(--display); }
.modal-card p { color: var(--muted); margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.modal-card .row { justify-content: center; }
.modal-card .row .btn { flex: 1; }

#lobbyPanel { width: min(480px, calc(100vw - 32px)); text-align: left; max-height: calc(100vh - 96px); overflow-y: auto; padding: 24px 26px; }
.lp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lp-head h2 { margin: 4px 0 0; font: 600 26px var(--display); }
.lp-code { text-align: right; }
.code-big { font: 600 34px/1 var(--display); letter-spacing: .14em; color: var(--brass-hi); padding: 6px 0 0 6px; }
.lp-invite { position: relative; margin: 18px 0 12px; }
.lp-invite input { height: 40px; font-size: 12.5px; font-weight: 500; color: var(--muted); padding-right: 48px; }
.lp-invite .icon-btn { position: absolute; right: 3px; top: 3px; }
.lp-settings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lp-settings span { font-size: 12px; color: var(--muted); padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.player-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.player-list li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.player-list li.join { animation: dropin .42s cubic-bezier(.3,1.5,.5,1); }
@keyframes dropin { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.player-list .avatar { width: 32px; height: 32px; font-size: 14px; }
.player-list .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-list .chip { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: rgba(255,255,255,.05); color: var(--muted); }
.player-list .chip.host { color: var(--brass); background: rgba(201,168,106,.1); }
.player-list .kick { color: var(--dim); font-size: 18px; width: 28px; height: 28px; border-radius: 7px; }
.player-list .kick:hover { color: var(--neg); background: rgba(224,100,95,.1); }
.player-list li.empty { color: var(--dim); font-size: 13px; }
.player-list li.empty .avatar { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.lp-host { display: grid; gap: 12px; }
.lp-bots { display: flex; gap: 8px; align-items: center; }
.lp-bots .seg button { height: 30px; padding: 0 10px; font-size: 12.5px; }
.lp-hint { margin: -4px 0 0; color: var(--dim); font-size: 12px; text-align: center; min-height: 1em; }
.lp-wait { color: var(--muted); text-align: center; margin: 4px 0 8px; }
#lpLeave { display: block; margin: 12px auto 0; }

#toasts, #globalToasts { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; pointer-events: none; justify-items: center; }
.toast { min-height: 40px; display: flex; align-items: center; padding: 8px 16px; border-radius: 10px; background: rgba(18,19,22,.96); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 500;
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--ease); text-align: center; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: none; }
.toast.err { border-color: rgba(224,100,95,.45); color: #f1b3af; }
.toast.ok { border-color: rgba(91,192,138,.45); color: #b7e8cc; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .seat { width: 124px; }
  .seat .plate { width: 116px; }
  #tableInfo .opt { display: none; }
}
@media (max-width: 520px) { #tableInfo { display: none; } }
@media (max-width: 640px) {
  .panel { padding: 22px 20px 24px; }
  .screen { padding-top: 64px; }
  #actions { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .act { height: 56px; }
  .act kbd { display: none; }
  .presets button { height: 44px; }
  #preactions { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); justify-content: stretch; }
  #preactions .toggle { flex: 1; justify-content: center; padding: 0 8px; height: 44px; }
  .code-chip .k { display: none; }
  .stat-list { grid-template-columns: 1fr; }
  .join-row { flex-direction: column; }
}
/* portrait: avatar-only seats, log behind the menu */
body.mini .seat { width: 72px; }
body.mini .seat .disc, body.mini .seat .disc .avatar { width: 40px; height: 40px; font-size: 16px; }
body.mini .seat .ring { inset: -5px; width: 50px; height: 50px; }
body.mini .seat .plate { width: auto; min-width: 58px; margin-top: -6px; padding: 7px 7px 3px; border-radius: 8px; }
body.mini .seat .l1 { height: 13px; }
body.mini .seat .l1 > span { font-size: 10px !important; line-height: 13px; }
body.mini .seat .nm { max-width: 64px; margin: 0 auto; color: var(--muted); }
body.mini .seat .sact { font-size: 10px !important; letter-spacing: .04em; }
body.mini .seat .stk { font-size: 11.5px; margin: 0; }
body.mini .seat .status { font-size: 9.5px; margin-top: 2px; }
body.mini .seat.me { width: 140px; }
body.mini .seat.me .plate { width: 124px; }
body.mini .seat.me .l1 > span { font-size: 11.5px !important; }
body.mini .seat.me .disc, body.mini .seat.me .disc .avatar { width: 48px; height: 48px; }
body.portrait #sidePanel { display: none; }
body.portrait #sidePanel.force { display: block; top: 60px; bottom: auto; }
body.portrait #banner .b-title { font-size: 20px; }
body.compact .raise-tray.collapsed { display: none; }
.tray-close { display: none; }
body.compact .raise-tray { background: var(--panel-solid); position: relative; padding-top: 34px; }
body.compact .tray-close { display: grid; position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: var(--muted); }
body.compact .tray-close svg { width: 16px; height: 16px; }
body.compact .tray-title { display: block; position: absolute; top: 10px; left: 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tray-title { display: none; }
body.portrait.tray-open .seat.me { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* short landscape screens (phones on their side) */
body.short #topbar { top: 6px; }
body.short #tableInfo { display: none; }
body.short .icon-btn, body.short .pill { height: 34px; }
body.short .icon-btn { width: 34px; }
body.short #actions { width: min(360px, 46vw); bottom: calc(6px + env(safe-area-inset-bottom)); right: 6px; left: auto; gap: 6px; }
body.short .act { height: 44px; font-size: 14px; }
body.short .act kbd { display: none; }
body.short #preactions { bottom: 6px; right: 6px; left: auto; }
body.short #preactions .toggle { height: 36px; flex: none; }
body.short #sidePanel { bottom: 6px; left: 6px; width: 220px; }
body.short #sidePanel .sp-list { height: 120px; }

/* bigger touch targets on touch devices */
@media (pointer: coarse) {
  .sp-close, .player-list .kick { width: 44px; height: 44px; }
  .sp-tab { height: 40px; }
  .lp-bots .seg button { height: 40px; }
  .avatar-picker { grid-template-columns: repeat(6, 44px); }
  .avatar-picker button { width: 44px; height: 44px; }
  .stepper button { width: 44px; height: 40px; }
  .seg button { height: 40px; }
}
/* static "acting" ring when animations are off */
@media (prefers-reduced-motion: reduce) {
  .seat.thinking .disc .avatar { box-shadow: 0 0 0 3px rgba(201,168,106,.6); }
}
.seat .status.bot { color: var(--dim); }
.turn-note { margin: -8px 0 16px; text-align: center; color: var(--brass-hi); font-size: 13px; font-weight: 500; }
.dot.inline { position: static; display: inline-block; margin-left: 6px; box-shadow: none; }
.lp-bots .seg.full { flex: 1; }
#seatList { margin-bottom: 20px; }