body {
  align-items: flex-start;
}

#header {
  flex-shrink: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ── Board ───────────────────────────── */
#board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.8dvh, 6px);
  flex: 1;
  min-height: 0;
  justify-content: center;
  padding: 0 0 8px;
}
.row {
  display: flex;
  gap: clamp(4px, 0.8dvh, 6px);
}
.tile {
  width: clamp(44px, 8dvh, 62px);
  height: clamp(44px, 8dvh, 62px);
  background: #fff;
  border: 2px solid #3f3f46;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 3.8dvh, 28px);
  font-weight: 700;
  text-transform: uppercase;
  color: #27272a;
  user-select: none;
}
.tile.filled {
  border-color: #27272a;
  animation: tilePop 100ms ease;
}
.tile.revealed {
  border-color: transparent;
  color: #fff;
}

/* ── Tile states ─────────────────────── */
.tile.correct {
  background: #16a34a;
  border-color: transparent;
  color: #fff;
}
.tile.present {
  background: #eab308;
  border-color: transparent;
  color: #fff;
}
.tile.absent {
  background: #27272a;
  border-color: transparent;
  color: #fff;
}

/* ── Tile animations ─────────────────── */
@keyframes tilePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes tileFlipIn {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

@keyframes tileFlipOut {
  0% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes tileShake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-4px); }
  30%, 70% { transform: translateX(4px); }
}

@keyframes tileBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
  80% { transform: translateY(-4px); }
}

.tile.shake {
  animation: tileShake 500ms ease;
}

.tile.bounce {
  animation: tileBounce 600ms ease;
}

/* ── Keyboard ────────────────────────── */
#keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px 16px;
  flex-shrink: 0;
  user-select: none;
}
.kb-row {
  display: flex;
  gap: 5px;
  width: 100%;
  justify-content: center;
}
.kb-spacer-half {
  flex: 0.5;
}
.key {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #3f3f46;
  border-radius: 8px;
  background: #fff;
  color: #27272a;
  height: clamp(40px, 7dvh, 52px);
  flex: 1;
  max-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 60ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.key:active {
  transform: scale(0.95);
}
.key-wide {
  flex: 1.8;
  max-width: 72px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.key svg {
  display: block;
}

/* ── Keyboard color states ───────────── */
.key.correct {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.key.present {
  background: #eab308;
  border-color: #eab308;
  color: #fff;
}
.key.absent {
  background: #27272a;
  border-color: #27272a;
  color: #fff;
}

/* ── Toasts ──────────────────────────── */
#toasts {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  background: #27272a;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  animation: toastIn 200ms ease;
  pointer-events: none;
}
.toast.fade-out {
  animation: toastOut 300ms ease forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* ── Result overlay (game-specific) ─── */
.result-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
}
.result-row {
  display: flex;
  gap: 4px;
}
.result-tile {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.result-tile.correct { background: #16a34a; }
.result-tile.present { background: #eab308; }
.result-tile.absent { background: #27272a; }

/* ── Responsive ──────────────────────── */
@media (max-height: 700px) {
  #header {
    gap: 8px;
    margin-bottom: 12px;
  }
  .tile {
    font-size: 22px;
  }
  #keyboard {
    gap: 4px;
    padding: 0 4px 8px;
  }
}

@media (max-width: 380px) {
  .key {
    font-size: 12px;
  }
  .key-wide {
    font-size: 11px;
  }
}