/* Cut-paper HUD and chunky ink edges. The existing thumb-pad hit areas stay
   in the controller styles so artwork never changes touch coordinates. */
:root{--paper:#fff1cf;--sub:#c9c7d2;--gold:#ffd06b;--teal:#9ce8d7;--comic-ink:#182337}
.screen{background:linear-gradient(90deg,#111d31ed,rgba(17,29,49,.82) 34%,rgba(17,29,49,.08) 76%)}
#menu .eyebrow{color:var(--teal);font-size:12px;letter-spacing:.19em}
#menu .title{font-family:Arial Black,Arial,Helvetica,sans-serif;font-style:italic;transform:rotate(-1.4deg);transform-origin:left center;text-shadow:3px 4px 0 var(--comic-ink),-1px -1px 0 var(--comic-ink);margin:15px 0 20px}
#menu .title .name{color:var(--paper);letter-spacing:-.025em}
#menu .title .bike-word{color:var(--gold)}
.primary{border:2px solid var(--comic-ink);border-radius:3px;box-shadow:4px 4px 0 var(--comic-ink);background:var(--gold);letter-spacing:.04em}
.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.mode,.control-mode button,.bike-choice{border:2px solid #445065;border-radius:4px;background:#1b2b3cd9}
.mode.selected{background:#ffd06b18;border:2px solid var(--gold);box-shadow:3px 3px 0 var(--comic-ink)}
.mode{min-height:58px;padding:10px 13px}.mode strong{font-size:14px}.mode span{font-size:12px}
.control-mode{margin-top:10px}.control-mode button{padding:8px 11px;font-size:12px}
.control-mode button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold)}
.control-mode-note{font:12px/1.4 Arial,sans-serif;margin:7px 0 11px;color:#bfcad2}
.bike-choice.selected{background:#9ce8d717;border-color:var(--teal)}
.garage-heading{letter-spacing:.13em}.bike-description{font-size:12px;line-height:1.4}.bike-choice b{font-size:12px}.garage-heading{font-size:12px}
.menu-tools button,.top-action,.pause{border:2px solid #48536a;border-radius:4px;background:#17263dd9;box-shadow:2px 2px 0 var(--comic-ink)}
.menu-tools{margin-top:12px}.underrow{margin-top:12px}
.gamepad-status:not(.connected){display:none}
.menu-settings{margin-top:9px;color:#a9bbc7;font:12px/1.4 monospace}
.menu-settings summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;letter-spacing:.08em;list-style:none}
.menu-settings summary::-webkit-details-marker{display:none}.menu-settings summary::after{content:' +';color:var(--teal);font-size:16px;margin-left:8px}.menu-settings[open] summary::after{content:' −'}
.menu-settings>div{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid #526173;padding-top:5px}
.menu-settings .link{font-size:12px;min-height:44px}
.hudtop{gap:22px;padding:6px 13px 8px;border:2px solid #182337;border-left:5px solid var(--gold);border-radius:3px;background:linear-gradient(110deg,#15263eda,#27364cab);box-shadow:3px 3px 0 #17213699}
.metric label{font:12px/1.4 monospace;letter-spacing:.13em;color:#d6d8d4}.metric strong{font-family:Arial Black,Arial,sans-serif;font-style:italic;font-size:36px;text-shadow:2px 2px 0 #162333}
.metric.combo strong{color:var(--gold)}.metric small{font-size:12px}
.objective{top:184px;background:#14253ec9;padding:6px 9px;border-radius:2px;border-left:2px solid #9ce8d7;font-size:12px}
.health{top:219px}.pip{height:5px;box-shadow:1px 2px 0 #182337}
.wave{color:#e8e3d0;background:#1b2b41b5;border-right:3px solid #9ce8d7;padding:6px 10px;border-radius:2px;letter-spacing:.08em}
.line-display{width:min(350px,calc(100vw - 32px));min-width:180px}
.line-display>strong{display:block;font-size:12px;font-weight:800;letter-spacing:.065em;background:#182a40cf;border:1px solid #ffd06b50;border-radius:3px;padding:7px 10px;color:#fff1cf;text-shadow:1px 2px 0 #142038;overflow-wrap:anywhere}
.line-bar{height:4px;margin-top:5px;background:#182337aa;border-radius:2px}.line-bar i{background:linear-gradient(90deg,var(--teal),var(--gold))}
.line-result{pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .17s,transform .2s;margin-bottom:9px;color:var(--gold);text-shadow:2px 3px 0 #172337,-1px -1px 0 #172337}
.line-result.show{opacity:1;transform:translateY(0)}
.line-result small{display:block;font:800 12px/1.5 Arial,sans-serif;color:#fdf0cf;letter-spacing:.07em;max-width:330px;margin:auto;overflow-wrap:anywhere}
.line-result b{display:block;font:italic 900 37px/.95 Arial Black,Arial,sans-serif;margin-top:5px}
.toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center;border:2px solid #192438;border-left:5px solid var(--gold);border-radius:3px;box-shadow:3px 3px 0 #18233780;background:#1c2d43ed;font-size:13px}
.device-help .input-pair{font-size:12px}.device-help{border:2px solid #3b4e63;border-radius:4px;background:#182a40d9;box-shadow:3px 3px 0 #17233788}
.ride-status strong{color:var(--teal)}.vignette{box-shadow:inset 0 0 100px #111d312d}
.pause-screen{background:#111d31dd}.utility-card,.replay-console{border:2px solid #45556c!important;border-radius:5px!important;background:#162840f2!important}
@media(max-width:700px){
 .hudtop{gap:14px;padding:5px 9px 7px;left:14px}.metric strong{font-size:27px}.metric label{font-size:12px}.objective{top:156px;font-size:12px;padding:5px 7px}.health{top:188px}
 #menu .title{margin:12px 0 17px}.line-result b{font-size:29px}.line-result small{font-size:12px}.line-display>strong{font-size:12px}.wave{font-size:12px}
 #menu .control-mode-note{font-size:12px}.menu-settings summary{min-height:40px}
}
@media(orientation:landscape) and (max-height:540px){
 #menu .title{margin:10px 0 13px}#menu .mode{min-height:57px;padding:8px}#menu .control-mode-note{font-size:12px;margin-bottom:8px}
 #menu .menu-settings{grid-column:1/3;grid-row:9;margin-top:2px}#menu .connectbox{grid-row:10}#menu .gamepad-status{margin:5px 0}#menu .garage{margin-bottom:5px}
 .hudtop{gap:16px;padding:4px 9px 5px}.metric strong{font-size:25px}.metric label{font-size:12px}.objective{padding:4px 6px;top:128px}.health{top:157px}.wave{padding:3px 7px}
 .line-display{width:min(320px,34vw);bottom:17px}.line-display>strong{font-size:12px;padding:5px 7px}.line-result{margin-bottom:6px}.line-result b{font-size:27px}.line-result small{font-size:12px}
 .line-bar{height:3px}.toast{font-size:12px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){.line-result,.primary{transition:none}.line-result{transform:none}}