:root{color-scheme:light dark;--bg: #ffffff;--fg: #1a1a1a;--muted: #6b6b6b;--border: #666666;--border-soft: #d4d4d4;--brown: #915d36;--brown-fg: #ffffff;--key: #d9d9d9;--key-fg: #1a1a1a;--key-hit: var(--brown);--surface: #ffffff;--shadow: 0 10px 30px rgba(0, 0, 0, .18);--tile: clamp(44px, 14vw, 60px);--gap: 6px;--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}@media(prefers-color-scheme:dark){:root{--bg: #121213;--fg: #f0f0f0;--muted: #a0a0a0;--border: #707070;--border-soft: #3a3a3c;--brown: #a06a3e;--key: #3a3a3c;--key-fg: #f0f0f0;--surface: #1e1e20;--shadow: 0 10px 30px rgba(0, 0, 0, .6)}}*{box-sizing:border-box;touch-action:manipulation}html,body{height:100%}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg);display:flex;flex-direction:column;min-height:100dvh;-webkit-tap-highlight-color:transparent}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border-soft)}.topbar .icon-btn:last-child{justify-self:end}.title{margin:0;font-size:1.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}.icon-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:transparent;color:var(--fg);font-weight:700;font-size:1rem;display:inline-grid;place-items:center;cursor:pointer}.game{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 16px 8px;gap:14px;overflow-y:auto}.board{display:flex;flex-direction:column;gap:var(--gap)}.row{display:grid;grid-template-columns:repeat(4,var(--tile));gap:var(--gap)}.tile{width:var(--tile);height:var(--tile);border:2px solid var(--border);border-radius:6px;display:grid;place-items:center;font-size:calc(var(--tile) * .5);font-weight:700;text-transform:uppercase;background:transparent;color:var(--fg);user-select:none}.tile.hit{background:var(--brown);border-color:var(--brown);color:var(--brown-fg)}.tile.filled{border-color:var(--fg)}.tile.reveal{animation:flip .52s ease both;animation-delay:calc(var(--i) * .11s);transition:background-color 0s,border-color 0s,color 0s;transition-delay:calc(var(--i) * .11s + .26s)}.row.active .tile{border-style:dashed}.row.active .tile.filled{border-style:solid}.row.shake{animation:shake .42s ease}.row.stale .tile{opacity:.7}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@keyframes pop{0%{transform:scale(.85)}50%{transform:scale(1.08)}to{transform:scale(1)}}.tile.pop{animation:pop .12s ease}.actions{min-height:32px;display:flex;align-items:center;gap:4px}.pill-btn{border:none;border-radius:999px;background:var(--brown);color:var(--brown-fg);font:inherit;font-weight:700;font-size:.95rem;padding:8px 22px;cursor:pointer}.text-btn{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;font-size:.9rem;padding:6px 10px}.text-btn.danger{color:#c0392b;font-weight:600}.keyboard{display:flex;flex-direction:column;gap:8px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));max-width:520px;width:100%;margin:0 auto}.kb-row{display:flex;justify-content:center;gap:6px}.key{flex:1;max-width:44px;height:56px;border:none;border-radius:6px;background:var(--key);color:var(--key-fg);font:inherit;font-weight:700;font-size:.95rem;text-transform:uppercase;cursor:pointer;display:grid;place-items:center}.key.wide{flex:1.6;max-width:72px;font-size:.75rem}.key:active{filter:brightness(.85)}.key[disabled]{opacity:.45;cursor:default}.kb-spacer{flex:.5}.toast-host{position:fixed;top:64px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:50}.toast{background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:6px;font-weight:600;box-shadow:var(--shadow);animation:toast-in .15s ease}.toast.out{opacity:0;transition:opacity .25s}@keyframes toast-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.dialog{border:none;border-radius:12px;padding:24px 22px 20px;width:min(92vw,440px);background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}.dialog::backdrop{background:#00000073}.dialog h2{margin:0 0 12px;text-align:center;letter-spacing:.06em;text-transform:uppercase;font-size:1.1rem}.dialog h3{margin:18px 0 8px;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.dialog p,.dialog li{line-height:1.45}.dialog ul{padding-left:20px}.dialog-close{position:absolute;top:10px;right:12px;border:none;background:none;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer}.brown-word{color:var(--brown);font-weight:700}.example-label{margin:14px 0 6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.example,.mini-ladder{display:flex;flex-direction:column;gap:4px;--tile: 34px;--gap: 4px}.mini-ladder{margin-top:10px;align-items:flex-start}.mini-ladder .row{grid-template-columns:repeat(4,var(--tile))}.primary{display:block;width:100%;margin-top:18px;padding:12px;border:none;border-radius:8px;background:var(--brown);color:var(--brown-fg);font:inherit;font-weight:700;font-size:1rem;cursor:pointer}.muted{color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}.stat{display:flex;flex-direction:column}.stat strong{font-size:1.6rem;line-height:1.1}.stat span{font-size:.7rem;color:var(--muted);line-height:1.2}.histogram{display:flex;flex-direction:column;gap:4px}.bar-row{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;font-size:.85rem}.bar{background:var(--key);color:var(--fg);min-width:22px;padding:2px 6px;border-radius:3px;text-align:right;font-weight:700;font-size:.8rem}.bar.today{background:var(--brown);color:var(--brown-fg)}.reveal summary{cursor:pointer;color:var(--muted)}.results-footer{display:flex;align-items:center;gap:16px;margin-top:18px}.results-footer .primary{margin-top:0;flex:1}.countdown{display:flex;flex-direction:column;flex:1}.countdown strong{font-size:1.4rem;font-variant-numeric:tabular-nums}.yesterday{margin-top:18px;padding-top:12px;border-top:1px solid var(--border-soft)}@media(prefers-reduced-motion:reduce){.tile.reveal,.row.shake,.tile.pop,.toast{animation:none}.tile.reveal{transition-delay:0s}}