/* Neuriosity — Memory Test playfield.
   Shared chrome (HUD, results, capture) lives in ../../css/game-kit.css */

.bp-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-auto-rows: 1fr;
  gap: calc(var(--gu) * 1.7);
  /* 60gu suited the website's 4:3 box, where --gu came off the height. On a
     portrait phone --gu comes off the width, so 60gu left the board floating
     in the middle of the screen. 80gu fills the phone and still clears the
     HUD and status line when --gu is height-derived (landscape, desktop). */
  width: min(calc(var(--gu) * 80), 100%);
  aspect-ratio: 1;
}

.bp-tile {
  padding: 0;
  background: #fff;
  border: calc(var(--gu) * 0.28) solid rgba(8, 120, 232, 0.2);
  border-radius: calc(var(--gu) * 1.8);
  box-shadow: 0 calc(var(--gu) * 0.5) calc(var(--gu) * 1.2) rgba(6, 43, 99, 0.08);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.bp-grid.is-locked .bp-tile { cursor: default; }

.bp-tile.is-flash {
  background: var(--blue, #0878e8);
  border-color: var(--blue, #0878e8);
  box-shadow: 0 0 calc(var(--gu) * 2.4) rgba(8, 120, 232, 0.5);
}

.bp-tile.is-correct {
  background: var(--teal, #13aa8b);
  border-color: var(--teal, #13aa8b);
  animation: bp-pop 260ms ease;
}

.bp-tile.is-wrong {
  background: var(--coral, #f15f6d);
  border-color: var(--coral, #f15f6d);
  animation: bp-shake 320ms ease;
}

.bp-tile.is-reveal {
  background: rgba(8, 120, 232, 0.34);
  border-color: rgba(8, 120, 232, 0.5);
}

@keyframes bp-pop {
  0% { transform: scale(0.84); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes bp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--gu) * -1)); }
  75% { transform: translateX(calc(var(--gu) * 1)); }
}