@import "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Share+Tech+Mono&display=swap";:root{--ink:#f4f7ff;--dim:#9fb3d9;--bg:#0a1128;--panel:#0a142ec7;--edge:#a0beff3d;--hot:#f5a15b;--p1:#e33d3d;--p2:#3d8ce3}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Chakra Petch,system-ui,sans-serif;overflow:hidden}.mono{font-variant-numeric:tabular-nums;font-family:Share Tech Mono,ui-monospace,monospace}#app{height:100%}.screen{text-align:center;background:radial-gradient(120% 80% at 50% 0,#16306b 0%,#0000 60%),linear-gradient(#0a1128 0%,#060b1c 100%);flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;height:100%;padding:24px;display:flex;overflow-y:auto}.screen>:first-child{margin-top:auto}.screen>:last-child{margin-bottom:auto}.screen>*{flex-shrink:0}.backdrop{object-fit:cover;width:100%;height:100%;image-rendering:pixelated;z-index:0;position:fixed;inset:0}.screen.over{z-index:1;background:linear-gradient(#0a112859 0%,#060b1cb3 100%);position:relative}.title{letter-spacing:.14em;text-shadow:0 0 26px #f5a15b59;margin:0;font-size:clamp(40px,9vw,82px);font-weight:700;line-height:1}.title.win{letter-spacing:.06em}.subtitle{color:var(--dim);letter-spacing:.04em;margin:6px 0 0;font-size:15px}.verdict{color:var(--ink);margin:4px 0 18px;font-size:17px}.notice{color:var(--hot);margin:10px 0 0;font-size:14px}.hint{color:var(--dim);max-width:420px;margin:18px 0 0;font-size:12.5px;line-height:1.6}.panel{background:var(--panel);border:1px solid var(--edge);border-radius:14px;width:min(560px,100%);margin-top:22px;padding:22px}.players{grid-template-columns:1fr 1fr;gap:14px;display:grid}.players.single{grid-template-columns:1fr;margin-top:16px}.player{text-align:left;flex-direction:column;gap:8px;display:flex}.player span{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-size:11px}.player input{height:46px;color:var(--ink);font:inherit;border:1px solid var(--edge);background:#040a1ae6;border-radius:8px;padding:0 12px;font-size:16px}.player.p1 input{border-left:3px solid var(--p1)}.player input:focus{outline:2px solid var(--hot);outline-offset:-1px}.tracks{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.track{cursor:pointer;min-width:120px;height:44px;color:var(--dim);font:inherit;border:1px solid var(--edge);background:0 0;border-radius:8px;flex:1;font-size:14px}.track.on{border-color:var(--hot);color:var(--ink);background:#f5a15b29;font-weight:600}.go{cursor:pointer;background:var(--hot);color:#1b1206;width:100%;height:58px;font:inherit;letter-spacing:.16em;border:0;border-radius:10px;margin-top:18px;font-size:20px;font-weight:700}.go:hover{filter:brightness(1.08)}.panel>.go:first-child{margin-top:0}.ghost{cursor:pointer;height:48px;color:var(--dim);font:inherit;border:1px solid var(--edge);background:0 0;border-radius:10px;padding:0 20px;font-size:15px}.buttons{flex-direction:column;gap:10px;width:min(560px,100%);margin-top:18px;display:flex}.result .row{border-bottom:1px solid var(--edge);text-align:left;align-items:center;gap:14px;padding:14px 4px;display:flex}.result .row:last-child{border-bottom:0}.place{width:24px;color:var(--dim)}.dot{border-radius:50%;flex:none;width:12px;height:12px}.who{flex:1;font-size:17px}.time{font-size:17px}.hud{background:var(--panel);border:1px solid var(--edge);border-radius:10px;min-width:150px;padding:10px 12px;position:absolute;top:12px;left:12px}.tag{border-bottom:2px solid var(--edge);margin-bottom:6px;padding-bottom:6px;font-size:15px;font-weight:700}.stat{justify-content:space-between;gap:14px;font-size:13px;line-height:1.7;display:flex}.stat span{color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.speed{border-top:1px solid var(--edge);align-items:baseline;gap:5px;margin-top:8px;padding-top:8px;display:flex}.speed b{font-size:26px;line-height:1}.speed span{color:var(--dim);font-size:11px}.warn{color:var(--hot);letter-spacing:.12em;margin-top:8px;font-size:11px;font-weight:700}.countdown{color:var(--hot);pointer-events:none;text-shadow:0 0 40px #f5a15b80;justify-content:center;align-items:center;font-size:20vh;font-weight:700;display:flex;position:fixed;inset:0}.finished{border-top:1px solid var(--edge);color:var(--hot);letter-spacing:.1em;margin-top:8px;padding-top:8px;font-size:12px;font-weight:700}@media (width<=760px){.players{grid-template-columns:1fr}}.solo{height:100%;position:relative}.solo canvas{width:100%;height:100%;display:block}.gap{border-top:1px solid var(--edge);letter-spacing:.06em;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px;padding-top:8px;font-size:12px;font-weight:700;display:flex}.gap span{color:var(--dim);font-weight:500}.gap b{font-size:15px}.gap.ahead{color:#6fe08a}.gap.behind{color:var(--hot)}.ghost.wide{width:100%;margin-top:10px}.ghost.small{letter-spacing:.1em;text-transform:uppercase;height:34px;font-size:12px}.ghost.small.off{opacity:.7;text-decoration:line-through}.board{text-align:left;width:min(560px,100%);margin-top:20px}.board-title{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;font-size:11px}.board-row{border-bottom:1px solid var(--edge);align-items:center;gap:14px;padding:9px 4px;font-size:15px;display:flex}.board-row:last-child{border-bottom:0}.loading{color:var(--dim);font-size:13px}.pad{pointer-events:none;justify-content:space-between;padding:16px;display:flex;position:absolute;inset:auto 0 0}.pad-left,.pad-right{pointer-events:auto;gap:12px;display:flex}.pad button{border:2px solid var(--edge);width:84px;height:84px;color:var(--ink);font:inherit;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;background:#0a142e99;border-radius:50%;font-size:18px;font-weight:700}.pad button.held{border-color:var(--hot);background:#f5a15b66}.pad-right button[data-control=accelerate]{border-color:var(--hot);background:#f5a15b40}@media (width<=760px){.pad button{width:76px;height:76px;font-size:16px}.title{font-size:clamp(34px,12vw,56px)}}.pilot{pointer-events:none;text-align:center;justify-content:center;align-items:flex-start;gap:8px;display:flex;position:fixed;top:3vh;left:50%;transform:translate(-50%)}.note{background:var(--panel);border:1px solid var(--edge);text-transform:uppercase;letter-spacing:.1em;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:6px 14px 7px;line-height:1.1;display:flex}.note .sign{align-items:center;gap:8px;display:flex}.note canvas{display:block}.note b{font-size:clamp(34px,8vh,60px);font-weight:700;line-height:1}.note i{color:var(--dim);letter-spacing:.14em;white-space:nowrap;margin-top:3px;font-size:12px;font-style:normal}.note.hidden-road i,.note.hidden-road b{color:var(--hot)}.note.next{opacity:.85;padding:4px 10px 5px}.note.next b{font-size:clamp(18px,4vh,30px)}.note.next i{margin-top:1px;font-size:10px}.note.hidden-road{border-color:var(--hot)}@media (width<=600px){.pilot{flex-direction:column;align-items:center;gap:4px;top:2vh}.note{padding:4px 10px 5px}.note b{font-size:clamp(30px,6vh,44px)}.note i{letter-spacing:.1em;font-size:10px}.solo .hud{min-width:0;padding:8px 10px}.solo .hud .stat{gap:8px;font-size:12px}.solo .hud .speed b{font-size:22px}.solo .hud .gap{gap:6px;font-size:11px}.solo .hud .gap b{font-size:13px}.solo .hud .gap.sector b{font-size:18px}.note i{white-space:normal;max-width:108px;line-height:1.25}.voice,.toggles .sound,.restart{letter-spacing:.06em;height:30px;padding:0 8px;font-size:11px}.toggles{gap:6px}.restart{top:48px}}.toggles{gap:8px;display:flex;position:absolute;top:12px;right:12px}.voice,.toggles .sound{cursor:pointer;background:var(--panel);border:1px solid var(--edge);height:34px;color:var(--ink);font:inherit;letter-spacing:.08em;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:8px;padding:0 12px;font-size:12px}.voice.off,.toggles .sound.off{color:var(--dim)}.toggles .sound.off{text-decoration:line-through}.gap.sector{font-size:14px}.gap.sector b{font-size:22px}.sectors{gap:8px;margin-top:12px;padding:12px;display:flex}.sector{border:1px solid var(--edge);border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px;display:flex}.sector .place{letter-spacing:.14em;width:auto;font-size:11px}.sector .time{font-size:15px}.sector .delta{min-height:1em;font-size:12px}.sector.ahead .delta{color:#6fe08a}.sector.behind .delta{color:var(--hot)}.restart{cursor:pointer;background:var(--panel);border:1px solid var(--edge);height:34px;color:var(--dim);font:inherit;letter-spacing:.12em;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;padding:0 12px;font-size:12px;position:absolute;top:54px;right:12px}.verdict.won{color:#6fe08a}.verdict.lost{color:var(--hot)}.place-line{margin:-12px 0 14px}.challenge{text-align:left;margin-top:12px;padding:14px 16px}.challenge-hint{color:var(--dim);margin:0 0 10px;font-size:13px}.challenge-row{flex-wrap:wrap;gap:8px;display:flex}.challenge-row input{min-width:0;height:44px;color:var(--ink);border:1px solid var(--edge);background:#040a1ae6;border-radius:8px;flex:200px;padding:0 10px;font-size:13px}.challenge-row .ghost{flex:none;height:44px;padding:0 16px}.challenge-row .go.share{flex:none;width:auto;height:44px;margin-top:0;padding:0 18px;font-size:15px}.ghost.wide.duel{color:var(--ink);border-color:#f5a15b80}.lobby{padding:8px 18px}.lobby .row{border-bottom:1px solid var(--edge);text-align:left;align-items:center;gap:14px;padding:12px 4px;display:flex}.lobby .row:last-child{border-bottom:0}.lobby .role{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:11px}.dot.host{background:var(--p1)}.dot.guest{background:var(--p2)}.go:disabled{opacity:.4;cursor:default;filter:none}.warn.duel-state.dim{color:var(--dim);letter-spacing:.06em;font-weight:500}.hud .keys{color:var(--dim);letter-spacing:.12em;margin-top:8px;font-size:10px}.restart.leave{color:var(--hot)}.sectors-title{margin-top:12px}.duel-sectors .sector .delta{min-height:1em}.duel-sectors .sector .delta:nth-child(3){color:var(--dim)}
