/* The viewport keeps the original board footprint; only its contents resize. */
.board-viewport {
  position: relative;
  width: min(860px, 94vw, calc(100dvh - 275px));
  min-width: min(94vw, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  border-radius: 12px;
  --board-gap: 3px;
  --board-padding: 5px;
  --board-radius: 5px;
  --board-font: clamp(.45rem, .65vw, .7rem);
  --board-bonus-font: clamp(.52rem, .72vw, .72rem);
  --board-tile-font: clamp(.7rem, 1.7vw, 1.3rem);
  --board-value-right: 5px;
  --board-value-bottom: 2px;
}
.board-viewport:focus-visible { outline: 2px solid var(--dt-blue); outline-offset: 2px; }
.board-viewport[data-zoomed="true"] { cursor: grab; }
.board-viewport[data-panning="true"] { cursor: grabbing; }
#boardViewport > #board {
  --board-zoom: 1;
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% * var(--board-zoom));
  height: calc(100% * var(--board-zoom));
  min-width: 0;
  max-width: none;
  margin: 0;
  grid-template-rows: repeat(13, minmax(0, 1fr));
  gap: calc(var(--board-gap) * var(--board-zoom));
  padding: calc(var(--board-padding) * var(--board-zoom));
  border-radius: calc(8px * var(--board-zoom));
  /* Translation only: letters are laid out at their actual rendered size. */
  transform: translate(var(--board-pan-x, 0px), var(--board-pan-y, 0px));
}
#boardViewport #board .cell {
  padding: 0;
  border-width: calc(1px * var(--board-zoom));
  border-radius: calc(var(--board-radius) * var(--board-zoom));
  font-size: calc(var(--board-font) * var(--board-zoom));
}
#boardViewport #board .cell:disabled { pointer-events: none; }
#boardViewport #board .cell.bonus-LETTER_BOOST,
#boardViewport #board .cell.bonus-WORD_BOOST,
#boardViewport #board .cell.bonus-DEFINE_BOOST,
#boardViewport #board .cell.bonus-START { font-size: calc(var(--board-bonus-font) * var(--board-zoom)); }
#boardViewport #board .cell > .tile {
  width: 100%; height: 100%;
  border-radius: calc(var(--board-radius) * var(--board-zoom));
  font-size: calc(var(--board-tile-font) * var(--board-zoom));
  box-shadow: inset 0 calc(-2px * var(--board-zoom)) 0 #0003;
}
#boardViewport #board .tile .value {
  right: calc(var(--board-value-right) * var(--board-zoom));
  bottom: calc(var(--board-value-bottom) * var(--board-zoom));
}
#boardViewport #board .tile.pending { box-shadow: inset 0 0 0 calc(2px * var(--board-zoom)) #e7f36b; }
#boardViewport #board .dd-board-target {
  outline-width: calc(2px * var(--board-zoom));
  outline-offset: calc(-2px * var(--board-zoom));
}
#boardZoomReset { width: 100%; min-height: 44px; padding: 9px 14px; text-align: left; font-size: .8rem; background: var(--dt-surface-2); color: var(--dt-text); }

/* Scorebar refinement — compact player metrics into a right-side rail so the
   player name gets the full top row and the center turn card can breathe. */
.scorebar {
  grid-template-columns: minmax(0, 1fr) minmax(140px, .72fr) minmax(0, 1fr);
}

.scorebar .player-card-v2 {
  grid-template-columns: minmax(0, 1fr) 86px;
  grid-template-areas:
    "name name"
    "avatar score"
    "resources resources";
  gap: 4px 8px;
}

.scorebar .player-card-v2 .player-identity { display: contents; }
.scorebar .player-card-v2 .player-copy { grid-area: name; min-width: 0; }
.scorebar .player-card-v2 .player-avatar { grid-area: avatar; }
.scorebar .player-card-v2 .player-score-block {
  grid-area: score;
  width: 86px;
  justify-items: center;
  align-self: center;
}

.scorebar .player-card-v2 .player-resources {
  grid-area: resources;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 4px 8px;
  align-items: center;
}

.scorebar .player-card-v2 .resource-pill.speed {
  grid-column: 1;
  justify-self: start;
}

.scorebar .player-card-v2 .resource-pill.time {
  grid-column: 2;
  width: 100%;
  justify-content: center;
}

.scorebar .turn-card { padding-inline: 8px; }
.scorebar #bagCount {
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.1;
}
.scorebar .turn-brand-logo { width: min(72px, 84%); }

@media (max-width: 900px) {
  .board-viewport { width: min(94vw, calc(100dvh - 300px), 760px); }
}
@media (max-width: 620px) {
  .board-viewport {
    width: var(--mobile-board-size, 100%);
    min-width: 0;
    border-radius: 8px;
    --board-gap: 1px;
    --board-padding: 1px;
    --board-radius: 2px;
    --board-font: .54rem;
    --board-bonus-font: clamp(.43rem, 1.85vw, .58rem);
    --board-tile-font: clamp(.82rem, 3.75vw, 1.08rem);
    --board-value-right: 1px;
    --board-value-bottom: 1px;
  }

  #boardViewport #board .tile .value {
    right: calc(var(--board-value-right) * var(--board-zoom));
    bottom: calc(var(--board-value-bottom) * var(--board-zoom));
    color: #253149;
    font-size: calc(clamp(.48rem, 1.9vw, .58rem) * var(--board-zoom));
    font-weight: 950;
    line-height: 1;
  }

  /* Final mobile scorebar overrides. board-zoom.css loads after public-launch.css,
     so these values are the ones players actually see. */
  body.mobile-game-fit .scorebar {
    grid-template-columns: minmax(0, 1fr) clamp(90px, 24vw, 108px) minmax(0, 1fr);
  }

  body.mobile-game-fit .scorebar .player-card-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "name name"
      "avatar score"
      "resources resources";
    gap: 4px;
  }

  body.mobile-game-fit .scorebar .player-score-block {
    width: 100%;
    min-width: 0;
  }

  body.mobile-game-fit .scorebar .player-resources {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
  }

  body.mobile-game-fit .scorebar .resource-pill {
    width: 100%;
    min-width: 0;
    grid-column: auto;
    justify-content: center;
    padding: 4px 1px;
    gap: 2px;
    font-size: clamp(.55rem, 2.2vw, .68rem);
    box-sizing: border-box;
  }

  body.mobile-game-fit .scorebar .resource-pill.speed {
    grid-column: auto;
    justify-self: stretch;
  }

  body.mobile-game-fit .scorebar .resource-pill.time {
    grid-column: auto;
  }

  body.mobile-game-fit .scorebar .player-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.65rem, 2.5vw, .8rem);
  }

  body.mobile-game-fit .scorebar .player-avatar {
    width: min(100%, 44px);
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    flex-basis: auto;
  }

  body.mobile-game-fit .scorebar .turn-card #bagCount {
    font-size: .68rem;
    font-weight: 800;
  }

  body.mobile-game-fit .turn-brand-logo {
    width: min(88px, 92%);
  }
}