/* Neuriosity — Mental Math playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.neu-sum {
  display: grid;
  place-items: center;
  min-height: calc(var(--gu) * 20);
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 11);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.neu-sum.is-right { animation: neu-sum-yes 260ms ease; }
.neu-sum.is-wrong { animation: neu-sum-no 320ms ease; }

@keyframes neu-sum-yes {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes neu-sum-no {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--gu) * -1.4)); }
  75% { transform: translateX(calc(var(--gu) * 1.4)); }
}

.neu-answer {
  display: flex;
  gap: calc(var(--gu) * 1.4);
  width: min(100%, calc(var(--gu) * 66));
}

.neu-answer input {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--gu) * 11);
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 5.4);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(6, 43, 99, 0.18);
  border-radius: calc(var(--gu) * 2.2);
}

.neu-answer input:focus-visible {
  outline: calc(var(--gu) * 0.5) solid var(--neu-accent, #2f5fd0);
  outline-offset: calc(var(--gu) * 0.3);
}

.neu-timer {
  width: min(100%, calc(var(--gu) * 70));
  height: calc(var(--gu) * 1.4);
  overflow: hidden;
  background: rgba(6, 43, 99, 0.12);
  border-radius: 999px;
}

.neu-timer__fill {
  width: 100%;
  height: 100%;
  background: var(--neu-accent, #2f5fd0);
  border-radius: 999px;
  transform-origin: left center;
  transition: transform linear;
}