:root{--bg:#fff4e6;--bg-blob-1:#ffd6e7;--bg-blob-2:#c9f2ff;--bg-blob-3:#fff1a8;--ink:#2b2250;--ink-soft:#6b6390;--surface:#fff;--surface-border:#e6defa;--correct:#18c29c;--correct-shadow:#0f8f72;--present:#ffc533;--present-shadow:#d99a00;--present-ink:#3d2a00;--absent:#a39dc0;--absent-shadow:#7d769e;--accent:#ff5c8a;--accent-shadow:#d63a69;--blue:#5b8cff;--purple:#a66cff;--key-bg:#fff;--key-shadow:#d6cdf2;--backdrop:#2b225073;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1d1838;--bg-blob-1:#44295e;--bg-blob-2:#1f3f66;--bg-blob-3:#4a3a20;--ink:#f5f0ff;--ink-soft:#b7aedb;--surface:#2a2350;--surface-border:#463c7a;--absent:#5d5687;--absent-shadow:#403a66;--key-bg:#3a3170;--key-shadow:#231c4a;--backdrop:#0a061e99;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#1d1838;--bg-blob-1:#44295e;--bg-blob-2:#1f3f66;--bg-blob-3:#4a3a20;--ink:#f5f0ff;--ink-soft:#b7aedb;--surface:#2a2350;--surface-border:#463c7a;--absent:#5d5687;--absent-shadow:#403a66;--key-bg:#3a3170;--key-shadow:#231c4a;--backdrop:#0a061e99;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@keyframes pop{0%{transform:scale(.8)}40%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes flip{0%{background:var(--surface);border-color:var(--accent);color:var(--ink);box-shadow:0 4px 0 var(--surface-border);transform:rotateX(0)}49%{background:var(--surface);border-color:var(--accent);color:var(--ink);box-shadow:0 4px 0 var(--surface-border);transform:rotateX(90deg)}50%{background:var(--tile-bg);border-color:var(--tile-bg);color:var(--tile-ink);box-shadow:0 4px 0 var(--tile-shadow);transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes bounce{0%,to{transform:translateY(0)}35%{transform:translateY(-40%)rotate(-6deg)}60%{transform:translateY(6%)rotate(3deg)}80%{transform:translateY(-12%)}}@keyframes shake{0%,to{transform:translate(0)}15%,55%{transform:translate(-9px)}35%,75%{transform:translate(9px)}}@keyframes bob{0%,to{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-4px) rotate(calc(var(--tilt) * -1))}}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}*,:before,:after{box-sizing:border-box}html,body{margin:0}body{min-height:100svh;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(circle at 8% 12%, var(--bg-blob-1) 0, transparent 32%), radial-gradient(circle at 92% 22%, var(--bg-blob-2) 0, transparent 34%), radial-gradient(circle at 50% 100%, var(--bg-blob-3) 0, transparent 42%);-webkit-tap-highlight-color:transparent;background-attachment:fixed;font-family:Fredoka,system-ui,sans-serif}.app{width:100%;max-width:520px;min-height:100svh;padding:16px 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:12px;margin-inline:auto;display:flex}.game{flex-direction:column;flex:1;justify-content:space-between;align-items:center;gap:20px;width:100%;display:flex}.button{font:inherit;color:#fff;background:var(--accent);box-shadow:0 5px 0 var(--accent-shadow);cursor:pointer;border:none;border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:.75em 1.6em;font-size:1.15rem;font-weight:700;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.button:hover{filter:brightness(1.05)}.button:active{box-shadow:0 2px 0 var(--accent-shadow);transform:translateY(3px)}.button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.error-fallback{text-align:center;align-content:center;place-items:center;gap:16px;min-height:100svh;padding:16px;display:grid}.error-fallback__icon{color:var(--present)}.error-fallback__text{margin:0;font-size:1.3rem;font-weight:600}.header{text-align:center;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;width:100%;display:grid}.icon-button{background:var(--key-bg);width:44px;height:44px;box-shadow:0 4px 0 var(--key-shadow);color:var(--ink);cursor:pointer;border:none;border-radius:14px;place-items:center;transition:transform 80ms,box-shadow 80ms;display:grid}.icon-button:active{box-shadow:0 1px 0 var(--key-shadow);transform:translateY(3px)}.icon-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.title{justify-content:center;gap:clamp(3px,1vw,6px);margin:0;display:flex}.title__letter{--tilt:-4deg;color:#fff;border-radius:clamp(8px,2.2vw,11px);place-items:center;width:clamp(28px,8vw,40px);height:clamp(28px,8vw,40px);font-size:clamp(1.05rem,5vw,1.5rem);font-weight:700;animation:3s ease-in-out infinite bob;display:grid;box-shadow:0 3px #0000002e}.title__letter:nth-child(2n){--tilt:4deg}.title__letter:first-child{background:var(--accent);animation-delay:0s}.title__letter:nth-child(2){background:var(--present);animation-delay:-.4s}.title__letter:nth-child(3){background:var(--correct);animation-delay:-.8s}.title__letter:nth-child(4){background:var(--blue);animation-delay:-1.2s}.title__letter:nth-child(5){background:var(--purple);animation-delay:-1.6s}.title__letter:nth-child(6){background:var(--accent);animation-delay:-2s}.title__letter:nth-child(2){color:var(--present-ink)}.subtitle{color:var(--ink-soft);letter-spacing:.06em;margin:6px 0 0;font-size:clamp(.8rem,3.5vw,1rem);font-weight:500}.board{aspect-ratio:5/6;grid-template-rows:repeat(6,1fr);gap:8px;width:min(340px,100%,83.3333svh - 300px);margin-block:auto;display:grid}.row{perspective:600px;grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.row--shake{animation:.45s shake}.tile{border:3px solid var(--surface-border);background:var(--surface);box-shadow:0 4px 0 var(--surface-border);color:var(--ink);-webkit-user-select:none;user-select:none;border-radius:14px;place-items:center;font-size:clamp(1.4rem,7vw,2.1rem);font-weight:700;line-height:1;display:grid}.tile[data-state=filled]{border-color:var(--accent);animation:.15s pop}.tile[data-state=correct]{--tile-bg:var(--correct);--tile-shadow:var(--correct-shadow);--tile-ink:#fff}.tile[data-state=present]{--tile-bg:var(--present);--tile-shadow:var(--present-shadow);--tile-ink:var(--present-ink)}.tile[data-state=absent]{--tile-bg:var(--absent);--tile-shadow:var(--absent-shadow);--tile-ink:#fff}.tile[data-state=correct],.tile[data-state=present],.tile[data-state=absent]{background:var(--tile-bg);border-color:var(--tile-bg);box-shadow:0 4px 0 var(--tile-shadow);color:var(--tile-ink)}.row--revealed .tile:first-child{animation:.6s backwards flip}.row--winning .tile:first-child{animation:.6s backwards flip,.6s 1.6s bounce}.row--revealed .tile:nth-child(2){animation:.6s .25s backwards flip}.row--winning .tile:nth-child(2){animation:.6s .25s backwards flip,.6s 1.7s bounce}.row--revealed .tile:nth-child(3){animation:.6s .5s backwards flip}.row--winning .tile:nth-child(3){animation:.6s .5s backwards flip,.6s 1.8s bounce}.row--revealed .tile:nth-child(4){animation:.6s .75s backwards flip}.row--winning .tile:nth-child(4){animation:.6s .75s backwards flip,.6s 1.9s bounce}.row--revealed .tile:nth-child(5){animation:.6s 1s backwards flip}.row--winning .tile:nth-child(5){animation:.6s 1s backwards flip,.6s 2s bounce}.keyboard{-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;width:100%;display:flex}.keyboard__row{justify-content:center;gap:6px;display:flex}.key{background:var(--key-bg);min-width:0;max-width:44px;height:56px;box-shadow:0 4px 0 var(--key-shadow);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;border:none;border-radius:12px;flex:1;place-items:center;padding:0;font-size:1.15rem;font-weight:700;transition:transform 80ms,box-shadow 80ms;display:grid}.key:hover{filter:brightness(.97)}.key:active{box-shadow:0 1px 0 var(--key-shadow);transform:translateY(3px)}.key:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.key--wide{flex:1.6;max-width:76px}.key--accent{--key-bg:var(--accent);--key-shadow:var(--accent-shadow);color:#fff}.key[data-state=correct],.key[data-state=present],.key[data-state=absent]{transition:transform 80ms,background-color .3s 1.5s,box-shadow .3s 1.5s,color .3s 1.5s}.key[data-state=correct]{--key-bg:var(--correct);--key-shadow:var(--correct-shadow);color:#fff}.key[data-state=present]{--key-bg:var(--present);--key-shadow:var(--present-shadow);color:var(--present-ink)}.key[data-state=absent]{--key-bg:var(--absent);--key-shadow:var(--absent-shadow);color:#fff}.toast-region{z-index:20;pointer-events:none;position:fixed;top:112px;left:50%;transform:translate(-50%)}.toast{background:var(--ink);color:var(--bg);white-space:nowrap;border-radius:999px;padding:.65em 1.3em;font-weight:600;animation:.25s cubic-bezier(.34,1.56,.64,1) toast-in;box-shadow:0 5px #0000002e}.modal-backdrop{z-index:30;background:var(--backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;padding:16px;animation:.2s backwards fade-in;display:grid;position:fixed;inset:0}.modal-backdrop--delayed{animation-delay:1.8s}.modal{background:var(--surface);width:min(100%,380px);max-height:calc(100svh - 32px);box-shadow:0 10px 0 var(--surface-border);text-align:center;border-radius:28px;padding:28px 24px;animation:.35s cubic-bezier(.34,1.56,.64,1) backwards pop-in;position:relative;overflow-y:auto}.modal--delayed{animation-delay:1.8s}.modal__close{background:var(--surface-border);width:36px;height:36px;color:var(--ink);cursor:pointer;border:none;border-radius:50%;place-items:center;display:grid;position:absolute;top:12px;right:12px}.modal__close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.modal>:last-child{margin-bottom:0}.modal__badge{color:#fff;border-radius:20px;place-items:center;width:64px;height:64px;margin-inline:auto;animation:.8s ease-in-out 2.2s 2 wiggle;display:grid}.modal__badge[data-result=won]{background:var(--correct);box-shadow:0 4px 0 var(--correct-shadow)}.modal__badge[data-result=lost]{background:var(--accent);box-shadow:0 4px 0 var(--accent-shadow)}.modal__title{color:var(--accent);margin:12px 0 4px;font-size:2rem}.modal__text{color:var(--ink-soft);margin:0 0 16px;font-size:1.1rem}.modal__answer{justify-content:center;gap:6px;margin-bottom:20px;display:flex}.modal__tile{color:#fff;border-radius:10px;place-items:center;width:40px;height:40px;font-size:1.3rem;font-weight:700;display:grid}.modal__tile[data-state=correct]{background:var(--correct);box-shadow:0 3px 0 var(--correct-shadow)}.modal__tile[data-state=absent]{background:var(--accent);box-shadow:0 3px 0 var(--accent-shadow)}.stats{grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 20px;display:grid}.stats__item{background:var(--bg);border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;display:flex}.stats__value{order:1;margin:0;font-size:1.7rem;font-weight:700;line-height:1}.stats__label{color:var(--ink-soft);text-align:center;order:2;font-size:.72rem;font-weight:500;line-height:1.2}.distribution{flex-direction:column;gap:6px;margin-bottom:24px;display:flex}.distribution__title{margin:0 0 4px;font-size:1rem;font-weight:600}.distribution__row{align-items:center;gap:8px;display:flex}.distribution__attempt{width:12px;font-weight:600}.distribution__bar{background:var(--absent);color:#fff;text-align:right;border-radius:8px;padding:2px 8px;font-weight:600;transition:width .4s}.distribution__bar[data-highlighted=true]{background:var(--correct)}.help{color:var(--ink);text-align:left;margin-bottom:24px;font-size:1rem;line-height:1.45}.help p{margin:0 0 12px}.help__example{margin-bottom:14px}.help__tiles{grid-template-columns:repeat(5,40px);gap:5px;margin-bottom:6px;display:grid}.help__tiles .tile{height:40px;box-shadow:0 3px 0 var(--surface-border);border-width:2px;border-radius:10px;font-size:1.3rem}.help .help__description{color:var(--ink-soft);margin:0}.help .help__note{background:var(--bg);color:var(--ink-soft);border-radius:12px;margin:16px 0 0;padding:10px 12px;font-size:.9rem}