/* Neuriosity — Quick Count playfield.
   Shared chrome lives in ../_shared/game-kit.css */

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

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

/* Two halves, each one enormous button. Nothing else on the site gets a
   target this big, and nothing else asks for an answer this fast. */
.qc-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--gu) * 1.6);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.qc-side {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  padding: calc(var(--gu) * 1);
  font: inherit;
  background: #fff;
  border: calc(var(--gu) * 0.35) solid rgba(150, 0, 0, 0.18);
  border-radius: calc(var(--gu) * 1.6);
  cursor: pointer;
}

.qc-side:hover { border-color: #960000; }
.qc-side:active { transform: scale(0.99); }
.qc-side:focus-visible { outline: calc(var(--gu) * 0.5) solid #960000; outline-offset: calc(var(--gu) * 0.2); }

.qc-side.is-right { background: rgba(14, 168, 90, 0.16); border-color: var(--green, #0ea85a); }
.qc-side.is-wrong { background: rgba(241, 95, 109, 0.16); border-color: var(--coral, #f15f6d); }
.qc-side.is-answer { border-color: var(--green, #0ea85a); border-style: dashed; }

.qc-field {
  display: block;
  width: 100%;
  height: 100%;
}

.qc-field svg { width: 100%; height: 100%; }
.qc-field circle { fill: #960000; }

/* The two sides are told apart by position, so the dots do not need to differ
   in colour — which keeps the total-ink control honest. */
.qc-side[data-side="right"] .qc-field circle { fill: #2f5fd0; }

/* Revealed after the answer: seeing the real numbers is how the eye learns. */
.qc-count {
  position: absolute;
  inset: auto 0 calc(var(--gu) * 1.2) 0;
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 5);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .qc-side:active { transform: none; }
}