:root{--sky:#87CEEB;--sky-deep:#5BA3D9;--grass:#5CB85C;--cloud:#FFFEF0;--candy1:#FF6B9D;--candy2:#FF8E3C;--candy3:#9B59B6;--candy4:#3498DB;--candy5:#2ECC71;--gold:#F39C12;--dark:#2C3E50;--white:#FFFFFF;--card:rgba(255,255,255,.93)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"M PLUS Rounded 1c",sans-serif;background:linear-gradient(180deg,var(--sky) 0%,#B8E4F7 40%,#D4F1BE 70%,var(--grass) 100%);min-height:100vh;overflow-x:hidden}.cloud-layer{position:fixed;top:0;left:0;width:100%;height:200px;pointer-events:none;z-index:0;overflow:hidden}.cloud{position:absolute;background:var(--cloud);border-radius:50px;opacity:.85;animation:floatCloud linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:var(--cloud);border-radius:50%}.cloud:before{width:60%;height:180%;top:-40%;left:15%}.cloud:after{width:40%;height:140%;top:-20%;right:10%}@keyframes floatCloud{0%{transform:translate(-200px)}to{transform:translate(110vw)}}.screen{position:relative;z-index:1;min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}#titleScreen{text-align:center;gap:24px}.title-logo{font-family:Kaisei Decol,serif;font-size:clamp(2.8rem,8vw,5rem);color:var(--white);text-shadow:4px 4px 0 var(--candy1),8px 8px 0 rgba(0,0,0,.15);animation:titleBounce 1.5s ease-in-out infinite alternate;letter-spacing:.05em}@keyframes titleBounce{0%{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-10px) rotate(1deg)}}.title-sub{font-size:1.2rem;color:var(--white);text-shadow:1px 1px 0 rgba(0,0,0,.2);font-weight:700}.title-chars{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:400px}.title-char{width:52px;height:52px;background:var(--white);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;box-shadow:0 4px #00000026;animation:charFloat 2s ease-in-out infinite alternate;color:var(--dark)}.title-char:nth-child(2n){animation-delay:.3s;background:#fff9c4}.title-char:nth-child(3n){animation-delay:.6s;background:#f8e1f4}@keyframes charFloat{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.btn-primary{padding:18px 48px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--candy1),var(--candy2));color:var(--white);border:none;border-radius:50px;cursor:pointer;box-shadow:0 6px #c0392b,0 10px 20px #00000026;transition:all .1s;letter-spacing:.05em}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px #c0392b}#mapScreen{gap:16px}.map-title{font-family:Kaisei Decol,serif;font-size:1.8rem;color:var(--white);text-shadow:2px 2px 0 rgba(0,0,0,.2);text-align:center}.player-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}.stat-badge{background:#ffffffe6;border-radius:20px;padding:6px 16px;font-weight:800;font-size:.9rem;color:var(--dark);box-shadow:0 3px 8px #0000001a;display:flex;align-items:center;gap:6px}.btn-achievement{width:40px;height:40px;border-radius:50%;border:none;background:#ffffffe6;font-size:1.3rem;cursor:pointer;box-shadow:0 3px 8px #0000001a;display:flex;align-items:center;justify-content:center}.btn-achievement:hover{background:#fff;transform:scale(1.1)}.achievement-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}.achievement-modal{background:var(--card);border-radius:24px;padding:24px;width:100%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 48px #0003}.achievement-header{display:flex;justify-content:space-between;align-items:center}.achievement-title{font-size:1.3rem;font-weight:800;color:var(--dark)}.achievement-count{font-size:.95rem;font-weight:800;color:var(--candy2)}.achievement-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1}.achievement-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#f8f8f8}.achievement-item.unlocked{background:linear-gradient(135deg,#fffde7,#fff9c4);border:2px solid var(--gold)}.achievement-item.locked{opacity:.55}.achievement-icon{font-size:1.8rem;flex-shrink:0;width:40px;text-align:center}.achievement-info{flex:1}.achievement-name{font-size:.95rem;font-weight:800;color:var(--dark)}.achievement-desc{font-size:.78rem;color:#666;margin-top:2px}.achievement-badge{color:var(--candy5);font-size:1.2rem;font-weight:800;flex-shrink:0}.quest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px;width:100%;max-width:700px;padding-bottom:20px}.quest-card{background:var(--card);border-radius:20px;padding:16px;text-align:center;box-shadow:0 6px #0000001a,0 10px 30px #00000014;cursor:pointer;transition:all .15s;border:3px solid transparent;position:relative;overflow:hidden}.quest-card:hover:not(.locked){transform:translateY(-4px);box-shadow:0 10px #0000001a}.quest-card:active:not(.locked){transform:translateY(2px)}.quest-card.locked{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}.quest-card.completed{border-color:var(--gold)}.quest-card.completed:after{content:"✓";position:absolute;top:8px;right:10px;color:var(--gold);font-size:1.2rem;font-weight:800}.quest-level-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:800;color:#fff;margin-bottom:8px}.quest-icon{font-size:2.4rem;margin-bottom:4px}.quest-name{font-size:.95rem;font-weight:800;color:var(--dark);margin-bottom:4px}.quest-chars{font-size:.75rem;color:#666}.quest-stars{color:var(--gold);font-size:1rem}.quest-mode-stars{display:flex;gap:6px;justify-content:center;margin-top:6px}.mode-star{display:flex;flex-direction:column;align-items:center;gap:1px;opacity:.3}.mode-star.cleared{opacity:1}.mode-star-icon{font-size:.7rem;line-height:1}.mode-star-mark{font-size:.85rem;line-height:1}#modeScreen{gap:20px;text-align:center}.mode-title{font-family:Kaisei Decol,serif;font-size:1.8rem;color:var(--white);text-shadow:2px 2px 0 rgba(0,0,0,.2)}.mode-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.mode-card{background:var(--card);border-radius:20px;padding:24px 20px;text-align:center;cursor:pointer;width:180px;box-shadow:0 6px #0000001a;transition:all .15s;border:3px solid transparent}.mode-card:hover{transform:translateY(-4px);border-color:var(--sky-deep)}.mode-card:active{transform:translateY(2px)}.mode-icon{font-size:3rem;margin-bottom:8px}.mode-name{font-size:1rem;font-weight:800;color:var(--dark)}.mode-desc{font-size:.8rem;color:#666;margin-top:4px}#gameScreen{gap:16px}.game-header{width:100%;max-width:600px;display:flex;align-items:center;gap:12px}.btn-quit{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none;background:#ffffff59;color:var(--white);font-size:1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.btn-quit:hover{background:#ffffff8c}.quit-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;border-radius:24px;display:flex;align-items:center;justify-content:center;z-index:10}.quit-dialog{background:var(--card);border-radius:20px;padding:28px 32px;text-align:center;box-shadow:0 8px 32px #0003}.quit-msg{font-size:1.3rem;font-weight:800;margin:0 0 20px}.quit-buttons{display:flex;gap:12px;justify-content:center}.btn-quit-cancel{padding:10px 24px;border-radius:999px;border:none;background:#e0e0e0;font-size:1rem;font-weight:800;cursor:pointer}.btn-quit-cancel:hover{background:#bdbdbd}.btn-quit-confirm{padding:10px 24px;border-radius:999px;border:none;background:var(--candy2);color:var(--white);font-size:1rem;font-weight:800;cursor:pointer}.btn-quit-confirm:hover{filter:brightness(1.1)}.progress-bar-wrap{flex:1;height:18px;background:#ffffff80;border-radius:20px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--candy5),var(--candy4));border-radius:20px;transition:width .4s ease}.progress-label{font-size:.9rem;font-weight:800;color:var(--white);white-space:nowrap}.hp-bar{display:flex;gap:4px}.hp-heart{font-size:1.2rem;transition:opacity .3s}.hp-heart.lost{opacity:.2;filter:grayscale(1)}.game-card{background:var(--card);border-radius:24px;padding:28px 24px;width:100%;max-width:600px;box-shadow:0 8px #0000001a,0 12px 40px #0000001a;text-align:center}.game-question-label{font-size:.85rem;font-weight:800;color:#888;margin-bottom:8px;letter-spacing:.05em}.game-char-display{font-family:Kaisei Decol,serif;font-size:clamp(4rem,15vw,7rem);color:var(--dark);line-height:1;margin:8px 0;animation:charAppear .3s cubic-bezier(.34,1.56,.64,1)}@keyframes charAppear{0%{transform:scale(.5) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.game-hint{font-size:1rem;color:#666;margin-bottom:16px}.canvas-wrap{position:relative;display:inline-block;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #0000001f}.canvas-controls{display:flex;gap:10px;justify-content:center;margin-top:12px}.btn-canvas{padding:10px 20px;border-radius:12px;border:none;font-family:"M PLUS Rounded 1c",sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;transition:all .1s}.btn-clear{background:#f0f0f0;color:#444}.btn-check{background:linear-gradient(135deg,var(--candy4),var(--candy5));color:#fff;box-shadow:0 4px #1a6b9a}.btn-check:active{transform:translateY(3px);box-shadow:0 1px #1a6b9a}.stroke-indicator{font-size:.8rem;color:#aaa;margin-top:6px}.listen-btn{background:linear-gradient(135deg,var(--candy3),#8E44AD);color:#fff;border:none;border-radius:50%;width:100px;height:100px;font-size:2.5rem;cursor:pointer;box-shadow:0 6px #6c3483;transition:all .1s;margin:16px auto;display:flex;align-items:center;justify-content:center}.listen-btn:active{transform:translateY(4px);box-shadow:0 2px #6c3483}.listen-btn.playing{animation:pulse .6s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.08)}}.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.choice-btn{padding:16px 12px;border-radius:16px;border:3px solid #E0E0E0;background:#fafafa;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(1.4rem,5vw,2rem);font-weight:800;cursor:pointer;color:var(--dark);transition:all .12s;box-shadow:0 4px #ccc}.choice-btn:hover{background:#f0f8ff;border-color:var(--sky-deep);transform:translateY(-2px)}.choice-btn:active{transform:translateY(2px);box-shadow:0 1px #ccc}.choice-btn.correct{background:#d4edda;border-color:var(--candy5);box-shadow:0 4px #28a745}.choice-btn.wrong{background:#f8d7da;border-color:var(--candy1);box-shadow:0 4px #c82333;animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.feedback-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.feedback-msg{font-family:Kaisei Decol,serif;font-size:clamp(2.5rem,10vw,5rem);font-weight:700;animation:feedbackPop .6s cubic-bezier(.34,1.56,.64,1) forwards;text-shadow:4px 4px 0 rgba(0,0,0,.12)}.feedback-msg.correct-msg{color:var(--candy5)}.feedback-msg.wrong-msg{color:var(--candy1)}@keyframes feedbackPop{0%{transform:scale(0) translateY(20px);opacity:0}60%{transform:scale(1.15) translateY(0);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}#resultScreen{text-align:center;gap:20px}.result-card{background:var(--card);border-radius:28px;padding:36px 28px;max-width:480px;width:100%;box-shadow:0 8px #0000001a}.result-title{font-family:Kaisei Decol,serif;font-size:2.5rem;color:var(--dark)}.result-stars{font-size:2.5rem;margin:12px 0}.result-score{font-size:1.4rem;font-weight:800;color:#555}.result-gems{font-size:1.1rem;font-weight:800;color:var(--gold);margin:8px 0}.result-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}.btn-secondary{padding:12px 28px;border-radius:30px;border:none;background:#f0f0f0;color:var(--dark);font-family:"M PLUS Rounded 1c",sans-serif;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 4px #ccc;transition:all .1s}.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px #ccc}.confetti-piece{position:fixed;width:10px;height:10px;pointer-events:none;z-index:200;animation:confettiFall linear forwards;border-radius:2px}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}