:root{--sky-top:#7ec8f2;--sky-bottom:#d6f0ff;--grass:#8fd66b;--grass-dark:#6dbf4a;--sun:#ffd95e;--ink:#3a2e4d;--card-bg:#fff;--card-shadow:#3a2e4d2e;--correct:#4caf50;--wrong:#ef5350;--hint:#ffca28;--accent-pink:#ff8fab;--accent-purple:#a78bfa;--accent-yellow:#ffd166;--accent-blue:#4fc3f7;color:var(--ink);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:20px/1.5 Comic Sans MS,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%);min-height:100svh;margin:0}#root{flex-direction:column;min-height:100svh;display:flex}button{cursor:pointer;font-family:inherit}h1,h2{color:var(--ink);margin:0}.screen{text-align:center;flex-direction:column;flex:1;align-items:center;width:100%;max-width:720px;margin:0 auto;padding:24px 16px 40px;display:flex}.start-hero{margin-top:12px}.hero-emoji{font-size:72px;animation:2.2s ease-in-out infinite bob;display:block}.start-screen h1{margin-top:8px;font-size:40px}.subtitle{color:var(--ink);opacity:.75;margin-top:8px;font-size:20px}.mode-tabs{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:24px;display:grid}.mode-tab{background:var(--card-bg);box-shadow:0 4px 0 var(--card-shadow);border:3px solid #0000;border-radius:18px;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;transition:transform .15s,border-color .15s;display:flex}.mode-tab-emoji{font-size:30px}.mode-tab-label{font-size:16px;font-weight:700}.mode-tab-desc{opacity:.6;font-size:12px}.mode-tab-active{border-color:var(--accent-purple)}.mode-tab:active{transform:translateY(3px)}.mix-button{color:#fff;background:linear-gradient(135deg, var(--accent-pink), var(--accent-purple));border:none;border-radius:20px;margin-top:28px;padding:16px 28px;font-size:22px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 6px #3a2e4d40}.mix-button:active{transform:translateY(4px);box-shadow:0 2px #3a2e4d40}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;width:100%;margin-top:28px;display:grid}.lesson-button{background:var(--card-bg);box-shadow:0 4px 0 var(--card-shadow);border:none;border-radius:16px;flex-direction:column;gap:4px;padding:14px 8px;transition:transform .15s,box-shadow .15s;display:flex}.lesson-button:active{box-shadow:0 1px 0 var(--card-shadow);transform:translateY(3px)}.lesson-num{color:var(--accent-purple);font-size:18px;font-weight:700}.lesson-preview{font-size:20px}.game-screen{max-width:900px}.game-header{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.exit-button{background:var(--card-bg);box-shadow:0 3px 0 var(--card-shadow);border:none;border-radius:12px;padding:8px 14px;font-size:16px}.exit-button:active{box-shadow:none;transform:translateY(2px)}.game-title{font-size:22px}.star-counter{background:var(--card-bg);box-shadow:0 3px 0 var(--card-shadow);border-radius:12px;padding:6px 14px;font-size:18px;font-weight:700}.track-scene,.arrival-scene{width:100%;height:170px;box-shadow:0 4px 0 var(--card-shadow);border-radius:20px;margin-top:16px;position:relative;overflow:hidden}.sky{background:linear-gradient(180deg, var(--sky-top), var(--sky-bottom));position:absolute;inset:0}.sun{background:var(--sun);width:40px;height:40px;box-shadow:0 0 24px 6px var(--sun);border-radius:50%;animation:3s ease-in-out infinite pulse;position:absolute;top:14px;right:24px}.cloud{opacity:.9;font-size:28px;animation:18s linear infinite drift;position:absolute}.cloud-1{top:18px;left:-10%}.cloud-2{font-size:20px;animation-duration:24s;top:44px;left:-40%}.grass{background:linear-gradient(180deg, var(--grass), var(--grass-dark));height:28px;position:absolute;bottom:0;left:0;right:0}.track-wrap{height:70px;position:absolute;bottom:28px;left:0;right:0}.stations{position:absolute;inset:0}.station-flag{opacity:.4;font-size:20px;transition:opacity .3s;position:absolute;bottom:8px;transform:translate(-50%)}.station-passed{opacity:1}.rail{background:repeating-linear-gradient(90deg,#a97c50 0 10px,#8a6339 10px 14px,#0000 14px 24px);border-radius:3px;height:6px;position:absolute;bottom:0;left:4%;right:4%}.train{font-size:40px;transition:left .6s ease-in-out;animation:.6s ease-in-out infinite bob;position:absolute;bottom:0;transform:translate(-50%)}.train-emoji{display:inline-block;transform:scaleX(-1)}.smoke{opacity:0;font-size:18px;animation:1.6s ease-out infinite puff;position:absolute;top:-10px;left:4px}.question-card{background:var(--card-bg);width:100%;box-shadow:0 6px 0 var(--card-shadow);border-radius:24px;margin-top:20px;padding:24px}.question-instruction{opacity:.7;margin-bottom:8px;font-size:18px}.speaker-prompt{background:linear-gradient(135deg, var(--accent-yellow), var(--accent-pink));width:120px;height:120px;box-shadow:0 6px 0 var(--card-shadow);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:56px;transition:transform .15s;animation:1.8s ease-in-out infinite speaker-pulse;display:inline-flex}.speaker-prompt:active{box-shadow:0 2px 0 var(--card-shadow);transform:scale(.92)translateY(3px)}@keyframes speaker-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.options-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;display:grid}.option-button{background:#f4f2ff;border:3px solid #0000;border-radius:18px;padding:20px 12px;font-size:32px;font-weight:700;transition:transform .15s,background .15s,border-color .15s}.option-button:not(:disabled):active{transform:scale(.96)}.option-correct{border-color:var(--correct);background:#e3f6e5;animation:.4s pop}.option-wrong{border-color:var(--wrong);background:#fdeaea;animation:.4s shake}.option-hint{border-color:var(--hint)}.sentence-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}.sentence-tile{background:#f4f2ff;border:3px solid #0000;border-radius:12px;justify-content:center;align-items:center;width:52px;height:52px;font-size:28px;font-weight:700;display:inline-flex}.sentence-blank{border:3px dashed var(--hint);background:#fff8e6}.sentence-blank-filled{border-color:var(--correct);background:#e3f6e5;animation:.4s pop}.reorder-slots{border-radius:16px;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;padding:8px;transition:background .15s;display:flex}.reorder-slots-wrong{background:#fdeaea;animation:.4s shake}.reorder-slots-correct{background:#e3f6e5;animation:.4s pop}.reorder-slot{color:var(--ink)}.reorder-slot:disabled{opacity:1}.reorder-slot-filled{border-color:var(--accent-purple);background:#ece7ff}.reorder-pool{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;display:flex}.tile-button{background:linear-gradient(135deg, var(--accent-yellow), var(--accent-blue));width:56px;height:56px;color:var(--ink);box-shadow:0 4px 0 var(--card-shadow);border:none;border-radius:14px;justify-content:center;align-items:center;font-size:28px;font-weight:700;transition:transform .15s,box-shadow .15s;display:inline-flex}.tile-button:not(:disabled):active{box-shadow:0 1px 0 var(--card-shadow);transform:translateY(3px)}.result-screen{justify-content:center}.result-emoji{font-size:72px;animation:.5s pop}.arrival-train{font-size:40px;animation:2s cubic-bezier(.25,.65,.35,1) forwards train-arrive,.6s ease-in-out infinite bob;position:absolute;bottom:0;left:-20%;transform:translate(-50%)}.station-platform{text-align:center;position:absolute;bottom:34px;right:6%}.station-sign{color:var(--ink);background:var(--card-bg);box-shadow:0 3px 0 var(--card-shadow);opacity:0;border-radius:10px;padding:6px 12px;font-size:15px;font-weight:700;animation:.5s 1.9s forwards sign-pop;display:inline-block}.confetti-piece{opacity:0;font-size:22px;animation:1.2s 2s forwards confetti-pop;position:absolute;top:20%}.confetti-1{animation-delay:2s;left:20%}.confetti-2{animation-delay:2.1s;left:45%}.confetti-3{animation-delay:1.95s;left:65%}.confetti-4{animation-delay:2.15s;left:82%}.stars-row{flex-wrap:wrap;justify-content:center;gap:6px;max-width:480px;margin-top:16px;display:flex}.star{opacity:.25;filter:grayscale();font-size:28px}.star-filled{opacity:1;filter:none;animation:.4s pop}.score-text{margin-top:12px;font-size:22px;font-weight:700}.result-actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px;display:flex}.primary-button,.secondary-button{box-shadow:0 5px 0 var(--card-shadow);border:none;border-radius:18px;padding:14px 24px;font-size:20px;font-weight:700;transition:transform .15s,box-shadow .15s}.primary-button{color:#fff;background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple))}.secondary-button{background:var(--card-bg);color:var(--ink)}.primary-button:active,.secondary-button:active{box-shadow:0 1px 0 var(--card-shadow);transform:translateY(4px)}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.train{animation-name:bob}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes drift{0%{transform:translate(0)}to{transform:translate(420px)}}@keyframes puff{0%{opacity:.7;transform:translateY(0)scale(.6)}to{opacity:0;transform:translateY(-24px)scale(1.4)}}@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes train-arrive{0%{left:-20%}70%{left:74%}85%{left:66%}to{left:68%}}@keyframes sign-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes confetti-pop{0%{opacity:0;transform:translateY(0)scale(.5)}30%{opacity:1;transform:translateY(-16px)scale(1)}to{opacity:0;transform:translateY(-48px)scale(.9)}}@media (width<=480px){.speaker-prompt{width:96px;height:96px;font-size:44px}.option-button{padding:16px 8px;font-size:26px}.sentence-tile,.reorder-slot{width:42px;height:42px;font-size:22px}.tile-button{width:46px;height:46px;font-size:22px}}