:root{color-scheme:light;--bg:#f6f7ef;--white:#fffffa;--ink:#183d34;--muted:#526b61;--line:#dce7d9;--green:#21594a;--mint:#e1f0e5;--peach:#faeada;--lilac:#eee8f8;--gold:#ffdc78;--radius:25px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.52}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #ae6e14;outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.22}small{font-size:13px}strong{font-weight:800}
.top{background:#fffff8;border-bottom:1px solid var(--line);padding:env(safe-area-inset-top) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left))}
.bar{max-width:1120px;margin:auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:900;line-height:1.25;white-space:nowrap;letter-spacing:.04em}
.brand img{width:47px;height:47px}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:4px;letter-spacing:.08em}
nav{display:flex;gap:8px}nav a,.wallet{font-weight:750;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap}nav a[aria-current],nav a:hover{background:var(--mint);color:#174639}.wallet{background:#fff0c5;color:#76531a;gap:7px}
main{width:min(1120px,calc(100% - 52px));margin:auto;min-height:66vh;padding:22px 0 36px}.crumb,.back{font-size:13px;font-weight:750;color:var(--muted);letter-spacing:.06em}.crumb{margin:0 0 13px}.crumb span{margin:0 6px;color:#899d91}
.hero{min-height:342px;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;border-radius:30px;background:#133e3a url('assets/forest.jpg') center 53%/cover;color:#fffdf1;box-shadow:0 8px 26px #163a3219}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#102c2be0 0%,#102c2ba0 36%,transparent 74%);z-index:-1}
.hero-copy{padding:32px 0 33px clamp(25px,5vw,65px);position:relative;z-index:2}
.hero-figure{position:absolute;bottom:-14px;right:12%;width:min(37%,350px);height:102%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 12px 16px #102a2a75);z-index:1;pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #d0e9c876;background:#204c40a0;border-radius:99px;padding:6px 13px;font-weight:700;font-size:13px;letter-spacing:.13em;color:#eef8dc}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px #ffda81}
.hero h1{font-size:clamp(37px,6.2vw,76px);font-weight:950;letter-spacing:.055em;margin:12px 0 10px}.hero p{font-size:clamp(15px,2vw,20px);line-height:1.65;color:#f2f6e6;margin-bottom:22px}
.primary,.secondary{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:12px 20px;min-height:49px;border:1px solid transparent;border-radius:14px;font-weight:800;text-align:center;line-height:1.25}
.primary{background:var(--green);color:#fffdf5;box-shadow:0 3px 0 #143d33}.secondary{background:#eef5ec;color:#244e41;border-color:#d9e7da}.sun{background:var(--gold);color:#2f3827;border-radius:999px;box-shadow:0 4px 0 #c3913d;padding-inline:23px}.primary:active,.secondary:active{transform:translateY(2px)}
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:20px 0 30px}.track{border:1.5px solid transparent;border-radius:20px;padding:15px 13px;display:flex;align-items:center;text-align:left;gap:11px;min-width:0}.track[aria-pressed=true]{border-color:#43826b;box-shadow:inset 0 0 0 1px #43826b}.mint{--accent:#d9ecdf;background:var(--mint)}.peach{--accent:#f6dfc9;background:var(--peach)}.lilac{--accent:#e8dcf5;background:var(--lilac)}.trackicon{display:grid;place-items:center;width:51px;height:51px;flex:0 0 51px;border-radius:15px;background:#fff9;font-size:26px;font-weight:900}.track small,.track strong,.level strong,.level small{display:block}.track small{font-size:12px;color:var(--muted);line-height:1.25}.track strong{font-size:clamp(17px,2.2vw,23px);margin-top:3px}.trackarrow{margin-left:auto;font-weight:900}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:13px}.kicker{font-size:13px;letter-spacing:.14em;font-weight:850;color:#4b7365;margin-bottom:6px}.section-head h2,.screen-title h1{font-size:clamp(28px,4vw,43px);font-weight:900}.pill{display:inline-block;border-radius:99px;background:#e8efe2;padding:7px 12px;color:#365d4f;font-size:13px;font-weight:800;white-space:nowrap}
.mapmeter{height:6px;background:#e6ebdf;border-radius:99px;overflow:hidden;margin:0 0 13px}.mapmeter i{display:block;height:100%;border-radius:99px;background:#64a688}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.level{display:flex;align-items:center;gap:12px;min-height:108px;border:1px solid var(--line);background:var(--white);border-radius:19px;padding:13px;box-shadow:0 3px 0 #e9eee4;min-width:0}.level:hover,.level.next{border-color:#74a692}.levelicon{flex:0 0 48px;width:48px;height:49px;border-radius:15px;background:var(--accent);display:grid;place-items:center;font-size:26px;font-weight:900}.level small{color:var(--muted);font-size:12px}.level strong{font-size:clamp(16px,1.9vw,20px);margin:3px 0;line-height:1.2}.level b{margin-left:auto;font-size:21px;color:#547e6a}
.back{display:inline-flex;align-items:center;min-height:43px}.screen-title{margin-top:9px;margin-bottom:17px}.steps{display:flex;gap:8px;margin-bottom:14px}.steps span{background:#e9eee3;border-radius:99px;padding:7px 12px;font-weight:750;color:#4b6357;white-space:nowrap}.steps b{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff9;font-size:13px}.steps .active{background:var(--green);color:#fff}.steps .active b{background:#ffffff27}.steps .passed{background:#d9efde}
.sheet{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,35px);box-shadow:0 4px 0 #e8ede3}.lesson-notice{font-size:18px;font-weight:700;margin-bottom:16px}.chips,.actions,.panel-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.chips button{font-size:20px;background:#f0f4e9;border:1px solid #d9e7da;border-radius:12px;min-width:51px;min-height:47px;font-weight:800;padding:4px 10px}.chips .selected{background:var(--green);color:white;border-color:var(--green)}
.study-card,.writing{display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,60px);margin:22px 0 14px}.ruled{background:linear-gradient(to bottom,#eff5e9 24%,#bed7c7 24% 25%,#eff5e9 25% 49%,#bed7c7 49% 50%,#eff5e9 50% 74%,#bed7c7 74% 75%,#eff5e9 75%);border:1px solid #bdd7c8;border-radius:20px;width:min(55vw,360px);height:158px;display:grid;place-items:center}.ruled b{font-size:clamp(58px,13vw,115px);line-height:1}.example{display:grid;justify-items:center;gap:3px}.example span{font-size:43px}.example strong{font-size:28px}.example small,.tip{color:var(--muted)}.tip{margin:0 0 12px;text-align:center;font-size:17px}.lesson>.actions{justify-content:center}.panel-foot{margin-top:23px;padding-top:14px;border-top:1px solid var(--line)}.panel-foot .primary{margin-left:auto}.panel-foot span{font-weight:700;color:var(--muted)}
.grid{width:min(55vw,240px);aspect-ratio:1;flex:none;border:1px solid #8eb2a1;position:relative;background:linear-gradient(90deg,transparent calc(50% - .5px),#bfd6c7 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#bfd6c7 50%,transparent calc(50% + .5px)),#f0f7ec;border-radius:15px;touch-action:none;user-select:none}.grid svg{display:block;touch-action:none}.word-panel h2{font-size:clamp(23px,4vw,41px)}.word-panel p{margin:8px 0 12px;color:var(--muted)}.story,.question-context.long{background:#f0f5e9;border-radius:15px;padding:16px;font-size:18px;line-height:1.7}.story p{margin:5px 0 10px}
.quiz{text-align:center;max-width:770px;margin:auto}.quizbar{display:flex;justify-content:space-between;font-weight:850;color:var(--muted)}.dots{display:flex;justify-content:center;gap:6px;color:#d7e1d6;margin:10px 0 18px}.dots .lit{color:#32806a}.dots .now{color:#a17c36}.quiz h2{font-size:clamp(21px,4vw,33px);margin:0 0 12px}.question-context{font-size:clamp(24px,6vw,49px);font-weight:800;margin:10px auto;white-space:normal}.question-context.long{max-width:530px;text-align:left;font-weight:600}.audio{margin:8px auto}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:590px;margin:14px auto}.option{font-size:clamp(18px,3.4vw,28px);min-height:63px;padding:7px;border:1px solid #cdded0;border-radius:15px;background:#f1f6ee;font-weight:850}.option.correct{background:#c7edd1;border-color:#58a375;opacity:1}.option.wrong{background:#fbe1d5;border-color:#c88673}.feedback{color:#375b4d;min-height:26px;font-weight:750;margin-bottom:8px}.quiz-space{display:block;height:49px}
.game{background:radial-gradient(ellipse at 50% 0,#367664,#16453d 66%);border-color:#16453d;color:#fffdf4}.game .quizbar,.game .feedback{color:#f5f5df}.game .dots{color:#7da498;font-size:29px;gap:15px}.game .dots .lit,.game .dots .now{color:var(--gold);text-shadow:0 0 14px #ffda59a0}.game .dots .now{opacity:.56}.game .option{border:2px solid #c4ddce;color:#183d34}.game .primary{background:var(--gold);color:#233b31}.victory,.review{text-align:center}.victory p,.review p{margin:12px 0 19px;color:var(--muted)}.victory .actions{justify-content:center}.bigstar{font-size:74px;line-height:1;color:#bc841e;margin:7px 0 15px}
.closet{display:grid;grid-template-columns:minmax(230px,1fr) minmax(320px,1.45fr);gap:15px}.dressing,.good{border-radius:22px;border:1px solid var(--line);background:var(--white)}.dressing{text-align:center;align-self:start;padding:18px;background:radial-gradient(ellipse at 50% 55%,#f5f8dc,#e3f0e5 72%)}.mascot{display:block;width:min(100%,310px);margin:8px auto}.dressing h2{font-size:23px}.dressing p{color:var(--muted);margin-top:8px}.goods{display:grid;gap:9px}.good{display:flex;gap:12px;align-items:center;padding:11px}.good h3{font-size:18px}.good small{color:var(--muted)}.good button{margin-left:auto;padding-inline:12px}.goodicon{width:48px;height:48px;flex:0 0 48px;border-radius:13px;display:grid;place-items:center;font-size:25px}
.about h2{font-size:21px}.about p{margin:8px 0 18px;color:var(--muted)}.about a,.foot a{text-decoration:underline;text-underline-offset:3px}.foot{text-align:center;font-size:12px;color:var(--muted);padding:16px 10px calc(16px + env(safe-area-inset-bottom))}.foot a{padding:10px}
@media(max-width:820px){.levels{grid-template-columns:repeat(2,1fr)}.track{gap:8px;padding:11px 9px}.trackicon{width:42px;height:43px;flex-basis:42px}.hero-figure{right:8%}}
@media(max-width:620px){main{width:calc(100% - 28px);padding-top:14px}.top{padding-inline:14px}.bar{flex-wrap:wrap;gap:0;min-height:0;padding:9px 0}.brand{font-size:18px}.brand img{width:38px;height:38px}.brand small{display:none}.wallet{padding:6px 13px;min-height:39px}nav{width:100%;order:3;justify-content:space-between;margin-top:6px;gap:2px}nav a{font-size:14px;padding:8px 10px}.hero{min-height:282px;border-radius:23px}.hero-figure{right:0;width:46%;height:84%}.hero-copy{padding:23px 0 24px 17px}.hero h1{font-size:clamp(31px,8vw,42px)}.hero p{font-size:14px}.tracks{gap:5px;margin:12px 0 22px}.track{display:grid;justify-items:start;gap:4px;padding:8px 5px}.trackicon{width:36px;height:35px;font-size:20px;border-radius:10px}.track small{font-size:9px}.track strong{font-size:15px;white-space:nowrap}.trackarrow{display:none}.levels{grid-template-columns:1fr;gap:8px}.level{min-height:75px}.steps{gap:5px}.steps span{font-size:13px;padding:6px 8px}.writing{flex-direction:column;align-items:center;text-align:center}.writing .actions{justify-content:center}.panel-foot{gap:6px}.panel-foot .primary,.panel-foot .secondary{padding-inline:9px;font-size:14px}.closet{grid-template-columns:1fr}.dressing .mascot{width:210px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.hero-figure{height:94%;bottom:2%;right:9%;width:min(37%,350px)}
.dressing .mascot{width:min(77%,220px);max-height:355px}
.game .option:not(.correct):not(.wrong){background:#e7f4dc}.game .option::before{content:"✦";font-size:.65em;color:#997235;margin-right:.45em}
@media(max-width:620px){.hero-figure{right:0;width:43%;height:78%;bottom:2%}}

/* Adventure HUD, map, and star arena. */
:root{--ink:#214239;--bg:#e1f1da;--white:#fffef0;--green:#24715b;--gold:#ffda66;--line:#d7e5cc}
body{min-height:100dvh;background:radial-gradient(ellipse at 50% -10%,#fff6cb 0,transparent 55%),#e6f3da}
body[data-screen=home]{background:#a9e2d3}
.top{background:#1d5249;color:#fff9df;border:0;box-shadow:0 5px 0 #1643398f;position:relative;z-index:3}
.bar{max-width:1360px;min-height:65px;gap:12px}
.brand{font-size:21px;letter-spacing:.04em}.brand small{color:#cfe8d2}.brand img{width:45px;height:45px;outline:1px solid #a2cabb;border-radius:12px}
nav{gap:5px}nav a{background:#ffffff0a;border:1px solid transparent;padding:8px 12px;gap:5px}nav a span{font-size:1.05em}nav a[aria-current],nav a:hover{background:#e7f5cf;color:#235648;border-color:#fff8;border-radius:14px}
.status-hud{display:flex;align-items:center;gap:8px}.status-hud button{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#306d5f;color:#fff7dc;border:1px solid #fff3;font-weight:900}.wallet{background:#ffdf79;color:#634519;border-radius:14px;box-shadow:0 3px 0 #967038;padding:8px 12px}
body[data-screen=home] main{width:min(1440px,100%);padding:0;min-height:0}
.overworld{width:100%;height:calc(100svh - 66px);min-height:560px;max-height:1070px;background:#a9e2d3 url('assets/island.jpg') center/cover;position:relative;isolation:isolate;overflow:hidden}
.overworld::before{position:absolute;content:"";inset:0;background:linear-gradient(#113d3d55,transparent 28%,transparent 68%,#124e4880);pointer-events:none}
.world-head{position:absolute;top:clamp(16px,3vw,33px);left:clamp(17px,4vw,55px);right:clamp(17px,4vw,55px);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:2}
.world-head h1{font-size:clamp(37px,6vw,76px);letter-spacing:.06em;color:#fff9cf;font-weight:1000;paint-order:stroke fill;-webkit-text-stroke:clamp(4px,.65vw,8px) #225448;filter:drop-shadow(0 5px 0 #255b4a6b);margin-top:5px}
.world-tag,.world-score{background:#fff7dc;border:2px solid #ffe9a3;box-shadow:0 4px 0 #24635356;color:#335344;border-radius:15px;padding:7px 13px;font-weight:900;display:inline-block}
.world-score{text-align:center;border-color:#edf8cf;padding:8px 13px}.world-score strong,.world-score small{display:block}.world-score small{font-size:11px}
.trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.walker,.island-node{position:absolute;left:var(--x);top:var(--y)}
.walker{z-index:3;pointer-events:none;width:clamp(88px,16vw,164px);transform:translate(-50%,-93%);transition:left .56s cubic-bezier(.25,.8,.25,1),top .56s cubic-bezier(.25,.8,.25,1)}
.map-character{display:block;width:100%;filter:drop-shadow(0 6px 4px #236a5860);transform-origin:50% 96%;animation:breathe 3.5s ease-in-out infinite}
.walker.walking .map-character{animation:walk .19s ease-in-out 3}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11%) rotate(4deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.974)}}
.island-node{z-index:4;transform:translate(-50%,-8%);display:grid;justify-items:center;gap:4px;min-width:48px;padding:0;background:none;border:0}
.node-medal{display:grid;place-items:center;width:clamp(50px,6vw,72px);height:clamp(50px,6vw,72px);border-radius:50%;background:#6caa6d;border:4px solid #f4ffe2;box-shadow:0 5px 0 #31694a,0 7px 14px #24594750;color:#fffde0;font-size:26px;font-weight:950}
.island-node strong{background:#fff7dc;color:#295446;padding:4px 8px;border-radius:10px;font-size:clamp(11px,1.8vw,20px);font-weight:950;white-space:nowrap;box-shadow:0 3px 0 #49735e45}
.island-node.chosen .node-medal{background:#ffce54;color:#604626;border-color:#fff4ca;box-shadow:0 5px 0 #b37a38,0 0 0 6px #fff2b676}
.island-node.cleared .node-medal{background:#a382c4;box-shadow:0 5px 0 #765b9a}
.mission-dock{position:absolute;z-index:5;bottom:max(15px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(735px,calc(100% - 28px));display:flex;align-items:center;gap:12px;background:#214e46f5;border:2px solid #6c9e81;border-radius:24px;padding:10px 13px;box-shadow:0 5px 0 #173d36,0 10px 30px #153f3954;color:#fff9dd}
.map-pager{display:flex;align-items:center;gap:5px}.map-pager button{min-width:44px;padding:5px 10px;font-size:27px;background:#3c7464;border-color:#629b81;color:#fff5d8}.map-pager span{font-size:13px;min-width:28px;text-align:center;font-weight:900}
#mission-name{flex:1;min-width:0;line-height:1.2}#mission-name small,#mission-name strong{display:block}#mission-name small{color:#d3e8cf;font-size:11px;margin-bottom:3px}#mission-name strong{font-size:clamp(15px,2.4vw,26px)}
#mission-enter{min-width:fit-content}.world-extra{padding:8px 16px 0;display:flex;justify-content:center;gap:9px}.world-extra .secondary{min-height:45px;background:#f9ffeb}
.sky-deco{position:absolute;inset:0;pointer-events:none}.sky-deco i{position:absolute;font-style:normal;color:#fff4bd;font-size:34px;text-shadow:0 0 12px #fff9b0;animation:twinkle 3.2s ease-in-out infinite}.sky-deco i:nth-child(1){left:33%;top:27%}.sky-deco i:nth-child(2){left:77%;top:16%;animation-delay:.8s}.sky-deco i:nth-child(3){left:68%;top:69%;animation-delay:1.5s}.sky-deco i:nth-child(4){left:5%;top:41%;animation-delay:2s}
@keyframes twinkle{0%,100%{opacity:.32;transform:translateY(3px) scale(.8)}50%{opacity:1;transform:translateY(-5px) scale(1.07)}}
.sheet{border:2px solid #cbdfbd;box-shadow:0 6px 0 #b4caa56e}.steps span{border:1px solid #adc6ac;background:#f1f7e6}.steps .active{background:#27725b;border-color:#1f634d}.steps .passed{background:#ffe7a3;border-color:#eac169}
body[data-screen=game]{background:radial-gradient(ellipse at top,#2c7a72,#132e49 78%);color:#fff6d5}
body[data-screen=game] .back,body[data-screen=game] .kicker{color:#cdebd9}
.game{position:relative;isolation:isolate;max-width:100%;overflow:hidden;min-height:450px;border:2px solid #6ba6a1;background:linear-gradient(#1034398a,#122d4cec),url('assets/forest.jpg') center/cover;box-shadow:0 6px 0 #172e44}
.game h2,.game .question-context{max-width:750px;margin-inline:auto}.game .question-context.long{color:#213f39}.game .dots{font-size:clamp(23px,4vw,34px);margin:0 0 9px}
.game .star-field{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));max-width:800px;gap:8px;margin:18px auto 10px;padding:0 38px}
.game .star-field .option{border:0;background:none!important;color:#44301b;position:relative;isolation:isolate;font-size:clamp(17px,3vw,25px);min-height:110px;line-height:1;filter:drop-shadow(0 5px 0 #805e4080);padding:8px 10px 0}
.game .star-field .option:nth-child(even) .star-glyph{animation-delay:-1.4s}
.game .star-field .option::before{content:none}.star-glyph{display:grid;place-items:center;position:absolute;inset:0;z-index:-1;color:#ffdc73;font-size:115px;line-height:.8;text-shadow:0 0 13px #ffbd4e75;animation:starfloat 3s ease-in-out infinite}
.game .star-field .option.wrong .star-glyph{color:#e6acb0}.game .star-field .option.correct .star-glyph{color:#ffe97e;text-shadow:0 0 28px #fff49e}.game .star-field .option.correct{animation:starhit .44s cubic-bezier(.2,.8,.25,1.2) both}
@keyframes starfloat{0%,100%{transform:translateY(1px)}50%{transform:translateY(-6px)}}
@keyframes starhit{0%{transform:scale(.7)}52%{transform:translateY(-9px) scale(1.23)}100%{transform:scale(1.02)}}
.game-friend{display:flex;align-items:flex-end;gap:4px;margin:0 auto 2px;justify-content:center}.game-friend>div{align-self:center;background:#fef4cf;color:#284939;border-radius:13px;padding:6px 10px;font-weight:850;font-size:13px}
.game-character{width:63px;height:82px;transform-origin:50% 96%;animation:breathe 3s ease-in-out infinite}
.game-friend.cheer .game-character,.win-character{animation:jump .62s ease-out both}
.game-friend.tryagain .game-character{animation:wobble .45s ease-out}
@keyframes jump{0%,100%{transform:translateY(0) scale(1)}38%{transform:translateY(-22%) scale(1.03,1.07)}77%{transform:translateY(0) scale(1.12,.90)}}
@keyframes wobble{0%,100%{transform:rotate(0)}28%{transform:rotate(-9deg)}64%{transform:rotate(6deg)}}
.victory{background:radial-gradient(ellipse at 50% 26%,#fff6bc,#f8ffdf 65%)}.victory-character{position:relative;width:230px;margin:auto}.win-character{width:112px;height:170px}.victory-character i{position:absolute;top:30%;font-size:31px;font-style:normal;color:#c48d26;animation:twinkle 2s ease-in-out infinite}.victory-character i:nth-of-type(1){left:15%}.victory-character i:nth-of-type(2){right:13%;top:14%;animation-delay:.5s}.victory-character i:nth-of-type(3){right:8%;top:54%;animation-delay:1s}
.dressing .mascot{animation:breathe 3.7s ease-in-out infinite;transform-origin:50% 92%}
@media(max-width:880px){nav a{padding:7px 8px;font-size:14px}.brand small{display:none}.overworld{height:calc(100svh - 65px)}}
@media(max-width:640px){.brand{font-size:18px}.bar{gap:3px;padding:6px 0}.top{padding-inline:10px}.status-hud{gap:5px}.status-hud button{width:37px;height:39px}.wallet{min-height:39px}nav a{padding:6px 4px;font-size:12px;gap:3px}.overworld{height:calc(100svh - 103px);min-height:500px}.world-head h1{font-size:clamp(32px,9vw,44px)}.world-tag,.world-score{padding:5px 7px;font-size:12px}.world-score small{font-size:9px}.mission-dock{gap:6px;padding:8px 6px;border-radius:16px}.map-pager{gap:2px}.map-pager button{min-width:38px;padding:2px 5px}#mission-enter{font-size:13px;padding-inline:7px}.game .star-field{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}.game .star-field .option{min-height:93px}.star-glyph{font-size:100px}.island-node strong{max-width:85px;white-space:normal;line-height:1.1}}
@media(prefers-reduced-motion:reduce){.walker,.map-character,.sky-deco i,.game .star-field .option,.star-glyph,.game-character,.win-character,.victory-character i,.dressing .mascot{animation:none!important;transition:none!important}}
.bank-top,.bank-call,.bank-pager,.bank-tabs,.bank-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bank-top,.bank-call,.bank-pager{justify-content:space-between}.bank-meter{height:10px;border-radius:100px;background:#e2ecd5;margin:12px 0;overflow:hidden}.bank-meter>div{height:100%;background:#73b488;border-radius:100px}.bank-call{background:#f8eec4;padding:12px;border-radius:16px;margin-bottom:15px}.bank-call p{color:var(--muted);font-size:14px}.bank-filters{margin-bottom:12px}.bank-filters button{min-height:44px;padding-inline:12px}.bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(69px,1fr));gap:7px}.glyph{display:grid;position:relative;text-align:center;min-height:76px;align-content:center;line-height:1.25;border:1px solid #cadcc7;border-radius:13px;background:#f2f8e8}.glyph.seen{background:#dbf0d8;border-color:#9fc5a0}.glyph strong{font-size:27px}.glyph small{color:var(--muted)}.glyph span{position:absolute;bottom:2px;right:6px;color:#426b53;font-size:12px}.bank-pager{margin-top:13px;justify-content:center}

/* Phonics teaching cards and the talkable guide. */
.mascot-talk{appearance:none;display:inline-block;position:relative;border:0;background:transparent;padding:0;margin:0;line-height:0;color:inherit;cursor:pointer;isolation:isolate;vertical-align:middle;touch-action:manipulation}
.mascot-talk:focus-visible{outline:3px solid #ffe095;outline-offset:2px;border-radius:20px}
.walker .mascot-talk{display:block;width:100%;pointer-events:auto}
.mascot-bubble{display:none}
.mascot-talk.speaking{z-index:8}
.mascot-talk.speaking .mascot-bubble{display:block;position:absolute;z-index:2;bottom:69%;left:72%;width:min(49vw,186px);padding:11px 13px;background:#fff8da;border:2px solid #b88548;border-radius:15px 15px 15px 3px;box-shadow:0 4px 0 #59351d35;color:#4a321b;font-size:.92rem;font-weight:800;line-height:1.4;text-align:left;pointer-events:none}
.walker[style*="85%"] .mascot-bubble,.game-friend .mascot-bubble{left:auto;right:73%}
.mascot-talk.speaking svg{animation:guide-talk .46s ease-in-out 5;transform-origin:50% 92%}
@keyframes guide-talk{50%{transform:translateY(-4px) rotate(-3deg)}}
.phonics-basics h2,.how-to h2{margin:.2em 0;color:#205448}
.phonics-basics .section-head{align-items:center;gap:10px;flex-wrap:wrap}
.pinyin-equation{display:flex;justify-content:center;align-items:center;gap:clamp(8px,3vw,24px);flex-wrap:wrap;background:#e9f7e8;border-radius:18px;margin:15px 0;padding:16px;color:#205448}
.pinyin-equation strong{font-size:clamp(2rem,6vw,3.4rem);line-height:1.06}
.pinyin-equation span{font-weight:900;color:#447467}
.basic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.basic-note{display:flex;flex-direction:column;align-items:flex-start;padding:14px;background:#fff5dd;border-radius:15px}
.basic-note>strong{font-size:1.9rem;color:#205448}
.basic-note p{flex:1;margin:.3em 0 .7em;font-size:1rem;line-height:1.5}
.phonics-card{align-items:center;gap:clamp(10px,4vw,28px)}
.how-to{padding:12px 2px;min-width:0}
.how-to p{margin:8px 0 12px;line-height:1.55}
.how-to .sound-note{color:#70452a;font-weight:700}
.how-to .sound-note:empty{margin:0}
.quiz-audio-status:empty{display:none}
.quiz-audio-status:not(:empty){margin:.55rem 0;font-size:.95rem;font-weight:750}
.glyph-audio-status{color:#70452a;font-weight:700}
.glyph-audio-status:empty{display:none}
.blend-recipe{font-size:1.1rem;font-weight:800;color:#205448}
.tone-lesson{border-top:1px dashed #b8d1be;margin-top:18px;padding-top:14px}
.tone-lesson h3{margin:0 0 4px;color:#205448}
.tone-lesson>p{margin:0 0 12px;line-height:1.5}
.tone-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tone-tile{display:grid;place-items:center;gap:3px;min-height:125px;padding:8px 4px;background:#eaf7ed;border:2px solid #a8cdb5;border-radius:15px;color:#214e40;cursor:pointer;touch-action:manipulation}
.tone-tile:nth-child(2){background:#fff3cd;border-color:#e4c886;color:#654514}
.tone-tile:nth-child(3){background:#eee8fa;border-color:#c3b3e5;color:#4c3a70}
.tone-tile:nth-child(4){background:#fcebe2;border-color:#e7bcaa;color:#703b2b}
.tone-tile.is-playing,.how-to .is-playing{outline:3px solid #23846e;outline-offset:2px}
.tone-tile span,.tone-tile small{font-size:.85rem;font-weight:700;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.tone-tile svg{width:44px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tone-tile strong{font-size:1.85rem;line-height:1.05}
.tone-tile:disabled{opacity:.65;cursor:default}
.phonics-actions{margin-top:15px}
.focus-back{margin-top:10px}
@media(max-width:550px){.tone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phonics-card{grid-template-columns:1fr}.mascot-talk.speaking .mascot-bubble{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.mascot-talk.speaking svg{animation:none}}
.guide-hint{display:inline-block;color:#244e43;background:#f5ffdebd;border-radius:999px;padding:3px 9px;font-size:.8rem;font-weight:750}

/* Game navigation and a shared visual order for the learning screens. */
.top{background:linear-gradient(110deg,#fff9db,#e6f8e6 58%,#d9f2ed);color:#214d44;border-bottom:2px solid #aacdb3;box-shadow:0 4px 0 #4d98722b}
.bar{max-width:1320px;min-height:73px;gap:clamp(9px,2vw,22px);padding-block:8px}
.brand{letter-spacing:.02em;color:#205448;gap:9px;font-size:clamp(1.05rem,2.7vw,1.45rem)}
.brand img{width:48px;height:48px;padding:4px;background:#278770;border:2px solid #fff3b9;outline:0;border-radius:16px;box-shadow:0 3px 0 #28796055}
.brand small{color:#3f7264;letter-spacing:.02em}
.top nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.top nav a{min-height:49px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border:2px solid transparent;border-radius:15px;color:#275549;background:#fffdf0b8;font-size:.92rem}
.top nav a span{display:grid;place-items:center;background:#e8f3dd;border-radius:8px;width:25px;height:25px;flex:none}
.top nav a[aria-current]{color:#1f5547;background:#fff1ad;border-color:#d3ad57;box-shadow:0 2px 0 #c9a96180}
.top nav a[aria-current] span{background:#fff9da}
.top nav a:hover:not([aria-current]){border-color:#82baab}
.status-hud button{min-width:44px;min-height:44px;background:#e9fff1;border:2px solid #9ac3ad;color:#1d5f4d}
.wallet{min-height:44px;background:#ffde76;border:1px solid #d3ac58;box-shadow:0 3px 0 #bd964f}
.screen-title{background:linear-gradient(120deg,#fff6d5,#ecf9e7);border:2px solid #c9dfbd;border-radius:24px;padding:12px 20px;box-shadow:0 4px 0 #b9d4a86b}
.screen-title h1{color:#22574a;line-height:1.12}
body[data-screen=game] .screen-title{background:linear-gradient(115deg,#174c51,#295c63);border-color:#86c4ab;box-shadow:0 4px 0 #143b40}
body[data-screen=game] .screen-title h1{color:#fff5c6}
.sheet{border-radius:24px}
.steps{gap:7px}
.steps span{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:14px;padding:7px 9px;text-align:center}
.lesson-notice,.activity-label{color:#245c4c;font-weight:850}
.lesson-notice{background:#fff6d9;border:1px solid #eddaa0;padding:10px 14px;border-radius:13px}
.primary,.secondary{min-height:49px;padding:10px 16px;border-radius:15px}
.primary{background:#ffd96e;color:#503516;border:2px solid #c69a47;box-shadow:0 3px 0 #bd8b3e}
.secondary{background:#edf8ed;color:#24584c;border:2px solid #a9cbb8;box-shadow:0 2px 0 #b5d3bf85}
button:focus-visible,a:focus-visible{outline:3px solid #2d8a79;outline-offset:3px}
.glyph-learn{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
.glyph-pronunciation,.glyph-blend{padding:14px 18px;border-radius:17px;border:2px solid #bbd8be;background:#f0faed}
.glyph-blend{background:#fff6dd;border-color:#e8d398}
.glyph-reading,.blend-line{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap;color:#215747;font-weight:850}
.glyph-reading strong,.blend-line strong{font-size:clamp(1.55rem,4vw,2.5rem);line-height:1.13}
.glyph-reading span,.blend-line span{border-radius:9px;padding:5px 9px;background:#d9efdf}
.glyph-reading span{font-size:.84rem}
.blend-line span{font-size:1.25rem}
.blend-line i{font-style:normal}
.blend-line .part-on{color:#573308;background:#ffd77a;border-radius:8px;box-shadow:0 0 0 3px #ffc75f7a}
.glyph-learn p{margin:7px 0 10px;line-height:1.5}
.glyph-writing{padding-top:19px;margin-top:18px;border-top:2px dashed #c4d9bb}
@media(max-width:750px){
 .bar{display:grid;grid-template-columns:1fr auto;row-gap:7px}
 .top nav{grid-column:1/-1;grid-row:2}
 .top nav a{min-height:44px;padding:4px;font-size:clamp(.73rem,2.3vw,.9rem);gap:4px}
 .status-hud{grid-column:2;grid-row:1}
 .brand img{width:39px;height:39px}
}
@media(max-width:540px){.glyph-learn{grid-template-columns:1fr}.steps span{padding-inline:4px;font-size:.82rem}.top nav a span{width:20px;height:22px}.screen-title{padding:10px 15px}}

/* Four-view fitting stage, and collectible gear cards. */
.wardrobe{display:grid;grid-template-columns:minmax(250px,.84fr) minmax(0,1.16fr);gap:18px;align-items:start}
.wardrobe-stage{position:sticky;top:12px;padding:14px;border:2px solid #a1c6a5;border-radius:24px;background:#f7f8dd;box-shadow:0 5px 0 #a2c39f7a;overflow:visible}
.stage-top{display:flex;justify-content:space-between;gap:6px;align-items:center}
.stage-badge,.stage-balance{padding:6px 10px;border-radius:999px;background:#e3efd9;color:#235347;font-weight:850;font-size:.83rem}
.stage-balance{color:#61451c;background:#ffe18a;white-space:nowrap}
.turntable{position:relative;display:grid;place-items:end center;isolation:isolate;height:clamp(253px,38vw,368px);margin-top:11px;border-radius:18px;background:radial-gradient(ellipse at 50% 16%,#ffefb9,#c8ebcc 57%,#86b9a3);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.turntable:active{cursor:grabbing}
.turntable .spotlight{position:absolute;inset:0;background:conic-gradient(from 142deg at 50% -8%,#fffdd980 0 75deg,transparent 76deg);pointer-events:none}
.podium{position:absolute;width:82%;height:48px;bottom:9px;border-radius:50%;background:radial-gradient(ellipse at 50% 20%,#fff7c6 0 64%,#d6a85d 65% 90%);box-shadow:0 6px 0 #70937970}
.stage-glints{position:absolute;top:18%;left:7%;right:7%;display:flex;justify-content:space-between;color:#fff9d6;font-size:clamp(18px,4vw,32px);text-shadow:0 2px 3px #639073;pointer-events:none}
.stage-glints span{transform:translateY(105px)}
#closet-actor{width:min(84%,240px);height:94%;position:relative;display:grid;place-items:end center;z-index:1}
#closet-actor .mascot-talk{width:100%;height:100%;touch-action:pan-y}
.closet-character{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 3px #36604a38);transform-origin:50% 94%;animation:turn-settle .22s ease-out both}
@keyframes turn-settle{from{transform:scaleX(.86);opacity:.8}to{transform:scaleX(1);opacity:1}}
#closet-actor .mascot-bubble{left:48%;bottom:67%;width:min(160px,52%)}
.turn-controls{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:5px;margin-top:10px}
.turn-controls button{padding-inline:4px;font-size:clamp(.72rem,1.8vw,.93rem)}
.turn-hint,.try-tag{font-size:.82rem;line-height:1.45;color:#365b4c;margin:11px 0 0}
.try-tag{display:flex;min-height:44px;align-items:center;justify-content:center;gap:6px;font-weight:800;background:#fff3cf;border-radius:11px;padding:4px 6px}
.quiet{border:0;color:#1c6350;background:transparent;text-decoration:underline;min-height:44px;font-weight:700;padding:2px 7px}
.wardrobe-shop{min-width:0}
.shop-head{margin:2px 0 10px;padding:6px 3px}
.shop-head h2{margin:0;color:#24594c}
.shop-head p{margin:3px 0;font-size:.88rem}
.wardrobe-goods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.outfit-card{display:flex;flex-direction:column;align-items:stretch;gap:7px;border:2px solid #c8d9b5;background:#fffdef;border-radius:19px;padding:8px;box-shadow:0 3px 0 #a5be9c62;text-align:left;min-width:0}
.outfit-card.trying{border-color:#c38a39;box-shadow:0 0 0 3px #ffde847a}
.outfit-picture{display:grid;place-items:center;position:relative;min-height:93px;border-radius:13px;background:var(--item);background:radial-gradient(ellipse at 50% 40%,#fff8de,var(--item));padding-bottom:11px;overflow:hidden}
.outfit-picture svg{width:82px;height:78px;filter:drop-shadow(0 3px 0 #684e4528)}
.outfit-picture span{position:absolute;bottom:4px;right:4px;padding:3px 6px;border-radius:8px;background:#fffaea;color:#56452a;font-size:.72rem;font-weight:800}
.outfit-copy{flex:1;padding:0 4px}
.outfit-copy small{font-weight:800;color:#4b6b53}
.outfit-copy h3{font-size:1rem;margin:1px 0 4px;line-height:1.22}
.outfit-copy p,.need-stars{font-size:.77rem;margin:0;line-height:1.35}
.outfit-actions{display:flex;flex-wrap:wrap;gap:5px}
.outfit-actions button{flex:1;font-size:.82rem;min-height:44px;padding:5px}
.need-stars{color:#67471c;font-weight:800;padding:0 4px}
@media(max-width:690px){.wardrobe{grid-template-columns:1fr}.wardrobe-stage{position:relative;top:auto}.turntable{height:300px}.wardrobe-goods{gap:10px}}
@media(prefers-reduced-motion:reduce){.closet-character{animation:none}}
#closet-actor{animation:stage-idle 3.4s ease-in-out infinite}
.stage-glints{animation:stage-twinkle 2.8s ease-in-out infinite alternate}
@keyframes stage-idle{50%{transform:translateY(-3px)}}
@keyframes stage-twinkle{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#closet-actor,.stage-glints{animation:none}}
#closet-actor{position:absolute;bottom:19px;width:min(83%,230px);height:calc(100% - 24px);display:block}
#closet-actor .mascot-talk{display:block}

/* Character actions swap the entire drawn pose; accessories follow the pose. */
.actor-pose{display:none}.pose-rest{display:inline}
.mascot-talk.speaking:has(.pose-wave) .pose-rest,
.walker.walking .pose-rest,.game-friend.cheer .pose-rest,.victory-character .pose-rest{display:none}
.mascot-talk.speaking .pose-wave,.walker.walking .pose-stride,.game-friend.cheer .pose-cheer,.victory-character .pose-cheer{display:inline}
.walker.walking .map-character{animation:stride-bob .19s ease-in-out 3}
.walker.walk-left .pose-stride{transform:translateX(320px) scaleX(-1)}
.mascot-talk.speaking:has(.pose-wave) .actor-pose:not(.pose-wave){display:none}
.wave-marks{animation:wave-signal .48s ease-in-out 5 alternate}
@keyframes stride-bob{50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes wave-signal{to{opacity:.22;transform:translate(-3px,-4px)}}
.island-node.locked .node-medal{background:#e6eadb;color:#405c58;border-color:#c6d5b8;box-shadow:0 4px 0 #60816b65}
.island-node.locked strong{color:#455c52}
.mission-locked{background:#e6ecda;color:#445c4a;border-radius:14px;padding:10px;font-weight:850;text-align:center}
.map-alert:not(:empty){position:absolute;z-index:6;bottom:calc(24px + var(--safe-bottom,0px) + 76px);left:50%;transform:translateX(-50%);max-width:90%;width:max-content;padding:8px 14px;background:#fff6d5;border:2px solid #bf9b54;border-radius:12px;color:#594624;font-weight:800;text-align:center}
.tone-lab h2,.tone-mode h3{color:#205448;margin:0 0 7px}
.tone-lab p,.tone-mode p{margin:0 0 12px}
.contour-box{max-width:580px;margin:15px auto 0;text-align:center;border-radius:18px;background:#eff8e9;padding:10px}
#contour{display:block;width:100%;max-height:210px;touch-action:none;cursor:grab}
.contour-grid{fill:none;stroke:#bad6c2;stroke-width:.7;stroke-dasharray:2 3}
.contour-route{fill:none;stroke:#2d8a78;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
#contour-ball{fill:#ffd773;stroke:#704e24;stroke-width:1.3}
#contour-hint{margin:0;color:#2a6050;font-weight:800}
.tone-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:15px}
.tone-mode{padding:14px}.tone-mode .activity-label{margin-bottom:6px}
@media(prefers-reduced-motion:reduce){.wave-marks,.walker.walking .map-character{animation:none}}
.world-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.world-quick .tone-shortcut{display:inline-flex;min-height:44px;align-items:center;padding-inline:12px;border:1px solid #d1a44f;background:#ffeb9d;box-shadow:0 2px 0 #98733670;color:#5d421d;pointer-events:auto}
.tone-tile .example-badge{font-size:.64rem;padding:1px 3px;border-radius:5px;background:#fffcdf;color:#575145}

/* A shared game toolbar with direct access to every learning area. */
.top{background:#164e47;color:#fff9dc;border-bottom:3px solid #0c3734;box-shadow:0 3px 0 #0c373432}
.bar{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;min-height:70px;gap:12px;padding:8px 0}
.top .brand{color:#fff4cb;font-size:1.12rem}
.top .brand img{width:42px;height:42px;background:#1c6658}
.top .brand small{color:#d7f3df}
.top nav{grid-column:2;grid-row:1;grid-auto-flow:initial;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.top nav a{gap:3px;min-height:45px;padding:5px 3px;background:#e6f5e7;border:1px solid #adcdb7;border-radius:12px;color:#173e36;box-shadow:0 2px 0 #86a694;font-size:.82rem}
.top nav a span{width:23px;height:23px;background:#cce7d4}
.top nav a[aria-current]{background:#ffda78;border:1px solid #e0aa43;box-shadow:0 2px 0 #b07b36;color:#503517}
.top nav a[aria-current] span{background:#fff0bd}
.top nav a:hover:not([aria-current]){background:#fff8df;border-color:#fff8df}
.top :is(a,button):focus-visible{outline-color:#ffe195}
.top .status-hud{grid-column:3;grid-row:1}
.top .status-hud button{background:#dfefe6;color:#19483e}
.top .wallet{min-width:50px;justify-content:center}
@media(max-width:900px){
 .bar{grid-template-columns:minmax(0,1fr) max-content;min-height:0;gap:9px;padding:8px 0 10px}
 .top nav{grid-row:2;grid-column:1/-1}
 .top .status-hud{grid-column:2}
 .overworld{height:calc(100svh - 114px)}
}
@media(max-width:800px){
 .top nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 .top nav a{padding:4px 3px}
 .overworld{height:calc(100svh - 163px)}
}
@media(max-width:385px){
 .top nav a{font-size:.74rem}
 .top nav a span{width:18px;height:20px}
}
.back,body[data-screen=game] .back{display:inline-flex;gap:8px;align-items:center;min-height:46px;padding:6px 13px;color:#19493f;background:#f8fff4;border:2px solid #679f88;border-radius:13px;font-size:.93rem;font-weight:850;box-shadow:0 2px 0 #679f8860;letter-spacing:0}
.back span{font-size:1.22em}
.back:hover{background:#e0f4e1}
.island-node.next-up:not(.chosen) .node-medal{outline:3px solid #fff0a2;outline-offset:3px}
.island-node.cleared .node-medal{background:#7653a1;color:#fff5b9;border-color:#fff1c5}
.island-node.locked .node-medal{background:#e4eadb;color:#405c58;border-color:#c6d5b8}
.map-dialogue{position:absolute;z-index:8;pointer-events:none;width:max-content;max-width:min(275px,calc(100% - 24px));visibility:hidden;padding:10px 14px;background:#fff6da;border:2px solid #a8763d;border-radius:15px 15px 15px 4px;box-shadow:0 4px 0 #64391d38;color:#492e19;font-size:clamp(.94rem,2.4vw,1.13rem);font-weight:850;line-height:1.45}
.map-dialogue.visible{visibility:visible}
#walker .mascot-bubble{display:none}
.bank-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 13px;color:#365b4e;font-size:.9rem;font-weight:750}
.bank-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.glyph{gap:3px;min-height:124px;padding:7px 3px;background:#eef4f8;border:2px solid #bdcfd9;scroll-margin-block:14px}
.glyph:hover{border-color:#3e7b68}
.glyph small{color:#38545b}
.glyph strong{font-size:1.85rem}
.glyph span{position:static;color:inherit;font-size:inherit}
.glyph .glyph-state{font-size:.77rem;font-weight:850}
.glyph .glyph-stars{line-height:1;font-size:.9rem;color:#53616a;letter-spacing:.06em}
.glyph .glyph-pin{margin:2px auto 0;padding:2px 4px;border-radius:5px;background:#e0eaf1;color:#365665;font-size:.71rem;font-weight:700}
.glyph .glyph-pin.done{background:#d4e9fa;color:#164c6a}
.glyph.write-1,.glyph.write-2{background:#def2e2;border-color:#79ac89}
.glyph.write-3{background:#fff1c2;border-color:#c79544}
.glyph-stars .earned,.stroke-stars .earned{color:#805414}
.stroke-stars{display:flex;gap:7px;line-height:1.2;font-size:1.9rem;color:#53616a;margin:7px 0}
.option{position:relative}
.option-mark{position:absolute;top:50%;right:11px;transform:translateY(-50%);font-size:1rem}
.bank-feedback{min-height:54px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 11px;margin:12px 0;padding:5px 9px;border-radius:13px}
.bank-feedback p{margin:0}
.bank-feedback.success{background:#e2f4e1;color:#1c563c;border:1px solid #92c2a0}
.bank-feedback.retry{background:#fff0cc;color:#694b20;border:1px solid #e1b66f}
.read-setup,.read-game,.read-finish{max-width:760px;margin-inline:auto}
.read-setup h2,.read-finish h2{margin-top:0;color:#205448}
.read-choices{border:0;border-top:1px solid #c9dfc5;padding:9px 0;margin:12px 0;min-width:0}
.read-choices legend{padding-right:8px;color:#285b4d;font-weight:850}
.read-choices>div{display:flex;flex-wrap:wrap;gap:8px}
.read-choices button[aria-pressed=true]{background:#ffdb76;color:#523717;border-color:#c59646;box-shadow:0 2px 0 #c59646}
.read-time-settings{padding:12px;background:#f1f8ed;border:1px solid #c9dfc5;border-radius:14px}
.read-custom-time{align-items:center;margin-top:9px;color:#285b4d;font-weight:750}
.read-custom-time input{box-sizing:border-box;width:78px;min-height:44px;padding:6px 9px;border:2px solid #a3cbb6;border-radius:10px;color:#205448;background:#fff;font:inherit}
.read-custom-time input:invalid{border-color:#ad5c3f}
.read-custom-time small,.read-time-line span{font-size:.88rem;color:#42665a}
.read-time-line{display:flex;justify-content:space-between;align-items:center;gap:8px}
.read-note{font-size:.87rem;color:#395b51;margin:14px 0 0}
.read-game{text-align:center}
.read-clock{height:10px;border-radius:20px;background:#e4ecda;margin:16px 0 4px;overflow:hidden}
.read-clock>div{height:100%;background:#5f9b72}
.read-time{color:#215f50}
.read-glyph{display:grid;place-items:center;min-height:150px;font-size:clamp(4.5rem,15vw,8rem);line-height:1.2;color:#214b41;margin:8px auto;border-radius:22px;background:#edf7e7}
.read-glyph.correct{background:#d9f3e1;color:#175742}
.read-glyph.review,.read-glyph.timeout{background:#fff1d2;color:#6b4e25}
.read-status{min-height:1.6em;margin:12px 0;font-weight:800}
.read-status.correct{color:#195d43}
.read-controls{justify-content:center}
.read-result-group{border:1px solid #b6d1b9;border-radius:14px;padding:9px;margin:8px 0;background:#f4f9ee}
.read-result-group summary{min-height:44px;line-height:44px;padding-inline:5px;font-weight:850;cursor:pointer}
.read-result-grid{display:flex;flex-wrap:wrap;gap:6px}
.read-result-char{display:grid;gap:3px;min-width:60px;padding:4px 9px}
.read-result-char strong{font-size:1.3rem}
.read-result-char span{font-size:.75rem}
.read-finish .actions{margin-top:16px}