:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif;color:#fff2d9;background:#030b1b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}button{font:inherit;cursor:pointer;border:0;touch-action:none}#game{position:relative;width:100%;height:100%;max-width:520px;margin:auto;overflow:hidden;background:#071b40;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%}.grain{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000009 3px 4px);z-index:1}header{position:absolute;top:calc(env(safe-area-inset-top) + 18px);left:24px;right:24px;z-index:2}.topline,.scoreline{display:flex;justify-content:space-between;align-items:center}.brand{font-size:20px;font-weight:950;letter-spacing:3px}.brand span{display:block;letter-spacing:1.3px;font-size:8px;margin-top:4px;color:#8fa8c6}.timer{text-align:right}.timer span,.record span{display:block;font-size:10px;color:#8fa8c6;letter-spacing:1px}.timer b{font-size:32px;font-variant-numeric:tabular-nums;letter-spacing:-1px}.scoreline{margin-top:14px;align-items:end}.eyebrow{font-size:10px;letter-spacing:2px;color:#d3dfeb}#score{font-size:44px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}.unit{font-size:14px;color:#ffd260}.record{font-size:13px;text-align:right;padding-bottom:4px}.record b{display:block;margin-top:4px;color:#ffd260}.time-track{height:3px;background:#ffffff20;margin-top:12px}.time-track i{display:block;background:#ffd260;height:100%;width:100%;transition:width .1s linear}#location{position:absolute;top:25%;left:24px;z-index:2;text-shadow:0 2px 8px #071b40}#levelTag{background:#ffd260;color:#15213c;padding:3px 7px;font-size:10px;font-weight:900;letter-spacing:1px}#roundTag{font-size:10px;margin-left:8px;color:#a5b9d5}h2{margin:9px 0 2px;font-size:27px;letter-spacing:2px}#english{font-size:9px;letter-spacing:2px;color:#91aed2;margin:0 0 11px}.progress{width:138px;background:#0b132c9c;height:4px}.progress i{display:block;width:0;background:#ffc65a;height:100%;transition:width .12s}.progress-label{display:flex;gap:10px;font-size:9px;margin-top:5px;color:#bdd0df}#stageHint{display:none}#tapZone{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 14px);left:24px;right:24px;z-index:3;text-align:center}.speed{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#c2cfdf;margin-bottom:10px;letter-spacing:.5px}#syllable{font-weight:800;color:#ffd260}#coo{height:clamp(82px,13vh,118px);width:100%;border-radius:20px;background:#ffd05b;color:#253047;font-size:55px;font-weight:950;box-shadow:0 7px 0 #b97729,0 13px 25px #0006;transition:transform .06s,box-shadow .06s}#coo.pressed,#coo:active{transform:translateY(5px) scale(.985);box-shadow:0 2px 0 #b97729,0 5px 12px #0004}#coo:disabled{filter:saturate(.6);cursor:default}.tap-note{font-size:9px;letter-spacing:3px;margin:13px 0 0;color:#9caec5}#bubble{position:absolute;top:47%;right:20px;padding:12px 15px;background:#fff7e8;color:#181b24;border:3px solid #852e3f;border-radius:15px;font-size:16px;font-weight:950;z-index:4;transform:scale(0);transition:transform .12s}#bubble.show{transform:scale(1) rotate(3deg)}#bubble:after{content:"";position:absolute;bottom:-10px;left:19px;border:6px solid transparent;border-top-color:#852e3f}#stageToast{position:absolute;top:50%;left:0;right:0;text-align:center;font-weight:900;font-size:20px;color:#ffda76;opacity:0;z-index:3;transition:opacity .15s}#stageToast.show{opacity:1}.overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:linear-gradient(#071b40eb 0%,#071b4033 40%,#071b4000 62%,#071b40f5 80%);padding:calc(env(safe-area-inset-top) + 45px) 25px calc(env(safe-area-inset-bottom) + 22px);text-align:center}.hidden{display:none!important}.edition{font-size:9px;letter-spacing:2px;color:#a4bad3}h1{font-size:clamp(60px,20vw,88px);letter-spacing:-4px;margin:15px 0 10px;font-weight:1000;color:#ffe4a1;line-height:1;transform:rotate(-4deg);text-shadow:5px 6px 0 #122b56}h1>span{color:#ffcb51}.title-dot{font-size:.6em}h3{font-size:17px;letter-spacing:2px;margin:10px 0}.start-bottom{width:100%}.start-bottom>p{font-size:12px;line-height:1.8}.action{background:#ffd05b;color:#202b40;font-size:20px;font-weight:900;border-radius:14px;width:100%;padding:19px 12px;box-shadow:0 5px 0 #b97729}.action:disabled{opacity:.65}.small{font-size:10px!important;color:#a6b8cc;line-height:1.6}details{font-size:10px;color:#829ab5;max-height:90px;overflow:auto;touch-action:pan-y;margin-top:10px}details div{padding:8px;line-height:1.7}a{color:#ffd260;display:block}#results{background:#061630ea;justify-content:center}.report{width:100%;border:1px solid #ffd2604a;background:#0c2340e8;border-radius:23px;padding:30px 22px}.report h2{font-size:33px}.report h3{font-size:15px;color:#ffd260}.result-total{padding:24px 0 17px}.result-total b{display:block;font-size:78px;line-height:1;font-weight:950;letter-spacing:-4px;color:#ffda76}.result-total span{font-size:12px;letter-spacing:3px}dl{font-size:12px;margin:15px 0 0}dl div{display:flex;justify-content:space-between;border-top:1px solid #ffffff12;padding:13px 0}dt{color:#a6bad0}dd{font-weight:700;margin:0}#newRecord{font-size:12px;color:#ffd260;min-height:16px}body.playing #start{display:none}body:not(.playing) #hud,body:not(.playing) #location,body:not(.playing) #tapZone{visibility:hidden}@media(max-height:680px){header{top:calc(env(safe-area-inset-top) + 9px)}.scoreline{margin-top:5px}#score{font-size:34px}.timer b{font-size:26px}#location{top:24%}#coo{height:78px}#tapZone{bottom:calc(env(safe-area-inset-bottom) + 8px)}.overlay{padding-top:calc(env(safe-area-inset-top) + 24px)}h1{font-size:64px}.report{padding:16px}.result-total{padding:12px}.result-total b{font-size:60px}dl div{padding:9px}}@media(min-width:700px){#game{box-shadow:0 0 100px #15336355}}

