/* Joker Poker — live app layer on top of the design system (styles.css + styles-v2.css).
   The design was drawn as fixed artboards; this makes the same look work as scrolling pages. */

/* ---------- page shell ---------- */
html, body { background: var(--bg-0); }
.app.noir-stage { height: auto; min-height: 100vh; overflow: visible; display: flex; flex-direction: column; }
.app.noir-stage::before { position: fixed; }
.app .noir-deco { position: fixed; }
.app .topbar { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(6px); }
.app .pg-body { flex: 1 0 auto; max-width: 1480px; width: 100%; margin: 0 auto; }
a.brand { color: var(--ink); text-decoration: none; }
a.brand:hover { text-decoration: none; color: var(--ink); }
.tb2-nav a, .tb2-nav a:hover { text-decoration: none; }
.tb2-nav a.tb2-secondary.active { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--gold-dim); color: var(--gold-2); background: var(--gold-wash); }
a.wallet-pill, a.tb2-name { text-decoration: none; }
a.wallet-pill:hover, a.tb2-name:hover { text-decoration: none; }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: block; }
[data-theme="light"] .theme-btn .moon { display: none; }
.scrn-foot.pg-foot a { color: var(--ink-4); }

/* ---------- avatars (BotAvatar as CSS) ---------- */
.ava { position: relative; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #3a2a25, #1a1311); border: 2px solid var(--ava, var(--crimson-glow));
  font-family: var(--serif); font-weight: 700; color: var(--ink); flex: 0 0 auto;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ava, var(--crimson-glow)) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.08); }
[data-theme="light"] .ava { background: radial-gradient(circle at 35% 30%, #fff8e6, #e9dbb5); }
.ava.gold { --ava: var(--gold-2); } .ava.crimson { --ava: var(--crimson-glow); } .ava.violet { --ava: #a079d6; }
.ava .ini { letter-spacing: -.04em; }
.ava .mood { position: absolute; bottom: -4px; right: -4px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.5); line-height: 1; }
.ava .tiltring { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--crimson-glow); opacity: .85;
  clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 60%); }

