*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#173749;font-family:'Clarika',Arial,sans-serif;color:#fff}canvas{display:block;touch-action:none}button,select{font:inherit;cursor:pointer}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffe089;outline-offset:4px}header{position:fixed;inset:20px 26px auto;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.wordmark{font:900 21px 'Clarika',Arial,sans-serif;letter-spacing:1px;color:#fff2c0;text-shadow:0 3px 0 #183647}#hud{display:flex;gap:22px;align-items:center;text-shadow:0 2px 3px #163746}#hud small{display:block;font-size:9px;font-weight:bold;letter-spacing:1.5px;opacity:.8}#hud b{font:900 29px 'Clarika',Arial,sans-serif;letter-spacing:1px}.coins{color:#ffe07c}#pause{pointer-events:auto;color:white;border:1px solid #e9f7ff65;background:#12384bbd;width:44px;height:44px;border-radius:5px;font-size:20px}#overlay{position:fixed;inset:0;display:flex;align-items:center;padding:70px 6vw 85px;background:linear-gradient(90deg,#092a40ec 0%,#092a40bb 30%,transparent 70%)}#overlay[hidden]{display:none}.card{width:350px;max-height:100%;overflow-y:auto;padding:10px 8px 20px;scrollbar-width:thin}.club{color:#8de2fa;font-size:11px;letter-spacing:4px;font-weight:800}h1{font:900 clamp(46px,5.5vw,78px)/.91 'Clarika',Arial,sans-serif;letter-spacing:1px;margin:20px 0 22px;color:#ffdf79;text-shadow:0 4px 0 #9c6f27,0 7px 0 #153247}#message{font-size:13px;color:#d5edf3;line-height:1.6}#message:empty{display:none}.choice{display:flex;gap:10px;margin:24px 0}.choice button{background:#0b3040a0;color:#9cbfcd;border:1px solid #6495a170;padding:14px 8px;flex:1;font-weight:900;font-size:15px;letter-spacing:1px;transform:skewX(-5deg)}.choice button small{color:#e3c87b;margin-left:8px}.choice button.active{color:white;border-color:#f4ce6c;box-shadow:inset 0 -3px #f4ce6c;background:#1f627e}label{font-size:10px;letter-spacing:2px;color:#b7d6e3;font-weight:bold}select{display:block;width:100%;padding:14px 12px;border:1px solid #608699;border-radius:3px;background:#103749;color:#fff;margin:8px 0 16px;font-size:14px;font-weight:bold;letter-spacing:1px}#start{width:100%;padding:15px;border:1px solid #ffefac;border-bottom:5px solid #ae7f27;background:linear-gradient(#ffe496,#e9b846);color:#3b2c13;font:900 27px 'Clarika',Arial,sans-serif;letter-spacing:3px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}#start:active{transform:translateY(2px)}#start:disabled{opacity:.5}details{margin:18px 0 12px}summary{font-size:10px;letter-spacing:2px;cursor:pointer;color:#b3d0dc}details p{font-size:12px;line-height:1.9;color:#c7dde7}.credits{font-size:9px;color:#7fa9ba;letter-spacing:1.5px;text-decoration:none}#race-info{position:fixed;right:28px;top:81px;color:#fff;font-size:10px;letter-spacing:1px;text-shadow:0 2px 3px #143448}#powers{position:fixed;top:90px;left:25px;display:flex;gap:12px}.power-active{position:relative;width:48px;text-align:center;border-bottom:3px solid #ffffff40;padding-bottom:5px;text-shadow:0 2px 2px #163044}.power-active:after{content:'';position:absolute;bottom:-3px;left:0;width:var(--remaining);height:3px;background:var(--color)}.power-active b{display:block;font-size:25px;color:#ffe194}.power-active span{font:bold 12px 'Clarika',Arial}#controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px}#controls button{width:54px;height:48px;background:#0c304e9c;border:1px solid #b9e0ee65;border-radius:5px;color:#fff;font-size:28px;font-weight:900;touch-action:none}#controls button:active{background:#286c8d}#toast{display:none}body:not([data-playing=true]) #race-info,body:not([data-playing=true]) #powers{visibility:hidden}body[data-playing=true] .wordmark{opacity:.65;font-size:14px}@media(max-width:650px){header{inset:14px 14px auto}.wordmark{display:none}#hud{width:100%;justify-content:space-between;gap:10px}#hud b{font-size:24px}#hud .extras{display:none}#hud small{font-size:8px}#race-info{top:75px;right:15px;font-size:9px}#powers{top:82px;left:14px}.power-active{width:34px}.power-active b{font-size:20px}#overlay{justify-content:center;padding:86px 24px 85px;background:#092a40db}.card{width:min(350px,100%)}h1{font-size:54px;margin:12px 0 18px}.choice{margin:16px 0}.club{font-size:10px}#start{font-size:24px}#controls{bottom:16px}#controls button{width:55px;height:48px}}@media(max-height:600px){#overlay{padding-top:70px;padding-bottom:65px}h1{font-size:36px;margin:8px 0}.choice{margin:12px 0}#start{padding:9px}}
@font-face{font-family:Clarika;src:url('fonts/Clarika-Regular.otf') format('opentype');font-weight:400;font-display:swap}@font-face{font-family:Clarika;src:url('fonts/Clarika-Bold.otf') format('opentype');font-weight:600 800;font-display:swap}@font-face{font-family:Clarika;src:url('fonts/Clarika-Black.otf') format('opentype');font-weight:900;font-display:swap}
.help-open{display:block;background:none;border:0;color:#cae6f2;margin:18px auto 12px;padding:10px;font-weight:700;letter-spacing:1px;font-size:12px}dialog{font-family:Clarika,Arial,sans-serif;color:#f4fbff;background:#10364c;border:1px solid #43829e;border-top:4px solid #f4d06a;border-radius:12px;width:min(690px,calc(100% - 24px));max-height:88dvh;padding:28px;box-shadow:0 24px 100px #0009;overflow:auto}dialog::backdrop{background:#021726c9;backdrop-filter:blur(5px)}#help-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#d6ecf4;font-size:30px}dialog .eyebrow{color:#82d6ee;font-size:10px;letter-spacing:2px;margin:0}dialog h2{font-size:29px;line-height:1.1;margin:10px 0 22px;font-weight:900}dialog h3{font-size:16px;margin:14px 0 7px;font-weight:900}.help-tabs{display:flex;border-bottom:1px solid #50758a;margin-bottom:22px}.help-tabs button{flex:1;background:transparent;border:0;border-bottom:3px solid transparent;color:#8fb5c7;padding:12px;font-weight:800;font-size:12px;letter-spacing:1px}.help-tabs [aria-selected=true]{color:#ffe18c;border-color:#ffe18c}.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}.moves article{background:#1c4d65;border-radius:8px;padding:18px 7px}.gesture{color:#91e8ff;font-size:46px;font-weight:900;height:64px;display:flex;align-items:center;justify-content:center;gap:6px}.gesture i{font-size:20px;color:#ffdc72;font-style:normal}.moves p{font-size:13px;color:#c4dce8;margin:0 0 16px}.moves small{display:block;font-size:11px;color:#9dc3d6;margin-top:13px}kbd{display:inline-block;font:700 10px Clarika,Arial;background:#092b40;border:1px solid #5f8c9d;border-bottom-width:3px;border-radius:4px;padding:6px;min-width:25px}.help-tip{text-align:center;font-size:14px;font-weight:700;margin:23px 0 7px;color:#f6dea0}.alt-controls{text-align:center;color:#9cb8c8;font-size:11px}#help-ready{display:block;margin:22px auto 0;background:#f6d074;color:#153345;border:0;border-bottom:4px solid #b88f3d;padding:13px 36px;border-radius:5px;font-weight:900;letter-spacing:1px}.power-guide{display:grid;grid-template-columns:1fr 1fr;gap:12px}.power-guide article{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff20;padding:0 0 12px}.power-guide article:last-child{grid-column:1/-1}.power-guide img,.power-glyph{width:50px;height:64px;object-fit:contain;flex-shrink:0}.power-glyph{font-size:44px;color:#ef7181}.power-guide h3{margin:0 0 4px}.power-guide h3 small{font-size:11px;font-weight:400;color:#bbd9e6;margin-left:5px}.power-guide b{font-size:9px;color:#8bd9f1;letter-spacing:1px}.power-guide p{font-size:12px;color:#c9dfe8;line-height:1.4;margin:5px 0 0}@media(max-width:500px){dialog{padding:22px 15px}dialog h2{font-size:25px}.moves{gap:6px}.moves article{padding:15px 4px}.gesture{font-size:34px}.moves h3{font-size:13px}.moves p{font-size:11px}.moves small{font-size:10px}.power-guide{grid-template-columns:1fr}.power-guide article:last-child{grid-column:auto}}
.power-guide canvas{width:56px;height:68px;object-fit:contain;flex-shrink:0}
html,body{height:100%;height:100dvh;overscroll-behavior:none;-webkit-text-size-adjust:100%}body>canvas{position:fixed;inset:0}button{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}header{top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}#controls{bottom:max(16px,env(safe-area-inset-bottom))}#overlay{padding-top:max(86px,calc(env(safe-area-inset-top) + 70px));padding-bottom:max(85px,calc(env(safe-area-inset-bottom) + 70px))}.card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}dialog{max-height:88vh;max-height:88dvh}#help-close{min-width:44px;min-height:44px}#difficulty{font-size:16px}@media(pointer:coarse){#controls button{width:60px;min-height:52px}#help-controls kbd,.alt-controls{display:none}.moves small{font-size:12px;color:#d0e8f5}#controls{gap:12px}.help-open{min-height:44px}}@media(max-height:500px) and (orientation:landscape){#overlay{padding:65px max(25px,env(safe-area-inset-left)) 12px;justify-content:flex-start}.card{width:300px}h1{font-size:30px;margin:5px 0 9px}.choice{margin:8px 0}.choice button{padding:8px}#difficulty{padding:8px;margin:5px 0 8px}#start{padding:8px;font-size:20px}.help-open{margin:5px auto;padding:6px}.club,.credits{display:none}#controls{left:auto;right:max(15px,env(safe-area-inset-right));transform:none}#race-info{top:68px}#powers{top:72px}}
h1{font-size:clamp(46px,5vw,64px)}@media(max-width:650px){h1{font-size:50px}}@media(max-height:500px){h1{font-size:30px}}

#restart[hidden]{display:none}#restart{border:1px solid #9fc3d0;border-radius:4px;padding:14px;width:100%;margin:10px 0}.credits+.credits{margin-left:18px}

#sound{pointer-events:auto;background:#12384bd9;color:#fff;border:1px solid #8ac7df70;border-radius:5px;min-height:44px;padding:8px;font-size:9px;font-weight:700}#countdown[hidden],#results[hidden],#zone-banner[hidden]{display:none}#countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#072c4540;pointer-events:none;z-index:8}#countdown span{font-size:15px;letter-spacing:4px;font-weight:700}#count-number{font-size:130px;line-height:1.2;color:#ffe086;text-shadow:0 5px #604316}#zone-banner{position:fixed;left:50%;top:23%;transform:translateX(-50%);padding:12px 22px;border-bottom:2px solid #ffe086;background:#12384bd9;text-align:center;font-size:14px;font-weight:900;letter-spacing:2px;pointer-events:none}#results{margin:15px 0}#result-score{display:block;color:#ffdf79;font-size:62px;line-height:1;font-weight:900}#results>small{letter-spacing:3px;font-size:10px}#record-badge{color:#91eaff;font-size:13px;letter-spacing:2px;font-weight:900}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-bottom:1px solid #97cddd40}.result-grid b{font-size:22px;display:block}.result-grid span{font-size:9px;letter-spacing:1px;color:#add7e7}#result-level{font-size:12px;color:#b2d5e3}#share-result,#save-result{border:1px solid #89b9ce80;border-radius:4px;padding:12px;width:100%;margin:8px 0}#share-status{font-size:12px;color:#d0eafa;white-space:pre-line}.dialog-primary{width:100%;padding:15px;border:0;background:#f6d074;color:#153345;font-weight:900;border-radius:5px}#restart-dialog p{color:#b5d6e4}body:has(#results:not([hidden])) h1{font-size:32px}body:has(#results:not([hidden])) .choice{margin:12px 0}#restart-dialog{max-width:430px}@media(max-width:650px){#hud{gap:6px}#hud .record{display:none}#sound{font-size:8px;padding:5px}#zone-banner{width:80%;font-size:12px;top:24%}}

body:not([data-playing="true"]) #zone-banner{display:none}
/* Primary celeste from brand manual p.11: RGB 117,190,238. */
:root{--club-celeste:#75beee;--club-white:#fff;--club-navy:#062947}
h1{color:var(--club-white);text-shadow:0 4px 0 #218bc6,0 7px 0 var(--club-navy)}.wordmark,.coins,.power-active b,#result-score,#count-number{color:var(--club-white)}.club,#record-badge,.help-tip{color:var(--club-celeste)}#start,.dialog-primary,#help-ready{background:var(--club-celeste);color:var(--club-navy);border-color:#fff;border-bottom-color:#218bc6}#count-number{text-shadow:0 5px #218bc6}#zone-banner{border-bottom-color:var(--club-celeste)}button:focus-visible,select:focus-visible{outline-color:var(--club-white)}
.choice{gap:14px;margin:18px 0}.choice button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px 12px;transform:none;background:#0b304099;border:2px solid #a4d9ee55;border-radius:12px;color:#bad6e3;transition:background .15s,border-color .15s}.choice button.active{background:#247ca6;border-color:#fff;color:#fff;box-shadow:0 0 0 3px #75beee44}.choice canvas{width:90px;height:90px;pointer-events:none;filter:drop-shadow(0 3px 2px #06294755)}.choice span{font-size:13px;letter-spacing:1.2px}.choice i{display:none;position:absolute;right:7px;top:6px;font-size:14px;color:#062947;background:#fff;border-radius:50%;width:20px;height:20px;font-style:normal}.choice button.active i{display:block}.choice button:hover{border-color:var(--club-celeste)}.picker-label{font-size:10px;letter-spacing:2px;font-weight:700;color:#b7d6e3!important;margin-bottom:0}#restart-character[hidden],input[type=hidden]{display:none!important}#restart-dialog .choice{margin-top:8px}@media(max-height:700px){.choice canvas{width:64px;height:64px}.choice{margin:10px 0}.choice button{padding:6px}}@media(max-height:500px){.choice canvas{width:44px;height:44px}.choice button{flex-direction:row;gap:8px}.choice span{font-size:11px}}
#header-bonus{position:fixed;left:50%;top:32%;transform:translateX(-50%);font:900 clamp(20px,3vw,32px) Clarika,Arial;color:#fff;text-shadow:0 3px #1876a4,0 5px #062947;pointer-events:none;white-space:nowrap}#header-bonus[hidden],body:not([data-playing=true]) #header-bonus{display:none}#result-headers{font-size:12px;font-weight:700;color:#75beee}
#zone-banner:has(img){display:flex;align-items:center;justify-content:center;gap:14px;background:#ffffffed;color:#163e69;border-color:#75beee;text-shadow:none}#zone-banner img{width:115px;height:28px;object-fit:contain}.power-active img{display:block;object-fit:contain;width:48px;height:32px;background:#fffffff0;border-radius:4px;padding:4px;margin-bottom:5px}.power-guide .brand-wordmark{width:95px;height:24px;object-fit:contain;background:#fff;border-radius:3px;padding:3px;margin-top:4px}@media(max-width:650px){.power-active img{width:34px;height:28px}#zone-banner img{width:90px;height:24px}#zone-banner:has(img){gap:10px;letter-spacing:1px}}

.power-guide article{align-items:start}.power-guide .brand-wordmark{display:block;box-sizing:border-box;width:112px;height:30px;padding:4px 7px;margin:6px 0 8px}

#training-hud{position:fixed;z-index:15;left:50%;bottom:100px;transform:translateX(-50%);display:grid;gap:7px;text-align:center;width:min(430px,90vw);padding:16px 20px;background:#10364cef;border:2px solid #75beee;border-radius:16px;color:white;pointer-events:none}#training-hud[hidden],#header-cue[hidden]{display:none}#training-progress{color:#75beee;font-size:12px;letter-spacing:2px}#training-title{font-size:22px}#training-hint{font-size:14px}#training-exit{pointer-events:auto;border:0;background:transparent;color:#b9dcef;font-size:11px;padding:8px;cursor:pointer}#header-cue{position:fixed;z-index:9;transform:translate(-50%,-50%);pointer-events:none;display:grid;justify-items:center;gap:6px;color:white;text-shadow:0 2px 4px #10364c}#header-cue i{display:block;width:48px;height:48px;border:3px dashed #fff;border-radius:50%;box-shadow:0 0 0 2px #10364c55}#header-cue strong{white-space:nowrap;font-size:14px;background:#10364cde;padding:4px 10px;border-radius:8px}#header-cue[data-ready=true] i{border:4px solid #ffdc56;box-shadow:0 0 16px #ffdc56}#header-cue[data-ready=true] strong{background:#ffdc56;color:#10364c;text-shadow:none}body[data-training=true] #zone-banner{display:none!important}@media(max-height:650px){#training-hud{bottom:74px;padding:9px 14px;gap:3px}#training-title{font-size:17px}}

#header-cue i,#header-cue[data-ready=true] i{width:26px;height:26px;border:2px solid #ffe49a;box-shadow:none;opacity:.8}#header-cue strong[hidden]{display:none}

.menu-tools{display:flex;justify-content:space-between;gap:8px;margin:12px 0}.menu-tools button{background:#164e6b;border:1px solid #75beee66;border-radius:5px;color:white;padding:12px 8px;font-size:11px;font-weight:700;flex:1}
#mission-mini{position:fixed;bottom:max(82px,calc(env(safe-area-inset-bottom) + 76px));left:50%;transform:translateX(-50%);background:#10364ccc;color:#d6eeff;border:1px solid #75beee55;border-radius:20px;padding:8px 14px;font-size:11px;white-space:pre;min-height:36px}#mission-mini[hidden],body:not([data-playing=true]) #mission-mini{display:none}
#mission-list,#record-list{list-style:none;padding:0}#mission-list li,#record-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:16px 0;border-bottom:1px solid #75beee40}#mission-list progress{width:100%;height:5px;accent-color:#75beee}#mission-list small{font-size:10px;color:#75beee;letter-spacing:1px}.complete span{color:#75beee}#audio-dialog input{width:100%;display:block;margin:16px 0 28px;accent-color:#75beee;min-height:32px}#audio-dialog p,#records-dialog p,#missions-dialog p{font-size:13px;color:#bcd8e8}#header-bonus{top:19%;font-size:clamp(17px,2.5vw,24px)}

#flight-destination{position:fixed;top:152px;left:25px;display:grid;gap:3px;max-width:230px;padding:10px 14px;background:#ffffffec;color:#12364c;border-left:3px solid #75beee;border-radius:5px;pointer-events:none}#flight-destination img{width:105px;height:26px;object-fit:contain;margin-bottom:3px}#flight-destination small{font-size:8px;letter-spacing:2px}#flight-destination strong{font-size:17px}#flight-destination span{font-size:11px}#flight-destination[hidden],body:not([data-playing=true]) #flight-destination{display:none}@media(max-width:650px){#flight-destination{top:145px;left:14px;max-width:165px;padding:8px 10px}#flight-destination strong{font-size:14px}#flight-destination img{width:85px;height:20px}}

#lives-status{position:fixed;right:24px;top:112px;padding:7px 10px;background:#12364cde;border-radius:5px;color:white;font-size:12px;font-weight:700;pointer-events:none}#lives-status[data-card=yellow]{border-left:5px solid #ffd447}#lives-status[data-card=red]{border-left:5px solid #ee4545}
#card-notice{--card-light:#ffe47c;--card-main:#ffd02e;--card-dark:#d69a08;position:fixed;z-index:12;right:24px;top:155px;display:flex;align-items:center;gap:18px;max-width:290px;padding:16px 20px;background:linear-gradient(135deg,#153f56f5,#082a40ed);border:1px solid #ffffff26;border-radius:12px;box-shadow:0 8px 24px #06233735;color:white;pointer-events:none}
#card-notice[data-card=red]{--card-light:#ff897c;--card-main:#ef403c;--card-dark:#b51725}
#card-notice i,body:has(#results:not([hidden])) #title::before{display:block;flex:none;width:48px;height:68px;border-radius:6px;background:linear-gradient(135deg,var(--card-light) 0%,var(--card-main) 45%,var(--card-dark) 100%);border:1px solid #ffffff72;box-shadow:inset 0 0 0 3px #ffffff20,0 4px 0 var(--card-dark),0 9px 14px #0004;transform:rotate(-9deg)}
#card-notice:not([hidden]) i{animation:referee-card-in .32s cubic-bezier(.18,.8,.3,1.2) both}
#card-notice strong,#card-notice span{display:block}#card-notice strong{font-size:18px;letter-spacing:.06em}#card-notice span{font-size:12px;margin-top:6px;color:#d8edfa;line-height:1.4}
#card-notice[hidden],#lives-status[hidden],body:not([data-playing=true]) #lives-status,body:not([data-playing=true]) #card-notice{display:none}
@keyframes referee-card-in{from{opacity:0;transform:translateY(12px) rotate(-20deg) scale(.7)}to{opacity:1;transform:translateY(0) rotate(-9deg) scale(1)}}
body:has(#results:not([hidden])) #title{display:flex;align-items:center;gap:20px;min-height:72px}
body:has(#results:not([hidden])) #title::before{content:'';--card-light:#ff897c;--card-main:#ef403c;--card-dark:#b51725;width:42px;height:60px;animation:referee-card-in .32s ease-out both}
@media(max-width:650px){#lives-status{top:106px;right:12px;font-size:10px}#card-notice{top:142px;right:12px;max-width:235px;padding:12px 15px;gap:14px}#card-notice i{width:36px;height:52px}#card-notice strong{font-size:14px}#card-notice span{font-size:11px}body:has(#results:not([hidden])) #title{min-height:58px;gap:16px}body:has(#results:not([hidden])) #title::before{width:34px;height:49px}}
@media(prefers-reduced-motion:reduce){#card-notice:not([hidden]) i,body:has(#results:not([hidden])) #title::before{animation:none}}

.controls-option{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:12px;letter-spacing:0;color:#d6eeff;min-height:36px}.controls-option input{width:20px;height:20px;accent-color:#75beee}body[data-show-controls=false] #controls{display:none}#controls button{line-height:24px}#controls button small{display:block;font-size:10px;line-height:12px;color:#c9eaff}

/* Compact menu: primary actions remain on screen without a scroll panel. */
#overlay{padding:60px max(20px,5vw) 16px}
#overlay .card{width:390px;max-width:100%;max-height:none;overflow:visible;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;transform-origin:left center;flex-shrink:0}
#overlay .card>*{grid-column:1/-1;margin:0}
#overlay .card .club{font-size:10px;letter-spacing:3px}
#overlay .card h1{font-size:44px;line-height:.95;margin:4px 0 9px}
#overlay .card .choice{margin:0;gap:10px}
#overlay .card .choice button{padding:7px;min-height:0}
#overlay .card .choice canvas{width:56px;height:56px}
#overlay .card .choice span{font-size:12px}
#overlay .card label[for=difficulty]{margin-top:4px;font-size:10px}
#overlay .card #difficulty{padding:10px;margin:0;font-size:14px}
#overlay .card #start{padding:11px;font-size:22px;letter-spacing:2px}
#overlay .card .help-open{padding:9px 6px;min-height:36px;margin:0;width:100%;font-size:11px}
#overlay .card #training-start,#overlay .card #help-open{grid-column:auto;border:1px solid #75beee55;border-radius:5px}
#overlay .card .controls-option{min-height:28px;margin:0;font-size:11px}
#overlay .card .menu-tools{margin:0;gap:6px}
#overlay .card .menu-tools button{padding:8px 5px;min-height:32px;font-size:10px}
#overlay .card .credits{grid-column:auto;display:block;margin:0;padding:5px 0;font-size:10px}
#overlay .card #message{font-size:11px;line-height:1.25}
#overlay .card #results{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
#overlay .card #results[hidden]{display:none}
#overlay .card #results>*{margin:0;grid-column:1/-1}
#overlay .card #record-badge{font-size:10px}
#overlay .card #result-score{font-size:34px}
#overlay .card .result-grid p{margin:4px 0}
#overlay .card .result-grid b{font-size:18px}
#overlay .card #share-result,#overlay .card #save-result{grid-column:auto;padding:6px;min-height:28px;font-size:9px}
#overlay .card #result-level,#overlay .card #result-headers{font-size:10px}
#overlay .card:has(#results:not([hidden])) h1{font-size:27px;margin:0}
#overlay .card:has(#results:not([hidden])) .club{display:none}
#overlay .card:has(#results:not([hidden])) #start::after{content:'ESPACIO PARA VOLVER A JUGAR';display:block;font-size:9px;letter-spacing:1px;margin-top:3px}
@media(pointer:coarse){#overlay .card:has(#results:not([hidden])) #start::after{display:none}}
@media(max-width:600px){#overlay{justify-content:center;padding:58px 18px 14px}#overlay .card{width:360px;transform-origin:center center}#overlay .card h1{font-size:36px}#overlay .card .choice canvas{width:48px;height:48px}}
@media(max-height:500px) and (min-width:650px){#overlay{padding-top:52px}#overlay .card{width:620px;column-gap:18px}#overlay .card h1,#overlay .card .choice,#overlay .card label[for=difficulty],#overlay .card #difficulty{grid-column:1}#overlay .card #start{grid-column:2;grid-row:2}#overlay .card #survival-open{grid-column:2;grid-row:3}#overlay .card #training-start{grid-column:2;grid-row:4}#overlay .card #help-open{grid-column:2;grid-row:5}#overlay .card h1{font-size:30px}#overlay .card .choice canvas{width:40px;height:40px}}
@media(max-height:500px) and (min-width:650px){
#overlay .card:has(#results:not([hidden])){width:740px;gap:4px 18px}
#overlay .card:has(#results:not([hidden])) h1{grid-column:1;grid-row:1}
#overlay .card:has(#results:not([hidden])) #message{grid-column:1;grid-row:2}
#overlay .card:has(#results:not([hidden])) #results{grid-column:1;grid-row:3/10;align-self:start}
#overlay .card:has(#results:not([hidden])) .choice{grid-column:2;grid-row:1/3}
#overlay .card:has(#results:not([hidden])) label[for=difficulty]{grid-column:2;grid-row:3}
#overlay .card:has(#results:not([hidden])) #difficulty{grid-column:2;grid-row:4}
#overlay .card:has(#results:not([hidden])) #start{grid-column:2;grid-row:5}
#overlay .card:has(#results:not([hidden])) #survival-open{grid-column:2;grid-row:6}
#overlay .card:has(#results:not([hidden])) #training-start{grid-column:2;grid-row:7}
#overlay .card:has(#results:not([hidden])) #help-open{grid-column:2;grid-row:8}
#overlay .card:has(#results:not([hidden])) .controls-option{grid-column:2;grid-row:9}
#overlay .card:has(#results:not([hidden])) .menu-tools{grid-column:1;grid-row:10}
#overlay .card:has(#results:not([hidden])) .credits{grid-column:1;grid-row:auto}
}

/* Loading and recovery stay reachable without scrolling the menu. */
#load-status{position:fixed;z-index:1000;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);width:min(360px,88vw);padding:14px 18px;background:#10364c;color:white;border:1px solid #75beee;border-radius:12px;text-align:center;box-shadow:0 4px 20px #001c3280;font-size:14px}#load-status[hidden]{display:none}#load-progress{display:block;width:100%;height:8px;margin-top:10px;accent-color:#75beee}#load-retry{margin:10px auto 0;padding:10px 22px;background:#75beee;color:#062947;border:0;border-radius:6px;font:inherit;font-weight:bold}

#download-diagnostics{display:inline-block;width:auto;border:0;background:none;padding:0;margin:0 18px 0 0;font:inherit;font-size:10px;letter-spacing:.1em;color:inherit;cursor:pointer}#result-progress,#result-time{font-size:12px;color:#75beee;margin:5px 0}

/* Power feedback stays near the controls, leaving the approaching course clear. */
#toast{display:block;position:fixed;z-index:11;left:50%;bottom:max(138px,calc(env(safe-area-inset-bottom) + 132px));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 28px);padding:11px 16px;border:1px solid #ffffff30;border-left:4px solid var(--notice-color,#75beee);border-radius:9px;background:#082d45ed;box-shadow:0 5px 18px #06233738;color:#fff;font-size:13px;font-weight:700;text-align:center;pointer-events:none;line-height:1.35}
#toast[hidden],body:not([data-playing=true]) #toast{display:none}
.power-active{width:65px;padding:6px 5px 8px;border-radius:7px 7px 0 0;background:#082d45de}
.power-active[hidden]{display:none}
.power-active img{width:100%;height:30px;margin-bottom:5px}
.power-active b{font-size:9px;letter-spacing:.04em;color:#fff;white-space:nowrap;margin-bottom:3px}
.power-active span{font-size:12px;color:#e3f6ff}
#flight-destination{top:190px}
.power-active[data-ending=true]{animation:power-ending .8s ease-in-out infinite}
@keyframes power-ending{50%{box-shadow:0 0 0 2px #ffdd7ccc}}
@media(max-width:650px){#powers{gap:6px}.power-active{width:49px;padding:4px 3px 6px}.power-active img{height:25px;padding:3px}.power-active b{font-size:7px}.power-active span{font-size:10px}#toast{font-size:11px;padding:9px 12px}#flight-destination{top:165px}}
@media(max-height:500px){#toast{bottom:116px;padding:7px 12px}.power-active img{height:23px}.power-active{padding:3px}}
@media(max-height:500px) and (min-width:650px){#toast{left:24px;bottom:16px;transform:none;max-width:calc(50vw - 48px);font-size:11px}}
@media(prefers-reduced-motion:reduce){.power-active[data-ending=true]{animation:none;outline:1px solid #ffdd7c}}
