:root{--font-main:'Fredoka','Quicksand',-apple-system,sans-serif;--color-meadow-green:#5eb852;--color-meadow-dark:#3e8835;--color-sky-blue:#70d6ff;--color-sun-yellow:#ffd166;--color-sunset-orange:#f77f00;--color-bright-pink:#ff70a6;--color-soft-cream:#fff9ea;--color-text-dark:#2c3e50;--color-card-bg:rgba(255,255,255,0.95);--shadow-playful:0 8px 24px rgba(46,125,50,0.18);--shadow-button:0 6px 0px #357a2b;--shadow-button-active:0 2px 0px #357a2b;--radius-lg:24px;--radius-md:16px;--radius-pill:999px}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{font-family:var(--font-main);background:linear-gradient(180deg,#8ae9b3 0%,#48bb78 50%,#2f855a 100%);color:var(--color-text-dark);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;touch-action:manipulation}#app-container{width:100%;max-width:640px;height:100vh;max-height:940px;display:flex;flex-direction:column;position:relative;background:#f4fbf4;box-shadow:0 12px 40px rgba(0,0,0,0.25);overflow:hidden}@media (min-width:641px){#app-container{height:96vh;border-radius:var(--radius-lg);border:4px solid #fff}}.screen{display:none;width:100%;height:100%;flex-direction:column}.screen.active{display:flex}#welcome-screen{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:radial-gradient(circle at 50% 30%,#e8fbee 0%,#c4f1d2 100%);padding:16px 14px}#welcome-screen.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.welcome-card{width:100%;max-width:440px;margin:auto;background:var(--color-card-bg);border-radius:var(--radius-lg);padding:22px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow-playful);border:4px solid #ffffff;animation:popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}@keyframes popIn{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}.mascot-badge{position:relative;width:72px;height:72px;background:linear-gradient(135deg,#ffd166 0%,#f77f00 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 12px rgba(247,127,0,0.3);margin-bottom:8px;animation:bobble 3s ease-in-out infinite alternate}@keyframes bobble{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-5px) rotate(3deg)}}.mascot-emoji{font-size:42px}.sparkle-decor{position:absolute;top:-4px;right:-4px;font-size:20px;animation:sparkleTwinkle 2s infinite ease-in-out}@keyframes sparkleTwinkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.25) rotate(15deg)}}.game-title{font-size:2rem;font-weight:700;color:#2b7a2d;text-shadow:2px 2px 0px #d4edda;letter-spacing:-0.5px;margin-bottom:2px}.subtitle{font-size:0.95rem;color:#557258;font-weight:500;margin-bottom:14px}.input-group{width:100%;text-align:left;margin-bottom:14px}.input-group label{display:block;font-weight:600;font-size:0.88rem;color:#3d5a41;margin-bottom:4px}.name-input-wrapper{display:flex;gap:8px}#player-name-input{flex:1;font-family:var(--font-main);font-size:1.15rem;font-weight:600;color:#245129;padding:10px 14px;border:3px solid #b7e4c7;border-radius:var(--radius-md);background:#ffffff;outline:none;transition:all 0.2s ease}#player-name-input:focus{border-color:#52b788;box-shadow:0 0 0 4px rgba(82,183,136,0.25)}.btn-icon{width:48px;height:48px;background:#e8f5e9;border:3px solid #b7e4c7;border-radius:var(--radius-md);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s ease,background 0.2s}.btn-icon:hover{background:#c8e6c9;transform:rotate(20deg) scale(1.08)}.btn-icon:active{transform:scale(0.95)}.config-section{width:100%;margin-bottom:14px;text-align:left}.config-header{font-size:0.88rem;font-weight:700;color:#3d5a41;margin-bottom:6px}.character-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.char-option{background:#ffffff;border:3px solid #e0ebd8;border-radius:var(--radius-md);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;transition:all 0.18s ease}.char-option:hover{border-color:#52b788;transform:translateY(-2px);box-shadow:0 4px 10px rgba(82,183,136,0.2)}.char-option.active{border-color:#2e7d32;background:#f0fff4;box-shadow:0 4px 14px rgba(46,125,50,0.25);transform:translateY(-2px)}.char-icon{font-size:1.75rem}.char-name{font-size:0.74rem;font-weight:700;color:#2d3748}.char-badge{font-size:0.62rem;font-weight:700;padding:2px 6px;border-radius:var(--radius-pill);background:#edf2f7;color:#718096;transition:background 0.2s,color 0.2s}.char-option.active .char-badge{background:#2e7d32;color:#ffffff}.operation-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.op-option{background:#ffffff;border:3px solid #e0ebd8;border-radius:var(--radius-md);padding:6px 3px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;position:relative;transition:all 0.18s ease}.op-option:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 10px rgba(59,130,246,0.2)}.op-option.active{border-color:#2563eb;background:#eff6ff;box-shadow:0 4px 14px rgba(37,99,235,0.25);transform:translateY(-2px)}.op-icon{font-size:1.4rem}.op-name{font-size:0.7rem;font-weight:700;color:#1e293b}.op-pill{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.btn-primary{width:100%;font-family:var(--font-main);font-size:1.25rem;font-weight:700;color:#ffffff;background:linear-gradient(180deg,#5ec351 0%,#43a047 100%);border:none;border-radius:var(--radius-pill);padding:13px 20px;cursor:pointer;box-shadow:0 5px 0px #2e7d32,0 8px 16px rgba(46,125,50,0.3);display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.12s ease;letter-spacing:0.5px}.btn-primary:hover{background:linear-gradient(180deg,#69d15b 0%,#48ab4c 100%);transform:translateY(-2px);box-shadow:0 7px 0px #2e7d32,0 12px 20px rgba(46,125,50,0.35)}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0px #2e7d32}.instructions-hint{margin-top:10px;font-size:0.8rem;color:#557258}#game-screen{position:relative;background:#4caf50;height:100%}.game-hud{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#ffffff;border-bottom:3px solid #d4edda;box-shadow:0 4px 12px rgba(0,0,0,0.05);z-index:10;gap:6px;min-height:48px}.hud-left,.hud-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.hud-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--radius-pill);font-size:0.86rem;font-weight:700;background:#f0fff4;border:2px solid #c6f6d5}.player-pill{color:#276749;max-width:155px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-pill{background:#fffaf0;border-color:#feebc8;color:#c05621;padding:4px 8px}.score-pill{background:#ebf8ff;border-color:#bee3f8;color:#2b6cb0;padding:4px 9px;font-size:0.92rem;transition:transform 0.2s cubic-bezier(0.175,0.885,0.32,1.275)}.score-pulse{animation:pulseScore 0.3s ease-out}@keyframes pulseScore{0%{transform:scale(1)}50%{transform:scale(1.22);color:#d69e2e}100%{transform:scale(1)}}.btn-icon-hud{width:34px;height:34px;border-radius:50%;border:2px solid #e2e8f0;background:#edf2f7;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s ease,background 0.15s}.btn-icon-hud:hover{background:#e2e8f0;transform:scale(1.08)}.streak-container{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}.streak-label{font-size:0.65rem;font-weight:800;color:#557258;text-transform:uppercase;letter-spacing:0.5px}.streak-stars{display:flex;gap:2px;font-size:0.95rem}.star-slot{display:inline-block;transition:transform 0.2s ease}.star-slot.filled,.star-slot.half-filled{animation:starPop 0.3s ease}.half-star-wrap{position:relative;display:inline-block;line-height:1;vertical-align:middle}.half-star-wrap .star-bg{display:inline-block;opacity:0.85}.half-star-wrap .star-fg{position:absolute;left:0;top:0;width:50%;overflow:hidden;display:inline-block;white-space:nowrap}@keyframes starPop{0%{transform:scale(0.6)}60%{transform:scale(1.35)}100%{transform:scale(1)}}.question-banner-wrap{position:absolute;top:56px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:20;pointer-events:none;padding:0 10px}.question-banner{pointer-events:auto;background:linear-gradient(135deg,#ffd166 0%,#fca311 100%);border:4px solid #ffffff;border-radius:var(--radius-pill);padding:4px 12px;box-shadow:0 8px 24px rgba(0,0,0,0.22);display:flex;align-items:center;gap:8px;animation:bannerBob 3s ease-in-out infinite alternate}.question-banner .op-pill{background:#ffffff;border:2px solid #3b82f6;color:#1d4ed8;padding:2px 8px;font-size:0.78rem;font-weight:700;border-radius:var(--radius-pill);box-shadow:0 2px 4px rgba(0,0,0,0.08)}@keyframes bannerBob{from{transform:translateY(0)}to{transform:translateY(3px)}}.q-prefix{font-size:0.95rem;font-weight:700;color:#78350f;text-transform:uppercase;letter-spacing:0.5px}.q-expression{font-size:1.55rem;font-weight:700;color:#451a03;letter-spacing:1px}.typing-box{background:#ffffff;border:3px solid #b45309;border-radius:14px;padding:2px 8px;display:flex;align-items:center;gap:6px;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);transition:all 0.2s ease}.typing-box.active{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.3)}.typed-val{font-size:1.6rem;font-weight:800;color:#1e293b;min-width:32px;text-align:center;letter-spacing:1px}.typed-val.placeholder{color:#94a3b8;animation:blinkCursor 1.2s infinite}@keyframes blinkCursor{0%,100%{opacity:0.3}50%{opacity:1}}.btn-submit-type{width:30px;height:30px;border-radius:50%;border:none;background:linear-gradient(180deg,#10b981 0%,#059669 100%);color:#ffffff;font-size:1.1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:transform 0.1s,background 0.15s}.btn-submit-type:hover{transform:scale(1.1);background:#059669}.btn-submit-type:active{transform:scale(0.92)}.typing-box.shake{animation:shakeInput 0.4s ease;border-color:#ef4444}@keyframes shakeInput{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}.speed-bonus-badge{background:linear-gradient(135deg,#10b981 0%,#047857 100%);color:#ffffff;border:2px solid #ffffff;border-radius:var(--radius-pill);padding:4px 10px;display:flex;align-items:center;gap:4px;font-size:0.8rem;font-weight:700;box-shadow:0 4px 10px rgba(16,185,129,0.35);animation:pulseGlow 1.8s infinite alternate}@keyframes pulseGlow{0%{transform:scale(0.98);box-shadow:0 2px 6px rgba(16,185,129,0.3)}100%{transform:scale(1.04);box-shadow:0 4px 12px rgba(16,185,129,0.6)}}.bonus-icon{font-size:0.95rem}.bonus-text strong{font-size:0.95rem;color:#fef08a}.reveal-hint-pill{background:#ffffff;border:3px solid #10b981;border-radius:var(--radius-pill);padding:6px 18px;font-size:0.95rem;font-weight:700;color:#065f46;box-shadow:0 6px 20px rgba(16,185,129,0.35);display:flex;align-items:center;gap:8px;animation:revealPop 0.35s cubic-bezier(0.175,0.885,0.32,1.275);pointer-events:auto}.reveal-hint-pill.hidden{display:none}.reveal-hint-pill strong{color:#047857;font-size:1.15rem}@keyframes revealPop{from{transform:translateY(-8px) scale(0.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.canvas-viewport{flex:1;width:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#4caf50;padding:4px}#game-canvas{max-width:100%;max-height:100%;aspect-ratio:4 / 5;display:block;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.12)}.game-controls-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#ffffff;border-top:3px solid #d4edda;z-index:10;gap:12px}.btn-steer{flex:1;max-width:135px;background:linear-gradient(180deg,#e8f5e9 0%,#c8e6c9 100%);border:3px solid #81c784;border-radius:var(--radius-md);padding:9px 8px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:0 4px 0px #4caf50;transition:all 0.1s ease}.btn-steer:hover{background:linear-gradient(180deg,#f1f8e9 0%,#dcedc8 100%)}.btn-steer:active{transform:translateY(3px);box-shadow:0 1px 0px #4caf50}.steer-arrow{font-size:1.4rem}.steer-hint{font-size:0.8rem;font-weight:700;color:#2e7d32}.controls-status{flex:1;text-align:center;font-size:0.85rem;font-weight:600;color:#557258}.btn-slow{background:linear-gradient(180deg,#e0f2fe 0%,#bae6fd 100%);border-color:#38bdf8;box-shadow:0 4px 0px #0284c7}.btn-slow:hover{background:linear-gradient(180deg,#f0f9ff 0%,#bae6fd 100%)}.btn-slow:active,.btn-slow.active{transform:translateY(3px);box-shadow:0 1px 0px #0284c7;background:#7dd3fc}.btn-slow .steer-hint{color:#0369a1}.btn-sprint{background:linear-gradient(180deg,#fef9c3 0%,#fef08a 100%);border-color:#eab308;box-shadow:0 4px 0px #ca8a04}.btn-sprint:hover{background:linear-gradient(180deg,#fefce8 0%,#fef08a 100%)}.btn-sprint:active,.btn-sprint.active{transform:translateY(3px);box-shadow:0 1px 0px #ca8a04;background:#facc15}.btn-sprint .steer-hint{color:#854d0e}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:99;transition:opacity 0.3s ease}.modal-overlay.hidden{display:none}.modal-card{width:100%;max-width:400px;background:#ffffff;border-radius:var(--radius-lg);padding:32px 24px;text-align:center;border:4px solid #ffd166;box-shadow:0 16px 40px rgba(0,0,0,0.3);animation:modalBounce 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}@keyframes modalBounce{from{transform:scale(0.7);opacity:0}to{transform:scale(1);opacity:1}}.modal-confetti-emoji{font-size:2.8rem;margin-bottom:8px}#modal-title{font-size:2rem;color:#f77f00;font-weight:700;margin-bottom:6px}#modal-desc{font-size:1.05rem;color:#4a5568;margin-bottom:16px}.modal-reward-badge{background:#fefcbf;border:2px dashed #d69e2e;border-radius:var(--radius-md);padding:10px 16px;color:#744210;font-weight:700;font-size:1.1rem;margin-bottom:20px}.resume-card{width:100%;background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border:3px solid #34d399;border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;box-shadow:0 4px 12px rgba(16,185,129,0.15);display:flex;flex-direction:column;gap:8px;animation:popIn 0.35s ease}.resume-card.hidden{display:none}.resume-badge-wrap{display:flex;justify-content:flex-start}.resume-badge{background:#10b981;color:#ffffff;font-size:0.68rem;font-weight:800;padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:0.4px;text-transform:uppercase}.resume-content{display:flex;align-items:center;gap:10px;text-align:left}.resume-mascot-icon{font-size:2.2rem;background:#ffffff;border:2px solid #a7f3d0;border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.08)}.resume-info{flex:1;min-width:0}.resume-title{font-size:1.05rem;font-weight:700;color:#065f46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-stats{font-size:0.8rem;font-weight:600;color:#047857}.resume-buttons{display:flex;gap:8px;align-items:center}.btn-resume{flex:1;font-family:var(--font-main);background:linear-gradient(180deg,#10b981 0%,#059669 100%);color:#ffffff;border:none;border-radius:var(--radius-pill);padding:10px 16px;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0px #047857;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.1s ease}.btn-resume:hover{background:linear-gradient(180deg,#34d399 0%,#059669 100%);transform:translateY(-1px)}.btn-resume:active{transform:translateY(2px);box-shadow:0 1px 0px #047857}.btn-discard-save{width:38px;height:38px;border-radius:var(--radius-md);border:2px solid #e2e8f0;background:#ffffff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s ease}.btn-discard-save:hover{background:#fee2e2;border-color:#fca5a5;transform:scale(1.05)}.btn-discard-save:active{transform:scale(0.95)}.btn-leave-hud{background:#fff5f5;border-color:#fed7d7;color:#c53030}.btn-leave-hud:hover{background:#fee2e2;border-color:#feb2b2}.leave-modal-card{border-color:#60a5fa}.leave-modal-card h2{font-size:1.85rem;color:#1e3a8a;font-weight:700;margin-bottom:6px}.leave-modal-card p{font-size:0.95rem;color:#475569;margin-bottom:14px}.save-state-preview{background:#eff6ff;border:2px dashed #93c5fd;border-radius:var(--radius-md);padding:8px 14px;color:#1e40af;font-weight:700;font-size:0.95rem;margin-bottom:18px}.modal-btn-stack{display:flex;flex-direction:column;gap:10px;width:100%}.btn-save-leave{width:100%;padding:12px 18px;font-size:1.15rem}.btn-secondary{width:100%;font-family:var(--font-main);background:#f1f5f9;color:#475569;border:2px solid #cbd5e1;border-radius:var(--radius-pill);padding:10px 16px;font-size:0.95rem;font-weight:700;cursor:pointer;transition:all 0.15s ease}.btn-secondary:hover{background:#e2e8f0;color:#1e293b}.btn-ghost{background:transparent;border:none;font-family:var(--font-main);font-size:0.92rem;font-weight:700;color:#2563eb;cursor:pointer;padding:6px;transition:opacity 0.15s}.btn-ghost:hover{text-decoration:underline;opacity:0.85}