/* ---------- responsive page grids ---------- */
.g-home { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.g-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.g-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g-lobby { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.g-cashier { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 22px; align-items: start; }
.g-mg1 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.g-mg3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
.g-strat { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 22px; }
.g-review { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.g-lab { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.lobby-scroll { overflow-x: auto; min-width: 0; }
.lobby-side { position: sticky; top: 90px; }
@media (max-width: 1180px) {
  .g-home, .g-lobby, .g-cashier, .g-mg1, .g-mg3, .g-strat, .g-review, .g-lab { grid-template-columns: 1fr; }
  .g-5 { grid-template-columns: repeat(3, 1fr); }
  .lobby-side { position: static; }
}
@media (max-width: 760px) {
  .app .pg-body { padding: 20px 16px 24px; }
  .pg-h1 { font-size: 36px; }
  .home-h1 { font-size: 64px !important; }
  .g-4, .g-5, .g-2 { grid-template-columns: 1fr 1fr; }
  .tb2 { flex-wrap: wrap; padding: 10px 14px; }
  .tb2-nav { flex-wrap: wrap; margin-left: 0; }
  .top-right { flex-wrap: wrap; }
  .streak-pill, .xp-pill, .tb2-name { display: none !important; }
  .btn-play { font-size: 16px; padding: 16px 28px; }
}

/* ---------- lobby extras ---------- */
.ltable tr.closed td { opacity: .55; }
.st-badge { font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.st-reg { color: #3fd17a; border-color: rgba(63,209,122,.4); background: rgba(63,209,122,.1); }
.st-late { color: var(--gold-2); border-color: var(--gold-dim); background: var(--gold-wash); }
.st-run { color: var(--ink-4); border-color: var(--line-2); }
[data-theme="light"] .st-reg { color: #1d7a3c; }
.kind-tabs { display: flex; gap: 8px; }
.summary-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.summary-strip .panel { padding: 10px 16px; min-width: 120px; }
.summary-strip .next-up { flex: 1; min-width: 260px; }

/* ---------- table page ---------- */
.table-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--table-bg); color: var(--ink); outline: none; }
.table-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.table-main { padding: 44px 34px 18px; display: flex; flex-direction: column; min-width: 0; }
.felt-zone { position: relative; margin: 0 auto; width: 100%; max-width: 900px; aspect-ratio: 16/10; }
.felt-rail { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, #5a4222 0%, #2e2110 60%, #1a1208 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 4px rgba(200,154,42,.16); }
.felt-cloth { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(ellipse at center, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 95%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.55); overflow: hidden; }
.felt-line { position: absolute; inset: 30px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.1); }
.felt-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(200,154,42,.08); font-family: var(--serif); font-size: 140px; font-weight: 700; }
.felt-center { position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; }
.board-row { display: flex; gap: 4px; justify-content: center; }
.board-slot { width: 64px; height: 92px; border: 1px dashed rgba(255,255,255,.18); border-radius: 7px; background: rgba(0,0,0,.18); }
.pot-pill { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; background: linear-gradient(180deg, #fff7d6, #c89a2a, #8a6a1c);
  border: 2px solid #6a4e10; color: #1a0e02; font-family: var(--mono); font-weight: 800; font-size: 16px; border-radius: 22px; box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.pot-pill .lbl { font-size: 11px; letter-spacing: .16em; }
.street-lbl { color: #f7df8a; margin-top: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.seat2.s9 { width: 128px !important; padding: 7px 8px; }
.seat2.s9 .seat2-nm { max-width: 72px; font-size: 13px; }
.seat2.s9 .seat2-cards { min-height: 50px; margin-top: 4px; }
.seat2.s9 .pcard.sm { width: 34px; height: 50px; }
.seat2.s9 .pcard.sm .mid { font-size: 14px; }
.seat2.s9.you { width: 150px !important; }
.seat2.s9 .seat2-stk { margin-top: 3px; }
.seat2 .seat2-think .seat2-clock i { transition: width linear; }
.felt-zone .seat2 .seat2-clock i { transition: none; }
.act-area { margin-top: 40px; }
.actbar .act.dim { opacity: .45; pointer-events: none; }
.hand-flash { font-size: 12px; color: var(--gold-2); font-weight: 600; }
.side2 .panel { box-shadow: none; }
.log2 div { white-space: pre-wrap; }
@media (max-width: 1100px) {
  .table-grid { grid-template-columns: 1fr; }
  .side2 { border-left: none; border-top: 1px solid var(--line); }
  .table-main { padding: 34px 10px 14px; }
}
@media (max-width: 700px) {
  .tbar { flex-wrap: wrap; padding: 10px 12px; }
  .tbar .focus-tag, .tbar .spacer { display: none; }
  .table-main { padding: 40px 6px 14px; }
  .felt-zone { aspect-ratio: 4/5; margin-top: 10px; width: calc(100% - 64px); }
  .felt-mark { font-size: 80px; }
  .seat2, .seat2.s9 { width: 84px !important; padding: 5px; border-radius: 10px; }
  .seat2.you, .seat2.s9.you { width: 112px !important; }
  .seat2-head { gap: 4px; }
  .seat2-head .ava { display: none; }
  .seat2 .pcard.sm, .seat2.s9 .pcard.sm { width: 24px; height: 36px; }
  .seat2 .pcard.sm .ctl, .seat2 .pcard.sm .cbr { display: none; }
  .seat2 .pcard.sm .mid { font-size: 13px; }
  .seat2 .pcard.md { width: 44px; height: 64px; }
  .seat2-cards, .seat2.s9 .seat2-cards { min-height: 36px; margin-top: 3px; }
  .seat2-nm { font-size: 12px; max-width: 70px; }
  .seat2-stk { font-size: 11px; margin-top: 2px; }
  .seat2-last { font-size: 10px; margin-top: 2px; }
  .board-slot, .felt-center .pcard { width: 38px !important; height: 55px !important; }
  .felt-center .pcard .ctl, .felt-center .pcard .cbr { font-size: 9px; }
  .felt-center .pcard .mid { font-size: 18px; }
  .pot-pill { font-size: 13px; padding: 5px 12px; margin-top: 8px; }
  .betchip { font-size: 11px; }
  .actrow { flex-wrap: wrap; }
  .actrow .act { flex: 1; min-width: 0 !important; }
  .actbar .tglbtn { min-width: 0 !important; }
  .act-area { margin-top: 24px; }
  .keyhint { display: none !important; }
  .mdl-bg.fixed { padding: 10px; }
  .mdl .rc-grid { grid-template-columns: 1fr !important; }
  .mdl .rc-row { grid-template-columns: 1fr 1fr !important; }
}

/* tournament side panel (live MTT) */
.mtt-clock { padding: 14px 16px; }
.mtt-clock.on-break { border-color: var(--bordeaux-2); background: linear-gradient(135deg, var(--crim-wash), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.mtt-big { font: 700 34px var(--mono); color: var(--gold-2); line-height: 1.1; }
.mtt-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); padding: 3px 0; }
.mtt-row b { font-family: var(--mono); color: var(--ink); }
.mtt-row.late b { color: var(--pos); }
.mtt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtt-stats > div { padding: 8px 10px; border-radius: 10px; background: var(--wash); border: 1px solid var(--line); }
.mtt-stats b { display: block; font: 700 16px var(--mono); color: var(--ink); margin-top: 2px; }
.mtt-list { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.mtt-list li { display: flex; justify-content: space-between; padding: 5px 4px; border-top: 1px solid var(--line); color: var(--ink-2); }
.mtt-list li:first-child { border-top: none; }
.mtt-list li.me { color: var(--gold-2); font-weight: 700; background: var(--gold-wash); border-radius: 6px; }
.mtt-list b { font-family: var(--mono); }

/* modal on real pages */
.mdl-bg.fixed { position: fixed; }
.mdl .close-x { position: absolute; top: 12px; right: 14px; }

/* intro only once per visit; lives above the page */
.intro.fixed { position: fixed; }

/* cashier / qr: the real QR is an SVG */
.qr.svg { display: block; width: 190px; height: 190px; padding: 10px; }
.qr.svg svg { width: 100%; height: 100%; display: block; }
.thinking-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); animation: tdot 1s infinite ease-in-out; }
@keyframes tdot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* phone page */
.phone-shell { min-height: 100vh; max-width: 480px; margin: 0 auto; padding: 0 22px; display: flex; flex-direction: column; }
.amount-in { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--gold-dim); outline: none; color: var(--ink); font: 600 44px var(--serif); padding: 6px 0; margin-top: 4px; }

/* forms in the design language */
.jp-input { background: var(--wash); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); padding: 8px 10px; font: 500 13px var(--sans); outline: none; }
.jp-input:focus { border-color: var(--gold-dim); }
.jp-check { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pstyle-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.gold-link { font-weight: 600; }

/* generic pages ported from the old app (equity, fairness, styles, reasoning) */
.jp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jp-table th { text-align: left; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; padding: 0 10px 10px; }
.jp-table td { padding: 10px; border-top: 1px solid var(--line); color: var(--ink-2); }
.jp-table td.m { font-family: var(--mono); }

/* sound toggle icon */
.sound-btn .snd-on { display: none; }
.sound-btn.on .snd-on { display: inline; }
.sound-btn.on .snd-off { display: none; }
a.btn-gold, a.btn-noir, a.btn-crimson { text-decoration: none; }
a.btn-gold:hover { color: #1a0e02; text-decoration: none; }
a.btn-noir:hover { text-decoration: none; }
a.btn-crimson:hover { color: var(--on-accent); text-decoration: none; }

/* grid items may shrink below their content, so nothing pushes the page sideways on phones */
.g-home > *, .g-4 > *, .g-5 > *, .g-2 > *, .g-lobby > *, .g-cashier > *, .g-mg1 > *, .g-mg3 > *,
.g-strat > *, .g-review > *, .g-lab > * { min-width: 0; }
.pg-body { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .g-4, .g-2 { grid-template-columns: 1fr; }
  .g-5 { grid-template-columns: 1fr 1fr; }
  .leak { grid-template-columns: 12px 1fr !important; }
  .leak > div:last-child { grid-column: 2; text-align: left !important; }
}

/* ---------- table motion ---------- */
#chips, #fx { position: absolute; inset: 0; pointer-events: none; }
#chips { z-index: 2; }
#fx { z-index: 6; }
.fly { position: absolute; transform: translate(-50%, -50%); pointer-events: none; will-change: left, top, opacity; }
.fly .pcard { box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.fly.dealfly .pcard { box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.fly.muckfly .pcard { transform: rotate(14deg) scale(.8); }
.chipfly { display: block; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #f7df8a 0 30%, #c89a2a 31% 60%, #8a6a1c 61%); border: 1.5px dashed rgba(26,14,2,.55);
  box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.betchip { transition: opacity .25s ease; }
.betchip.pop { animation: chip-pop .28s ease-out; }
@keyframes chip-pop { 0% { transform: translate(-50%, -50%) scale(.7); } 60% { transform: translate(-50%, -50%) scale(1.12); } 100% { transform: translate(-50%, -50%) scale(1); } }
.pot-pill { transition: transform .2s; }
.dealer2 { transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1); }
.seat2 { transition: border-color .25s, box-shadow .3s, opacity .35s, filter .35s; }
.seat2-last { transition: opacity .2s; }
.pcard.pending { opacity: 0; }
.pcard.land { animation: card-land .22s ease-out both; }
@keyframes card-land { from { transform: translateY(-6px) scale(.94); opacity: .6; } to { transform: none; opacity: 1; } }
.pcard.flip-in { animation: card-flip .42s cubic-bezier(.2,.8,.2,1) both; backface-visibility: hidden; }
@keyframes card-flip { 0% { transform: perspective(500px) rotateY(90deg) translateY(-4px); opacity: .4; }
  60% { transform: perspective(500px) rotateY(-8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.pcard.sweep { transition: opacity .32s ease, transform .32s ease; opacity: 0 !important; transform: translateY(-10px) scale(.88); }
.seat2-cards.mucking .pcard { transition: opacity .22s, transform .22s; opacity: 0; transform: translateY(-8px) rotate(6deg) scale(.9); }
.bslot { width: 64px; height: 92px; }
@media (max-width: 700px) { .bslot { width: 38px; height: 55px; } }
@media (prefers-reduced-motion: reduce) {
  .fly, .pcard.flip-in, .pcard.land, .betchip.pop { animation: none !important; transition: none !important; }
}

/* ---------- guests: locked tabs + sign-in ---------- */
.tb2-nav a.locked { opacity: .72; }
.tb2-nav a .lock-ic { margin-left: 6px; vertical-align: -1px; opacity: .8; }
.signin-btn { padding: 8px 16px; font-size: 12px; }
.auth-wrap { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 440px; gap: 28px; align-items: center; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.auth-tabs button { flex: 1; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field input { font-size: 15px; padding: 11px 12px; }
.auth-err { font-size: 12px; color: var(--crimson-glow); min-height: 16px; }
.auth-or { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; color: var(--ink-4); margin: 14px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--wash); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.gbtn:disabled { opacity: .55; cursor: not-allowed; }
.otp-boxes { display: flex; gap: 8px; }
.otp-boxes input { width: 44px; height: 52px; text-align: center; font: 700 22px var(--mono); padding: 0; }
.test-code { font-size: 12px; color: var(--gold-2); background: var(--gold-wash); border: 1px dashed var(--gold-dim); border-radius: 8px; padding: 8px 10px; }
.tb2-nav a, a.brand, .signin-btn, .wallet-pill { white-space: nowrap; }
.tb2-nav a { display: inline-flex; align-items: center; }
@media (max-width: 1500px) { .xp-pill .bar { display: none; } .tb2-nav { gap: 2px; } }
@media (max-width: 1280px) { .streak-pill { display: none !important; } }
.inbox-n { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; align-items: center; justify-content: center;
  background: var(--crimson-glow); color: #fff; font: 700 10px var(--mono); }
.scrn-foot.pg-foot { gap: 8px; flex-wrap: wrap; }
a.icon-btn { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; }
.log2 .sh{color:var(--gold-2)}
.best-hand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 14px; border-radius: 999px;
  background: rgba(10,7,8,.72); border: 1px solid var(--gold-dim); color: #f7df8a; font: 600 13px var(--sans); white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.best-hand .lbl { font: 700 9px var(--sans); letter-spacing: .18em; color: rgba(247,223,138,.7); }
.best-hand.pop { animation: best-pop .35s ease-out; }
@keyframes best-pop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
@media (max-width: 700px) { .best-hand { font-size: 11px; padding: 3px 10px; margin-bottom: 6px; } }