:root{--bg: #fafaf8;--fg: #1a1a2e;--muted: #8a8a96;--cell-bg: #ffffff;--cell-border: #c9c9d4;--cell-black: #22222e;--accent: #4361ee;--hit: #2a9d6f;--miss: #6c6c78;--miss-fg: #c4c4cc;--staged-bg: #e8edfd;--key-bg: #e4e4ea;--key-fg: #1a1a2e;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #16161f;--fg: #ececf1;--muted: #8a8a96;--cell-bg: #22222e;--cell-border: #3a3a4a;--cell-black: #08080d;--accent: #6c8aff;--hit: #2fbf83;--miss: #21212b;--miss-fg: #55556a;--staged-bg: #2a3352;--key-bg: #4a4a58;--key-fg: #ececf1}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:30rem;margin:0 auto;padding:1rem 1rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;-webkit-user-select:none;user-select:none}header.masthead{width:100%;text-align:center;border-bottom:1px solid var(--cell-border);padding-bottom:.75rem}.logo{font-size:1.6rem;font-weight:800;letter-spacing:.02em;margin:0}.logo .drop{color:var(--accent)}.status{margin:.25rem 0 0;color:var(--muted);font-size:.9rem;min-height:1.2em}.grid{display:grid;gap:4px;width:min(100%,22rem)}.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--cell-bg);border:2px solid var(--cell-border);border-radius:4px;font-size:1.5rem;font-weight:700;overflow:hidden}.cell.black{background:var(--cell-black);border-color:var(--cell-black)}.cell.word-done{border-color:var(--hit);cursor:pointer}.cell .letter{display:block}.cell .letter.drop{animation:drop-in .35s cubic-bezier(.2,.9,.3,1.2) backwards}@keyframes drop-in{0%{transform:translateY(-1.4em);opacity:0}to{transform:translateY(0);opacity:1}}.stage{display:flex;gap:6px;min-height:3rem}.stage .slot{width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border:2px dashed var(--cell-border);border-radius:6px;font-size:1.3rem;font-weight:700}.stage .slot.filled{border-style:solid;border-color:var(--accent);background:var(--staged-bg)}.presets{display:flex;gap:.5rem}.presets button{border:1px solid var(--cell-border);background:var(--cell-bg);color:var(--fg);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer}.presets button:hover{border-color:var(--accent)}.feedback{font-size:.9rem;color:var(--muted);min-height:1.2em;margin:0}.feedback .hit{color:var(--hit);font-weight:700}.feedback .miss{color:var(--miss);font-weight:700;text-decoration:line-through}.definitions{position:relative;width:min(100%,22rem);padding:.75rem 2.2rem .75rem 1rem;border:1px solid var(--hit);border-radius:8px;background:var(--cell-bg);animation:rise-in .25s ease-out}.definitions p{margin:.25rem 0;font-size:.9rem}.definitions strong{color:var(--hit)}.definitions button{position:absolute;top:.4rem;right:.4rem;border:none;background:none;color:var(--muted);font-size:1rem;cursor:pointer}.keyboard{display:flex;flex-direction:column;gap:5px;width:100%}.kb-row{display:flex;justify-content:center;gap:5px}.key{flex:1;max-width:2.6rem;height:3.2rem;border:none;border-radius:5px;background:var(--key-bg);color:var(--key-fg);font-size:1rem;font-weight:700;cursor:pointer;touch-action:manipulation}.key.wide{max-width:4.2rem;flex:1.6;font-size:.8rem}.key:disabled{cursor:not-allowed}.key.staged{outline:2px solid var(--accent);outline-offset:-2px}.key.hit{background:var(--hit);color:#fff}.key.miss{background:var(--miss);color:var(--miss-fg);text-decoration:line-through;font-weight:400}.key.submit{background:var(--accent);color:#fff}.key.submit:disabled{background:var(--key-bg);color:var(--muted)}.victory{text-align:center;padding:1rem 1.5rem;border:2px solid var(--hit);border-radius:10px;background:var(--cell-bg);animation:rise-in .35s ease-out}@keyframes rise-in{0%{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:translateY(0)}}.victory h2{margin:0 0 .25rem;color:var(--hit)}.victory p{margin:.25rem 0}.victory button{margin-top:.75rem;border:none;border-radius:999px;background:var(--accent);color:#fff;padding:.5rem 1.2rem;font-size:.95rem;font-weight:600;cursor:pointer}.victory .next-puzzle{color:var(--muted);font-size:.85rem}.install{margin-top:.4rem;border:1px solid var(--cell-border);background:var(--cell-bg);color:var(--fg);border-radius:999px;padding:.25rem .8rem;font-size:.8rem;cursor:pointer}.install:hover{border-color:var(--accent)}.new-day{border:none;border-radius:999px;background:var(--accent);color:#fff;padding:.5rem 1.2rem;font-size:.95rem;font-weight:600;cursor:pointer;animation:rise-in .35s ease-out}.load-error{text-align:center;padding:1rem 1.5rem;border:2px solid var(--cell-border);border-radius:10px;background:var(--cell-bg)}.load-error .detail{color:var(--muted);font-size:.85rem}.load-error button{margin-top:.5rem;border:1px solid var(--cell-border);background:var(--key-bg);color:var(--key-fg);border-radius:999px;padding:.4rem 1rem;font-weight:600;cursor:pointer}
