:root{--bg: #0f1115;--panel: #171a21;--line: #2a2f3a;--fg: #e8e9ed;--muted: #8a91a0;--correct: #4a8f4e;--present: #b59422;--absent: #3a3f4b;--key: #2b303b;--key-fg: #e8e9ed;--accent: #c9a24b;--tile: 60px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}.app{height:100vh;height:100dvh;max-width:560px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden}.topbar{flex:0 0 auto;display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}.brand{flex:1;text-align:center}.brand h1{margin:0;font-size:26px;letter-spacing:6px;font-weight:800;background:linear-gradient(180deg,#f4e9c9,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;margin-top:2px}.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:16px;cursor:pointer}.spacer{width:34px}.playfield{flex:1 1 auto;min-height:0;display:flex;justify-content:center;position:relative;padding:8px;overflow-y:auto}.board{display:grid;gap:6px;margin:auto}.row{display:grid;gap:6px}.tile{width:var(--tile);height:var(--tile);display:grid;place-items:center;border:2px solid var(--line);border-radius:6px;font-size:calc(var(--tile) * .48);font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:transform .08s ease,border-color .15s ease}.tile.filled{border-color:#4b5262;animation:pop .12s ease}.tile.correct{background:var(--correct);border-color:var(--correct);color:#fff}.tile.present{background:var(--present);border-color:var(--present);color:#fff}.tile.absent{background:var(--absent);border-color:var(--absent);color:#d7d9de}.tile.sm{--tile: 34px;width:34px;height:34px;border-width:2px}.tile.reveal{animation:flip .55s ease both}@keyframes pop{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.row.shake{animation:shake .45s ease}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.toast{position:fixed;top:64px;left:50%;transform:translate(-50%);background:#f4e9c9;color:#1a1c22;font-weight:700;padding:9px 16px;border-radius:6px;z-index:20;box-shadow:0 6px 20px #0006;animation:toastIn .15s ease}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1}}.keyboard{flex:0 0 auto;padding:8px 6px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;background:var(--bg);border-top:1px solid var(--line)}.krow{display:flex;gap:5px;justify-content:center}.key{flex:1;min-width:0;height:52px;border:none;border-radius:5px;background:var(--key);color:var(--key-fg);font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background .12s ease,transform .05s ease}.key:active{transform:translateY(1px)}.key.wide{flex:1.5;font-size:12px}.key.correct{background:var(--correct);color:#fff}.key.present{background:var(--present);color:#fff}.key.absent{background:#1c2028;color:#6a7080}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:50;padding:16px}.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:420px;width:100%;padding:22px;position:relative}.modal h2{margin:0 0 10px}.modal p{color:var(--fg);line-height:1.45}.modal ul{color:var(--fg);line-height:1.6;padding-left:18px}.modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}.legend{margin:14px 0;display:flex;flex-direction:column;gap:8px}.legend-row{display:flex;align-items:center;gap:10px;font-size:14px}.fineprint{color:var(--muted);font-size:13px}.btn-primary{width:100%;margin-top:8px;height:46px;border:none;border-radius:8px;background:var(--accent);color:#1a1c22;font-size:16px;font-weight:800;cursor:pointer}.result{flex:0 0 auto;padding:14px 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;border-top:1px solid var(--line);background:var(--bg);animation:toastIn .2s ease}.result-head{font-size:20px;font-weight:800;letter-spacing:.5px}.result-answer{color:var(--muted);font-size:14px}.result-answer b{color:var(--fg);letter-spacing:1px}.result-grid{margin:2px 0 4px;font-size:18px;line-height:1.15;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",monospace;text-align:center}.result .btn-primary{max-width:260px}@media (max-width: 520px){:root{--tile: min(58px, 15vw)}}@media (max-height: 720px){:root{--tile: 50px}.key{height:46px}}