/* V1.1: each stage has one non-interactive comic rise. */
#bubble{right:auto;left:50%;top:45%;width:max-content;max-width:205px;padding:10px 13px;font-size:16px;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,0) scale(.2);transform-origin:50% 100%;transition:none;will-change:transform,opacity}
#bubble.show{animation:comic-rise .9s ease-out both}
@keyframes comic-rise{0%{opacity:0;transform:translate(-50%,4px) scale(.2) rotate(-5deg)}12%{opacity:1}18%{opacity:1;transform:translate(-50%,-24px) scale(1.2) rotate(3deg)}52%{opacity:1;transform:translate(-50%,-50px) scale(1.2) rotate(3deg)}68%{opacity:1;transform:translate(-50%,-58px) scale(1.16) rotate(-3deg)}82%{opacity:1;transform:translate(-50%,-64px) scale(1.2) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-80px) scale(1.12) rotate(-1deg)}}
#location{right:24px}#location h2{font-size:26px}#location .progress{width:165px;height:5px}.progress-label{font-size:10px;gap:9px}#stageHint{display:inline;color:#9fb7c7;font-size:9px}#roundTag{letter-spacing:1px}.report dl div{padding:11px 0}#stageToast{pointer-events:none}
@media(max-width:350px){#location h2{font-size:23px}.progress-label{font-size:9px}#stageHint{display:none}#bubble{font-size:14px}.report{padding:18px 15px}}
@media(max-height:680px){.report dl div{padding:7px 0}.report h3{margin:7px 0}.result-total{padding:8px}#newRecord{margin:7px 0}.report .action{padding:14px}#location .progress{width:150px}}

/* V1.2 protected result controls are above the report, far from the tapping zone. */
#mute{position:absolute;right:18px;top:calc(env(safe-area-inset-top) + 27px);z-index:7;width:34px;height:34px;background:#183c5b;border:1px solid #7d9baf66;border-radius:10px;font-size:18px;line-height:1}.timer{margin-right:42px}.showing-results #mute{visibility:hidden}
#results{justify-content:center;padding-top:calc(env(safe-area-inset-top) + 88px);padding-bottom:24px}.restart-button,.share-button{position:absolute;top:calc(env(safe-area-inset-top) + 22px);height:44px;border-radius:11px;z-index:6;font-size:12px;font-weight:800;padding:0 12px}.restart-button{right:18px;width:102px;background:#ffd05b;color:#253047;box-shadow:0 3px 0 #b97729}.share-button{left:18px;max-width:calc(100% - 155px);background:#244d6a;color:#ffe4a1;border:1px solid #9bb8c577}.restart-button:disabled,.share-button:disabled{opacity:.45;cursor:default}.report{padding:22px 20px}.report .result-total{padding:14px 0}.report .result-total b{font-size:70px}#resultLevel{font-size:11px}#shareStatus{min-height:16px}#bubble{max-width:220px;font-size:14px}#location h2{font-size:25px}
.share-preview{position:absolute;inset:0;z-index:20;background:#071b40f5;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 16px) 18px 16px;gap:10px;overflow:auto;touch-action:pan-y}.share-preview img{max-width:100%;max-height:70%;object-fit:contain;user-select:auto;-webkit-user-select:auto}.share-preview button,.share-preview a{padding:10px 18px;border-radius:10px;background:#ffd05b;color:#163149;font-size:13px;font-weight:800}.share-preview p{font-size:11px;color:#b6cbd8;margin:0}.share-preview button{align-self:flex-end}
@media(max-height:680px){#results{padding-top:75px}.report{padding:14px 15px}.report .result-total{padding:8px 0}.report .result-total b{font-size:54px}.report h2{font-size:28px}.report h3{font-size:14px}.report dl{margin-top:7px}.report dl div{padding:7px 0}.report .small{margin:6px 0}.report #newRecord{font-size:10px}.timer{margin-right:40px}#mute{top:calc(env(safe-area-inset-top) + 16px)}}
@media(max-width:350px){#location h2{font-size:22px}.share-button{left:13px;font-size:11px;padding:0 8px}.restart-button{right:13px;width:99px}#bubble{font-size:13px}}