/* Neuriosity — Memory Match playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.neu-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-auto-rows: 1fr;
  gap: calc(var(--gu) * 1.5);
  width: calc(var(--gu) * 62);
  max-width: 100%;
  aspect-ratio: 1;
}

.neu-card {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  perspective: calc(var(--gu) * 60);
}

.neu-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.neu-card.is-up .neu-card__inner,
.neu-card.is-done .neu-card__inner { transform: rotateY(180deg); }

.neu-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: calc(var(--gu) * 1.8);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.neu-card__back {
  background: linear-gradient(145deg, #41b8f1, var(--blue, #0878e8));
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.4) rgba(255, 255, 255, 0.4);
}

.neu-card__back::after {
  content: "";
  width: 42%;
  height: 42%;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.neu-card__front {
  color: var(--sym, var(--navy, #062b63));
  font-size: calc(var(--gu) * 7);
  line-height: 1;
  background: #fff;
  border: calc(var(--gu) * 0.28) solid rgba(8, 120, 232, 0.22);
  transform: rotateY(180deg);
}

.neu-card.is-done { cursor: default; }
.neu-card.is-done .neu-card__front {
  background: #eefaf5;
  border-color: rgba(19, 170, 139, 0.5);
  animation: neu-match 340ms ease;
}

.neu-board.is-locked .neu-card { cursor: default; }

.neu-card:focus-visible { outline: calc(var(--gu) * 0.6) solid var(--blue-bright, #19a4f3); outline-offset: calc(var(--gu) * 0.4); border-radius: calc(var(--gu) * 1.8); }

@keyframes neu-match {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}