:root{--ink:#2d2a4a;--ink-soft:#6b6890;--card:#fffaf0;--pink:#ff5d8f;--pink-deep:#d93a6e;--yellow:#ffd23f;--yellow-deep:#e0a800;--green:#2ecc71;--green-deep:#1f9e55;--blue:#3d8bff;--sky:#bfe8ff;--radius:28px;--font:"Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;--gutter:max(16px, env(safe-area-inset-left))}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--sky);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.stage{touch-action:none;position:fixed;inset:0}.overlay{padding:var(--gutter);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay>*{pointer-events:auto}.overlay.dim{pointer-events:auto;background:#2d2a4a40}.panel{background:var(--card);border-radius:var(--radius);flex-direction:column;gap:20px;width:min(460px,100%);max-height:calc(100dvh - 32px);padding:clamp(20px,4vmin,32px);animation:.45s cubic-bezier(.34,1.56,.64,1) both pop-in;display:flex;overflow:auto;box-shadow:0 8px #2d2a4a26,0 20px 50px #2d2a4a33}.panel-title{text-align:center;margin:0;font-size:clamp(28px,6vmin,40px);font-weight:700}.btn{border-radius:999px;padding:14px 26px;font-size:clamp(20px,4vmin,26px);font-weight:600;transition:transform .1s,box-shadow .1s}.btn:active{transform:translateY(4px)}.btn:disabled{opacity:.45;cursor:default}.btn-go{background:var(--green);color:#fff;box-shadow:0 6px 0 var(--green-deep)}.btn-go:active{box-shadow:0 2px 0 var(--green-deep)}.btn-soft{background:#fff;box-shadow:0 6px #2d2a4a26}.btn-soft:active{box-shadow:0 2px #2d2a4a26}.btn-play{aspect-ratio:1;background:var(--pink);color:#fff;width:clamp(110px,22vmin,160px);box-shadow:0 8px 0 var(--pink-deep), 0 16px 40px #d93a6e59;border-radius:50%;padding:0 0 0 .12em;font-size:clamp(44px,9vmin,68px);animation:1.6s ease-in-out infinite breathe}.btn-play:active{box-shadow:0 3px 0 var(--pink-deep)}.field{flex-direction:column;gap:10px;display:flex}.field-label{color:var(--ink-soft);text-align:center;font-size:16px;font-weight:500}.name-input{font:inherit;text-align:center;color:var(--ink);-webkit-user-select:text;user-select:text;background:#fff;border:3px solid #e6e1f5;border-radius:20px;outline:none;padding:12px 16px;font-size:clamp(26px,5vmin,34px);font-weight:600}.name-input:focus{border-color:var(--blue)}.swatches{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.swatch{aspect-ratio:1;border-radius:50%;width:clamp(44px,9vmin,56px);transition:transform .15s cubic-bezier(.34,1.56,.64,1);box-shadow:inset 0 -5px #00000026}.swatch.is-on{outline:4px solid var(--ink);outline-offset:3px;transform:scale(1.18)}.stepper{justify-content:center;align-items:center;gap:18px;display:flex}.stepper .btn{width:56px;height:56px;padding:0;font-size:28px}.stepper-value{text-align:center;min-width:1.5em;font-size:36px;font-weight:700}.setup{align-items:flex-start;padding-top:clamp(16px,6vh,64px)}.title{flex-direction:column;justify-content:space-between;padding-block:clamp(20px,6vh,56px)}.title-top{text-align:center}.logo{color:#fff;text-shadow:0 5px 0 var(--pink), 0 10px 24px #2d2a4a40;letter-spacing:-.01em;margin:0;font-size:clamp(48px,11vmin,96px);font-weight:700;line-height:.95}.hello{color:var(--ink);margin:10px 0 0;font-size:clamp(22px,4.5vmin,32px);font-weight:600}.title-bottom{flex-direction:column;align-items:center;gap:22px;display:flex}.count{background:var(--yellow);border-radius:999px;min-width:1.6em;margin-left:6px;padding:0 8px;display:inline-block}.settings-btn{right:var(--gutter);color:var(--ink-soft);background:#fff9;border-radius:12px;padding:8px 12px;font-size:14px;position:fixed;bottom:14px}.hud{pointer-events:none;position:fixed;inset:0}.hud button{pointer-events:auto}.hud-top{top:14px;left:var(--gutter);right:var(--gutter);justify-content:space-between;align-items:flex-start;display:flex;position:absolute}.hud-actions{gap:8px;display:flex}.roadmap{background:#ffffffd1;border-radius:22px;width:clamp(190px,30vw,300px);padding:4px 8px;box-shadow:0 4px #2d2a4a1a}.roadmap-svg{width:100%;height:auto;display:block;overflow:visible}.rm-road{fill:none;stroke:#767a9c;stroke-width:10px;stroke-linecap:round}.rm-dash{fill:none;stroke:#fff;stroke-width:1.6px;stroke-dasharray:5 6;stroke-linecap:round}.rm-spot{fill:#fff;stroke:#2d2a4a40;stroke-width:2px;stroke-dasharray:3 2.5}.rm-spot.is-got{stroke:none;fill:#fff6cc}.rm-spot.is-miss{stroke-dasharray:none;stroke:#2d2a4a26;fill:#eeeaf6}.rm-star{transform-box:fill-box;transform-origin:50%;font-size:13px;animation:.5s cubic-bezier(.34,1.56,.64,1) both pop-in}.rm-flag{font-size:16px}.word-card{background:var(--card);border-radius:999px;align-items:center;gap:10px;padding:6px 16px 6px 10px;animation:.45s cubic-bezier(.34,1.56,.64,1) .25s both pop-in;display:flex;box-shadow:0 5px #2d2a4a1f}.word-emoji{font-size:clamp(28px,5vmin,40px);line-height:1}.word-letters{letter-spacing:.02em;gap:2px;font-size:clamp(22px,4.2vmin,32px);font-weight:700;display:flex}.word-letter{display:inline-block}.word-letter.is-key{color:var(--pink)}.word-card.is-spelling .word-letter{animation:.5s ease-out both letter-pop}.icon-btn{aspect-ratio:1;background:#ffffffd9;border-radius:50%;width:clamp(44px,8vmin,56px);font-size:clamp(20px,4vmin,26px);box-shadow:0 4px #2d2a4a1f}.prompt-stack{flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.target{aspect-ratio:1;background:var(--card);border-radius:30px;width:clamp(104px,20vmin,168px);animation:.55s cubic-bezier(.34,1.56,.64,1) both drop-in;position:relative;box-shadow:0 7px #2d2a4a26,0 14px 30px #2d2a4a2e}.target-art{width:100%;height:100%;display:block}@media (width<=720px){.prompt-stack{top:84px}}.feedback{color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-size:clamp(56px,13vmin,110px);font-weight:700;animation:1.4s cubic-bezier(.34,1.56,.64,1) both feedback;position:absolute;top:42%;left:50%}.feedback.is-yay{text-shadow:0 6px 0 var(--ink), 0 12px 30px #00000040}.feedback.is-oops{color:#fff;text-shadow:0 5px 0 var(--ink), 0 12px 30px #00000026;font-size:clamp(40px,9vmin,76px)}.hud-bottom{left:var(--gutter);right:var(--gutter);bottom:max(16px, env(safe-area-inset-bottom));justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute}.arrow{aspect-ratio:1;width:clamp(72px,14vmin,104px);color:var(--ink);touch-action:none;background:#ffffffd9;border-radius:50%;font-size:clamp(30px,6vmin,44px);box-shadow:0 6px #2d2a4a26}.arrow:active{transform:translateY(4px);box-shadow:0 2px #2d2a4a26}.hud-center{flex-direction:column;align-items:center;gap:10px;display:flex}.arrow.boost{background:var(--yellow);box-shadow:0 6px 0 var(--yellow-deep)}.arrow.boost:active{box-shadow:0 2px 0 var(--yellow-deep)}.keys-hint{text-align:center;background:#ffffffd9;border-radius:999px;padding:8px 16px;font-size:clamp(14px,2.6vmin,18px);font-weight:500}.end{text-align:center;align-items:center}.end-stars{gap:6px;font-size:clamp(34px,7vmin,48px);display:flex}.end-star{filter:grayscale()opacity(.25)}.end-star.is-got{filter:none;animation:.5s cubic-bezier(.34,1.56,.64,1) both pop-in}.sticker-reveal{flex-direction:column;align-items:center;gap:4px;display:flex}.sticker-label{color:var(--ink-soft);font-weight:600}.sticker-big{font-size:clamp(80px,17vmin,120px);line-height:1.1;animation:.9s cubic-bezier(.34,1.56,.64,1) .9s both sticker}.end-actions{align-items:center;gap:12px;display:flex}.jar{flex-direction:column;align-items:center;gap:10px;display:flex}.jar-slots{background:#fff;border-radius:999px;align-items:center;gap:6px;padding:8px 12px;display:flex;box-shadow:inset 0 0 0 3px #efe9fb}.jar-slot{border:3px dashed #2d2a4a26;border-radius:50%;place-items:center;width:36px;height:36px;font-size:24px;display:grid}.jar-slot.is-full{border:0;animation:.5s cubic-bezier(.34,1.56,.64,1) both pop-in}.jar-prize{margin-left:4px;font-size:30px}.book-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px;display:grid}.slot{aspect-ratio:1;border:3px dashed #2d2a4a26;border-radius:18px;place-items:center;font-size:34px;display:grid}.slot.is-got{background:#fff;border:0;box-shadow:0 4px #2d2a4a1a}@keyframes pop-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes drop-in{0%{transform:translateY(-140%)rotate(-8deg)}to{transform:translateY(0)rotate(0)}}@keyframes letter-pop{0%{transform:scale(1)}40%{color:var(--pink);transform:scale(1.45)translateY(-4px)}to{transform:scale(1)}}@keyframes breathe{0%,to{scale:1}50%{scale:1.06}}@keyframes feedback{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)}25%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}75%{opacity:1;transform:translate(-50%,-60%)scale(1)}to{opacity:0;transform:translate(-50%,-80%)scale(.9)}}@keyframes sticker{0%{transform:scale(0)rotate(-30deg)}to{transform:scale(1)rotate(-6deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}