:root{font-family:Inter,system-ui,sans-serif;color-scheme:dark;--bg:#101216;--panel:#171a20;--line:#303640;--text:#f2f4f6;--muted:#7f8994;--green:#58a56b;--yellow:#caa84d;--key:#292e36;--tile:56px}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% -20%,#283028,transparent 38%),var(--bg);color:var(--text);overscroll-behavior:none}button{font:inherit}header{height:58px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px}.back{color:#8e98a2;text-decoration:none;font-size:11px}.logo{font-weight:1000;letter-spacing:.06em}.logo span{font:800 8px monospace;background:#d9ff43;color:#12140f;padding:3px;margin-left:5px}.icon-btn{justify-self:end;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#aeb5bc}main{width:min(650px,100%);margin:auto;padding:20px 14px}.game-head{display:flex;align-items:end;justify-content:space-between}.game-head p,.result-kicker{font:800 8px monospace;letter-spacing:.13em;color:var(--muted)}.game-head h1{font-size:22px;margin:4px 0}.mode-picker{display:flex;gap:4px}.mode-picker button{border:1px solid var(--line);background:#171a20;color:#858f99;padding:7px 8px;font:800 9px monospace;cursor:pointer}.mode-picker button.active{background:#d9ff43;border-color:#d9ff43;color:#10120e}.message{text-align:center;min-height:31px;padding:12px 0 5px;color:#9da6af;font-size:11px}.message.error{color:#ff8e83;animation:shake .2s}.board{--size:5;display:grid;grid-template-columns:repeat(var(--size),var(--tile));grid-auto-rows:var(--tile);gap:5px;width:max-content;margin:8px auto 20px}.tile{border:2px solid #343a43;display:grid;place-items:center;font-size:25px;font-weight:900;text-transform:uppercase;transition:.18s}.tile.filled{border-color:#69727c;animation:pop .1s}.tile.correct{background:var(--green);border-color:var(--green)}.tile.present{background:var(--yellow);border-color:var(--yellow)}.tile.absent{background:#343942;border-color:#343942}.tile.reveal{animation:flip .42s}.keyboard{display:flex;flex-direction:column;gap:5px;margin:auto;max-width:610px;touch-action:manipulation}.key-row{display:flex;justify-content:center;gap:4px}.key{height:45px;min-width:30px;flex:1;max-width:48px;border:0;border-radius:4px;background:var(--key);color:var(--text);font-weight:800;font-size:13px;padding:0;touch-action:manipulation}.key.wide{max-width:85px;font-size:9px}.key[data-key="backspace"]{flex:1.7}.action-row{margin-top:3px}.action-row .key{width:100%;max-width:none;flex-basis:100%;height:50px;background:#d9ff43;color:#11140d;font-size:11px;letter-spacing:.08em}.key.correct{background:var(--green)}.key.present{background:var(--yellow)}.key.absent{background:#3a3f47;color:#858b92}.actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--muted);font:700 9px monospace}.actions button{border:0;background:transparent;color:#a9b1b9;cursor:pointer}.result-icon{width:68px;height:68px;margin:15px auto;display:grid;place-items:center;border-radius:50%;background:var(--green);font-size:32px}dialog{width:min(420px,calc(100% - 28px));border:1px solid #3b424c;background:#171a20;color:var(--text);padding:25px;text-align:center}dialog::backdrop{background:#08090bd9;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#8e969f;font-size:22px}.answer{background:#111419;padding:13px;margin:18px 0}.answer span{display:block;font:800 8px monospace;color:var(--muted)}.answer b{display:block;font-size:25px;letter-spacing:.12em;margin-top:4px;text-transform:uppercase}.primary{width:100%;border:0;background:#d9ff43;color:#10120e;padding:12px;font-weight:900}.example{display:grid;grid-template-columns:40px 1fr;align-items:center;text-align:left;gap:8px;margin:20px 0}.example i{width:36px;height:36px;display:grid;place-items:center;font-style:normal;font-weight:900}.example span{font-size:11px;color:#a5adb5}.example .correct{background:var(--green)}.example .present{background:var(--yellow)}.example .absent{background:#3a3f47}@keyframes pop{50%{transform:scale(1.08)}}@keyframes flip{50%{transform:rotateX(90deg)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(max-width:520px){.board{--tile:min(52px,calc((100vw - 38px - (var(--size) - 1)*4px)/var(--size)))}header{padding:0 10px}.back{font-size:0}.back:after{content:"←";font-size:18px}main{padding:12px 8px}.game-head{align-items:center}.game-head p{display:none}.game-head h1{font-size:17px}.mode-picker button{padding:7px 6px}.board{gap:4px;margin-bottom:16px}.tile{font-size:clamp(17px,6vw,24px)}.keyboard{gap:4px}.key-row{gap:3px}.key{height:48px;min-width:0;font-size:12px}.key.wide{font-size:9px}.actions{padding:0 4px}}