.board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;width:calc(5 * var(--tile-size) + 4 * 5px);height:calc(6 * var(--tile-size) + 5 * 5px)}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.tile{width:100%;aspect-ratio:1 / 1;border:2px solid var(--color-tile-border-empty);display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,calc(var(--tile-size) * 0.5),2rem);font-weight:800;text-transform:uppercase;color:var(--color-text);user-select:none;position:relative;transition:border-color 0.05s;perspective:250px}.tile[data-state=tbd]{border-color:var(--color-tile-border-filled);animation:tile-pop 0.1s ease}.tile[data-state=correct]{background-color:var(--color-correct);border-color:var(--color-correct);color:#fff}.tile[data-state=present]{background-color:var(--color-present);border-color:var(--color-present);color:#fff}.tile[data-state=absent]{background-color:var(--color-absent);border-color:var(--color-absent);color:#fff}@keyframes tile-pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}@keyframes flip-in{0%{transform:rotateX(0deg)}100%{transform:rotateX(-90deg)}}@keyframes flip-out{0%{transform:rotateX(-90deg)}100%{transform:rotateX(0deg)}}.tile.flip-in{animation:flip-in 0.2s ease forwards}.tile.flip-out{animation:flip-out 0.2s ease forwards}@keyframes row-shake{0%,100%{transform:translateX(0)}10%{transform:translateX(-4px)}30%{transform:translateX(4px)}50%{transform:translateX(-4px)}70%{transform:translateX(4px)}90%{transform:translateX(-2px)}}.board-row.shake{animation:row-shake 0.45s ease}@keyframes tile-bounce{0%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(4px)}80%{transform:translateY(-10px)}90%{transform:translateY(2px)}100%{transform:translateY(0)}}.tile.bounce{animation:tile-bounce 0.8s ease forwards}