:root{--a:#ff7a1a;--b:#27d3ff;--amber:#ffc21a;--ink:#0a0b0e;--panel:#0e1014d1;--line:#ffffff1f;--font:"Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--ink);color:#f2f2f2;height:100%;font-family:var(--font);overscroll-behavior:none;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#c{width:100vw;height:100vh;touch-action:none;height:100dvh;display:block;position:fixed;inset:0}#hud{pointer-events:none;position:fixed;inset:0}#hud button,#hud input,#hud summary,.modal,.card{pointer-events:auto}.bar{top:calc(var(--safe-t) + 8px);grid-template-columns:1fr auto 1fr;align-items:stretch;gap:6px;display:grid;position:absolute;left:8px;right:8px}.team{--c:var(--a);background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:6px;grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:center;min-width:0;padding:6px 10px 7px;transition:box-shadow .25s,transform .25s;display:grid;position:relative}.team.t1{--c:var(--b);border-left:1px solid var(--line);border-right:4px solid var(--c);text-align:right;grid-template-columns:auto 1fr}.team.t1 .score{grid-area:1/1/span 2}.team.t1 .name,.team.t1 .pips{grid-column:2;justify-content:flex-end}.team.active{box-shadow:0 0 0 1px var(--c), 0 0 22px -4px var(--c);transform:translateY(1px)}.team .name{letter-spacing:.08em;color:var(--c);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.team .score{font-family:var(--mono);text-shadow:0 0 14px color-mix(in srgb, var(--c) 60%, transparent);grid-area:1/2/span 2;padding:0 2px;font-size:30px;font-weight:800;line-height:1}.pips{gap:4px;margin-top:5px;display:flex}.pips i{border:1.5px solid color-mix(in srgb, var(--c) 55%, transparent);border-radius:50%;width:10px;height:10px}.pips i.full{background:var(--c);border-color:var(--c)}.pips i.now{box-shadow:0 0 8px var(--c);background:#fff;border-color:#fff;animation:.9s ease-in-out infinite alternate blink}@keyframes blink{to{opacity:.35}}.mid{border:1px solid var(--line);letter-spacing:.12em;text-align:center;color:#9aa1a9;background:repeating-linear-gradient(-45deg,#15171b 0 6px,#1b1e23 6px 12px);border-radius:6px;flex-direction:column;justify-content:center;gap:2px;padding:4px 8px;font-size:10px;display:flex}.mid b{color:var(--amber);font-family:var(--mono);font-size:15px}.inset{border:1px solid #ffc21a8c;border-radius:4px;transition:opacity .3s;position:absolute;box-shadow:0 0 0 3px #00000073,inset 0 0 18px #0009}.inset span{letter-spacing:.2em;color:var(--amber);font-size:9px;position:absolute;bottom:-18px;right:0}.inset.off{opacity:0}.banner{--c:var(--amber);letter-spacing:.06em;white-space:nowrap;color:var(--ink);background:var(--c);box-shadow:0 6px 24px -6px var(--c), 6px 6px 0 #00000080;opacity:0;padding:8px 18px;font-size:clamp(18px,6vw,30px);transition:opacity .2s,transform .2s;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)scale(.9)skew(-8deg)}.banner.show{opacity:1;transform:translate(-50%,-50%)scale(1)skew(-8deg)}.hint{left:50%;bottom:calc(var(--safe-b) + 68px);font-family:var(--mono);letter-spacing:.04em;color:#e8e8e8;background:var(--panel);border:1px solid var(--line);white-space:nowrap;opacity:0;border-radius:999px;padding:7px 14px;font-size:12px;transition:opacity .25s;position:absolute;transform:translate(-50%)}.hint.show{opacity:1}.power{--c:var(--a);left:12px;bottom:calc(var(--safe-b) + 70px);border:1px solid var(--line);opacity:0;background:#0a0b0ecc;border-radius:3px;width:16px;height:min(38vh,280px);transition:opacity .2s;position:absolute;overflow:visible}.power.on{opacity:1}.power .fill{background:linear-gradient(to top, var(--c), #fff);max-height:calc(100% - 4px);box-shadow:0 0 12px var(--c);position:absolute;bottom:2px;left:2px;right:2px}.power .last{opacity:.7;background:#fff;height:2px;position:absolute;left:-5px;right:-5px}.power span{letter-spacing:.15em;color:#9aa1a9;font-size:9px;position:absolute;top:-16px;left:-2px}#labels .lbl{--c:var(--a);font-family:var(--mono);color:var(--ink);background:var(--c);box-shadow:0 0 16px var(--c);text-align:center;white-space:nowrap;border-radius:4px;padding:3px 8px;font-size:18px;font-weight:800;line-height:1.05;position:absolute;top:0;left:0}#labels .lbl small{letter-spacing:.12em;font-size:9px;display:block}.tools{right:10px;bottom:calc(var(--safe-b) + 14px);gap:8px;display:flex;position:absolute}.icon{background:var(--panel);border:1px solid var(--line);color:#e8e8e8;cursor:pointer;border-radius:8px;place-items:center;width:42px;height:42px;display:grid}.icon svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.icon .x{display:none}.icon.muted .x{display:inline}.icon.muted .wave{display:none}.card{--c:var(--amber);left:50%;bottom:calc(var(--safe-b) + 70px);background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--c);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;opacity:0;visibility:hidden;border-radius:8px;width:min(92vw,420px);padding:14px 16px 16px;transition:opacity .25s,transform .25s,visibility .25s;position:absolute;transform:translate(-50%,30px)}.card.show{opacity:1;visibility:visible;transform:translate(-50%)}.card .k{letter-spacing:.25em;color:#9aa1a9;font-size:11px}.card .big{color:var(--c);text-shadow:0 0 22px color-mix(in srgb, var(--c) 55%, transparent);word-break:break-word;margin:4px 0 2px;font-size:clamp(26px,9vw,40px)}.card .detail{font-family:var(--mono);color:#c9ced4;font-size:12px}.scoreline{letter-spacing:.06em;justify-content:center;gap:10px;margin:10px 0 12px;font-size:13px;display:flex}.scoreline b{font-family:var(--mono);color:#fff;font-size:18px}.scoreline em{color:#555;font-style:normal}.actions{gap:8px;display:flex}.go,.ghost{min-height:48px;font-family:var(--font);letter-spacing:.1em;cursor:pointer;border-radius:6px;flex:1;font-size:16px}.go{color:var(--ink);background:linear-gradient(180deg, #ffd44d, var(--amber));box-shadow:0 4px 0 #a8780a, 0 8px 20px -6px var(--amber);border:0}.go:active{transform:translateY(3px);box-shadow:0 1px #a8780a}.ghost{color:#e8e8e8;background:0 0;border:1px solid #ffffff40}.modal{padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);opacity:0;visibility:hidden;background:radial-gradient(at 50% 30%,#0a0b0e59,#0a0b0ed9);place-items:center;transition:opacity .3s,visibility .3s;display:grid;position:absolute;inset:0;overflow-y:auto}.modal.show{opacity:1;visibility:visible}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;flex-direction:column;gap:12px;width:min(94vw,400px);padding:20px 18px;display:flex;box-shadow:0 20px 60px -20px #000}.logo{letter-spacing:.02em;text-align:center;background:linear-gradient(180deg, #fff 0%, #ffd6b0 45%, var(--a) 100%);color:#0000;filter:drop-shadow(0 0 16px #ff7a1a73);-webkit-background-clip:text;background-clip:text;margin:0 0 4px;font-size:clamp(44px,15vw,64px);font-style:italic;line-height:.9}.logo small{letter-spacing:.35em;color:#9aa1a9;-webkit-text-fill-color:#9aa1a9;text-transform:uppercase;margin-top:8px;font-size:11px;font-style:normal;display:block}.names{grid-template-columns:1fr 1fr;gap:8px;display:grid}.names label{letter-spacing:.15em;text-transform:uppercase;color:var(--a);flex-direction:column;gap:4px;font-size:10px;display:flex}.names label.t1{color:var(--b)}.names input{width:100%;min-height:42px;font-family:var(--font);color:#fff;text-transform:uppercase;border:1px solid var(--line);-webkit-user-select:text;user-select:text;background:#0d0f12;border-bottom:2px solid;border-radius:5px;outline:none;padding:0 10px;font-size:16px}.row{letter-spacing:.15em;text-transform:uppercase;color:#9aa1a9;justify-content:space-between;align-items:center;gap:10px;font-size:11px;display:flex}.seg{border:1px solid var(--line);background:#0d0f12;border-radius:6px;padding:3px;display:flex}.seg button{min-width:64px;min-height:36px;font-family:var(--font);letter-spacing:.06em;color:#9aa1a9;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:0 12px;font-size:13px}.seg button.on{color:var(--ink);background:var(--amber)}.rules{font-family:var(--mono);color:#c9ced4;font-size:12px}.rules summary{cursor:pointer;font-family:var(--font);letter-spacing:.15em;text-transform:uppercase;color:var(--amber);font-size:11px}.rules ul{margin:8px 0 0;padding-left:18px;line-height:1.45}.rules b{color:#fff}button:disabled{opacity:.45;cursor:default;filter:saturate(.4)}.go:disabled:active{transform:none}.panel>.actions .ghost{letter-spacing:.05em;min-width:0;min-height:42px;padding:0 4px;font-size:12px}.card .actions:has(>:nth-child(3)) button{letter-spacing:.06em;font-size:13px}.seg.wide button{flex:1;min-width:0;padding:0 6px}.names.solo{grid-template-columns:1fr}.names.solo label.t0{color:var(--amber)}.msg{min-height:0;font-family:var(--mono);color:#c9ced4;text-align:center;font-size:12px;line-height:1.4}.msg:empty{display:none}.msg.err{color:#ff8a7a}.or{letter-spacing:.15em;text-transform:uppercase;color:#6d747c;align-items:center;gap:10px;margin:2px 0 8px;font-size:10px;display:flex}.or:before,.or:after{content:"";background:var(--line);flex:1;height:1px}.joinrow{gap:8px;margin:0;display:flex}.joinrow input{min-width:0;min-height:48px;font-family:var(--mono);letter-spacing:.3em;text-align:center;text-transform:uppercase;color:#fff;border:1px solid var(--line);border-bottom:2px solid var(--amber);-webkit-user-select:text;user-select:text;pointer-events:auto;background:#0d0f12;border-radius:5px;outline:none;flex:1;padding:0 12px;font-size:22px;font-weight:800}.joinrow input::placeholder{color:#3d4248}.joinrow .go{flex:0 0 96px}.net{--c:var(--amber);letter-spacing:.14em;white-space:nowrap;color:#e8e8e8;background:var(--panel);border:1px solid color-mix(in srgb, var(--c) 50%, transparent);opacity:0;border-radius:999px;align-items:center;gap:7px;max-width:calc(100vw - 150px);padding:5px 11px;font-size:10px;transition:opacity .25s,border-color .25s;display:flex;position:absolute;left:50%;transform:translate(-50%)}.net.show{opacity:1}.net span{text-overflow:ellipsis;overflow:hidden}.net i{background:var(--c);width:7px;height:7px;box-shadow:0 0 8px var(--c);border-radius:50%;flex:none}.net.warn{--c:#ff5a4a}.net.warn i{animation:.7s ease-in-out infinite alternate blink}.lobby{text-align:center}.kick{letter-spacing:.22em;color:#9aa1a9;font-size:11px}.kick b{color:var(--amber);font-family:var(--mono)}.code{width:100%;font-family:var(--mono);letter-spacing:.22em;text-indent:.22em;color:var(--amber);text-shadow:0 0 24px #ffc21a73;cursor:pointer;background:repeating-linear-gradient(-45deg,#15171b 0 8px,#1b1e23 8px 16px);border:1px solid #ffc21a59;border-radius:8px;padding:10px 0 12px;font-size:clamp(44px,16vw,64px);font-weight:800;transition:border-color .2s,color .2s;display:block}.code.copied{color:#fff;border-color:#fff}.lobbylink{font-family:var(--mono);color:#9aa1a9;word-break:break-all;-webkit-user-select:text;user-select:text;font-size:12px}.seats{gap:6px;margin:4px 0 0;padding:0;list-style:none;display:grid}.seats li{--c:var(--a);text-align:left;border:1px solid var(--line);border-left:4px solid var(--c);background:#0d0f12;border-radius:6px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:46px;padding:0 12px;display:grid}.seats li.t1{--c:var(--b)}.seats b{letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;color:var(--c);font-size:15px;overflow:hidden}.seats b.wait{font-family:var(--mono);letter-spacing:0;color:#6d747c;font-size:13px;font-weight:400}.seats b.wait em{font-style:normal;animation:.9s ease-in-out infinite alternate blink}.seats b.wait em:nth-child(2){animation-delay:.3s}.seats b.wait em:nth-child(3){animation-delay:.6s}.seats span{letter-spacing:.16em;color:#9aa1a9;font-size:9px}.dot{border:1.5px solid #555;border-radius:50%;width:9px;height:9px}.dot.on{background:#4dff88;border-color:#4dff88;box-shadow:0 0 8px #4dff88}.status{min-height:1.4em;font-family:var(--mono);color:#c9ced4;font-size:12px}.board{max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 32px)}.board h2{letter-spacing:.04em;text-align:center;color:var(--amber);margin:0;font-size:26px;font-style:italic}.board h2 small{letter-spacing:.3em;text-transform:uppercase;color:#9aa1a9;margin-top:4px;font-size:10px;font-style:normal;display:block}.board .list{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1;min-height:160px;overflow-y:auto}.board .empty{font-family:var(--mono);text-align:center;color:#9aa1a9;margin:24px 8px;font-size:12px;line-height:1.5}.leaders,.recent{margin:0;padding:0;list-style:none}.leaders li{border-bottom:1px solid var(--line);font-family:var(--mono);grid-template-columns:26px 1fr 44px 44px 40px;align-items:baseline;gap:4px;padding:9px 4px;font-size:14px;display:grid}.leaders li.me{background:#ffc21a14}.leaders .rk{color:#6d747c}.leaders li:nth-child(-n+3) .rk{color:var(--amber)}.leaders b{font-family:var(--font);letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.leaders .w,.leaders .gp,.leaders .pct{text-align:right}.leaders .w{color:#fff;font-weight:800}.leaders .gp,.leaders .pct{color:#9aa1a9}.leaders small{color:#6d747c;margin-left:2px;font-size:9px}.recent li{border-bottom:1px solid var(--line);padding:8px 4px 9px}.recent .meta{font-family:var(--mono);color:#6d747c;gap:10px;font-size:10px;display:flex}.recent .src{color:var(--amber)}.recent .line{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:4px;display:grid}.recent .line i{color:#555;font-style:normal}.recent .p{color:#9aa1a9;align-items:baseline;gap:8px;min-width:0;display:flex}.recent .p:last-child{flex-direction:row-reverse}.recent .p b{letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.recent .p em{font-family:var(--mono);font-size:18px;font-style:normal;font-weight:800}.recent .p.won{color:#fff}.recent .p.won em{color:var(--amber)}@media (min-aspect-ratio:4/5){.bar{width:min(640px,96vw);left:50%;right:auto;transform:translate(-50%)}}
