:root {
  --bg: #23232f; --bg2: #1b1b25; --panel: #2e2e3d; --card: #4a4699; --card2: #5a56b0;
  --red: #b03a37; --gold: #d4a64a; --gold2: #f3d38a; --text: #fff; --muted: #a9a9c0; --line: #3a3a4c;
  --green: #3f7d24; --ok: #3fbf6a;
  --nav-h: 64px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Roboto, "Segoe UI", system-ui, sans-serif; }
body { overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); background: #33333f; border: 1px solid transparent; border-radius: 10px; padding: 14px 16px; width: 100%; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--card2); }
.hidden { display: none !important; }
#app { max-width: 560px; margin: 0 auto; min-height: 100%; position: relative; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg); }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.logo svg { width: 44px; height: 50px; }
.logo b { font-family: Georgia, serif; color: var(--gold); font-size: 22px; letter-spacing: 1px; margin-top: 2px; }
.logo small { color: var(--gold); font-size: 8px; letter-spacing: 3px; }
.balance { background: var(--bg2); border-radius: 20px; padding: 8px 14px; display: flex; gap: 8px; align-items: center; font-weight: 600; }
.chip-ic { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--gold2) 30%, var(--gold) 31%, var(--gold) 55%, #fff 56%, #fff 62%, var(--gold) 63%); display: inline-block; flex: none; }
.statbar { display: flex; align-items: center; gap: 26px; background: var(--bg2); padding: 12px 22px; font-size: 20px; }
.statbar span { display: flex; align-items: center; gap: 8px; }
.statbar .wifi { margin-left: auto; color: var(--ok); }

