/* Viewport layout; independently scrolling hand, seats and tools. */
:root{--felt:#28514b;--art-ink:#263c32;--card-w:76px;--card-h:106px;--panel:#1f2530;--line:#ffffff20}
body{height:100vh;height:100dvh;min-height:380px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 30% 0%,var(--felt),transparent 66%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
header{width:100%;max-width:none;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));gap:20px;height:65px;flex:none;background:#0a10174d}.brand{font-size:30px}.club{font-size:10px}.toolbar{display:flex;gap:8px;margin-left:auto;align-items:center}header>.quiet{margin-left:0}.toolbar .secondary{padding:9px 13px;background:#ffffff09}.quiet{color:#d1d6e1}.primary:hover:not(:disabled){background:var(--lime);filter:brightness(1.12)}
main{width:100%;max-width:1800px;flex:1;min-height:0;gap:18px;padding:16px 20px max(12px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) 300px;overflow:hidden}.maincol{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(130px,1fr) auto;gap:12px}.topline{margin:0;padding:0 3px}.eyebrow{font-size:10px;letter-spacing:2.2px}h1{font-size:26px;margin:3px 0}.session{font-size:12px}.arena{min-height:0;padding:8px 12px;border-radius:24px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;background:linear-gradient(145deg,#ffffff08,#0002);border-color:#ffffff18}.opponents{flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;padding:0;gap:8px;min-height:0;scrollbar-width:thin}.opponent{min-width:72px;flex:0 0 82px;max-width:100px;padding:5px 4px;font-size:11px;line-height:1.3}.opponent>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opponent small{font-size:10px}.opponent .avatar{width:28px;height:28px;font-size:12px;background:var(--felt)}.opponent.current{background:#ffffff10;box-shadow:inset 0 0 15px #ffffff09}.felt{width:100%;height:100%;min-height:0;max-width:850px;overflow:hidden;border:5px solid #0a121a75;border-radius:100px;background:radial-gradient(ellipse at 50% 35%,var(--felt),#101c2799);box-shadow:inset 0 0 60px #0003,0 5px 0 #0002}.felt-ring{inset:10px;border-radius:inherit}.table-content{min-height:0;max-height:100%;padding:12px;gap:2px}.table-content h2{font-size:clamp(17px,2vw,26px);line-height:1.2}.table-content p{font-size:12px;margin:4px 0;max-width:360px;color:#f0f3eee0}.table-content .empty-suit{font-size:30px;line-height:1;color:var(--lime)}.tablemark{bottom:12px;letter-spacing:5px;font-size:9px}.status{padding:0;min-height:18px;font-size:12px;color:var(--lime)}.tablecards{padding:8px 4px;gap:10px}.tablecards .card{width:var(--card-w);height:var(--card-h)}
.hand-panel{margin:0;min-width:0}.hand-heading{height:32px;gap:8px}.hand-heading strong{font-size:13px}.hand-heading .avatar{width:25px;height:25px;font-size:12px}.hand-heading .muted{font-size:12px}.hand-heading>div{gap:7px}.hand-heading .quiet{font-size:12px;padding:5px}.hand{justify-content:safe center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:0;padding:20px 7px 8px;min-height:0;height:calc(var(--card-h) + 33px);scrollbar-width:thin;scrollbar-color:var(--felt) transparent;overscroll-behavior-x:contain;touch-action:pan-x}.hand .card{margin-right:-22px}.hand .card:last-child{margin-right:0}.card{isolation:isolate;width:var(--card-w);height:var(--card-h);padding:6px;font-size:17px;border:1px solid #fffc;border-radius:9px;background:linear-gradient(135deg,#fffef6,#e8e7df);color:#202f42;box-shadow:0 3px 9px #0006;overflow:hidden}.card>span:first-child{position:relative;z-index:2;text-shadow:0 0 5px white;align-self:flex-start}.card small{display:block;font-size:13px}.card .suit{position:absolute;bottom:6px;left:6px;font-size:16px}.card .bottom{font-size:12px;position:absolute;right:5px;bottom:5px;z-index:2}.card.red{color:#bf3153}.card-art{position:absolute;inset:22% 13% 18%;color:var(--art-ink);display:grid;place-items:center;opacity:.85;z-index:-1}.card-art svg{width:100%;height:100%;overflow:visible}.card-art.number-art{opacity:.2;inset:29% 20% 20%}.card-art.court-12{transform:rotate(-8deg);filter:saturate(.65)}.card-art.court-13{transform:scale(1.08)}.card.selected{border:2px solid var(--lime);transform:translateY(-12px);box-shadow:0 0 0 2px var(--lime),0 5px 12px #0005;z-index:3}.hand .card:hover:not(:disabled),.hand .card.selected:hover{transform:translateY(-12px)}.hand:has(.card:focus-visible){overflow-y:auto}.card:focus-visible{outline-offset:-4px}.blankcard{opacity:1;color:var(--lime);background:repeating-linear-gradient(45deg,#ffffff08 0px,#ffffff08 1px,transparent 1px,transparent 8px),var(--felt);border:3px double var(--lime)}.back-art{position:absolute;inset:20%;display:grid;place-items:center}.back-art svg{width:100%;height:100%}.hand-actions{padding-top:9px;gap:10px;flex-direction:row;align-items:center}.hand-actions>span{font-size:12px;max-width:unset;flex:1}.hand-actions>div{width:auto;flex-shrink:0;gap:8px}.hand-actions .primary,.hand-actions .secondary{padding:11px 18px}.primary{color:#192026}aside{min-height:0;overflow-y:auto;scrollbar-width:thin;display:block;padding-right:4px}.panel{padding:17px;background:#131a25bc;border-color:#ffffff18;margin:0 0 12px}.panel-title{margin-bottom:12px}.panel-title h2{font-size:15px}.settings label{margin-top:12px}.panel .start{margin-top:14px}footer{display:none}.rule-note{display:none}.log{margin:12px 8px}.scorebar{display:block}.score-row{font-size:12px}.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.theme-tile{background:#151d2b;border:1px solid #ffffff20;padding:7px;border-radius:14px;text-align:left;color:#f3f2f7;min-width:0}.theme-tile.chosen{border-color:var(--tile-accent);box-shadow:0 0 0 1px var(--tile-accent)}.theme-scene{height:125px;position:relative;display:block;border-radius:9px;background:radial-gradient(ellipse,var(--tile-bg),#101723);overflow:hidden}.sample-back,.sample-face{position:absolute;top:20px;width:60px;height:86px;border-radius:6px;border:1px solid #fff5;display:flex;flex-direction:column;justify-content:space-between}.sample-back{left:calc(50% - 52px);transform:rotate(-16deg);background:repeating-linear-gradient(45deg,#ffffff15 0 1px,transparent 1px 7px),var(--tile-bg);color:var(--tile-accent);padding:10px;border:3px double var(--tile-accent)}.sample-face{left:calc(50% - 5px);transform:rotate(12deg);background:#faf8ef;color:var(--tile-ink);padding:5px;box-shadow:0 4px 12px #0005}.sample-face b{font-size:11px;line-height:1}.sample-face small{font-size:9px;text-align:right;line-height:1}.sample-face svg{height:49px;width:100%}.sample-back svg{width:100%;height:100%}.theme-title{display:flex;justify-content:space-between;margin:7px 2px 2px;font-weight:750;font-size:14px}.theme-tile>small{font-size:10px;color:#b7bece;display:block;margin:0 2px 4px}.theme-check{color:var(--tile-accent);visibility:hidden}.chosen .theme-check{visibility:visible}#themesDialog{max-width:760px;width:calc(100% - 24px)}dialog{max-height:calc(100dvh - 24px);overflow:auto;background:#171e2c}dialog .dialog-heading{position:sticky;top:-25px;background:#171e2c;padding:8px 0;z-index:5}.theme-footnote{font-size:11px!important}.dialog-heading .quiet{font-size:21px}#toolsDialog{max-width:470px;padding:18px}#toolsDialog .dialog-heading{top:-18px}#toolsDialog aside{overflow:visible;padding:0}#toolsDialog .panel{background:#111a25}#toolsDialog .log{display:block}.branddot{color:var(--lime)}
body[data-theme=football] .felt{background:repeating-linear-gradient(90deg,#ffffff05 0 12.5%,transparent 12.5% 25%),radial-gradient(ellipse,var(--felt),#112b1d)}
body[data-theme=marvel] .felt{background:radial-gradient(#ffffff12 1px,transparent 2px) 0 0/8px 8px,radial-gradient(ellipse,var(--felt),#221826)}
body[data-theme=auto] .arena{background:repeating-linear-gradient(120deg,#ffffff03 0 2px,transparent 2px 10px),#0f1b2880}
body[data-theme=night] .felt{box-shadow:inset 0 0 40px #0005,0 0 20px #ec6ad520;border-color:#f3a3d633}
body[data-theme=games] .felt{background:linear-gradient(#bfa5ff09 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#bfa5ff09 1px,transparent 1px) 0 0/24px 24px,var(--felt)}
body[data-theme=space] .felt{background:radial-gradient(circle at 20% 20%,#fff8 1px,transparent 2px),radial-gradient(circle at 70% 65%,#fff8 1px,transparent 2px),radial-gradient(ellipse,var(--felt),#101328);background-size:71px 57px,97px 83px,100% 100%}
@media(max-width:1100px){.club{display:none}main{grid-template-columns:minmax(0,1fr) 270px;gap:12px;padding:12px}.hand-actions>span{font-size:11px}}
@media(max-width:900px){:root{--card-w:66px;--card-h:96px}main{display:block;padding:10px 12px max(10px,env(safe-area-inset-bottom))}.maincol{height:100%;gap:9px;grid-template-rows:auto minmax(110px,1fr) auto}header{height:58px;padding:8px 12px;gap:8px}.brand{font-size:27px}.toolbar{gap:5px}.toolbar .secondary{font-size:12px;padding:8px 10px}header #rulesBtn{font-size:12px;padding:6px}header #rulesBtn span{display:none}.topline h1{font-size:23px}.eyebrow{font-size:9px}.arena{border-radius:18px;padding:7px;gap:6px}.opponent{flex-basis:72px;min-width:72px}.hand-actions{flex-direction:row}.hand-actions>div{width:auto}.hand-actions>span{font-size:11px}.felt{border-radius:60px}.table-content .table-sub{font-size:11px}.table-content .room-code-big{font-size:18px}.table-content .primary{padding:9px 13px}.hand .card{margin-right:-18px}#toolsMount aside{display:flex;flex-direction:column;gap:0}.settings{order:0}.online-panel{order:1}.chat-panel{order:2}.score-panel{order:3}.log{order:4}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-scene{height:114px}.theme-tile>small{font-size:11px}.theme-tile{padding:8px}#themesDialog{max-width:520px}}
@media(max-width:480px){header{gap:5px}.brand{font-size:24px;gap:4px}.toolbar .secondary{padding:8px;font-size:11px}#fullBtn{display:none}header #rulesBtn{font-size:0;width:30px;height:32px;padding:0}header #rulesBtn span{display:inline-block;font-size:15px;margin:0}.topline{gap:8px}.topline h1{font-size:21px}.session{font-size:10px}main{padding:7px 8px max(7px,env(safe-area-inset-bottom))}.hand-heading strong{font-size:12px}.hand-heading .avatar{display:none}.hand-heading .quiet{font-size:11px}.hand-actions{flex-wrap:wrap;gap:7px}.hand-actions>span{flex-basis:100%;line-height:1.3}.hand-actions>div{width:100%}.hand-actions .primary{flex:1}.hand-actions .primary,.hand-actions .secondary{padding:10px}.felt{border-radius:35px}.table-content h2{font-size:18px}.table-content p{font-size:11px}.status{font-size:11px}.opponents{gap:4px}.opponent{flex-basis:68px;min-width:68px}.tablecards{gap:7px}.tablemark{display:none}.theme-footnote{line-height:1.5}}
@media(max-height:650px){:root{--card-w:57px;--card-h:79px}header{height:48px}.topline h1{font-size:20px}.eyebrow{display:none}.maincol{gap:5px}.arena{gap:3px}.opponent{padding:3px}.opponent .avatar{display:none}.opponent small{margin:0}.opponents{max-height:39px}.hand-heading{height:24px}.hand{padding-top:16px;height:calc(var(--card-h) + 26px)}.card{font-size:14px;padding:4px}.card small{font-size:10px}.card .bottom{font-size:10px}.card .suit{font-size:12px}.table-content{padding:5px}.table-content h2{font-size:16px}.table-content .empty-suit{display:none}.table-content p{font-size:11px;margin:2px 0}.tablecards{padding:4px}.hand-actions{padding-top:5px}.status{font-size:10px;min-height:15px}.tablemark{display:none}.result-points{font-size:22px}.table-content .primary{padding:5px 10px}}
@media(max-height:450px) and (min-width:600px){body{min-height:320px}header{height:42px}main{padding:5px 10px}.maincol{grid-template-rows:minmax(110px,1fr) auto;gap:4px}.topline{display:none}.hand-panel{position:relative;padding-right:185px}.hand-heading{height:20px}.hand-heading .quiet{padding:0}.hand-actions{position:absolute;right:0;top:0;bottom:0;max-width:175px;border:0;display:flex;flex-direction:column;justify-content:center;gap:5px}.hand-actions>span{flex:0;font-size:10px}.hand-actions>div{gap:5px}.hand-actions .primary,.hand-actions .secondary{padding:9px;font-size:12px}.arena{grid-template-columns:145px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:3px}.opponents{grid-row:1/3;flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;max-height:none;align-content:flex-start;gap:2px}.opponent{min-width:60px;flex-basis:64px}.status{grid-column:2}.felt{border-radius:35px}.table-content p{max-width:none}.hand{padding-top:14px;height:calc(var(--card-h) + 22px)}.card.selected,.hand .card:hover:not(:disabled){transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Virtual chips remain visible on the table; the server owns online balances. */
.arena.with-chips{grid-template-rows:auto auto minmax(0,1fr) auto}
.chip-hud{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 9px;border:1px solid #ffffff1c;border-radius:10px;background:#090e1880;font-size:11px;line-height:1.4;min-width:0}.chip-hud>span{white-space:nowrap}.chip-hud .chip-bank{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center;flex:1}.chip-wallet{color:var(--lime)}.chip-hud b{font-variant-numeric:tabular-nums}.seat-chips{display:block;color:var(--lime);font-size:10px;margin-top:2px}.score-chips{font-size:10px;color:var(--lime);white-space:nowrap;margin-left:auto}.score-row:has(.score-chips) .scorebar{display:none}.score-row:has(.score-chips) .score{margin-left:4px}.table-content .payout{color:var(--lime);font-size:12px}.chip-bank b{font-weight:750}
@media(max-height:650px){.with-chips .opponents{max-height:49px}.chip-hud{padding:2px 7px;font-size:10px}.seat-chips{margin:0;font-size:9px}.table-content .payout{font-size:10px}}
@media(max-height:450px) and (min-width:600px){.arena.with-chips{grid-template-rows:auto minmax(0,1fr) auto}.with-chips .chip-hud{grid-column:1/3}.with-chips .opponents{grid-row:2/4;max-height:none}.with-chips .felt{grid-column:2;grid-row:2}}
@media(max-width:350px){.chip-hud{font-size:9px;gap:4px}.toolbar .secondary{padding:7px 6px}}