:root{--bg: #fdf6ec;--card: #ffffff;--ink: #3a3a52;--ink-soft: #7a7a96;--primary: #7c5cff;--primary-soft: #ece7ff;--green: #34c77b;--green-soft: #e0f7eb;--red: #ff6b6b;--red-soft: #ffe8e8;--yellow: #ffc83d;--yellow-soft: #fff4d6;--blue: #4fa8ff;--blue-soft: #e3f1ff;--pink: #ff7bb0;--pink-soft: #ffe6f1;--orange: #ff9f43;--orange-soft: #ffefdd;--radius: 22px;--shadow: 0 6px 20px rgba(58, 58, 82, .1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Baloo 2",system-ui,sans-serif;font-size:18px}#root{min-height:100vh}.app{max-width:980px;margin:0 auto;padding:16px 16px 90px}button{font-family:inherit;cursor:pointer;border:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px 18px}.topbar .home-btn{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:10px 16px;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;text-decoration:none}.topbar .stats{display:flex;gap:10px;align-items:center}.chip{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:8px 14px;font-weight:700;font-size:17px;display:flex;gap:6px;align-items:center}.chip.star{color:#c98f00;background:var(--yellow-soft)}.chip.streak{color:#d35400;background:var(--orange-soft)}.chip.avatar{font-size:22px;padding:6px 12px}.page-title{font-size:30px;font-weight:800;margin:6px 0 4px}.page-sub{color:var(--ink-soft);margin:0 0 20px;font-size:17px}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-decoration:none;color:var(--ink);transition:transform .15s ease;display:block;border:3px solid transparent;position:relative}.card:active{transform:scale(.97)}@media (hover:hover){.card:hover{transform:translateY(-3px)}}.subject-card{text-align:center;padding:28px 18px}.subject-card .icon{font-size:56px;display:block;margin-bottom:8px}.subject-card .name{font-size:22px;font-weight:800}.subject-card .meta{color:var(--ink-soft);font-size:15px;margin-top:4px}.course-card .icon{font-size:40px}.course-card h3{margin:8px 0 4px;font-size:20px}.course-card .desc{color:var(--ink-soft);font-size:15px;margin:0 0 10px}.progress-track{background:#eee9f8;border-radius:99px;height:12px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,var(--primary),var(--pink));height:100%;border-radius:99px;transition:width .4s ease}.progress-label{font-size:14px;color:var(--ink-soft);margin-top:6px;font-weight:600}.section-label{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin:26px 0 12px}.lesson-row{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px;text-decoration:none;color:var(--ink);transition:transform .15s ease}.lesson-row:active{transform:scale(.98)}.lesson-row .num{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;background:var(--primary-soft);color:var(--primary)}.lesson-row.done .num{background:var(--green-soft);color:var(--green)}.lesson-row .lesson-title{font-weight:700;font-size:18px;flex:1}.lesson-row .lesson-meta{font-size:14px;color:var(--ink-soft)}.lesson-row .stars{font-size:16px;letter-spacing:2px}.player{max-width:720px;margin:0 auto}.player-progress{display:flex;gap:6px;margin:4px 0 22px}.player-progress .dot{flex:1;height:10px;border-radius:99px;background:#e8e2f5;transition:background .3s}.player-progress .dot.done{background:var(--green)}.player-progress .dot.now{background:var(--primary)}.block-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px;animation:popIn .35s ease}@keyframes popIn{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}.block-card h2{margin:0 0 14px;font-size:25px}.block-card p{line-height:1.55;font-size:19px;margin:10px 0}.emoji-scene{font-size:54px;text-align:center;padding:18px 10px;line-height:1.3;background:var(--primary-soft);border-radius:18px;margin:14px 0}.emoji-scene.anim-bounce{animation:sceneBounce 1.6s ease infinite}.emoji-scene.anim-wiggle{animation:sceneWiggle 1.8s ease infinite}.emoji-scene.anim-float{animation:sceneFloat 2.6s ease-in-out infinite}@keyframes sceneBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes sceneWiggle{0%,to{transform:rotate(0)}25%{transform:rotate(2.5deg)}75%{transform:rotate(-2.5deg)}}@keyframes sceneFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.03)}}.big-emoji{font-size:76px;text-align:center;margin:8px 0 16px;animation:sceneFloat 2.4s ease-in-out infinite}.speak-btn{background:var(--blue-soft);color:#1769b5;border-radius:14px;padding:9px 16px;font-size:16px;font-weight:700;display:inline-flex;gap:8px;align-items:center;margin-bottom:8px}.options{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:16px}.option-btn{background:var(--card);border:3px solid #e8e2f5;border-radius:18px;padding:18px 14px;font-size:21px;font-weight:700;color:var(--ink);transition:all .15s ease;min-height:64px}.option-btn .opt-emoji{font-size:38px;display:block;margin-bottom:4px}.option-btn:active{transform:scale(.96)}.option-btn.correct{border-color:var(--green);background:var(--green-soft);animation:correctPulse .5s ease}.option-btn.wrong{border-color:var(--red);background:var(--red-soft);animation:shake .4s ease}.option-btn.faded{opacity:.45}@keyframes correctPulse{0%{transform:scale(1)}40%{transform:scale(1.07)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.match-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.match-item{background:var(--card);border:3px solid #e8e2f5;border-radius:16px;padding:14px 10px;font-size:20px;font-weight:700;text-align:center;width:100%;transition:all .15s ease}.match-item.selected{border-color:var(--primary);background:var(--primary-soft)}.match-item.matched{border-color:var(--green);background:var(--green-soft);opacity:.6}.match-item.error{border-color:var(--red);background:var(--red-soft);animation:shake .4s ease}.order-pool,.order-answer{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;min-height:64px}.order-answer{background:var(--primary-soft);border-radius:16px;padding:10px}.order-chip{background:var(--card);border:3px solid #e8e2f5;border-radius:14px;padding:12px 18px;font-size:20px;font-weight:700}.order-chip.in-answer{border-color:var(--primary)}.type-input{width:100%;font-family:inherit;font-size:26px;font-weight:700;text-align:center;padding:14px;border-radius:16px;border:3px solid #e8e2f5;margin-top:14px;color:var(--ink);background:var(--card);outline:none;letter-spacing:2px}.type-input:focus{border-color:var(--primary)}.type-input.correct{border-color:var(--green);background:var(--green-soft)}.type-input.wrong{border-color:var(--red);background:var(--red-soft);animation:shake .4s ease}.hint{color:var(--ink-soft);font-size:16px;margin-top:10px;text-align:center}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}@media (max-width: 480px){.memory-grid{grid-template-columns:repeat(3,1fr)}}.memory-card{aspect-ratio:1;border-radius:16px;font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--pink));color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.memory-card.open{background:var(--card);color:var(--ink);border:3px solid var(--primary)}.memory-card.found{background:var(--green-soft);color:var(--ink);border:3px solid var(--green);opacity:.7}.writing-area{width:100%;min-height:140px;font-family:inherit;font-size:19px;border-radius:16px;border:3px solid #e8e2f5;padding:14px;margin-top:14px;color:var(--ink);resize:vertical;outline:none}.writing-area:focus{border-color:var(--primary)}.feedback{margin-top:18px;padding:14px 18px;border-radius:16px;font-weight:700;font-size:18px;animation:popIn .3s ease}.feedback.good{background:var(--green-soft);color:#1d8a52}.feedback.bad{background:var(--red-soft);color:#c0392b}.feedback.info{background:var(--blue-soft);color:#1769b5}.next-btn{margin-top:22px;width:100%;padding:17px;border-radius:18px;background:var(--primary);color:#fff;font-size:21px;font-weight:800;box-shadow:0 5px #5a3fd4;transition:all .1s ease}.next-btn:active{transform:translateY(3px);box-shadow:0 2px #5a3fd4}.next-btn:disabled{background:#cfc7e8;box-shadow:none;cursor:default}.next-btn.green{background:var(--green);box-shadow:0 5px #239b5c}.next-btn.green:active{box-shadow:0 2px #239b5c}.next-btn.back{background:var(--card);color:var(--ink-soft);box-shadow:0 5px #ddd5c8;width:auto;flex:0 0 auto;padding-left:20px;padding-right:20px}.next-btn.back:active{box-shadow:0 2px #ddd5c8}.done-screen{text-align:center;padding:30px 16px}.done-screen .trophy{font-size:90px;animation:sceneBounce 1.4s ease infinite}.done-screen h1{font-size:32px;margin:10px 0 4px}.done-stars{font-size:46px;letter-spacing:8px;margin:12px 0}.done-stars .dim{opacity:.25}.new-badge{display:inline-block;background:var(--yellow-soft);border-radius:16px;padding:12px 20px;margin:8px 6px;font-weight:700;font-size:17px;animation:popIn .5s ease}.profile-screen{text-align:center;padding-top:8vh}.profile-screen h1{font-size:36px}.profile-cards{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px}.profile-card{background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:34px 44px;font-size:22px;font-weight:800;color:var(--ink);transition:transform .15s ease;border:4px solid transparent}.profile-card .pavatar{font-size:64px;display:block;margin-bottom:10px}.profile-card:active{transform:scale(.95)}@media (hover:hover){.profile-card:hover{transform:translateY(-4px);border-color:var(--primary)}}.badge-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.badge-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px 12px;text-align:center}.badge-card.locked{opacity:.38;filter:grayscale(1)}.badge-card .b-icon{font-size:42px}.badge-card .b-name{font-weight:800;font-size:15px;margin-top:6px}.badge-card .b-desc{font-size:13px;color:var(--ink-soft);margin-top:2px}.teacher-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:16px}.teacher-table th,.teacher-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #f0ebe0}.teacher-table th{background:var(--primary-soft);font-size:14px;text-transform:uppercase;letter-spacing:.5px}.pin-input{font-size:30px;text-align:center;letter-spacing:12px;width:220px;padding:12px;border-radius:16px;border:3px solid #e8e2f5;font-family:inherit}.small-btn{padding:8px 14px;border-radius:12px;font-weight:700;font-size:15px;margin-right:6px}.small-btn.approve{background:var(--green-soft);color:#1d8a52}.small-btn.redo{background:var(--red-soft);color:#c0392b}.submission-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}.submission-card blockquote{background:var(--bg);border-radius:12px;padding:12px 16px;margin:10px 0;font-size:18px}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.timer-track{background:#eee9f8;border-radius:99px;height:14px;overflow:hidden;margin-bottom:18px}.timer-fill{background:linear-gradient(90deg,var(--green),var(--yellow));height:100%;border-radius:99px;transition:width 1s linear}.timer-fill.low{background:var(--red)}.game-question{font-size:46px;font-weight:800;text-align:center;margin:14px 0;letter-spacing:2px}.grade-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:14px}.record-banner{display:inline-block;font-size:24px;font-weight:800;margin:12px 0;background:var(--yellow-soft);color:#c98f00;padding:14px 24px;border-radius:18px;animation:correctPulse .7s ease infinite}.skip-btn{background:none;color:var(--ink-soft);font-weight:700;font-size:16px;text-decoration:underline;margin-top:14px}.confetti-piece{position:fixed;top:-20px;font-size:24px;z-index:999;pointer-events:none;animation:confettiFall linear forwards}@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:.6}}@media (max-width: 600px){.app{padding:10px 10px 80px}.page-title{font-size:25px}.block-card{padding:20px 16px}}