/* Five Letters: board and keyboard on top of the shared report styles. */
.board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; max-width: 330px; margin: 18px auto 10px; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tile {
  aspect-ratio: 1;
  border: 2px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 600; text-transform: uppercase;
  color: var(--ink); background: #fff;
}
.tile.filled { border-color: var(--muted); }
.tile.absent { background: #787C7E; border-color: #787C7E; color: #fff; }
.tile.present { background: #C9B458; border-color: #C9B458; color: #fff; }
.tile.correct { background: #6AAA64; border-color: #6AAA64; color: #fff; }
.tile.flip { animation: flip 420ms ease; }
@keyframes flip { 0% { transform: scaleY(1); } 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.row.shake { animation: shake 320ms; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.message { text-align: center; min-height: 22px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }

.keyboard { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.krow { display: flex; justify-content: center; gap: 5px; }
.key {
  flex: 1 1 0; max-width: 44px; height: 52px;
  border: 0; border-radius: 4px;
  background: #D3D6DA; color: var(--ink);
  font: 600 13px var(--sans); text-transform: uppercase; cursor: pointer;
}
.key.wide { max-width: 68px; flex: 1.6 1 0; font-size: 12px; text-transform: none; }
.key.absent { background: #787C7E; color: #fff; }
.key.present { background: #C9B458; color: #fff; }
.key.correct { background: #6AAA64; color: #fff; }
.key:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.end-panel { text-align: center; }
.end-panel .answer { font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.end-panel .share-row { justify-content: center; }
.end-panel .define { font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) { .tile.flip, .row.shake { animation: none; } }