/* ============================================================
   GAME CSS — board, tiles, themes, HUD, assists, status message
   Used by: game.php, tutorial.php
   ============================================================ */

/* Page meta above board (mode/date line, help text) */
.wl-game-meta {
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  text-align: center;
  margin-bottom: 1rem;
}

.wl-theme-help {
  max-width: 420px;
  margin: 0 auto 1rem auto;
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  color: #555;
  text-align: center;
}

/* =========================
   GAME GRID + TILES
   ========================= */

/* Main board grid – used by JS */
#boardGrid,
#gridBoard,
#grid {
  display: grid;
  gap: .5rem;
  justify-content: center;
  margin: 0 auto 1rem auto;
}

/* Tiles – JS uses class "tile", older styles used "grid-tile" */
.tile,
.grid-tile {
  position: relative;
  background: #F2F2F2;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  min-width: 3rem;
  min-height: 3rem;
  border: 2px solid transparent;
  transition: transform 0.07s ease;
  touch-action: manipulation;
}

.tile:active,
.grid-tile:active {
  transform: scale(0.95);
}

/* Selected tile (part of current guess) */
.tile.tile-selected,
.grid-tile.selected {
  border-color: #000;
  background: #FFFACD; /* pale yellow = active guess tiles */
}

/* Permanently locked tiles after solve */
.tile.tile-locked.len3,
.grid-tile.locked.len3 {
  background: #E74C3C;
  color: #fff;
  border-color: #000;
}

.tile.tile-locked.len4,
.grid-tile.locked.len4 {
  background: #1A73E8;
  color: #fff;
  border-color: #000;
}

.tile.tile-locked.len5,
.grid-tile.locked.len5 {
  background: #F4B400;
  color: #000;
  border-color: #000;
}

.tile.tile-locked.len6,
.grid-tile.locked.len6 {
  background: #A142F4;
  color: #fff;
  border-color: #000;
}

.tile.tile-locked.len7,
.grid-tile.locked.len7 {
  background: #34A853;
  color: #fff;
  border-color: #000;
}

/* Optional pip circles on tiles (kept in case you reintroduce them) */
.tile-pips {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 32px;
}

.pip {
  width: 6px;
  height: 9px;
  border-radius: 5%;
  border: 1px solid #000;
}

.pip.len3 { background: #E74C3C; }
.pip.len4 { background: #1A73E8; }
.pip.len5 { background: #F4B400; }
.pip.len6 { background: #A142F4; }
.pip.len7 { background: #34A853; }

/* =========================
   THEME ROW LIST
   ========================= */

/* Theme rows below grid */
#themeRows,
.wl-themes,
#themesWrapper {
  max-width: 420px;
  margin: 0 auto 1rem auto;
}

.theme-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 8px;
  padding: .6rem .8rem;
  margin-bottom: .5rem;
  border: none;
  box-sizing: border-box;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  line-height: 1.3;
  color: #fff;
}

.theme-row .themeWordFound {
  font-weight: 600;
  margin-left: .75rem;
}

.theme-row.len3 { background: #E74C3C; color: #fff; }
.theme-row.len4 { background: #1A73E8; color: #fff; }
.theme-row.len5 { background: #F4B400; color: #000; }
.theme-row.len6 { background: #A142F4; color: #fff; }
.theme-row.len7 { background: #34A853; color: #fff; }

.theme-row.solved {
  opacity: 0.6;
  pointer-events: none;
}

/* Row-click highlight tint – JS adds tile-hilight-lenX */
.tile.tile-hilight-len3:not(.tile-locked) {
  background-color: rgba(231,76,60,0.18);
}

.tile.tile-hilight-len4:not(.tile-locked) {
  background-color: rgba(26,115,232,0.18);
}

.tile.tile-hilight-len5:not(.tile-locked) {
  background-color: rgba(244,180,0,0.22);
}

.tile.tile-hilight-len6:not(.tile-locked) {
  background-color: rgba(161,66,244,0.20);
}

.tile.tile-hilight-len7:not(.tile-locked) {
  background-color: rgba(52,168,83,0.20);
}

/* Row-click focus outline – JS adds .focus-hl */
.tile.focus-hl:not(.tile-locked) {
  outline: 2px dashed #000;
  outline-offset: -3px;
}

/* =========================
   HUD (fixed bottom bar)
   ========================= */

.wl-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fafafa; /* light grey background */
  padding: 0.25rem;
  font-family: 'Poppins', sans-serif;
  z-index: 9999;
}

/* Guess + assist bubble row */
.wl-guess-row {
  margin-top: .25rem;
}

#currentGuess {
  display: block;  /* visible current guess */
  padding: .25rem .5rem;
  border-radius: 6px;
  border: 1px solid #e6f4ff;
  background: #e6f4ff;  /* soft light blue */
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.2rem;
  font-family: 'Poppins', sans-serif;
  min-height: 1.8rem;
}

#assistBubble {
  display: none;
  padding: .25rem .5rem;
  border-radius: 6px;
  border: 1px solid #000;
  background: #FFFACD;
  font-size: .9rem;
  line-height: 1.2rem;
  font-family: 'Poppins', sans-serif;
  max-width: 330px;
}

/* Stats row (found / attempts / streak etc.) */
.wl-stats-row {
  margin-top: .4rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  line-height: 1rem;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
  width: 100%;
}

.wl-stats-row span {
  flex: 0 0 auto;
  min-width: auto;
}

/* HUD buttons row */
.wl-hud-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: .25rem .25rem 0;
  gap: .25rem;
}

/* Game-specific button variants (base .wl-btn is in base.css) */
.wl-btn-check {
  background: #34A853;
  border-color: #34A853;
  color: #fff;
  font-weight: 700;
}

.wl-btn-assist {
  background: #F4B400;
  border-color: #F4B400;
  color: #000;
  font-weight: 700;
}

/* Status message area inside HUD */
.wl-statusmsg {
  background-color: #e6f4ff;  /* soft light blue */
  border-radius: 6px;
  padding: 4px 8px;
}