/* Footer connection game — scaffolding for tests/game.html.

   Everything here is deliberately 8-bit-plain: dots are squares-with-radius, the
   only palette is the brand's, and nothing anti-aliases into a gradient. The
   strip is sized so it can live under the real footer at 120–160px tall. */

.gamebed {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg, 20px);
  padding: var(--s-8);
}

.gstrip {
  --dot: 14px;
  --lit: #FF4D00;
  --dim: color-mix(in srgb, var(--fg) 22%, transparent);
  display: grid;
  gap: var(--s-4);
}

.gstrip__hint,
.gstrip__score {
  font-size: var(--t-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-35);
}
.gstrip__score { font-variant-numeric: tabular-nums; }

/* the play field: the site's dot grid, so an idle board reads as a graphic */
.gstrip__board {
  position: relative;
  height: 140px;
  border-radius: var(--r-sm, 8px);
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 8px 8px;
  touch-action: none;
  cursor: crosshair;
  overflow: hidden;
}
.gstrip__board--row { height: 56px; cursor: default; }

/* Real grid, not percentage positioning: the columns divide the width exactly,
   so every dot lands on a shared ruler and the field reads as a room of desks
   rather than as scattered points. */
.gstrip__board--cells {
  display: grid;
  grid-template-columns: repeat(var(--cols, 18), 1fr);
  grid-auto-rows: 1fr;
  place-items: center;
  padding: var(--s-4);
  height: auto;
  aspect-ratio: var(--cols, 18) / var(--rows, 5);
  /* the dots are the grid now, so the background grid would only fight them */
  background-image: none;
}
.gstrip__board--cells .gdot {
  position: static;
  margin: 0;
  width: min(var(--dot), 100%);
  aspect-ratio: 1;
  height: auto;
}

/* ── Ripple: black room, white outlines, colour that stays ──────────────── */

.gstrip--ripple { --dot: 16px; }
.gstrip--ripple .gstrip__board {
  background: #000000;
  /* the room is black, so the strip needs its own inner edge rather than
     borrowing the page's */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* every dot starts as an empty outline — a student in the room, not yet known */
.gstrip--ripple .gdot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  transition: background-color .32s var(--ease), box-shadow .32s var(--ease), transform .32s var(--ease);
}
.gstrip--ripple .gdot:hover { transform: scale(1.2); }
/* filled dots keep their colour: the room stays changed */
.gstrip--ripple .gdot[data-fill] {
  background: var(--fill);
  box-shadow: inset 0 0 0 1.5px var(--fill);
}
.gstrip--ripple .gstrip__hint,
.gstrip--ripple .gstrip__score { color: rgba(255, 255, 255, .45); }

/* the swatch trail showing which colour lands next */
.gswatches { display: flex; gap: 6px; align-items: center; }
.gswatch { width: 12px; height: 12px; border-radius: 50%; background: var(--c); opacity: .3; transition: opacity .25s var(--ease); }
.gswatch.is-next { opacity: 1; }
.gstrip__board--canvas { cursor: default; }

/* ── Dots ───────────────────────────────────────────────────────────────── */

.gdot {
  position: absolute;
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--dim);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .18s steps(3), transform .18s steps(3);
}
.gdot:hover { transform: scale(1.25); }
.gdot.is-lit { background: var(--lit); }
.gdot.is-sel { background: var(--lit); transform: scale(1.35); }
.gdot.is-joined { background: var(--lit); }

/* second pair colour, plus a shape difference so the match never rests on hue */
.gdot[data-kind="b"] { border-radius: 2px; }
.gdot[data-kind="b"].is-lit,
.gdot[data-kind="b"].is-joined { background: #0064F3; }

/* ── Lines ──────────────────────────────────────────────────────────────── */

.gline {
  position: absolute;
  height: 2px;
  background: var(--lit);
  transform-origin: 0 50%;
  pointer-events: none;
}
.gline--ghost { background: color-mix(in srgb, var(--fg) 30%, transparent); }

/* the lean in "turn to your neighbour" — a nudge toward the dot beside you */
.gdot.is-leaning { transform: translateX(var(--lean, 3px)) scale(1.15); }

.gsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gsvg line { stroke: color-mix(in srgb, var(--fg) 28%, transparent); stroke-width: 1; }

/* ── 04 · the long table ────────────────────────────────────────────────── */

.gstrip__board--row { display: flex; align-items: center; gap: 4px; padding-inline: var(--s-4); }
.gseat {
  position: relative;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--dim);
  cursor: pointer;
  transition: background-color .15s steps(2);
}
.gseat:hover { background: color-mix(in srgb, var(--fg) 38%, transparent); }
.gseat--gap { background: none; box-shadow: inset 0 0 0 1px var(--rule); cursor: default; }
.gseat--gap:hover { background: none; }
.gstrip__board--row.is-solved .gseat:not(.gseat--gap) { background: var(--lit); }

/* ── 06 · placement demo ────────────────────────────────────────────────── */

.placedemo { border: 1px solid var(--rule); border-radius: var(--r-lg, 20px); overflow: hidden; }
.placedemo__scroll { height: 460px; overflow-y: auto; background: var(--bg); }
.placedemo__filler {
  height: 320px;
  display: grid;
  place-items: center;
  color: var(--fg-35);
  font-size: var(--t-caption);
}
.placedemo__footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-6);
  padding: var(--s-12) var(--s-8);
  border-top: 1px solid var(--rule);
}
.placedemo__brand { font-size: var(--t-h2); }
.placedemo__meta { font-size: var(--t-caption); color: var(--fg-50); }

/* the strip lives on a slightly recessed ground, so it reads as beneath the page
   rather than as one more footer row */
.placedemo__under {
  padding: var(--s-8);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-top: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.placedemo__under.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gdot, .gseat, .placedemo__under { transition: none; }
  .placedemo__under { opacity: 1; transform: none; }
}