:root{--screen: #0b1220;--panel: #121b2e;--panel-2: #0f1830;--border: #20304c;--runner: #22d3ee;--chaser: #fb5670;--ink: #e6edf7;--muted: #8ea2c0;--accent: #22d3ee;--mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--screen);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none}#app{height:100%;overflow-y:auto}.screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:28px 22px;text-align:center}.screen.home{position:relative;overflow:hidden}.ambient{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;opacity:.72;pointer-events:none;-webkit-mask-image:radial-gradient(135% 120% at 50% 44%,rgba(0,0,0,.58),rgba(0,0,0,1) 74%);mask-image:radial-gradient(135% 120% at 50% 44%,#00000094,#000 74%)}.home-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}.logo{font-weight:800;font-size:clamp(52px,16vw,96px);letter-spacing:.14em;margin:0;background:linear-gradient(120deg,var(--runner),#7c9bff 55%,var(--chaser));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--muted);margin:-8px 0 6px;max-width:34ch;line-height:1.5}.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0}.field{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:100%;max-width:320px}.field label{font-size:12px;color:var(--muted);text-align:left;letter-spacing:.04em}input.name{background:var(--panel-2);border:1px solid var(--border);color:var(--ink);border-radius:12px;padding:14px 16px;font-size:16px;font-family:var(--sans);text-align:center}input.name:focus{outline:2px solid var(--accent);outline-offset:1px}.actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.btn{border:1px solid var(--border);background:var(--panel);color:var(--ink);border-radius:14px;padding:15px 18px;font-size:16px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:transform .04s ease,border-color .15s ease,background .15s ease}.btn:hover{border-color:#33507e}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(120deg,#0e7490,#1e40af);border-color:transparent}.btn.primary:hover{filter:brightness(1.08)}.btn.ghost{background:transparent}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.muted{color:var(--muted);font-size:14px;line-height:1.5;max-width:40ch}.note{font-size:12.5px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px;max-width:40ch}.spinner{width:46px;height:46px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.4s}}.code{font-family:var(--mono);font-size:30px;letter-spacing:.3em;background:var(--panel-2);border:1px dashed var(--accent);border-radius:12px;padding:14px 20px;color:var(--ink)}.link-row{display:flex;gap:8px;width:100%;max-width:380px}.link-row input{flex:1;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12px}.match-screen{padding:0;height:100%;position:relative;overflow:hidden}.stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}canvas#game{display:block;touch-action:none}#touch-surface{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5}@media (hover: hover) and (pointer: fine){#touch-surface{display:none}}.leave-btn{position:absolute;top:14px;right:14px;z-index:10;background:#121b2ecc;border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer}.mute-btn{position:absolute;top:14px;left:14px;z-index:10;display:flex;align-items:center;justify-content:center;width:38px;height:38px;line-height:1;font-size:17px;cursor:pointer;background:#121b2ecc;border:1px solid var(--border);border-radius:10px}.mute-btn.muted{opacity:.55}.mic-btn{position:absolute;top:14px;left:60px;z-index:10;display:flex;align-items:center;justify-content:center;width:38px;height:38px;line-height:1;font-size:17px;cursor:pointer;background:#121b2ecc;border:1px solid var(--border);border-radius:10px}.mic-btn.connecting{opacity:.5;cursor:default}.mic-btn.mic-off{opacity:.55;border-color:var(--chaser)}.mic-btn.hide{display:none}.voice-note{position:absolute;top:58px;left:14px;z-index:10;margin:0;font-size:12px;color:var(--muted);max-width:60vw}.voice-note.hide{display:none}.joystick{position:absolute;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:#22d3ee0f;border:1px solid rgba(34,211,238,.25);z-index:6;pointer-events:none;opacity:0;transition:opacity .12s ease}.joystick.visible{opacity:1}.joystick .knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#22d3eed9;box-shadow:0 0 16px #22d3ee80}.result-title{font-size:clamp(34px,9vw,56px);font-weight:800;margin:0}.result-title.win{color:var(--runner)}.result-title.loss{color:var(--chaser)}.result-title.draw,.result-title.practice{color:var(--ink)}.scoreline{display:flex;gap:26px;justify-content:center;margin:6px 0 4px}.score{display:flex;flex-direction:column;gap:4px}.score .who{font-size:13px;color:var(--muted)}.score .secs{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}.score .unit{font-size:14px;color:var(--muted)}.result-winner{font-size:clamp(16px,4.5vw,20px);font-weight:700;margin:2px 0}.result-winner.win{color:var(--runner)}.result-winner.loss{color:var(--chaser)}.result-winner.draw{color:var(--ink)}.score.won .secs{color:var(--accent)}.score.won .who:after{content:" · WINNER";color:var(--accent);font-weight:700;letter-spacing:.04em}.name-row{display:flex;gap:8px;align-items:stretch}.name-row input.name{flex:1;min-width:0}.btn.tiny{padding:10px 12px;font-size:13px;border-radius:10px}.board-host{width:100%;max-width:420px}.board{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 16px 14px;text-align:left}.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.board-head h2{margin:0;font-size:17px;letter-spacing:.02em}.muted.small{font-size:12.5px;margin:6px 0 12px;max-width:none}.board-table{width:100%;border-collapse:collapse;font-size:14px}.board-table th{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--muted);padding:0 8px 8px;border-bottom:1px solid var(--border)}.board-table td{padding:9px 8px;border-bottom:1px solid rgba(32,48,76,.5);font-variant-numeric:tabular-nums}.board-table tr:last-child td{border-bottom:none}.board-table .align-right{text-align:right}.board-table .align-left{text-align:left}.board-table tr.you td{background:#22d3ee14;color:var(--ink);font-weight:600}.board-table tr.you td:first-child{border-radius:8px 0 0 8px}.board-table tr.you td:last-child{border-radius:0 8px 8px 0}.you-tag{display:inline-flex;align-items:center;gap:6px}.you-tag .chip{font-size:10px;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#06202a;border-radius:5px;padding:1px 5px;font-weight:700}.board-table tr.gap td{text-align:center;color:var(--muted);letter-spacing:.3em;padding:4px 8px;border-bottom:none}.stage-slots{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px}.stage-slot{padding:12px 16px;border-radius:12px;font-size:15px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted)}.stage-slot.on{color:var(--ink);border-color:var(--runner);background:#22d3ee14}.btn[disabled]{opacity:.45;pointer-events:none}.stage-screen .stage{background:var(--screen)}.pad-screen{justify-content:flex-start;padding:0;height:100%;position:relative;overflow:hidden}.pad-head{position:absolute;top:0;left:0;right:0;z-index:10;padding:26px 16px 0;text-align:center;pointer-events:none}.pad-role{font-size:clamp(26px,9vw,40px);font-weight:800;letter-spacing:.02em}.pad-role.runner{color:var(--runner)}.pad-role.chaser{color:var(--chaser)}.pad-sub{margin-top:6px;color:var(--muted);font-size:14px}.pad-leave{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:10}.pad-screen .joystick{left:50%;top:66%;opacity:.4}.pad-screen .joystick.visible{opacity:1}.qr-wrap{display:flex;justify-content:center;margin:2px 0 6px}.qr{width:190px;height:190px;border-radius:12px;background:#fff;image-rendering:pixelated}.sky-level{font-size:clamp(40px,11vw,64px);font-weight:800;margin:0;background:linear-gradient(120deg,var(--runner),#7c9bff 60%,var(--chaser));-webkit-background-clip:text;background-clip:text;color:transparent}.trophy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:420px;margin:4px 0 2px}.trophy{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;opacity:.55}.trophy.earned{opacity:1;border-color:var(--accent)}.trophy-mark{font-size:18px}.trophy-name{font-size:14px;font-weight:700;color:var(--ink)}.trophy-note{font-size:12px;color:var(--muted)}.trophy-earned{display:inline-flex;align-items:center;gap:8px;margin:4px 0;background:var(--panel-2);border:1px solid var(--accent);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700}.trophy-earned.crown{border-color:#f2c14e;color:#f2c14e}.trophy-earned.crown .trophy-mark{filter:drop-shadow(0 0 6px rgba(242,193,78,.6))}.sky-stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0}.sky-stepper .btn.tiny{min-width:44px;font-size:20px;line-height:1}.sky-step-level{font-size:20px;font-weight:700;min-width:7ch;text-align:center}