/* Palavra: six rows of five tiles and the keyboard under them. Green, yellow and grey as in Wordle, in Bamboleio's
   tones: white letters on green and grey, dark letters on yellow (each passes the contrast for its size). */
.board.palavra { aspect-ratio: auto; max-width: 24rem; display: grid; gap: .4rem; }
.entering .keyboard, .entering .word-msg { display: none; }
.palavra .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.palavra .tile { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid #ddd4e6; border-radius: .6rem; background: var(--card);
  font: 900 clamp(1.5rem, 7vw, 2rem) var(--title); color: var(--ink); }
.palavra .tile.typed { border-color: #9d8bb3; }
.palavra .tile.correct, .key.correct { background: #2f8f45; border-color: #2f8f45; color: #fff; }
.palavra .tile.present, .key.present { background: #f2c230; border-color: #f2c230; color: var(--ink); }
.palavra .tile.absent, .key.absent { background: #7d7488; border-color: #7d7488; color: #fff; }
.word-msg { min-height: 1.75rem; text-align: center; font: 800 1.125rem var(--title); color: var(--brand); }
.keyboard { display: grid; gap: .4rem; max-width: 34rem; width: 100%; justify-self: center; user-select: none; -webkit-user-select: none; }
.keys { display: flex; gap: .3rem; justify-content: center; }
.key { flex: 1 1 0; min-width: 0; max-width: 3.2rem; height: 3.4rem; border: 0; border-radius: .6rem; background: #ede4fb; color: var(--ink); font: 800 1.125rem var(--title); cursor: pointer; padding: 0; }
.key.wide { flex: 2 1 0; max-width: 5.4rem; font-size: 1rem; }
.key[aria-label] { font-size: 1.5rem; }   /* ⌫ */
.key:active { filter: brightness(.92); }
.credit { margin: 1rem 0 0; font-size: 1rem; color: #7a6a95; }
@media (max-width: 760px) { .board.palavra { max-width: 18rem; } .keys { gap: .25rem; } .key { height: 3.2rem; font-size: 1.0625rem; } .key.wide { font-size: 1rem; } .key[aria-label] { font-size: 1.375rem; } }