/* Live Alpha UX Pass #5 — stronger board contrast + true full-cell placed tiles */

/* Board buttons inherit the global button padding/disabled opacity unless we
   explicitly reset them. Those two rules were the reason a 100% tile still
   rendered as a tiny, faded token inside the square. */
.cell {
  padding: 0 !important;
  background: #252b31;
  border-color: #3d4650;
  color: #d5dde5;
}

.cell:disabled {
  opacity: 1;
  cursor: default;
}

.board {
  background: #171b20;
  border: 1px solid #46515d;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .02),
    0 12px 30px rgba(0, 0, 0, .26);
}

/* Make premium squares readable at a glance rather than relying on subtle
   dark-mode tint differences. */
.cell.bonus-LETTER_BOOST {
  background: #176b9a;
  border-color: #2f8fc3;
  color: #eff9ff;
}

.cell.bonus-WORD_BOOST {
  background: #b65d12;
  border-color: #db7b26;
  color: #fff7ea;
}

.cell.bonus-DEFINE_BOOST {
  background: #6f45a8;
  border-color: #9168c9;
  color: #fbf6ff;
}

.cell.bonus-START {
  background: #6f8127;
  border-color: #9cae45;
  color: #fbffe9;
}

.cell.bonus-LETTER_BOOST,
.cell.bonus-WORD_BOOST,
.cell.bonus-DEFINE_BOOST,
.cell.bonus-START {
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42);
}

/* Occupied squares visually become the tile. */
.cell > .tile {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #fffaf0 0%, #ece3ca 100%);
  color: #151817;
  font-size: clamp(.82rem, 1.65vw, 1.45rem);
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(83, 68, 39, .20),
    inset 0 -2px 0 rgba(65, 50, 25, .18),
    0 1px 2px rgba(0, 0, 0, .28);
}

.cell > .tile .value {
  right: 2px;
  bottom: 1px;
  font-size: .43em;
  font-weight: 900;
}

.cell > .tile.pending {
  background: linear-gradient(180deg, #fffbd1 0%, #e8e990 100%);
  box-shadow:
    inset 0 0 0 2px #ddea45,
    inset 0 -2px 0 rgba(65, 50, 25, .18),
    0 1px 3px rgba(0, 0, 0, .30);
}

@media (max-width: 620px) {
  body.mobile-game-fit .board {
    gap: 2px;
    padding: 2px;
    background: #15191e;
    border-color: #4d5965;
  }

  body.mobile-game-fit .cell {
    padding: 0 !important;
    border-radius: 2px;
    border-width: 1px;
  }

  body.mobile-game-fit .cell > .tile {
    width: 100% !important;
    height: 100% !important;
    border-radius: 1px !important;
    font-size: clamp(.82rem, 4vw, 1.08rem);
  }

  body.mobile-game-fit .cell > .tile .value {
    right: 1px;
    bottom: 0;
    font-size: .42em;
  }

  body.mobile-game-fit .cell.bonus-LETTER_BOOST,
  body.mobile-game-fit .cell.bonus-WORD_BOOST,
  body.mobile-game-fit .cell.bonus-DEFINE_BOOST,
  body.mobile-game-fit .cell.bonus-START {
    font-size: clamp(.47rem, 1.95vw, .62rem);
    letter-spacing: -.03em;
  }
}