:root{--bg:#f3f8ff;--ink:#1d2533;--card:#fff;--line:#d7deea;--go:#1f6feb;--ok:#137333;--no:#b3261e;--sun:#ffd54f}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.5 system-ui,"Segoe UI",Arial,sans-serif}
body{overflow-x:hidden}#app,.wrap{max-width:860px;margin:0 auto;padding:12px}
a{color:var(--go)}button{font:inherit;min-height:48px;border-radius:12px;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffbf00;outline-offset:2px}
.go{background:var(--go);color:#fff;border:0;padding:10px 18px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-weight:600}
.go.alt{background:#5b6475}.go.big{font-size:1.2rem;padding:12px 28px}.go[disabled]{opacity:.45}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.iconbtn{font-size:1.3rem;text-decoration:none}.ltitle{flex:1;min-width:160px}
.dots{display:flex;gap:6px;list-style:none;margin:0;padding:0}.dots li{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-size:14px}
.dots li.on{background:var(--go);color:#fff;border-color:var(--go)}.dots li.done{background:#e6f4ea;border-color:var(--ok)}
.steptitle{font-size:1.3rem;margin:.6rem 0 .3rem;outline:none}
.ibar{display:flex;align-items:center;gap:8px;background:#fff8d6;border:1px solid #ecd27a;border-radius:12px;padding:6px 10px;margin:4px 0 10px}
.ibar .itext{flex:1}.hear{min-height:40px;min-width:44px;background:#fff;border:1px solid var(--line)}
.stage{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;min-height:280px}
.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:2px solid var(--line);padding:12px}.card .w{font-size:1.4rem;font-weight:700}
.card small{color:#4b5565}.card.heard{border-color:var(--ok);background:#f2faf4}.card.playing,.replay.playing{background:#fff3c4}
.hint{font-size:15px;color:#5b6475}.note{color:#3c4656}.count{font-size:14px;color:#5b6475;margin:0}
.rulebox{background:#eef4ff;border-left:6px solid var(--go);border-radius:12px;padding:8px 14px;margin-bottom:12px}.rulebox li{margin:4px 0}
.rulebox table{border-collapse:collapse;width:100%;margin:8px 0;font-size:16px}.rulebox th,.rulebox td{border:1px solid var(--line);padding:6px;text-align:left;background:#fff}
.prompt{font-weight:700;font-size:1.1rem;margin:.3rem 0}
.show{margin:6px 0}.tiles{display:flex;gap:8px}.tile{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:var(--sun);font-size:1.6rem;font-weight:700}
.bigword{font-size:1.8rem;font-weight:700;margin:.2rem 0}.sentence{font-size:1.4rem;font-weight:600;margin:.2rem 0}.base{margin:0}
.replay{background:#fff;border:2px solid var(--go);color:var(--go);padding:6px 14px;margin:6px 0}
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin:8px 0}
.opt{background:#fff;border:2px solid var(--line);padding:10px 12px;font-size:1.15rem;display:flex;align-items:center;justify-content:center;gap:8px}
.opt[disabled]{opacity:.55}.opt.ok{border-color:var(--ok);background:#e6f4ea;opacity:1}.opt.bad{border-color:var(--no);background:#fce8e6}
.msg{min-height:1.5em;font-weight:600}.msg.good{color:var(--ok)}.msg.try{color:#8a4b00}.done{font-size:1.2rem;font-weight:700;color:var(--ok)}
.next{margin-top:12px}.acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.act{background:#fff;border:2px solid var(--go);color:var(--go);padding:8px 14px;font-weight:600}.act.alt{border-color:#5b6475;color:#5b6475}
.contour{display:inline-flex;align-items:center;gap:4px;margin:0}.contour svg{width:70px;height:24px}.contour path{fill:none;stroke:var(--go);stroke-width:5;stroke-linecap:round}
.reward{text-align:center}.trophy{font-size:3rem}.stars{font-size:1.6rem}.scores{list-style:none;padding:0}.cover .kid{font-size:1.2rem}.crumb{font-size:14px}
.levels h2{font-size:1.2rem;margin:1rem 0 .3rem}.lgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}.lcard h3{font-size:1.05rem;margin:.1rem 0}.lcard p{margin:.2rem 0;font-size:15px}
.soon{display:inline-block;font-size:13px;color:#5b6475;border:1px dashed #9aa3b2;border-radius:8px;padding:2px 8px}.tick{color:var(--ok);font-weight:700}
@media (max-width:480px){html,body{font-size:17px}#app,.wrap{padding:8px}.stage{padding:10px}.opts{grid-template-columns:1fr 1fr}}
.teacher{margin-top:14px;background:#f6f6f6;border-radius:10px;padding:8px 12px;font-size:15px}.teacher summary{cursor:pointer;font-weight:700}
h2{font-size:1.1rem;margin:.8rem 0 .3rem}
.links{font-size:14px;margin:.3rem 0 0}.links a{display:inline-block;margin:2px 4px 2px 0}
/* Site look: navy, gold, cream, serif headings (same as the stone pages and Grammar) */
:root{--ink:#1e3a5f;--go:#c98f12;--bg:#fdf6e4;--line:#e3e9f1;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif}
html,body{background:linear-gradient(135deg,#fdf6e4 0%,#f1f6fb 45%,#dcebf8 100%) fixed;color:var(--ink)}
h1,h2,h3,.steptitle,.ltitle{font-family:var(--serif);color:var(--ink)}
a{color:#1e3a5f}
.go{background:linear-gradient(180deg,#e6bd47,#a87a0c);box-shadow:0 5px 0 #7d5a06;text-shadow:0 1px 1px rgba(80,50,0,.25)}.go.alt{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:none;text-shadow:none}
.act{border-color:var(--ink);color:var(--ink)}
.dots li.on{background:#1e3a5f;border-color:#1e3a5f}
.ibar{background:transparent;border:0;padding:0;justify-content:center}.ibar .itext{display:none}.ibar.show-text .itext{display:block;background:#fffaf0;border:1px solid #f0dca8;border-radius:12px;padding:6px 10px}
.hear{background:#ff9a3d;color:#fff;border:0;border-radius:999px;padding:6px 16px;font-weight:700}
.lcard,.stage{border-radius:18px;box-shadow:0 6px 18px rgba(30,58,95,.09)}
.contour path{stroke:#c98f12}