/* Live Alpha UX Pass #3 — mobile fit, readable bonuses, compact gameplay chrome */

.cell.bonus-LETTER_BOOST,
.cell.bonus-WORD_BOOST,
.cell.bonus-DEFINE_BOOST,
.cell.bonus-START {
  font-size: clamp(.52rem, .72vw, .72rem);
  letter-spacing: -.02em;
  line-height: 1;
  text-align: center;
}

.cell.bonus-LETTER_BOOST { color: #b7d3ee; }
.cell.bonus-WORD_BOOST { color: #e4bf95; }
.cell.bonus-DEFINE_BOOST { color: #cbb3ed; }
.cell.bonus-START { color: #d9e37f; }

@media (max-width: 620px) {
  /* Keep Player 1 / Turn / Player 2 on one row. */
  .scorebar {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 1.2fr) minmax(0, 1fr);
  }

  .scorebar .turn-card {
    grid-column: auto;
    grid-row: auto;
    border-top: 0;
    border-left: 1px solid #343834;
    border-right: 1px solid #343834;
  }

  .player-card,
  .turn-card {
    min-height: 58px;
  }

  .player-card:last-child {
    text-align: right;
  }

  /* Size the board from phone width, not leftover height beneath controls. */
  .board {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    min-width: 0;
    gap: 2px;
    padding: 2px;
  }

  .cell {
    font-size: .54rem;
    font-weight: 850;
  }

  .tile {
    width: 90%;
    height: 90%;
    font-size: clamp(.72rem, 3.1vw, .95rem);
  }

  /* The rack/control panel follows the board instead of covering its lower rows. */
  .controls-panel {
    position: static;
    width: calc(100% - 8px);
    margin: 5px auto 0;
    padding: 7px;
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: none;
    gap: 5px;
  }

  /* The top scorebar already identifies the active player, so repeating the
     rack owner costs valuable phone height without adding information. */
  .rack-owner-block {
    display: none;
  }

  .controls-panel .rack {
    min-height: 44px;
    gap: 4px;
  }

  .rack-tile {
    aspect-ratio: 1;
    min-height: 42px;
    font-size: .96rem;
  }

  /* PLAY & DEFINE gets its own row. Place/Exchange and the three utility
     actions share one compact row beneath it. */
  .controls-actions {
    grid-template-columns: 2fr 3fr;
    grid-template-areas:
      "submit submit"
      "mode secondary";
    gap: 5px;
  }

  .controls-actions .mode-row {
    grid-area: mode;
  }

  .controls-actions .action-row {
    grid-area: secondary;
  }

  .controls-panel .primary.wide {
    min-height: 40px;
  }

  .controls-panel .action-row,
  .controls-panel .mode-row {
    min-height: 36px;
    gap: 4px;
  }

  .controls-panel .action-row button,
  .controls-panel .mode-row button {
    padding: 8px 5px;
    font-size: .72rem;
  }

  .match-details-button {
    font-size: .68rem !important;
  }

  .cell.bonus-LETTER_BOOST,
  .cell.bonus-WORD_BOOST,
  .cell.bonus-DEFINE_BOOST,
  .cell.bonus-START {
    font-size: clamp(.43rem, 1.85vw, .58rem);
  }

  /* Keep the three-column match stats readable on narrow phones. */
  .stats-row {
    grid-template-columns: 1.25fr .9fr .9fr;
    gap: 5px;
    padding: 9px 8px;
  }

  .stats-row span,
  .stats-row strong {
    font-size: .72rem;
  }
}