:root{--bg:#121213;--surface:#1a1a1b;--border:#3a3a3c;--text:#fff;--text-muted:#8a8a8e;--key-bg:#818384;--key-text:#fff;--tile-border:#3a3a3c;--tile-empty-bg:transparent;--correct:#538d4e;--present:#b59f3b;--absent:#3a3a3c;--banner-bg:#1f3a5f;--overlay-bg:#000000bf;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=light]{--bg:#fff;--surface:#f5f5f5;--border:#d3d6da;--text:#1a1a1b;--text-muted:#787c7e;--key-bg:#d3d6da;--key-text:#1a1a1b;--tile-border:#d3d6da;--tile-empty-bg:transparent;--correct:#6aaa64;--present:#c9b458;--absent:#787c7e;--banner-bg:#e8f1fb;--overlay-bg:#ffffffd9;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;transition:background .2s,color .2s}#root{min-height:100vh}.app{flex-direction:column;align-items:center;min-height:100vh;padding:0 12px;display:flex}.header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;width:100%;max-width:520px;padding:14px 4px;display:flex}.header h1{letter-spacing:2px;text-transform:uppercase;margin:0;font-size:30px;font-weight:700}.header-actions{align-items:center;gap:8px;display:flex}.icon-button{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px;font-size:20px;line-height:1}.icon-button:hover{background:var(--surface)}.how-to-link{color:var(--text-muted);border-radius:6px;padding:6px 8px;font-size:14px;font-weight:600;text-decoration:none}.how-to-link:hover{color:var(--text);background:var(--surface)}.theme-toggle{font-size:18px}.controls{justify-content:center;align-items:center;gap:10px;width:100%;max-width:520px;margin:14px 0 6px;display:flex}.controls-label{color:var(--text-muted);font-size:14px;font-weight:600}.length-picker{gap:6px;display:flex}.length-button{background:var(--surface);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600}.length-button.active{background:var(--correct);border-color:var(--correct);color:#fff}.new-game-button{background:var(--key-bg);color:var(--key-text);cursor:pointer;border:none;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600}.new-game-button:hover{opacity:.9}.banner{background:var(--banner-bg);color:var(--text);text-align:center;border-radius:8px;width:100%;max-width:520px;margin:8px 0;padding:8px 16px;font-size:14px;font-weight:600}.board{gap:6px;width:100%;max-width:520px;margin:12px 0;display:grid;container-type:inline-size}.row{justify-self:center;gap:6px;width:100%;display:grid}.row.shake{animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.tile{aspect-ratio:1;text-transform:uppercase;border:2px solid var(--tile-border);background:var(--tile-empty-bg);-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;width:100%;font-size:clamp(20px,8.5cqw,36px);font-weight:700;display:flex}.tile.filled{border-color:var(--key-bg);animation:.1s ease-in-out pop}@keyframes pop{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}.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:#fff}.tile.correct,.tile.present,.tile.absent{animation:.5s ease-in-out flip}@keyframes flip{0%{transform:rotateX(0)}to{transform:rotateX(360deg)}}.message{text-align:center;width:100%;max-width:520px;min-height:24px;margin:4px 0;font-size:15px;font-weight:600}.message.error{color:var(--present)}.keyboard{flex-direction:column;gap:6px;width:100%;max-width:520px;margin:10px 0;display:flex}.key-row{justify-content:center;gap:5px;display:flex}.key{background:var(--key-bg);max-width:44px;height:52px;color:var(--key-text);text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:4px;flex:1;padding:0;font-size:14px;font-weight:700}.key.wide{flex:1.6;max-width:none;font-size:12px}.key.correct{background:var(--correct);color:#fff}.key.present{background:var(--present);color:#fff}.key.absent{background:var(--absent);color:#fff}.key:active{opacity:.8}.overlay{background:var(--overlay-bg);z-index:100;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;width:90%;max-width:420px;padding:24px}.modal h2{margin-top:0}.modal .share-preview{white-space:pre;background:var(--bg);border:1px solid var(--border);text-align:left;-webkit-user-select:all;user-select:all;border-radius:8px;margin:12px 0;padding:12px;font-family:monospace;font-size:13px;overflow-x:auto}.modal-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.modal-button{background:var(--correct);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:700}.modal-button.secondary{background:var(--key-bg);color:var(--key-text)}.share-hint{color:var(--text-muted);margin:10px 0 0;font-size:12px}.ad-slot{border-top:1px solid var(--border);width:100%;max-width:520px;min-height:90px;color:var(--text-muted);justify-content:center;align-items:center;margin:12px 0 24px;padding-top:12px;font-size:12px;display:flex}.consent-banner{background:var(--surface);border-top:1px solid var(--border);z-index:200;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;font-size:13px;display:flex;position:fixed;bottom:0;left:0;right:0}.consent-banner p{flex:260px;margin:0}.consent-banner a{color:var(--text)}.consent-actions{gap:8px;display:flex}.consent-actions button{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:700}.consent-accept{background:var(--correct);color:#fff}.consent-decline{background:var(--key-bg);color:var(--key-text)}.footer{text-align:center;width:100%;max-width:520px;color:var(--text-muted);padding:12px 4px;font-size:12px}@media (width<=420px){.key{height:48px}.tile{font-size:clamp(7px,3cqw,12px)}.message{min-height:0}.board{margin:4px 0}}