:root{--orange: #ff7a2f;--sun: #ffd166;--purple: #2a1046;--chrome: #e8e8f0;--ink: #0b0610;font-family:Impact,Haettenschweiler,Arial Narrow Bold,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--chrome)}canvas#game{display:block}#hud{position:fixed;top:16px;left:20px;font-size:24px;letter-spacing:2px;color:var(--sun);text-shadow:2px 2px 0 var(--ink);pointer-events:none;display:grid;gap:4px}#hud[hidden]{display:none}.select-screen{pointer-events:auto;position:fixed;left:0;right:0;bottom:0;padding:18px 24px 22px;background:linear-gradient(to top,#0e0416eb 60%,#0e041600);text-align:center;max-height:100dvh;overflow-y:auto}.select-title{display:flex;gap:10px;align-items:center;justify-content:center;margin:0 0 14px;font-size:30px;letter-spacing:3px;color:var(--sun);text-shadow:3px 3px 0 #a0233c}.cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.card{font:inherit;color:var(--chrome);width:210px;padding:14px 14px 12px;display:grid;justify-items:center;gap:6px;background:#1e0a28d9;border:2px solid rgba(232,232,240,.25);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}.card:hover{border-color:#e8e8f099}.card.selected,.card:focus-visible{outline:none;transform:translateY(-6px);border-color:var(--paint, var(--orange));box-shadow:0 0 0 3px var(--accent, var(--sun)),0 14px 30px #00000080}.card-name{font-size:26px;letter-spacing:2px;color:var(--sun)}.card-style{font-size:15px;letter-spacing:3px;color:var(--paint, var(--orange));text-transform:uppercase}.card-sub{font-family:system-ui,sans-serif;font-size:13px;opacity:.85;min-height:2.4em}.swatches{display:flex;gap:6px}.swatches i{width:22px;height:10px;border:1px solid rgba(255,255,255,.4)}.stats{display:grid;gap:4px;width:100%}.stat{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:6px;font-family:system-ui,sans-serif;font-size:11px;text-align:right}.stat-bar{height:8px;background:#ffffff1f}.stat-bar span{display:block;height:100%;background:var(--paint, var(--orange))}.gang-logo{display:block;border-radius:50%;object-fit:cover;flex:none}.select-title .gang-logo{display:inline-block;vertical-align:middle}.rider-portrait{width:100%;height:clamp(56px,20vh,158px);object-fit:cover;object-position:50% 15%;border:1px solid rgba(232,232,240,.2)}.results-portrait{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--sun)}@media(max-width:939px){.rider-portrait{height:clamp(44px,8vh,110px)}}.select-hint{margin:12px 0 0;font-family:system-ui,sans-serif;font-size:13px;opacity:.7}.results .rider-line{display:flex;gap:8px;align-items:center;justify-content:center;margin:0 0 6px;font-size:18px}.panel .row{display:flex;gap:10px;justify-content:center}button.secondary{font:inherit;font-size:18px;letter-spacing:2px;padding:8px 18px;background:transparent;color:var(--chrome);border:2px solid rgba(232,232,240,.5);cursor:pointer}button.secondary:hover,button.secondary:focus-visible{border-color:var(--sun);color:var(--sun);outline:none}.title-screen{pointer-events:auto;position:fixed;top:0;right:0;bottom:0;left:0;display:grid;align-content:center;justify-items:center;gap:18px;padding:16px;background:radial-gradient(ellipse at 50% 45%,#0a021200 30%,#0a02128c);text-align:center}.logo{display:grid;justify-items:center;line-height:.95;animation:logo-drop .9s cubic-bezier(.2,1.4,.4,1) both}.logo-top{font-size:clamp(40px,9vw,112px);letter-spacing:4px;background:linear-gradient(to bottom,#fff,#c9cbe0 45%,#5b4a7a 50%,#f4e1ff 56%,#ff9a5a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);filter:drop-shadow(0 4px 0 #2a1046) drop-shadow(0 0 18px rgba(255,122,47,.55))}.logo-bottom{margin-top:8px;padding:4px 18px;font-size:clamp(22px,4.4vw,52px);letter-spacing:clamp(6px,1.6vw,18px);color:#2a1046;background:linear-gradient(90deg,#ffd166,#ff7a2f,#ff3d6e);transform:rotate(-2deg);box-shadow:0 6px #2a1046;animation:stamp .35s .75s cubic-bezier(.2,1.8,.4,1) both}.press{margin:0;font-size:24px;letter-spacing:6px;color:var(--chrome);text-shadow:0 0 12px rgba(255,209,102,.8);animation:pulse 1.4s ease-in-out infinite}.press b{color:var(--sun)}.menu{display:grid;gap:8px;min-width:260px}.menu-item{font:inherit;font-size:26px;letter-spacing:4px;padding:8px 24px;color:var(--chrome);background:#14061eb3;border:2px solid transparent;cursor:pointer}.menu-item:hover{border-color:#e8e8f066}.menu-item.selected{color:var(--ink);background:linear-gradient(90deg,#ffd166,#ff7a2f);border-color:var(--chrome)}.pause .menu{margin:12px 0 6px}.pause .menu-item{font-size:20px}.panel.info{max-width:min(640px,calc(100vw - 32px));text-align:left}.panel.info h2{text-align:center}.panel.info p{font-family:system-ui,sans-serif;font-size:15px;line-height:1.5}.panel.info .hint{text-align:center}.rules{display:grid;gap:12px;margin:12px 0 16px}.rule{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;font-family:system-ui,sans-serif;font-size:14px}.rule svg{grid-row:span 2}.rule b{font-family:Impact,Haettenschweiler,Arial Narrow Bold,system-ui,sans-serif;font-weight:400;letter-spacing:1px;font-size:18px;color:var(--sun)}.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:10px 0;font-family:system-ui,sans-serif;font-size:15px}.setting input[type=range]{width:200px;accent-color:var(--orange)}.setting input[type=checkbox],.setting input[type=radio]{accent-color:var(--orange);width:18px;height:18px}fieldset.setting{border:1px solid rgba(232,232,240,.3);padding:8px 12px}fieldset.setting label{display:inline-flex;gap:6px;align-items:center;margin-left:12px}.countdown{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:clamp(90px,20vw,220px);color:var(--sun);text-shadow:0 8px 0 #a0233c,0 0 40px rgba(255,122,47,.8);pointer-events:none;animation:count-pop 1s ease-out both}.countdown.go{color:#fff;letter-spacing:10px}.stage-banner{position:fixed;left:0;right:0;top:28%;display:grid;justify-items:center;font-size:clamp(44px,9vw,96px);letter-spacing:6px;color:var(--sun);text-shadow:0 6px 0 #a0233c,0 0 30px rgba(255,122,47,.8);pointer-events:none;animation:count-pop .9s ease-out both}.stage-banner span{font-size:.32em;letter-spacing:4px;color:var(--chrome);text-shadow:0 2px 0 var(--ink)}@keyframes logo-drop{0%{transform:translateY(-60px) scale(1.15);opacity:0}to{transform:none;opacity:1}}@keyframes stamp{0%{transform:rotate(-2deg) scale(2.4);opacity:0}to{transform:rotate(-2deg) scale(1);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes count-pop{0%{transform:scale(1.6);opacity:0}25%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:.85}}@media(prefers-reduced-motion:reduce){.card{transition:none}.card.selected{transform:none}.logo,.logo-bottom,.press,.countdown,.new-best,.stage-banner{animation:none}}#debug{position:fixed;top:8px;right:10px;padding:4px 8px;background:#0009;color:#9effa8;font:12px ui-monospace,Menlo,monospace;pointer-events:none;z-index:10}#hud .dim{font-size:16px;opacity:.75}#hud .health{display:flex;gap:6px}#hud .seg{width:34px;height:14px;border:2px solid var(--chrome);background:transparent}#hud .seg.on{background:var(--orange)}#hud .time{font-size:30px}#hint{position:fixed;left:50%;top:58%;transform:translate(-50%,8px);padding:10px 18px;background:#14061eb3;border-left:4px solid var(--orange);font-family:system-ui,sans-serif;font-size:15px;line-height:1.5;text-align:center;color:var(--chrome);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;white-space:nowrap}#hint b{color:var(--sun)}#hint.visible{opacity:1;transform:translate(-50%)}#hud .time.low{color:#ff3b4a}.panel.results dl{display:grid;grid-template-columns:auto auto;gap:6px 18px;margin:12px auto 16px;width:max-content;font-size:22px}.panel.results dt{text-align:right;color:var(--orange)}.panel.results dd{margin:0;text-align:left}.panel h2.wiped{color:#ff3b4a;font-size:40px}.panel h2.sunset{font-size:40px}.new-best{color:var(--sun);font-size:22px;margin:0 0 12px;animation:new-best .9s ease-out both,pulse 1.6s .9s ease-in-out infinite}@keyframes new-best{0%{transform:scale(2.2) rotate(-6deg);opacity:0}60%{transform:scale(.95) rotate(2deg);opacity:1}to{transform:none}}.hint,.best{font-family:system-ui,sans-serif;font-size:13px;opacity:.7;margin:0}.best{margin-top:12px;opacity:.9}.name-entry{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:0 0 16px}.name-entry label{width:100%;font-family:system-ui,sans-serif;font-size:13px;opacity:.8}.name-entry input{font:inherit;font-size:20px;letter-spacing:2px;width:12ch;padding:6px 10px;background:#0b061099;color:var(--sun);border:2px solid rgba(232,232,240,.5)}.name-entry input:focus{border-color:var(--sun);outline:none}.name-entry.saved button.secondary{border-color:var(--sun);color:var(--sun)}#ui{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.panel{pointer-events:auto;background:#14061ed1;border:2px solid var(--orange);box-shadow:0 0 0 4px #ff7a2f33,0 20px 60px #0009;padding:28px 36px;text-align:center;min-width:320px}.panel.small{min-width:220px}h1{margin:0 0 20px;font-size:44px;letter-spacing:2px;color:var(--sun);text-shadow:3px 3px 0 #a0233c;line-height:1}h1 span{display:block;font-size:26px;color:var(--orange);letter-spacing:8px;margin-top:6px}h2{margin:0 0 8px;color:var(--sun);letter-spacing:3px}button.primary{font:inherit;font-size:26px;letter-spacing:4px;padding:10px 44px;background:var(--orange);color:var(--ink);border:none;cursor:pointer;margin-bottom:18px}button.primary:hover,button.primary:focus-visible{background:var(--sun);outline:3px solid var(--chrome);outline-offset:2px}table.controls{margin:0 auto;border-collapse:collapse;font-family:system-ui,sans-serif;font-size:14px}table.controls td{padding:3px 10px;text-align:left}table.controls td:first-child{color:var(--sun);text-align:right;font-weight:700}html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}body{position:fixed;top:0;right:0;bottom:0;left:0;width:100%}canvas#game{touch-action:none}button,.card{touch-action:manipulation}body.touch{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body:not(.touch) .touch-only{display:none}body.touch .kb-only{display:none}@media(orientation:landscape){.rotate-hint{display:none}}.rotate-hint{margin:0;font-family:system-ui,sans-serif;font-size:13px;opacity:.75}#touch{--tsize: clamp(66px, 19vmin, 112px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;touch-action:none}#touch[hidden]{display:none}#touch .pad{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));display:grid;gap:10px;pointer-events:none}#touch .pad-steer{left:max(14px,env(safe-area-inset-left));grid-template-columns:repeat(2,var(--tsize))}#touch .pad-chain{right:max(14px,env(safe-area-inset-right));grid-template-columns:repeat(2,var(--tsize))}.tbtn{font:inherit;pointer-events:auto;touch-action:none;display:grid;place-content:center;justify-items:center;gap:2px;height:var(--tsize);padding:0;color:var(--chrome);background:#14061e80;border:2px solid rgba(232,232,240,.55);border-radius:18px;-webkit-user-select:none;user-select:none;cursor:pointer}.tbtn .glyph{font-size:calc(var(--tsize) * .4);line-height:1;pointer-events:none}.tbtn .cap{font-size:12px;letter-spacing:2px;text-transform:uppercase;pointer-events:none}.tbtn.down{color:var(--ink);background:linear-gradient(180deg,#ffd166,#ff7a2f);border-color:var(--chrome);transform:scale(.96)}.tbtn-brake{grid-column:1 / -1;grid-row:1;height:calc(var(--tsize) * .62);grid-auto-flow:column;gap:10px}.tbtn-brake .glyph{font-size:calc(var(--tsize) * .28)}.tbtn-chain{border-color:#ffd166cc}.tbtn-chain .glyph{font-size:calc(var(--tsize) * .46)}.tbtn-pause{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:48px;height:48px;border-radius:12px}body.touch #hud .sound{pointer-events:auto;padding:6px 0}body.touch button.secondary,body.touch .menu-item{min-height:44px}.select-actions{margin-top:10px;gap:12px}.select-actions button.primary{margin-bottom:0;font-size:22px;padding:10px 28px}.panel{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.panel .row{flex-wrap:wrap}@media(max-width:700px),(max-height:520px){#hud{top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));font-size:16px;letter-spacing:1px;gap:2px}#hud .time{font-size:22px}#hud .dim{font-size:12px}#hud .seg{width:24px;height:10px}#hint{top:22%;white-space:normal;width:max-content;max-width:calc(100vw - 32px);font-size:13px}.panel{min-width:0;padding:16px 18px}.panel.small{min-width:0}.panel.info{max-width:calc(100vw - 24px)}.panel.info p{font-size:14px}h1{font-size:34px}.rules{gap:8px;margin:8px 0 12px}.rule{grid-template-columns:36px 1fr;column-gap:10px;font-size:13px}.rule svg{width:36px;height:36px}.rule b{font-size:16px}.setting input[type=range]{width:min(200px,38vw)}fieldset.setting label{margin-left:0;margin-right:12px}.panel.results dl{font-size:18px;margin:8px auto 12px}.panel h2.wiped,.panel h2.sunset{font-size:32px}.menu{min-width:0;width:min(320px,calc(100vw - 48px))}.stage-banner{top:20%}}@media(max-width:700px),(max-height:560px){.select-screen{padding:8px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.select-title{font-size:clamp(16px,4.6vw,24px);margin:0 0 4px;flex-wrap:wrap;letter-spacing:2px}.cards{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:10px;padding:10px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x}.card{flex:0 0 auto;width:clamp(150px,36vw,190px);padding:8px;gap:4px;scroll-snap-align:center}.card:first-child{margin-left:auto}.card:last-child{margin-right:auto}.card-name{font-size:20px}.card-style{font-size:12px;letter-spacing:2px}.card-sub{min-height:0;font-size:12px}.card .gang-logo{width:64px;height:64px}.rider-portrait{height:clamp(40px,11vh,90px)}.stat{grid-template-columns:62px 1fr;font-size:10px}.stat-bar{height:6px}.select-hint{margin-top:6px}}@media(max-height:520px){.title-screen{gap:8px;padding:8px}.logo-top{font-size:clamp(30px,min(9vw,17vh),90px)}.logo-bottom{margin-top:4px;font-size:clamp(16px,min(4.4vw,8vh),40px)}.main-menu{grid-template-columns:1fr 1fr;width:min(520px,calc(100vw - 48px))}.menu-item{font-size:20px;padding:6px 12px}.pause .menu-item{font-size:18px}.press{font-size:18px;letter-spacing:4px}.rules{grid-template-columns:1fr 1fr}.rule{align-items:start}}