/* Neuriosity — Bounce Path playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.neu-status:empty { display: none; }

.bpp-band {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.5);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bpp-band.is-ask { color: #9c2f57; }

.bpp-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* The board sits inside a one-cell ring, and the ring is where the ball goes
   in and comes out — so entry, exit and board are one grid rather than three
   things that have to be lined up by hand. */
/* The outer ring only has to hold a dot or an arrow, so it gets narrower
   tracks than the board does and the squares themselves stay as big as the
   frame allows. */
.bpp-grid {
  display: grid;
  grid-template-columns: 0.62fr repeat(calc(var(--cols, 7) - 2), 1fr) 0.62fr;
  grid-template-rows: 0.62fr repeat(calc(var(--rows, 5) - 2), 1fr) 0.62fr;
  gap: calc(var(--gu) * 0.5);
  width: 100%;
  height: 100%;
}

.bpp-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border: calc(var(--gu) * 0.22) solid rgba(156, 47, 87, 0.14);
  border-radius: calc(var(--gu) * 0.8);
}

/* A mirror is a diagonal drawn corner to corner. Two of them, leaning the two
   ways, and the whole game follows from that. */
.bpp-mirror {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 84%;
  height: calc(var(--gu) * 0.7);
  background: #9c2f57;
  border-radius: 999px;
  transform-origin: 50% 50%;
}

.bpp-mirror--fwd { transform: translateY(-50%) rotate(-45deg); }
.bpp-mirror--back { transform: translateY(-50%) rotate(45deg); }

/* Where the ball actually went, drawn out afterwards one square at a time. */
.bpp-cell.is-path {
  background: rgba(156, 47, 87, 0.16);
  border-color: rgba(156, 47, 87, 0.45);
}

/* ---------- the ring ---------- */

.bpp-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.bpp-ring--in { color: var(--navy, #062b63); }

.bpp-arrow {
  width: 100%;
  height: 100%;
  max-width: calc(var(--gu) * 7);
  max-height: calc(var(--gu) * 7);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A candidate way out. The grid cell it lives in is small, so the button
   reaches beyond it to stay thumb-sized; the generator keeps any two answers
   at least one cell apart so these can never overlap. */
.bpp-port {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  margin: calc(var(--gu) * -2);
  cursor: pointer;
}

.bpp-port__dot {
  display: block;
  width: min(100%, calc(var(--gu) * 5.4));
  height: min(100%, calc(var(--gu) * 5.4));
  background: #fff;
  border: calc(var(--gu) * 0.5) solid #9c2f57;
  border-radius: 50%;
}

.bpp-port:hover .bpp-port__dot { background: rgba(156, 47, 87, 0.15); }
.bpp-port:active .bpp-port__dot { transform: scale(0.9); }

.bpp-port:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #9c2f57;
  outline-offset: calc(var(--gu) * 0.2);
  border-radius: 50%;
}

.bpp-port.is-right .bpp-port__dot { background: var(--green, #0ea85a); border-color: var(--green, #0ea85a); }
.bpp-port.is-wrong .bpp-port__dot { background: var(--coral, #f15f6d); border-color: var(--coral, #f15f6d); }
.bpp-port.is-answer .bpp-port__dot { border-style: dashed; border-color: var(--green, #0ea85a); }

@media (prefers-reduced-motion: reduce) {
  .bpp-port__dot { transition: none; }
}