/* B Square — route progress line + spiral completion celebration.
   Ported from the handoff package (Info/B_Square_Route_Progress_and_
   Spiral_Celebration_v2.zip), unchanged — see route-effects.js's header
   comment. The route colour (#ff7a18, bright orange) is deliberate: it's
   chosen for contrast against B Square's own teal accent (#0d9488) and
   every revealed-cell background, not matched to the site's palette —
   an earlier attempt at this same feature failed specifically because a
   grey/teal-ish line blended into the teal tile fill (near-identical
   luminance). Don't "fix" this color to match --accent. */

.bs-route-board {
  position: relative;
  perspective: 900px;
  isolation: isolate;
}

/* The SVG is measured against the real rendered cells, so it does not
   depend on hard-coded tile sizes, CSS gaps, mobile width or zoom. */
.bs-route-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.bs-route-halo,
.bs-route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-route-halo {
  stroke: rgba(0, 0, 0, 0.24);
  stroke-width: 8;
}

.bs-route-line {
  stroke: #ff7a18;
  stroke-width: 4;
}

.bs-route-junction {
  fill: rgba(22, 153, 143, 0.18);
  stroke: #ff7a18;
  stroke-width: 4;
}

.bs-route-junction-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: bs-junction-pop 220ms ease-out both;
}

/* The whole start-B square is highlighted rather than circling its
   letter. outline/box-shadow do not alter the grid's geometry. */
.cell.bs-route-start-tile {
  outline: 4px solid #ff7a18;
  outline-offset: -4px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.14),
    0 0 0 2px rgba(255, 122, 24, 0.22),
    0 0 18px rgba(255, 122, 24, 0.22);
}

/* B-to-B mode uses the same full-tile treatment at the finishing B. */
.cell.bs-route-finish-tile {
  outline: 4px solid #ff7a18;
  outline-offset: -4px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 122, 24, 0.24),
    0 0 18px rgba(255, 122, 24, 0.20);
}

/* Keep letters above the route. Do NOT put a z-index on the whole cell,
   because that can create a stacking context which hides the SVG
   behind every tile. */
.bs-route-letter {
  position: relative;
  z-index: 6;
}

/* The order comes from B Square's own spiral, so the wave visibly
   travels around the square.

   Selector is `.cell.bs-spiral-flip`, not just `.bs-spiral-flip`: B
   Square's own styles.css has `.cell.win { animation: cell-pop .35s
   ease; }`, and every cell gets `.win` the instant the puzzle is
   marked solved — the exact same moment celebrate() adds this class.
   Two classes beats one in CSS specificity regardless of which
   stylesheet loads later, so a plain `.bs-spiral-flip` selector would
   silently lose that fight and the flip would never actually play;
   matching its specificity here is what lets it win instead. */
.cell.bs-spiral-flip {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: bs-winner-flip 520ms ease-in-out both;
  animation-delay: var(--bs-flip-delay, 0ms);
  will-change: transform;
}

/* Same specificity note as .cell.bs-spiral-flip above — this pulses on
   the start/finish tile during the celebration replay, exactly when
   that cell also has .win. */
.cell.bs-route-anchor-pulse {
  animation: bs-anchor-pulse 420ms ease-out;
}

@keyframes bs-winner-flip {
  0%   { transform: rotateY(0deg) scale(1); }
  30%  { transform: rotateY(90deg) scale(1.045); }
  60%  { transform: rotateY(180deg) scale(1.06); }
  100% { transform: rotateY(360deg) scale(1); }
}

@keyframes bs-junction-pop {
  0%   { opacity: 0; transform: scale(0.55); }
  75%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bs-anchor-pulse {
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1.22); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bs-spiral-flip,
  .bs-route-anchor-pulse,
  .bs-route-junction-pop {
    animation: none !important;
  }

  .bs-route-line,
  .bs-route-halo {
    transition: none !important;
  }
}