@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Press+Start+2P&display=swap);.game-over-text,.hud-hearts,.hud-label{letter-spacing:.08em}#message-overlay,.hud,.question-box,.ui-layer{pointer-events:none}:root{--hud-bg:rgba(8, 14, 26, 0.68);--hud-border:rgba(120, 200, 255, 0.35);--hud-glow:rgba(120, 200, 255, 0.15);--accent-cyan:#66e8ff;--accent-gold:#ffd36a;--panel-dark:#0b1422;--panel-mid:#15243a;--text-soft:#c7d3ea}body,button{color:#fff;font-family:'Noto Sans TC',sans-serif}body{margin:0;overflow:hidden;background-color:#050510;touch-action:none}#game-container{position:relative;width:100vw;height:100vh;height:100svh;height:100dvh;display:flex;justify-content:center;align-items:center;background:radial-gradient(1200px 800px at 15% 20%,rgba(60,100,180,.2),transparent 60%),radial-gradient(800px 600px at 85% 15%,rgba(255,190,100,.12),transparent 60%),radial-gradient(900px 700px at 50% 80%,rgba(80,220,200,.12),transparent 60%),#050510}canvas{display:block;box-shadow:0 0 25px rgba(0,255,255,.12);border-radius:6px}.hud,.ui-layer{position:absolute;display:flex}.ui-layer{top:0;left:0;height:100%;flex-direction:column;justify-content:center;align-items:center}#message-overlay,.ui-layer{width:100%;text-align:center}.answer-zone,.cinematic-content,.menu{pointer-events:auto}.hud{top:16px;left:16px;right:16px;justify-content:space-between;gap:12px;z-index:10}.hud-panel{min-width:140px;padding:10px 14px;border-radius:12px;background:var(--hud-bg);border:1px solid var(--hud-border);box-shadow:0 0 18px var(--hud-glow);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:flex-start}.hud-panel.hud-right{align-items:flex-end}.hud-center{flex:1;display:flex;justify-content:center;align-items:flex-start}.hud-hearts{display:flex;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(12,20,34,.7);border:1px solid rgba(255,120,160,.45);box-shadow:0 0 18px rgba(255,80,120,.25),inset 0 0 10px rgba(255,120,160,.2);font-size:22px}.hud-heart{filter:drop-shadow(0 0 6px rgba(255, 120, 160, .6))}.hud-heart.is-empty{opacity:.3;filter:grayscale(1)}.hud-label{font-size:12px;color:var(--text-soft);text-transform:uppercase}.hud-value{font-size:24px;font-weight:900;color:#fff;text-shadow:0 0 12px rgba(0,0,0,.4)}.question-box{position:absolute;left:50%;transform:translateX(-50%);top:50px;background:rgba(0,0,0,.7);border:2px solid #0ff;padding:10px 30px;border-radius:20px;font-size:32px;font-weight:900;color:#0ff;box-shadow:0 0 15px #0ff;z-index:10}.menu{background:rgba(10,15,30,.9);padding:40px;border-radius:15px;border:2px solid #4a90e2;box-shadow:0 0 30px rgba(74,144,226,.5);transition:opacity .3s}h1{margin:0 0 20px;font-size:36px;background:linear-gradient(to right,#0ff,#f0f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 10px rgba(255,255,255,.3)}p{font-size:18px;color:#ccc;margin-bottom:30px}button{background:linear-gradient(135deg,#4a90e2,#03c);border:none;padding:15px 40px;font-size:24px;border-radius:50px;cursor:pointer;font-weight:700;box-shadow:0 5px 15px rgba(0,0,0,.5);transition:transform .1s,box-shadow .1s}button:hover{transform:scale(1.05);box-shadow:0 0 20px #4a90e2}button:active{transform:scale(.95)}.hidden{display:none!important}.game-over-text{font-family:'Press Start 2P','Noto Sans TC',sans-serif;font-size:52px;color:#f33;font-weight:900;text-shadow:4px 4px 0 #300;margin-bottom:10px;display:block}.game-over-cheer{font-size:22px;color:#aef;margin-bottom:12px;text-shadow:0 0 10px rgba(120,200,255,.35)}.game-over-encourage{font-size:18px;color:#ffeaa5;margin-bottom:24px}.score-display{font-size:28px;margin-bottom:18px;color:#ffdb4d}#message-overlay{position:absolute;top:18%;font-size:28px;font-weight:700;color:#ff0;text-shadow:0 0 8px rgba(0,0,0,.7);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .4s,transform .4s;letter-spacing:.02em}.cinematic-content{background:linear-gradient(135deg,#0a0e1a 0,#1a1a3e 100%);padding:50px;border-radius:20px;border:3px solid #0ff;box-shadow:0 0 50px rgba(0,255,255,.5);max-width:700px;animation:1s ease-in fadeIn}.answer-zone{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:20}.answer-prompt{padding:6px 16px;border-radius:999px;background:rgba(10,18,32,.75);border:1px solid rgba(102,232,255,.35);color:var(--accent-cyan);font-size:14px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 12px rgba(102,232,255,.2)}.answer-buttons{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:12px;width:min(95%,680px)}.answer-btn{background:linear-gradient(145deg,var(--panel-mid),var(--panel-dark));border:1px solid rgba(120,190,255,.35);color:#fff;font-size:22px;font-weight:700;padding:18px 10px;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 6px 12px rgba(0,0,0,.35);position:relative;overflow:hidden;font-family:'Noto Sans TC',sans-serif;min-height:58px}.level-complete-screen,.victory-screen{box-shadow:0 0 60px rgba(255,255,0,.8);text-align:center;pointer-events:auto}.answer-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 45%);opacity:0;transition:opacity .2s}.answer-btn:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 10px 18px rgba(0,170,255,.2);border-color:var(--accent-cyan)}.answer-btn:hover::before{opacity:1}.answer-btn:active{transform:translateY(0)}.answer-btn.is-selected{transform:translateY(-2px) scale(1.02);border-color:rgba(255,211,106,.7);box-shadow:0 8px 16px rgba(255,211,106,.25)}.answer-btn.is-correct{background:linear-gradient(145deg,#1f5a3a,#11321f);border-color:#35f7a2;color:#e7fff6;box-shadow:0 0 18px rgba(53,247,162,.45)}.answer-btn.is-wrong{background:linear-gradient(145deg,#4b1c1c,#2b0f0f);border-color:#ff6b6b;color:#ffecec;animation:.35s shake}.answer-btn:disabled{opacity:.75;cursor:not-allowed}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}.story-text h2{font-size:42px;margin:0 0 30px;color:#f33;text-shadow:0 0 20px red;animation:2s infinite pulse}.story-text p{font-size:24px;line-height:1.8;margin:15px 0;color:#fff}.story-text .highlight{color:#ff0;font-weight:900;text-shadow:0 0 10px #ff0}.click-hint{margin-top:40px;font-size:20px;color:#0ff;animation:1.5s infinite blink}.victory-screen{max-width:600px;background:linear-gradient(135deg,#1a0a3e 0,#3a1a5e 100%);padding:40px;border-radius:20px;border:3px solid #ff0;animation:.8s ease-out victoryAppear}.fireworks{font-size:48px;margin:20px 0;animation:2s infinite fireworksSpin}.victory-message{margin:30px 0;animation:.6s ease-out slideUp}.final-score-big{background:rgba(0,0,0,.5);padding:30px;border-radius:15px;margin:20px 0;animation:2s infinite pulse}.level-complete-screen{background:linear-gradient(135deg,#1a0a3e 0,#3a1a5e 100%);padding:30px;border-radius:20px;border:3px solid #ff0;animation:.8s ease-out levelCompleteAppear;max-width:90%;max-height:90vh;overflow-y:auto}@keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}@keyframes blink{0%,100%,50%{opacity:1}25%,75%{opacity:.3}}@keyframes victoryAppear{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes fireworksSpin{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes levelCompleteAppear{from{opacity:0;transform:scale(.6) translateY(-50px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:768px){.cinematic-content{padding:30px;max-width:90%}.story-text h2{font-size:32px}.answer-btn,.hud-hearts,.story-text p{font-size:18px}h1{font-size:28px}.menu{padding:30px 20px}.answer-btn{padding:16px 6px;min-height:52px}.hud{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));gap:8px;flex-wrap:wrap;align-items:flex-start}.hud-panel{min-width:0;flex:1 1 120px;padding:8px 10px}.hud-panel.hud-right{align-items:flex-end;text-align:right}.hud-center{order:3;width:100%;justify-content:center}.hud-value{font-size:20px}.question-box{top:calc(110px + env(safe-area-inset-top));max-width:90%;font-size:26px;padding:8px 20px}.final-score-big div:nth-child(2),.victory-screen h1{font-size:48px!important}.victory-screen p{font-size:24px!important}}@media (max-width:640px){.hud{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;grid-template-areas:"score hearts level";gap:6px 10px;align-items:start}.hud-left{grid-area:score;justify-self:start}.hud-right{grid-area:level;justify-self:end}.hud-center,.hud-panel{justify-content:center}.hud-center{grid-area:hearts;width:100%}.hud-panel{width:fit-content;max-width:100%;padding:6px 8px;min-width:0;min-height:68px}.hud-hearts{padding:6px 12px;font-size:18px;justify-content:center}.hud-left,.hud-right{max-width:48%}}@media (max-width:420px){#game-container{height:100svh;height:100dvh}.hud{gap:6px 8px}.hud-center,.hud-panel{width:100%}.hud-panel{flex:0 0 auto;padding:6px 10px}.hud-left{align-items:flex-start;text-align:left}.hud-right{align-items:flex-end;text-align:right}.hud-center{order:3;justify-content:center}.hud-hearts{justify-content:center}.hud-value{font-size:18px}.question-box{top:clamp(140px,20vh,220px);font-size:22px;padding:8px 16px}.answer-buttons{width:min(96%,520px);gap:10px}.answer-btn{font-size:18px;padding:14px 6px;min-height:48px}}