:root{--bg:#0f1720;--surface:#18222e;--surface-2:#213040;--border:#2e4053;--text:#e8eef4;--muted:#93a4b5;--accent:#f2b84b;--accent-text:#2a1c00;--felt:#17654a;--felt-dark:#0e4332;--danger:#ff7b72;--ok:#6fd49a;--card-w:58px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);margin:0;font-size:15px;line-height:1.4}h1,h2,p{margin:0}.muted{color:var(--muted)}.small{font-size:13px}.error,.neg{color:var(--danger)}.pos{color:var(--ok)}button,input{font:inherit;color:inherit}button{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;white-space:nowrap;border-radius:8px;padding:8px 14px}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.primary:hover:not(:disabled){filter:brightness(1.08)}button.ghost{background:0 0}button.off{color:var(--danger)}button.wide{width:100%}input{border:1px solid var(--border);background:var(--bg);border-radius:8px;width:100%;padding:9px 12px}:is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.home{place-items:center;min-height:100%;padding:16px;display:grid}.home-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;gap:16px;width:min(100%,400px);padding:28px 24px;display:grid}.home-suits{letter-spacing:6px;font-size:28px}.home-suits .red{color:var(--danger)}.field{flex:1;gap:6px;display:grid}.field span{color:var(--muted);font-size:13px}.join-row{align-items:end;gap:8px;display:flex}.divider{color:var(--muted);align-items:center;gap:12px;font-size:13px;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.room{grid-template:"top top""banner banner""table chat"minmax(0,1fr)/minmax(0,1fr) 300px;height:100dvh;display:grid}.topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;grid-area:top;align-items:center;gap:8px 16px;padding:10px 16px;display:flex}.topbar h1{font-size:18px}.topbar-actions{flex-wrap:wrap;gap:8px;margin-left:auto;display:flex}.banners{grid-area:banner}.banner{text-align:center;background:#5c2320;padding:8px 16px}.banner.soft{background:var(--surface-2);color:var(--muted);font-size:13px}.table{background:radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 75%);grid-template:".top.""left center right"minmax(160px,1fr)"me me me"/minmax(96px,170px) minmax(0,1fr) minmax(96px,170px);grid-area:table;gap:12px;min-height:0;padding:16px;display:grid;overflow:auto}.seat-top{grid-area:top;justify-self:center;width:min(100%,170px)}.seat-left{grid-area:left;align-self:center}.seat-right{grid-area:right;align-self:center}.center{grid-area:center;place-items:center;min-width:0;display:grid}.me{grid-area:me;align-items:end;gap:16px;min-width:0;display:flex}.me .seat{flex:none;width:150px}.seat{background:#00000059;border:2px solid #0000;border-radius:12px;overflow:hidden}.seat.turn{border-color:var(--accent);box-shadow:0 0 0 3px #f2b84b40}.seat.away{opacity:.6}.seat-video{aspect-ratio:4/3;background:#0b1118;place-items:center;display:grid;position:relative}.seat-video video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.seat-video video.video-off{visibility:hidden}.seat-video video.mirrored{transform:scaleX(-1)}.avatar{aspect-ratio:1;background:var(--surface-2);border-radius:50%;place-items:center;width:44%;font-size:clamp(18px,3vw,30px);font-weight:600;display:grid}.seat-overlay{background:#0009;place-items:center;font-weight:600;display:grid;position:absolute;inset:0}.seat-overlay.pass{color:var(--accent);background:#000000b3;padding:2px;font-size:13px;inset:auto 0 0}.countdown{background:var(--accent);color:var(--accent-text);font-variant-numeric:tabular-nums;border-radius:999px;padding:1px 8px;font-size:13px;font-weight:700;position:absolute;top:6px;left:6px}.countdown.urgent{background:var(--danger)}.mic-off{font-size:14px;position:absolute;top:6px;right:6px}.seat-info{gap:2px;padding:6px 8px;display:grid}.seat-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.seat-meta{color:var(--muted);flex-wrap:wrap;gap:2px 10px;font-size:12px;display:flex}.panel{text-align:center;background:#00000073;border-radius:16px;justify-items:center;gap:12px;width:min(100%,460px);padding:20px;display:grid}.room-code{letter-spacing:6px;font-variant-numeric:tabular-nums;font-size:34px;font-weight:700}.pile{text-align:center;justify-items:center;gap:10px;display:grid}.pile.empty{color:#ffffffbf}.pile-cards{gap:6px;display:flex}.result{border-collapse:collapse;text-align:left;width:100%}.result th{color:var(--muted);padding:4px 6px;font-size:12px;font-weight:500}.result td{vertical-align:middle;border-top:1px solid #ffffff1f;padding:6px}.result td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.mini-cards{--card-w:26px;flex-wrap:wrap;gap:2px;display:flex}.card{width:var(--card-w);height:calc(var(--card-w) * 1.4);border-radius:calc(var(--card-w) * .12);color:#1c2530;-webkit-user-select:none;user-select:none;background:#fdfdfb;border:1px solid #b9c1c9;flex:none;padding:0;transition:transform .12s;display:inline-grid;position:relative;box-shadow:0 1px 3px #0006}.card.red{color:#cf2f2f}.card-rank{font-size:calc(var(--card-w) * .34);letter-spacing:-.04em;font-weight:700;line-height:1;position:absolute;top:6%;left:10%}.card-suit{font-size:calc(var(--card-w) * .3);line-height:1;position:absolute;top:34%;left:10%}.card-pip{font-size:calc(var(--card-w) * .6);line-height:1;position:absolute;bottom:4%;right:8%}.mini-cards .card-suit{display:none}.mini-cards .card-rank{font-size:calc(var(--card-w) * .44)}.mini-cards .card-pip{font-size:calc(var(--card-w) * .52)}button.card:hover:not(:disabled){border-color:#b9c1c9;transform:translateY(-4px)}button.card.selected,button.card.selected:hover{box-shadow:0 0 0 2px var(--accent), 0 6px 10px #0006;transform:translateY(-16px)}.hand-area{flex:1;gap:8px;min-width:0;display:grid}.hand-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.hint{min-height:1.4em;font-weight:500}.hand-actions{flex-wrap:wrap;gap:6px;display:flex}.hand{padding:18px 4px 4px;display:flex;overflow-x:auto}.hand .card+.card{margin-left:calc(var(--card-w) * -.3)}.hand:not(.active) .card{filter:brightness(.82)}.hand-placeholder{flex:1;align-self:center}.chat{background:var(--surface);border-left:1px solid var(--border);grid-area:chat;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid}.chat h2{border-bottom:1px solid var(--border);padding:10px 14px;font-size:15px}.chat-list{align-content:start;gap:6px;margin:0;padding:10px 14px;list-style:none;display:grid;overflow-y:auto}.chat-list li{overflow-wrap:anywhere}.chat-list b{color:var(--accent);font-weight:600}.chat-list .mine b{color:var(--ok)}.chat-form{border-top:1px solid var(--border);gap:6px;padding:10px;display:flex}@media (width<=900px){:root{--card-w:46px}.room{grid-template:"top""banner""table""chat"260px/minmax(0,1fr);height:auto;min-height:100dvh}.table{grid-template-columns:96px minmax(0,1fr) 96px;gap:8px;padding:10px;overflow:visible}.seat-top{width:110px}.chat{border-left:0;border-top:1px solid var(--border)}.me{flex-direction:column;align-items:stretch}.me .seat{align-self:center;width:110px}.hand .card+.card{margin-left:calc(var(--card-w) * -.5)}.topbar h1{display:none}.pile-cards{--card-w:40px}}@media (prefers-reduced-motion:reduce){.card{transition:none}}