:root{--font:"Arial Rounded MT Bold", "Trebuchet MS", "Comic Sans MS", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100dvh;font-family:var(--font);color:#fff;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;background:#222;margin:0;overflow:hidden}button{cursor:pointer;touch-action:manipulation;border:0;outline:none;font-family:inherit}.app,.screen{position:absolute;inset:0}.hud{z-index:20;pointer-events:none;text-shadow:0 .3vh #00000040;background:#00000052;border-radius:99px;padding:.6vh 2vw;font-size:clamp(20px,4.2vh,44px);font-weight:900;position:fixed;top:2vh;left:2vw}.gear{z-index:30;color:#fff;opacity:.45;background:#00000024;border-radius:50%;place-items:center;width:52px;height:52px;font-size:26px;display:grid;position:fixed;top:1.5vh;right:1.5vw}.gear .ico{display:block}.gear.holding{opacity:1;background:#00000073}.gear.holding .ico{transition:transform 2s linear;transform:rotate(360deg)}.corner{z-index:30;background:0 0;width:90px;height:90px;position:fixed;bottom:0;left:0}.welcome{text-align:center;background:linear-gradient(160deg,#8ec5fc 0%,#e0c3fc 55%,#ffc3e0 100%);flex-direction:column;justify-content:center;align-items:center;gap:2.2vh;display:flex;position:absolute;inset:0}.hi{color:#fff;text-shadow:0 1vh #5b2d9e,0 0 3vh #5b2d9e80;margin:0;font-size:15vh;line-height:1}.menu{flex-direction:column;gap:2.4vh;width:min(92vw,1000px);display:flex}.big-btn{color:#fff;text-shadow:0 .6vh #0003;border-radius:5vh;justify-content:center;align-items:center;gap:3vw;height:21vh;font-size:8.5vh;font-weight:900;transition:transform 80ms;display:flex;box-shadow:0 1.2vh #00000040}.big-btn:active{transform:translateY(1vh)scale(.98);box-shadow:0 .2vh #00000040}.big-btn .em{font-size:11vh}.b1{background:#ff4d6d}.b2{background:#ff9f1c}.b3{background:#2ec4b6}.tip{color:#4a2a86;margin:0;font-size:clamp(18px,3.2vh,34px);font-weight:700}.stage{color:#fff;text-align:center;background:radial-gradient(circle at 50% 38%, hsl(var(--h) 90% 60%), hsl(var(--h) 80% 38%));flex-direction:column;justify-content:center;align-items:center;gap:1vh;padding-top:6vh;display:flex;position:absolute;inset:0}.big{letter-spacing:-.02em;-webkit-text-stroke:.7vh #00000047;paint-order:stroke fill;text-shadow:0 1.4vh #00000040;font-size:42vh;font-weight:900;line-height:.92}.stage[data-kind=prompt] .big{font-size:34vh;animation:1.6s ease-in-out infinite wiggle}.emoji{min-height:1em;font-size:15vh;line-height:1.05}.word{text-shadow:0 .6vh #00000040;font-size:8.5vh;font-weight:900}.praise{text-shadow:0 .4vh #00000040;min-height:7vh;font-size:5.6vh;font-weight:800}.counts{flex-wrap:wrap;justify-content:center;gap:.6vh 1.2vw;max-width:82vw;min-height:9vh;display:none}.counts span{font-size:min(8.4vh,9vw);line-height:1.1;animation:.35s cubic-bezier(.2,.9,.3,1.3) both pop}.counts .none{font-size:6vh;font-weight:800}.stage[data-kind=number] .emoji{display:none}.stage[data-kind=number] .counts{display:flex}.stage[data-kind=number] .big{font-size:40vh}.stage[data-kind=prompt] .emoji,.stage[data-kind=prompt] .praise{visibility:hidden}.xylo-bg{background:radial-gradient(circle at 50% 20%,#4c3bb0,#1a1446 75%)}.xylo{flex-direction:column;gap:1.5vh;padding:8vh 3vw 2.5vh;display:flex;position:absolute;inset:0}.note{text-shadow:0 .8vh #0000004d;justify-content:center;align-items:center;height:15vh;font-size:13vh;font-weight:900;line-height:1;display:flex}.bars{flex:1;align-items:center;gap:1.4vw;min-height:0;display:flex}.bar{height:var(--h);background:var(--c);color:#fff;text-shadow:0 .4vh #00000040;border-radius:3.5vh;flex-direction:column;flex:1;justify-content:space-between;align-items:center;padding:2.2vh 0;font-weight:900;transition:transform 60ms,filter 60ms;display:flex;box-shadow:inset 0 -1.2vh #0003,0 1vh #00000059}.bar .nm{font-size:min(6.4vh,5.2vw)}.bar .key{color:#222;text-shadow:none;text-align:center;background:#ffffff59;border-radius:1.2vh;min-width:1.6em;padding:.3vh 1vw;font-size:max(18px,3.6vh)}.bar.lit{filter:brightness(1.4)saturate(1.2);box-shadow:0 0 7vh var(--c), inset 0 -1.2vh 0 #0000001a;transform:scale(1.07)}.twinkle{color:#4a3400;background:#ffd60a;border-radius:99px;align-self:center;padding:1.6vh 5vw;font-size:5.6vh;font-weight:900;box-shadow:0 1vh #b38f00}.twinkle:active{transform:translateY(.8vh);box-shadow:0 .2vh #b38f00}.twinkle.playing{color:#fff;background:#ff6b6b;box-shadow:0 1vh #b23b3b}.fx{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.spark{font-size:7vmin;animation:.9s ease-out forwards spark;position:absolute}@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%)scale(.3)}to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.4) rotate(200deg);opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.2)rotate(-12deg)}55%{opacity:1;transform:scale(1.25)rotate(6deg)}80%{transform:scale(.94)rotate(-2deg)}to{transform:scale(1)rotate(0)}}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}30%{transform:translateY(-7vh)scale(1.06)rotate(-3deg)}60%{transform:translateY(0)scale(.96)rotate(2deg)}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)scale(1.04)}}.pop{animation:.35s cubic-bezier(.2,.9,.3,1.3) pop}.bounce{animation:.45s ease-out bounce}.modal{z-index:100;touch-action:manipulation;background:#0a0a1eb3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.panel{color:#222;-webkit-user-select:text;user-select:text;background:#fff;border-radius:24px;width:min(92vw,520px);padding:28px 32px;font-size:20px}.panel h2{margin:0 0 18px;font-size:30px}.row{justify-content:space-between;align-items:center;gap:16px;margin:14px 0;font-weight:700;display:flex}.row input[type=text]{font:inherit;border:3px solid #bbb;border-radius:12px;width:220px;padding:8px 12px;font-size:22px}.row input[type=checkbox]{accent-color:#2ec4b6;width:28px;height:28px}.hint{color:#555;margin:12px 0 0;font-size:16px;line-height:1.4}.actions{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.btn{color:#fff;background:#3a86ff;border-radius:14px;padding:14px 24px;font-size:22px;font-weight:800}.btn.danger{background:#e63946}.btn.ok{background:#2ec4b6;flex:1;padding:20px;font-size:28px}.confirm{text-align:center}.confirm h2{font-size:36px}.name-setup{touch-action:manipulation;background:radial-gradient(circle at 20% 15%,#fff3a8,#0000 28%),radial-gradient(circle at 80% 75%,#a8ebff,#0000 30%),#ffc8dd;place-items:center;padding:24px;display:grid;position:fixed;inset:0;overflow:auto}.name-cloud{color:#402060;text-align:center;-webkit-user-select:text;user-select:text;background:#fffaf3;border-radius:48px;width:min(92vw,680px);padding:clamp(28px,6vw,58px);box-shadow:0 18px #9b5de5,0 30px 70px #4a2a8640}.name-mascot{animation:float 2.4s var(--ease-out,ease-out) infinite alternate;font-size:clamp(70px,15vw,130px);line-height:.9;display:block}.name-cloud p{margin:20px 0 0;font-size:clamp(20px,4vw,30px);font-weight:800}.name-cloud h1{color:#7b2cbf;margin:0 0 30px;font-size:clamp(54px,12vw,92px);line-height:.95}.name-cloud label{margin-bottom:12px;font-size:clamp(19px,3.5vw,26px);font-weight:800;display:block}.name-cloud input{width:100%;font:inherit;text-align:center;border:4px solid #c77dff;border-radius:20px;outline:none;padding:16px 20px;font-size:clamp(22px,5vw,34px)}.name-cloud input:focus{border-color:#3a86ff;box-shadow:0 0 0 6px #3a86ff2e}.name-cloud button{color:#fff;background:#ff4d6d;border-radius:20px;width:100%;margin-top:18px;padding:18px;font-size:clamp(24px,5vw,38px);font-weight:900;box-shadow:0 8px #b92d48}.name-cloud button:active{transform:translateY(6px);box-shadow:0 2px #b92d48}.name-cloud button:disabled{filter:grayscale();opacity:.45}.name-cloud small{color:#675477;margin-top:18px;font-size:14px;display:block}.welcome-title span{color:#4a2a86;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(16px,2.8vh,28px);font-weight:900;display:block}.welcome-title .hi,.welcome-title h1{color:#fff;text-shadow:0 .7vh #5b2d9e;margin:0;font-size:clamp(52px,10vh,100px);line-height:1}.welcome .menu{grid-template-columns:repeat(3,1fr);gap:min(2vh,18px);width:min(94vw,1180px);display:grid}.welcome .big-btn{border-radius:4vh;flex-direction:column;gap:.4vh;height:min(25vh,220px);padding:2vh 1vw;font-size:clamp(20px,4.2vh,42px)}.welcome .big-btn .em{font-size:clamp(48px,9vh,90px)}.b4{background:#3a86ff}.b5{background:#8338ec}.b6{background:#43aa8b}.discovery-stage{color:#fff;text-align:center;background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--discovery), white 20%), var(--discovery));place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.discovery-content{animation:.48s cubic-bezier(.22,1,.36,1) both discovery-in}.discovery-emoji{filter:drop-shadow(0 2vh #0003);font-size:min(48vh,48vw);line-height:.95}.discovery-name{text-shadow:0 1vh #00000038;margin-top:2vh;font-size:min(15vh,15vw);font-weight:900;line-height:.9}.discovery-prompt{gap:3vh;padding:6vw;display:grid}.discovery-prompt span{font-size:min(30vh,34vw);animation:1.6s ease-in-out infinite wiggle}.discovery-prompt strong{text-shadow:0 .7vh #00000038;font-size:min(9vh,9vw)}@keyframes discovery-in{0%{opacity:0;transform:scale(.3)rotate(-8deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes float{0%{transform:translateY(0)rotate(-3deg)}to{transform:translateY(-10px)rotate(3deg)}}.progress-panel{width:min(94vw,720px);max-height:92vh;overflow:auto}.progress-summary{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.progress-summary div{color:#4a2a86;text-align:center;background:#f3e8ff;border-radius:16px;min-width:0;padding:14px 8px}.progress-summary strong,.progress-summary span{display:block}.progress-summary strong{text-overflow:ellipsis;white-space:nowrap;font-size:24px;overflow:hidden}.progress-summary span{text-transform:uppercase;margin-top:4px;font-size:13px;font-weight:800}.explored-summary{flex-wrap:wrap;gap:8px;margin:14px 0 18px;display:flex}.explored-summary span{color:#3d3150;background:#edf6f9;border-radius:99px;padding:8px 11px;font-size:14px;font-weight:800}@media (max-width:760px),(max-height:650px){.welcome{gap:1.2vh;padding:2vh 2vw}.welcome .menu{grid-template-columns:repeat(2,1fr);gap:1.4vh 2vw}.welcome .big-btn{height:min(23vh,160px);font-size:clamp(17px,3.7vh,30px)}.welcome .big-btn .em{font-size:clamp(38px,7vh,64px)}.tip{font-size:clamp(14px,2.4vh,22px)}.progress-summary{grid-template-columns:repeat(2,1fr)}.panel{padding:22px}.row{flex-direction:column;align-items:flex-start}.row input[type=text]{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}