@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap";:root{--bg: #fbf6f1;--surface: #ffffff;--line: #f0dfe4;--ink: #2e2329;--ink-muted: #6e5c66;--on-fill: #2e2329;--sun: #f7cb45;--sun-deep: #d9a51e;--sun-soft: #fdf2c9;--sky: #86afe3;--sky-deep: #5b86c4;--sky-soft: #e1ecfa;--berry: #ef8fb0;--berry-deep: #d8638c;--berry-soft: #fde4ec;--leaf: #8fd3b6;--leaf-deep: #55a986;--leaf-soft: #e0f4ea;--grape: #c3b0ee;--grape-deep: #9b84d8;--grape-soft: #efe9fc;--orange: #f8b396;--orange-deep: #e18866;--orange-soft: #fde8de;--correct: #5cc08f;--correct-deep: #3a9a6c;--correct-soft: #e0f4ea;--retry: #f6bd5c;--retry-deep: #d99a2e;--retry-soft: #fdf0d8;--focus: #3d6fc4;--stitch: #efbccd;--shadow-card: 0 10px 0 -4px #f0dfe4, 0 14px 28px rgba(110,70,90,.12);--r-sm: 14px;--r-md: 22px;--r-lg: 32px;--display: "Baloo 2", "Nunito", system-ui, sans-serif;--body: "Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--bg) url(/img/felt.png);background-size:256px;color:var(--ink);font-family:var(--body);font-weight:600;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid var(--focus);outline-offset:3px}#app{min-height:100vh}.wrap{max-width:560px;margin:0 auto;padding:18px 18px 96px;display:flex;flex-direction:column;gap:16px}.wrap.wide{max-width:1040px}.card{background:var(--surface) url(/img/felt.png);background-size:256px;border-radius:var(--r-lg);box-shadow:var(--shadow-card);outline:2.5px dashed var(--stitch);outline-offset:-8px;padding:20px}.patch{border-radius:var(--r-md);padding:12px 14px;outline:2px dashed rgba(255,255,255,.95);outline-offset:-6px}.soft-sun{background:var(--sun-soft)}.soft-sky{background:var(--sky-soft)}.soft-leaf{background:var(--leaf-soft)}.soft-berry{background:var(--berry-soft)}.soft-grape{background:var(--grape-soft)}.soft-orange{background:var(--orange-soft)}.muted{color:var(--ink-muted)}h1,h2,h3,.display{font-family:var(--display);font-weight:800;margin:0}h1{font-size:30px;line-height:34px}h2{font-size:22px;line-height:28px}.btn{--c: var(--surface);--d: var(--line);border:0;border-radius:var(--r-md);background:var(--c) url(/img/felt.png);background-size:256px;box-shadow:0 6px 0 var(--d);margin-bottom:6px;min-height:56px;padding:0 22px;font-family:var(--display);font-size:22px;font-weight:800;outline:2.5px dashed rgba(255,255,255,.85);outline-offset:-7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .12s;touch-action:manipulation}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--d)}.btn.ghost{box-shadow:0 6px 0 var(--d),inset 0 0 0 2px var(--line);outline-color:var(--stitch)}.btn.sun{--c: var(--sun);--d: var(--sun-deep)}.btn.sky{--c: var(--sky);--d: var(--sky-deep)}.btn.leaf{--c: var(--leaf);--d: var(--leaf-deep)}.btn.berry{--c: var(--berry);--d: var(--berry-deep)}.btn.grape{--c: var(--grape);--d: var(--grape-deep)}.btn.retry{--c: var(--retry);--d: var(--retry-deep)}.btn.block{width:100%}.btn.big{min-height:72px;font-size:28px}.btn.round{width:64px;min-height:64px;height:64px;padding:0;border-radius:999px}.btn[disabled]{opacity:.45;pointer-events:none}.rate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.rate .btn{flex-direction:column;gap:0;min-height:68px;padding:0 4px;font-size:18px;line-height:22px}.rate .btn small{font-family:var(--body);font-size:14px;font-weight:700}.bar{display:flex;align-items:center;gap:12px}.progress{flex:1;height:12px;border-radius:999px;background:var(--line);overflow:hidden}.progress>i{display:block;height:100%;background:var(--sun);border-radius:inherit}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:3px 12px;border-radius:999px;font-size:15px;font-weight:800;background:var(--line)}.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.tile{min-width:46px;text-align:center;padding:2px 10px;border-radius:var(--r-sm);font-family:var(--display);font-size:36px;line-height:46px;font-weight:800;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)}.tile.short{background:var(--sky-soft)}.tile.digraph{background:var(--grape-soft)}.tile.long{background:var(--leaf-soft)}.tile.rvowel{background:var(--orange-soft)}.tile.other{background:var(--sun-soft)}.tile.tricky{background:var(--berry-soft)}.tile.silent{background:transparent;box-shadow:none;border:2px dashed var(--ink-muted);color:var(--ink-muted)}.word{font-family:var(--display);font-weight:800;font-size:64px;line-height:70px;text-align:center;word-break:break-word}.ipa{font-size:20px;font-weight:800}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stat{text-align:center;border-radius:var(--r-md);padding:8px 0}.stat b{display:block;font-family:var(--display);font-size:30px;line-height:34px}.map{display:grid;grid-template-columns:repeat(50,minmax(0,1fr));gap:1px}.map i{aspect-ratio:1;border-radius:2px;background:var(--line)}.map i.learning{background:var(--sun)}.map i.known{background:var(--leaf)}.map i.mature{background:var(--leaf-deep)}.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;font-weight:700}.legend span:before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;background:var(--c)}.nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);box-shadow:0 -1px 0 var(--line);padding:6px 6px calc(8px + env(safe-area-inset-bottom));z-index:5}.nav button{border:0;background:none;padding:6px 0;font-size:14px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-muted)}.nav button.on{color:var(--ink)}.ico{width:26px;height:26px}.slots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:72px}.slot{min-width:64px;height:64px;border-radius:var(--r-md);border:3px dashed var(--ink-muted);display:grid;place-items:center;font-family:var(--display);font-size:32px;font-weight:800;padding:0 8px}.slot.filled{border:0}.bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bank .btn{font-size:26px;min-height:58px;padding:0}.shake{animation:shake .35s}@keyframes shake{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{50%{transform:scale(1.08)}}.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.pick button{border:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.pick img{height:200px}.kid{font-family:var(--display)}.kid .wrap{max-width:1000px;padding:20px 24px 32px}.bubble{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:14px 22px;font-size:30px;font-weight:800;box-shadow:var(--shadow-card),inset 0 0 0 3px var(--sky);display:inline-flex;align-items:center;gap:12px}.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}@media (max-width: 700px){.choices{grid-template-columns:repeat(2,minmax(0,1fr))}}.choice{border:0;aspect-ratio:1;border-radius:var(--r-lg);background:var(--surface) url(/img/felt.png);background-size:256px;box-shadow:0 7px 0 var(--line),inset 0 0 0 4px var(--line);outline:2.5px dashed var(--stitch);outline-offset:-10px;display:grid;place-items:center;position:relative}.choice img{width:78%;height:78%;object-fit:contain}.choice.retry{background-color:var(--retry-soft);box-shadow:0 7px 0 var(--retry-deep),inset 0 0 0 5px var(--retry)}.choice.correct{background-color:var(--correct-soft);box-shadow:0 7px 0 var(--correct-deep),inset 0 0 0 5px var(--correct)}.choice.dim{opacity:.35}.garden{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;background:var(--leaf-soft);border-radius:var(--r-lg);padding:20px;box-shadow:inset 0 -10px 0 var(--leaf);outline:2.5px dashed rgba(255,255,255,.9);outline-offset:-8px;min-height:240px;align-content:start}.plant{aspect-ratio:1;border-radius:999px;background:var(--surface);display:grid;place-items:center}.plant img{width:72%;height:72%;object-fit:contain}.plant.bloom{background:var(--sun-soft);box-shadow:0 0 0 5px var(--sun)}.stars{display:flex;gap:4px;justify-content:center}.stars svg{width:38px;height:38px}.mascot{height:170px}.hold{position:relative}.hold .ring{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:999px;border:5px solid var(--grape-deep);clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0)}.center{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spacer{flex:1}input[type=number],select,input[type=search]{font:inherit;padding:10px 12px;border-radius:var(--r-sm);border:2px solid var(--line);background:var(--surface)}.list{display:flex;flex-direction:column;gap:6px}.li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--surface)}.li .w{font-family:var(--display);font-weight:800;font-size:20px;min-width:120px}.dot{width:12px;height:12px;border-radius:4px;background:var(--line);flex:none}.dot.learning{background:var(--sun)}.dot.known{background:var(--leaf)}.dot.mature{background:var(--leaf-deep)}@media (prefers-reduced-motion: reduce){.shake,.pop{animation:none}.btn{transition:none}}