/* Word Break — game-specific styles. Rides on top of the shared style.css. */
.wb-shell { max-width: 400px; margin: 0 auto; }

.wb-stats {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 6px; margin-bottom: 8px;
}
.wb-stats > div { flex: 1; }
.wb-val { font-size: 20px; font-weight: 800; color: #e8ecff; }

.wb-board {
  display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px;
  margin: 0 auto 10px; width: 100%; max-width: 312px;
  /* Board is the sizing container; tile fonts use cqw (relative to THIS board's
     width) instead of vw, so a page scrollbar appearing after the first guess
     never reflows or resizes the grid. */
  container-type: inline-size;
}
.wb-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wb-tile {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 10.5cqw; font-weight: 800; text-transform: uppercase;
  color: #fff; border: 2px solid #2a3160; border-radius: 6px; background: #0b0f24;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  user-select: none;
}
.wb-tile.filled { border-color: #55609c; animation: wb-pop .12s ease; }
@keyframes wb-pop { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
.wb-tile.flip { animation: wb-flip .5s ease forwards; }
@keyframes wb-flip { 0%{transform:rotateX(0)} 50%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }

.wb-green  { background: #12a150 !important; border-color: #12a150 !important; }
.wb-amber  { background: #d8a72a !important; border-color: #d8a72a !important; }
.wb-grey   { background: #3a3f5c !important; border-color: #3a3f5c !important; }

.wb-row.shake { animation: wb-shake .4s ease; }
@keyframes wb-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

.wb-keyboard { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.wb-krow { display: flex; justify-content: center; gap: 5px; }
.wb-key {
  flex: 1; min-width: 0; height: 48px; border: none; border-radius: 6px;
  background: #4a5183; color: #fff; font-weight: 700; font-size: 15px;
  text-transform: uppercase; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
.wb-key:active { filter: brightness(1.2); }
.wb-key.wide { flex: 1.6; font-size: 12px; }
.wb-key.wb-enter {
  flex: 1; width: 100%; height: 52px; margin-top: 2px;
  background: #12a150; font-size: 17px; letter-spacing: 2px;
}
.wb-key.wb-enter:active { filter: brightness(1.15); }
.wb-key.wb-green { background: #12a150; }
.wb-key.wb-amber { background: #d8a72a; }
.wb-key.wb-grey  { background: #262b45; color: #8890b5; }

/* howto colour swatches */
.wb-hint-green { background:#12a150; color:#fff; }
.wb-hint-amber { background:#d8a72a; color:#111; }
.wb-hint-grey  { background:#3a3f5c; color:#fff; }