:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;color:#e8edf5;background:#101625}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#24304a,transparent 65%);min-height:100vh}main{max-width:850px;margin:auto;padding:30px 24px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}small{font-size:10px;letter-spacing:3px;color:#9aa9c2}h1{margin:5px 0 0;font-size:28px;letter-spacing:-1px}h1 span{color:#ffc66a}.badge{font-size:11px;color:#99a7bf;letter-spacing:2px}.machine{background:#1d2638;border:1px solid #39435b;border-radius:20px;padding:16px;box-shadow:0 24px 60px #0005}.topline{display:flex;justify-content:space-between;padding:0 5px 12px;font-size:12px;color:#a5b4cb}#status{color:#8cd6b7}.screen{position:relative;background:#000;border-radius:8px;overflow:hidden;display:flex;justify-content:center}canvas{display:block;width:100%;max-width:512px;aspect-ratio:256/240;image-rendering:pixelated;object-fit:contain}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#24304a,#0b0e17)}#overlay[hidden]{display:none}.star{font-size:58px;color:#ffc66a}h2{font-size:27px;margin:12px 0 0}#overlay p{color:#a5b4cb;font-size:14px}button{font:inherit;cursor:pointer;border:1px solid #46516a;color:#e8edf5;background:#29344b;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:focus-visible{outline:3px solid #ffc66a;outline-offset:3px}button:disabled{opacity:.4;cursor:wait}#play{padding:14px 40px;background:#ffc66a;color:#171b25;border:0;font-weight:800;margin-top:15px}.toolbar{display:flex;gap:8px;justify-content:center;margin-top:14px}.toolbar button{font-size:12px;padding:9px 15px}.controls{display:flex;align-items:center;justify-content:space-between;padding:24px 10px 10px;gap:10px}.dpad{display:grid;grid-template:repeat(3,44px)/repeat(3,44px);gap:3px}.dpad button{font-size:19px}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.dpad i{grid-area:2/2;background:#202a3e;border-radius:10px}.system{display:flex;gap:10px}.system button{font-size:10px;letter-spacing:1px;padding:12px}.actions{display:flex;gap:12px;align-items:center}.actions button{border-radius:50%;width:64px;height:64px;font-weight:800;font-size:23px;box-shadow:0 5px 0 #080d18}.actions .a{background:#e5a744;color:#1c1b1c;width:76px;height:76px}.actions span{display:block;font-size:10px}.pressed,button:active{filter:brightness(1.4);transform:translateY(2px)}footer{margin-top:22px;border-top:1px solid #303b50;padding-top:15px;font-size:12px;color:#a4afc3;line-height:1.8}footer b{color:#ffc66a;margin-right:8px}footer>span{font-size:11px;color:#71819c}kbd{color:#dce4ef}.screen:fullscreen{border-radius:0;align-items:center}.screen:fullscreen canvas{height:100%;width:auto;max-width:100%;object-fit:contain}@media(max-width:600px){main{padding:18px 12px}header{margin-bottom:16px}h1{font-size:23px}.badge{display:none}.machine{padding:10px;border-radius:14px}.controls{padding:20px 0 5px}.dpad{grid-template:repeat(3,39px)/repeat(3,39px)}.system{flex-direction:column;gap:8px}.system button{padding:9px}.actions{gap:8px}.actions button{width:48px;height:48px}.actions .a{width:60px;height:60px}.toolbar button{padding:9px 10px}.toolbar{gap:5px}footer{font-size:11px}h2{font-size:23px}}@media(max-height:500px) and (orientation:landscape){main{max-width:100%;padding:8px}header,footer,.topline{display:none}.machine{width:55%;margin:auto;padding:5px}canvas{height:72vh;width:auto}.controls{position:absolute;left:10px;right:10px;top:25%;pointer-events:none}.controls button{pointer-events:auto}.system{position:absolute;right:10px;top:110%}.toolbar{margin-top:5px}.actions{margin-left:auto}}
[hidden]{display:none!important}.mode-switch{display:flex;gap:10px;margin-bottom:16px}.mode-switch button{padding:12px 18px}.mode-switch [aria-pressed=true]{background:#ffc66a;color:#111b2d;border-color:#ffc66a}.race-lobby{padding:18px 0}.race-lobby h2{font-size:22px;margin-top:0}.race-lobby p,.race-help{font-size:13px;color:#a5b4cb;line-height:1.7}.race-entry{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.race-entry button,#race-copy{padding:10px 14px}.race-lobby input{font:inherit;background:#192335;color:#e8edf5;border:1px solid #46516a;border-radius:8px;padding:10px;min-width:0}#race-code{width:155px;text-transform:uppercase}#race-invite label{display:block;font-size:12px;color:#a5b4cb;margin:8px 0}#race-link{width:min(100%,500px);font-size:12px}#race-status{font-size:14px;color:#ffc66a}.race-score{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;padding:10px 0;color:#8cd6d7}.race-pad{display:flex;gap:14px;margin:20px 0}.race-pad button{width:70px;height:60px;font-size:23px}.race-pad button:last-child{margin-left:auto;width:120px;background:#e5a744;color:#111b2d}#race-result{background:#194c43;border:1px solid #63d8be;border-radius:10px;padding:20px;font-weight:800;font-size:22px;text-align:center}.race-help{margin-bottom:30px}
#race-view:is([data-phase="running"],[data-phase="countdown"]) .race-lobby>h2,#race-view:is([data-phase="running"],[data-phase="countdown"]) .race-lobby>p,#race-view:is([data-phase="running"],[data-phase="countdown"]) #race-invite{display:none}#race-view:is([data-phase="running"],[data-phase="countdown"]) .race-lobby{padding:0}#race-view .screen canvas{height:auto;max-height:none;width:min(512px,55vh,100%);max-width:100%}@media(max-width:600px){.race-pad{position:sticky;bottom:10px;background:#101625e8;border-radius:15px;padding:8px;margin:10px 0}.race-entry{gap:6px}.race-entry button{padding:10px}.mode-switch button{font-size:13px;padding:10px 12px}}

#race-match{padding:14px 28px;background:#ffc66a;color:#111b2d;font-weight:800}#race-view:is([data-phase="running"],[data-phase="countdown"]) #race-match{display:none}

.race-history{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;color:#a5b4cb;font-size:12px}.race-history li{background:#1d2638;padding:8px 12px;border-radius:8px}

#race-nickname{width:170px}.rank-panel{margin-top:28px;padding:18px;background:#1d2638;border-radius:14px}.rank-panel h2{font-size:20px;margin:0}.rank-panel p{color:#a5b4cb;font-size:12px}.rank-scroll{overflow:auto}.rank-panel table{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}.rank-panel th,.rank-panel td{text-align:left;padding:12px 8px;border-bottom:1px solid #39435b}#race-register{padding:12px 18px;background:#ffc66a;color:#111b2d}#race-final-scores{font-weight:bold;padding:12px;font-size:18px}#rank-register-status{font-size:12px;color:#8cd6b7}#race-view:is([data-phase="running"],[data-phase="countdown"],[data-phase="intermission"]) .race-entry label,#race-view:is([data-phase="running"],[data-phase="countdown"],[data-phase="intermission"]) #race-nickname{display:none}

#time-stage{font:inherit;color:#fff;background:#202c42;border:1px solid #52617a;border-radius:8px;padding:10px}#rank-me,#time-me{color:#76e6d5;font-weight:700}.race-history li{line-height:1.8;overflow-wrap:anywhere}

#coop-hud:not([hidden]){display:flex;gap:12px;flex-wrap:wrap;background:#17372f;padding:12px;border-radius:10px;color:#a5f3cf}#coop-arrivals{flex-basis:100%;font-size:13px}#coop-distance.danger{color:#ffb05a}.mode-switch{flex-wrap:wrap}.mode-switch button{flex:1;min-width:100px}

.online-screen{position:relative}.online-placeholder{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at top,#263c55,#111a29 75%);text-align:center;gap:12px}.online-placeholder[hidden]{display:none}.online-placeholder h3{font-size:clamp(20px,4vw,30px);color:#ffc66a;margin:0}.online-placeholder p{font-size:14px;line-height:1.6;max-width:330px;margin:0;color:#edf4ff}.online-placeholder #online-placeholder-detail{font-size:12px;color:#9db4cc}.online-mark{font-size:12px;letter-spacing:3px;color:#7de4d6}.online-placeholder button{background:#ffc66a;color:#172235;padding:12px 20px}
#rank-panel{display:none!important}.rank-entry{padding:16px;border:1px solid #39435b;border-radius:14px;margin-bottom:16px}.rank-entry h2{font-size:18px}.rank-entry p{font-size:12px;color:#a5b4cb}.rank-entry button,.board-filters button{padding:10px 14px}.board-filters{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.board-filters label{display:flex;align-items:center;gap:6px}.rank-entry input,.board-filters input,.board-filters select{font:inherit;color:#edf4ff;background:#192335;border:1px solid #46516a;border-radius:8px;padding:10px;max-width:170px}#board-me{color:#76e6d5}.rank-panel tr.mine{background:#17372f}#single-ranked-start{background:#ffc66a;color:#111b2d;margin-left:8px}@media(max-width:600px){.board-filters{font-size:12px}.board-filters label{flex:1 1 45%}.board-filters input,.board-filters select{max-width:135px}.rank-entry input{max-width:140px}}
.race-entry select,#single-difficulty{font:inherit;color:#e8edf5;background:#1d2638;border:1px solid #46516a;border-radius:8px;padding:9px 12px;min-height:40px}.race-entry label{display:inline-flex;align-items:center;gap:6px}.race-entry select:disabled,#single-difficulty:disabled{opacity:.6}