/* Tents board. Clue tracks share the board's column and row so numbers stay aligned.
   Cell minimums stay 0: a 12×12 must shrink inside a 320px column without a 44px floor. */

body.ds-tents {
  --tents-grass: #fbf6ea;
  --tents-tree-ground: #e3f3dc;
  --tents-tent-ground: #fde4d2;
  --tents-line: #c9b494;
  --tents-frame: #3b2a1a;
  --tents-canopy: #1e7a38;
  --tents-canopy-deep: #145c28;
  --tents-trunk: #6a3e22;
  --tents-canvas: #c4512a;
  --tents-canvas-deep: #9a3818;
  --tents-door: #5c2412;
  --tents-clue-ink: var(--ink, #2b2419);
  --tents-clue-size: clamp(0.95rem, 2.2vw, 1.7rem);
}

html[data-ds-theme="dark"] body.ds-tents,
body.ds-tents[data-ds-theme="dark"] {
  --tents-grass: #3a2c22;
  --tents-tree-ground: #243828;
  --tents-tent-ground: #5c3424;
  --tents-line: #6a5344;
  --tents-frame: #e0c078;
  --tents-canopy: #8fdb7a;
  --tents-canopy-deep: #3f9a4c;
  --tents-trunk: #e7c7a2;
  --tents-canvas: #f09a62;
  --tents-canvas-deep: #d86a38;
  --tents-door: #2c140c;
  --tents-clue-ink: var(--ink, #f3e9d8);
}

.tents-grid {
  --tents-clue-size: clamp(0.95rem, 2.2vw, 1.7rem);
  display: grid;
  grid-template-columns: var(--tents-clue-size) minmax(0, 1fr);
  grid-template-rows: var(--tents-clue-size) auto;
  width: min(100%, 100%);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

body.ds-tents #board.board-tents,
.board-tents {
  grid-area: 2 / 2;
  display: grid;
  gap: 1px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  aspect-ratio: var(--cols, 1) / var(--rows, 1);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--tents-line);
  box-sizing: border-box;
}

.board-tents > .cell {
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  line-height: 0;
  font-size: 0;
  position: relative;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  color: var(--tents-clue-ink);
  cursor: pointer;
}

.board-tents > .cell.is-grass { background: var(--tents-grass); }
.board-tents > .cell.is-tree {
  background: var(--tents-tree-ground);
  cursor: default;
  opacity: 1;
}
.board-tents > .cell.is-tent { background: var(--tents-tent-ground); }

.board-tents > .cell.is-selected {
  z-index: 1;
  background: color-mix(in srgb, var(--indigo, #3547b3) 16%, var(--tents-grass));
  box-shadow: inset 0 0 0 2px var(--indigo, #3547b3);
}

.board-tents > .cell.is-tent.is-selected {
  background: color-mix(in srgb, var(--indigo, #3547b3) 18%, var(--tents-tent-ground));
}

.board-tents > .cell:focus-visible {
  outline: 2px solid var(--indigo, #3547b3);
  outline-offset: -3px;
  z-index: 1;
}

.board-tents > .cell:disabled {
  opacity: 1;
}

.tents-mark {
  position: absolute;
  left: 16%;
  top: 16%;
  width: 68%;
  height: 68%;
  display: block;
  pointer-events: none;
  overflow: hidden;
}

.tents-mark .tents-canopy { fill: var(--tents-canopy); }
.tents-mark .tents-canopy-deep { fill: var(--tents-canopy-deep); }
.tents-mark .tents-trunk { fill: var(--tents-trunk); }
.tents-mark .tents-canvas { fill: var(--tents-canvas); }
.tents-mark .tents-canvas-shade { fill: var(--tents-canvas-deep); }
.tents-mark .tents-door { fill: var(--tents-door); }
.tents-mark .tents-pole {
  fill: none;
  stroke: var(--tents-door);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tents-col-clues,
.tents-row-clues {
  min-width: 0;
  min-height: 0;
  color: var(--tents-clue-ink);
  font-family: var(--font-digits, ui-sans-serif, sans-serif);
  font-size: clamp(0.68rem, 2.5vw, 1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tents-col-clues {
  grid-area: 1 / 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

.tents-row-clues {
  grid-area: 2 / 1;
  display: grid;
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

.tents-col-clues > span,
.tents-row-clues > span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .board-tents > .cell.is-grass:hover:not(.is-selected) {
    background: color-mix(in srgb, var(--tents-canvas) 20%, var(--tents-grass));
  }
  .board-tents > .cell.is-tent:hover:not(.is-selected) {
    background: color-mix(in srgb, var(--tents-canvas) 28%, var(--tents-tent-ground));
  }
}