*,:before,:after{box-sizing:border-box;touch-action:manipulation;margin:0;padding:0}:root{--vh100:100vh}@supports (height:100dvh){:root{--vh100:100dvh}}: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;--font:"Clear Sans", "Helvetica Neue", Arial, sans-serif;--h-pad:8px;--tile-gap:5px;--key-gap:6px;--kb-row-gap:8px;--header-h:clamp(48px, 7vh, 64px);--stats-h:clamp(44px, 6vh, 56px);--key-h:clamp(44px, 7vh, 58px);--keyboard-h:calc(3 * var(--key-h) + 2 * var(--kb-row-gap) + 16px);--grid-h:calc(var(--vh100) - var(--header-h) - var(--stats-h) - var(--keyboard-h));--tile-h-raw:calc((var(--grid-h) - 20px - 5 * var(--tile-gap)) / 6);--tile-w-raw:calc((min(100vw, 500px) - 2 * var(--h-pad) - 4 * var(--tile-gap)) / 5);--tile-size:min(var(--tile-h-raw), var(--tile-w-raw))}html{background:var(--color-bg);height:100%;color:var(--color-text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}body{height:100dvh;overflow:hidden}#app{max-width:500px;height:100%;padding:0 var(--h-pad);flex-direction:column;margin:0 auto;display:flex}header{height:var(--header-h);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}header h1{letter-spacing:.15em;text-transform:uppercase;font-size:clamp(1.2rem,5vmin,2rem);font-weight:700}#stats{height:var(--stats-h);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:center;align-items:center;gap:clamp(8px,2.5vw,20px);display:flex;overflow:hidden}.stat{flex-direction:column;align-items:center;min-width:36px;display:flex}.stat-val{font-size:clamp(.9rem,3vmin,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:clamp(.45rem,1.4vmin,.6rem)}#stats-reset{color:var(--color-subtext);border:1px solid var(--color-border);cursor:pointer;font-size:clamp(.55rem,1.8vmin,.7rem);font-family:var(--font);background:0 0;border-radius:4px;padding:3px 8px;transition:color .1s,border-color .1s}#stats-reset:hover{color:var(--color-text);border-color:var(--color-subtext)}#toast{top:calc(var(--header-h) + var(--stats-h) + 12px);background:var(--color-text);color:var(--color-bg);pointer-events:none;opacity:0;z-index:100;white-space:nowrap;border-radius:6px;padding:8px 18px;font-size:clamp(.75rem,2.5vmin,.9rem);font-weight:700;transition:opacity .15s;position:fixed;left:50%;transform:translate(-50%)}#toast.visible{opacity:1}#grid{justify-content:center;align-items:center;gap:var(--tile-gap);flex-direction:column;flex:1;min-height:0;padding:10px 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);font-size:calc(var(--tile-size) * .48);text-transform:uppercase;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;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{gap:var(--kb-row-gap);padding:0 0 calc(16px + env(safe-area-inset-bottom,0px));flex-direction:column;flex-shrink:0;width:100%;display:flex}.kb-row{justify-content:center;gap:var(--key-gap);display:flex}.key{height:var(--key-h);background:var(--color-key-bg);min-width:0;color:var(--color-text);font-family:var(--font);text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border:none;border-radius:4px;flex:1;padding:0;font-size:clamp(.65rem,2.2vmin,.85rem);font-weight:700;transition:background .1s;overflow:hidden}.key-wide{flex:1.5;font-size:clamp(.55rem,1.8vmin,.78rem)}.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}