.page { padding: 18px; }
.center { text-align: center; }
.btn { display: block; width: 100%; padding: 15px; border-radius: 10px; font-size: 18px; letter-spacing: .5px; background: var(--card); text-transform: uppercase; }
.btn.red { background: var(--red); }
.btn.dark { background: #15151d; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.small { display: inline-block; width: auto; padding: 8px 14px; font-size: 14px; }
.btn:disabled { opacity: .45; }
.login-btn { width: 220px; margin: 14px auto; }

.banner { margin: 16px 0; border-radius: 12px; overflow: hidden; position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(120deg, #1e3b5c, #5a1f3b 60%, #2a1c4f); padding: 18px; }
.banner::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,.04) 40px 42px); }
.banner b { position: relative; font-size: 22px; font-weight: 900; text-transform: uppercase; font-style: italic; text-shadow: 0 2px 0 #0008; }
.adult { position: absolute; left: 8px; bottom: 8px; font-size: 10px; background: #000a; border: 1px solid #fff6; border-radius: 10px; padding: 2px 6px; }

.lobby-card { background: var(--card); border-radius: 12px; padding: 20px; margin: 14px 0; }
.lobby-card h2 { margin: 0 0 12px; font-weight: 400; font-size: 26px; display: flex; align-items: center; gap: 16px; }
.lobby-card .ic { font-size: 40px; }
.lobby-card p { color: #ddd; margin: 4px 0 16px; text-align: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* tables list */
.bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 2px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.bar h1 { flex: 1; text-align: center; margin: 0; font-weight: 400; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; }
.icon-btn { background: none; font-size: 26px; width: 40px; height: 40px; display: grid; place-items: center; }
.trow { display: grid; grid-template-columns: 96px 1fr auto 56px; align-items: center; gap: 10px; padding: 14px 12px; border-bottom: 6px solid var(--bg); cursor: pointer; }
.trow .kind { font-size: 15px; text-align: center; border-right: 2px solid #0003; padding-right: 8px; }
.trow .nm { font-style: italic; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .tags span { display: inline-block; border: 2px solid #fff; border-radius: 4px; font-size: 12px; font-style: italic; font-weight: 700; padding: 0 4px; margin-right: 4px; }
.trow .by { font-size: 15px; opacity: .95; }
.trow .stk { background: #fff2; border-radius: 8px; padding: 8px 10px; font-size: 14px; text-align: center; }
.trow .cnt { font-size: 20px; text-align: center; }
.c-green { background: #427d23; } .c-dgreen { background: #346a1c; } .c-purple { background: #c977d1; } .c-brown { background: #80461f; } .c-red { background: #e2301f; } .c-maroon { background: #a32f2c; } .c-blue { background: #3c5fbf; }

/* bottom nav */
nav.bottom { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #15151f; display: flex; justify-content: center; z-index: 20; }
nav.bottom .in { display: flex; width: 100%; max-width: 560px; }
nav.bottom button { flex: 1; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #4b48a8; font-size: 13px; }
nav.bottom button svg { width: 28px; height: 28px; }
nav.bottom button.on { color: #7a76e0; }
nav.bottom .dot { position: absolute; margin-left: 22px; margin-top: -26px; background: var(--red); color: #fff; border-radius: 10px; font-size: 10px; padding: 1px 5px; }

/* chat */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h) - 70px); height: calc(100dvh - var(--nav-h) - 70px); background: #3a3350; }
.chat-input { display: flex; gap: 8px; margin: 14px; background: #aaa7b6; border-radius: 12px; padding: 6px 10px; align-items: center; }
.chat-input input { background: transparent; color: #222; border: 0; padding: 10px 4px; }
.chat-input button { background: none; color: #6d6aa8; font-size: 26px; }
.pinned { color: var(--gold2); font-size: 18px; padding: 8px 18px 14px; line-height: 1.35; white-space: pre-wrap; border-bottom: 1px solid #fff1; }
.msgs { flex: 1; overflow-y: auto; padding: 8px 18px 18px; }
.msg { margin: 8px 0; line-height: 1.35; word-wrap: break-word; }
.msg b { color: #b8b5ff; }
.msg.announce { color: var(--gold2); background: #0002; border-left: 3px solid var(--gold); padding: 6px 10px; border-radius: 4px; }
.msg time { color: #fff6; font-size: 11px; margin-left: 6px; }

/* store */
.pkg { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.pkg .chips { font-size: 22px; font-weight: 700; }
.pkg .bonus { color: var(--ok); font-size: 13px; }
.pkg .price { margin-left: auto; }
.stack-ic { font-size: 34px; }
.note { color: var(--muted); font-size: 13px; line-height: 1.4; }
.order { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-pending { color: var(--gold2); } .st-paid { color: var(--ok); } .st-cancelled { color: #f77; }

/* menu */
.menu-item { display: flex; align-items: center; gap: 22px; padding: 20px 6px; font-size: 22px; background: none; width: 100%; text-align: left; border-bottom: 1px solid #0000; }
.menu-item .mi { width: 40px; text-align: center; font-size: 28px; }
.sep { height: 3px; background: #2a2a37; margin: 8px 0; }

/* modal */
.modal { position: fixed; inset: 0; background: #000a; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 60px 14px; overflow-y: auto; }
.modal .box { width: 100%; max-width: 520px; background: #23232f; border: 2px solid #34348a; border-radius: 16px; padding: 22px; }
.modal .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 22px; }
.modal .box > * + * { margin-top: 14px; }
.check { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.check input { width: 26px; height: 26px; flex: none; }
.err { color: #ff8080; min-height: 18px; font-size: 14px; }
.toast { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background: #111c; border: 1px solid var(--gold); color: var(--gold2); padding: 12px 18px; border-radius: 12px; z-index: 99; max-width: 90%; text-align: center; }
.ref { font-size: 30px; letter-spacing: 3px; color: var(--gold2); text-align: center; font-weight: 800; background: #0003; border-radius: 10px; padding: 10px; }

/* poker table */
.tv { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #2c2c44, #12121a 70%); z-index: 30; display: flex; flex-direction: column; }
.tv .bar { background: #12121acc; border: 0; }
.tv .bar h1 { font-size: 18px; }
.felt-wrap { flex: 1; position: relative; }
.felt { position: absolute; left: 13%; right: 13%; top: 13%; bottom: 13%; border-radius: 200px; background: radial-gradient(ellipse at center, #2f7d4a, #1d5532 70%); border: 12px solid #5b3b22; box-shadow: inset 0 0 40px #0008, 0 0 0 3px #2b1b10, 0 10px 40px #000; }
.felt .brand { position: absolute; left: 0; right: 0; top: 66%; text-align: center; color: #ffffff1a; font-family: Georgia, serif; font-size: 22px; letter-spacing: 2px; }
.board { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.pot { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); background: #0007; padding: 4px 12px; border-radius: 14px; font-size: 14px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.seat { position: absolute; transform: translate(-50%, -50%); width: 86px; text-align: center; transition: opacity .2s; }
.seat .av { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #5a56b0, #2e2b6b); border: 3px solid #fff3; display: grid; place-items: center; font-size: 20px; font-weight: 700; position: relative; }
.seat.turn .av { border-color: var(--gold2); box-shadow: 0 0 16px var(--gold); }
.seat .nm { background: #000b; border-radius: 8px; font-size: 12px; padding: 3px 4px; margin-top: -6px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .sk { font-size: 12px; color: var(--gold2); }
.seat.folded { opacity: .45; }
.seat .hole { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; z-index: 2; }
.seat .betc { position: absolute; background: #000a; border-radius: 10px; font-size: 12px; padding: 2px 8px; display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.seat .tag { position: absolute; top: -18px; right: -6px; background: var(--red); font-size: 10px; border-radius: 6px; padding: 1px 5px; text-transform: uppercase; }
.seat .dealer { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #000; font-size: 11px; font-weight: 800; display: grid; place-items: center; bottom: -2px; right: -16px; border: 2px solid var(--gold); }
.seat .timer { position: absolute; left: 0; bottom: -5px; height: 4px; background: var(--gold2); border-radius: 2px; }
.seat.empty .av { background: #ffffff10; border: 2px dashed #ffffff40; font-size: 13px; font-weight: 400; color: #fffa; cursor: pointer; }
.seat.win .av { border-color: var(--ok); box-shadow: 0 0 20px var(--ok); }
.seat .winamt { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); color: var(--ok); font-weight: 800; white-space: nowrap; font-size: 14px; text-shadow: 0 1px 2px #000; }

.card { width: 34px; height: 48px; border-radius: 5px; background: #fff; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; line-height: 1; box-shadow: 0 2px 4px #0006; }
.card i { font-style: normal; font-size: 17px; }
.card.r { color: #d0211c; }
.card.back { background: repeating-linear-gradient(45deg, #4a4699 0 4px, #3a368a 4px 8px); border: 2px solid #fff; }
.card.sm { width: 26px; height: 36px; font-size: 13px; } .card.sm i { font-size: 13px; }
.card.big { width: 46px; height: 64px; font-size: 22px; } .card.big i { font-size: 22px; }
.card.hl { outline: 3px solid var(--gold2); }

.result { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); background: #000c; color: var(--gold2); padding: 6px 14px; border-radius: 12px; font-size: 14px; text-align: center; white-space: nowrap; }
.actions { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: #12121a; }
.actions .row { display: flex; gap: 8px; }
.actions .row + .row { margin-top: 8px; }
.actions .btn { font-size: 16px; padding: 14px 6px; }
.btn.fold { background: #6b2a2a; } .btn.call { background: #2d6b3c; } .btn.raise { background: var(--card); }
.raise-ctl { display: flex; gap: 8px; align-items: center; }
.raise-ctl input[type=range] { flex: 1; padding: 0; background: none; accent-color: var(--gold); }
.raise-ctl .amt { min-width: 90px; text-align: right; font-weight: 700; color: var(--gold2); }
.presets button { flex: 1; background: #2e2e3d; border-radius: 8px; padding: 8px 0; font-size: 13px; }
.waiting-msg { text-align: center; color: var(--muted); padding: 14px; }
.drop { position: absolute; right: 10px; top: 60px; background: #2e2e3d; border-radius: 12px; overflow: hidden; z-index: 40; min-width: 200px; box-shadow: 0 10px 30px #000; }
.drop button { display: block; width: 100%; text-align: left; padding: 14px 18px; background: none; border-bottom: 1px solid var(--line); }

.lb-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lb-row .n { color: var(--gold); font-weight: 800; }
.rules h3 { color: var(--gold2); margin-bottom: 6px; } .rules p, .rules li { color: #ddd; line-height: 1.5; }

/* v2 additions */
.gfilter { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; }
.gfilter button { background: var(--panel); border-radius: 18px; padding: 7px 14px; white-space: nowrap; font-size: 14px; }
.gfilter button.on { background: var(--card); }
.trow .kind small { font-size: 11px; opacity: .85; }
.trow .tags .mine { background: var(--gold); color: #000; border-color: var(--gold); font-style: normal; }
.seatbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 19; display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 8px 10px; background: #2a2650f2; border-top: 1px solid #5a56b0; }
.seatbar .sb-l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.seatbar button { background: var(--card); border-radius: 16px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.seatbar button small { color: var(--gold2); font-size: 10px; }
.seatbar button.hot { background: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #b03a3766; } }
#app { padding-bottom: calc(var(--nav-h) + 60px + env(safe-area-inset-bottom)); }
.turn-toast { cursor: pointer; background: var(--red); color: #fff; border-color: #fff6; animation: pulse 1s infinite; }
.tv .bar h1 { display: flex; flex-direction: column; line-height: 1.15; }
.tsub { font-size: 11px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.icon-btn { position: relative; }
.icon-btn .dot { position: absolute; top: 2px; right: 0; background: var(--red); font-size: 10px; border-radius: 8px; padding: 0 5px; }
.tchat { position: absolute; top: 60px; left: 8px; right: 8px; z-index: 35; background: #1d1b2ef2; border: 1px solid #4a4699; border-radius: 12px; display: flex; flex-direction: column; max-height: 45%; }
.tchat .msgs { max-height: 180px; padding: 8px 12px; font-size: 14px; }
.tchat .chat-input { margin: 8px; }
.bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; color: #111; font-size: 11px; padding: 4px 8px; border-radius: 10px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; z-index: 5; margin-bottom: 24px; }
.seat .hole.omaha .card { margin-left: -14px; } .seat .hole.omaha .card:first-child { margin-left: 0; }
.mycards { display: flex; gap: 5px; justify-content: center; margin-bottom: 8px; }
.tbank { display: block; margin: 0 auto 8px; background: #2e2e3d; border: 1px solid var(--gold); color: var(--gold2); border-radius: 18px; padding: 6px 14px; font-size: 13px; }
.store-info { background: #3a3350; color: var(--gold2); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; white-space: pre-wrap; line-height: 1.4; }
.pkg.custom input { padding: 10px 12px; }

/* v3: compact mobile table */
.avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-size: 20px; line-height: 1; }
.avatar.lg { width: 48px; height: 48px; font-size: 26px; flex: none; }
.check span { line-height: 1.4; } .check a { color: var(--gold2); }
.tv .bar { padding: 6px 10px; gap: 6px; }
.tv .bar h1 { font-size: 15px; }
.tv .icon-btn { width: 34px; height: 34px; font-size: 20px; }
.felt { left: 11%; right: 11%; top: 11%; bottom: 11%; border-width: 8px; border-radius: 160px; }
.felt .brand { font-size: 16px; }
.pot { font-size: 12px; padding: 3px 10px; top: 33%; }
.board { gap: 3px; top: 47%; }
.board .card { width: 30px; height: 42px; font-size: 15px; } .board .card i { font-size: 14px; }
.seat { width: 66px; }
.seat .av { width: 40px; height: 40px; border-width: 2px; padding: 0; background: none; font-size: 18px; }
.seat.empty .av { width: 34px; height: 34px; font-size: 16px; }
.seat .plate { position: relative; background: #000c; border-radius: 7px; margin-top: -5px; padding: 2px 3px 3px; overflow: hidden; }
.seat .nm { background: none; margin: 0; padding: 0; font-size: 10px; line-height: 1.2; }
.seat .sk { font-size: 10px; line-height: 1.2; }
.seat .timer { bottom: 0; height: 2px; }
.seat .hole { top: -12px; left: auto; right: -8px; transform: none; z-index: 3; }
.seat .tag { top: auto; bottom: -14px; right: auto; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 0 5px; border-radius: 5px; white-space: nowrap; background: #555a; }
.seat .tag.t-fold, .seat .tag.t-out { background: #6b2a2acc; } .seat .tag.t-allin { background: var(--red); } .seat .tag.t-raise { background: #4a4699; } .seat .tag.t-call, .seat .tag.t-check { background: #2d6b3c; }
.seat .dealer { width: 15px; height: 15px; font-size: 9px; right: -6px; bottom: -2px; border-width: 1px; }
.seat .winamt { top: -18px; font-size: 12px; }
.seat.turn .av { box-shadow: 0 0 10px var(--gold); }
.betc { position: absolute; transform: translate(-50%, -50%); background: #000a; border-radius: 10px; font-size: 10px; padding: 1px 6px 1px 3px; display: flex; gap: 3px; align-items: center; white-space: nowrap; z-index: 2; }
.betc .chip-ic { width: 10px; height: 10px; }
.card.xs { width: 17px; height: 24px; font-size: 9px; border-radius: 3px; border-width: 1px; } .card.xs i { font-size: 9px; }
.seat .hole.omaha .card.xs { margin-left: -9px; }
.card.my { width: 40px; height: 56px; font-size: 19px; } .card.my i { font-size: 19px; }
.mycards.n4 .card.my { width: 36px; height: 50px; font-size: 17px; } .mycards.n4 .card.my i { font-size: 17px; }
.mycards.n6 .card.my { width: 32px; height: 45px; font-size: 15px; } .mycards.n6 .card.my i { font-size: 15px; }
.mycards { gap: 4px; margin-bottom: 6px; }
.actions { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); }
.actions .row + .row { margin-top: 6px; }
.actions .btn { font-size: 13px; padding: 10px 4px; border-radius: 8px; }
.presets button { padding: 6px 0; font-size: 12px; }
.raise-ctl .amt { min-width: 70px; font-size: 13px; }
.tbank { padding: 4px 12px; font-size: 12px; margin-bottom: 6px; }
.waiting-msg { padding: 6px; font-size: 13px; }
.result { font-size: 12px; top: 58%; padding: 4px 10px; }
.bubble { margin-bottom: 18px; font-size: 10px; }

/* v4: buy box + compact everything */
.buybox { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.buybox .lbl { font-size: 13px; color: #ddd; }
.buybox .quick { display: flex; gap: 6px; flex-wrap: wrap; }
.buybox .quick button { background: #3a3a4c; border-radius: 14px; padding: 5px 10px; font-size: 12px; }
.buybox .sum { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 4px 0; }
.buybox .sum b { color: var(--gold2); font-size: 20px; }
:root { --nav-h: 52px; }
body { font-size: 14px; }
input, textarea, select { padding: 10px 12px; font-size: 14px; border-radius: 8px; }
.btn { padding: 11px; font-size: 14px; border-radius: 8px; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.top { padding: 8px 12px; }
.logo svg { width: 30px; height: 34px; } .logo b { font-size: 15px; } .logo small { font-size: 6px; }
.balance { padding: 5px 10px; font-size: 13px; }
.statbar { padding: 7px 14px; font-size: 14px; gap: 18px; }
.page { padding: 12px; }
.page h2 { font-size: 18px; margin: 4px 0 10px; } .page h3 { font-size: 15px; }
.banner { min-height: 80px; margin: 10px 0; padding: 12px; } .banner b { font-size: 16px; }
.lobby-card { padding: 14px; margin: 10px 0; } .lobby-card h2 { font-size: 18px; margin-bottom: 6px; gap: 10px; } .lobby-card .ic { font-size: 26px; } .lobby-card p { font-size: 12px; margin: 2px 0 10px; }
.login-btn { width: 160px; margin: 8px auto; }
.bar { padding: 8px 12px; } .bar h1 { font-size: 17px; } .icon-btn { width: 32px; height: 32px; font-size: 20px; }
.gfilter { padding: 6px 10px; } .gfilter button { padding: 5px 11px; font-size: 12px; }
.trow { grid-template-columns: 70px 1fr auto 40px; gap: 8px; padding: 8px 10px; border-bottom-width: 4px; }
.trow .kind { font-size: 11px; } .trow .kind small { font-size: 9px; }
.trow .nm { font-size: 15px; } .trow .by { font-size: 11px; }
.trow .tags span { font-size: 9px; border-width: 1px; padding: 0 3px; }
.trow .stk { font-size: 11px; padding: 5px 7px; } .trow .cnt { font-size: 14px; }
nav.bottom button { font-size: 10px; } nav.bottom button svg { width: 22px; height: 22px; }
.seatbar { padding: 5px 8px; } .seatbar button { padding: 4px 9px; font-size: 11px; }
#app { padding-bottom: calc(var(--nav-h) + 44px + env(safe-area-inset-bottom)); }
.chat-wrap { height: calc(100dvh - var(--nav-h) - 52px); }
.chat-input { margin: 8px; padding: 2px 8px; } .chat-input input { padding: 8px 4px; } .chat-input button { font-size: 20px; }
.pinned { font-size: 13px; padding: 4px 12px 8px; }
.msg { font-size: 13px; margin: 5px 0; }
.pkg { padding: 10px; gap: 10px; margin-bottom: 8px; } .pkg .chips { font-size: 16px; }
.menu-item { font-size: 15px; padding: 11px 4px; gap: 14px; } .menu-item .mi { width: 28px; font-size: 20px; }
.order { font-size: 12px; padding: 7px 0; }
.modal { padding: 30px 10px; } .modal .box { padding: 16px; } .modal .head { font-size: 17px; margin-bottom: 12px; } .modal .box > * + * { margin-top: 10px; }
.check { font-size: 13px; } .check input { width: 20px; height: 20px; }
.toast { font-size: 13px; padding: 9px 14px; }
/* table: even smaller */
.tv .bar { padding: 4px 8px; } .tv .bar h1 { font-size: 13px; } .tsub { font-size: 10px; }
.tv .icon-btn { width: 30px; height: 30px; font-size: 17px; }
.seat { width: 58px; }
.seat .av { width: 34px; height: 34px; font-size: 16px; }
.avatar { font-size: 17px; }
.seat.empty .av { width: 28px; height: 28px; font-size: 14px; }
.seat .nm, .seat .sk { font-size: 9px; }
.card.xs { width: 15px; height: 21px; font-size: 8px; } .card.xs i { font-size: 8px; }
.board .card { width: 26px; height: 36px; font-size: 13px; } .board .card i { font-size: 12px; }
.pot { font-size: 11px; }
.betc { font-size: 9px; }
.card.my { width: 34px; height: 48px; font-size: 16px; } .card.my i { font-size: 16px; }
.mycards.n4 .card.my { width: 31px; height: 44px; font-size: 15px; } .mycards.n4 .card.my i { font-size: 15px; }
.mycards.n6 .card.my { width: 28px; height: 40px; font-size: 13px; } .mycards.n6 .card.my i { font-size: 13px; }
.actions .btn { font-size: 12px; padding: 9px 4px; }
.presets button { font-size: 11px; padding: 5px 0; }
.raise-ctl .amt { font-size: 12px; min-width: 60px; }

/* v5 */
.logo img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; }
.msg { position: relative; }
.msg.admin { background: #2d4a7a55; border-left: 3px solid #6aa0ff; padding: 5px 8px; border-radius: 4px; }
.msg .quote { font-size: 11px; color: var(--muted); border-left: 2px solid #fff3; padding-left: 6px; margin-bottom: 2px; }
.msg .rep { background: none; color: var(--gold2); font-size: 11px; margin-left: 6px; text-decoration: underline; }
.replying { font-size: 12px; background: #2d4a7a88; margin: 6px 8px 0; padding: 6px 8px; border-radius: 8px; }
.replying button { background: none; float: right; }
.bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 14px; background: #fff; color: #111; font-size: 10px; line-height: 1.25; padding: 4px 8px; border-radius: 10px; white-space: normal; width: max-content; max-width: 120px; z-index: 6; box-shadow: 0 2px 6px #0007; animation: pop .2s; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.seat .av[data-target] { cursor: pointer; }
.throwpick { position: absolute; top: 105%; left: 50%; transform: translateX(-50%); z-index: 8; background: #23232ff2; border: 1px solid var(--gold); border-radius: 10px; padding: 4px; display: grid; grid-template-columns: repeat(4, 28px); gap: 2px; }
.throwpick button { background: none; font-size: 18px; padding: 2px; }
#fx-root { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
.fly { position: fixed; font-size: 26px; transform: translate(0, 0); transition: transform .85s cubic-bezier(.3,.6,.4,1); margin: -13px 0 0 -13px; }
.fly.hit { transition: transform .3s, opacity .6s .1s; opacity: 0; }
.tswitch { display: flex; gap: 5px; padding: 3px 8px; overflow-x: auto; }
.tswitch button { background: #2e2e3d; border-radius: 12px; padding: 3px 9px; font-size: 11px; white-space: nowrap; }
.tswitch button.on { background: var(--card); } .tswitch button.hot { background: var(--red); animation: pulse 1s infinite; }
.hrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; width: 100%; background: var(--panel); border-radius: 10px; padding: 8px 10px; margin-top: 6px; text-align: left; font-size: 13px; }
.hrow .hcards { display: flex; gap: 2px; }
.modal .box.replay { padding: 10px; }
.rp-felt { position: relative; height: 360px; }
.rp-felt .felt { left: 9%; right: 9%; top: 9%; bottom: 9%; }
.rp-text { text-align: center; min-height: 34px; font-size: 13px; color: var(--gold2); }
.rp-ctl { display: flex; gap: 6px; justify-content: center; }
.rp-ctl button { background: var(--panel); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.rp-ctl button[data-k=play] { background: var(--card); min-width: 110px; }

/* v6: no auto-zoom on phones — iOS zooms into any field with font-size < 16px */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
input, textarea, select { font-size: 16px !important; }
.chat-input input, .tchat input { padding-top: 6px; padding-bottom: 6px; }
.cashbal { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.cashbal b { font-size: 22px; color: var(--gold2); display: flex; align-items: center; gap: 6px; }

/* v7: side table chat, zoom lock */
html, body { touch-action: pan-x pan-y; }
button, a, .seat, .av { touch-action: manipulation; }
.tchat.side { background: #1d1b2e; top: 40px; bottom: 0; left: auto; right: 0; width: min(74%, 290px); max-height: none; border-radius: 12px 0 0 12px; border-right: 0; z-index: 36; box-shadow: -8px 0 24px #0009; animation: slidein .18s ease-out; display: flex; flex-direction: column; }
@keyframes slidein { from { transform: translateX(100%); } }
.tchat .tc-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; font-size: 13px; }
.tchat .tc-head button { background: #ffffff14; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; }
.tchat.side .msgs { flex: 1; max-height: none; overflow-y: auto; padding: 4px 10px 10px; }
.tchat.side .chat-input { margin: 4px 8px; }
.tchat .replying { margin: 0 8px; }

/* v8: readable showdown cards + chat band */
.seat .hole.shown { top: -30px; left: 50%; right: auto; transform: translateX(-50%); gap: 2px; z-index: 7; background: #000a; padding: 3px; border-radius: 6px; flex-wrap: nowrap; }
.card.rv { width: 20px; height: 28px; font-size: 11px; border-radius: 3px; } .card.rv i { font-size: 10px; }
.seat .hole.shown.n6 .card.rv { width: 18px; height: 26px; font-size: 10px; } .seat .hole.shown.n6 .card.rv i { font-size: 9px; }
.seat .hole.shown .card.hl { outline: 2px solid var(--gold2); transform: translateY(-3px); }
.tchat.band { position: absolute; left: 6px; right: 6px; top: 61%; height: 132px; bottom: auto; width: auto; max-height: none; border-radius: 12px; z-index: 36; display: flex; flex-direction: column; background: #12121ae6; border: 1px solid #4a4699; box-shadow: 0 6px 20px #000a; animation: none; }
.tchat.band .msgs { flex: 1; max-height: none; overflow-y: auto; padding: 6px 30px 2px 10px; font-size: 12px; }
.tchat.band .msg { margin: 2px 0; font-size: 12px; }
.tchat.band .chat-input { margin: 4px 6px 6px; }
.tchat.band .tc-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff1f; font-size: 12px; z-index: 2; }
.tchat.band .replying { margin: 0 6px; padding: 3px 8px; }

.seat.sx-r .hole.shown { left: auto; right: -6px; transform: none; }
.seat.sx-l .hole.shown { left: -6px; transform: none; }
.tchat.band { top: 56%; height: 120px; }

/* ===== v9: 3D table, Pokerrrr-style cards & buttons ===== */
.tv { background: radial-gradient(120% 80% at 50% 45%, #2a2e4a 0%, #15172a 55%, #0a0b14 100%); }
.tv.slide-l .felt-wrap { animation: slideL .25s ease-out; } .tv.slide-r .felt-wrap { animation: slideR .25s ease-out; }
@keyframes slideL { from { transform: translateX(40%); opacity: .3; } } @keyframes slideR { from { transform: translateX(-40%); opacity: .3; } }
.felt { border: 0; z-index: 0;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(100% 100% at 50% 50%, #2f9a5a 0%, #1f7a43 45%, #135a2f 80%, #0c4222 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 0 9px rgba(0,0,0,.18), inset 0 -18px 50px rgba(0,0,0,.55), inset 0 14px 30px rgba(255,255,255,.08); }
.rail { position: absolute; left: calc(11% - 13px); right: calc(11% - 13px); top: calc(11% - 13px); bottom: calc(11% - 13px); border-radius: 175px;
  background: linear-gradient(160deg, #a86c3c 0%, #6b3f1d 35%, #3c2010 70%, #5a3418 100%);
  box-shadow: 0 0 0 2px #1d0f06, inset 0 2px 2px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.6), 0 22px 40px rgba(0,0,0,.85), 0 6px 0 #1d0f06; }
.rp-felt .rail { left: calc(9% - 10px); right: calc(9% - 10px); top: calc(9% - 10px); bottom: calc(9% - 10px); }
.felt::after { content: ""; position: absolute; inset: 14px; border-radius: inherit; border: 1.5px solid rgba(255,255,255,.12); pointer-events: none; }
.felt .brand { color: rgba(255,255,255,.09); font-weight: 700; letter-spacing: 4px; }
.pot { background: linear-gradient(#000c, #000a); box-shadow: 0 2px 8px #0008; border: 1px solid #ffffff1a; }

/* card faces */
.card { position: relative; display: block; background: linear-gradient(180deg, #fff 0%, #f1f1f4 100%); border: 1px solid #c9c9d2; color: #15151a; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.card b { position: absolute; left: 7%; top: 2%; font-weight: 800; font-size: 1em; line-height: 1; letter-spacing: -1px; }
.card i { position: absolute; left: 9%; top: 40%; font-size: .62em !important; font-style: normal; line-height: 1; }
.card em { position: absolute; right: 5%; bottom: 3%; font-size: 1.05em; font-style: normal; line-height: 1; }
.card.r { color: #d0181c; }
body.fourc .card.s-d { color: #1458d4; } body.fourc .card.s-c { color: #138a35; }
.board .card { width: 30px; height: 42px; font-size: 18px; }
.card.xs b { font-size: 9px; } .card.xs em { display: none; } .card.xs i { top: 52% !important; font-size: 8px !important; }
.card.rv { font-size: 13px; } .card.rv em { display: none; } .card.rv i { top: 52%; font-size: 10px !important; }
.card.my { width: 46px; height: 64px; font-size: 24px; border-radius: 6px; }
.mycards.n4 .card.my { width: 40px; height: 56px; font-size: 21px; }
.mycards.n6 .card.my { width: 34px; height: 48px; font-size: 18px; }
.card.hl { outline: 2px solid var(--gold2); }

/* card backs */
.card.back, body .card.back { border: 2px solid #fff; }
body.cb-purple .card.back, .backs .card.back.cbp-purple { background: radial-gradient(circle at 50% 50%, #7c74e6 0 18%, transparent 19%), repeating-linear-gradient(45deg, #4a4699 0 4px, #3a368a 4px 8px); }
body.cb-red .card.back, .backs .card.back.cbp-red { background: radial-gradient(circle at 50% 50%, #ff8a7a 0 18%, transparent 19%), repeating-linear-gradient(45deg, #b3261e 0 4px, #8e1a14 4px 8px); }
body.cb-blue .card.back, .backs .card.back.cbp-blue { background: radial-gradient(circle at 50% 50%, #8fd0ff 0 18%, transparent 19%), repeating-linear-gradient(-45deg, #1f5fbf 0 4px, #164a96 4px 8px); }
body.cb-green .card.back, .backs .card.back.cbp-green { background: radial-gradient(circle at 50% 50%, #9ef0b0 0 18%, transparent 19%), repeating-linear-gradient(45deg, #1f8a4c 0 4px, #156b39 4px 8px); }
body.cb-black .card.back, .backs .card.back.cbp-black { background: radial-gradient(circle at 50% 50%, #f3d38a 0 16%, transparent 17%), repeating-linear-gradient(45deg, #1b1b22 0 5px, #2a2a33 5px 10px); border-color: #d4a64a; }
body.cb-gold .card.back, .backs .card.back.cbp-gold { background: radial-gradient(circle at 50% 50%, #fff6d6 0 16%, transparent 17%), repeating-linear-gradient(45deg, #c9962f 0 4px, #a87a20 4px 8px); }

/* my cards: flip / peek */
.act-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 70px; }
.mycards { display: flex; gap: 4px; margin: 0; position: relative; perspective: 600px; touch-action: none; }
.mycards .flip { position: relative; }
.mycards .fi { position: relative; transform-style: preserve-3d; transition: transform .35s; }
.mycards .front, .mycards .backf { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mycards .backf { position: absolute; inset: 0; transform: rotateY(180deg); }
.mycards.hidden-cards .fi { transform: rotateY(180deg); }
.mycards.hidden-cards .flip:nth-child(odd) .fi { transform: rotateY(180deg) rotateZ(-3deg); } .mycards.hidden-cards .flip:nth-child(even) .fi { transform: rotateY(180deg) rotateZ(3deg); }
.peekhint { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 10px; color: var(--gold2); white-space: nowrap; animation: bob 1.2s infinite; }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }

/* action buttons */
.abtns { display: flex; gap: 6px; align-items: flex-end; flex-wrap: nowrap; }
.pbtn { min-width: 66px; height: 54px; border-radius: 27px; font-weight: 800; font-size: 13px; letter-spacing: .5px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25); border: 1px solid rgba(0,0,0,.3); padding: 0 12px; }
.pbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25); }
.pbtn small { font-size: 11px; font-weight: 700; opacity: .95; }
.pbtn.red { background: linear-gradient(#e0473f, #a52520); } .pbtn.green { background: linear-gradient(#3cc36a, #1c7d3e); }
.pbtn.blue { background: linear-gradient(#5b8cff, #2d4fc2); } .pbtn.gold { background: linear-gradient(#ffd36b, #c38b1c); color: #2a1a00; }
.pbtn.ghost { background: #2e2e3d; }
.tbank { margin: 0 0 4px; height: 30px; align-self: flex-start; }
.abtns .tbank { position: absolute; right: 12px; bottom: 76px; }
.actions { position: relative; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #0a0b14 30%); }
.raisepanel { position: absolute; right: 8px; bottom: calc(100% - 4px); width: 230px; background: #1d1f33f2; border: 1px solid #5b8cff66; border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px #000c; z-index: 5; }
.rp-amt { text-align: center; font-size: 12px; color: var(--muted); } .rp-amt b { display: block; font-size: 24px; color: var(--gold2); }
.rp-pre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0; } .rp-pre button { background: #2e2e45; border-radius: 8px; padding: 7px 0; font-size: 11px; font-weight: 700; }
.raisepanel input[type=range] { width: 100%; accent-color: var(--gold); padding: 0; background: none; height: 28px; }
.rp-go { display: flex; gap: 6px; margin-top: 6px; } .rp-go .pbtn { flex: 1; height: 44px; min-width: 0; }

/* seat tags english */
.seat .tag { font-weight: 800; letter-spacing: .5px; }

/* multi-table switcher */
.tswitch { gap: 6px; padding: 6px 8px 2px; }
.tswitch button { display: flex; flex-direction: column; align-items: flex-start; min-width: 108px; padding: 7px 12px; border-radius: 12px; background: #2a2b42; border: 1px solid #ffffff14; font-size: 13px; }
.tswitch button b { font-size: 13px; } .tswitch button small { font-size: 10px; color: var(--muted); }
.tswitch button.on { background: linear-gradient(#5a56b0, #3d3990); border-color: #8a86ff; } .tswitch button.on small { color: #ddd; }
.tswitch button.hot { background: linear-gradient(#e0473f, #a52520); } .tswitch button.hot small { color: #fff; }
.tswitch button.add { min-width: 56px; align-items: center; }
.tdots { display: flex; gap: 5px; justify-content: center; align-items: center; padding: 2px 0 0; font-size: 9px; color: var(--muted); }
.tdots i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff33; } .tdots i.on { background: var(--gold2); } .tdots span { margin-left: 6px; }

/* chat: floating button left of my seat + panel in the lower-left */
.chatfab { position: absolute; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(#3a3d66, #23243d); border: 1px solid #ffffff2a; box-shadow: 0 3px 8px #0009; font-size: 18px; z-index: 4; }
.chatfab .dot { position: absolute; top: -3px; right: -3px; background: var(--red); font-size: 10px; border-radius: 8px; padding: 0 5px; }
.tchat.leftbox { position: absolute; left: 6px; width: 42%; top: 52%; height: 30%; z-index: 36; display: flex; flex-direction: column; background: #12121ad9; border: 1px solid #4a4699; border-radius: 12px; box-shadow: 0 6px 20px #000a; backdrop-filter: blur(3px); }
.tchat.leftbox .msgs { flex: 1; overflow-y: auto; padding: 6px 26px 2px 8px; font-size: 11px; max-height: none; }
.tchat.leftbox .msg { font-size: 11px; margin: 2px 0; }
.tchat.leftbox .chat-input { margin: 4px; padding: 0 6px; }
.tchat.leftbox .tc-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff1f; font-size: 11px; z-index: 2; }

/* throw sheet + effects */
.throwsheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(92%, 330px); background: #1d1f33f5; border: 1px solid var(--gold); border-radius: 16px; padding: 10px; box-shadow: 0 14px 40px #000; animation: pop .15s; }
.ts-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; } .ts-head .avatar { width: 28px; height: 28px; font-size: 16px; } .ts-head button { margin-left: auto; background: #ffffff1f; width: 26px; height: 26px; border-radius: 50%; }
.ts-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ts-grid button { background: #2a2b42; border-radius: 10px; font-size: 24px; padding: 8px 0; }
.ts-grid button:active { transform: scale(.9); }
.fly { position: fixed; font-size: 28px; transition: none; margin: 0; z-index: 71; filter: drop-shadow(0 4px 4px #0008); }
.pt { position: fixed; pointer-events: none; z-index: 72; line-height: 1; }
.cs-prev { display: flex; gap: 6px; justify-content: center; margin: 6px 0; }
.backs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.backs button { background: #2a2b42; border-radius: 10px; padding: 8px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px solid transparent; }
.backs button.on { border-color: var(--gold); } .backs .card { width: 34px; height: 48px; }

/* omaha: my cards above the buttons so nothing overflows */
.act-wrap.many { flex-direction: column; align-items: stretch; gap: 6px; }
.act-wrap.many .mycards { justify-content: center; }
.act-wrap.many .abtns { justify-content: center; }
.abtns .pbtn { flex: 1 1 0; min-width: 0; }
.act-wrap:not(.many) .abtns { flex: 1; justify-content: flex-end; }
.act-wrap:not(.many) .abtns .pbtn { max-width: 92px; }

/* ===================== v10: Pokerrrr-style split screen ===================== */
.tv.pk { display: flex; flex-direction: column; background: #0b0d18; }
.pk-top { flex: 0 0 50%; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 55%, #3b3350 0%, #1d1a2c 55%, #0d0c16 100%); }
.pk-top::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.025) 38px 40px), linear-gradient(180deg, #4a3326 0 14%, transparent 14%); }
.pk-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0; position: relative; z-index: 3; }
.pk-bar .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: #00000066; border: 1px solid #ffffff22; font-size: 16px; }
.pk-title { display: flex; flex-direction: column; align-items: center; background: linear-gradient(#1b1b26ee, #0e0e16ee); border: 1px solid #c9a24d; border-radius: 16px; padding: 2px 18px; line-height: 1.15; box-shadow: 0 2px 8px #000a; }
.pk-title b { font-size: 14px; color: #fff; } .pk-title small { font-size: 9px; color: #c9b88a; }
.tv.pk.slide-l .pk-top .felt-wrap { animation: slideL .25s ease-out; } .tv.pk.slide-r .pk-top .felt-wrap { animation: slideR .25s ease-out; }
.felt-wrap.h { flex: 1; position: relative; }
.felt-wrap.h .felt { left: 9%; right: 9%; top: 17%; bottom: 19%; border-radius: 999px;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255,255,255,.14), transparent 70%), radial-gradient(100% 100% at 50% 50%, #2a8f8a 0%, #1b6e6c 50%, #114b4b 85%, #0b3535 100%); }
.felt-wrap.h .rail { left: calc(9% - 11px); right: calc(9% - 11px); top: calc(17% - 11px); bottom: calc(19% - 11px); border-radius: 999px;
  background: linear-gradient(180deg, #6d6f78 0%, #3b3d45 45%, #23242a 100%); box-shadow: 0 0 0 2px #0d0e12, inset 0 2px 2px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.6), 0 16px 30px rgba(0,0,0,.85); }
.felt-wrap.h .felt .brand { top: 64%; font-size: 12px; }
.felt-wrap.h .pot { top: 27%; background: #00000080; border-radius: 4px; font-size: 11px; padding: 2px 14px; border: 0; }
.felt-wrap.h .board { top: 50%; }
.felt-wrap.h .board .card { width: 30px; height: 42px; font-size: 18px; }
.rp-felt.h { height: 300px; }

/* seats as name plates */
.pk .seat { width: auto; }
.pk .seat .np { position: relative; display: flex; align-items: center; gap: 4px; background: linear-gradient(#24242ef2, #111118f2); border: 1px solid #ffffff26; border-radius: 6px; padding: 2px 7px 2px 2px; box-shadow: 0 3px 8px #000b; min-width: 76px; }
.pk .seat .np .av { width: 28px; height: 28px; border: 0; flex: none; }
.pk .seat .np .avatar { font-size: 15px; }
.pk .seat .np-t { text-align: left; line-height: 1.15; overflow: hidden; }
.pk .seat .nm { font-size: 10px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk .seat .sk { font-size: 11px; font-weight: 700; color: #fff; }
.pk .seat.turn .np { border-color: #4fe3d1; box-shadow: 0 0 0 1px #4fe3d1, 0 0 14px #4fe3d1aa; }
.pk .seat.me .np { border-color: #c9a24d; }
.pk .seat.folded .np { opacity: .55; }
.pk .seat.win .np { border-color: var(--ok); box-shadow: 0 0 14px var(--ok); }
.pk .seat .timer { left: 2px; right: 2px; bottom: 0; height: 3px; background: #4fe3d1; }
.pk .seat .dealer { position: absolute; right: -9px; bottom: -6px; width: 16px; height: 16px; font-size: 9px; background: #e33; color: #fff; border: 1px solid #fff; }
.pk .seat .tag { bottom: -15px; }
.pk .seat.empty .av { width: 30px; height: 30px; }
.minicards { position: absolute; left: -10px; top: -6px; display: flex; z-index: 2; }
.minicards .card { width: 13px; height: 19px; border-width: 1px; margin-left: -6px; transform: rotate(-8deg); box-shadow: 0 1px 2px #000a; }
.minicards .card:first-child { margin-left: 0; }
.pk .seat .hole.shown { top: -30px; }
.pk .seat .winamt { top: -20px; font-size: 12px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pk .seat .winamt small { font-size: 9px; color: var(--gold2); }
.pk .seat .bubble { margin-bottom: 8px; }
.pk .betc { font-size: 10px; }

/* bottom half: hand zone */
.pk-hand { flex: 1; position: relative; overflow: hidden; border-top: 3px solid #c9a24d; box-shadow: inset 0 3px 0 #6b5422;
  background: radial-gradient(80% 70% at 35% 45%, #2f7f6c 0%, #1e5e52 55%, #133f38 100%); }
.pk-hand::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 30% 30%, rgba(0,0,0,.08) 0 1px, transparent 1px 3px); }
.hz-empty, .hz-wait { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #d7efe8; font-size: 14px; padding: 20px; }
.hz-wait { position: static; font-size: 13px; color: #cfe; }
.hz-cards { position: absolute; left: 6%; top: 14%; width: 56%; height: 74%; touch-action: none; user-select: none; -webkit-user-select: none; }
.hz-cards .hc { position: absolute; bottom: 4%; left: calc(var(--k) * (100% - var(--cw)) / max(1, var(--n) - 1)); width: var(--cw); transform-origin: 50% 120%;
  transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)); filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.hz-cards.n2 { --cw: 62%; } .hz-cards.n4 { --cw: 46%; } .hz-cards.n6 { --cw: 38%; }
.hz-cards.n2 .hc { left: calc(var(--k) * 34%); }
.hc-front, .hc-back { position: relative; }
.hc .card.big { width: 100%; height: auto; aspect-ratio: 5 / 7; font-size: clamp(22px, 9vw, 46px); border-radius: 10px; border: 1px solid #bbb; }
.hz-cards.n4 .card.big { font-size: clamp(18px, 7vw, 34px); } .hz-cards.n6 .card.big { font-size: clamp(14px, 5.6vw, 28px); }
.hc .card.big b { left: 9%; top: 4%; } .hc .card.big i { left: 11%; top: 30%; } .hc .card.big em { right: 7%; bottom: 5%; font-size: 1.6em; }
.hc-back { position: absolute !important; inset: 0; border-radius: 10px; border: 3px solid #fff !important; box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); }
.hc-back::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  background: center / 55% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 72'><path d='M32 2 L60 12 V34 C60 52 46 64 32 70 C18 64 4 52 4 34 V12 Z' fill='%23ffffffcc'/><path d='M32 16 L44 30 L32 44 L20 30 Z' fill='%23000a'/></svg>"); }
.hz-cards.folded { opacity: .35; filter: grayscale(.7); }
.foldtag { position: absolute; left: 30%; top: 40%; font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 6px #000; letter-spacing: 3px; transform: rotate(-12deg); }
.hz-cards .peekhint { top: -2px; left: 40%; font-size: 11px; color: #ffe9a8; text-shadow: 0 1px 3px #000; }
.hz-right { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }
.hz-chat { position: absolute; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 42px; height: 42px; border-radius: 50%; background: #0f2d2acc; border: 1px solid #ffffff3a; font-size: 18px; box-shadow: 0 3px 8px #0009; }
.hz-chat .dot { position: absolute; top: -3px; right: -3px; background: var(--red); font-size: 10px; border-radius: 8px; padding: 0 5px; }
.hz-tb { position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 50%; background: #0f2d2acc; border: 1px solid #c9a24d; color: #ffe9a8; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hz-tb small { font-size: 9px; }

/* action dial */
.dialwrap { position: relative; }
.dial { position: relative; width: 168px; height: 168px; }
.d-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.d-base { fill: url(#none); fill: #2b2420; stroke: #8a6a3d; stroke-width: 3; filter: drop-shadow(0 6px 10px #000a); }
.d-track { fill: none; stroke: #4d3d30; stroke-width: 12; stroke-linecap: round; }
.d-prog { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.d-knob { fill: #f0e6cf; stroke: #6b5422; stroke-width: 2; }
.dial.noraise .d-track { opacity: .3; }
.d-main { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #e9e7f2 70%); border: 5px solid #24c48f; color: #1c7d5c;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 10px #000a, inset 0 -3px 0 rgba(0,0,0,.08); line-height: 1.1; }
.d-main span { font-size: 16px; } .d-main b { font-size: 17px; }
.dial.armed .d-main { border-color: #7a5cff; color: #5536d8; }
.d-main:active { transform: translate(-50%, -50%) scale(.95); }
.d-btn { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #d8cdb3; color: #4a3a24; font-weight: 900; font-size: 18px; box-shadow: 0 2px 4px #0009; }
.d-minus { left: -4px; top: 34%; } .d-plus { right: -4px; top: 34%; } .d-kb { left: 10%; bottom: 4%; font-size: 13px; width: 28px; height: 28px; }
.d-mults { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; gap: 2px; background: #d8cdb3; border-radius: 12px; padding: 2px; box-shadow: 0 2px 4px #0009; }
.d-mults button { background: #efe6d0; color: #4a3a24; font-weight: 800; font-size: 11px; padding: 4px 7px; border-radius: 10px; }
.d-fold { position: absolute; left: -46px; top: -6px; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(#e0473f, #a52520); color: #fff; font-weight: 800; font-size: 12px; box-shadow: 0 3px 0 #0008; z-index: 2; }
.preacts { display: flex; flex-direction: column; gap: 8px; }
.preacts button { display: flex; align-items: center; gap: 8px; min-width: 140px; padding: 9px 12px; border-radius: 22px; background: #0f2d2ad9; border: 1px solid #ffffff33; color: #e9fff8; font-weight: 700; font-size: 13px; }
.preacts button i { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #9fe; flex: none; }
.preacts button.on { background: #1d6e5d; border-color: #4fe3d1; } .preacts button.on i { background: #4fe3d1; box-shadow: inset 0 0 0 2px #0f2d2a; }
.pbtn.big { height: 60px; min-width: 140px; font-size: 16px; }

/* chat over the hand zone (never over the table) */
.tchat.hzbox { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); height: 42%; z-index: 40; display: flex; flex-direction: column; background: #0d1d1bf0; border: 1px solid #4fe3d155; border-radius: 14px; box-shadow: 0 -6px 24px #000c; max-height: none; width: auto; }
.tchat.hzbox .msgs { flex: 1; overflow-y: auto; padding: 8px 30px 4px 10px; max-height: none; font-size: 12px; }
.tchat.hzbox .msg { font-size: 12px; margin: 3px 0; }
.tchat.hzbox .chat-input { margin: 6px; }
.tchat.hzbox .tc-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff1f; font-size: 12px; z-index: 2; }
.pk ~ .drop, #pk-over .drop { position: fixed; top: 46px; right: 8px; z-index: 45; }
#pk-over .throwsheet { position: fixed; top: 25%; }
.tswitch { padding: 4px 8px 0; position: relative; z-index: 3; } .tswitch button { min-width: 96px; padding: 4px 10px; }
.tdots { position: relative; z-index: 3; padding: 0; }
.hc-back { width: 100% !important; height: 100% !important; }
.hz-cards { width: 50%; left: 5%; }
.d-fold { left: 50%; top: -58px; transform: translateX(-50%); }
/* corner index bottom-left so peeling the corner shows the card */
.card u { display: none; }
.hc .card.big u { display: block; position: absolute; left: 7%; bottom: 3%; text-decoration: none; font-weight: 800; font-size: .5em; line-height: 1; text-align: center; transform: rotate(180deg); }

/* ===== v11: push-to-act dial, peel curl ===== */
.d-hint { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #ffe9a8; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.d-main { touch-action: none; transition: transform .2s; }
.d-main .d-arrow { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 14px; line-height: 1; opacity: .5; animation: nudge 1.2s infinite; }
@keyframes nudge { 50% { transform: translate(-50%, -4px); opacity: 1; } }
.d-main.ready { box-shadow: 0 0 0 6px #ffe9a866, 0 10px 24px #000c; }
.d-knob { fill: #f6eedb; stroke: #6b5422; stroke-width: 2; filter: drop-shadow(0 2px 3px #000a); cursor: grab; }
.d-knob-in { fill: #c9a24d; pointer-events: none; }
.d-kb { left: 4%; bottom: 8%; }
.chipfly { position: fixed; width: 18px; height: 18px; border-radius: 50%; z-index: 72; pointer-events: none;
  background: radial-gradient(circle, #f3d38a 30%, #d4a64a 31%, #d4a64a 55%, #fff 56%, #fff 62%, #d4a64a 63%); box-shadow: 0 2px 4px #0009; }

/* cards: lift while peeling, folded-over corner, shine on reveal */
.hz-cards .hc { --lift: 0; }
.hz-cards .hc .hc-front, .hz-cards .hc .hc-back { transform: translateY(calc(var(--lift) * -6px)) scale(calc(1 + var(--lift) * .03)); }
.hc-flap { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(135deg, #ffffff 0%, #ececf2 35%, #c9c9d6 70%, #9d9db0 100%);
  filter: drop-shadow(3px -3px 4px rgba(0,0,0,.45)); clip-path: polygon(0 100%, 0 100%, 0 100%); }
.hc-back { z-index: 2; }
.hz-cards.peel .hc-back { box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 0 0 0 transparent; }
.hc-front { overflow: hidden; border-radius: 10px; }
.hc-front .shine { position: absolute; inset: 0; pointer-events: none; border-radius: 10px; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 48%, transparent 66%); background-size: 250% 100%; background-position: 120% 0; }
.hz-cards.revealing .hc-front .shine { animation: shine .8s .15s ease-out; }
@keyframes shine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }
.hz-cards.revealing .hc { animation: pop2 .45s ease-out; }
@keyframes pop2 { 40% { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)) translateY(-10px) scale(1.04); } }
.hz-cards.pushing { filter: drop-shadow(0 0 14px #ff6b6b); }
.hz-cards.pushing::after { content: "FOLD"; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-weight: 900; color: #ff8a8a; letter-spacing: 3px; text-shadow: 0 1px 4px #000; }
.peekhint.dim { opacity: .55; }
.hz-cards .peekhint { left: 0; transform: none; top: -22px; animation: none; white-space: nowrap; }

/* ===== v12: bigger dial, separate amount button, 6-card fit, real peel, beast card backs ===== */
.dial { width: 196px; height: 196px; }
.d-main { width: 110px; height: 110px; } .d-main span { font-size: 19px; } .d-main b { font-size: 20px; }
.d-mults { bottom: -10px; } .d-mults button { font-size: 12px; padding: 5px 9px; }
.d-kbside { position: absolute; left: -56px; bottom: 4px; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(#efe6d0, #c9b88a); color: #4a3a24; font-size: 18px; font-weight: 800; box-shadow: 0 3px 6px #000a; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; z-index: 2; }
.d-kbside small { font-size: 9px; }
.kb-quick { display: flex; gap: 6px; } .kb-quick button { flex: 1; background: #2e2e45; border-radius: 8px; padding: 8px 0; font-size: 12px; font-weight: 700; }
.d-knob { stroke-width: 2.5; }
.hz-right { right: 1%; }
/* fit 4 / 6 cards on the left half */
.hz-cards { left: 3%; width: 50%; }
.hz-cards.n4 { --cw: 40%; } .hz-cards.n6 { --cw: 31%; }
.hz-cards.n4 .hc, .hz-cards.n6 .hc { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 4deg)); transform-origin: 50% 140%; }
.hz-cards.n6 .card.big { font-size: clamp(13px, 4.6vw, 24px); border-radius: 7px; }
.hz-cards.n6 .hc-back, .hz-cards.n6 .hc-flap, .hz-cards.n6 .hc-front { border-radius: 7px; }
/* realistic curl: shading on the flap and a cast shadow along the fold */
.hc-flap { background:
  linear-gradient(45deg, rgba(0,0,0,0) calc(var(--c, 0) * .5%), rgba(255,255,255,1) calc(var(--c, 0) * .5% + 2%), #f4f4f8 calc(var(--c, 0) * .7%), #c8c8d4 calc(var(--c, 0) * .98%), #9a9aae calc(var(--c, 0) * 1%));
  filter: drop-shadow(4px -4px 5px rgba(0,0,0,.5)); }
.hc-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; border-radius: inherit;
  background: linear-gradient(45deg, rgba(0,0,0,0) calc(var(--c, 0) * .32%), rgba(0,0,0,.38) calc(var(--c, 0) * .5%), rgba(0,0,0,0) calc(var(--c, 0) * .5% + .5%)); }

/* beast card backs (original art: pattern + emblem) */
body.cb-dragon { --emo: "🐉"; } body.cb-gorilla { --emo: "🦍"; } body.cb-tiger { --emo: "🐅"; } body.cb-lion { --emo: "🦁"; } body.cb-eagle { --emo: "🦅"; } body.cb-wolf { --emo: "🐺"; } body.cb-purple { --emo: ""; }
body.cb-dragon .card.back, .backs .card.back.cbp-dragon { --emo: "🐉"; background: radial-gradient(circle at 50% 50%, #ffcf6b 0 22%, #b8860b 23% 25%, transparent 26%), radial-gradient(circle at 0 0, #a3161a 0 30%, transparent 31%) 0 0 / 10px 10px, radial-gradient(circle at 100% 100%, #a3161a 0 30%, transparent 31%) 0 0 / 10px 10px, linear-gradient(#7b0d10, #5a0809); border-color: #e6c36a; }
body.cb-gorilla .card.back, .backs .card.back.cbp-gorilla { --emo: "🦍"; background: radial-gradient(circle at 50% 50%, #e8e8ee 0 22%, #8a8a99 23% 25%, transparent 26%), repeating-linear-gradient(45deg, #23232b 0 6px, #2f2f3a 6px 7px), repeating-linear-gradient(-45deg, transparent 0 6px, #3c3c48 6px 7px), #1b1b22; border-color: #c0c0cc; }
body.cb-tiger .card.back, .backs .card.back.cbp-tiger { --emo: "🐅"; background: radial-gradient(circle at 50% 50%, #fff3d6 0 22%, #2b1a0a 23% 25%, transparent 26%), repeating-linear-gradient(110deg, #e2781f 0 7px, #1d1209 7px 10px, #e2781f 10px 16px), #e2781f; border-color: #fff; }
body.cb-lion .card.back, .backs .card.back.cbp-lion { --emo: "🦁"; background: radial-gradient(circle at 50% 50%, #ffe7a6 0 22%, #c9a24d 23% 25%, transparent 26%), linear-gradient(45deg, transparent 46%, #c9a24d55 46% 54%, transparent 54%) 0 0 / 12px 12px, linear-gradient(-45deg, transparent 46%, #c9a24d55 46% 54%, transparent 54%) 0 0 / 12px 12px, linear-gradient(#1c2f78, #0f1a4a); border-color: #e6c36a; }
body.cb-eagle .card.back, .backs .card.back.cbp-eagle { --emo: "🦅"; background: radial-gradient(circle at 50% 50%, #f6f0d8 0 22%, #c9a24d 23% 25%, transparent 26%), linear-gradient(135deg, #0f4d2f 25%, transparent 25%) -6px 0 / 12px 12px, linear-gradient(225deg, #0f4d2f 25%, transparent 25%) -6px 0 / 12px 12px, linear-gradient(315deg, #0f4d2f 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(45deg, #0f4d2f 25%, transparent 25%) 0 0 / 12px 12px, #17633e; border-color: #e6c36a; }
body.cb-wolf .card.back, .backs .card.back.cbp-wolf { --emo: "🐺"; background: radial-gradient(circle at 50% 50%, #dfe8ff 0 22%, #7d8fc2 23% 25%, transparent 26%), radial-gradient(circle, #ffffff55 0 1px, transparent 1.5px) 0 0 / 9px 9px, linear-gradient(#18234a, #0b1230); border-color: #c8d4f5; }
.backs .card.back.cbp-purple { --emo: ""; }
/* emblem animal on large backs */
.hc-back::after, .backs .card.back::after, .card.back.my::after { content: var(--emo, ""); position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 0;
  font-size: 2.4em; filter: drop-shadow(0 0 4px rgba(255,220,140,.8)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.hc-back { font-size: 26px; } .hz-cards.n6 .hc-back { font-size: 15px; } .hz-cards.n4 .hc-back { font-size: 20px; }
.backs .card.back { font-size: 12px; } .backs { grid-template-columns: repeat(4, 1fr); }
.hc-back::before { content: ""; position: absolute; inset: 6%; border: 1.5px solid rgba(255,255,255,.45); border-radius: 6px; pointer-events: none; }
.d-kbside { left: -6px; top: -10px; bottom: auto; width: 44px; height: 44px; }
.hz-cards.n4 { --cw: 50%; } .hz-cards.n6 { --cw: 44%; }
.hz-cards.n6 .card.big { font-size: clamp(14px, 5.2vw, 26px); }
.hz-cards.n4 .card.big { font-size: clamp(16px, 6.4vw, 32px); }
.hz-cards { top: 10%; height: 80%; }
.hz-cards { left: 8%; width: 46%; }
.hz-cards.n4 .hc, .hz-cards.n6 .hc { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 3deg)); }
.pk-hand { touch-action: none; }
/* v13: top seats show revealed cards below the plate (not under the header) */
.pk .seat.sy-t .hole.shown { top: auto; bottom: -34px; z-index: 8; }
.pk .seat.sy-t .tag { bottom: auto; top: -15px; }
.pk .seat.sy-t .winamt { top: auto; bottom: -50px; }
.pk-bar { pointer-events: none; } .pk-bar > * { pointer-events: auto; }
/* timebank out of the card area: right side, above chat */
.hz-tb { left: auto; right: 10px; bottom: calc(62px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }
/* v14: caricature avatars, picker, table picker */
.avatar.toon { background: none !important; overflow: hidden; padding: 0; }
.avatar.toon svg, .avatar.toon img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.avatar.xl { width: 84px; height: 84px; display: inline-block; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold); }
.av-cur { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 12px; }
.av-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.av-grid button { background: none; padding: 2px; border-radius: 50%; border: 2px solid transparent; }
.av-grid button.on { border-color: var(--gold); }
.av-grid .avatar { width: 100%; aspect-ratio: 1; display: block; height: auto; border-radius: 50%; }
.av-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 10px; }
.av-nav button { background: var(--panel); width: 36px; height: 36px; border-radius: 50%; font-size: 20px; } .av-nav button:disabled { opacity: .3; }
.tp-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.tp-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; text-align: left; }
.tp-g { font-size: 11px; font-weight: 800; border: 1.5px solid #fff; border-radius: 4px; text-align: center; padding: 2px 0; }
.tp-n b { display: block; font-size: 14px; } .tp-n small { font-size: 11px; opacity: .9; }
.tp-c { font-weight: 800; font-size: 13px; }
#m-me { cursor: pointer; }

/* Касс — чип ирээгүй хүсэлт */
.req-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.req-title { font-weight: 700; color: var(--gold2); font-size: 15px; }
.req-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.req-f input { font-size: 20px !important; font-weight: 700; color: var(--gold2); }
.req-f textarea { min-height: 84px; resize: vertical; }
.req-row span:first-child { word-break: break-word; padding-right: 10px; }

/* high-hand bonus banner */
.hb-banner { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 120; pointer-events: none; text-align: center; padding: 18px 28px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, #5a4a1a, #1b1b25 80%); border: 2px solid var(--gold2); box-shadow: 0 0 40px #f2c14e88; animation: hbpop 3s ease forwards; min-width: 230px; }
.hb-banner.hb-royal { border-color: #ff6ad5; box-shadow: 0 0 60px #ff6ad5aa; }
.hb-banner.hb-sf { border-color: #6ad5ff; box-shadow: 0 0 50px #6ad5ff99; }
.hb-t { font-size: 22px; font-weight: 900; color: var(--gold2); letter-spacing: .04em; }
.hb-n { font-size: 15px; margin-top: 4px; }
.hb-a { font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 0 12px var(--gold2); }
.hb-s { font-size: 12px; color: var(--muted); }
@keyframes hbpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
/* 1-hour notice */
.hour-alert { position: fixed; inset: 0; z-index: 130; background: #000b; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ha-box { background: var(--panel); border: 2px solid var(--gold2); border-radius: 18px; padding: 22px 20px; max-width: 340px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 10px; animation: hapop .25s; }
@keyframes hapop { from { transform: scale(.7); opacity: 0; } }
.ha-ic { font-size: 44px; } .ha-t { font-size: 20px; font-weight: 900; color: var(--gold2); }
.ha-box p { margin: 0; line-height: 1.45; font-size: 15px; }

/* tournaments */
.tmode { display: flex; gap: 6px; padding: 8px 14px 0; }
.tmode button { flex: 1; padding: 10px; border-radius: 10px; background: var(--panel); font-weight: 700; }
.tmode button.on { background: var(--red); color: #fff; }
.tcard { background: var(--panel); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid var(--gold2); cursor: pointer; }
.tc-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.tc-kind { padding: 2px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .04em; background: #2d6b3c; }
.tc-kind.paid { background: #8a5a12; }
.tc-g { color: var(--muted); }
.tc-st { margin-left: auto; font-weight: 700; } .ts-reg { color: var(--gold2); } .ts-run { color: var(--ok); } .ts-end { color: var(--muted); }
.tc-name { font-size: 17px; font-weight: 800; margin: 6px 0 4px; }
.tc-row { display: flex; gap: 14px; font-size: 13px; flex-wrap: wrap; } .tc-row b { color: var(--gold2); }
.tc-time { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tdet { background: var(--panel); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.tpool { font-size: 30px; font-weight: 900; color: var(--gold2); text-align: center; } .tpool small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tgrid div { background: #33333f; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.tgrid small { color: var(--muted); font-size: 11px; } .tgrid b { font-size: 13px; } .tgrid i { font-style: normal; color: var(--gold2); font-size: 12px; }
.ttab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ttab th, .ttab td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ttab th { color: var(--muted); font-weight: 500; } .ttab tr.out td { color: var(--muted); } .ttab tr.cur td { background: #4a469955; }
.gold { color: var(--gold2); }
.tinfo { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11px; padding: 4px 10px; background: #2a2650e6; border-bottom: 1px solid #5a56b0; color: #ddd; position: relative; z-index: 3; }
.tinfo b { color: var(--gold2); } .tinfo.big { font-size: 13px; border-radius: 10px; border: 1px solid #5a56b0; padding: 8px 10px; }

/* admin watch view */
.godtag { background: #6b2a8a; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.godp { position: absolute; inset: 0; overflow-y: auto; padding: 10px 12px 60px; display: flex; flex-direction: column; gap: 8px; }
.godh { font-weight: 800; color: var(--gold2); font-size: 14px; }
.godrun { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #4a2a6b88; border: 1px dashed #b98aff; border-radius: 10px; padding: 6px 10px; font-size: 12px; }
.godrun .gr { display: flex; align-items: center; gap: 3px; } .godrun small { color: var(--muted); margin-right: 2px; }
.godl { display: flex; flex-direction: column; gap: 4px; }
.gp { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n c" "s c"; align-items: center; background: #ffffff0d; border-radius: 10px; padding: 5px 10px; font-size: 13px; }
.gp b { grid-area: n; } .gp .gc { grid-area: c; display: flex; gap: 2px; } .gp .gs { grid-area: s; font-size: 11px; color: var(--muted); }
.gp.f { opacity: .45; } .gp.act { outline: 2px solid var(--gold2); }
.godp .card.xs, .godrun .card.xs { width: 26px; height: 36px; font-size: 12px; }

/* table top bar (home · tables · add | info · settings · menu) */
.pk-bar .pkb-l, .pk-bar .pkb-r { display: flex; gap: 4px; align-items: center; }
.pk-bar .icon-btn { background: transparent; border: 0; color: #fff; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; position: relative; }
.pk-bar .icon-btn svg { width: 22px; height: 22px; } .pk-bar .tcnt svg { width: 28px; }
.pk-bar #tadd { color: #bbb; }
.pk-bar .tcnt span { position: absolute; right: -2px; top: 0; background: var(--card2); color: #fff; font-size: 9px; border-radius: 8px; padding: 0 4px; font-weight: 700; }
.pk-bar .tcnt i.hot { position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #e33; animation: p 1s infinite; }
@keyframes p { 50% { transform: scale(1.4); } }
.pk-title { padding: 2px 10px; min-width: 0; max-width: 34vw; } .pk-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tp-row.on { outline: 2px solid var(--gold2); }
/* settings panel */
.setpanel-wrap { position: fixed; inset: 0; z-index: 90; background: #0006; }
.setpanel { position: absolute; left: 0; right: 0; top: 0; background: #3a3a4a; border-bottom: 2px solid #55556a; box-shadow: 0 10px 30px #000a; animation: spdown .22s ease-out; max-height: 92vh; overflow-y: auto; }
.setpanel-wrap.out .setpanel { transform: translateY(-100%); transition: transform .2s; }
@keyframes spdown { from { transform: translateY(-100%); } }
.sp-close { display: block; width: 100%; padding: 10px 0 8px; color: #fff; border-bottom: 1px solid #55556a; background: transparent; }
.sp-close svg { width: 26px; height: 26px; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 18px 18px 20px; border-bottom: 3px double #23232f; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #fff; line-height: 1.2; }
input.sw { appearance: none; -webkit-appearance: none; width: 46px; min-width: 46px; height: 26px; border-radius: 13px; background: transparent; border: 2px solid #8a8a99; position: relative; padding: 0; cursor: pointer; transition: background .2s, border-color .2s; }
input.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #66667a; transition: transform .2s, background .2s; }
input.sw:checked { background: #b03a35; border-color: #b03a35; box-shadow: 0 0 10px #b03a3588; }
input.sw:checked::after { transform: translateX(20px); background: #fff; }
.sp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; }
.sp-btns button { background: #4a4699; color: #fff; border-radius: 6px; padding: 12px 6px; font-size: 14px; line-height: 1.2; }
/* option effects */
body.noanim *, body.noanim *::before, body.noanim *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
body.nobet .betc .bamt { display: none; }
body.noanim .hb-banner { animation: none !important; }

/* login / sign up */
.auth { display: flex; flex-direction: column; gap: 12px; }
.auth .btn { width: 100%; }
.af { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #ccc; }
.af i { color: var(--red); font-style: normal; } .af small { color: var(--muted); }
.auth .check { margin: 2px 0; }
.tg-a { display: block; text-align: center; text-decoration: none; color: #fff; }
.btn.red.tg-a { background: #229ed9; }
a.menu-item { text-decoration: none; color: inherit; display: flex; align-items: center; }
/* home: admin contact banner and the scrolling bonus line */
a.banner.contact { display: flex; text-decoration: none; color: #fff; min-height: 110px; padding: 14px 18px; background: radial-gradient(ellipse at 30% 40%, #b8323055, transparent 60%), radial-gradient(ellipse at 80% 60%, #2a7fd955, transparent 55%), linear-gradient(120deg, #1c1630, #2b1a3a 45%, #13213a); border: 1px solid #ffffff1a; box-shadow: inset 0 0 40px #0008; cursor: pointer; }
a.banner.contact b { font-size: 21px; line-height: 1.2; letter-spacing: .02em; text-shadow: 0 0 10px #ff5a5a, 0 0 22px #ff3b3b88, 0 2px 0 #000; transform: skewX(-6deg); }
a.banner.contact .heart { color: #ff8fb1; white-space: nowrap; }
a.banner.contact:active { transform: scale(.98); }
.marq { overflow: hidden; white-space: nowrap; background: linear-gradient(90deg, #3a2a10, #5a4214, #3a2a10); border: 1px solid #c9a24d66; border-radius: 10px; padding: 8px 0; margin: 12px 0 0; position: relative; }
.marq span { display: inline-block; padding: 0 12px; font-weight: 800; color: var(--gold2); animation: marq 7s ease-in-out infinite alternate; }
@keyframes marq { from { transform: translateX(calc(100vw - 100% - 60px)); } to { transform: translateX(0); } }
@media (min-width: 560px) { @keyframes marq { from { transform: translateX(calc(520px - 100% - 30px)); } to { transform: translateX(0); } } }