/* Neuriosity — Fast Fold playfield.
   Shared chrome lives in ../_shared/game-kit.css */

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

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

/* ---------- the fold sequence ---------- */

/* The 4:3 frame is wide and short, so the steps run across it rather than
   down it, and the answers sit in a single row underneath. */
.ff-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 1);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.ff-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--gu) * 0.5);
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
}

/* One square of the lattice is the same size in every panel — see the note in
   fast-fold.js. --cols and --rows are set per panel from the packet's size. */
.ff-step .ff-svg {
  flex: 0 0 auto;
  width: calc(var(--cols, 4) * var(--gu) * 5);
  height: calc(var(--rows, 4) * var(--gu) * 5);
  max-width: 100%;
}

.ff-step__tag {
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ff-then {
  flex: 0 0 auto;
  color: rgba(36, 64, 140, 0.45);
  font-size: calc(var(--gu) * 4.5);
  font-weight: 800;
  line-height: 1;
}

/* ---------- the paper ---------- */

.ff-paper {
  fill: #fff;
  stroke: #24408c;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.ff-grid {
  stroke: rgba(36, 64, 140, 0.16);
  stroke-width: 1.4;
}

.ff-crease {
  stroke: rgba(36, 64, 140, 0.7);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.ff-arrow {
  stroke: #24408c;
  stroke-width: 3;
  stroke-linecap: round;
}

.ff-arrow-head { fill: #24408c; }

.ff-punch,
.ff-hole {
  fill: var(--navy, #062b63);
}

/* ---------- the answers ---------- */

.ff-picks {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--gu) * 1.6);
  flex: 1.35 1 0;
  min-height: 0;
  width: 100%;
}

.ff-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 44px;
  min-height: 44px;
  height: 100%;
  aspect-ratio: 1;
  padding: calc(var(--gu) * 0.8);
  background: rgba(36, 64, 140, 0.05);
  border: calc(var(--gu) * 0.35) solid rgba(36, 64, 140, 0.2);
  border-radius: calc(var(--gu) * 1.6);
  cursor: pointer;
}

.ff-pick .ff-svg { width: 100%; height: 100%; }

.ff-pick:hover { border-color: #24408c; }
.ff-pick:active { transform: scale(0.97); }
.ff-pick:focus-visible { outline: calc(var(--gu) * 0.5) solid #24408c; outline-offset: calc(var(--gu) * 0.2); }

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

@media (prefers-reduced-motion: reduce) {
  .ff-pick { transition: none; }
  .ff-pick:active { transform: none; }
}