*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:Helvetica,Helvetica Neue,Arial,sans-serif;color-scheme:light dark;--paper: #fff4e6;--card: #fffdf8;--ink: #241f1b;--ink-soft: #6b625a;--line: #241f1b;--coral: #ff5d5d;--teal: #12b5a5;--yellow: #ffc233;--blue: #3d7dff;--purple: #9b5de5;--green: #2fae66;--correct: #2fae66;--wrong: #ff5d5d;--cut: 0 6px 0 rgba(36, 31, 27, .16);--cut-sm: 0 4px 0 rgba(36, 31, 27, .16);--radius: 20px}@media(prefers-color-scheme:dark){:root{--paper: #241f1b;--card: #322b25;--ink: #fff4e6;--ink-soft: #c7bcae;--line: #000000;--cut: 0 6px 0 rgba(0, 0, 0, .35);--cut-sm: 0 4px 0 rgba(0, 0, 0, .35)}}body{min-height:100dvh;background-color:var(--paper);color:var(--ink)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:3px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);padding:.85rem 1.6rem;font-size:1.05rem;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:var(--cut-sm);transition:transform .08s ease,box-shadow .08s ease}.button:hover{transform:translateY(-2px);box-shadow:0 6px #241f1b29}.button:active{transform:translateY(2px);box-shadow:0 2px #241f1b29}.button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--cut-sm)}.button--primary{background:var(--coral);color:#fff}.button--next{margin-top:.9rem}.button--ghost{background:transparent;box-shadow:none}.home{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}.home__card{width:min(30rem,100%);background:var(--card);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--cut);padding:2.25rem 1.75rem;text-align:center;transform:rotate(-1deg)}.home__badge{display:inline-block;background:var(--yellow);color:var(--ink);border:3px solid var(--line);border-radius:999px;padding:.2rem .9rem;font-weight:700;transform:rotate(3deg);box-shadow:var(--cut-sm)}.home__title{font-size:clamp(2.6rem,12vw,3.6rem);margin-top:1rem;letter-spacing:-.02em}.home__tagline{color:var(--ink-soft);font-size:1.1rem;margin-top:.35rem}.home__how{list-style:none;text-align:left;margin:1.75rem auto 0;display:grid;gap:.6rem;width:fit-content}.home__how li{display:flex;align-items:center;gap:.6rem;font-weight:500}.home__how span{font-size:1.3rem}.home__start{margin-top:1.9rem;width:100%}.game{max-width:34rem;margin-inline:auto;padding:1.25rem 1.25rem 3rem;display:flex;flex-direction:column;gap:1rem}.game__bar{display:flex;align-items:center;gap:.75rem}.game__quit{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border:3px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;box-shadow:var(--cut-sm)}.progress{flex:1;height:.9rem;border:3px solid var(--line);border-radius:999px;background:var(--card);overflow:hidden}.progress__fill{height:100%;background:var(--teal);border-radius:999px;transition:width .3s ease}.game__stats{display:flex;gap:.4rem;flex:none}.chip{border:3px solid var(--line);border-radius:999px;padding:.15rem .6rem;font-weight:700;font-size:.9rem;background:var(--card);box-shadow:var(--cut-sm);white-space:nowrap}.chip--streak{background:var(--yellow)}.game__count{color:var(--ink-soft);font-weight:600;text-align:center}.puzzle{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--cut);padding:1.5rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.puzzle__prompt{font-weight:700;font-size:1.15rem;text-align:center}.puzzle__how{color:var(--ink-soft);font-size:.9rem;text-align:center}.board{width:100%;display:flex;flex-direction:column;gap:1rem;margin-top:.25rem}.board__hint{color:var(--ink-soft);font-style:italic;font-size:1.2rem;text-align:center}.board__slots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.7rem}.board__slots-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:flex-end}.slot{font-family:inherit;color:var(--ink);background:color-mix(in srgb,var(--paper) 55%,transparent);border:3px dashed var(--ink-soft);border-radius:16px;cursor:pointer;transition:transform .1s ease,border-color .1s ease,background .1s ease}.slot:not(:disabled):hover{border-color:var(--blue);transform:translateY(-2px)}.slot--match{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.9rem .6rem}.slot__emoji{font-size:2.6rem;line-height:1}.slot__english{font-weight:600;color:var(--ink-soft);font-size:.95rem}.slot--order{min-width:4.5rem;min-height:3.2rem;padding:.4rem .6rem;display:grid;place-items:center;font-size:1.2rem;font-weight:700}.slot__drop{display:grid;place-items:center;min-height:2.4rem;width:100%}.slot--match .slot__drop{border-top:2px dashed var(--ink-soft);padding-top:.4rem}.slot__hint{color:var(--ink-soft);font-size:1.4rem;opacity:.6}.slot__word{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:#fff}.slot__check{font-size:.85rem}.slot.is-filled{border-style:solid;border-color:var(--line);background:var(--green);color:#fff;cursor:default;box-shadow:var(--cut-sm)}.slot.is-filled .slot__english{color:#ffffffd9}.slot.is-filled .slot--match .slot__drop,.slot--match.is-filled .slot__drop{border-top-color:#ffffff80}.slot.just-placed{animation:snap .28s ease}.slot.is-wrong{animation:shake .4s ease;border-color:var(--wrong);background:color-mix(in srgb,var(--wrong) 22%,var(--card))}.board__tray{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;min-height:3rem;padding:.75rem;border:3px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--paper) 40%,var(--card))}.board__tray-empty{color:var(--ink-soft);font-weight:700;font-style:italic;align-self:center}.tile{font-family:inherit;border:3px solid var(--line);border-radius:12px;background:var(--blue);color:#fff;padding:.55rem .9rem;font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:var(--cut-sm);touch-action:none;transition:transform .08s ease,box-shadow .08s ease}.tile:hover{transform:translateY(-2px)}.tile:active{transform:translateY(2px);box-shadow:0 2px #241f1b29}.tile.is-selected{background:var(--purple);transform:translateY(-3px) rotate(-2deg);box-shadow:var(--cut)}.tile--ghost{position:fixed;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;z-index:20;background:var(--purple);box-shadow:var(--cut)}.feedback{border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--cut);padding:1.1rem 1.25rem;text-align:center;animation:pop .18s ease}.feedback.is-correct{background:color-mix(in srgb,var(--correct) 22%,var(--card))}.feedback__title{font-size:1.3rem;font-weight:700}.feedback__lesson{margin-top:.35rem;color:var(--ink-soft)}@keyframes pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}@keyframes snap{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.results{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:2rem 1.5rem}.results__medal{font-size:4rem;line-height:1}.results__score{font-size:3rem;font-weight:800}.results__score span{color:var(--ink-soft);font-size:1.6rem}.results__message{color:var(--ink-soft);max-width:26rem;font-size:1.1rem}.results__stats{display:flex;gap:.8rem;margin:1rem 0 .5rem}.results__stats>div{background:var(--card);border:3px solid var(--line);border-radius:14px;box-shadow:var(--cut-sm);padding:.7rem 1.1rem}.results__stats dt{color:var(--ink-soft);font-size:.85rem}.results__stats dd{font-size:1.3rem;font-weight:700}.results__actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}@media(prefers-reduced-motion:reduce){.button,.tile,.slot,.progress__fill,.feedback{transition:none;animation:none}}