*,:before,:after{box-sizing:border-box;touch-action:manipulation;margin:0;padding:0}:root{--color-bg:#121213;--color-surface:#1a1a1b;--color-border:#3a3a3c;--color-text:#fff;--color-subtext:#818384;--color-correct:#538d4e;--color-present:#b59f3b;--color-absent:#3a3a3c;--color-key-bg:#818384;--tile-size:62px;--tile-gap:5px;--font:"Clear Sans", "Helvetica Neue", Arial, sans-serif}html,body{background:var(--color-bg);height:100%;color:var(--color-text);font-family:var(--font);-webkit-font-smoothing:antialiased}body{flex-direction:column;align-items:center;display:flex}#app{flex-direction:column;align-items:center;width:100%;max-width:500px;height:100%;display:flex}header{border-bottom:1px solid var(--color-border);text-align:center;width:100%;padding:12px 0}header h1{letter-spacing:.15em;text-transform:uppercase;font-size:2rem;font-weight:700}#stats{border-bottom:1px solid var(--color-border);justify-content:center;align-items:center;gap:12px;width:100%;padding:8px 0;display:flex}.stat{flex-direction:column;align-items:center;min-width:44px;display:flex}.stat-val{font-size:1.4rem;font-weight:700;line-height:1}.stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-subtext);margin-top:2px;font-size:.6rem}#stats-reset{color:var(--color-subtext);border:1px solid var(--color-border);cursor:pointer;font-size:.7rem;font-family:var(--font);background:0 0;border-radius:4px;margin-left:4px;padding:4px 8px;transition:color .1s,border-color .1s}#stats-reset:hover{color:var(--color-text);border-color:var(--color-subtext)}#toast{background:var(--color-text);color:var(--color-bg);pointer-events:none;opacity:0;z-index:100;white-space:nowrap;border-radius:6px;padding:10px 18px;font-size:.85rem;font-weight:700;transition:opacity .15s;position:fixed;top:72px;left:50%;transform:translate(-50%)}#toast.visible{opacity:1}#grid{gap:var(--tile-gap);flex-direction:column;flex:1;justify-content:center;padding:20px 0;display:flex}.row{gap:var(--tile-gap);display:flex}.tile{width:var(--tile-size);height:var(--tile-size);border:2px solid var(--color-border);text-transform:uppercase;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:2rem;font-weight:700;transition:border-color 50ms;display:flex}.tile.filled{border-color:var(--color-subtext);animation:80ms ease-in-out pop}.tile[data-state=correct]{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.tile[data-state=present]{background:var(--color-present);border-color:var(--color-present);color:#fff}.tile[data-state=absent]{background:var(--color-absent);border-color:var(--color-absent);color:#fff}#keyboard{flex-direction:column;gap:8px;width:100%;padding:0 0 16px;display:flex}.kb-row{justify-content:center;gap:6px;display:flex}.key{background:var(--color-key-bg);min-width:43px;height:58px;color:var(--color-text);font-family:var(--font);text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:4px;padding:0 4px;font-size:.85rem;font-weight:700;transition:background .1s}.key-wide{min-width:65px;font-size:.75rem}.key:active{filter:brightness(.9)}.key[data-state=correct]{background:var(--color-correct)}.key[data-state=present]{background:var(--color-present)}.key[data-state=absent]{background:var(--color-absent)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.tile.flip{animation:.5s forwards flip}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-24px)}60%{transform:translateY(-12px)}}.tile.bounce{animation:.6s forwards bounce}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}35%{transform:translate(6px)}55%{transform:translate(-4px)}75%{transform:translate(4px)}90%{transform:translate(-2px)}}.row.shake{animation:.6s forwards shake}@media (width<=400px){:root{--tile-size:52px}.key{min-width:34px;height:50px}.key-wide{min-width:52px}}