:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0c0f;--panel:#14161b;--line:#2a2d34;--text:#ece8e1;--muted:#8a8d96;--correct:#3f9a6c;--present:#c4a035;--absent:#3a3d45;--key:#3a404c;--btn:#3d4452;--accent:#e2c48a;--danger:#c45c5c;--absent-key:#16181d;--absent-key-text:#5a5d66;--absent-tile-text:#c5c6cb;--send-text:#f4fff8;font-family:IBM Plex Sans Arabic,IBM Plex Sans,system-ui,sans-serif}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f3eee6;--panel:#fffaf3;--line:#d6cdbf;--text:#1c1916;--muted:#6d675e;--correct:#2d8a58;--present:#c49a28;--absent:#cfc6b8;--key:#e4d9c6;--btn:#efe6d6;--accent:#b7843a;--danger:#b54a4a;--absent-key:#d8d0c3;--absent-key-text:#7a7468;--absent-tile-text:#3f3c38;--send-text:#f4fff8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);width:100%;height:100dvh;max-height:100dvh;color:var(--text);margin:0;overflow:hidden}#shell{width:100%;max-width:480px;height:100%;max-height:100dvh;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex;overflow:hidden}button,input,.key,.kb,.icon{touch-action:manipulation;-ms-touch-action:manipulation;font-size:16px}#app{flex-direction:column;flex:auto;width:100%;min-height:0;display:flex;overflow:hidden}.top{border-bottom:1px solid var(--line);flex-direction:column;flex:none;gap:6px;padding-bottom:6px;display:flex}.chrome{justify-content:space-between;align-items:center;gap:8px;min-height:44px;display:flex;position:relative}.brand{align-items:baseline;min-width:0;display:flex}.brand h1{letter-spacing:0;margin:0;font-size:1rem;font-weight:700;line-height:1.1}.scores{z-index:1;justify-content:center;gap:8px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.score{border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;min-width:48px;padding:2px 6px;display:flex}.score.add{min-width:36px;color:var(--muted);border:1px dashed var(--line);cursor:pointer;background:0 0;justify-content:center;font-size:1.1rem}.room-bar{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex:none;justify-content:center;align-items:center;gap:8px;width:100%;margin-bottom:2px;padding:6px 8px 8px;display:flex}.room-label{color:var(--muted);flex:none;font-size:.8rem}.room-bar input,#room-code{border:1px solid var(--line);background:var(--key);width:7.5rem;height:40px;color:var(--text);font:inherit;text-align:center;text-transform:uppercase;touch-action:auto;-webkit-user-select:text;user-select:text;border-radius:8px;font-size:16px;font-weight:700}.room-bar button,#room-join{background:var(--btn);height:40px;color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;border-radius:8px;padding:0 12px}.room-bar button:disabled,#room-join:disabled{opacity:.45;cursor:default}.score .who{color:var(--muted);font-size:.65rem;line-height:1}.score .pts{font-variant-numeric:tabular-nums;font-weight:600;line-height:1.2}.score .mult{color:var(--accent);font-size:.7rem;line-height:1}.tools{flex-wrap:nowrap;justify-content:center;gap:8px;width:100%;display:flex}.seg,.icon,.len-btn{background:var(--btn);color:var(--text);border:1px solid var(--line);height:34px;font:inherit;cursor:pointer;border-radius:8px;flex:none;padding:0 6px}.seg{gap:4px;padding:3px;display:flex}.seg button{color:var(--muted);min-width:32px;height:28px;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:0 8px;font-size:.8rem}.seg button.on{background:var(--accent);color:#1a160f}.icon{place-items:center;width:34px;padding:0;font-size:.9rem;display:grid}.icon svg{width:16px;height:16px}.icon.on{background:var(--accent);color:#1a160f}.len{flex:none;position:relative}.len-btn{min-width:36px;font-size:.85rem;font-weight:600}.len-btn.on{background:var(--accent);color:#1a160f}.len-menu{top:calc(100% + 6px);z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:10px;gap:4px;min-width:11.5rem;padding:4px;display:grid;position:absolute;inset-inline-start:0;box-shadow:0 10px 28px #00000059}.len-menu button{text-align:start;background:var(--btn);height:36px;color:var(--text);font:inherit;cursor:pointer;border:0;border-radius:8px;padding:0 10px;font-size:.82rem}.len-menu button.on{background:var(--accent);color:#1a160f}.board.peek .tile{color:#0000}.board-wrap{flex:auto;place-items:center;min-height:0;padding:6px 0;display:grid;container-type:size}.board{--gap:4px;--tile:min(52px, calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((100cqh - (var(--rows) - 1) * var(--gap)) / var(--rows)));gap:var(--gap);display:grid}.row{gap:var(--gap);grid-template-columns:repeat(var(--cols), var(--tile));display:grid}.tile{width:var(--tile);height:var(--tile);border:2px solid var(--line);font-size:calc(var(--tile) * .42);-webkit-user-select:none;user-select:none;background:0 0;border-radius:6px;place-items:center;font-weight:600;display:grid}.tile.tbd{border-color:var(--muted)}.tile.enemy-correct{border:2px dashed #6ea0d4}.tile.enemy-present{border:2px dashed #d48a3a}.tile.correct{background:var(--correct);border-color:var(--correct)}.tile.present{background:var(--present);border-color:var(--present);color:#1a1404}.tile.absent{background:var(--absent);border-color:var(--absent);color:var(--absent-tile-text)}.seg.nums button{font-variant-numeric:tabular-nums;width:28px;min-width:28px;padding:0;font-size:.8rem;font-weight:600}.tile.pop{animation:.14s ease-out pop}.reveal .tile{animation:.42s both settle}.reveal .tile:first-child{animation-delay:0s}.reveal .tile:nth-child(2){animation-delay:45ms}.reveal .tile:nth-child(3){animation-delay:90ms}.reveal .tile:nth-child(4){animation-delay:.135s}.reveal .tile:nth-child(5){animation-delay:.18s}.reveal .tile:nth-child(6){animation-delay:.225s}@keyframes pop{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes settle{0%{transform:scale(.92)}55%{transform:scale(1.03)}to{transform:scale(1)}}.shake{animation:.32s shake}.status{text-align:center;min-height:1.2rem;color:var(--muted);flex:none;font-size:.85rem;line-height:1.2rem}@keyframes shake{20%{transform:translate(3px)}40%{transform:translate(-3px)}60%{transform:translate(2px)}80%{transform:translate(-2px)}}.bounce .tile{animation:.55s both bounce}.bounce .tile:first-child{animation-delay:0s}.bounce .tile:nth-child(2){animation-delay:70ms}.bounce .tile:nth-child(3){animation-delay:.14s}.bounce .tile:nth-child(4){animation-delay:.21s}.bounce .tile:nth-child(5){animation-delay:.28s}.bounce .tile:nth-child(6){animation-delay:.35s}@keyframes bounce{0%{transform:translateY(0)}30%{transform:translateY(-12px)}55%{transform:translateY(3px)}75%{transform:translateY(-5px)}to{transform:translateY(0)}}.result{min-height:32px;color:var(--text);font:inherit;background:0 0;border:0;flex:none;justify-content:center;align-items:center;gap:10px;width:100%;margin:0;display:flex}.result.on,.result.miss{cursor:pointer;min-height:36px}.result.on svg{color:var(--correct)}.result.miss svg{color:var(--danger)}.result svg{width:20px;height:20px;display:block}.result .pts{font-variant-numeric:tabular-nums;font-weight:600}.kb{direction:ltr;unicode-bidi:isolate;flex-direction:column;flex:none;gap:8px;width:100%;min-width:0;padding-top:6px;display:flex}.kb-row{direction:ltr;flex-wrap:nowrap;gap:5px;width:100%;min-width:0;display:flex}.kb-row.mid{width:92%;margin-inline:auto}.kb-row .key{flex:1 1 0;width:0;min-width:0;max-width:none}.kb-row.last .key.send,.kb-row.last .key.erase{flex:1.4 1 0}.key{background:var(--key);height:46px;color:var(--text);font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:10px;place-items:center;padding:0;font-size:1.05rem;font-weight:500;display:grid;position:relative}.key.send svg,.key.erase svg{width:18px;height:18px;display:block}.hold{background:var(--panel);border:1px solid var(--line);z-index:8;border-radius:12px;gap:6px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.hold .key{width:auto;min-width:36px;height:44px;padding:0 8px}.key.send{background:var(--correct);color:var(--send-text)}.key.erase{background:var(--danger);color:#fff6f6}.key.correct{background:var(--correct)}.key.present{background:var(--present);color:#1a1404}.key.absent{background:var(--absent-key);color:var(--absent-key-text);cursor:pointer;pointer-events:auto}.key.absent:hover,.key.absent:focus-visible{color:var(--muted);background:var(--key)}.overlay{background:#0000008c;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:hidden}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(360px,100%);max-height:calc(100dvh - 32px);padding:12px 12px 10px;overflow:hidden auto}.card h2{margin:0 0 6px;font-size:.95rem}.round-facts{gap:8px;margin:8px 0 12px;display:grid}.round-row{justify-content:space-between;gap:12px;font-size:.9rem;display:flex}.round-row .lbl{color:var(--muted)}.round-row .n{font-weight:600}.card p{color:var(--muted);margin:0 0 10px;font-size:.95rem}.card .secret{color:var(--text);text-align:center;margin:8px 0 14px;font-size:1.4rem;font-weight:700}.card .actions{gap:8px;display:flex}.card button{background:var(--accent);color:#1a160f;height:40px;font:inherit;cursor:pointer;border:0;border-radius:8px;font-weight:600}.card .actions button,.card button.ghost{flex:1}.card .setting .seg button{height:28px;color:var(--muted);background:0 0;flex:none;font-weight:500}.card .setting .seg button.on{background:var(--accent);color:#1a160f}.card button.ghost{background:var(--key);color:var(--text)}.card button.switch{background:var(--absent);width:44px;height:26px;color:var(--text);border-radius:13px;flex:0 0 44px;padding:0}.card button.switch.on{background:var(--correct)}.help ul{color:var(--muted);margin:6px 0 0;padding:0 1.1rem 0 0;font-size:.82rem}html[dir=ltr] .help ul{padding:0 0 0 1.1rem}.help li{margin-bottom:6px}.swatch{vertical-align:-.05em;border-radius:2px;width:.7em;height:.7em;margin-left:4px;display:inline-block}.swatch.correct{background:var(--correct)}.swatch.present{background:var(--present)}.swatch.absent{background:var(--absent)}.setting{justify-content:space-between;align-items:center;gap:10px;margin:6px 0;font-size:.82rem;display:flex}.card .fact{color:var(--muted);margin:0 0 12px;font-size:.9rem}.stats{grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px;display:grid}.stat{flex-direction:column;align-items:center;gap:2px;display:flex}.stat .lbl{color:var(--muted);font-size:.7rem}.stat .n{font-variant-numeric:tabular-nums;font-weight:600}.switch{background:var(--absent);cursor:pointer;border:0;border-radius:13px;flex:none;width:44px;height:26px;padding:0;position:relative}.switch.on{background:var(--correct)}.knob{top:3px;background:var(--text);border-radius:50%;width:20px;height:20px;position:absolute;inset-inline-start:3px}.switch.on .knob{inset-inline:auto 3px}.card .wipes{margin-bottom:8px}html[data-theme=light] .overlay{background:#28201666}.card button.icon-text{justify-content:center;align-items:center;gap:6px;font-size:.85rem;font-weight:500;display:flex}.card button.icon-text svg{flex:none;width:16px;height:16px}@media (height<=700px){.key{height:44px}.kb{gap:8px}}@media (prefers-reduced-motion:reduce){.tile.pop,.reveal .tile,.shake,.bounce .tile{animation:none}}