:root{--bg:#fff7ec;--ink:#3a2a1f;--muted:#8a7766;--accent:#ff8a1f;--accent-deep:#e8680a;--accent-soft:#ffe2c2;--card:#fff;--line:#f0dcc6;--good:#2bb673;--warn:#c2410c;--danger:#d9364f;--radius:18px;--tap:48px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:-apple-system,Hiragino Sans,Apple SD Gothic Neo,Noto Sans KR,Noto Sans JP,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0}body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none;min-height:100dvh}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}.screen{max-width:480px;padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left));flex-direction:column;gap:14px;margin:0 auto;display:flex}.btn{min-height:var(--tap);border:2px solid var(--line);background:var(--card);border-radius:999px;padding:10px 18px;font-weight:700;transition:transform 80ms}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.4}.btn-primary{background:var(--accent);border-color:var(--accent-deep);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}.btn-big{min-height:72px;font-size:1.25rem}.btn-sub{background:var(--accent-soft);border-color:var(--accent-soft)}.btn-danger{color:var(--danger);border-color:#f5c2cb}.icon-btn{width:var(--tap);height:var(--tap);background:var(--card);border:none;border-radius:50%;font-size:1.6rem;line-height:1}.icon-btn-spacer{width:var(--tap)}.card{background:var(--card);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px 16px;display:flex}.card h2{color:var(--muted);margin:0;font-size:.95rem}.placeholder{color:var(--muted);text-align:center;margin:0;font-size:.9rem}.muted{color:var(--muted)}.warn{color:var(--warn)}.topbar{justify-content:space-between;align-items:center;display:flex}.topbar-title{margin:0;font-size:1.1rem}.home{overflow-x:hidden}.home>*{position:relative}.home-bg{z-index:-1;pointer-events:none;inset:0;overflow:hidden;position:fixed!important}.home-rays{opacity:.55;background:repeating-conic-gradient(from 0deg at 50% 50%, #ffe2c2 0 9deg, #fff7ec 9deg 18deg);width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;animation:60s linear infinite raysSpin;position:absolute;top:14%;left:50%}@keyframes raysSpin{to{transform:rotate(360deg)}}.home-floats span{left:var(--x);font-size:var(--s);color:var(--c);opacity:.35;animation:floatUp var(--d) linear infinite;animation-delay:var(--delay);font-weight:900;position:absolute;bottom:-3rem}@keyframes floatUp{0%{transform:translateY(0)rotate(-10deg)}to{transform:translateY(-115dvh)rotate(15deg)}}.logo{--fs:clamp(60px, 19vw, 88px);margin:calc(var(--fs) * .62) auto calc(var(--fs) * .2);justify-items:center;font-weight:900;line-height:1;display:grid}.logo-burst{left:50%;top:calc(var(--fs) * .55);width:calc(var(--fs) * 2.6);height:calc(var(--fs) * 2.6);margin:calc(var(--fs) * -1.3) 0 0 calc(var(--fs) * -1.3);z-index:-1;filter:drop-shadow(0 6px #3a2a1fd9);animation:24s linear infinite raysSpin;position:absolute}.logo i,.logo b{font-style:normal;display:inline-block}.logo-top{font-size:var(--fs);letter-spacing:-.04em;gap:.02em;display:flex}.logo-top i{color:#fff;rotate:var(--r,0deg);text-shadow:3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 7px 0 var(--ink);animation:1.6s ease-in-out infinite logoHop}.logo-top i:first-child{--r:-8deg;color:#2f6bff}.logo-top i:nth-child(2){--r:4deg;color:#fff;animation-delay:-.25s}.logo-top i:nth-child(3){--r:9deg;color:#ff5c8a;animation-delay:-.5s}@keyframes logoHop{0%,to{transform:translateY(0)scale(1)}30%{transform:translateY(-9px)scale(1.04,.97)}55%{transform:translateY(0)scale(.97,1.03)}}.logo-ribbon{margin-top:calc(var(--fs) * .06);font-size:calc(var(--fs) * .26);color:#fff;padding:.28em 1.6em .42em;position:relative;rotate:-3deg}.ribbon-bg{z-index:-1;width:100%;height:100%;position:absolute;inset:0}.logo-ribbon b{letter-spacing:.08em;text-shadow:2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 3px 0 var(--ink)}.logo-bits{pointer-events:none;position:absolute;inset:0}.logo-bits b{left:calc(50% + var(--x));top:var(--y);font-size:calc(var(--fs) * .42);color:var(--c);translate:-50% -50%;rotate:var(--r);text-shadow:2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 3px 4px 0 var(--ink);animation:2.4s ease-in-out infinite bitFloat;position:absolute}.logo-bits b:nth-child(2){animation-delay:-.6s}.logo-bits b:nth-child(3){animation-delay:-1.2s}.logo-bits b:nth-child(4){animation-delay:-1.8s}@keyframes bitFloat{50%{transform:translateY(-8px)scale(1.08)}}.hero{align-items:center;gap:10px;padding-top:4px;display:flex}.home-horang{background:0 0;border:none;flex:none;padding:0;line-height:0;position:relative}.home-horang .mascot{overflow:visible}.bubble{background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);text-align:left;box-shadow:0 4px 0 var(--ink);flex-direction:column;flex:1;gap:2px;margin:0;padding:10px 14px;font-weight:700;display:flex;position:relative}.bubble:before{content:"";background:var(--card);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);width:16px;height:16px;position:absolute;top:50%;left:-12px;transform:translateY(-50%)rotate(45deg)}.bubble small{color:var(--accent-deep);font-size:.75rem;font-weight:900}.today-word{flex-wrap:wrap;align-items:baseline;gap:4px;display:flex}.today-word strong{font-size:1.6rem;line-height:1.2}.today-word .say{margin-left:auto}.bubble:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.pang-total .value.landed{animation:.35s cubic-bezier(.3,1.8,.5,1) pop}.home .pang-total{background:#ffffffd9;border-radius:999px;padding:6px 16px}.home .today-stage{background:#ffffffb3;border-radius:999px;align-self:center;padding:4px 12px}.btn-shine{animation:1.8s ease-in-out infinite btnBreathe;position:relative;overflow:hidden}.btn-shine:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff8c,#0000);width:30%;animation:2.8s ease-in-out infinite shine;position:absolute;top:0;bottom:0;left:-40%;transform:skew(-20deg)translate(0)}@keyframes btnBreathe{50%{transform:scale(1.025)}}@keyframes shine{0%,55%{transform:skew(-20deg)translate(0)}to{transform:skew(-20deg)translate(560%)}}.btn-shine:active{animation:none;transform:scale(.97)}.pang-total{justify-content:space-between;align-items:baseline;padding:0 4px;display:flex}.pang-total .label{color:var(--muted);font-weight:700}.pang-total .value{color:var(--accent-deep);font-size:1.6rem}.seals{justify-content:space-between;gap:8px;display:flex}.seal{border:2px dashed var(--line);border-radius:50%;width:36px;height:36px}.seal.on{background:var(--accent);animation:.4s cubic-bezier(.3,1.8,.5,1) backwards sealPop;animation-delay:calc(var(--i) * 80ms);border:none;box-shadow:inset 0 0 0 3px #ffffff80}@keyframes sealPop{0%{transform:scale(0)rotate(-30deg)}}.home-nav{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.btn-nav{border-radius:var(--radius);white-space:nowrap;padding:10px 2px;font-size:.8rem}.stage-road{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.stage{background:var(--card);border-radius:var(--radius);align-items:center;gap:12px;min-height:64px;padding:12px 14px;display:flex}.stage.locked{opacity:.5}.stage-id{background:var(--accent-soft);border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-weight:800;display:grid}.stage.open .stage-id{background:var(--accent);color:#fff}.stage-body{flex-direction:column;flex:1;min-width:0;display:flex}.stage-body small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-top{align-items:center;gap:8px;display:flex}.dots{flex:1;justify-content:center;gap:4px;display:flex}.dot{background:var(--line);border-radius:50%;width:14px;height:14px}.dot.done{background:var(--accent)}.dot.now{background:var(--card);border:3px solid var(--accent)}.combo{min-width:var(--tap);text-align:center;color:var(--accent-deep);font-weight:800}.pang-bar{background:var(--line);border-radius:999px;height:10px;overflow:hidden}.pang-fill{background:var(--accent);transform-origin:0;width:100%;height:100%;transform:scaleX(.02)}.question{background:var(--card);border-radius:var(--radius);flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:40dvh;display:flex}.question-no{color:var(--muted);margin:0;font-weight:700}.answers{flex-direction:column;gap:10px;display:flex}.mascot-dock{right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));pointer-events:none;position:fixed}.result-title{text-align:center;margin:12px 0 0}.stats{text-align:center;flex-direction:row;justify-content:space-around}.stats div{flex-direction:column;display:flex}.stats strong{font-size:1.4rem}.countdown{text-align:center;color:var(--accent-deep);padding:24px 0;font-size:4rem;font-weight:800}.tabs{background:var(--card);border-radius:999px;grid-template-columns:1fr 1fr;gap:6px;padding:4px;display:grid}.tab{background:0 0;border:none;border-radius:999px;min-height:44px;font-weight:700}.tab.active{background:var(--accent);color:#fff}.grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.grid-cell{aspect-ratio:1;background:var(--card);color:var(--line);border-radius:14px;place-items:center;font-weight:800;display:grid}.row{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.row.col{flex-direction:column;align-items:stretch}.row input[type=checkbox]{width:28px;height:28px;accent-color:var(--accent)}.segmented{background:var(--bg);border-radius:999px;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{background:0 0;border:none;border-radius:999px;min-height:44px;font-weight:700}.segmented button.active{background:var(--accent);color:#fff}select{border:2px solid var(--line);background:var(--card);border-radius:12px;min-height:44px;padding:0 10px}.toast{left:50%;bottom:calc(20px + var(--safe-bottom));background:var(--ink);color:#fff;z-index:100;border-radius:999px;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;font-weight:700;display:flex;position:fixed;transform:translate(-50%)}.toast-btn{background:var(--accent);color:#fff;border:none;border-radius:999px;min-height:36px;padding:0 14px;font-weight:800}.test-btns{flex-wrap:wrap;gap:8px;display:flex}.test-btns .btn{white-space:nowrap;flex:1;min-width:140px;padding:10px 8px}.medal{width:40px;height:40px;color:var(--ink);border:3px solid var(--ink);background:var(--line);border-radius:50%;flex:none;place-items:center;font-weight:900;display:grid}.medal.bronze{background:#d08a4c}.medal.silver{background:#c5ccd6}.medal.gold{background:#f2b705}.medal.rainbow{color:#fff;text-shadow:0 0 2px var(--ink), 0 0 2px var(--ink);background:conic-gradient(#ff5c8a,#ffcf3f,#3fd0a4,#2f6bff,#b36bff,#ff5c8a)}.medal.none{color:var(--muted);border-color:var(--line);background:var(--bg)}.result-cards{flex-direction:column;gap:14px;display:flex}.result-card{animation:.45s cubic-bezier(.3,1.5,.5,1) backwards cardIn;animation-delay:calc(.35s + var(--i) * .26s)}@keyframes cardIn{0%{opacity:0;transform:translateY(18px)scale(.92)}}.growth-list,.star-list,.trophy-list,.unlock-list,.quest-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.growth-list li{color:var(--accent-deep);font-weight:800}.growth-list li:before{content:"📈 "}.star-list li{justify-content:space-between;gap:8px;font-weight:700;display:flex}.stars,.skill-stars b{color:#f2b705;letter-spacing:.05em;white-space:nowrap}.trophy-list li{align-items:center;gap:10px;display:flex}.trophy-list li div{flex-direction:column;display:flex}.trophy-list small{color:var(--muted)}.unlock-list li{font-weight:800}.unlock-list b{color:var(--accent-deep);margin-right:6px;font-size:.8rem}.quest-list li{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;display:grid}.quest-list li.now{color:var(--good);font-weight:800}.quest-list small{color:var(--muted);font-variant-numeric:tabular-nums}.ribbon-get,.seal-get{color:var(--accent-deep);margin:0;font-weight:800}.quests{flex-direction:column;gap:10px;display:flex}.quest{grid-template-rows:auto 6px;grid-template-columns:22px 1fr auto;align-items:center;gap:2px 8px;font-weight:700;display:grid}.quest-check{border:2px solid var(--line);width:22px;height:22px;color:var(--accent);border-radius:50%;grid-row:1/3;place-items:center;font-size:.75rem;display:grid}.quest.done .quest-check{background:var(--good);border-color:var(--good);color:#fff}.quest.done .quest-text{color:var(--muted);text-decoration:line-through}.quest-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}.quest-bar{background:var(--line);border-radius:999px;grid-column:2/4;height:6px;overflow:hidden}.quest-bar i{transform-origin:0;background:linear-gradient(90deg,#ffcf3f,#ff8a1f);height:100%;display:block}.quest.done .quest-bar i{background:var(--good)}.ribbon-line{color:var(--muted);margin:0;font-size:.85rem;font-weight:700}.rust-line{color:#8a4b1f;background:#f3e3d3;border-radius:14px;margin:0;padding:8px 12px;font-size:.9rem;font-weight:700}.seals{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.seal-slot{flex-direction:column;align-items:center;gap:2px;display:flex}.seal-slot small{color:var(--muted);font-size:.7rem;font-weight:700}.seal-slot.today small{color:var(--accent-deep)}.seal-slot.today .seal:not(.on){border-color:var(--accent);border-style:solid}.seal{color:#fff;place-items:center;font-size:.8rem;font-weight:900;display:grid}.ribbon-btn{left:calc(16px + var(--safe-left));bottom:calc(24px + var(--safe-bottom));z-index:45;white-space:nowrap;border:3px solid var(--ink);min-height:52px;box-shadow:0 4px 0 var(--ink);background:#ffd0e0;border-radius:999px;align-items:center;gap:6px;padding:6px 16px;font-weight:900;animation:.35s cubic-bezier(.3,1.6,.5,1) ribbonIn;display:flex;position:fixed}.ribbon-btn small{font-weight:700}.ribbon-btn[hidden],.rust-line[hidden]{display:none}body.left-handed .ribbon-btn{left:auto;right:calc(16px + var(--safe-right))}.ribbon-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}@keyframes ribbonIn{0%{opacity:0;transform:scale(.4)}}.qtag{border-radius:999px;margin:0;padding:2px 12px;font-size:.85rem;font-weight:900}.qtag.rusty{color:#8a4b1f;background:#f3e3d3}.qtag.capsule{color:#4b3fa0;background:#e6e2ff}.skill-stars{flex-direction:column;gap:2px;margin:6px 0 0;padding:0;font-size:.8rem;list-style:none;display:flex}.skill-stars li{align-items:baseline;gap:6px;display:flex}.skill-stars span{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--muted);flex:1;overflow:hidden}.skill-stars em{color:#8a4b1f;background:#f3e3d3;border-radius:6px;padding:0 4px;font-style:normal;font-weight:800}.stage{align-items:flex-start}.shelf{flex-direction:column;gap:16px;display:flex}.shelf-count{text-align:center;color:var(--muted);margin:0;font-weight:700}.shelf-count strong{color:var(--accent-deep);font-size:2rem}.shelf-row h2{border-bottom:3px solid var(--ink);margin:0 0 8px;padding-bottom:4px;font-size:1rem}.shelf-row h2 small{color:var(--muted);margin-left:6px;font-weight:700}.trophy-grid,.item-grid{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.trophy{background:var(--card);border-radius:14px;align-items:flex-start;gap:10px;padding:10px;display:flex}.trophy:not(.got){opacity:.75}.trophy div{flex-direction:column;gap:2px;min-width:0;display:flex}.trophy small{color:var(--muted)}.trophy .progress{color:var(--accent-deep);font-weight:700}.trophy .reward{color:#8a3ffc;font-weight:700}.item{background:var(--card);border:3px solid #0000;border-radius:14px;flex-direction:column;gap:4px;padding:12px;display:flex}.item:not(.mine){opacity:.7}.item.on{border-color:var(--accent)}.item small{color:var(--muted)}.item .btn{align-self:flex-start;min-height:44px}.stage-layers{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.stage-layers .bg{opacity:0;transition:opacity .8s;position:absolute;inset:0}.bg-2{background:radial-gradient(120% 80% at 50% 0,#ffe3bf 0%,#fff7ec 70%)}.bg-3{background:radial-gradient(120% 90% at 50% 0,#ffd29e 0%,#ffeede 75%)}.bg-4{background:radial-gradient(130% 90% at 50% 0,#ffb877 0%,#ffe0c2 80%)}.bg-5{background:radial-gradient(140% 100% at 50% 0,#6b3fa0 0%,#2b1c4a 70%)}body.lv2 .bg-2,body.lv3 .bg-3,body.lv4 .bg-4,body.lv5 .bg-5{opacity:1}body.lv5{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.backdrop{width:100%;height:100%;position:absolute;inset:0}.backdrop-fallback{opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%, #ff8a1f 0 9deg, #ff5c8a 9deg 18deg);width:220vmax;height:220vmax;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.backdrop[hidden],.backdrop-fallback[hidden]{display:none}.fx-canvas.back{z-index:0}.flash{z-index:55;opacity:0;pointer-events:none;background:#fff;position:fixed;inset:0}body{--kick:0}.combo strong{scale:calc(1 + var(--kick) * .18);display:inline-block}.pang-label{scale:calc(1 + var(--kick) * .08);display:inline-block}.bulb{scale:calc(1 + var(--kick) * .5)}.audience{scale:calc(1 + var(--kick) * .06);transform-origin:50% 100%}.play .play-top,.play .pang{background:#ffffffdb;border-radius:999px;padding:4px 10px 4px 4px;box-shadow:0 2px #3a2a1f14}.play .pang{padding:6px 12px}.choices.speak-area .speak-panel{background:#ffffffe6;border-radius:18px;padding:12px}.combo.bump{animation:.24s ease-out comboPop}@keyframes comboPop{40%{transform:scale(var(--pop,1.2))}}.combo.hot strong{animation:1.2s linear infinite rainbowText}@keyframes rainbowText{0%{color:#ff5c8a}25%{color:#ff8a1f}50%{color:#2f6bff}75%{color:#3fd0a4}to{color:#ff5c8a}}.play .question.bump{animation:.28s ease-out cardBump}@keyframes cardBump{45%{transform:scale(var(--bump,1.04))}}.play .dot.done{background:var(--c,var(--accent));animation:.3s ease-out dotPop}.play .dot.rainbow{background:conic-gradient(#ff5c8a,#ffcf3f,#3fd0a4,#2f6bff,#b36bff,#ff5c8a)}@keyframes dotPop{50%{transform:scale(1.4)}}.cutin{z-index:65;pointer-events:none;text-align:center;border-block:4px solid var(--ink);background:linear-gradient(90deg,#ff5c8a,#ff8a1f 60%,#ffcf3f);padding:14px 0;animation:1.4s cubic-bezier(.3,1.3,.5,1) forwards cutin;position:fixed;top:34%;left:-10%;right:-10%;rotate:-6deg}.cutin strong{color:#fff;-webkit-text-stroke:2px var(--ink);letter-spacing:.04em;font-size:2.6rem;font-weight:900;line-height:1.1;display:block}.cutin small{color:var(--ink);font-weight:900;display:block}@keyframes cutin{0%{transform:translate(110%)scaleY(.6)}20%{transform:none}75%{opacity:1;transform:none}to{opacity:1;transform:translate(-110%)}}body.reach .play .qtype{color:#ff5c8a}.unit-slam{z-index:5;pointer-events:none;color:#ffcf3f;white-space:nowrap;-webkit-text-stroke:3px var(--ink);text-shadow:0 6px 0 var(--ink);font-size:4.6rem;font-weight:900;line-height:1;animation:1.2s cubic-bezier(.3,1.5,.5,1) forwards slam;position:absolute;top:20%;left:50%;translate:-50% -50%}.unit-slam.oku{color:#ff5c8a;font-size:6rem}@keyframes slam{0%{opacity:0;transform:scale(3.2)rotate(-18deg)}25%{opacity:1;transform:scale(1)rotate(-4deg)}80%{opacity:1;transform:scale(1)rotate(-4deg)}to{opacity:0;transform:scale(1.1)rotate(-4deg)translateY(-12px)}}body.lv5 .play .qtype{color:#8a3ffc}.lights{top:calc(4px + var(--safe-top));opacity:0;justify-content:space-around;transition:opacity .6s,transform .6s;display:flex;position:absolute;left:0;right:0;transform:translateY(-20px)}.bulb{background:hsl(calc(var(--i) * 47), 90%, 62%);width:12px;height:12px;box-shadow:0 0 10px hsl(calc(var(--i) * 47), 90%, 62%);animation:1.2s ease-in-out infinite twinkle;animation-delay:calc(var(--i) * -.17s);border-radius:50%}body.lv3 .lights,body.lv4 .lights,body.lv5 .lights{opacity:1;transform:none}body.lv4 .bulb,body.lv5 .bulb{animation-duration:.6s}@keyframes twinkle{50%{opacity:.35}}.audience{left:0;right:0;bottom:calc(6px + var(--safe-bottom));opacity:0;justify-content:center;gap:6px;padding-right:100px;transition:opacity .6s,transform .6s cubic-bezier(.3,1.5,.5,1);display:flex;position:absolute;transform:translateY(60px)}body.lv3 .audience,body.lv4 .audience,body.lv5 .audience{opacity:1;transform:none}body.left-handed .audience{padding-left:100px;padding-right:0}.fan{animation:1.6s ease-in-out infinite sway;animation-delay:calc(var(--i) * -.3s)}.fan.hop{animation:.5s cubic-bezier(.3,.7,.4,1) fanhop,1.6s ease-in-out .5s infinite sway;animation-delay:calc(var(--i) * 50ms), .5s}@keyframes sway{50%{transform:rotate(-6deg)}}@keyframes fanhop{40%{transform:translateY(-26px)scale(1.1,.92)}}.screen{z-index:1;position:relative}.play{min-height:100dvh;padding-bottom:calc(110px + var(--safe-bottom))}.play .loading{text-align:center;color:var(--muted);margin-top:40dvh}.combo{opacity:0;flex-direction:column;justify-content:center;align-items:center;min-width:72px;height:44px;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);display:flex;transform:scale(.6)}.combo.on{opacity:1;transform:none}.combo strong{color:var(--accent-deep);font-size:1.4rem;line-height:1}.combo small{color:var(--accent-deep);white-space:nowrap;font-size:.6rem;font-weight:800}.combo-timer{background:var(--line);border-radius:2px;width:56px;height:3px;margin-top:2px;display:block;overflow:hidden}.combo-timer i{background:var(--accent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.pang{align-items:center;gap:8px;display:flex}.pang-bar{background:var(--line);border-radius:999px;flex:1;height:12px;overflow:hidden}.pang-fill{transform-origin:0;background:linear-gradient(90deg,#ffcf3f,#ff8a1f,#ff5c8a);height:100%;transition:transform .5s cubic-bezier(.2,.9,.3,1.2);transform:scaleX(.02)}.pang-label{text-align:right;min-width:64px;color:var(--accent-deep);font-variant-numeric:tabular-nums;font-weight:800}.play .question{min-height:34dvh;padding:16px;position:relative}.qtype{color:var(--muted);margin:0;font-size:.9rem;font-weight:800}.prompt{flex-direction:column;align-items:center;gap:6px;display:flex}.glyph{color:var(--ink);font-size:min(34vw,150px);font-weight:700;line-height:1.1}.glyph.word{font-size:min(14vw,64px)}.speaker{background:var(--accent);color:#fff;width:110px;height:110px;box-shadow:0 6px 0 var(--accent-deep);border:none;border-radius:50%;font-size:3rem;transition:transform 80ms}.speaker:active{transform:translateY(4px)}.prompt small{color:var(--muted)}.choices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.choice{border:3px solid var(--line);background:var(--card);border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:76px;padding:8px;font-weight:800;transition:transform .12s,opacity .25s;display:flex;position:relative}.choice:active{transform:scale(.95)}.choice .label{font-size:1.35rem}.choices.big .choice .label{font-size:2.6rem;font-weight:700}.choice .sub{color:var(--muted);font-size:.8rem;font-weight:700}.choice.correct{border-color:var(--good);background:#e6f8ef;animation:.35s cubic-bezier(.3,1.8,.5,1) pop}.choice.wrong{opacity:.45;animation:.35s nope}.choice.gone{opacity:.25;transform:scale(.94)}.choice.reveal{border-color:var(--good);animation:1s ease-in-out infinite glow;box-shadow:0 0 0 4px #bff0d6}@keyframes pop{50%{transform:scale(1.1)}}@keyframes nope{20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(4px)}}@keyframes glow{50%{transform:scale(1.04)}}.hanamaru{pointer-events:none;animation:.9s ease-out forwards maru;position:absolute;inset:10% 20%}@keyframes maru{0%{opacity:0;transform:scale(.4)rotate(-40deg)}30%{opacity:1;transform:scale(1.05)rotate(0)}80%{opacity:1}to{opacity:0;transform:scale(1.1)}}.banner{z-index:60;pointer-events:none;text-align:center;animation:1.3s cubic-bezier(.3,1.5,.5,1) forwards bannerIn;position:fixed;top:36%;left:50%;transform:translate(-50%,-50%)}.banner strong{color:#fff;-webkit-text-stroke:2px var(--accent-deep);text-shadow:0 4px 0 var(--accent-deep);white-space:nowrap;font-size:2.6rem;font-weight:900;display:block}.banner small{color:var(--accent-deep);font-weight:900;display:block}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}30%{transform:translate(-50%,-50%)scale(1)}85%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)scale(1)}}.fx-canvas{pointer-events:none;z-index:50;width:100vw;height:100dvh;position:fixed;inset:0}.start-overlay{z-index:70;background:#fff7eceb;border:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;inset:0}.start-overlay strong{color:#fff;background:var(--accent);box-shadow:0 6px 0 var(--accent-deep);border-radius:999px;padding:18px 40px;font-size:2rem}.start-overlay small{color:var(--muted);font-weight:700}.mascot-dock{right:calc(6px + var(--safe-right));bottom:calc(6px + var(--safe-bottom));z-index:40;pointer-events:none;position:fixed}body.left-handed .mascot-dock{right:auto;left:calc(6px + var(--safe-left))}.mascot-dock svg .hp-root,.mascot-dock svg .hp-head,.mascot-dock svg .hp-arm-up,.mascot-dock svg .hp-arm-chest,.mascot-dock svg .hp-mouth,.mascot-dock svg .hp-eye,.mascot-dock svg .hp-tail{transform-box:fill-box}.hp-root{transform-origin:50% 100%}.hp-head{transform-origin:50% 90%}.hp-arm-up{transform-origin:85% 95%}.hp-arm-chest{transform-origin:20% 20%}.hp-tail{transform-origin:0 100%}.hp-mouth,.hp-eye{transform-origin:50%}.pose-idle .hp-root{animation:2.4s ease-in-out infinite breathe}.pose-idle .hp-eye{animation:4s infinite blink}.pose-dance .hp-root{animation:.5s ease-in-out infinite alternate bob}.pose-dance .hp-head{animation:1s ease-in-out infinite tilt}.pose-dance .hp-arm-up{animation:.5s ease-in-out infinite alternate wave}.pose-dance .hp-tail{animation:.5s ease-in-out infinite alternate wag}.pose-jump .hp-root{animation:.7s cubic-bezier(.3,.7,.4,1) jump}.pose-jump .hp-arm-up{animation:.18s ease-in-out 4 alternate pump}.pose-clap .hp-root{animation:.5s cubic-bezier(.3,.7,.4,1) 2 jump}.pose-clap .hp-arm-chest{animation:.15s ease-in-out 6 alternate clap}.pose-clap .hp-arm-up{animation:.15s ease-in-out 6 alternate pump}.pose-spin .hp-root{transform-origin:50%;animation:.7s cubic-bezier(.4,.1,.3,1) spin}.pose-oops1 .hp-root{animation:.9s ease-out oopsTilt}.pose-oops2 .hp-root{animation:.9s ease-out oopsFlop}.pose-oops3 .hp-root{animation:.9s ease-out oopsShake}.pose-oops4 .hp-root{animation:.9s ease-out oopsDizzy}.pose-oops .hp-eye{animation:.9s squint}.pose-sleep .hp-root{transition:transform .6s;transform:rotate(-8deg)translateY(4%)}.pose-sleep .hp-eye{transform:scaleY(.12)}.pose-sleep:after{content:"Zzz";color:var(--muted);font-weight:900;animation:2s ease-in-out infinite zzz;position:absolute;top:-6px;right:8px}.talking .hp-mouth{animation:.18s ease-in-out infinite alternate talk}.held{text-align:center;border:3px solid var(--ink);white-space:nowrap;background:#fff;border-radius:14px;min-width:52px;padding:4px 10px;font-size:1.6rem;font-weight:800;animation:1.1s cubic-bezier(.3,1.6,.5,1) forwards held;position:absolute;top:-44px;left:-10px}@keyframes breathe{50%{transform:scale(1.02,.98)}}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}@keyframes bob{0%{transform:translateY(0)scale(1.02,.97)}to{transform:translateY(-6%)scale(.98,1.03)}}@keyframes tilt{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes wave{0%{transform:rotate(-10deg)}to{transform:rotate(14deg)}}@keyframes wag{0%{transform:rotate(-8deg)}to{transform:rotate(10deg)}}@keyframes jump{0%{transform:scale(1.1,.88)}35%{transform:translateY(-28%)scale(.94,1.08)}70%{transform:translateY(0)scale(1.08,.9)}to{transform:none}}@keyframes pump{0%{transform:rotate(-8deg)}to{transform:rotate(16deg)}}@keyframes clap{0%{transform:rotate(0)}to{transform:rotate(-28deg)}}@keyframes spin{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-18%)rotate(180deg)}to{transform:translateY(0)rotate(360deg)}}@keyframes oopsTilt{30%{transform:rotate(-16deg)translate(-6%)}60%{transform:rotate(8deg)}}@keyframes oopsFlop{30%{transform:scale(1.15,.7)}60%{transform:scale(.95,1.06)}}@keyframes oopsShake{15%,45%{transform:translate(-6%)}30%,60%{transform:translate(6%)}}@keyframes oopsDizzy{50%{transform:rotate(-10deg)scale(.95)}75%{transform:rotate(8deg)}}@keyframes squint{20%,70%{transform:scaleY(.3)}}@keyframes zzz{50%{opacity:.3;transform:translateY(-6px)}}@keyframes talk{0%{transform:scaleY(.75)}to{transform:scaleY(1.1)}}@keyframes held{0%{opacity:0;transform:translateY(20px)scale(.5)}25%{opacity:1;transform:translateY(-6px)scale(1.1)}40%{transform:none}85%{opacity:1}to{opacity:0;transform:translateY(-16px)}}.btn-play{background:var(--accent);border-color:var(--accent-deep);color:#fff;border-radius:50%;min-width:48px;min-height:48px;padding:0;font-size:1.1rem}.today-stage{text-align:center;color:var(--muted);margin:0;font-weight:700}.small{margin:0;font-size:.85rem}.result-mascot{justify-content:center;display:flex}.result-mascot .mascot{animation:2.4s ease-in-out infinite breathe}@media (prefers-reduced-motion:reduce){.bulb{animation:none}.flash{display:none}}.choices.trace-area{justify-content:center;display:flex}.trace-board{border:3px solid var(--line);background:#fff;border-radius:22px;padding:0;line-height:0;position:relative}.trace-canvas{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:20px;display:block}.trace-board.nope{animation:.35s nope}.trace-board.complete{border-color:var(--good);animation:.4s cubic-bezier(.3,1.8,.5,1) pop}.trace-word{justify-content:center;gap:6px;font-size:2.2rem;font-weight:700;display:flex}.trace-word span{text-align:center;opacity:.35;min-width:1.2em;transition:opacity .2s,transform .2s}.trace-word span.now{opacity:1;color:var(--accent-deep);transform:scale(1.1)}.trace-word span.done{opacity:.8}.speaker.small{width:52px;height:52px;box-shadow:0 4px 0 var(--accent-deep);font-size:1.4rem}.play .question:has(.trace-word){flex-direction:row;gap:14px;min-height:auto;padding:10px 16px}.trace-practice .jamo-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.trace-practice .jamo-grid button{border:2px solid var(--line);background:var(--card);border-radius:12px;min-height:48px;font-size:1.4rem;font-weight:700}.trace-practice .jamo-grid button.on{background:var(--accent);color:#fff;border-color:var(--accent-deep)}.trace-practice .jamo-grid button.cleared:after{content:"✓";color:var(--good);vertical-align:top;margin-left:2px;font-size:.7rem}.trace-practice .stage-area{flex-direction:column;align-items:center;gap:10px;display:flex}.trace-practice .tools{justify-content:space-between;gap:10px;width:100%;max-width:360px;display:flex}body.left-handed .trace-practice .tools{flex-direction:row-reverse}.trace-practice .now-glyph{color:var(--muted);font-size:1.1rem;font-weight:800}.play .question:has(.trace-word) .prompt{flex-direction:row;gap:12px}.play .question:has(.trace-word) .qtype{flex:1}.choices.speak-area{display:block}.speak-panel{flex-direction:column;align-items:center;gap:12px;padding:8px 0;display:flex}.mic{background:var(--accent);color:#fff;width:132px;height:132px;box-shadow:0 6px 0 var(--accent-deep);border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:transform .1s;display:flex}.mic span{font-size:3rem;line-height:1}.mic small{font-weight:800}.mic:active{transform:translateY(4px)}.mic.listening{background:#ff5c8a;animation:1s ease-out infinite micPulse;box-shadow:0 0 #ff5c8a99}@keyframes micPulse{0%{box-shadow:0 0 #ff5c8a8c}to{box-shadow:0 0 0 26px #ff5c8a00}}.speak-msg{text-align:center;min-height:1.4em;color:var(--muted);margin:0;font-weight:700}.speak-msg.live{color:#ff5c8a}.speak-msg.good{color:var(--good)}.speak-msg.again{color:var(--accent-deep)}.speak-panel.self .row-btns{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.speak-panel.self .btn{min-width:96px}.glyph.ja{font-size:min(9vw,40px)}.name-sound{gap:6px;display:flex}.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;min-height:40px;padding:0 12px;font-weight:800}.play .question:has(.speak-msg){min-height:26dvh}.link-btn{color:var(--muted);background:0 0;border:none;min-height:44px;font-weight:700;text-decoration:underline}.choices.tile-area{display:block}.tiles{flex-direction:column;align-items:stretch;gap:12px;display:flex}.tile-preview{text-align:center;min-height:1.2em;color:var(--accent-deep);font-size:3.2rem;font-weight:700;line-height:1.1}.tile-preview:empty{display:none}.tile-row{border:3px dashed var(--line);background:#fffaf3;border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:56px;padding:8px;display:flex}.tile-pool{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.tile{border:3px solid var(--line);background:var(--card);border-radius:14px;min-width:48px;min-height:48px;padding:6px 14px;font-size:1.3rem;font-weight:800;transition:transform .12s,opacity .2s}.tile-pool.big .tile{min-width:64px;min-height:64px;font-size:2rem}.tile:active{transform:scale(.94)}.tile.used{opacity:.15;transform:scale(.9)}.tile.gone{opacity:.25}.tile.nope{animation:.35s nope}.tile.reveal{border-color:var(--good);animation:1s ease-in-out infinite glow;box-shadow:0 0 0 4px #bff0d6}.tile.placed{border-color:var(--accent);background:var(--accent-soft);animation:.3s cubic-bezier(.3,1.8,.5,1) pop}.glyph.sentence{text-align:center;font-size:min(7vw,30px);line-height:1.4}.ja-hint{color:var(--muted);text-align:center;margin:0;font-weight:700}.note-pop{color:#1f4e79;background:#eef7ff;border-radius:12px;margin:6px 0 0;padding:8px 12px;font-size:.9rem;font-weight:700;animation:.3s ease-out pop}.choices.wide{grid-template-columns:1fr}.reading-card{text-align:left;border:2px solid var(--line);background:#fffaf3;border-radius:14px;width:100%;padding:10px 14px}.reading-title{color:var(--accent-deep);margin:0 0 6px;font-size:1rem}.reading-line{margin:4px 0;font-size:1.15rem;line-height:1.6}.reading-line .hl{font:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);color:inherit;background:0 0;border:none;min-height:auto;padding:0 1px;font-weight:800;text-decoration-thickness:3px}.reading-ja{border-top:1px dashed var(--line);color:var(--muted);margin-top:8px;padding-top:8px;font-size:.9rem}.reading-ja p{margin:2px 0}.reading-q{text-align:center;margin:8px 0 0;font-weight:800}.play .question:has(.reading-card){justify-content:flex-start;min-height:auto}