/* Neuriosity — Number Trail playfield.
   Shared chrome lives in ../_shared/game-kit.css */

/* The stage claims the leftover height and the field fills it, deriving its
   width from the aspect ratio — that keeps the trail square, which matters
   because the marker positions are stored as percentages. */
.nt-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.nt-field {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  max-width: min(100%, calc(var(--gu) * 88));
  background:
    radial-gradient(circle at 50% 30%, #ffffff, #fdf1fa 62%, #f4dcee);
  border: calc(var(--gu) * 0.34) solid rgba(165, 56, 140, 0.26);
  border-radius: calc(var(--gu) * 3.4);
}

/* The trail line sits under the markers and grows a segment per correct tap,
   so progress is visible without reading any numbers. */
.nt-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nt-line polyline {
  fill: none;
  stroke: rgba(165, 56, 140, 0.55);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.nt-nodes { position: absolute; inset: 0; }

.nt-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(44px, calc(var(--gu) * 11));
  height: max(44px, calc(var(--gu) * 11));
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  color: var(--navy, #062b63);
  font: inherit;
  font-size: max(15px, calc(var(--gu) * 3.4));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: calc(var(--gu) * 0.4) solid rgba(165, 56, 140, 0.45);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 110ms ease, background 140ms ease, color 140ms ease;
}

.nt-node:hover { transform: translate(-50%, -50%) scale(1.06); }
.nt-node:active { transform: translate(-50%, -50%) scale(0.95); }

.nt-node:focus-visible {
  outline: calc(var(--gu) * 0.55) solid #a5388c;
  outline-offset: calc(var(--gu) * 0.3);
}

.nt-node.is-done {
  color: #fff;
  background: #a5388c;
  border-color: #a5388c;
  cursor: default;
}

.nt-node.is-wrong {
  animation: nt-nudge 380ms ease;
  border-color: var(--coral, #f15f6d);
  color: var(--coral, #f15f6d);
}

@keyframes nt-nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  30% { transform: translate(-50%, -50%) rotate(-7deg); }
  70% { transform: translate(-50%, -50%) rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nt-node, .nt-node.is-wrong { transition: none; animation: none; }
}