*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102c32;font-family:Arial,'PingFang TC','Microsoft JhengHei',sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}button{font:inherit;cursor:pointer;border:0}#world,canvas,.vignette,#flash{position:absolute;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(180deg,#05232a88,transparent 30%,transparent 60%,#041d2caa)}#flash{pointer-events:none;background:#ff543c;opacity:0;transition:opacity .15s}header{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;justify-content:space-between;text-shadow:0 2px 12px #123}small,.eyebrow{font-size:10px;letter-spacing:2px}header small{display:block;color:#b3d3d3;margin-bottom:6px}header strong{font-size:28px;letter-spacing:1px}header strong span{font-size:15px;color:#b9c8c8;margin-left:5px}.total{text-align:right}.total strong{color:#e7ff6c}#cue{position:absolute;top:20%;left:0;width:100%;text-align:center;pointer-events:none;text-shadow:0 2px 18px #102b34}#cue b{display:block;font-size:clamp(23px,4vw,38px);font-style:italic}#cue span{display:block;font-size:12px;margin-top:6px;letter-spacing:2px}#streak{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#c5d5d9;white-space:nowrap}#controls{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;align-items:end;justify-content:space-between}.energy{width:210px;max-width:40vw;padding-bottom:12px}.energy>div:first-child{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;margin-bottom:9px}.track{height:10px;background:#14313b;border:1px solid #83a8a6;border-radius:3px;overflow:hidden}.track i{display:block;width:0;height:100%;background:#e7ff6c;box-shadow:0 0 12px #c2f834}.energy small{display:block;font-size:10px;letter-spacing:1px;margin-top:9px;color:#d2e2dc}#charge{width:140px;height:140px;border-radius:50%;background:#e9ff67;color:#173338;box-shadow:0 0 0 7px #d6f96722,0 8px 0 #7e9a32,0 15px 35px #08212780;border:2px solid #f6ffbc;transition:transform .08s}#charge span{display:block;font-weight:900;font-size:23px;font-style:italic}#charge small{display:block;font-size:11px;letter-spacing:1px;margin-top:6px}#charge.active{transform:scale(.94);background:#ffb942;box-shadow:0 0 0 12px #ffb94233,0 0 40px #ff9738}#charge:disabled{opacity:.45}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#05262e75;backdrop-filter:blur(4px)}.panel{width:min(560px,90vw);text-align:center;padding:26px}.eyebrow{color:#d3f17c;font-size:9px}h1{font-size:clamp(50px,9vw,90px);line-height:1;margin:12px 0 0;font-weight:1000;font-style:italic;letter-spacing:-5px;text-shadow:4px 5px #12343a}h1 span{color:#e7ff6c}.subtitle{font-size:16px;letter-spacing:9px;font-weight:bold;margin:12px 0 18px;color:#e7ff6c}.steps{display:flex;justify-content:center;gap:20px;margin:20px 0;font-size:11px;color:#d7ee8a}.steps b{color:white;margin-left:4px}.fine{font-size:11px;line-height:1.8;color:#c4d3d4}#start,#restart{padding:16px 34px;background:#e7ff6c;color:#183335;font-size:18px;font-weight:900;border-radius:5px;min-width:220px}#start span{margin-left:50px}#result{position:absolute;top:40%;left:50%;transform:translate(-50%,-30%);text-align:center;min-width:300px;background:#06272ee8;border:1px solid #9dc5bf55;border-radius:12px;padding:24px 38px;box-shadow:0 25px 80px #0005}#result h2{font-size:35px;font-style:italic;margin:5px 0 12px;color:#e7ff6c}#result p{font-size:12px;letter-spacing:2px;color:#bbd2d2}#result .score{font-size:48px;font-weight:900}#result small{display:block;line-height:1.9;color:#c8d8d8}#restart{margin-top:16px}#rotate{display:none;position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;color:#e9ffb4;pointer-events:none}@media(orientation:portrait){#rotate{display:block}#cue{top:23%}#controls{bottom:55px}#charge{width:125px;height:125px}.steps{gap:10px}.energy{max-width:42vw}#streak{bottom:30px;font-size:8px}header strong{font-size:24px}}@media(max-height:470px){.panel{padding:12px}h1{font-size:58px}.subtitle{margin:8px 0}.steps{margin:12px 0}.fine{margin:8px 0}#charge{width:112px;height:112px}#controls{bottom:24px}#cue{top:17%}#streak{bottom:7px}}
/* V1.2: compact notices leave the door gap unobstructed, in both orientations. */
#cue{top:max(91px,calc(env(safe-area-inset-top) + 80px));left:50%;width:max-content;max-width:82vw;transform:translateX(-50%);padding:7px 14px;border-radius:20px;background:#082d3999;backdrop-filter:blur(5px)}
#cue b{font-size:16px;font-style:normal;letter-spacing:1px}#cue span{font-size:10px;margin-top:4px;letter-spacing:.8px}
.sound-settings{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:15px}
.sound-settings button{color:#d9edc0;background:#26464b;border:1px solid #8eaa8b66;border-radius:16px;font-size:11px;min-height:32px;padding:6px 13px}
.sound-settings small{font-size:9px!important;letter-spacing:.3px!important;color:#bfd2cd!important}
#result.score-reveal{animation:result-in .28s ease-out}#result.score-reveal h2{animation:grade-pop .5s cubic-bezier(.22,1.5,.5,1)}
@keyframes result-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes grade-pop{from{scale:.65}to{scale:1}}
@media(orientation:portrait){#cue{top:max(105px,calc(env(safe-area-inset-top) + 92px))}#cue b{font-size:15px}#controls{bottom:max(38px,calc(env(safe-area-inset-bottom) + 24px))}#streak{bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:470px){#cue{top:76px;padding:4px 12px}#cue b{font-size:13px}#cue span{font-size:9px}.sound-settings{margin-top:8px}.panel .fine{line-height:1.5}.panel .eyebrow{font-size:8px}}