/* Neuriosity — Which Changed? playfield.
   Shared chrome lives in ../_shared/game-kit.css */

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

.wc-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: calc(var(--gu) * 1.6);
  height: 100%;
  aspect-ratio: 1;
  max-width: min(100%, calc(var(--gu) * 74));
  transition: opacity 120ms ease;
}

/* The board does not empty during the gap, it simply goes invisible — the
   slots keep their size so nothing shifts when it comes back. */
.wc-board.is-blank { opacity: 0; }

.wc-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--gu) * 0.8);
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(6, 43, 99, 0.1);
  border-radius: calc(var(--gu) * 1.6);
  cursor: pointer;
  transition: transform 110ms ease, border-color 110ms ease;
}

.wc-cell--empty {
  background: rgba(255, 255, 255, 0.45);
  border-style: dashed;
  border-color: rgba(6, 43, 99, 0.08);
  cursor: default;
}

.wc-cell:not(.wc-cell--empty):hover { border-color: rgba(141, 110, 58, 0.55); }
.wc-cell:not(.wc-cell--empty):active { transform: scale(0.95); }

.wc-cell:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #8d6e3a;
  outline-offset: calc(var(--gu) * 0.3);
}

.wc-cell.is-right {
  border-color: var(--green, #0ea85a);
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.5) rgba(14, 168, 90, 0.2);
}

.wc-cell.is-wrong {
  border-color: var(--coral, #f15f6d);
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.5) rgba(241, 95, 109, 0.2);
}

/* After a miss the real answer is marked, so the round still teaches you
   what you failed to notice. */
.wc-cell.is-answer {
  border-color: var(--green, #0ea85a);
  border-style: dashed;
}

.wc-glyph {
  width: 78%;
  height: 78%;
  max-width: calc(var(--gu) * 11);
  max-height: calc(var(--gu) * 11);
}

@media (prefers-reduced-motion: reduce) {
  .wc-board, .wc-cell { transition: none; }
}