/*
  09-gates.css — v41.12

  The three gates (campaign -> password -> crew profile) were the last v13-era
  screens in the app. They still used hardcoded hexes from before the v37
  "Brass & Chart" pass and a Georgia serif for the choice buttons — the only
  serif left anywhere — which is why they read as a different product to the
  app behind them.

  Everything here is derived from 00-tokens.css. No new colours, no new
  typeface. Unlayered, so it wins over the legacy rules in styles.css without
  !important, exactly as 00-tokens.css does.

  The one decorative element is the brass hazard stripe along the panel's top
  edge — the same repeating gradient already framing chart and portrait images
  throughout the app. It is the app's own motif rather than an imported one,
  and it is the only ornament on these screens.
*/

/* --- backdrop ----------------------------------------------------------- */
.player-gate {
  padding: var(--s4);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232, 192, 105, .18), transparent 60%),
    rgba(23, 18, 16, .86);
  backdrop-filter: blur(10px);
}

/* --- panel -------------------------------------------------------------- */
.player-panel {
  position: relative;
  width: min(100%, 440px);
  max-height: min(92vh, 760px);
  overflow: auto;
  background: linear-gradient(180deg, var(--chart), var(--chart-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  box-shadow: var(--e3);
  color: var(--ink);
  padding: var(--s6) var(--s5) var(--s5);
}
/* The signature: the app's own hazard stripe, used once, at the top edge. */
.player-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: repeating-linear-gradient(135deg, #2a1b10 0 10px, #8a6330 10px 18px, #d4b66b 18px 26px, #5b3d1d 26px 34px);
}

/* --- heading ------------------------------------------------------------ */
/* An eyebrow naming the campaign, then the question. The eyebrow carries the
   context so the title can be short, and the pair gives the type scale
   something to do without a second typeface. */
.gate-eyebrow {
  font-family: var(--font-display);
  font-size: var(--t0);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s1);
}
.player-panel h2 {
  font-family: var(--font-display);
  font-size: var(--t4);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.player-panel .row-sub,
.gate-help {
  color: var(--ink-soft);
  font-size: var(--t1);
  line-height: 1.45;
  margin: var(--s2) 0 var(--s5);
}

/* The crest and the mid-panel dividers were doing decorative work the eyebrow
   now does with information. Removed rather than restyled. */
.gate-crest { display: block; margin: 0; }
.gate-crest svg { display: none; }
.gate-divider { display: none; }

/* --- campaign rows ------------------------------------------------------ */
/* Campaigns are full-width rows, not a two-up grid: their names are phrases
   ("The Black Tide"), which wrap badly in half-width cells, and a row can
   carry a chevron that says the choice leads somewhere. */
.campaign-list { display: grid; gap: var(--s2); }
.campaign-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t2);
  font-weight: 650;
  color: var(--ink);
  background: linear-gradient(180deg, #fbf5e2, var(--chart-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  box-shadow: var(--e1);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.campaign-choice .chev {
  color: var(--brass);
  font-size: var(--t2);
  line-height: 1;
  transition: transform .12s ease;
}
.campaign-choice:hover { border-color: var(--brass); box-shadow: var(--e2); }
.campaign-choice:hover .chev { transform: translateX(2px); }
.campaign-choice:active { transform: translateY(1px); }
.campaign-choice:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 2px; }
.campaign-choice[aria-current="true"] { border-color: var(--brass); }

/* --- crew grid ---------------------------------------------------------- */
/* Profiles stay two-up: first names are short, and a grid is faster to scan
   for "which one am I" than a list. */
.player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.player-choice {
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--s3) var(--s2);
  font-family: var(--font-display);
  font-size: var(--t2);
  font-weight: 650;
  color: var(--ink);
  background: linear-gradient(180deg, #fbf5e2, var(--chart-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  box-shadow: var(--e1);
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.player-choice:hover { border-color: var(--brass); box-shadow: var(--e2); }
.player-choice:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 2px; }
.player-choice.selected { border-color: var(--lagoon); background: linear-gradient(180deg, #e8f4f2, #cfe6e3); }
.player-choice-char { font-size: var(--t0); font-weight: 500; color: var(--muted); opacity: 1; }

/* --- password form ------------------------------------------------------ */
.access-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s4);
  font-family: var(--font-display);
  font-size: var(--t2);
  color: var(--ink);
  background: var(--chart-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
}
.access-input:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 1px; }
.access-submit { width: 100%; min-height: var(--tap); margin-top: var(--s2); }
.access-error { color: var(--danger); font-size: var(--t1); margin-top: var(--s2); }

/* --- footnote ----------------------------------------------------------- */
/* One quiet line, no icon and no tinted box — it is a footnote, not a notice. */
.player-help {
  display: block;
  margin-top: var(--s4);
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-size: var(--t0);
  line-height: 1.45;
}
.player-help svg { display: none; }

/* The way back to the picker is a change of mind, not an action of equal
   weight to the password — a quiet text link under the rule. */
.access-gate .dm-lock-cancel {
  display: block;
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s2) 0;
  min-height: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--lagoon-deep);
  font-family: var(--font-display);
  font-size: var(--t1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.access-gate .dm-lock-cancel:hover { color: var(--lagoon); }

/* --- DM sign-in --------------------------------------------------------- */
.player-gate-dm { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.player-gate-dm-row { display: grid; gap: var(--s2); }

@media (max-width: 360px) {
  .player-panel { padding: var(--s5) var(--s4) var(--s4); border-radius: var(--r-m); }
  .player-panel::before { border-radius: var(--r-m) var(--r-m) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-choice, .campaign-choice .chev, .player-choice { transition: none; }
}