:root{--sky:#5ec8f2;--sky2:#b8ecff;--sea:#2fa4e7;--grass:#7bd36b;--sand:#ffe7a8;--ink:#33281f;--sub:#7a6a5c;--card:#fff;--accent:#ff9f1c;--pink:#ff6b9a;--ok:#2bb673;--ng:#ff5a5f;--gold:#fc0;--radius:22px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;background:var(--sky);height:100%;margin:0;overflow:hidden}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-text-size-adjust:100%;font-family:Hiragino Maru Gothic ProN,Hiragino Sans,BIZ UDPGothic,Noto Sans JP,Yu Gothic UI,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#app{background:linear-gradient(180deg, var(--sky) 0%, var(--sky2) 55%, #e9f9ff 100%);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:none}input,select,textarea{font:inherit;-webkit-user-select:text;user-select:text}.screen{min-height:0;padding:calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 12px);flex-direction:column;flex:1;width:100%;max-width:560px;margin:0 auto;animation:.25s fadein;display:flex}.scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overflow-y:auto}@keyframes fadein{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.btn{background:var(--accent);color:#fff;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:56px;padding:10px 22px;font-size:1.15rem;font-weight:800;transition:transform 80ms;display:inline-flex;box-shadow:0 5px #d97f00}.btn:active{transform:translateY(4px);box-shadow:0 1px #d97f00}.btn.blue{background:var(--sea);box-shadow:0 5px #1b78b0}.btn.green{background:var(--ok);box-shadow:0 5px #1d8a55}.btn.pink{background:var(--pink);box-shadow:0 5px #d4457a}.btn.white{color:var(--ink);background:#fff;box-shadow:0 5px #c9d6dd}.btn.small{min-height:40px;padding:6px 14px;font-size:.95rem;box-shadow:0 3px #d97f00}.btn.white.small{box-shadow:0 3px #c9d6dd}.btn.blue.small{box-shadow:0 3px #1b78b0}.btn:disabled{opacity:.45}.topbar{align-items:center;gap:8px;min-height:48px;display:flex}.topbar .spacer{flex:1}.pill{white-space:nowrap;background:#ffffffd9;border-radius:999px;align-items:center;gap:4px;padding:6px 12px;font-size:1rem;font-weight:800;display:inline-flex;box-shadow:0 2px #00000014}.iconbtn{background:#ffffffd9;border-radius:50%;place-items:center;width:48px;height:48px;font-size:1.4rem;display:grid;box-shadow:0 3px #0000001a}h1,h2,h3{margin:0}.title{text-align:center;color:#fff;text-shadow:0 3px #00000026;font-size:1.6rem;font-weight:900}.note{color:var(--sub);font-size:.9rem;line-height:1.6}.panel{border-radius:var(--radius);background:#ffffffeb;padding:16px;box-shadow:0 6px #0000000f}svg.char{width:100%;height:auto;display:block;overflow:visible}.profiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:24px;display:grid}.profile-card{border-radius:var(--radius);background:#fff;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 16px;font-size:1.3rem;font-weight:900;display:flex;box-shadow:0 6px #00000014}.profile-card .av{place-items:center;width:110px;height:120px;font-size:4rem;display:grid}.profile-card small{color:var(--sub);font-size:.85rem;font-weight:700}.island-wrap{flex:1;min-height:220px;margin:8px -16px 0;position:relative;overflow:hidden}.island-wrap .sea{background:linear-gradient(#49b9f0,#2793d6);height:46%;position:absolute;bottom:0;left:0;right:0}.island-wrap .sea:before{content:"";background:radial-gradient(circle at 10px 10px,#49b9f0 10px,#0000 11px) 0 0/20px 20px repeat-x;height:20px;animation:3s linear infinite wave;position:absolute;top:-10px;left:0;right:0}@keyframes wave{to{background-position:40px 0}}.island{background:radial-gradient(ellipse at 50% 40%, #8fe07c 0%, var(--grass) 55%, #5cb84f 70%, var(--sand) 72%, #f5d27c 100%);border-radius:50%;width:104%;max-width:600px;height:58%;position:absolute;bottom:16%;left:50%;transform:translate(-50%)}.palm{font-size:3rem;position:absolute}.walker{filter:drop-shadow(0 4px 2px #00000026);width:74px;transition:left 3.5s ease-in-out,top 3.5s ease-in-out;position:absolute}.walker .bob{animation:.9s ease-in-out infinite alternate bob}.walker.jump .bob{animation:.5s jump}@keyframes bob{0%{transform:translateY(0)rotate(-3deg)}to{transform:translateY(-5px)rotate(3deg)}}@keyframes jump{0%{transform:translateY(0)}40%{transform:translateY(-40px)scale(1.1)}to{transform:translateY(0)}}.empty-island{text-align:center;background:#ffffffe6;border-radius:16px;width:80%;padding:10px 16px;font-weight:800;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.home-actions{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;display:grid}.home-actions .sq{background:#fff;border-radius:18px;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;font-size:.95rem;font-weight:800;display:flex;box-shadow:0 4px #00000014}.home-actions .sq span{font-size:1.9rem}.play-btn{border-radius:26px;width:100%;min-height:76px;margin-top:12px;font-size:1.6rem}.play-btn small{opacity:.9;font-size:.9rem;font-weight:700}.gauge{align-items:center;gap:4px;display:flex}.gauge i{background:#0000001f;border-radius:50%;width:12px;height:12px;transition:background .3s,transform .3s}.gauge i.on{background:var(--gold);transform:scale(1.15);box-shadow:0 0 0 2px #fff}.feed{flex:1;min-height:0;position:relative;overflow:hidden}.card{background:var(--card);will-change:transform;border-radius:28px;flex-direction:column;padding:18px 16px 16px;transition:transform .38s cubic-bezier(.2,.9,.3,1.1),opacity .3s;display:flex;position:absolute;top:14px;bottom:0;left:0;right:0;overflow:hidden;box-shadow:0 8px #00000014}.card.enter{transform:translateY(105%)}.card.leave{opacity:0;transform:translateY(-110%)}.card .tag{color:#fff;background:var(--sea);border-radius:999px;align-self:flex-start;padding:3px 10px;font-size:.8rem;font-weight:800}.tag.kokugo{background:#ff6b6b}.tag.sansu{background:#4dabf7}.tag.seikatsu{background:#51cf66}.tag.eigo{background:#9775fa}.tag.toddler{background:#ff922b}.tag.review{background:#f59f00}.q-head{align-items:center;gap:8px;display:flex}.q-head .spacer{flex:1}.speakbtn{background:#eef8ff;border-radius:50%;place-items:center;width:44px;height:44px;font-size:1.3rem;display:grid}.prompt{text-align:center;margin:10px 0 6px;font-size:1.35rem;font-weight:900;line-height:1.45}.visual{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-height:0;display:flex;overflow:auto}.bigword{letter-spacing:.06em;font-size:clamp(2.4rem,13vw,3.6rem);font-weight:900}.bigword .hl{color:#e8590c}.ruby{color:var(--sub);letter-spacing:.2em;font-size:1.3rem;font-weight:800}.blank{border-bottom:4px solid var(--accent);min-width:1.3em;color:var(--accent);text-align:center;padding:0 .15em;display:inline-block}.emoji{font-size:clamp(4rem,22vw,6.5rem);line-height:1.1}.emoji.small{font-size:2.6rem}.sentence{text-align:center;font-size:1.55rem;font-weight:800;line-height:1.8}.passage{background:#fffbea;border-radius:16px;width:100%;padding:12px 14px;font-size:1.12rem;font-weight:700;line-height:1.9}.passage.center{text-align:center;font-size:1.4rem}.formula{white-space:nowrap;font-size:clamp(2.2rem,12vw,3.2rem);font-weight:900}.formula.seq{font-size:clamp(1.4rem,7vw,2.2rem)}svg.clock{width:min(62vw,230px);height:auto}svg.ruler{width:100%;height:auto}svg.shape{fill:#ffd43b;stroke:#33281f;stroke-width:3px;width:100%;height:auto;max-height:120px}.visual svg.shape{width:46%}.dots{flex-wrap:wrap;justify-content:center;gap:6px;max-width:280px;display:flex}.dot{border-radius:50%;width:28px;height:28px;display:inline-block}.dot.on{background:#ff6b6b}.dot.off{background:0 0;border:3px dashed #ccc}.choices{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.choices.one-col{grid-template-columns:1fr}.choice{word-break:keep-all;overflow-wrap:anywhere;background:#f3f7fb;border:3px solid #dfe8ef;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;min-height:62px;padding:8px 6px;font-size:1.3rem;font-weight:800;line-height:1.25;transition:transform 80ms,background .2s,border-color .2s;display:flex}.choice small{color:var(--sub);font-size:.85rem}.choice .kanji{font-size:2.2rem}.choice .kana{font-size:3.4rem;font-weight:900}.choice:active{transform:scale(.96)}.choices.big .choice{min-height:120px;font-size:2.6rem}.choices.big .choice .group{letter-spacing:-.05em;word-break:break-all;font-size:1.8rem;line-height:1.3}.choice .blob{border:3px solid #00000026;border-radius:50%;width:74px;height:74px;display:block}.choice svg.shape{width:80%;max-height:90px}.choice.correct{border-color:var(--ok);background:#d3f9e1;animation:.35s pop}.choice.wrong{border-color:var(--ng);background:#ffe3e3;animation:.4s shake}.choice.dim{opacity:.45}@keyframes pop{50%{transform:scale(1.08)}}@keyframes shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.numpad-display{justify-content:center;align-items:baseline;gap:6px;min-height:60px;margin-top:6px;font-size:2.4rem;font-weight:900;display:flex}.numpad-display .val{text-align:center;border-bottom:4px solid var(--accent);min-width:120px;padding:0 10px}.numpad-display.correct .val{color:var(--ok);border-color:var(--ok)}.numpad-display.wrong .val{color:var(--ng);border-color:var(--ng);animation:.4s shake}.numpad{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;display:grid}.numpad button{background:#f3f7fb;border:2px solid #dfe8ef;border-radius:14px;min-height:54px;font-size:1.6rem;font-weight:900}.numpad button:active{background:#e0ecf5}.numpad .ok{background:var(--ok);color:#fff;border-color:var(--ok);grid-row:span 2}.numpad .del{font-size:1.2rem}.order-answer{border:3px dashed #cbd6df;border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:64px;padding:8px;display:flex}.order-answer.correct{border-color:var(--ok);background:#e6fcf0}.order-answer.wrong{border-color:var(--ng);background:#fff0f0;animation:.4s shake}.order-pool{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.chip{background:#fff3bf;border:2px solid #ffd43b;border-radius:14px;padding:10px 14px;font-size:1.25rem;font-weight:800}.chip.used{visibility:hidden}.feedback{pointer-events:none;justify-content:center;display:flex;position:absolute;top:30%;left:0;right:0}.feedback .mark{filter:drop-shadow(0 4px 6px #00000026);width:150px;height:150px;animation:.45s cubic-bezier(.2,1.6,.4,1) markpop}.feedback .ring{stroke-dasharray:277;stroke-dashoffset:277px;transform-origin:60px 60px;animation:.4s ease-out forwards draw;transform:rotate(-90deg)}@keyframes draw{to{stroke-dashoffset:0}}.blank.filled{color:var(--ok);border-color:var(--ok);animation:.35s pop}@keyframes markpop{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}.explain{text-align:center;background:#fff4e6;border-radius:14px;margin-top:10px;padding:10px 12px;font-size:1.05rem;font-weight:800;line-height:1.6}.next-hint{justify-content:center;margin-top:10px;display:flex}.coinfly{color:#e67700;pointer-events:none;font-size:1.3rem;font-weight:900;animation:.9s forwards coinfly;position:absolute;top:10px;right:18px}@keyframes coinfly{0%{opacity:0;transform:translateY(20px)}30%{opacity:1}to{opacity:0;transform:translateY(-30px)}}#combo{z-index:5;pointer-events:none;position:absolute;top:0;left:50%;transform:translate(-50%)}.combo{white-space:nowrap;color:#fff;background:linear-gradient(90deg,#ff6b6b,#ff9f1c);border-radius:999px;padding:4px 12px;font-size:.95rem;font-weight:900;animation:.3s pop;display:inline-block}.levelup{color:#fff;white-space:nowrap;pointer-events:none;background:#7048e8;border-radius:999px;padding:8px 16px;font-weight:900;animation:.5s markpop;position:absolute;top:12%;left:50%;transform:translate(-50%)}.egg-card{text-align:center;background:radial-gradient(circle at 50% 40%,#fffbe6,#fff);justify-content:center;align-items:center}.egg{background:radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), var(--egg,linear-gradient(160deg, #fff6d5, #ffd56b));border:5px solid #33281f;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;width:170px;height:210px;margin:18px auto;position:relative;box-shadow:0 10px #00000014}.egg:after{content:"";border-radius:inherit;background:radial-gradient(circle at 30% 70%,#fff6 0 10%,#0000 11%),radial-gradient(circle at 70% 55%,#ffffff59 0 8%,#0000 9%);position:absolute;top:0;bottom:0;left:0;right:0}.egg.r{--egg:linear-gradient(160deg, #e5dbff, #9775fa)}.egg.s{--egg:conic-gradient(from 0deg, #ff6b6b, #ffd43b, #69db7c, #4dabf7, #da77f2, #ff6b6b)}.egg.wobble{animation:.45s wobble}@keyframes wobble{25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}.egg .crack{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.reveal{width:min(64vw,240px);margin:0 auto;animation:.7s cubic-bezier(.2,1.5,.4,1) revealpop}@keyframes revealpop{0%{transform:scale(0)rotate(-20deg)}to{transform:none}}.rays{background:repeating-conic-gradient(#ffdc5059 0 10deg, transparent 10deg 20deg);z-index:0;animation:8s linear infinite spin;position:absolute;top:-50%;bottom:-50%;left:-50%;right:-50%}.egg-card>*{z-index:1;position:relative}.egg-card>.rays{z-index:0;position:absolute}@keyframes spin{to{transform:rotate(360deg)}}.newbadge{background:var(--ng);color:#fff;border-radius:999px;padding:4px 12px;font-weight:900;animation:.6s infinite alternate pop;display:inline-block}.charname{margin-top:6px;font-size:1.15rem;font-weight:900;line-height:1.5}.rarity{font-weight:900}.rarity.r{color:#7048e8}.rarity.s{background:linear-gradient(90deg,#ff6b6b,#ffd43b,#69db7c,#4dabf7,#da77f2);color:#0000;-webkit-background-clip:text;background-clip:text}.confetti{pointer-events:none;z-index:50;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.confetti i{border-radius:2px;width:10px;height:14px;animation:linear forwards fall;position:absolute;top:-20px}@keyframes fall{to{transform:translateY(110vh)rotate(720deg)}}.zukan-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;display:grid}.zukan-cell{background:#fff;border-radius:14px;padding:6px;position:relative;box-shadow:0 3px #0000000f}.zukan-cell .cnt{color:var(--sub);font-size:.75rem;font-weight:800;position:absolute;bottom:2px;right:4px}.zukan-cell.made:after{content:"🔨";font-size:.8rem;position:absolute;top:2px;left:4px}.progress{background:#fff9;border-radius:999px;height:14px;overflow:hidden}.progress>i{border-radius:inherit;background:linear-gradient(90deg,#ffd43b,#ff922b);height:100%;display:block}.tabs{gap:6px;padding:4px 0;display:flex;overflow-x:auto}.tabs button{background:#ffffffb3;border-radius:999px;flex:none;padding:6px 12px;font-weight:800}.tabs button.on{color:#e8590c;background:#fff;box-shadow:0 2px #0000001a}.maker-preview{width:min(56vw,210px);margin:0 auto}.part-row{gap:8px;padding:6px 2px 10px;display:flex;overflow-x:auto}.part-btn{background:#fff;border:3px solid #0000;border-radius:14px;flex:none;min-width:76px;padding:6px 8px;font-size:.85rem;font-weight:800}.part-btn.on{border-color:var(--accent);background:#fff4e6}.part-btn.locked{opacity:.35}.shop-item{background:#fff;border-radius:18px;align-items:center;gap:12px;padding:12px;display:flex;box-shadow:0 4px #0000000f}.shop-item .ic{font-size:2.4rem}.shop-item .nm{flex:1;font-size:1.1rem;font-weight:900}.ticket{background:repeating-linear-gradient(90deg,#fff3bf 0 12px,#ffec99 12px 24px);border:3px dashed #f59f00;border-radius:14px;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:900;display:flex}.ticket.used{opacity:.4;text-decoration:line-through}.done{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;display:flex}.done .big{font-size:5rem}.stats{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.stats div{background:#fff;border-radius:16px;min-width:90px;padding:10px 14px;font-weight:900}.stats b{color:#e8590c;font-size:1.6rem;display:block}#app.parent{background:#f4f7fa}.parent .btn{white-space:nowrap}.parent .screen{color:var(--ink)}.parent h2{margin:18px 0 8px;font-size:1.1rem}.form-row{flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0;display:flex}.form-row label{min-width:110px;font-size:.95rem;font-weight:700}.form-row input[type=text],.form-row input[type=number],.form-row input[type=time],.form-row select,.parent textarea{background:#fff;border:1px solid #ccd6de;border-radius:10px;min-width:0;padding:8px 10px;font-size:1rem}.form-row input[type=range]{flex:1;min-width:120px}.parent textarea{width:100%;height:90px;font-size:.75rem}table.report{border-collapse:collapse;background:#fff;border-radius:12px;width:100%;font-size:.88rem;overflow:hidden}table.report th,table.report td{text-align:left;border-bottom:1px solid #eef2f5;padding:6px 8px}table.report td.num{text-align:right;font-variant-numeric:tabular-nums}.badge{border-radius:999px;padding:1px 8px;font-size:.75rem;font-weight:800;display:inline-block}.badge.weak{color:#c92a2a;background:#ffe3e3}.badge.good{color:#2b8a3e;background:#d3f9d8}.checks{flex-wrap:wrap;gap:6px;display:flex}.checks label{background:#fff;border:1px solid #dde5ec;border-radius:999px;padding:4px 10px;font-size:.85rem}.pinpad{grid-template-columns:repeat(3,72px);justify-content:center;gap:12px;margin-top:16px;display:grid}.pinpad button{background:#fff;border-radius:16px;height:64px;font-size:1.6rem;font-weight:800;box-shadow:0 3px #00000014}.pin-dots{justify-content:center;gap:14px;margin-top:18px;display:flex}.pin-dots i{border:2px solid #889;border-radius:50%;width:18px;height:18px}.pin-dots i.on{background:#445}.toast{left:50%;bottom:calc(var(--safe-b) + 24px);color:#fff;z-index:60;background:#1e1e1ee0;border-radius:999px;padding:10px 18px;font-weight:700;animation:.2s fadein;position:fixed;transform:translate(-50%)}.modal-bg{z-index:40;background:#00000059;place-items:center;padding:16px;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.modal{text-align:center;background:#fff;border-radius:24px;width:min(100%,400px);padding:20px;animation:.4s revealpop}@media (min-height:760px){.prompt{font-size:1.5rem}.choice{min-height:72px}}@media (max-height:640px){.emoji{font-size:3.4rem}.choices.big .choice{min-height:92px}.numpad button{min-height:46px}}.reveal-area{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}.reveal-area .reveal{width:min(62vw,250px)}.screen.noanim{animation:none}.card.toddler .choices.big .choice{min-height:150px;font-size:4.2rem}.card.toddler .choices.big .choice .group{font-size:2.2rem}.card.toddler .prompt{font-size:1.6rem}.mascot{width:min(40vw,160px);animation:.9s ease-in-out infinite alternate bob}
