/* Nobi Toybox: our own menu grammar, not third-party game assets. */
:root{--toy-ink:#193b46;--toy-paper:#fff2d8;--toy-teal:#16717a;--toy-sun:#ffda66;--toy-coral:#ec846b;--toy-edge:3px solid var(--toy-ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,#122f40bd,transparent 78%);transition:opacity .18s;z-index:0}
body:has(.panel:not([hidden]))::before{opacity:1}
header,.panel,#hud,#race-info,#drive-coach,#finish-compact{z-index:1}
header{top:max(14px,env(safe-area-inset-top));left:24px;right:24px}
header b{font-size:.76rem}header small{margin-top:4px;font-size:.76rem}
button{border:2px solid #183b46;border-radius:13px;background:#fff2d8;color:var(--toy-ink);box-shadow:0 3px 0 #183b46;min-height:48px;font-weight:700;line-height:1.45;transition:transform .1s,box-shadow .1s}
button:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #183b46;background:#ffe4ad}
button:disabled{opacity:.6;cursor:default}
button:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #177e99;outline-offset:4px}
.header-actions{gap:9px}.header-actions button{padding:8px;min-width:48px;min-height:48px}#world-return{min-width:48px}
.panel{top:88px;bottom:24px;left:4vw;transform:none;width:min(430px,calc(100vw - 32px));max-height:none;padding:23px;background:linear-gradient(135deg,#fff7e5,#f4e5c7);color:var(--toy-ink);border:var(--toy-edge);border-radius:23px;box-shadow:0 6px 0 #173b46,0 15px 28px #122f4033;backdrop-filter:none;scrollbar-gutter:stable;overscroll-behavior:contain}
.panel p,.panel small,.panel .note,.course-choice small,#ghost-saved,#challenge-list legend,.performance-report{color:#35545b}
.panel h1{font-size:1.45rem;line-height:1.55;margin:5px 0 8px;font-weight:800}
.panel h2{font-size:1.9rem;line-height:1.5;margin:9px 0 12px}
.panel p{font-size:.9rem;line-height:1.7;margin:8px 0}
.eyebrow{color:#4b6268;letter-spacing:.04em;font-size:.73rem;font-weight:bold}
.toybox-brand{display:flex;align-items:center;gap:12px;margin:-4px 0 10px}
.toybox-nobi{display:block;width:88px;height:88px;flex:0 0 88px;background:url('/assets/nobi/j-umbrella-v1.png') 50% 0/300% 300% no-repeat}
.toybox-logo{font:900 clamp(2rem,4vw,3.1rem)/.96 system-ui,sans-serif;letter-spacing:-.04em;color:var(--toy-paper);-webkit-text-stroke:1.5px var(--toy-ink);text-shadow:0 3px 0 var(--toy-ink);transform:rotate(-3deg)}
.toybox-logo span{display:block;color:var(--toy-coral);font-size:.9em;margin-top:4px;letter-spacing:.02em}
.panel .primary{background:var(--toy-sun);color:var(--toy-ink);border:var(--toy-edge);font-size:1.05rem;box-shadow:0 4px 0 var(--toy-ink);min-height:54px}
.panel button{margin:10px 0}.panel label{font-size:.85rem;min-height:48px;margin:8px 0}
.panel input{accent-color:var(--toy-teal);flex-shrink:0}
.panel select{border:2px solid #6c8585;background:#fffaf0;min-height:48px;color:var(--toy-ink);border-radius:10px;font-size:.83rem}
.course-choice{margin:12px 0 10px;border:2px solid #809693;background:#fbf8ef;border-radius:16px;padding:0 12px 10px}
.course-choice label{font-weight:bold;gap:12px}.course-choice small{font-size:.76rem}
#course-map{height:45px;background:#214b55;border-radius:9px;margin:4px 0 7px}
.panel details{border-top:1px dashed #7b9695;color:var(--toy-ink);margin-top:10px;padding-top:5px}
.panel summary{min-height:48px;padding:10px 0;line-height:1.6;font-size:.85rem;font-weight:700}
#challenge-choice summary{display:list-item}
.panel label.challenge-card{background:#fbf8ef;border:2px solid #809693;min-height:54px}
.panel .challenge-card:has(input:checked){background:#d0e8df;border-color:var(--toy-teal)}
.handling-options,.ghost-panel{border-color:#9cae9f}
#rest,#finish,#drive-ready{bottom:auto;max-height:calc(100dvh - 112px)}
#finish #result{font-size:1.3rem;font-weight:bold;color:var(--toy-teal)}
#challenge-result{border-color:var(--toy-teal);background:#dfede2;padding:10px;border-radius:10px}
#world-return-dialog,.sound-dialog{color:var(--toy-ink);background:var(--toy-paper);border:var(--toy-edge);box-shadow:0 6px 0 var(--toy-ink)}
#world-return-dialog p,.sound-dialog p,.sound-dialog small,.sound-dialog .sound-help{color:#35545b}
#world-return-dialog h2,.sound-dialog h2{font-size:1.5rem;line-height:1.5}
#audio-live{color:var(--toy-teal)}#world-return-dialog a{color:var(--toy-ink);background:var(--toy-sun);border:var(--toy-edge);font-weight:bold;box-shadow:0 3px 0 var(--toy-ink)}
.sound-dialog input[type=range]{accent-color:var(--toy-teal)}
/* In motion, protect the view: no menu-card background on journey/rank/toast. */
.journey{top:78px;left:24px;width:145px}.journey span{font-size:.8rem}.journey small{font-size:.68rem}progress{margin:5px 0}
#race-info{top:78px;right:24px;max-width:200px}#race-info strong{font-size:1.55rem}#race-info span{font-size:.76rem}#warning,#rival-toy{font-size:.72rem;line-height:1.55;margin-top:5px}
#toast{background:none;border:0;border-radius:0;top:28%;padding:0;font-size:.87rem;max-width:70vw}
.controls button{background:#193b46c9;color:#fff2d8;border:2px solid #f7efd5a3;box-shadow:0 2px 0 #112f3a66;font-size:.85rem}
.controls button.input-held{background:var(--toy-sun);color:var(--toy-ink)}
#drive-coach{background:#193b46eb;color:#fff2d8;border:2px solid #fff2d8a6;max-width:280px}
#drive-coach p{color:#fff2d8}#drive-coach button{font-size:.78rem}
@media(max-width:600px){
 header{left:12px;right:12px}.header-actions{gap:6px}header b{font-size:.64rem}header small{font-size:.65rem;max-width:140px}
 .panel{left:12px;right:12px;top:79px;bottom:16px;width:auto;padding:15px;border-radius:19px}
 .toybox-brand{gap:10px;margin-bottom:8px}.toybox-nobi{width:65px;height:65px;flex-basis:65px}.toybox-logo{font-size:2.05rem}
 .panel h1{font-size:1.12rem}.panel p{font-size:.82rem}.panel small{font-size:.74rem}
 .course-choice{padding:0 9px 9px;margin-top:9px}.course-choice label{font-size:.8rem;gap:7px}#course{max-width:70%;font-size:.77rem}
 .panel select{padding:6px 4px}.panel .primary{font-size:1rem}
 #rest,#finish,#drive-ready{max-height:calc(100dvh - 96px)}
 .journey{top:76px;left:12px;width:130px}#race-info{top:76px;right:12px;max-width:150px}#race-info strong{font-size:1.3rem}#race-info span{font-size:.7rem}
 #toast{top:auto;bottom:calc(205px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 36px)}
 #drive-coach{top:82px;left:12px;right:auto;width:calc(100vw - 24px);max-width:300px}
}
@media(max-height:450px) and (min-width:601px){
 header{top:8px}.panel{top:64px;bottom:12px;width:390px;padding:14px}
 .toybox-nobi{width:54px;height:54px;flex-basis:54px}.toybox-logo{font-size:1.8rem}.toybox-brand{margin-bottom:5px}.panel h1{font-size:1.1rem}
 #rest,#finish,#drive-ready{max-height:calc(100dvh - 78px)}.journey,#race-info{top:65px}
}
@media(prefers-reduced-motion:reduce){body::before,button{transition:none}.toybox-logo{transform:none}}