:root{--frame-border: 10px;--frame-radius: 32px;--frame-blue: #0a1a4a;--frame-blue-light: #1a3a8a;--shell-bg: #050a18;--phone-width: min(420px, calc(100vw - 28px) );--phone-height: min(920px, calc(100dvh - 28px) , calc(var(--phone-width) * 19.5 / 9));--score-jump-scale: 1.3;--girl-sprite-x: -100px;--girl-sprite-y: -20px;--cat-sprite-x: -60px;--cat-sprite-y: -20px}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html{width:100%;height:100%;overflow:hidden;background:var(--shell-bg)}body{margin:0;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(26,58,138,.22),transparent 70%),radial-gradient(ellipse 100% 80% at 50% 100%,rgba(10,26,74,.35),transparent 60%),var(--shell-bg);font-family:Segoe UI,PingFang TC,Noto Sans TC,sans-serif;display:flex;align-items:center;justify-content:center}#device-shell{position:relative;padding:14px;filter:drop-shadow(0 0 18px rgba(48,108,211,.28)) drop-shadow(0 0 42px rgba(26,58,138,.22)) drop-shadow(0 0 64px rgba(10,26,74,.35))}#device-frame{width:var(--phone-width);height:var(--phone-height);border:var(--frame-border) solid var(--frame-blue);border-radius:var(--frame-radius);background:var(--frame-blue);box-shadow:0 0 0 1px #ffffff0f,0 0 24px #306cd333,inset 0 0 18px #00000040;overflow:hidden;position:relative}#app{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--frame-radius) - var(--frame-border));background:#0b1220}#game{display:block;width:100%;height:100%;touch-action:none;-webkit-user-drag:none}#top-controls{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:8;display:flex;align-items:center;gap:8px;pointer-events:none}#top-controls>*{pointer-events:auto}#quiz-exit-btn{width:36px;height:36px;padding:0;border:1.5px solid rgba(255,255,255,.92);border-radius:10px;background:#fff3;display:grid;place-items:center;touch-action:manipulation}#quiz-exit-btn.hidden{display:none!important}.quiz-exit-arrow{width:10px;height:10px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg);margin-left:6px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}#sound-btn{width:36px;height:36px;border:none;border-radius:8px;background:transparent;display:grid;place-items:center;opacity:.8;touch-action:manipulation}#sound-btn img{width:36px;height:36px;object-fit:contain;pointer-events:none;-webkit-user-drag:none;mix-blend-mode:screen}#sound-btn:active,#quiz-exit-btn:active{transform:scale(.94);filter:brightness(1.08)}#hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}#scoreboard{display:flex;flex-direction:column;align-items:center;gap:2px}#score-digits{display:flex;align-items:flex-end;justify-content:center;gap:0;min-height:28px;padding:0;background:transparent;transform:translateZ(0) scale(1);transform-origin:center center;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}#score-digits.is-jumping{animation:score-jump-up .4s cubic-bezier(.34,1.7,.45,1) forwards}#score-digits.is-landing{animation:score-jump-down .5s cubic-bezier(.34,1.7,.45,1) forwards}@keyframes score-jump-up{0%{transform:translateZ(0) scale(1)}55%{transform:translateZ(0) scale(calc(var(--score-jump-scale) * 1.12))}to{transform:translateZ(0) scale(var(--score-jump-scale))}}@keyframes score-jump-down{0%{transform:translateZ(0) scale(var(--score-jump-scale))}55%{transform:translateZ(0) scale(.88)}78%{transform:translateZ(0) scale(1.08)}to{transform:translateZ(0) scale(1)}}.score-digit{display:block;flex:0 0 auto;margin:0 -1px;background-repeat:no-repeat;background-color:transparent;mix-blend-mode:screen;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}#status{padding:6px 12px;border-radius:999px;background:#080e1c8c;color:#f4f7ff;font-size:12px;letter-spacing:.02em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}body.quiz-mode #status{display:none}#stick{--stick-size: 148px;--knob-size: 58px;position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));z-index:3;width:var(--stick-size);height:var(--stick-size)}#stick-base{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.92);background:#0c122047;box-shadow:0 10px 28px #00000047}#stick-knob{position:absolute;top:50%;left:50%;width:var(--knob-size);height:var(--knob-size);margin-left:calc(var(--knob-size) / -2);margin-top:calc(var(--knob-size) / -2);border-radius:50%;border:2px solid rgba(255,236,200,.85);background:radial-gradient(circle at 35% 30%,#ffd36a,#ff8a1f 58%,#e25a00);box-shadow:0 8px 18px #00000059,inset 0 1px #fff6;will-change:transform}#jump-btn{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(36px,env(safe-area-inset-bottom));z-index:3;width:92px;height:92px;border:2px solid rgba(255,255,255,.35);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd36a,#ff8a1f 58%,#e25a00);color:#fff8ef;font-size:16px;font-weight:700;letter-spacing:.02em;box-shadow:0 10px 28px #00000059,inset 0 1px #ffffff59}#jump-btn:active,#jump-btn.is-active{transform:scale(.94);filter:brightness(1.08)}#dialog{position:absolute;left:50%;bottom:max(150px,calc(env(safe-area-inset-bottom) + 140px));transform:translate(-50%);z-index:5;width:min(86%,360px);padding:16px 16px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.28);background:#fffcf5f0;color:#243047;box-shadow:0 14px 36px #00000047;text-align:center;touch-action:manipulation}#dialog.hidden,#quiz.hidden,.hidden{display:none!important}#dialog-text{margin:0 0 14px;font-size:17px;line-height:1.45;font-weight:600}.dialog-actions{display:flex;gap:10px;justify-content:center}#dialog-yes,#dialog-no,#quiz-close{min-width:96px;padding:10px 22px;border:none;border-radius:999px;background:#306cd3;color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;touch-action:manipulation}#dialog-no.btn-secondary{background:#6b7385}#dialog-yes:active,#dialog-no:active,#quiz-close:active,.quiz-option:active{transform:scale(.96);filter:brightness(1.06)}#quiz{position:absolute;inset:0;transform:none;z-index:6;width:100%;max-width:none;height:100%;max-height:none;overflow-x:hidden;overflow-y:auto;padding:max(88px,calc(env(safe-area-inset-top) + 76px)) 14px max(14px,env(safe-area-inset-bottom));border:none;border-radius:0;background:transparent;box-shadow:none;color:#fff;touch-action:manipulation;box-sizing:border-box}#quiz-progress{margin-bottom:8px;font-size:13px;font-weight:700;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.7)}#quiz-question{margin:0 0 16px;color:#fff;font-size:32px;line-height:1.4;font-weight:800;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 3px 8px rgba(0,0,0,.75)}#quiz-options{display:grid;gap:22px}.quiz-option{--base-hue: 0;--option-glow: hsl(var(--base-hue), 90%, 55%);position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px 12px 12px;border:1px solid hsl(var(--base-hue),90%,55%);border-radius:14px;background:hsla(var(--base-hue),90%,55%,.2);color:#fff;font-size:28px;line-height:1.35;text-align:left;touch-action:manipulation;overflow:visible;isolation:isolate;box-shadow:0 0 10px 2px color-mix(in srgb,var(--option-glow) 55%,transparent),0 0 22px 6px color-mix(in srgb,var(--option-glow) 35%,transparent);animation:quiz-option-rainbow 8s linear infinite}.quiz-answer-mark{position:absolute;top:50%;height:200%;width:auto;max-width:none;object-fit:contain;pointer-events:none;z-index:20;transform:translateY(-50%) scale(1.85);transform-origin:center center;animation:answer-mark-pop .2s ease-out forwards,answer-mark-sway 1s ease-in-out .2s infinite alternate}.quiz-answer-mark--correct{right:12px;left:auto}.quiz-answer-mark--wrong{left:52px;right:auto}.quiz-option-a{--base-hue: 0}.quiz-option-b{--base-hue: 90}.quiz-option-c{--base-hue: 180}.quiz-option-d{--base-hue: 270}@keyframes quiz-option-rainbow{0%{border-color:hsl(var(--base-hue),90%,55%);background-color:hsla(var(--base-hue),90%,55%,.5);box-shadow:0 0 10px 2px hsla(var(--base-hue),90%,55%,.55),0 0 22px 6px hsla(var(--base-hue),90%,55%,.35)}25%{border-color:hsl(calc(var(--base-hue) + 90),90%,55%);background-color:hsla(calc(var(--base-hue) + 90),90%,55%,.5);box-shadow:0 0 10px 2px hsla(calc(var(--base-hue) + 90),90%,55%,.55),0 0 22px 6px hsla(calc(var(--base-hue) + 90),90%,55%,.35)}50%{border-color:hsl(calc(var(--base-hue) + 180),90%,55%);background-color:hsla(calc(var(--base-hue) + 180),90%,55%,.5);box-shadow:0 0 10px 2px hsla(calc(var(--base-hue) + 180),90%,55%,.55),0 0 22px 6px hsla(calc(var(--base-hue) + 180),90%,55%,.35)}75%{border-color:hsl(calc(var(--base-hue) + 270),90%,55%);background-color:hsla(calc(var(--base-hue) + 270),90%,55%,.5);box-shadow:0 0 10px 2px hsla(calc(var(--base-hue) + 270),90%,55%,.55),0 0 22px 6px hsla(calc(var(--base-hue) + 270),90%,55%,.35)}to{border-color:hsl(calc(var(--base-hue) + 360),90%,55%);background-color:hsla(calc(var(--base-hue) + 360),90%,55%,.5);box-shadow:0 0 10px 2px hsla(calc(var(--base-hue) + 360),90%,55%,.55),0 0 22px 6px hsla(calc(var(--base-hue) + 360),90%,55%,.35)}}.quiz-option-letter{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:hsl(var(--base-hue),95%,55%);box-shadow:0 2px 8px #00000059;animation:quiz-letter-rainbow 8s linear infinite}@keyframes quiz-letter-rainbow{0%{background-color:hsl(var(--base-hue),95%,55%)}25%{background-color:hsl(calc(var(--base-hue) + 90),95%,55%)}50%{background-color:hsl(calc(var(--base-hue) + 180),95%,55%)}75%{background-color:hsl(calc(var(--base-hue) + 270),95%,55%)}to{background-color:hsl(calc(var(--base-hue) + 360),95%,55%)}}.quiz-option-letter-text{color:#fff;font-size:20px;font-weight:800;line-height:1;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.7)}.quiz-option-text{flex:1;color:#fff;font-weight:700;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 2px 4px rgba(0,0,0,.55)}.quiz-option.is-correct{border-color:#7dff9a!important;border-width:3px;background:#7dff9acc!important;box-shadow:0 0 12px 3px #7dff9aa6,0 0 28px 8px #7dff9a66;animation:quiz-correct-heartbeat 1s ease-in-out infinite;z-index:3;transform-origin:center center}.quiz-option.is-wrong{border-color:#d64545!important;background:#d6454559!important;box-shadow:0 0 12px 3px #d64545a6,0 0 28px 8px #d6454566;animation:none;z-index:3}@keyframes quiz-correct-heartbeat{0%,to{background-color:#7dff9acc!important;box-shadow:0 0 12px 3px #7dff9a8c,0 0 24px 6px #7dff9a59;transform:scale(1)}14%{background-color:#7dff9acc!important;box-shadow:0 0 16px 5px #7dff9acc,0 0 32px 10px #7dff9a80;transform:scale(1.045)}28%{background-color:#7dff9acc!important;box-shadow:0 0 12px 3px #7dff9a8c,0 0 24px 6px #7dff9a59;transform:scale(1)}42%{background-color:#7dff9acc!important;box-shadow:0 0 14px 4px #7dff9ab3,0 0 28px 8px #7dff9a73;transform:scale(1.03)}56%{background-color:#7dff9acc!important;box-shadow:0 0 12px 3px #7dff9a8c,0 0 24px 6px #7dff9a59;transform:scale(1)}}@keyframes answer-mark-pop{0%{transform:translateY(-50%) scale(1.85) rotate(0)}to{transform:translateY(-50%) scale(1) rotate(0)}}@keyframes answer-mark-sway{0%{transform:translateY(-50%) scale(1) rotate(-5deg)}to{transform:translateY(-50%) scale(1) rotate(5deg)}}.quiz-option:disabled{opacity:.95}.quiz-option.is-correct .quiz-option-letter,.quiz-option.is-wrong .quiz-option-letter{animation:none}.quiz-option.is-correct .quiz-option-letter{background:#7dff9a}.quiz-option.is-wrong .quiz-option-letter{background:#d64545}#quiz-feedback{text-align:center}#quiz-summary{margin-top:14px;text-align:center}#quiz-actions{position:absolute;left:14px;right:14px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));z-index:8;display:flex;justify-content:center;pointer-events:none}#quiz-next,#quiz-explain-btn{pointer-events:auto;min-width:200px;min-height:64px;padding:18px 40px;border:3px solid hsl(0,90%,55%);border-radius:999px;background:linear-gradient(135deg,#fa2e2ee6,#f9f91fbf,#1ff91fd9);color:#fff;font-size:24px;font-weight:800;letter-spacing:.06em;touch-action:manipulation;transform-origin:center center;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.55);box-shadow:0 0 12px 3px #f42525a6,0 0 28px 8px #f4252566;animation:quiz-action-rainbow 4s linear infinite,quiz-action-heartbeat 1s ease-in-out infinite}#quiz-next:active,#quiz-explain-btn:active{filter:brightness(1.08)}@keyframes quiz-action-rainbow{0%{border-color:#f42525;background:linear-gradient(135deg,#fa2e2eeb,#f9f91fbf,#1ff91fd9);box-shadow:0 0 12px 3px #f42525a6,0 0 28px 8px #f4252566}25%{border-color:#8cf425;background:linear-gradient(135deg,#8cf91feb,#1ff98cbf,#2e94fad9);box-shadow:0 0 12px 3px #8cf425a6,0 0 28px 8px #8cf42566}50%{border-color:#25f4f4;background:linear-gradient(135deg,#1ff9f9eb,#2e2efabf,#f91ff9d9);box-shadow:0 0 12px 3px #25f4f4a6,0 0 28px 8px #25f4f466}75%{border-color:#8c25f4;background:linear-gradient(135deg,#942efaeb,#f91f8cbf,#f98c1fd9);box-shadow:0 0 12px 3px #8c25f4a6,0 0 28px 8px #8c25f466}to{border-color:#f42525;background:linear-gradient(135deg,#fa2e2eeb,#f9f91fbf,#1ff91fd9);box-shadow:0 0 12px 3px #f42525a6,0 0 28px 8px #f4252566}}@keyframes quiz-action-heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(1)}42%{transform:scale(1.05)}56%{transform:scale(1)}}#quiz-explanation-box{margin:8px 0 72px;padding:16px 18px;border-radius:16px;border:2px solid hsl(0,90%,55%);background:#f425251a;box-shadow:0 0 12px 3px #f42525a6,0 0 28px 8px #f4252566;animation:quiz-explain-rainbow 8s linear infinite}#quiz-explanation{margin:0;color:#fff;font-size:32px;font-weight:800;line-height:1.45;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 3px 8px rgba(0,0,0,.75)}@keyframes quiz-explain-rainbow{0%{border-color:#f42525;background-color:#f42525b3;box-shadow:0 0 12px 3px #f42525a6,0 0 28px 8px #f4252566}25%{border-color:#8cf425;background-color:#8cf425b3;box-shadow:0 0 12px 3px #8cf425a6,0 0 28px 8px #8cf42566}50%{border-color:#25f4f4;background-color:#25f4f4b3;box-shadow:0 0 12px 3px #25f4f4a6,0 0 28px 8px #25f4f466}75%{border-color:#8c25f4;background-color:#8c25f4b3;box-shadow:0 0 12px 3px #8c25f4a6,0 0 28px 8px #8c25f466}to{border-color:#f42525;background-color:#f42525b3;box-shadow:0 0 12px 3px #f42525a6,0 0 28px 8px #f4252566}}#quiz-score{margin:0 0 12px;font-size:24px;line-height:1.45;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.55)}body.ui-lock #stick,body.ui-lock #jump-btn{opacity:.35;pointer-events:none}body.quiz-mode #stick,body.quiz-mode #jump-btn{display:none!important;pointer-events:none}#quiz-actors{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}#quiz-actors.hidden{display:none!important}#fireworks-layer{position:absolute;inset:0;z-index:12;width:100%;height:100%;pointer-events:none}.quiz-sprite{position:absolute;transform-origin:50% 100%;will-change:transform;overflow:hidden}#girl-sprite{left:calc(env(safe-area-inset-left,0px) + var(--girl-sprite-x));bottom:calc(env(safe-area-inset-bottom,0px) + var(--girl-sprite-y));animation:quiz-sprite-sway 1s ease-in-out infinite alternate;overflow:visible}#girl-sprite .quiz-sprite-art{transform-origin:50% 0%}#cat-sprite{right:calc(env(safe-area-inset-right,0px) + var(--cat-sprite-x));bottom:calc(env(safe-area-inset-bottom,0px) + var(--cat-sprite-y));animation:quiz-sprite-sway 1s ease-in-out infinite alternate-reverse;animation-delay:-.9s}.quiz-sprite-art{position:absolute;background-repeat:no-repeat;transform-origin:50% 100%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));will-change:transform}.quiz-sprite-art.is-popping{animation:quiz-sprite-pop .2s ease-out}@keyframes quiz-sprite-sway{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}@keyframes quiz-sprite-pop{0%{transform:scale(1.2)}to{transform:scale(1)}}#rotate-lock{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#050a18eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);touch-action:none}.rotate-lock-card{text-align:center;padding:28px 32px;border-radius:20px;border:2px solid var(--frame-blue-light);background:#0a1a4ad9;box-shadow:0 0 32px #306cd359;color:#f4f7ff}.rotate-lock-card p{margin:0 0 8px;font-size:20px;font-weight:700}.rotate-lock-card span{font-size:14px;color:#f4f7ffbf}body.landscape-blocked #device-shell{visibility:hidden;pointer-events:none}@media(max-width:768px)and (orientation:portrait){:root{--phone-width: calc(100vw - 16px) ;--phone-height: calc(100dvh - 16px) ;--frame-radius: 28px;--frame-border: 8px}#device-shell{padding:8px}#stick{--stick-size: 128px;--knob-size: 50px}#jump-btn{width:80px;height:80px;font-size:13px;right:max(18px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom))}}@media(max-width:480px)and (orientation:portrait){#stick{--stick-size: 120px;--knob-size: 46px}}