@font-face{font-family:SchoolPrint;src:url("../assets/SchoolPrint.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:block}
:root{--ink:#3b2f4a;--p:#ff8fab;--pd:#e0527a}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:#fff7e8;color:var(--ink);font-family:SchoolPrint,Arial,sans-serif;font-size:18px}
#app{max-width:780px;margin:auto;padding:14px 14px 40px}
h1{font-size:2rem;margin:.2em 0}h2{text-align:center}
.hero{text-align:center}.bunny{font-size:5rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{border:0;border-radius:28px;padding:18px 8px;font:inherit;font-size:1.1rem;color:var(--ink);box-shadow:0 5px 0 #0002;cursor:pointer}
.card span{display:block;font-size:2.6rem}
.c0{background:#ffd6e0}.c1{background:#d4f0ff}.c2{background:#d8f5c8}.c3{background:#fff0b3}.c4{background:#e5d9ff}.c5{background:#ffe0c2}.c6{background:#c9f2ec}
.btn{display:inline-block;border:0;border-radius:24px;background:var(--p);color:#fff;font:inherit;font-weight:700;padding:14px 22px;margin:6px;cursor:pointer;box-shadow:0 4px 0 var(--pd);text-align:center}
.btn.alt{background:#fff;color:var(--ink);box-shadow:0 4px 0 #0002}
.btn.huge{display:block;width:100%;font-size:1.5rem;padding:22px;margin:14px 0}
.back{border:0;background:none;font:inherit;cursor:pointer;padding:8px}
.row{display:flex;flex-wrap:wrap;justify-content:center}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px;margin:14px 0}
.L{height:68px;border-radius:20px;border:3px solid #ddd;background:#fff;color:#999;font:inherit;font-size:1.9rem;font-weight:700;cursor:pointer}
.L.on{background:#8be28b;border-color:#3fae3f;color:#12501a}.L.on::after{content:"✓";font-size:.9rem;margin-left:2px}
.big{font-size:clamp(3rem,16vw,7rem);text-align:center;font-weight:700;background:#fff;border-radius:32px;padding:40px 10px;margin:18px 0;word-break:break-word}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt{height:96px;font:inherit;font-size:2.6rem;font-weight:700;border-radius:26px;border:0;background:#d4f0ff;cursor:pointer;color:var(--ink)}
.opt.ok{background:#8be28b}.opt.no{background:#ffd0d0;opacity:.6}
.fb,.info{text-align:center}.fb{font-size:1.4rem;min-height:2em}
.stat{background:#fff;border-radius:24px;padding:20px;margin:12px 0;font-size:1.5rem;text-align:center}
.empty{text-align:center;font-size:1.2rem}.empty div{font-size:4rem}
canvas{display:block;max-width:100%;margin:10px auto;border-radius:16px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}.opts{grid-template-columns:repeat(4,1fr)}}
.pad{touch-action:none;background:#fff;border:4px dashed #ffb3c6;border-radius:28px;width:100%;max-width:420px;aspect-ratio:1;display:block;margin:10px auto}
.sent{font-size:clamp(1.8rem,7vw,3.2rem);line-height:1.3}.c7{background:#ffd9f0}

.big,.opt,.L,.sent{font-family:SchoolPrint,Arial,sans-serif;font-weight:400;font-synthesis:none}

.word-picture{text-align:center;font-size:7rem;margin:20px}
.letter-slots,.letter-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:24px 0}
.letter-slot,.letter-tile{font:400 2rem SchoolPrint,Arial,sans-serif;border-radius:18px;min-width:100px;min-height:80px;padding:12px;color:var(--ink)}
.letter-slot{border:3px dashed #e28bb2;background:white}.letter-tile{border:3px solid #80bddd;background:#d4f0ff;touch-action:none;cursor:grab}
.letter-tile[hidden]{display:none}.letter-tile.selected{outline:4px solid #e78e23}.drag-copy{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:1000;opacity:.9}
.activity-count{font-size:.95rem}

.reading-picture{text-align:center;font-size:5rem;margin:12px}.reading-picture[hidden]{display:none}

.word-picture img{width:180px;height:180px;object-fit:contain}.reading-picture img{width:130px;height:130px;object-fit:contain}

.letter-slot,.letter-tile{min-width:54px;min-height:64px;padding:8px;font-size:2rem}.letter-slots,.letter-bank{gap:8px}

.missing-word{display:flex;flex-wrap:wrap;justify-content:center;gap:.08em}.letter-gap{display:inline-block;min-width:.65em;color:#ca5688;border-bottom:4px dashed #e28bb2}