:root{font-family:ui-rounded,"Arial Rounded MT Bold","PingFang TC","Microsoft JhengHei",sans-serif;color:#42556b;font-synthesis:none;background:#e8f0ee;font-weight:700}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;overflow:hidden;user-select:none;touch-action:manipulation}button{font:inherit;border:0;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:4px solid #8b70ca;outline-offset:3px}button:active{transform:translateY(3px)}#app{position:relative;max-width:480px;height:100vh;height:100dvh;min-height:480px;margin:auto;overflow:hidden;background:#d2f0e9;box-shadow:0 0 90px #74958e40}#background{position:absolute;inset:0;background:linear-gradient(#b9e4e9,#e9f6d9);transition:background .6s}#background>svg{height:100%;width:100%;object-fit:cover}#app[data-area="2"] #background{background:linear-gradient(#b3dfcf,#e5eed1)}#app[data-area="3"] #background{background:linear-gradient(#a8e0ed,#d8f2ef)}#app[data-area="4"] #background{background:linear-gradient(#d7d6f2,#ffedf4)}#app[data-area="5"] #background{background:linear-gradient(#8476b8,#d3bde4)}#screen{position:relative;height:100%;padding:calc(20px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;animation:appear .3s ease}#mute{position:absolute;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:30;width:64px;height:64px;border:2px solid #ffffffaa;border-radius:50%;font-size:25px;background:#fff9;backdrop-filter:blur(8px);box-shadow:0 4px 0 #51798020}h1,h2,p{margin:0}h1{font-size:42px;letter-spacing:3px;line-height:1.25;color:#416e69;text-shadow:0 3px #fff}h2{font-size:27px;line-height:1.4}.eyebrow{font-size:13px;letter-spacing:4px;color:#658a80;text-transform:uppercase}.pill{padding:8px 17px;border-radius:25px;background:#fff9;font-size:14px;letter-spacing:1px}.primary,.secondary{min-height:64px;border-radius:23px;padding:15px 28px;font-size:22px;box-shadow:0 6px 0 #b3794a;background:#ffd582;border:2px solid #fff4d7}.primary{color:#704e3a}.secondary{background:#fff9;box-shadow:0 4px 0 #66888b30;color:#647584;font-size:17px}.title{justify-content:center;gap:19px;text-align:center}.title .subtitle{font-size:17px;line-height:1.7;max-width:300px}.title-art{height:235px;width:300px;position:relative}.title-art .hero{width:220px;position:absolute;bottom:0;left:15px}.title-art .fairy{width:108px;position:absolute;right:0;top:0}.idle{animation:bob 2.8s ease-in-out infinite}.tiny{font-size:12px;opacity:.65}.title .primary{min-width:240px}.story{justify-content:flex-end;gap:20px}.story-top{align-self:flex-start;margin-top:8px}.skip{position:absolute;top:calc(85px + env(safe-area-inset-top));right:18px;min-height:64px;padding:12px 20px;background:#fff9;border-radius:22px;font-size:18px;z-index:3}.story-stage{width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0}.story-stage svg{max-height:320px;width:85%;filter:drop-shadow(0 12px 8px #44665f20)}.dialogue{position:relative;width:100%;background:#fffcf6;border:3px solid white;border-radius:28px;padding:30px 23px 21px;box-shadow:0 8px 0 #6f85852b;text-align:left;min-height:184px;flex-shrink:0}.speaker{position:absolute;top:-20px;left:20px;background:#b1d9c8;border:3px solid white;border-radius:18px;padding:6px 19px;font-size:17px}.dialogue p{font-size:22px;line-height:1.65}.pager{text-align:right;font-size:13px;margin-top:14px;color:#8d9e9a}.map-head{align-self:flex-start;padding-top:9px}.map-head p{font-size:14px;margin-top:7px}.map-path{position:relative;width:100%;flex:1;min-height:300px;max-height:620px;margin:12px 0}.path-line{position:absolute;inset:0;width:100%;height:100%}.map-node{position:absolute;display:flex;align-items:center;gap:10px;min-height:72px;background:transparent;text-align:left;padding:0;transform:translate(-50%,-50%);width:220px}.map-node:active{transform:translate(-50%,-47%)}.node-icon{height:66px;width:66px;border:4px solid #fff9;border-radius:25px;background:#fff1bc;box-shadow:0 6px 0 #8eaf8d;display:grid;place-items:center;font-size:32px;flex-shrink:0}.node-copy{background:#ffffffe0;padding:7px 12px;border-radius:16px;box-shadow:0 3px 0 #71918220}.node-copy strong{font-size:16px;white-space:nowrap}.stars{color:#e6ae38;letter-spacing:3px;font-size:18px}.locked{filter:grayscale(.8);opacity:.6}.map-footer{display:flex;align-items:center;gap:20px}.text-btn{background:transparent;min-height:64px;padding:12px;font-size:14px}.battle{gap:9px}.battle-head{align-self:flex-start;height:56px;padding-right:55px}.battle-head strong{font-size:19px}.battle-head p{font-size:12px;margin-top:5px}.battle-stage{position:relative;width:100%;height:205px;flex:1;min-height:140px;max-height:250px;display:flex;align-items:flex-end;justify-content:space-between}.fighter{position:relative;width:47%;text-align:center}.fighter svg{width:100%;max-height:195px;vertical-align:bottom}.fighter-label{display:inline-block;background:#fff9;border-radius:15px;padding:4px 12px;font-size:13px}.hearts{color:#ec8798;letter-spacing:2px;font-size:15px;margin:3px 0}.hp-track{height:9px;width:85%;background:#fff9;border:2px solid white;border-radius:10px;overflow:hidden;margin:4px auto}.hp-fill{height:100%;background:#e996a7;transition:width .25s}.question-card{width:100%;background:#fffdf5f5;border:3px solid #fff;border-radius:27px;padding:16px 14px;box-shadow:0 6px 0 #58797022;text-align:center}.question-card h2{font-size:23px;line-height:1.45}.visual{margin-top:8px;max-height:145px;overflow:hidden}.objects{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2px}.objects svg{width:34px;height:34px}.groups{display:flex;justify-content:center;align-items:center;gap:12px}.groups>.objects{border:2px dashed #d9e8dc;border-radius:15px;padding:7px;flex:1}.shape,.clock{height:128px}.shape svg,.clock svg{height:100%;width:auto}.coins{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.coin{display:inline-block;max-width:19%}.coin svg{width:100%;height:100%}.answers{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;margin-top:2px}.answer{min-height:64px;background:#fffdf7;border:2px solid #fff;border-radius:20px;font-size:27px;box-shadow:0 5px 0 #9abbb0;transition:background .15s}.answer:disabled{cursor:default}.answer.wrong{background:#dce1e1;color:#99a0a2;box-shadow:0 3px 0 #bdc6c6}.answer.correct{background:#a7dec0;color:#39785a;box-shadow:0 4px 0 #6aa487}.fairy-row{display:flex;gap:6px;align-items:center;width:100%;min-height:74px}.fairy-icon{width:55px;flex-shrink:0}.hint{font-size:14px;line-height:1.5;background:#ffffffbf;border-radius:16px;padding:9px 12px;flex:1}.slash{position:absolute;inset:8% 0;color:#fff4b0;font-size:85px;pointer-events:none;animation:slash .5s both}.damage{position:absolute;left:45%;top:8%;color:#e88581;font-size:39px;text-shadow:2px 2px white;animation:damage .9s both}.attack{animation:dash .55s ease-in-out}.hit{animation:hit .45s}.poof{animation:poof .65s both}.friendly{animation:friendly .75s}.entrance{animation:entrance .8s}.shake{animation:shake .3s}.credits{justify-content:center;gap:19px;text-align:center}.credits .medal{width:185px}.credits p{font-size:18px;line-height:1.8}.credits h1{font-size:35px}.credits .stars{font-size:37px}#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}#modal:not(:empty){position:absolute;inset:0;z-index:50;background:#41546877;display:grid;place-items:center;padding:26px;backdrop-filter:blur(5px)}.modal-card{background:#fffdf5;border:4px solid white;border-radius:30px;padding:25px;text-align:center;box-shadow:0 10px 0 #3f526633}.modal-card p{line-height:1.7;margin:16px 0}.modal-actions{display:flex;gap:12px}.modal-actions button{flex:1;padding:12px;font-size:18px}@keyframes bob{50%{transform:translateY(-9px) rotate(2deg)}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes dash{40%{transform:translateX(65%) rotate(12deg)}70%{transform:translateX(5%) rotate(-5deg)}}@keyframes hit{20%,60%{transform:translateX(9px);filter:brightness(1.8)}40%,80%{transform:translateX(-8px)}}@keyframes slash{from{opacity:0;transform:scale(.3) rotate(-45deg)}40%{opacity:1;transform:scale(1.2) rotate(10deg)}to{opacity:0;transform:scale(1.5) rotate(30deg)}}@keyframes damage{to{transform:translateY(-65px);opacity:0}}@keyframes poof{40%{transform:scale(1.2);filter:brightness(2)}to{transform:scale(.1);opacity:0}}@keyframes friendly{0%{transform:scale(.1);opacity:0}60%{transform:translateY(-20px) scale(1.1)}100%{transform:none;opacity:1}}@keyframes entrance{0%{transform:translateY(-150px) scale(.3);opacity:0}65%{transform:translateY(10px) scale(1.1)}100%{transform:none;opacity:1}}@keyframes shake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}@media(max-height:720px){#screen{padding-top:calc(12px + env(safe-area-inset-top));gap:8px}.battle-head{height:45px}.battle-stage{min-height:110px;max-height:165px}.fighter svg{max-height:130px}.question-card{padding:11px}.question-card h2{font-size:21px}.visual{max-height:105px}.clock,.shape{height:100px}.objects svg{width:27px;height:27px}.fairy-row{min-height:61px}.hint{font-size:13px}.title-art{height:180px}.title-art .hero{width:180px}.title{gap:13px}.story-stage svg{max-height:240px}.dialogue p{font-size:20px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-height:720px){#screen.battle{gap:6px;padding-left:16px;padding-right:16px}.battle-head{height:40px;flex-shrink:0}.battle-stage{min-height:85px}.battle-stage .fighter svg{max-height:115px}.battle .question-card{padding:10px}.battle .question-card h2{font-size:21px}.battle .visual{max-height:88px}.battle .clock,.battle .shape{height:86px}.battle .fairy-row{min-height:55px}.battle .fairy-icon{width:43px}.battle .hint{padding:7px 9px;font-size:13px}.battle .coin{max-height:65px}.battle .objects svg{height:25px;width:25px}}

/* Reading aids and a reachable exit on every battle screen. */
ruby{ruby-align:center}rt{font-size:.5em;font-weight:500;line-height:1.2;letter-spacing:.03em}.dialogue p{line-height:2}.battle-head{display:flex;align-items:center;gap:8px;height:auto;min-height:64px;width:100%;flex-shrink:0}.battle-head>div{min-width:0}.battle-head strong{font-size:16px}.battle-head p{font-size:11px;line-height:1.4}.back-map{min-height:64px;min-width:64px;padding:8px;background:#fffdf5;border-radius:18px;font-size:14px;flex-shrink:0}.coin{aspect-ratio:1;height:auto;flex-shrink:1}.coin svg{display:block;width:100%;height:auto;aspect-ratio:1}.subtraction-picture p{font-size:14px;margin-top:3px}.coins{gap:3px}.battle .visual:has(.coins){max-height:none;overflow:visible}.coins .coin{width:min(13%,48px)!important;max-width:13%}.hearts{font-size:12px;color:#568979;letter-spacing:0}
@media(max-height:720px){.battle-head{height:auto;min-height:64px}.battle .coin{max-height:none}.coins .coin{width:min(13%,36px)!important}.battle-head strong{font-size:14px}.battle-head p{font-size:10px}}

/* Let the arena use the phone's height while keeping every control reachable. */
#screen.battle{gap:clamp(8px,1.5dvh,14px)}
.battle .battle-stage{flex:1 1 auto;height:auto;min-height:180px;max-height:none;align-items:center;padding-top:24px}
.battle .fighter{width:46%;isolation:isolate}
.battle .fighter> .idle,.battle .enemy-art{width:125%;margin-left:-12.5%}
.battle .fighter svg{width:100%;max-height:240px;overflow:visible}
.battle .question-card{flex-shrink:0;padding:clamp(12px,2.4dvh,22px) 14px}
.battle .question-card h2{font-size:clamp(21px,3dvh,26px)}
.battle .answers{flex-shrink:0;gap:12px}
.battle .answer{min-height:clamp(64px,9dvh,80px);font-size:30px}
.battle .fairy-row{margin-top:auto;flex-shrink:0;min-height:78px}
.boss .enemy-art{position:relative;transform-origin:center bottom}
.battle .boss .enemy-art{width:169%;margin-left:-34.5%}
.battle .boss .enemy-art svg{max-height:290px;filter:drop-shadow(0 0 12px #ffe99bdd)}
.boss .enemy-art::before{content:"";position:absolute;inset:10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#fff5baaa,transparent 70%)}
.battle .final-boss .enemy-art{width:183%;margin-left:-41.5%}
.battle .final-boss .enemy-art svg{filter:drop-shadow(0 0 14px #ce95ff)}
.final-boss .enemy-art::before{inset:-5%;background:radial-gradient(ellipse,#e7b4ffbb,#b99af755 45%,transparent 70%)}
.final-boss .enemy-art::after{content:"✦ ˚ ✧　✦";position:absolute;inset:12% 0;color:#fff1ff;text-shadow:0 0 8px #ba75f3;font-size:26px;animation:aura 1.5s ease-in-out infinite alternate;pointer-events:none}
.boss-crown{position:absolute;top:-20px;left:0;right:0;color:#aa7835;font-size:22px}
.boss .hp-track{background:#ead9f5;border-color:#fff0bc}
.battle .slash{width:100%;height:100%;inset:0;z-index:4;filter:drop-shadow(0 0 8px #ffdc76)}
.attack{z-index:5;animation:dash .5s ease-in-out}
.victory-banner{position:absolute;left:0;right:0;top:32%;z-index:8;padding:12px 4px;border:3px solid white;border-radius:24px;background:linear-gradient(120deg,#fff1ad,#ffe3d8);box-shadow:0 6px 20px #8b679333;text-align:center;font-size:26px;color:#84613e;animation:banner .9s both;pointer-events:none}
.victory-banner span{display:block;font-size:17px;letter-spacing:12px;color:#dda83c}
.story::before{content:"";position:absolute;inset:0;background:#fff6;pointer-events:none}
.story>*{position:relative}.story .skip{position:absolute}.story-stage{border-radius:45%;background:radial-gradient(ellipse at 50% 80%,#fff8,transparent 65%)}
.story-pair svg{width:50%;max-height:270px}
.map-scenery{position:absolute;inset:0;pointer-events:none}.map-scenery span{position:absolute;font-size:34px;opacity:.8}.map-scenery .map-castle{right:3%;top:-3%;font-size:51px}
.map-hero{position:absolute;width:66px;height:66px;transform:translate(-167%,-105%);pointer-events:none;z-index:3;filter:drop-shadow(0 3px 2px #56745a44)}.map-hero svg{width:100%;height:100%}
@keyframes aura{to{opacity:.5;transform:scale(1.08) rotate(5deg)}}
@keyframes banner{0%{opacity:0;transform:scale(.6) rotate(-5deg)}25%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-18px)}}
@media(max-height:720px){
 #screen.battle{gap:6px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .battle .battle-stage{min-height:145px;padding-top:16px}
 .battle .fighter>.idle,.battle .enemy-art{width:100%;margin-left:0}
 .battle .fighter svg{max-height:145px}
 .battle .boss .enemy-art{width:135%;margin-left:-17.5%}
 .battle .boss .enemy-art svg{max-height:180px}
 .battle .final-boss .enemy-art{width:145%;margin-left:-22.5%}
 .battle .question-card{padding:10px}.battle .question-card h2{font-size:21px}
 .battle .answer{min-height:64px;font-size:27px}.battle .answers{gap:9px}
 .battle .fairy-row{min-height:55px}.battle .hint{font-size:12px;line-height:1.4}
 .battle .visual{max-height:86px}.battle .clock,.battle .shape{height:82px}
}
@media(prefers-reduced-motion:reduce){.final-boss .enemy-art::after,.victory-banner{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Size sprites from the available arena height, including long hint text. */
.battle .battle-stage{container-type:size;min-height:100px}
.battle .fighter>.idle,.battle .enemy-art{height:clamp(48px,calc((100cqh - 48px) * .7),240px)}
.battle .fighter svg{height:100%;max-height:none}
.battle .boss .enemy-art{height:clamp(65px,calc((100cqh - 48px) * .945),324px)}
.battle .final-boss .enemy-art{height:clamp(70px,calc(100cqh - 48px),350px)}
.battle .boss .enemy-art svg{max-height:none}
@media(max-height:720px){.battle .visual{max-height:72px}.battle .clock,.battle .shape{height:70px}.battle .hint{padding:6px 8px}.battle .fairy-row{min-height:52px}.battle .question-card{padding:8px 10px}}
/* final layout tweaks (orchestrator): bigger regular sprites, keep bosses inside the screen */
.battle .fighter>.idle,.battle .enemy-art{height:clamp(56px,calc((100cqh - 48px) * .86),250px)}
.battle .boss .enemy-art{width:140%;margin-left:-38%;height:clamp(70px,calc((100cqh - 40px) * .98),330px)}
.subtraction-picture p{margin:0 0 3px}
@media(max-height:720px){.battle .visual:has(.subtraction-picture){max-height:none;overflow:visible}.battle .subtraction-picture .objects{transform:scale(.8);transform-origin:top center;margin-bottom:-12px}}
/* generated-image art */
.bg-photo{position:absolute;inset:0;background-size:cover;background-position:center bottom;background-repeat:no-repeat}
.bg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.05) 45%,rgba(255,255,255,.12))}
#app[data-area="5"] .bg-photo::after{background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.04))}
svg.sprite{overflow:visible}
svg.sprite image{image-rendering:auto}
svg.sprite.is-friendly image{filter:saturate(1.08) brightness(1.04)}
svg.sprite .friend-sparkles{animation:friendTwinkle 1.4s ease-in-out infinite;transform-origin:100px 100px}
@keyframes friendTwinkle{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
/* v2: pocket-sized paths, collections, and playful rewards. */
.coin-hud{position:absolute;left:18px;top:calc(12px + env(safe-area-inset-top));height:48px;max-width:65%;padding:10px 16px;border:2px solid #fff9;border-radius:25px;background:#fff6d9ed;color:#926a35;font-size:20px;z-index:25;box-shadow:0 4px 0 #957a4420;font-variant-numeric:tabular-nums;pointer-events:none}
#screen{padding-top:calc(78px + env(safe-area-inset-top));gap:12px}#mute{width:56px;height:56px;top:calc(10px + env(safe-area-inset-top))}.v2-header{display:flex;width:100%;gap:10px;align-items:center;min-height:56px;flex-shrink:0}.v2-header h2{font-size:23px}.back-map{min-height:56px;min-width:64px;padding:8px 12px}.map-note{font-size:14px;text-align:center;color:#5e8179}.world-path{width:100%;display:flex;flex:1;min-height:0;flex-direction:column;justify-content:space-evenly;position:relative;gap:8px}.world-path::before{content:'';position:absolute;top:8%;bottom:8%;left:49%;border-left:12px dotted #fffc}.world-node{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;width:calc(100% - 50px);margin-left:calc(25px + var(--shift));border:2px solid #fff9;border-radius:24px;background:#ffffffe3;padding:6px 13px 6px 6px;box-shadow:0 5px 0 #729e8e55;text-align:left}.world-node .node-icon{height:48px;width:48px;font-size:27px;border-radius:18px;box-shadow:none;border:0}.world-node strong{font-size:18px}.world-node small{display:block;margin-top:2px;color:#b68a38;font-size:14px}.world-node>b{margin-left:auto;font-size:28px;color:#87aa95}.map-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;flex-shrink:0}.map-tools button{min-height:56px;border-radius:18px;background:#fffdf3e8;border:2px solid white;box-shadow:0 4px 0 #71968c44;font-size:16px;padding:8px 2px;white-space:nowrap}.stage-path{position:relative;flex:1;width:100%;min-height:250px}.stage-node{position:absolute;display:flex;gap:8px;align-items:center;background:transparent;transform:translate(-50%,-50%);padding:0;text-align:left;min-height:64px;min-width:175px}.stage-node:active{transform:translate(-50%,-47%)}.stage-node .node-icon{height:56px;width:56px;flex-shrink:0;font-size:26px}.stage-node .stars{display:block;font-size:15px;letter-spacing:1px}.stage-node .node-copy strong{font-size:15px}.boss-node .node-icon{height:68px;width:68px;background:#ffdf91;font-size:38px;border-color:#fff9}.mini-links{display:flex;gap:10px;width:100%;flex-shrink:0}.mini-links button{flex:1;font-size:17px;min-height:56px;padding:10px 6px}.dressed-hero{position:relative;display:block;width:100%;height:100%;isolation:isolate}.dressed-hero>svg{display:block;width:100%;height:100%;overflow:visible}.hat-overlay{position:absolute;left:23%;top:-3%;width:52%;height:33%;z-index:3;pointer-events:none}.image-hero .hat-overlay{left:22%;top:0%;width:52%;height:30%}.svg-hero .hat-overlay{left:24%;top:-3%;height:32%}.hat-overlay>svg{width:100%!important;height:100%!important;max-height:none!important;filter:drop-shadow(0 2px 1px #805c5730)}.pet-overlay{position:absolute;left:71%;top:67%;width:38%;height:32%;animation:petBob 2.2s ease-in-out infinite}.pet-overlay>svg{width:100%!important;height:100%!important;max-height:none!important}.kind-art{display:block;width:100%;height:100%}.kind-art>svg{width:100%;height:100%;display:block}.story-hero{height:100%;max-height:330px;width:90%;min-height:0}.story-stage{align-items:center;position:relative}.story-fairy{position:absolute;width:30%;right:-5%;top:15%}.story-fairy svg{width:100%}.story .story-top{align-self:center;margin:0}.story>.back-map{position:absolute;left:22px;top:78px;z-index:3}.story .skip{top:78px;min-height:56px;font-size:16px}.story .story-stage{padding-top:45px}.story .dialogue{min-height:165px;padding-top:26px}.story .dialogue p{font-size:21px;line-height:1.9}.title h1{font-size:38px}.title-art{flex:0 1 235px;min-height:120px}.title .dressed-hero{height:220px}.title .hero{height:220px}.title{gap:15px}.title .subtitle{font-size:16px}.battle .battle-head{min-height:56px;padding:0;margin:0}.battle .battle-head strong{font-size:16px}.battle .battle-stage{padding-top:12px;min-height:75px;flex:1 1 0}.battle .fighter>.idle,.battle .enemy-art{height:clamp(50px,calc((100cqh - 42px) * .9),240px)}.battle .boss .enemy-art{height:clamp(55px,calc(100cqh - 38px),280px);width:130%;margin-left:-23%}.battle .fighter-label{font-size:12px;max-width:100%}.battle .question-card{padding:11px 12px}.battle .question-card h2{font-size:21px;line-height:1.5}.battle .visual{max-height:110px;margin-top:7px}.visual>svg{height:90px;max-width:100%;width:100%}.battle .answers{gap:10px}.battle .answer{min-height:64px;font-size:26px}.battle .fairy-row{min-height:52px;margin-top:0}.battle .hint{max-height:94px;font-size:13px;line-height:1.45}.battle .clock,.battle .shape{height:100px}.swatch{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:8px;border:2px solid #fff8}.swatch-0{background:#e98d9f}.swatch-1{background:#72b8db}.swatch-2{background:#e9bd55}.ten-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:5px;border:2px solid #a8bdb6;border-radius:7px;background:#fff}.ten-frame i{height:15px;width:15px;border:1px solid #d7e2db;border-radius:50%;position:relative}.ten-frame .filled{background:#87bdcf;border-color:#74adbc}.ten-frame .removed{opacity:.55}.removed:after{content:'×';position:absolute;inset:-6px;color:#a24d5f;font-style:normal;font-size:23px}.frames{display:flex;gap:8px;justify-content:center}.pattern{font-size:24px;color:#9b7ab9;white-space:nowrap}.power-label{position:absolute;left:0;right:0;top:0;text-align:center;color:#9c7427;font-size:14px;text-shadow:0 2px white}.power-up #hero{filter:drop-shadow(0 0 12px #ffdd65);animation:aura .9s infinite alternate}#app.night #background{filter:brightness(.66) hue-rotate(15deg)}.cosmetic-slash{display:grid;place-items:center;text-shadow:0 0 20px #fff;font-size:88px!important}.slashFire{color:#f0a04c}.slashIce{color:#94e6ff}.slashRainbow{color:#df9ecb}.combo-burst{position:absolute;left:0;right:0;top:28%;text-align:center;font-size:28px;color:#b87a3a;text-shadow:0 3px white,0 0 15px #fff;z-index:29;pointer-events:none;animation:comboPop 1.1s both}.toast{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:18px;right:18px;z-index:55;border-radius:22px;background:#fff5cd;box-shadow:0 5px 22px #536c6c44;border:3px solid white;padding:16px;text-align:center;pointer-events:none;opacity:0;transform:translateY(30px);transition:.25s;font-size:17px}.toast.show{opacity:1;transform:none}.result{justify-content:space-around;text-align:center}.result .v2-header{margin-bottom:auto}.result-medal{height:190px;width:200px}.result-stars{font-size:45px;color:#e5ad3d;text-shadow:0 3px white;letter-spacing:7px}.soft-line{font-size:18px;line-height:1.9;text-align:center}.result .primary{margin-top:auto}.shop-preview{display:flex;align-items:center;gap:10px;width:100%;flex:0 1 140px;min-height:90px}.shop-preview>.dressed-hero{width:130px;height:130px;flex-shrink:0}.shop-preview p{font-size:16px;line-height:1.8}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0;width:100%}.shop-item{position:relative;background:#fffdf4e8;border:3px solid #fff;border-radius:23px;box-shadow:0 4px 0 #7c9e942f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;min-height:130px}.shop-item.equipped{background:#e3f3d9;border-color:#a2c7a1}.item-art{height:58px;width:85px;display:grid;place-items:center}.item-art svg{height:100%;width:100%}.effect-icon{font-size:40px;color:#e7b959}.shop-item strong{font-size:19px}.shop-item small{font-size:12px;line-height:1.5}.shop-item b{font-size:13px;color:#a37e3c}.pager-controls{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;margin-top:auto;flex-shrink:0}.pager-controls .secondary{min-height:56px;font-size:15px;padding:10px 14px;border-radius:18px}.pager-controls span{font-size:14px}button:disabled{cursor:default}.pager-controls button:disabled{opacity:.4}.collection-count{font-size:21px;color:#946e3c;background:#fff6d5ba;padding:9px 20px;border-radius:20px;text-align:center}.album-grid,.badge-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:10px;width:100%;flex:1;min-height:0}.sticker,.badge{background:#fffaf0e8;border:3px solid white;border-radius:23px;padding:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0;box-shadow:0 4px 0 #7c9e942f}.sticker>div{flex:1;min-height:25px;max-height:125px;width:100%}.sticker strong{font-size:16px;margin:3px 0}.sticker small{font-size:11px;line-height:1.5;max-width:100%}.sticker.unknown .kind-art{filter:brightness(0) opacity(.23)!important}.sticker.unknown{background:#e7efeddf}.badge>span{font-size:42px;color:#b5c3bf}.badge strong{font-size:17px}.badge small{font-size:12px;line-height:1.7;margin-top:4px}.badge.earned{background:#fff4cce8;border-color:#fffbe8}.chest-art{font-size:90px;animation:chestBounce .7s both}.chest-sticker{width:120px;height:100px;margin:auto}.chest-open h2{font-size:24px}.daily{justify-content:space-around;text-align:center}.daily .v2-header{margin-bottom:auto}.daily-sun{font-size:95px}.daily .soft-line{font-size:18px}.daily .primary{margin-top:auto}.stamp-row{font-size:33px;letter-spacing:5px}.daily .daily-progress{font-size:25px;margin:auto 0;color:#d8b45a}.daily .question-card{margin-top:auto}.daily .fairy-row{margin-bottom:auto}.daily .question-card h2{font-size:23px}.daily .visual{max-height:120px}.mini-intro{font-size:95px}.minigame{justify-content:space-around;text-align:center}.minigame .v2-header{margin-bottom:auto}.minigame>.primary{width:100%;margin-top:auto;flex-shrink:0}.minigame .soft-line{font-size:18px}.caught-count{font-size:19px;margin:10px 0}.star-field{position:relative;flex:1;width:100%;min-height:200px;background:linear-gradient(#b7dbe755,#fdf4c855);border:2px dashed white;border-radius:30px;overflow:hidden}.falling-star{position:absolute;background:transparent;width:64px;height:64px;padding:2px;animation:starDrift 7s ease-in-out var(--delay) infinite alternate}.falling-star svg{width:100%;height:100%}.falling-star.caught{opacity:0;pointer-events:none;transition:opacity .2s}.caught-stars{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;max-width:100%;margin:auto 0}.caught-stars svg{width:56px;height:56px}.balloon-field{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;flex:1;min-height:220px}.balloon{background:transparent;width:32%;height:190px;position:relative;animation:balloonFloat 3s ease-in-out var(--delay) infinite alternate;min-height:64px;padding:0}.balloon svg{width:100%;height:100%;fill:#edacbe}.balloon-1 svg{fill:#92c9d7}.balloon-2 svg{fill:#e8cc81}.balloon span{position:absolute;top:23%;left:0;right:0;font-size:30px;z-index:2;color:#4a596a}.balloon.popped{opacity:0;transform:scale(1.4);transition:.3s;animation:none}.balloon.shake{animation:shake .3s}.mini-hint{font-size:15px;line-height:1.7}.balloon-question{font-size:31px}.credits .v2-header{position:absolute;top:78px;width:calc(100% - 44px)}
@keyframes starDrift{0%{transform:translateY(-10px) rotate(-8deg)}100%{transform:translateY(65px) rotate(12deg)}}@keyframes balloonFloat{to{transform:translateY(-32px) rotate(4deg)}}@keyframes petBob{50%{transform:translateY(-5px) rotate(-4deg)}}@keyframes comboPop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.15)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-40px)}}@keyframes chestBounce{30%{transform:rotate(-15deg) scale(.8)}60%{transform:rotate(12deg) scale(1.2)}}
@media(max-height:720px){#screen{padding:calc(70px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));gap:8px}#screen.battle{padding-top:calc(70px + env(safe-area-inset-top));gap:7px}.coin-hud{left:16px;top:10px;height:44px;font-size:18px;padding:8px 14px}.title h1{font-size:33px}.title .subtitle{font-size:14px}.title .hero,.title .dressed-hero{height:165px}.title .title-art{height:165px;min-height:130px;flex:0 1 165px}.title .title-art .hero{width:170px}.title .title-art .fairy{width:88px}.title .pill{font-size:12px}.title .primary{min-height:60px}.v2-header h2{font-size:21px}.world-path{gap:7px}.world-node{min-height:60px;padding-top:3px;padding-bottom:3px}.world-node strong{font-size:16px}.world-node .node-icon{height:44px;width:44px}.world-node small{font-size:12px}.map-note{font-size:12px}.map-tools{gap:7px}.map-tools button{min-height:56px;font-size:14px}.stage-path{min-height:230px}.stage-node .node-icon{width:52px;height:52px}.stage-node .node-copy{padding:5px 8px}.stage-node .node-copy strong{font-size:14px}.boss-node .node-icon{width:60px;height:60px}.battle .battle-stage{min-height:65px}.battle .question-card{padding:9px}.battle .question-card h2{font-size:19px}.battle .visual{max-height:72px}.battle .visual>svg{height:66px}.battle .clock,.battle .shape{height:70px}.battle .objects svg{width:22px;height:22px}.battle .answer{min-height:64px;font-size:25px}.battle .answers{gap:8px}.battle .fairy-row{min-height:46px}.battle .hint{font-size:12px;max-height:90px}.battle .fairy-icon{width:36px}.frames{gap:5px}.ten-frame{gap:3px;padding:4px}.ten-frame i{width:12px;height:12px}.pattern{font-size:21px}.story>.back-map{top:70px;left:16px}.story .skip{top:70px}.story .story-stage{padding-top:50px}.story .dialogue{min-height:155px;padding:24px 18px 16px}.story .dialogue p{font-size:20px}.story-hero{max-height:230px}.result-medal{height:140px;width:155px}.result-stars{font-size:38px}.result .soft-line{font-size:15px}.shop-preview{flex:0 0 92px;min-height:92px}.shop-preview>.dressed-hero{height:92px;width:100px}.shop-preview p{font-size:14px}.shop-item{min-height:118px;padding:6px;gap:3px}.item-art{height:42px}.shop-item strong{font-size:17px}.shop-item small{font-size:11px}.shop-item b{font-size:11px}.shop-grid{gap:9px}.collection-count{font-size:18px;padding:7px 16px}.sticker{padding:5px}.sticker strong{font-size:14px}.sticker small{font-size:10px}.badge>span{font-size:30px}.badge strong{font-size:15px}.badge small{font-size:11px}.badge-grid,.album-grid{gap:8px}.soft-line{font-size:16px}.mini-intro{font-size:72px}.minigame .soft-line{font-size:16px}.minigame h2{font-size:24px}.minigame .pill{font-size:12px}.star-field{min-height:180px}.balloon-field{min-height:180px}.balloon{height:165px}.daily-sun{font-size:70px}.daily .soft-line{font-size:16px}.daily .question-card h2{font-size:20px}.daily .visual{max-height:100px}.daily .daily-progress{font-size:22px}.daily .fairy-row{min-height:48px}.credits .v2-header{top:70px}.credits h1{font-size:28px}.credits p{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.word-picture{display:flex;justify-content:center;align-items:center;gap:9px;font-size:16px;color:#8a735c}.word-picture>svg{width:35px;height:35px}.cosmetic-slash>svg{height:100%;width:100%;overflow:visible}.phase-effect{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;background:radial-gradient(ellipse,#ffffff22,#f9ebc755)}.phase-effect>span{position:absolute;font-size:47px;text-shadow:0 0 6px white;animation:phaseDance 2s ease-in-out infinite alternate}.phase-area-5{background:linear-gradient(#514e9555,#73619b33)}@keyframes phaseDance{to{transform:translateY(-40px) rotate(35deg) scale(1.2);opacity:.5}}
@media(max-height:720px){.battle .battle-stage{min-height:42px}.battle .word-picture>svg{width:25px;height:25px}.battle .word-picture{font-size:14px}.battle .hint{overflow-wrap:anywhere}}

/* Countable objects keep removed items visible; addends have distinct colors. */
.count-object{position:relative;display:inline-flex;flex-shrink:0}.count-object svg{width:32px;height:32px}.count-object.removed{opacity:.5}.count-object.removed:after{inset:0;display:grid;place-items:center;font-size:32px}
.ten-frame .filled-alt{background:#edacbe;border-color:#cf8199}
.battle .visual:has(.count-object){overflow-y:auto;max-height:110px}
.question-card ruby,.hint ruby{ruby-align:center}.question-card rt,.hint rt{font-size:.55em}
@media(max-height:720px){.count-object svg{width:22px;height:22px}.battle .visual:has(.count-object){max-height:80px}}
