html.is-play.ds-root {
  --accent: #3547B3;
}

/* Opaque clue frame, visually distinct from editable height cells. */
body.ds-skyscrapers #board.board-skyscrapers {
  container-type: inline-size;
  background: color-mix(in srgb, #EFB94F 18%, var(--board-cell, #fffaf0));
}
body.ds-skyscrapers #board .sky-clue,
body.ds-skyscrapers #board .sky-corner {
  background: transparent;
}
body.ds-skyscrapers #board .sky-clue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--board-given, #241a14);
  font-size: clamp(14px, 2.4vw, 23px);
  line-height: 1;
}
body.ds-skyscrapers .sky-view { width: 30px; height: 20px; flex: 0 0 20px; opacity: .8; }
body.ds-skyscrapers .sky-clue-top .sky-view { transform: rotate(90deg); }
body.ds-skyscrapers .sky-clue-right .sky-view { transform: rotate(180deg); }
body.ds-skyscrapers .sky-clue-bottom .sky-view { transform: rotate(-90deg); }
body.ds-skyscrapers .sky-count { font-weight: 800; }
body.ds-skyscrapers #playSecondary { display: grid; gap: 12px; }


/* Observers sit outside their count and look toward the board. */
body.ds-skyscrapers #board .sky-clue-bottom { flex-direction: column-reverse; }
body.ds-skyscrapers #board .sky-clue-left { flex-direction: row; }
body.ds-skyscrapers #board .sky-clue-right { flex-direction: row-reverse; }
body.ds-skyscrapers #board .sky-clue-left .sky-view,
body.ds-skyscrapers #board .sky-clue-right .sky-view { flex-basis: 30px; }

/* Height is a visual encoding of the player's value, never correctness. */
body.ds-skyscrapers #board .cell {
  border-radius: 0;
  overflow: hidden;
}
body.ds-skyscrapers #board .sky-building {
  position: absolute;
  bottom: 6%;
  left: 17%;
  width: 66%;
  height: var(--tower-height);
  min-height: 0;
  max-height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px 5px 2px 2px;
  background: hsl(var(--tower-hue) 52% 36%);
  box-shadow: inset 0 2px 0 #ffffff45, 0 2px 2px #241a141f;
  color: #fffaf0;
  font-size: clamp(12px, calc(30cqw / var(--sky-size)), 32px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
body.ds-skyscrapers #board .cell.is-given .sky-building {
  font-weight: 900;
  outline: 2px solid color-mix(in srgb, currentColor 55%, transparent);
  outline-offset: -3px;
}
@media (max-width: 480px) {
  body.ds-skyscrapers .sky-view { width: 22px; height: 16px; }
  body.ds-skyscrapers #board .sky-clue-left .sky-view,
  body.ds-skyscrapers #board .sky-clue-right .sky-view { flex-basis: 22px; }
  body.ds-skyscrapers #board .sky-clue { gap: 2px; }
}

/* Fixed vs player-entered heights: same value-color tower, distinct authorship styling. */
body.ds-skyscrapers #board .cell.given .sky-building,
body.ds-skyscrapers #board .cell.is-given .sky-building {
  font-weight: var(--weight-given);
  outline: 2px solid color-mix(in srgb, var(--board-given) 70%, transparent);
  outline-offset: -3px;
}
body.ds-skyscrapers #board .cell.entry .sky-building {
  font-weight: var(--weight-entry);
  outline: 2px solid var(--board-entry);
  outline-offset: -3px;
}