/* ── Skyscrapers ────────────────────────────────────────────────────────────
   An N×N city grid ringed by four gutters of visibility clues. The play chrome
   (.q-chrome / .q-stage / .q-foot) is the shared shell from queens.css; below is
   Skyscrapers' own — the board, the clue gutters, the height cells, and the clue
   glow. Sizing tokens (--sky-cell, --sky-n) are set on .sky-hold by the JS to fit
   the stage; every colour is theme-aware via tokens.

   Two deliberate choices the player asked for: cells carry NO baseline/underline
   hint (just the digit on plain grid lines), and a clue GLOWS when its line is
   full and the skyline seen from it matches — that glow is the main feedback. */

/* Board colours (--sky-paper/line/frame/given/entry) live in tokens.css, themed
   there like every other game's material. */

.sky-play { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sky-play .q-stage { padding: var(--space-4); overflow: auto; display: grid; place-items: center; }
.sky-hold { display: inline-block; }

/* ── the board: [gutter | N cells | gutter] × the same, rows ─────────────────
   One grid so the four clue gutters stay perfectly registered to the cells. */
.sky-board {
  display: grid;
  grid-template-columns: repeat(calc(var(--sky-n) + 2), var(--sky-cell));
  grid-auto-rows: var(--sky-cell);
  position: relative;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
/* the city block wears one clear frame: the gutters are each exactly one cell
   deep, so an inset of --sky-cell lands the rule on the N×N block's own edge.
   Derived from --text so it holds in both themes. */
.sky-board::after {
  content: "";
  position: absolute;
  inset: var(--sky-cell);
  border: 2px solid color-mix(in srgb, var(--text) 42%, var(--sky-paper));
  pointer-events: none;
  z-index: 1;
}

/* corner / spacer slots in the four gutter intersections */
.sky-x { width: var(--sky-cell); height: var(--sky-cell); }

/* a visibility clue — a bare numeral in the gutter, no pill (the board does the
   framing). Muted until its line proves it, then it GLOWS in the accent. */
.sky-clue {
  width: var(--sky-cell); height: var(--sky-cell);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(var(--sky-cell) * 0.34);
  color: var(--mute);
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}
.sky-clue.glow {
  color: var(--accent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent),
               0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: scale(1.06);
}
/* a clue that can no longer be satisfied by what's on the board */
.sky-clue.err { color: var(--danger-text); transform: scale(1.04); }

/* ── a height cell: the paper AND its own grid lines (inset, so no gaps and no
   doubled frame). NO underline/baseline hint — just the digit. ─────────────── */
.sky-cell {
  width: var(--sky-cell); height: var(--sky-cell);
  display: grid; place-items: center;
  /* the baked --sky-paper/--sky-line sit within a few % of the app background
     in dark theme, so the board read as floating digits. Lift both off the page
     via --text so the grid is visible in either theme. */
  background: color-mix(in srgb, var(--text) 5%, var(--sky-paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, var(--sky-paper));
  cursor: pointer; position: relative;
  transition: box-shadow .1s ease, background .1s ease;
}
.sky-cell .v {
  pointer-events: none;
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(var(--sky-cell) * 0.46);
  line-height: 1; color: var(--sky-entry);
}
/* a given building is fixed furniture: ink, not accent, and not tappable */
.sky-cell.given { background: color-mix(in srgb, var(--sky-frame) 22%, var(--sky-paper)); cursor: default; }
.sky-cell.given .v { color: var(--sky-given); }
/* a placed building glows in the accent (default .v colour already does this) */
.sky-cell.entry .v { color: var(--sky-entry); }

/* drag-target highlight from numgrid (.ng-tgt handles the outline) and a
   conflict outline from Check */
.sky-cell.bad { box-shadow: inset 0 0 0 2px var(--danger-text); z-index: 2; }
.sky-cell.bad .v { color: var(--danger-text); }

/* the finished skyline: a soft settle on every cell */
.sky-board.sky-solved .sky-cell { animation: sky-settle var(--duration-3, .3s) var(--ease, ease) both; }
@keyframes sky-settle { from { transform: scale(.8); opacity: .4; } to { transform: none; opacity: 1; } }

/* ── footer: the number palette + the Check / Solve tools ───────────────────── */
.sky-foot { flex-direction: column; gap: var(--space-3); align-items: center; }
.sky-pal { width: 100%; }
.sky-tools { display: inline-flex; gap: var(--space-3); }
.sky-tool svg { width: var(--icon-sm, 16px); height: var(--icon-sm, 16px); flex: none; }
.sky-tool { display: inline-flex; align-items: center; gap: var(--space-3); }
.sky-tool {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mute); background: var(--surface);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: var(--t, all .12s ease);
}
.sky-tool:hover { color: var(--text); border-color: var(--accent-line, var(--accent)); }
.sky-tool:active { transform: scale(.96); }

/* ── level-card thumbnail: the skyline, revealed once solved ────────────────── */
.sky-mini {
  display: grid; gap: 2px;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  grid-template-rows: repeat(var(--n, 5), 1fr);
  width: 44px; height: 44px; margin: 0 auto;
}
.sky-mini i {
  border-radius: 1px; background: var(--line-2); opacity: .3;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 8px;
  color: var(--accent); font-style: normal;
}
.sky-mini.done i { opacity: 1; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2, transparent)); }

@media (prefers-reduced-motion: reduce) {
  .sky-board.sky-solved .sky-cell { animation: none; }
  .sky-clue { transition: none; }
}