@font-face{font-family:Andika;src:url('../fonts/Andika-Regular.ttf')}
@font-face{font-family:Andika;src:url('../fonts/Andika-Bold.ttf');font-weight:700}
:root{--ink:#1d3152;--sky:#eaf6ff;--green:#12a34a;--orange:#ff7a14;--yellow:#ffd23f;--red:#ee3b3b;--blue:#2f7de1;--tc:#2f7de1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font-family:Andika,'Comic Sans MS','Trebuchet MS',Tahoma,sans-serif;min-height:100vh;display:flex;flex-direction:column;
background-image:radial-gradient(#ff9ec440 1px,transparent 1px),radial-gradient(#7ec8ff40 1px,transparent 1px),radial-gradient(#b8e98640 1px,transparent 1px),radial-gradient(#ffd54f50 1px,transparent 1px);background-size:12px 12px,16px 16px,14px 14px,18px 18px;background-position:0 0,6px 8px,9px 3px,2px 11px}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:0;border-radius:14px;min-height:48px;padding:10px 18px;font-weight:700;color:var(--ink);background:#fff;box-shadow:0 4px 0 #b9cde4;transition:transform .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:hover{transform:translateY(-2px)}button:active{transform:translateY(2px);box-shadow:0 2px 0 #b9cde4}
button:disabled{opacity:.45;cursor:default;transform:none}
button:focus-visible,a:focus-visible{outline:3px solid #3d7dd6;outline-offset:3px}
.download-chip{position:fixed;top:12px;right:12px;z-index:30;background:#ffd23f;color:#3a2a00;font-weight:700;text-decoration:none;padding:10px 16px;border-radius:999px;box-shadow:0 4px 0 #d9a800,0 6px 14px #0002;font-size:15px}
.download-chip:hover{background:#ffdf66}
.top{max-width:1120px;width:100%;margin:0 auto;padding:16px 230px 8px 22px}
.brand{text-decoration:none;font-weight:700;font-size:26px;letter-spacing:-.5px}
.b1{color:var(--red)}.b2{color:#3d5a80;font-size:20px}.b3{color:var(--green)}
main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:8px 18px 18px}
footer{text-align:center;padding:18px;color:#3d5a80;font-size:14px}
/* home */
.hero{text-align:center;padding:10px 0 6px}
.hero h1{font-size:clamp(34px,6vw,64px);margin:6px 0 2px;line-height:1.05;color:var(--red);letter-spacing:-1px}
.hero h1 span{color:var(--green)}
.hero .sub{font-size:20px;color:#3d5a80;margin:4px 0 6px;font-weight:700}
.hero .hint{font-size:16px;margin:0 0 14px}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{background:#fff;border-radius:24px;border:4px solid var(--tc);box-shadow:0 6px 0 var(--tc);padding:12px;display:flex;flex-direction:column;gap:10px}
.tile-main{display:flex;align-items:center;gap:12px;background:var(--tc);color:#fff;box-shadow:none;border-radius:16px;padding:8px 12px;text-align:left;font-size:24px}
.tile-main img{width:64px;height:64px;background:#fff;border-radius:14px;padding:4px}
.tile-main small{display:block;font-size:13px;opacity:.95;font-weight:700}
.tile-pages{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tile-pages button{min-height:44px;padding:4px 2px;font-size:12px;border-radius:12px;background:#f3f8ff;box-shadow:0 3px 0 #cfdcef;line-height:1.1}
.tile-pages button b{display:block;font-size:16px;color:var(--tc)}
/* page bar */
.pagebar{max-width:1120px;width:100%;margin:0 auto;padding:4px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{min-height:44px;padding:8px 16px}
.topic-tag{background:var(--tc);color:#fff;font-weight:700;border-radius:999px;padding:8px 16px}
.page-num{margin-left:auto;font-weight:700;font-size:20px;background:#fff;border-radius:999px;padding:6px 16px;border:3px solid var(--tc)}
.bottom-nav{max-width:1120px;width:100%;margin:0 auto;padding:6px 18px;display:flex;justify-content:space-between;gap:12px}
.nav-btn{min-width:150px;font-size:18px}
.nav-btn.next{background:var(--green);color:#fff;box-shadow:0 4px 0 #0c7a36}
/* activity */
.act-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.act-head h2{margin:0;font-size:30px;color:var(--tc)}
.instr{font-size:19px;margin:0;display:flex;align-items:center;gap:8px}
.say-btn{min-height:40px;padding:4px 12px;font-size:16px;background:#fff7d1;box-shadow:0 3px 0 #e8c95a}
.card{background:#fff;border-radius:20px;border:3px solid #cfe2f7;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 #cfe2f7}
.card img{width:100%;max-width:150px;aspect-ratio:1;object-fit:contain}
.word{font-size:24px;font-weight:700;letter-spacing:.5px}
.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.words-grid .card{cursor:pointer;color:var(--ink);min-height:0;padding:8px}
.words-grid .card.sel{border-color:var(--tc);box-shadow:0 4px 0 var(--tc);background:#fffbe6}
.spellout{display:flex;gap:3px}
.spellout span{background:#eef5ff;border-radius:6px;padding:0 5px;font-size:18px;font-weight:700;color:var(--tc)}
.recorder{position:sticky;bottom:6px;z-index:5;margin-top:16px;background:#fff;border:4px solid var(--tc);border-radius:22px;padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 6px 18px #0002}
.recorder img{width:70px;height:70px}
.recorder .word{min-width:110px;font-size:30px}
.rec{background:var(--red);color:#fff;box-shadow:0 4px 0 #a82424}
.rec.on{animation:pulse 1s infinite}
.stopb{background:#3d5a80;color:#fff;box-shadow:0 4px 0 #233a5a}
.playb{background:var(--green);color:#fff;box-shadow:0 4px 0 #0c7a36}
.listenb{background:var(--yellow);box-shadow:0 4px 0 #d9a800}
.status{flex-basis:100%;margin:0;font-size:15px;color:#3d5a80}
@keyframes pulse{50%{transform:scale(1.06);background:#ff6b6b}}
/* match */
.round{font-weight:700;color:#3d5a80;margin:0 0 8px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;max-width:720px;margin:auto}
.mcol{display:flex;flex-direction:column;gap:10px}
.mpic,.mword{background:#fff;border:4px solid #cfe2f7;box-shadow:0 4px 0 #cfe2f7;border-radius:18px;min-height:86px;display:flex;align-items:center;justify-content:center;position:relative}
.mpic img{height:76px;width:76px}
.mword{font-size:26px}
.mpic.sel,.mword.sel{border-color:var(--orange);background:#fff1e0}
.done{border-color:var(--green)!important;background:#e7f9ec!important;box-shadow:0 4px 0 #9fdcb1!important}
.done::after{content:'✓';position:absolute;right:10px;top:4px;color:var(--green);font-size:26px;font-weight:700}
/* listen & choose */
.big-listen{font-size:22px;background:var(--yellow);box-shadow:0 5px 0 #d9a800;padding:14px 26px;margin:0 auto 14px;display:block}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:860px;margin:auto}
.choices button{padding:8px;position:relative;border:4px solid #cfe2f7}
.choices img{width:100%;aspect-ratio:1;display:block}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0;flex-wrap:wrap}
.dots i{width:16px;height:16px;border-radius:50%;background:#cfe2f7;display:block}
.dots i.ok{background:var(--green)}.dots i.now{background:var(--orange)}
/* spell & unscramble */
.spell{display:flex;flex-direction:column;align-items:center;gap:12px}
.spell .pic{width:170px;height:170px;background:#fff;border-radius:24px;border:4px solid #cfe2f7;padding:6px}
.slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.slot{width:54px;height:62px;border-radius:12px;background:#fff;border:3px solid #9bb7da;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center}
.slot.given{background:#eef5ff;color:#3d5a80;border-style:solid}
.slot.blank{border-style:dashed;border-color:var(--orange);background:#fff7ec}
.slot.filled{color:var(--green);border-color:var(--green);background:#e7f9ec}
.slot.dash{border:0;background:none;width:20px}
.tiles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ltile{width:62px;height:62px;font-size:32px;background:var(--yellow);box-shadow:0 5px 0 #d9a800;padding:0}
.ltile.used{visibility:hidden}
/* games */
.memory{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:640px;margin:auto}
.mcard{aspect-ratio:1;padding:4px;position:relative;font-size:22px;border:4px solid transparent}
.mcard.back{background:var(--tc);color:#fff;font-size:40px;box-shadow:0 4px 0 #0003}
.mcard img{width:88%;height:88%}
.mcard.done{border-color:var(--green)}
.odd{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:860px;margin:auto}
.odd button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:4px solid #cfe2f7;position:relative}
.odd img{width:100%;aspect-ratio:1}
.ws-wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.ws{display:grid;gap:4px;background:#fff;padding:10px;border-radius:18px;border:4px solid var(--tc);touch-action:manipulation}
.ws button{width:min(9vw,46px);height:min(9vw,46px);min-height:0;padding:0;font-size:min(5vw,24px);border-radius:10px;background:#f3f8ff;box-shadow:none;text-transform:lowercase}
.ws button.start{background:var(--orange);color:#fff}
.ws button.found{background:#a8ecb9;color:#0a5a28}
.ws-list{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px}
.ws-list button{display:flex;align-items:center;gap:8px;min-height:50px;padding:4px 10px;font-size:19px;justify-content:flex-start}
.ws-list img{width:38px;height:38px}
.ws-list .done::after{top:8px}
.snap{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}
.snap .card{width:220px;min-height:230px;justify-content:center}
.snap .card img{max-width:180px}
.snap .card .word{font-size:40px}
.snap-btns{display:flex;gap:16px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.yes{background:var(--green);color:#fff;box-shadow:0 5px 0 #0c7a36;font-size:22px;min-width:200px}
.no{background:var(--orange);color:#fff;box-shadow:0 5px 0 #c25200;font-size:22px;min-width:200px}
.finish{text-align:center;background:#fff;border:4px solid var(--green);border-radius:24px;padding:18px;margin:16px auto;max-width:520px}
.finish p{font-size:30px;margin:0 0 10px;color:var(--green);font-weight:700}
.wrong{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.tick{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%) scale(0);font-size:140px;color:#fff;background:var(--green);width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:40;opacity:0;box-shadow:0 8px 0 #0c7a36}
.tick.show{animation:tick .8s ease}
@keyframes tick{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:39;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 1.4s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@media (max-width:700px){
 .top{padding:58px 14px 4px}.brand{font-size:22px}
 .choices,.odd{grid-template-columns:repeat(2,1fr)}
 .match{gap:10px 12px}.mword{font-size:20px}
 .nav-btn{min-width:0;flex:1}
 .slot{width:42px;height:52px;font-size:28px}.ltile{width:54px;height:54px}
 .words-grid{grid-template-columns:repeat(2,1fr)}
 .snap .card{width:44vw;min-height:180px}
}
.ws-list button{position:relative}
.snap-btns .done,.odd .done,.choices .done{color:var(--ink)!important}