:root{--bg-1:#2a1d14;--bg-2:#0e0a08;--text:#f4ece0;--muted:#f4ece09e;--accent:#e8b25a;--panel:#140f0c8c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(120% 90% at 50% 18%, var(--bg-1) 0%, var(--bg-2) 70%);color:var(--text);-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{position:fixed;inset:0}.hud-top{top:max(12px, env(safe-area-inset-top));pointer-events:none;align-items:center;gap:10px;display:flex;position:absolute;left:16px;right:16px}.brand{letter-spacing:.02em;font-size:18px;font-weight:700}.tag{color:var(--muted);border:1px solid #f4ece033;border-radius:999px;padding:2px 8px;font-size:12px}.audio-controls{top:calc(max(12px, env(safe-area-inset-top)) + 34px);align-items:center;gap:8px;display:flex;position:absolute;left:16px}.knob{cursor:ns-resize;touch-action:none;border-radius:50%;outline:none;width:44px;height:44px;transition:opacity .2s}.knob:focus-visible{box-shadow:0 0 0 2px var(--accent)}.knob--dim{opacity:.45}.knob-track{fill:none;stroke:#f4ece02e;stroke-width:3px;stroke-linecap:round}.knob--tempo .knob-level{stroke:#19c1c1}.knob-level{fill:none;stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.knob-body{fill:#1c1511d9;stroke:#f4ece038}.knob-icon{fill:none;stroke:var(--accent);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.knob-icon .fill{fill:var(--accent)}.knob--tempo .knob-icon{stroke:#19c1c1}.knob--tempo .knob-icon .fill{fill:#19c1c1}.icon-btn{pointer-events:auto;background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:44px;height:44px;color:var(--muted);cursor:pointer;border:1px solid #f4ece038;border-radius:50%;font-size:20px;line-height:1}.icon-btn--on{color:var(--accent);border-color:#e8b25a80}.opp-chip{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;border:1px solid #f4ece024;border-radius:999px;align-items:center;gap:6px;max-width:min(44vw,260px);padding:5px 10px;font-size:13px;transition:background .3s,box-shadow .3s,border-color .3s;display:flex;position:absolute}.opp-chip--active{border-color:var(--accent);box-shadow:0 0 18px #e8b25a73}.opp-emoji{font-size:18px}.opp-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.opp-count{color:var(--muted);white-space:nowrap}.opp-text,.opp-info{align-items:center;gap:6px;min-width:0;display:flex}.opp-chip--left,.opp-chip--right{border-radius:14px;padding:6px 12px 6px 10px}.opp-chip--left .opp-text,.opp-chip--right .opp-text{flex-direction:column;align-items:flex-start;gap:1px}.opp-chip--left .opp-count,.opp-chip--right .opp-count{font-size:12px}.opp-chip--top{top:calc(max(12px, env(safe-area-inset-top)) + 90px);left:50%;transform:translate(-50%)}.opp-chip--top-left{top:calc(max(12px, env(safe-area-inset-top)) + 90px);left:16px}.opp-chip--top-right{top:calc(max(12px, env(safe-area-inset-top)) + 54px);right:16px}.opp-chip--left{top:30%;left:12px}.opp-chip--right{top:30%;right:12px}@media (aspect-ratio<=3/4){.opp-chip--left,.opp-chip--right{top:24%}}.opp-allot{color:var(--accent);white-space:nowrap;font-size:12px}.olympic-pill{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:12px}.result-list{text-align:left;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.result-list li{background:#ffffff0d;border-radius:12px;align-items:center;gap:8px;padding:8px 12px;display:flex}.result-list li>span:first-child{min-width:1.6em;color:var(--muted);font-weight:700}.result-list em{color:#ff9a8a;margin-left:auto;font-size:12px;font-style:normal}.result-me{outline:1px solid #e8b25a99}.result-loser{background:#b0283040!important}.result-cards{color:var(--muted);gap:3px;margin-left:auto;display:inline-flex}.mini-card{background:linear-gradient(135deg,#2b3b5c,#1c2b45);border:1px solid #d6a84a;border-radius:2px;width:10px;height:14px;display:inline-block}.opp-allot{align-items:center;gap:3px;display:inline-flex}.opp-allot .result-cards{margin-left:0}.result-hint{font-size:12px}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.mode-card{color:var(--text);font:inherit;text-align:left;cursor:pointer;background:#ffffff0a;border:1px solid #f4ece024;border-radius:18px;flex-direction:column;gap:8px;padding:18px;transition:background .2s,border-color .2s,transform .15s;display:flex}.mode-card:hover,.mode-card--on{background:#e8b25a1f;border-color:#e8b25ab3}.mode-card:active{transform:scale(.98)}.mode-icon{font-size:34px}.mode-name{font-size:19px;font-weight:700}.mode-desc{color:var(--muted);font-size:14px}.lobby-back{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:4px 0}.lobby-backdrop{background:radial-gradient(80% 70%,#0a070559,#0a0705bf);place-items:center;padding:72px 16px 16px;display:grid;position:absolute;inset:0;overflow-y:auto}.lobby{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1c1511db;border:1px solid #f4ece01f;border-radius:24px;flex-direction:column;gap:18px;width:min(100%,720px);padding:24px;display:flex;box-shadow:0 24px 80px #00000080}.lobby-title{letter-spacing:.02em;margin:0;font-size:34px}.lobby-sub{color:var(--muted);margin:-10px 0 0}.lobby-section{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.lobby-label{font-weight:600}.segmented{background:#0000004d;border-radius:14px;gap:4px;padding:4px;display:inline-flex}.segment{min-width:52px;min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:10px;font-size:18px;font-weight:700}.segment--on{background:var(--accent);color:#23170c}.lobby-chars{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;display:grid}.char-card{color:var(--text);font:inherit;text-align:center;cursor:pointer;background:#ffffff0a;border:1px solid #f4ece024;border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:16px 12px 12px;transition:transform .15s,background .2s,border-color .2s;display:flex}.char-card:hover{background:#ffffff14;border-color:#e8b25a80}.char-card:active{transform:scale(.98)}.char-seat{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:11px}.char-emoji{font-size:44px;line-height:1.1}.char-name{font-size:16px;font-weight:700}.char-level{border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}.char-level--easy{background:#46a05a4d}.char-level--medium{background:#e8b25a4d}.char-level--hard{background:#c8464659}.char-blurb{color:var(--muted);min-height:2.6em;font-size:13px}.char-swap{color:var(--accent);font-size:12px}.lobby-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.btn--big{min-width:140px;font-size:18px}.hud-status{top:max(12px, env(safe-area-inset-top));pointer-events:none;flex-direction:column;align-items:flex-end;gap:6px;font-size:14px;display:flex;position:absolute;right:16px}.turn{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:6px 12px;font-weight:600;transition:background .3s,color .3s}.turn--me{background:var(--accent);color:#23170c;box-shadow:0 0 24px #e8b25a73}.opp{color:var(--muted);font-size:13px}.hud-table{top:var(--pile-top,30%);left:var(--pile-x,50%);pointer-events:none;flex-direction:column-reverse;align-items:center;gap:8px;width:min(92vw,520px);display:flex;position:absolute;transform:translate(-50%,calc(-100% - 6px))}.badge{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;border-radius:12px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;display:inline-flex}.badge img{width:22px;height:22px}.badge--alert{background:#b02830d1;font-weight:600}.badge--fire{color:#1b0f05;background:linear-gradient(90deg,#d2541f,#e8a03a);font-weight:600}.toast{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;pointer-events:none;background:#0f0b09c7;border-radius:14px;max-width:min(90vw,460px);padding:10px 16px;font-size:15px;animation:.2s ease-out toast-in;position:absolute;top:40%;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}}.hud-actions{right:16px;bottom:max(16px, env(safe-area-inset-bottom));flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100vw - 32px);display:flex;position:absolute}.selection{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.chip{background:var(--panel);border-radius:999px;align-items:center;gap:4px;padding:4px 10px;font-size:13px;font-weight:600;display:inline-flex}.chip img{width:16px;height:16px}.chip--remove{color:inherit;cursor:pointer;pointer-events:auto;border:1px solid #0000;font-family:inherit}.chip--remove:hover{border-color:currentColor}.hint-inline{color:var(--muted);pointer-events:none;text-align:right;font-size:13px}.hint-inline--strong{color:var(--text);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;padding:6px 12px}.btn{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-width:44px;min-height:44px;color:var(--text);font:inherit;cursor:pointer;border:1px solid #f4ece038;border-radius:14px;padding:10px 18px;font-weight:600;transition:transform .1s,background .2s}.btn:active{transform:scale(.97)}.btn-icon{vertical-align:-4px;width:20px;height:20px;margin-right:4px}.btn--primary{background:var(--accent);color:#23170c;border-color:#0000}.btn--fire{color:#1b0f05;background:linear-gradient(90deg,#d2541f,#e8a03a);border-color:#0000}.dialog-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#08060573;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.dialog{text-align:center;background:#1c1511eb;border:1px solid #f4ece01f;border-radius:20px;flex-direction:column;gap:14px;width:min(100%,380px);padding:20px;display:flex;box-shadow:0 20px 60px #00000080}.dialog h2{margin:0;font-size:22px}.dialog p{color:var(--muted);margin:0}.dialog-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.suit-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.suit-btn{color:#2a2420;font:inherit;cursor:pointer;background:#f7f2e8;border:1px solid #f4ece024;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;font-weight:700;display:flex}.suit-btn--favour{background:#f3e2c2;flex-direction:row;grid-column:1/-1;justify-content:center;gap:10px;padding:12px}.suit-btn--favour small{color:#6b5a44;font-weight:500}.favour-icon{font-size:26px}.suit-btn img{width:56px;height:56px}.room-form{flex-direction:column;gap:10px;margin-top:8px;display:flex}.room-input{font:inherit;color:inherit;background:#00000040;border:1px solid #ffffff40;border-radius:10px;padding:10px 12px;font-size:17px}.look-row{flex-wrap:wrap;gap:10px;display:flex}.look-dot{cursor:pointer;border:2px solid #ffffff4d;border-radius:50%;flex:none;width:30px;height:30px;padding:0}.room-seat .look-dot{cursor:default;width:18px;height:18px}.look-dot--on{border-color:#fff;box-shadow:0 0 0 3px #ffd16699}.room-share{flex-direction:column;align-items:flex-start;gap:6px;margin:6px 0 4px;display:flex}.room-link{opacity:.75;word-break:break-all;font-size:12px}.room-seats{flex-direction:column;gap:6px;margin:10px 0;padding:0;list-style:none;display:flex}.room-seat{background:#ffffff12;border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;display:flex}.room-seat-name{flex:1;min-width:0;font-weight:600}.room-seat-name--muted{opacity:.7;font-weight:400}.room-seat-emoji{font-size:20px}.conn{background:#8a8a8a;border-radius:50%;width:10px;height:10px}.conn--on{background:#4cd17a}.btn--small{padding:4px 10px;font-size:13px}.room-hint{opacity:.75;margin-top:10px;font-size:12px}.room-error{color:#ff9b8a;margin-top:10px}.lobby-actions--column{flex-direction:column;align-items:stretch}.countdown{font-variant-numeric:tabular-nums;opacity:.85}.countdown--hurry{color:#ffb36b;font-weight:700}.opp-chip .conn{flex:none}