/* Board scales so board + keyboard always fit above the fold:
   tile = smallest of 62px, 17% of width, or a share of the visible height. */
#board {
  --tile: min(62px, 17vw, calc((100vh - 330px) / 6));
  display: grid; gap: 6px; width: max-content; margin: 0.4rem auto;
}
@supports (height: 100dvh) {
  #board { --tile: min(62px, 17vw, calc((100dvh - 330px) / 6)); }
}
.row { display: grid; grid-template-columns: repeat(5, var(--tile)); grid-auto-rows: var(--tile); gap: 6px; }
.tile {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--tile) * 0.5); font-weight: 800; text-transform: uppercase;
  border: 2px solid var(--tile-border); background: var(--bg); color: var(--text);
}
.tile.filled { border-color: var(--tile-border-filled); }
.tile.correct { background: var(--correct); border-color: var(--correct); color: #fff; }
.tile.present { background: var(--present); border-color: var(--present); color: #fff; }
.tile.absent  { background: var(--absent); border-color: var(--absent); color: #fff; }

.tile.pop { animation: pop 0.12s ease; }
.tile.reveal { animation: flip 0.5s ease both; }
@keyframes flip {
  0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); }
}
.tile.dance { animation: dance 0.6s ease both; }
@keyframes dance {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-45%); }
  65% { transform: translateY(6%); }
}
.row.shake { animation: shake 0.4s; }

#keyboard { max-width: 500px; margin: 0.5rem auto 0; }
.kb-row { display: flex; gap: 4px; margin-bottom: 5px; justify-content: center; }
.kb-row:nth-child(2) { margin-left: 4%; margin-right: 4%; }
.key {
  flex: 1; min-width: 0; min-height: 0; height: 52px;
  font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
  border: 1px solid var(--key-border); border-radius: 6px;
  background: var(--key-bg); color: var(--key-text); padding: 0;
}
.key.wide { flex: 1.5; font-size: 0.62rem; }
.key.wide.del { font-size: 1.3rem; }
.key.correct { background: var(--correct); border-color: var(--correct); color: #fff; }
.key.present { background: var(--present); border-color: var(--present); color: #fff; }
.key.absent  { background: var(--absent); border-color: var(--absent); color: #fff; }

/* Guess distribution bars in the stats modal */
#dist { margin: 0.4rem 0 0.6rem; }
.dist-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.85rem; }
.dist-bar {
  background: var(--absent); color: #fff; padding: 2px 7px; border-radius: 4px;
  text-align: right; min-width: 1.5rem; font-weight: 700;
}
.dist-bar.hl { background: var(--correct); }