:root {
  --tile: 62px;
  --gap: 6px;
  --key-bg: var(--surface-2);
}

/* ---------- Board ---------- */
.board-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 12px; }
.board { display: grid; grid-template-rows: repeat(6, var(--tile)); gap: var(--gap); }
.row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gap); }
.row.shake { animation: shake .45s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.tile {
  display: grid; place-items: center;
  font-weight: 700; font-size: calc(var(--tile) * .5); text-transform: uppercase;
  border-radius: 6px;
  border: 2px solid var(--border);
  user-select: none;
}
.tile.filled { border-color: var(--border-strong); animation: pop .1s ease-out; }
@keyframes pop { 50% { transform: scale(1.06); } }
.tile.flip { animation: flip .5s ease-in-out both; }
@keyframes flip { 50% { transform: rotateX(-90deg); } }
.tile.correct, .tile.present, .tile.absent { border-color: transparent; color: var(--on-mark); }
.tile.correct { background: var(--correct); }
.tile.present { background: var(--present); }
.tile.absent { background: var(--absent); }
.tile.win { animation: hop .5s var(--ease) both; }
@keyframes hop { 40% { transform: translateY(-16%); } 70% { transform: translateY(2%); } }

/* ---------- Keyboard ---------- */
.keyboard { padding: 4px 6px 10px; user-select: none; }
.kb-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.kb-row:last-child { margin-bottom: 0; }
.key {
  flex: 1 1 0; max-width: 44px; height: 56px; padding: 0;
  border: 0; border-radius: 6px;
  background: var(--key-bg); color: var(--ink);
  font-weight: 600; font-size: 15px; text-transform: uppercase;
  display: grid; place-items: center;
  transition: background .3s, color .3s, transform .06s;
}
.key.wide { flex: 1.5 1 0; max-width: 66px; font-size: 12px; letter-spacing: .03em; }
.key:active, .key.press { transform: scale(.94); }
.key.correct { background: var(--correct); color: var(--on-mark); }
.key.present { background: var(--present); color: var(--on-mark); }
.key.absent { background: var(--absent); color: var(--on-mark); opacity: .55; }
.kb-spacer { flex: .5 1 0; max-width: 22px; }

.mini-row { display: flex; gap: 4px; margin: 14px 0 6px; }
.mini-row .tile { width: 38px; height: 38px; font-size: 19px; border-radius: 5px; }
.mini-row .tile.filled { animation: none; }

.result .mini-row { justify-content: center; margin: 12px 0 10px; }

.grid-mini { display: grid; grid-template-columns: repeat(5, 7px); gap: 2px; }
.grid-mini i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--absent); }
.grid-mini i.c { background: var(--correct); }
.grid-mini i.p { background: var(--present); }

@media (max-height: 650px) {
  .key { height: 48px; }
  .kb-row { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.flip { animation-duration: .01s; }
  .tile.win { animation: none; }
}