/* Neuriosity — Face & Name playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.is-hidden { display: none !important; }

/* The status line only earns its space when it has something to say. */
.neu-status:empty { display: none; }

.fn-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;
}

/* Two layouts, one board. While studying, the face sits above its name and
   gets the full width. In the quiz the names move to the right of the face —
   the frame is 4:3, so side by side is what leaves the portrait enough height
   to be worth looking at. Stacked, it collapsed to a thumbnail. */
.fn-board {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--gu) * 2.4);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.fn-board.is-study {
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--gu) * 1.2);
}

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

.fn-face {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 5 / 6;
  max-width: 100%;
}

.fn-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--gu) * 1.6);
  flex: 0 0 calc(var(--gu) * 50);
  min-height: 0;
}

.fn-board.is-study .fn-side { flex: 0 0 auto; width: 100%; }
.fn-board.is-study .fn-picks { display: none; }
.fn-board:not(.is-study) .fn-name { display: none; }

.fn-svg {
  width: 100%;
  height: 100%;
}

/* Skin and hair are filled shapes; everything on top of them is a stroke, so
   one rule keeps every feature the same weight whatever the face. */
.fn-svg .fn-skin { stroke: rgba(6, 43, 99, 0.3); stroke-width: 1.4; }

.fn-svg .fn-line {
  fill: none;
  stroke: #3a2a1c;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Eyes are filled, not outlined — an unfilled circle reads as a ring, and
   behind a pair of glasses two rings inside two rings is just noise. */
.fn-svg .fn-eyes { fill: #3a2a1c; stroke: none; }

/* Glasses sit on top of the face in their own lighter weight, so they read as
   something the person is wearing rather than the loudest thing about them —
   which matters when "the one with glasses" should not be the whole memory. */
.fn-svg .fn-glasses {
  fill: none;
  stroke: #46566b;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.fn-name {
  margin: 0;
  flex: 0 0 auto;
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 5.4);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.fn-name.is-study { color: #9a4a00; }

/* ---------- the four names ---------- */

.fn-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gu) * 1.4);
  flex: 0 0 auto;
  width: 100%;
}

/* An odd third name goes full width rather than leaving a hole beside it. */
.fn-pick:nth-child(3):last-child { grid-column: 1 / -1; }

.fn-pick {
  min-height: max(46px, calc(var(--gu) * 10));
  padding: calc(var(--gu) * 0.8);
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 3.2);
  font-weight: 800;
  background: #fff;
  border: calc(var(--gu) * 0.32) solid rgba(6, 43, 99, 0.16);
  border-radius: calc(var(--gu) * 2.2);
  cursor: pointer;
  transition: transform 110ms ease, border-color 110ms ease;
}

.fn-pick:hover { border-color: rgba(154, 74, 0, 0.6); }
.fn-pick:active { transform: scale(0.97); }

.fn-pick:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #9a4a00;
  outline-offset: calc(var(--gu) * 0.3);
}

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

/* After a miss the right name is marked, so the round still teaches the pair
   rather than just taking a life. */
.fn-pick.is-answer { border-color: var(--green, #0ea85a); border-style: dashed; }

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