:root{color-scheme:light;--ink:#21173f;--muted:#5d5072;--accent:#7452d8;--paper:#fff;--page:#f6f3ff;--line:#dfd7ef;font-family:system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:0;background:var(--page);color:var(--ink)}
button,select,textarea{font:inherit;color:inherit}
button,select{min-height:44px}
button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:.85rem;padding:.45rem .85rem;font-weight:700}
button:hover:not(:disabled){border-color:var(--accent);background:#f8f5ff}
:focus-visible{outline:3px solid #2964d1;outline-offset:3px}
button:disabled{opacity:.52;cursor:default}
button[aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}
.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent),#000 14%)}
.loader{min-height:100svh;display:grid;align-content:center;justify-items:center;gap:.55rem;background:radial-gradient(ellipse at 50% 45%,#fff 0%,#f5ebff 58%,#e8ddfb 100%);padding:1rem;text-align:center}
.loader strong{font-size:clamp(1.8rem,7vw,3.2rem);color:#4e2d9c;letter-spacing:-.055em}
.loader span{color:var(--muted)}
#app{width:min(100%,55rem);margin:auto;padding:clamp(.6rem,2vw,1.25rem)}
.game-head{display:grid;gap:.5rem;padding:clamp(.8rem,3vw,1.5rem);border-radius:1.4rem;background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden}
.game-head.with-art{grid-template-columns:minmax(0,1fr) minmax(90px,32%);align-items:center}
.game-head img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1rem}
h1,h2,p{margin:0;overflow-wrap:anywhere}
h1{font-size:clamp(1.15rem,4vw,2.2rem);line-height:1.12;letter-spacing:-.035em}
h2{font-size:clamp(1.2rem,4vw,1.85rem)}
.game-head p{color:var(--muted);margin-top:.45rem;font-size:.95rem}
.tools,.controls,.choices,.tiles,.answer-line{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.tools{margin:.65rem 0;justify-content:space-between}
.tools label{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.9rem}
select{max-width:100%;border:1px solid var(--line);background:#fff;border-radius:.7rem;padding:.35rem}
.play-area{display:grid;gap:.75rem;padding:clamp(.75rem,2.5vw,1.5rem);background:white;border:1px solid var(--line);border-radius:1.4rem;min-height:17rem;align-content:start}
.prompt{font-size:clamp(1.05rem,3.6vw,1.45rem);font-weight:800;line-height:1.35}
.progress{font-size:.9rem;color:var(--muted)}
.feedback{min-height:1.3rem;font-size:.95rem;line-height:1.45;color:var(--muted)}
.feedback[data-kind=success]{color:#146749}
.feedback[data-kind=retry]{color:#80500c}
.choices button{min-width:3.35rem;max-width:100%;min-height:3.25rem}
.tiles button,.card-grid button,.dot-grid button{min-height:3rem;min-width:3rem;font-size:1.1rem}
.card-grid,.dot-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:.4rem;max-width:36rem}
.card-grid button,.dot-grid button{min-width:0;padding:.2rem}
.dot-grid button{aspect-ratio:1;border-radius:50%}
.shape{display:inline-block;width:2rem;height:2rem;background:var(--fill,#8060d8);border-radius:.28rem;vertical-align:middle}
.shape.circle{border-radius:50%}.shape.triangle{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.shape.star{clip-path:polygon(50% 0,63% 35%,100% 38%,72% 61%,81% 100%,50% 78%,19% 100%,28% 61%,0 38%,37% 35%)}
.swatch{width:3rem;min-width:3rem;background:var(--fill)!important}
.swatch[aria-pressed=true]{outline:3px solid #20163c;outline-offset:2px}
.lesson-card{margin-top:.75rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:1rem;background:#fff;line-height:1.55}
.lesson-card summary{cursor:pointer;font-weight:800;padding:.25rem}
.lesson-card p{margin:.35rem 0;color:var(--muted)}
.clock{width:min(100%,16rem);display:block;touch-action:none}
.board-art{width:min(100%,34rem);height:auto;display:block;border-radius:.85rem;background:#fbf9ff}
canvas.board-art{touch-action:none;border:1px solid var(--line)}
.story{padding:.9rem;background:#f7f4ff;border-radius:.8rem;line-height:1.55;font-size:1.1rem;white-space:pre-line}
.symbols{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;line-height:1.5}
.symbols button{font-size:1.4rem}
.trace-board{width:min(100%,19rem);aspect-ratio:1;touch-action:none;background:#f9f6ff;border-radius:.85rem}
.note-key{min-width:3rem;min-height:5rem;background:var(--fill,#fff);border-bottom-width:4px}
input[type=text],textarea{width:min(100%,35rem);border:1px solid var(--line);border-radius:.65rem;background:white;min-height:44px;padding:.6rem;line-height:1.45}
.map{width:min(100%,37rem);display:block;background:#eaf5ff;border-radius:.85rem}
.map path{stroke:#fff;stroke-width:1.4;cursor:pointer}.map path:focus{stroke:#191537;stroke-width:2.5;outline:none}
.jigsaw{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));width:min(100%,20rem);gap:3px}
.jigsaw button{aspect-ratio:1;min-width:0;padding:0;border-radius:.25rem;background-size:var(--tile-size);background-position:var(--tile-position)}
.activity-summary{display:grid;gap:.6rem;padding:.8rem;border-radius:.85rem;background:#f5efff}
@media(max-width:425px){.game-head.with-art{grid-template-columns:minmax(0,1fr) 82px}.tools{gap:.4rem}.choices button{flex:1}.play-area{min-height:15rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.quiz-stage{display:grid;gap:.75rem;align-items:start}
.sequence{font-size:clamp(1.2rem,5vw,2rem);line-height:1.35;white-space:pre-line;letter-spacing:.04em;font-weight:750}
.dots{display:inline-grid;grid-template-columns:repeat(5,.75rem);gap:.25rem;align-content:start;width:max-content;min-width:4.75rem}
.dots>span{display:block;min-height:.72rem;border-radius:50%;background:#eee8f6}
.dots>span.filled{background:var(--accent)}
.dots>span:not([aria-hidden]){background:none;grid-column:span 5;color:var(--muted);font-size:.85rem}
.ten-frame{border:1px solid #b7a8ca;padding:.35rem;border-radius:.45rem}
.math-model{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;padding:.55rem;background:#f6f3fc;border-radius:.65rem}
.choices .shape{margin-right:.35rem}
.choices .balloon-key{aspect-ratio:1;flex:0 0 auto;border-radius:50% 50% 48% 48%;min-width:3.5rem;background:linear-gradient(145deg,#fff8fc,#e7c2f2);box-shadow:inset 0 -5px 9px #8b418d22}
.choices .balloon-key:nth-child(2){background:linear-gradient(145deg,#f0fcff,#bce7fc)}
.choices .balloon-key:nth-child(3){background:linear-gradient(145deg,#fcfff7,#d8f3b7)}
.planet{display:inline-grid;justify-items:center;gap:.3rem;padding:.4rem;font-size:.86rem}
.game-head{background:linear-gradient(122deg,#fff 40%,color-mix(in srgb,var(--accent),#fff 91%));box-shadow:0 7px 22px #39206312}
#app{background:radial-gradient(ellipse at 94% 10%,color-mix(in srgb,var(--accent),#fff 90%),transparent 48%)}
.play-area-content{display:grid;gap:.75rem;align-content:start}
.lesson-card a{display:inline-block;margin-left:.7rem;color:#4f2b98}

.learning-settings{margin:0 0 .65rem;padding:.35rem .65rem}
.learning-setting-options{display:flex;flex-wrap:wrap;gap:.35rem .8rem;padding:.25rem 0}
.learning-setting-options label{display:flex;align-items:center;gap:.45rem;min-height:44px;font-size:.9rem}
.learning-setting-options input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.lesson-card h3{font-size:1rem;margin:.8rem 0 .2rem}
.lesson-card .controls{margin-top:.7rem}
.learning-next{background:color-mix(in srgb,var(--accent),white 93%)}
.learning-next button{margin-top:.35rem}
.play-area{position:relative}
.feedback[data-kind=success]:not(:empty){border-left:3px solid #258864;padding:.15rem .45rem;background:#ecfbf4;border-radius:.3rem;font-weight:650}
.feedback[data-kind=retry]:not(:empty){border-left:3px solid #b58a39;padding:.15rem .45rem;background:#fff7e6;border-radius:.3rem}
.learning-burst{position:absolute;top:1.4rem;right:5.5rem;width:1px;height:1px;pointer-events:none;z-index:1}
.learning-burst i{position:absolute;inset:0;width:.52rem;height:.52rem;background:var(--color);border-radius:25%;animation:learning-celebration 700ms cubic-bezier(.17,.67,.25,1) both}
.learning-burst i:nth-child(3n){border-radius:50%}
@keyframes learning-celebration{0%{transform:translate(0,0) rotate(0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(135deg) scale(.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.learning-burst{display:none}}