/* Skyscrapers tokens: dark mode only changes these values. */
:root {
  --g-skyscrapers: #3a86a8;
  --sky-line: #d9d9d4;
  --sky-cell: #ffffff;
  --sky-given: #eeeeea;
  --sky-peer: #f2f6f8;
  --sky-selected: #cfe6f0;
  --sky-player: #23708f;
  --sky-note: #6b6b6b;
  --sky-key-bg: #f1f1ee;
}
:root[data-theme='dark'] {
  --g-skyscrapers: #5aaccb;
  --sky-line: #2e2e2e;
  --sky-cell: #1a1a1a;
  --sky-given: #2a2a2a;
  --sky-peer: #1f2529;
  --sky-selected: #21404e;
  --sky-player: #86c8e3;
  --sky-note: #a0a0a0;
  --sky-key-bg: #1f1f1f;
}

.skyscrapers-shell {
  --game-accent: var(--g-skyscrapers);
}
.skyscrapers-shell .shell-stage {
  gap: var(--space-4);
  padding: 0 var(--space-4);
}
.skyscrapers-shell .shell-board-area {
  width: 100%;
}
.skyscrapers-shell .shell-input {
  width: 100%;
  min-height: 0;
  padding: 0;
}
/* The clue ring is narrower than a cell so a 7 × 7 board keeps cells near 40px on a 375px phone. */
.sky-board-wrap {
  width: min(560px, calc(100vw - 32px), calc(100dvh - 300px));
  margin: 0 auto;
}
.sky-board {
  --ring: 0.72fr;
  --gap: 2px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--ring) repeat(var(--n), minmax(0, 1fr)) var(--ring);
  grid-template-rows: var(--ring) repeat(var(--n), minmax(0, 1fr)) var(--ring);
  gap: var(--gap);
  aspect-ratio: 1;
  padding: var(--gap);
}
.sky-corner,
.sky-clue {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}
/* Clues use the shared inverted mark badge; state changes only its colour. */
.sky-clue b {
  display: grid;
  width: min(78%, calc(100cqw / (var(--n) + 1.44) * 0.62));
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--mark-bg);
  box-shadow: 0 0 0 2px var(--bg);
  color: var(--mark-ink);
  font: 700 calc(100cqw / (var(--n) + 1.44) * 0.34) / 1 var(--font-app);
  transition: background 160ms ease-out;
}
.sky-clue.satisfied b {
  background: var(--success);
  color: var(--bg);
}
.sky-clue.violated b {
  background: var(--danger);
  color: var(--bg);
}
.sky-clue.hinted b {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 5px var(--hint-context);
}
.sky-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--sky-cell);
  box-shadow: 0 0 0 1px var(--sky-line);
  color: var(--sky-player);
  font: 600 calc(100cqw / (var(--n) + 1.44) * 0.5) / 1 var(--font-app);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease-out;
}
.sky-cell.given {
  background: var(--sky-given);
  color: var(--text);
  font-weight: 800;
}
.sky-cell.peer {
  background: var(--sky-peer);
}
.sky-cell.given.peer {
  background: color-mix(in srgb, var(--sky-given) 70%, var(--sky-peer));
}
.sky-cell.same {
  background: color-mix(in srgb, var(--sky-selected) 55%, var(--sky-cell));
}
.sky-cell.selected {
  z-index: 1;
  background: var(--sky-selected);
  box-shadow:
    0 0 0 1px var(--sky-line),
    inset 0 0 0 2px var(--game-accent);
}
.sky-cell:focus {
  outline: 0;
}
.sky-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--text);
}
.sky-cell.conflict {
  color: var(--danger);
  box-shadow:
    0 0 0 1px var(--sky-line),
    inset 0 0 0 2px var(--danger);
}
.sky-cell.hint-context {
  outline: 3px solid var(--hint-context);
  outline-offset: -3px;
}
.sky-cell.hint-target {
  outline: 3px solid var(--hint-target);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--hint-target) 22%, var(--sky-cell));
}
.sky-ghost {
  color: var(--hint-target);
  opacity: 0.8;
}
/* Pencil marks sit in a 3 × 3 keypad layout so a number keeps its place. */
.sky-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 88%;
  height: 88%;
  color: var(--sky-note);
  font: 600 calc(100cqw / (var(--n) + 1.44) * 0.22) / 1 var(--font-app);
}
.sky-notes i {
  display: grid;
  place-items: center;
  font-style: normal;
}
.sky-cell.just-set .sky-value {
  animation: sky-pop 140ms ease-out;
}
@keyframes sky-pop {
  from {
    transform: scale(0.6);
  }
}
.sky-board.shake {
  animation: sky-shake 240ms ease-in-out;
}
@keyframes sky-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.sky-board.solved .sky-cell {
  animation: sky-solved 520ms ease-out both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes sky-solved {
  40% {
    background: color-mix(in srgb, var(--game-accent) 35%, var(--sky-cell));
  }
}

/* Number pad: digits on one row, pencil and clear below. */
.sky-pad {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
}
.sky-digits {
  display: grid;
  grid-template-columns: repeat(var(--keys), minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 14px;
  background: var(--sky-key-bg);
}
.sky-key,
.sky-mode {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.sky-key {
  height: 48px;
  font: 700 22px var(--font-app);
}
.sky-digits.pencil .sky-key {
  color: var(--game-accent);
  font-size: 17px;
}
.sky-key.on {
  background: var(--segment-on);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.2),
    inset 0 0 0 1.5px var(--game-accent);
}
.sky-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.sky-mode {
  height: 40px;
  background: var(--sky-key-bg);
  font: 600 14px var(--font-app);
}
.sky-mode svg {
  width: 20px;
  height: 20px;
}
.sky-mode.on {
  background: var(--game-accent);
  color: var(--bg);
}

.sky-hint-meta {
  color: var(--text-muted);
  font-size: 12px;
}
.sky-hint-text {
  line-height: 1.55;
}
.sky-hint-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.sky-hint-apply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.sky-hint-apply .button {
  min-width: 96px;
  min-height: 44px;
}
.sky-hint .sky-hint-conclusion {
  margin: 0;
}
.sky-hint-conclusion strong {
  color: var(--hint-target);
  font-size: 18px;
}

/* Rules walkthrough examples: a clue badge followed by a short line of heights. */
.sky-example {
  display: inline-flex;
  gap: 4px;
  margin: 2px 6px;
  letter-spacing: 0;
  vertical-align: middle;
}
.sky-example-clue,
.sky-example-cell {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  font-size: 18px;
}
.sky-example-clue:not(:empty) {
  border-radius: 50%;
  background: var(--mark-bg);
  color: var(--mark-ink);
}
.sky-example-clue:empty {
  display: none;
}
.sky-example-cell {
  border-radius: 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-muted);
}
.sky-example-cell.seen {
  box-shadow: inset 0 0 0 2px var(--game-accent);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .sky-cell,
  .sky-cell.just-set .sky-value,
  .sky-board.shake,
  .sky-board.solved .sky-cell {
    animation: none;
    transition: none;
  }
}