:root{--paper:#fdf3e0;--paper-deep:#f7e6c4;--ink:#2e3350;--ink-soft:#6a6f8e;--accent:#ff8f3f;--accent-ink:#4a2500;--good:#3fb96b;--bad:#ef476f;--sky:#6cc6f5;--card:#fff;--shadow:#2e33502e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%}body{color:var(--ink);background-color:var(--paper);user-select:none;-webkit-user-select:none;background-image:radial-gradient(#ff8f3f1f 2.5px,#0000 2.5px);background-size:26px 26px;font-family:Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}button{color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:none;font-family:inherit}.hidden{display:none!important}.screen{display:flex;padding:max(1rem,env(safe-area-inset-top))1rem max(1rem,env(safe-area-inset-bottom));flex-direction:column;max-width:560px;min-height:100dvh;margin:0 auto}.menu-head{text-align:center;padding:1.6rem 0 1.2rem}.logo{letter-spacing:.02em;color:var(--ink);font-family:Fredoka,sans-serif;font-size:clamp(2.6rem,12vw,3.6rem);font-weight:700}.logo-it{color:var(--accent);text-shadow:0 3px #4a250040}.menu-sub{color:var(--ink-soft);margin-top:.35rem;font-weight:700}.picker-label{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.7rem;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600}.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;padding-bottom:1.5rem}.level-btn{position:relative;display:flex;background:var(--card);border:3px solid var(--ink);box-shadow:0 4px 0 var(--shadow);text-align:left;border-radius:18px;flex-direction:column;align-items: flex-start;gap:.15rem;padding:.7rem .85rem;transition:transform .12s}.level-btn:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(3px)}.level-btn.locked{opacity:.55;background:var(--paper-deep);cursor:default}.level-num{color:var(--accent-ink);background:var(--accent);border:2px solid var(--ink);display:inline-flex;border-radius:999px;justify-content:center;align-items: center;min-width:1.7rem;height:1.7rem;font-family:Fredoka,sans-serif;font-size:.85rem;font-weight:700}.level-name{font-family:Fredoka,sans-serif;font-size:1.05rem;font-weight:600}.level-stars{min-height:1.1rem;font-size:.8rem}.level-mode{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:700}.hud{display:flex;align-items: center;gap:.7rem;padding-bottom:.6rem}.btn-back{border:3px solid var(--ink);background:var(--card);box-shadow:0 3px 0 var(--shadow);border-radius:14px;flex-shrink:0;width:2.5rem;height:2.5rem;font-family:Fredoka,sans-serif;font-size:1.6rem;font-weight:700;line-height:1}.hud-level{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600}.round-track{display:flex;flex-shrink:0;gap:.3rem;margin-left:auto}.round-dot{border:2px solid var(--ink);background:var(--card);border-radius:50%;width:.65rem;height:.65rem;transition:background .25s,transform .25s}.round-dot.found{background:var(--good);transform:scale(1.2)}.round-dot.found-retry{background:var(--sky);transform:scale(1.2)}.stage{display:flex;flex-direction:column;flex:1;justify-content:center;align-items: center;gap:clamp(.9rem,3.5vh,1.6rem);padding-bottom:1rem}.picture-card{position:relative;aspect-ratio:1;background:var(--card);border:4px solid var(--ink);box-shadow:0 6px 0 var(--shadow);display:flex;border-radius:28px;justify-content:center;align-items: center;width:min(62vw,34dvh,300px)}.picture-card.pop{animation:pop-in .35s cubic-bezier(.34,1.56,.64,1)}@keyframes pop-in{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.picture{cursor:pointer;font-size:min(38vw,21dvh,180px);line-height:1}.btn-speak{position:absolute;background:var(--sky);border:3px solid var(--ink);box-shadow:0 3px 0 var(--shadow);display:flex;border-radius:50%;justify-content:center;align-items: center;width:3rem;height:3rem;font-size:1.3rem;bottom:-.7rem;right:-.7rem}.btn-speak:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(2px)}.letter-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}.tile{border:3px dashed var(--ink-soft);display:flex;text-transform:lowercase;background:#ffffff8c;border-radius:12px;justify-content:center;align-items: center;width:clamp(2rem,9vw,2.8rem);height:clamp(2.5rem,11vw,3.4rem);font-family:Fredoka,sans-serif;font-size:clamp(1.4rem,6.5vw,2rem);font-weight:700}.tile.filled{border:3px solid var(--ink);background:var(--card);box-shadow:0 3px 0 var(--shadow);animation:tile-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes tile-pop{0%{transform:scale(.5)}to{transform:scale(1)}}.choices{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:380px}.choice{text-transform:lowercase;letter-spacing:.06em;background:var(--card);border:3px solid var(--ink);box-shadow:0 4px 0 var(--shadow);border-radius:18px;padding:.55em 1em;transition:transform .12s,background .2s;font-family:Fredoka,sans-serif;font-size:clamp(1.5rem,7vw,2rem);font-weight:600}.choice:active:not(:disabled){box-shadow:0 1px 0 var(--shadow);transform:translateY(3px)}.choice .ghost{color:var(--ink-soft);opacity:.55}.choice.correct{background:var(--good);color:#fff;animation:cheer .45s ease}.choice.correct .ghost{color:#ffffffbf;opacity:1}.choice.wrong{background:var(--paper-deep);color:var(--ink-soft);animation:shake .4s ease;opacity:.6}@keyframes cheer{0%,to{transform:scale(1)}40%{transform:scale(1.07)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}50%{transform:translate(6px)}75%{transform:translate(-4px)}}.choices[style*="--options: 5"] .choice{padding:.45em 1em;font-size:clamp(1.3rem,6vw,1.7rem)}.overlay{position:fixed;display:flex;z-index:10;background:#2e33508c;justify-content:center;align-items: center;padding:1.2rem;inset:0}.card-panel{position:relative;background:var(--paper);border:4px solid var(--ink);text-align:center;animation:pop-in .35s cubic-bezier(.34,1.56,.64,1);border-radius:26px;width:min(100%,380px);padding:1.6rem 1.4rem;box-shadow:0 8px #00000040}.win-eyebrow{font-family:Fredoka,sans-serif;font-size:1.5rem;font-weight:700}.stars{margin:.4rem 0;font-size:2.4rem}.stars .dim{filter:grayscale(1);opacity:.35}.win-note{color:var(--ink-soft);margin-bottom:1.1rem;font-weight:700}.win-actions{display:flex;flex-direction:column;gap:.55rem}.btn-play{background:var(--accent);color:var(--accent-ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--shadow);border-radius:18px;padding:.7em 1.4em;font-family:Fredoka,sans-serif;font-size:1.2rem;font-weight:700}.btn-play:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(3px)}.btn-ghost{background:var(--card);border:3px solid var(--ink);box-shadow:0 3px 0 var(--shadow);border-radius:18px;padding:.55em 1.2em;font-family:Fredoka,sans-serif;font-size:1.05rem;font-weight:600}.btn-ghost:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(2px)}.confetti{position:absolute;overflow:hidden;pointer-events:none;inset:0}.confetti span{position:absolute;animation:fall linear infinite;top:-2.5rem}@keyframes fall{to{transform:translateY(110vh)rotate(320deg)}}@media (prefers-reduced-motion:reduce){.picture-card.pop,.card-panel,.choice.correct,.choice.wrong,.tile.filled{animation:none}}@media (orientation:landscape) and (max-height:500px){.stage{flex-direction:row;gap:1.6rem}.picture-card{width:min(40dvh,200px)}.picture{font-size:min(26dvh,120px)}.stage>.letter-row,.stage>.choices{flex-basis:auto}.choices{gap:.45rem}.choice{padding:.4em 1em;font-size:1.25rem}}