*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff9ef;color:#26334a}button{font:inherit;cursor:pointer;border:0}a{text-decoration:none;color:inherit}.hidden{display:none!important}
.app{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 8% 8%,#fff 0 7%,transparent 20%),radial-gradient(circle at 92% 18%,#fff3c9 0 7%,transparent 19%),radial-gradient(circle at 12% 78%,#dff8ff 0 7%,transparent 22%),radial-gradient(circle at 88% 82%,#f2e6ff 0 7%,transparent 21%),linear-gradient(145deg,#fffaf0,#effbff 48%,#fff3fb)}.app:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,#ffd76b 0 3px,transparent 4px),radial-gradient(circle,#9edfff 0 4px,transparent 5px),radial-gradient(circle,#d7b8ff 0 3px,transparent 4px);background-size:125px 145px,180px 170px,155px 190px;background-position:20px 40px,80px 10px,45px 95px}
.topbar{position:sticky;top:0;z-index:20;height:70px;display:flex;align-items:center;justify-content:space-between;padding:10px max(18px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid #eadff5}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#ffca42,#ff8d8d);color:#fff;font-size:23px;font-weight:900;box-shadow:0 7px 16px #e9b8a555}.brand strong{display:block;font-size:16px;line-height:1}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:#836e9b}.actions{display:flex;gap:8px}.icon{width:42px;height:42px;border-radius:14px;background:#fff;box-shadow:0 5px 15px #59417a18;font-size:19px}
.wrap{position:relative;z-index:1;max-width:1080px;margin:auto;padding:25px 18px 45px}.hero{text-align:center;padding:18px 0 12px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;color:#8d72aa}.hero h1{font-size:clamp(34px,6vw,58px);line-height:1;margin:10px 0}.hero h1 span{color:#7b59d8}.hero p{color:#53627a;font-size:16px;margin:0 auto;max-width:600px}.game-card{margin-top:20px;background:rgba(255,255,255,.94);border:1px solid #e7dcef;border-radius:30px;padding:20px;box-shadow:0 22px 55px #536b8620}.top-game{display:flex;justify-content:space-between;align-items:center;gap:15px}.nanu-msg{display:flex;align-items:center;gap:12px}.nanu-msg img{width:70px;height:70px;object-fit:cover;border-radius:22px;border:4px solid #fff;box-shadow:0 8px 20px #7358a42c}.speech{background:#f4efff;color:#5e46a7;padding:10px 14px;border-radius:16px;font-weight:800}.scoreboard{display:flex;gap:8px}.score{min-width:78px;text-align:center;background:#fff;border:1px solid #e9def1;border-radius:16px;padding:8px}.score b{display:block;font-size:21px}.score small{font-size:8px;letter-spacing:1px;color:#927fa2}.mission{margin:18px 0 12px;text-align:center;background:linear-gradient(90deg,#fff6cf,#eefaff);border:1px solid #eadff4;border-radius:18px;padding:15px}.mission small{display:block;color:#806f93;font-weight:800;letter-spacing:1px}.mission strong{display:block;font-size:22px;margin-top:4px}.animal-stage{min-height:260px;display:grid;place-items:center;background:linear-gradient(145deg,#e8faff,#fff5d8 52%,#f5edff);border-radius:24px;border:1px solid #e0e5ed;position:relative;overflow:hidden}.animal-stage:before,.animal-stage:after{content:"";position:absolute;border-radius:50%;opacity:.65}.animal-stage:before{width:180px;height:180px;background:#fff;left:-60px;top:-70px}.animal-stage:after{width:150px;height:150px;background:#e1d4ff;right:-50px;bottom:-65px}.question-animal{font-size:115px;filter:drop-shadow(0 12px 8px #536b8620);animation:bob 1.8s ease-in-out infinite;z-index:1}.question-text{position:absolute;top:15px;z-index:2;font-weight:900;color:#6c5790;font-size:12px;letter-spacing:1px}@keyframes bob{50%{transform:translateY(-9px) rotate(-2deg)}}.options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.animal-btn{background:#fff;border:2px solid #eadff4;border-radius:22px;padding:14px 8px;box-shadow:0 7px 18px #536b8612;transition:.18s}.animal-btn:hover{transform:translateY(-3px)}.animal-btn .emoji{display:block;font-size:55px}.animal-btn span{display:block;margin-top:5px;font-weight:900;color:#43526a}.animal-btn.correct{border-color:#76c985;background:#ecfff0;animation:pop .35s}.animal-btn.wrong{border-color:#ff9b9b;background:#fff0f0;animation:shake .3s}@keyframes pop{50%{transform:scale(1.06)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.progress{height:10px;background:#eadff3;border-radius:99px;overflow:hidden;margin:16px 0}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffbd4b,#7d5add);transition:.3s}.controls{display:flex;justify-content:center;gap:10px;margin-top:15px}.primary,.secondary{padding:12px 18px;border-radius:15px;font-weight:900}.primary{background:linear-gradient(135deg,#7b59d8,#9b62ea);color:#fff;box-shadow:0 10px 22px #7655c733}.secondary{background:#fff;border:1px solid #e4d9ef;color:#43526a}.result{position:fixed;inset:0;background:#26334a66;display:grid;place-items:center;z-index:50;padding:20px}.result-box{max-width:430px;width:100%;background:#fff;border-radius:30px;padding:30px;text-align:center;box-shadow:0 30px 80px #26334a44}.result-box .big{font-size:65px}.result-box h2{font-size:32px;margin:7px 0}.stars{font-size:28px;margin:12px}.footer{text-align:center;color:#65738a;font-size:12px;margin-top:18px}
@media(max-width:760px){.top-game{flex-direction:column}.options{grid-template-columns:repeat(2,1fr)}.animal-stage{min-height:220px}.question-animal{font-size:90px}.scoreboard{width:100%;justify-content:center}.score{flex:1}.wrap{padding-top:15px}}
@media(max-width:420px){.hero h1{font-size:35px}.game-card{padding:13px}.animal-btn .emoji{font-size:45px}}

.happy-animal{animation:happyAnimal .55s ease-in-out 2}.sad-animal{animation:sadAnimal .25s ease-in-out 2}
@keyframes happyAnimal{0%{transform:scale(1)}50%{transform:scale(1.18) rotate(-5deg)}100%{transform:scale(1)}}
@keyframes sadAnimal{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.spark{position:fixed;z-index:80;pointer-events:none;font-size:20px;animation:sparkFly .75s ease-out forwards}
@keyframes sparkFly{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
.confetti{position:fixed;z-index:90;top:-25px;pointer-events:none;font-size:18px;animation:confettiFall var(--fall) var(--delay) ease-in forwards}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(var(--spin));opacity:.1}}
#badge{display:inline-block;background:#fff5c9;color:#7a5b13;padding:9px 13px;border-radius:99px;font-weight:900;margin:3px 0 14px}

.level-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:15px 0 8px}
.level-title h2{margin:0;font-size:clamp(23px,4vw,34px)}.level-title p{margin:4px 0 0;color:#5d6b82}
.level-map{display:flex;gap:8px;overflow:auto;padding:10px 2px 8px;scrollbar-width:thin}
.level-dot{flex:0 0 auto;width:78px;padding:8px 5px;border-radius:17px;background:#fff;border:2px solid #eadff4;text-align:center;color:#81728d}
.level-dot span{display:block;font-size:23px}.level-dot strong{font-size:15px}.level-dot small{display:block;font-size:8px;letter-spacing:.7px}.level-dot.active{background:#7b59d8;color:#fff;border-color:#7b59d8;box-shadow:0 8px 18px #7b59d844}.level-dot.done{border-color:#9cd9a4;background:#effcf0;color:#397a40}.level-dot.locked{opacity:.48}
.level-progress-row{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#6d5d80;margin-top:7px}
@media(max-width:600px){.level-head{align-items:flex-start}.level-map{margin-inline:-5px}}