:root{--primary: #FFB347;--primary-hover: #FFA025;--secondary: #FFF3CD;--bg: #FFFDF6;--text-main: #5C4033;--card-bg: #FFFFFF;--success: #8BC34A;--error: #FF5722;--text-light: #8E7A71;--shadow: rgba(224, 182, 142, .2);--border-bottom-color: #E29A26}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Sarabun,Outfit,sans-serif;background-color:var(--bg);background-image:radial-gradient(#FFEBB5 15%,transparent 15%),radial-gradient(#FFEBB5 15%,transparent 15%);background-size:40px 40px;background-position:0 0,20px 20px;color:var(--text-main);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-x:hidden}#confetti-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:999}.game-container{width:100%;max-width:650px;background:var(--card-bg);border-radius:36px;box-shadow:0 20px 50px var(--shadow);border:6px solid #FFEBB5;padding:30px;text-align:center;position:relative;transition:all .3s ease}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:10px;flex-wrap:wrap}.teacher-badge{display:flex;align-items:center;gap:8px;background:#fff3cd;padding:8px 16px;border-radius:24px;font-weight:800;color:#8c6239;border:2px solid #FFD699;box-shadow:0 4px #ffd699}.lang-selector{display:flex;gap:4px;background:#f5eef0;padding:4px;border-radius:20px;border:2px solid #E0D5D8}.lang-btn{padding:6px 12px;border-radius:16px;font-weight:800;font-size:14px;cursor:pointer;border:none;transition:all .2s ease;color:#78909c;background:transparent}.lang-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 10px #ffb3474d}.stars-container{display:flex;align-items:center;gap:8px;background:#ffe2e2;padding:8px 16px;border-radius:24px;font-weight:800;color:#d32f2f;border:2px solid #FFCDCD;box-shadow:0 4px #ffcdcd}.star-icon{font-size:20px;animation:pulse 1.5s infinite}.progress-map{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.progress-dot{width:36px;height:36px;background:#eceff1;border:2px solid #CFD8DC;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#90a4ae;box-shadow:0 3px #cfd8dc;transition:all .2s ease}.progress-dot.active{background:#fff3cd;border-color:#ffb347;color:#ffb347;box-shadow:0 3px #ffb347;transform:scale(1.1)}.progress-dot.correct{background:#e8f5e9;border-color:#8bc34a;color:#8bc34a;box-shadow:0 3px #8bc34a}.math-difficulty-selector{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;background:#fdf9f2;border:2px solid #FFEDCC;border-radius:20px;padding:12px 18px;margin-bottom:20px}.difficulty-label{font-weight:800;color:#8c6239;font-size:14px}.difficulty-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.difficulty-btn{padding:10px 18px;border-radius:50px;font-size:14px;font-weight:800;cursor:pointer;border:none;opacity:.55;transition:transform .1s,opacity .2s,border-bottom-width .1s}.difficulty-btn.active{opacity:1;transform:scale(1.06);box-shadow:0 4px 10px #0000001f}.difficulty-btn:active{transform:translateY(3px);border-bottom-width:1px}.difficulty-btn.difficulty-easy{background:#a5d6a7;border-bottom:4px solid #66BB6A;color:#1b5e20}.difficulty-btn.difficulty-medium{background:#90caf9;border-bottom:4px solid #42A5F5;color:#0d47a1}.difficulty-btn.difficulty-hard{background:#ce93d8;border-bottom:4px solid #AB47BC;color:#4a148c}.math-streak-indicator{text-align:center;font-weight:800;font-size:15px;color:#e65100;background:#fff3e0;border:2px solid #FFCC80;border-radius:16px;padding:8px 16px;margin-bottom:20px;animation:pulse 1s ease-in-out infinite}#streak-flame-container:empty{display:none}.streak-flame{position:relative;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:24px;font-weight:800;background:#fff3e0;color:#e65100;border:2px solid #FFCC80;box-shadow:0 4px #ffcc80}.streak-flame-icon{font-size:18px;display:inline-block;animation:streak-flicker 1.4s ease-in-out infinite;transform-origin:50% 90%}.streak-flame-days{font-size:13px;white-space:nowrap}.streak-flame-multiplier{font-size:11px;background:#ffb300;color:#fff;padding:2px 6px;border-radius:10px}.streak-flame--medium{background:#ffe0b2;border-color:#ffa726;box-shadow:0 4px #ffa726,0 0 14px #ffa7268c}.streak-flame--medium .streak-flame-icon{font-size:20px}.streak-flame--large{background:linear-gradient(135deg,#ffe0b2,#ffccbc);border-color:#ff7043;box-shadow:0 4px #ff7043,0 0 22px #ff7043a6}.streak-flame--large .streak-flame-icon{font-size:24px;animation:streak-flicker 1s ease-in-out infinite}.streak-flame--pop{animation:streak-pop .5s ease}.streak-flame-particle{position:absolute;top:-4px;font-size:10px;opacity:0;animation:streak-particle-rise 1.8s ease-in infinite}.streak-flame-particle:before{content:"✨"}.streak-flame-particle--1{left:14px;animation-delay:0s}.streak-flame-particle--2{left:28px;animation-delay:.6s}.streak-flame-particle--3{left:42px;animation-delay:1.2s}@keyframes streak-flicker{0%,to{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(2deg)}}@keyframes streak-pop{0%{transform:scale(.85)}50%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes streak-particle-rise{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:1}to{transform:translateY(-24px) scale(1);opacity:0}}.streak-toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-20px);background:linear-gradient(135deg,#ffb74d,#ff7043);color:#fff;font-weight:800;font-size:15px;padding:12px 22px;border-radius:20px;box-shadow:0 8px 20px #ff704366;z-index:300;opacity:0;transition:opacity .35s ease,transform .35s ease;pointer-events:none}.streak-toast--visible{opacity:1;transform:translate(-50%) translateY(0)}.streak-recovery-banner{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-20px);background:#fffbf0;border:3px solid #FFB347;border-radius:20px;padding:16px 20px;box-shadow:0 10px 24px #0000002e;z-index:300;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity .35s ease,transform .35s ease;max-width:90vw}.streak-recovery-banner--visible{opacity:1;transform:translate(-50%) translateY(0)}.streak-recovery-message{font-weight:800;color:#8c6239;text-align:center;font-size:15px}.streak-recovery-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.streak-recovery-btn{padding:8px 16px;border-radius:16px;font-weight:800;font-size:13px;border:none;cursor:pointer;font-family:inherit}.streak-recovery-btn--save{background:#ffb347;color:#fff;box-shadow:0 4px #e68a00}.streak-recovery-btn--reset{background:#f5eef0;color:#78909c;box-shadow:0 4px #e0d5d8}.speech-bubble.challenge-active{background:linear-gradient(135deg,#fff3cd,#ffe082);border-color:#ffb300;box-shadow:0 0 0 4px #ffb30040;animation:pulse 1.2s ease-in-out infinite}.stage-box{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}@media (max-width: 480px){.stage-box{grid-template-columns:1fr}}.actor-card{background:linear-gradient(135deg,#fff9eb,#fff2d4);padding:20px;border-radius:28px;border:3px dashed #FFD699;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;position:relative}.actor-image{width:110px;height:110px;object-fit:cover;border-radius:20px;border:3px solid white;box-shadow:0 8px 16px #8c623926;margin-bottom:12px;background:#fff;transition:transform .3s ease}.actor-image.excited{animation:bounce .6s ease infinite alternate}.emoji-hint{font-size:80px;line-height:110px;height:110px;margin-bottom:12px;animation:float 3s ease-in-out infinite}.card-label{font-size:14px;font-weight:800;color:#8e7a71;text-transform:uppercase}.speech-bubble{grid-column:span 2;background:#fffbf0;padding:16px 24px;border-radius:20px;border:3px solid #FFEBB5;box-shadow:inset 0 2px 4px #00000005;font-size:18px;font-weight:600;line-height:1.5;text-align:center}@media (max-width: 480px){.speech-bubble{grid-column:span 1}}.settings-panel{background:#fdf9f2;border:2px solid #FFEDCC;border-radius:18px;padding:12px 18px;margin-bottom:24px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-light);text-align:left}.settings-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.settings-label{font-weight:800;color:#8c6239}.speak-btn{background:var(--primary);color:#fff;border:none;padding:14px 32px;border-radius:50px;font-size:20px;font-weight:800;cursor:pointer;border-bottom:5px solid var(--border-bottom-color);display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;transition:transform .1s,border-bottom-width .1s}.speak-btn:hover{background:var(--primary-hover)}.speak-btn:active{transform:translateY(4px);border-bottom-width:1px}.answer-display{min-height:80px;border-bottom:4px dashed #FFD699;margin-bottom:30px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px}.placed-letter{background:#ffe0b2;border:3px solid #FFB74D;border-bottom:6px solid #FF9800;color:#5c4033;font-size:28px;font-weight:800;min-width:54px;height:54px;padding:0 8px;display:flex;align-items:center;justify-content:center;border-radius:14px;cursor:pointer;transition:transform .1s,border-bottom-width .1s;animation:popIn .2s ease-out}.placed-letter:active{transform:translateY(4px);border-bottom-width:2px}.choices-pool{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:30px}.choice-btn{background:#e8f5e9;border:3px solid #A5D6A7;border-bottom:6px solid #66BB6A;color:#2e7d32;font-size:28px;font-weight:800;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:16px;cursor:pointer;transition:transform .1s,border-bottom-width .1s}.choice-btn:active:not(:disabled){transform:translateY(4px);border-bottom-width:2px}.choice-btn:disabled{opacity:.25;cursor:not-allowed;transform:none!important;border-bottom-width:6px!important}.choice-btn:nth-child(2n){background:#e3f2fd;border-color:#90caf9;border-bottom-color:#42a5f5;color:#1565c0}.controls{display:flex;justify-content:center;gap:16px}.action-btn{padding:14px 32px;border-radius:18px;font-size:18px;font-weight:800;cursor:pointer;border:none;transition:transform .1s,border-bottom-width .1s}.btn-check{background:var(--success);border-bottom:5px solid #689F38;color:#fff}.btn-check:hover{background:#7cb342}.btn-check:active{transform:translateY(4px);border-bottom-width:1px}.btn-clear{background:#eceff1;color:#546e7a;border:2px solid #CFD8DC;border-bottom:5px solid #B0BEC5}.btn-clear:hover{background:#cfd8dc}.btn-clear:active{transform:translateY(4px);border-bottom-width:1px}.overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#fffffff5;border-radius:36px;flex-direction:column;align-items:center;justify-content:center;padding:30px;z-index:10;animation:fadeIn .3s ease}.overlay h2{font-size:36px;margin-bottom:15px;color:#8c6239}.overlay p{font-size:20px;margin-bottom:30px;color:var(--text-light)}.btn-restart{background:var(--primary);color:#fff;border:none;padding:16px 40px;border-radius:50px;font-size:22px;font-weight:800;cursor:pointer;border-bottom:5px solid var(--border-bottom-color);transition:transform .1s,border-bottom-width .1s}.btn-restart:hover{background:var(--primary-hover)}.btn-restart:active{transform:translateY(4px);border-bottom-width:1px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-12px)}}@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}to{transform:translateY(0) rotate(0)}}@keyframes popIn{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:500px;margin:20px auto}@media (max-width: 480px){.memory-grid{grid-template-columns:repeat(2,1fr)}}.memory-card{aspect-ratio:3 / 4;perspective:1000px;cursor:pointer}.card-inner{width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d;position:relative;border-radius:16px;box-shadow:0 8px 16px var(--shadow)}.memory-card.flipped .card-inner{transform:rotateY(180deg)}.memory-card.matched .card-inner{border:4px solid var(--success);transform:rotateY(180deg);animation:pulse .5s ease-in-out}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:16px;border:4px solid #FFEBB5;padding:10px;box-sizing:border-box}.card-front{background:#ffd699;font-size:36px;color:#8c6239}.card-back{background:#fff;font-size:18px;font-weight:800;color:var(--text-main);text-align:center;transform:rotateY(180deg)}.card-back.is-emoji{font-size:36px}.ledger-box{margin-top:15px;background:#f5efeb;padding:12px;border-radius:12px;font-size:14px;width:100%;max-height:120px;overflow-y:auto;text-align:left;border:1px solid #E6DCD2;font-family:monospace}.ledger-entry{margin-bottom:4px;color:#7a5b4c}.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:500px;box-sizing:border-box}@media (max-width: 480px){.subject-grid{grid-template-columns:repeat(2,1fr)!important}}.subject-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;border-radius:16px;cursor:pointer;text-decoration:none;transition:all .15s ease;box-shadow:0 4px 10px #0000000d}.subject-card:hover{transform:scale(1.04);box-shadow:0 10px 20px #00000014}.subject-card:active{transform:scale(.97) translateY(4px);border-bottom-width:2px!important}.food-drawer-toggle-btn{position:absolute;top:10px;right:10px;background:#fff3cd;border:2px solid #FFD699;border-radius:16px;padding:4px 10px;font-size:15px;font-weight:800;font-family:inherit;color:#8c6239;cursor:pointer;display:inline-flex;align-items:center;gap:4px;box-shadow:0 3px #ffd699;z-index:6;transition:transform .15s ease}.food-drawer-toggle-btn:active{transform:translateY(2px);box-shadow:0 1px #ffd699}.food-count-badge{background:#ff8a65;color:#fff;border-radius:50%;min-width:18px;height:18px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.food-count-badge.food-badge-pop{animation:food-badge-pop .4s ease}@keyframes food-badge-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}to{transform:scale(1)}}.hunger-bar-wrap{width:90%;height:10px;background:#f5eee0;border:2px solid #FFD699;border-radius:10px;overflow:hidden;margin:4px 0 8px}.hunger-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffb347,#ff8a65);border-radius:10px;transition:width .5s ease}.food-drawer-panel{position:absolute;top:100%;left:50%;width:240px;max-width:90vw;background:#fff;border:3px solid #FFD699;border-radius:20px;padding:14px;margin-top:8px;box-shadow:0 10px 24px #8c623940;z-index:50;opacity:0;pointer-events:none;transform:translate(-50%,-10px);transition:opacity .2s ease,transform .2s ease}.food-drawer-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%)}.food-drawer-title{font-size:13px;font-weight:800;color:#8c6239;margin-bottom:10px;text-align:center}.food-drawer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.food-item-btn{background:#fff9eb;border:2px solid #FFEBB5;border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-family:inherit;transition:transform .1s ease}.food-item-btn:hover:not(:disabled){transform:scale(1.08)}.food-item-btn:active:not(:disabled){transform:scale(.95)}.food-item-btn:disabled{opacity:.35;cursor:not-allowed}.food-item-emoji{font-size:26px}.food-item-count{font-size:12px;font-weight:800;color:#8c6239}.food-item-name{font-size:9px;font-weight:700;color:#a38b75}.food-fly-item{position:fixed;font-size:26px;z-index:3000;pointer-events:none;animation:food-fly-path .7s cubic-bezier(.3,.7,.4,1) forwards}@keyframes food-fly-path{0%{transform:translate(0) scale(1);opacity:1}70%{opacity:1}to{transform:translate(var(--fly-dx),var(--fly-dy)) scale(.4);opacity:0}}