/* board.css — #speelveld mosaic chessboard: static band by default,
   sticky scrub stage when board.js adds .is-scrub on motion-allowed desktop. */

#speelveld { padding: 0; max-width: none; }

.board-stage {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
}
.board-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.board-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(12deg, rgba(12, 26, 38, 0.88) 0%, rgba(12, 26, 38, 0.62) 45%, rgba(12, 26, 38, 0.18) 80%);
}
.board-inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max-w); margin-inline: auto;
  padding: clamp(4rem, 9vh, 6rem) var(--gutter);
}
#speelveld h2 { max-width: 18ch; }
.board-intro { color: var(--steel); margin-top: 0.75rem; max-width: 40ch; }

/* ---- Field: asymmetric offset grid with the spine behind it ---- */
.board-field { position: relative; margin-top: clamp(2.25rem, 6vh, 4rem); }
.board-spine {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.board-spine-line {
  fill: none; stroke: var(--sky); stroke-width: 1.5px;
  vector-effect: non-scaling-stroke; opacity: 0.65;
}
.board-phases {
  position: relative; display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(1.25rem, 3vh, 2rem);
}
.board-phase {
  border: var(--hairline); border-radius: var(--radius);
  background: rgba(12, 26, 38, 0.55);
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
}
.board-phase h3 { margin-bottom: 0.5rem; }
.board-phase p { color: var(--text-2); max-width: 34ch; }
.board-phase:nth-child(1) { grid-column: 1 / 6; }
.board-phase:nth-child(2) { grid-column: 8 / 13; margin-top: clamp(1.5rem, 5vh, 3rem); }
.board-phase:nth-child(3) { grid-column: 2 / 7; }
.board-phase:nth-child(4) { grid-column: 8 / 13; margin-top: clamp(1.5rem, 5vh, 3rem); }

/* ---- Scrub mode (added by board.js, desktop + motion + GSAP only) ---- */
@media (min-width: 769px) {
  #speelveld.is-scrub .board-track { height: 260vh; }
  #speelveld.is-scrub .board-stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh; min-height: 0;
  }
}

/* ---- Mobile collapse (<768px): plain vertical band, spine omitted ---- */
@media (max-width: 767px) {
  .board-spine { display: none; }
  .board-phases { display: block; }
  .board-phase { margin-top: 1rem; }
  .board-phase:nth-child(2), .board-phase:nth-child(4) { margin-top: 1rem; }
}

/* ---- Reduced motion: static band, everything visible (JS no-ops too) ---- */
@media (prefers-reduced-motion: reduce) {
  #speelveld .board-phase { opacity: 1 !important; transform: none !important; }
  .board-spine-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}