.board{display:grid;gap:6px;justify-content:center;perspective:700px}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tile{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;border:2px solid rgba(255,255,255,.15);border-radius:6px;text-transform:uppercase;transition:background .2s,transform .1s}.tile.correct{background:#2e7d32;color:#fff}.tile.present{background:#b59f3b;color:#111}.tile.absent{background:#111;color:#666}.tile.flip{transform-style:preserve-3d;animation:tile-flip .32s ease forwards;animation-delay:calc(var(--i, 0) * 80ms);backface-visibility:hidden}@keyframes tile-flip{0%{transform:rotateX(0)}49%{transform:rotateX(90deg)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@media (max-width: 480px){.tile{width:48px;height:48px;font-size:1.1rem}.board-row{gap:4px}}@media (max-width: 360px){.tile{width:42px;height:42px;font-size:1rem}}.kb{display:flex;flex-direction:column;gap:var(--kb-gap, 8px);align-items:center}.kb-row{display:grid;gap:var(--kb-gap, 6px)}.kb-row-1{grid-template-columns:repeat(10,1fr)}.kb-row-2,.kb-row-3{grid-template-columns:repeat(9,1fr)}.kb-key{height:var(--kb-h, 54px);font-size:var(--kb-fs, 18px);font-weight:600;border:none;border-radius:var(--kb-radius, 8px);background:#2a2a2a;color:#fff;padding:0 var(--kb-pad-x, 14px);cursor:pointer;transition:background .2s,transform .1s}.kb-key:hover{background:#3a3a3a}.kb-key.state-correct{background:#2e7d32}.kb-key.state-present{background:#b59f3b;color:#111}.kb-key.state-absent{background:#111;color:#666}.kb-key.wide{grid-column:span 2}@media (max-width: 480px){:root{--kb-gap: 6px;--kb-h: 48px;--kb-fs: 16px;--kb-radius: 8px;--kb-pad-x: 10px}.kb-row-1{grid-template-columns:repeat(10,1fr)}.kb-row-2{grid-template-columns:repeat(9,1fr)}.kb-row-3{grid-template-columns:repeat(11,1fr)}.kb-key.wide{grid-column:span 2}}@media (max-width: 360px){:root{--kb-h: 44px;--kb-fs: 15px;--kb-pad-x: 8px}}.game-wrap{max-width:680px;margin:0 auto;padding:12px 14px 16px;display:grid;grid-template-rows:auto 1fr auto auto;gap:10px}.game-top{display:flex;justify-content:space-between;align-items:center}.opponent{margin-top:12px}.pill{padding:4px 8px}@media (max-width: 480px){.game-wrap{gap:8px;padding:10px 10px 12px}.game-top .muted{font-size:12px}.opponent{margin-top:10px}.pill{padding:3px 7px;font-size:.9rem}}@media (max-width: 360px){.game-wrap{gap:6px}.pill{padding:2px 6px;font-size:.85rem}}