:root{--bg: #0a0a0a;--fg: #f5f5f5;--muted: #8a8a8a;--border: #2a2a2a;--cell-bg: #121212;--cell-filled: #1c1c1c;--correct: #0072BC;--present: #ca2027;--absent: #1a1a1a;--absent-fg: #4a4a4a;--key-bg: #5b5b5b;--key-active: #707070;--accent: #d7263d}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;height:100dvh}.app{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:480px;margin:0 auto}.loading{display:grid;place-items:center;height:100dvh;color:var(--muted)}.site-header{background:#0072bc;color:#fff;padding-top:env(safe-area-inset-top,0)}.site-header-inner{display:flex;align-items:center;gap:12px;height:clamp(44px,7vh,56px);padding:0 16px}.logo-link{position:relative;display:inline-block;color:#fff;text-decoration:none;flex-shrink:0;line-height:0}.logo-img{height:28px;width:auto;display:block}.logo-brand{position:absolute;right:0;bottom:-4px;color:#fff;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;line-height:1;opacity:.85;white-space:nowrap}.brand-sep{color:#ffffff73;font-weight:700}.brand-game{color:#fff;font-weight:700;font-size:17px;letter-spacing:.3px}.header-spacer{flex:1}.icon-btn{background:transparent;border:0;color:#fff;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .15s ease}.icon-btn:hover{background:#ffffff1f}.board-wrap{flex:1;display:grid;place-items:center;padding:clamp(4px,1.2vh,12px);min-height:0}.board{display:grid;grid-template-rows:repeat(var(--rows),1fr);gap:6px;width:min(100%,calc(var(--cols) * 64px));aspect-ratio:var(--cols) / var(--rows);max-height:100%}.row{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:6px}.cell{display:grid;place-items:center;font-weight:800;font-size:clamp(20px,6vw,32px);background:var(--cell-bg);border:2px solid var(--border);border-radius:6px;text-transform:uppercase;transition:transform .1s ease,background-color .2s ease,border-color .2s ease}.cell.filled{border-color:#4a4a4a;background:var(--cell-filled);transform:scale(1.02)}.cell.correct{background:var(--correct);border-color:var(--correct)}.cell.present{background:var(--present);border-color:var(--present)}.cell.absent{background:var(--absent);border-color:var(--absent)}.row.shake{animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.keyboard{padding:clamp(4px,1vh,8px) 6px clamp(6px,1.4vh,12px);display:flex;flex-direction:column;gap:clamp(3px,.7vh,6px)}.kb-row{display:flex;gap:clamp(2px,.5vh,4px);justify-content:center}.key{flex:1;min-width:0;height:clamp(38px,6.5vh,52px);background:var(--key-bg);color:var(--fg);border:0;border-radius:6px;font-weight:700;font-size:clamp(14px,2vh,16px);cursor:pointer;text-transform:uppercase;touch-action:manipulation}.key:active{background:var(--key-active)}.key.wide{flex:1.4;font-size:clamp(18px,2.6vh,22px);background:#8a8a8a;color:#fff}.key.wide:active{background:#9a9a9a}.key.correct{background:var(--correct)}.key.present{background:var(--present)}.key.absent{background:var(--absent);color:var(--absent-fg)}.key:disabled{cursor:default;opacity:.7}.toasts{position:fixed;top:64px;left:0;right:0;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:10}.toast{background:#fff;color:#000;padding:8px 14px;border-radius:4px;font-weight:600;font-size:14px;box-shadow:0 4px 12px #0006}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:3000;padding:16px}.modal{background:#121212;border:1px solid var(--border);border-radius:12px;width:100%;max-width:420px;padding:24px;position:relative}.modal-close{position:absolute;top:8px;right:12px;background:transparent;border:0;color:var(--fg);font-size:18px;cursor:pointer}.modal h2{margin:0 0 16px;text-align:center}.modal h3{margin:16px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{text-align:center}.stat-v{font-size:28px;font-weight:700}.stat-l{font-size:11px;color:var(--muted);text-transform:uppercase}.global-stats{margin:16px 0 0;padding:12px;background:#0072bc24;border:1px solid rgba(0,114,188,.35);border-radius:8px;text-align:center}.global-num{font-size:26px;font-weight:800;color:var(--correct);line-height:1}.global-label{margin-top:4px;font-size:13px;color:var(--muted)}.global-label b{color:var(--fg)}.dist{display:flex;flex-direction:column;gap:4px}.dist-row{display:flex;align-items:center;gap:8px}.dist-n{width:16px;text-align:center;font-weight:700}.dist-bar-wrap{flex:1}.dist-bar{background:var(--absent);padding:2px 8px;color:#fff;font-weight:700;font-size:13px;border-radius:2px;text-align:right;min-width:24px}.dist-bar.here{background:var(--correct)}.answer-reveal{text-align:center;margin:16px 0 8px;font-size:15px}.help-intro{margin:0 0 12px;color:var(--fg);font-size:15px;line-height:1.45}.help-list{margin:0 0 12px;padding-left:16px;color:var(--fg);font-size:14px;line-height:1.35}.help-list li{margin-bottom:3px}.help-examples{display:flex;flex-direction:column;gap:10px}.help-example{display:flex;flex-direction:column;align-items:center}.help-row{display:flex;gap:4px}.help-cell{width:36px;height:36px;display:grid;place-items:center;font-weight:800;font-size:18px;border-radius:4px;text-transform:uppercase;color:var(--fg)}.help-cell.neutral{background:var(--cell-filled);border:2px solid #4a4a4a}.help-cell.correct{background:var(--correct)}.help-cell.present{background:var(--present)}.help-cell.absent{background:var(--absent)}.help-caption{margin:6px 0 0;font-size:13px;color:var(--muted);text-align:center}.hint-correct{color:var(--correct)}.hint-present{color:var(--present)}.primary-btn{display:block;width:100%;margin-top:18px;padding:14px;background:var(--correct);color:#fff;border:0;border-radius:6px;font-weight:800;font-size:15px;letter-spacing:.3px;cursor:pointer;text-transform:uppercase}.share-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.share-btn{display:flex;align-items:center;justify-content:center;padding:14px 8px;border:0;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;color:#fff;background:var(--key-bg);transition:filter .1s ease}.share-btn:hover{filter:brightness(1.1)}