/* First-run briefing and the in-game field coach.
 *
 * A new player used to be dropped straight into round one, facing a locked
 * door, in a fort rendered at 55% exposure, and shown a zombie before they had
 * turned around once. These two pieces are what stand between "deploy" and
 * that: a calibration and capture step before, and one instruction at a time
 * during.
 */

/* ---------------------------------------------------------------- briefing */
#firstrun { z-index: 80; }              /* above the title screen, under var(--tone-ffaadd) */
#firstrun.active { display: flex; }
.fr-panel { width: min(680px, 94vw); text-align: left; }
.fr-panel h2 { text-align: left; }
.fr-step { margin-top: 22px; }
.fr-step:first-of-type { margin-top: 16px; }
.fr-step h3 {
  color: var(--amber);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .26em; text-transform: uppercase;
  margin-bottom: 8px;
}
.fr-lead {
  color: var(--cream-900);
  font: 400 14px/1.6 var(--font-ui);
  overflow-wrap: anywhere;
}
.fr-lead b { color: var(--paper-bright); }
.fr-note {
  margin-top: 6px;
  color: var(--paper-mute);
  font: 400 12px/1.5 var(--font-ui); font-style: normal; letter-spacing: .04em;
}

/* The calibration wedge. Eight patches from near-black upward, each carrying a
   numeral only slightly lighter than its own background — so the numeral is
   the thing that becomes visible as exposure rises, which is a far more
   sensitive test than a plain grey ramp. */
.fr-wedge {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  margin: 12px 0 4px;
  border: 1px solid rgba(190,170,135,.28);
  /* The wedge is DOM, so the renderer's tone mapping cannot reach it. Matching
     its apparent exposure by hand is what makes the calibration honest about
     what the 3D scene will actually look like at this setting. */
  filter: brightness(var(--fr-exposure, 1));
}
.fr-wedge span {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.15;
  font: 800 clamp(14px, 3.4vw, 22px)/1 var(--font-display);
}
#firstrun .slider-row { margin-top: 14px; }
#firstrun .slider-row input { width: 100%; max-width: none; }
#firstrun .cc-check { color: var(--cream-900); font: 400 14px/1.5 var(--font-ui); }
#fr-continue { min-width: min(320px, 100%); }
@media (max-height: 620px) {
  .fr-step { margin-top: 14px; }
  .fr-wedge span { aspect-ratio: 1 / .7; }
  .fr-lead { font-size: 13px; line-height: 1.5; }
}

/* Field coach overlay removed — training never mounts. */

/* ------------------------------------------------- quick-match host choice */
#quickmatch { z-index: 80; }
#quickmatch.active { display: flex; }
/* Kicker, subtitle, buttons and note all render centred; the h2 was the one
   left-aligned line in the dialog. Centre the panel so the heading matches. */
.qm-panel { width: min(460px, 94vw); text-align: center; }
.qm-panel h2 { text-align: center; }
.qm-panel .menu-col { width: 100%; margin-top: 18px; gap: 8px; }
.qm-panel .mbtn { width: 100%; min-width: 0; }
.qm-panel .fr-note { margin-top: 14px; }