/* Byteword: what this page adds to Shift One and games.css. */
.bw { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bw-board { display: grid; gap: 6px; }
.bw-row { display: grid; grid-template-columns: repeat(5, 58px); gap: 6px; }
.bw-tile {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  font: 800 26px var(--font); text-transform: uppercase; border-radius: var(--r-md);
  border: 2px solid var(--separator-firm); background: var(--bg-elevated); color: var(--label);
}
.bw-tile.typed { border-color: var(--label-3); animation: combo-pop 160ms var(--ease); }
/* Never colour alone: correct tiles are solid, present tiles are dashed, absent tiles fade. */
.bw-tile.correct { background: var(--success-solid); border-color: var(--success-solid); color: #fff; }
.bw-tile.present { background: var(--warning-wash); border: 2px dashed var(--warning); color: var(--label); }
.bw-tile.absent { background: var(--fill); border-color: transparent; color: var(--label-3); }
.bw-tile.reveal { animation: flip 500ms var(--ease) both; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.bw-keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; }
.bw-krow { display: flex; justify-content: center; gap: 5px; }
.bw-key { flex: 1 1 0; max-width: 46px; height: 52px; border-radius: var(--r-md); background: var(--fill-strong); color: var(--label); font-weight: 700; font-size: 15px; }
.bw-key.wide { max-width: 72px; flex-grow: 1.6; font-size: 12px; }
.bw-key:active { transform: scale(0.94); }
.bw-key.correct { background: var(--success-solid); color: #fff; }
.bw-key.present { background: var(--warning-wash); box-shadow: inset 0 0 0 2px var(--warning); }
.bw-key.absent { background: var(--fill); color: var(--label-4); }
.bw-clue { min-height: 22px; text-align: center; color: var(--label-2); font-size: 14px; }
@media (max-width: 420px) { .bw-row { grid-template-columns: repeat(5, 50px); } .bw-tile { width: 50px; height: 50px; font-size: 22px; } .bw-key { height: 46px; } }