/* ==========================================================================
   Best Start in Raid — stylesheet
   A committed dark treatment: the game's own UI lives in the dark, and every
   colour below is painted explicitly so the page holds on any host ground.
   ========================================================================== */

:root {
  /* ground & surfaces — cold iron, blued rather than neutral grey */
  --iron-900: #0e1016;
  --iron-800: #12141b;
  --iron-700: #1a1d27;
  --iron-600: #222633;
  --iron-500: #2c3140;
  --iron-400: #3a4052;

  /* ink — parchment-warm, never pure white */
  --ink:      #e9e4d8;
  --ink-dim:  #a7a293;
  --ink-faint:#6f6c62;

  /* accent — burnished gold */
  --gold:      #c9a24b;
  --gold-lit:  #e8c87a;
  --gold-deep: #8a6d2c;

  /* rarity, straight from the game's own colour language */
  --legendary: #e0a33c;
  --epic:      #9b6bd6;
  --rare:      #4a90d9;

  /* semantic */
  --good: #6fae6a;
  --warn: #d9a441;
  --bad:  #c9584f;

  --radius: 3px;
  --rail: 264px;
  --shell: 1280px;

  --f-display: "Grenze", "Iowan Old Style", Georgia, serif;
  --f-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-cond: "Barlow Semi Condensed", "Barlow", "Segoe UI", sans-serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* a class that sets display would otherwise out-specify the hidden attribute */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--iron-800);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* faint forge-glow behind the whole page, so the ground isn't flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 12% -8%, rgba(201,162,75,.10), transparent 62%),
    radial-gradient(700px 460px at 92% 4%, rgba(74,144,217,.07), transparent 60%);
  z-index: 0;
}

.shell { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; padding-inline: 20px; }

a { color: var(--gold-lit); text-decoration-color: rgba(201,162,75,.4); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:where(button, a, input, select, summary):focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- masthead */
.masthead { border-bottom: 1px solid var(--iron-600); background: linear-gradient(180deg, var(--iron-900), var(--iron-800)); }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding-block: 26px 20px; }

.wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 42px);
  letter-spacing: .012em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.wordmark em { font-style: normal; color: var(--gold); }

.tagline { margin: 0; color: var(--ink-dim); font-size: 15.5px; max-width: 56ch; }

.masthead__stats { margin-left: auto; display: flex; gap: 22px; font-family: var(--f-cond); }
.stat { text-align: right; }
.stat b { display: block; font-family: var(--f-body); font-size: 24px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* ------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--iron-600); background: var(--iron-900); scrollbar-width: thin; }
.tabs__inner { display: flex; gap: 2px; max-width: var(--shell); margin: 0 auto; padding-inline: 20px; width: 100%; }
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-cond); font-size: 15px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim);
  padding: 13px 17px; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* ------------------------------------------------------------------ notice */
.notice {
  display: flex; gap: 11px; align-items: flex-start;
  margin-block: 18px 0;
  padding: 11px 14px;
  border: 1px solid rgba(217,164,65,.32);
  border-left: 3px solid var(--warn);
  background: rgba(217,164,65,.07);
  border-radius: var(--radius);
  font-size: 15px; color: var(--ink-dim);
}
.notice b { color: var(--ink); font-weight: 600; }

.notice--info {
  display: block;
  border-color: var(--iron-500);
  border-left-color: var(--gold-deep);
  background: var(--iron-700);
}
.notice--info > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--f-cond);
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.notice--info > summary::-webkit-details-marker { display: none; }
.notice--info > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; color: var(--gold); transition: transform .15s; }
.notice--info[open] > summary::before { transform: rotate(90deg); }
.notice--info > summary:hover { color: var(--ink); }
.notice--info > div { margin-top: 11px; max-width: 68ch; }
.notice--info p { margin: 0 0 9px; }
.notice--info p:last-child { margin-bottom: 0; }
.notice--info .formula {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--gold-lit);
  background: var(--iron-900); border: 1px solid var(--iron-500);
  border-radius: 2px; padding: 9px 11px; display: block;
  overflow-x: auto; white-space: nowrap;
}

/* ------------------------------------------------------------------ layout */
.panel { padding-block: 24px 64px; }
.panel[hidden] { display: none !important; }

.finder { display: grid; grid-template-columns: var(--rail) 1fr; gap: 26px; align-items: start; margin-top: 20px; }

/* -------------------------------------------------------------------- rail */
.rail { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 16px; }
.rail__block { border: 1px solid var(--iron-600); background: var(--iron-700); border-radius: var(--radius); padding: 15px 15px 17px; }
.rail__title { font-family: var(--f-cond); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 11px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.field:last-of-type { margin-bottom: 0; }
.field label { font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

.rail__hint { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.rail__hint b { color: var(--ink-dim); font-weight: 500; }

select, input[type="text"], input[type="search"], input[type="email"], textarea {
  width: 100%;
  font-family: var(--f-body); font-size: 15.5px; font-weight: 500;
  color: var(--ink);
  background: var(--iron-900);
  border: 1px solid var(--iron-500);
  border-radius: var(--radius);
  padding: 8px 10px;
}
select:hover, input:hover, textarea:hover { border-color: var(--iron-400); }
select:disabled { color: var(--ink-faint); background: var(--iron-800); border-color: var(--iron-600); cursor: not-allowed; }
select:disabled:hover { border-color: var(--iron-600); }
textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
select option { background: var(--iron-800); color: var(--ink); }

.btn {
  appearance: none; cursor: pointer;
  font-family: var(--f-cond); font-size: 14px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 9px 15px; border-radius: var(--radius);
  border: 1px solid var(--iron-500);
  background: var(--iron-600); color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--gold-deep); color: var(--gold-lit); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: #1b1608; }
.btn--gold:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: #1b1608; }
.btn--wide { width: 100%; }
/* scoped, secondary action — reads as subordinate to the solid Clear all below */
.btn--quiet { background: transparent; border-color: var(--iron-500); color: var(--ink-dim); padding: 7px 13px; }
.btn--quiet:hover { background: var(--iron-600); border-color: var(--gold-deep); color: var(--gold-lit); }
.btn--quiet[disabled] { opacity: .45; }
.rail__actions { display: flex; justify-content: flex-end; margin-top: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.toggle-row { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--ink-dim); }
.toggle-row input { accent-color: var(--gold); width: 15px; height: 15px; }

/* ------------------------------------------------------------------ results */
.results__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 13px; }
.results__count { font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.results__count b { color: var(--gold); font-family: var(--f-body); font-size: 17px; font-variant-numeric: tabular-nums; }
.results__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.results__sort label { font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.results__sort select { width: auto; padding-block: 6px; }

.plates { display: flex; flex-direction: column; gap: 8px; }

/* one link = one plate. Border and fill are spent here and nowhere else. */
.plate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--iron-600);
  border-left: 3px solid var(--iron-500);
  background: var(--iron-700);
  border-radius: var(--radius);
  transition: border-color .15s, background .15s;
}
.plate:hover { background: var(--iron-600); border-left-color: var(--gold-deep); }
.plate--mine { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(201,162,75,.09), transparent 46%), var(--iron-700); }

.plate__main { min-width: 0; }
.plate__lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 11px; }
.plate__legendary { font-family: var(--f-display); font-size: 26px; font-weight: 700; color: var(--legendary); line-height: 1.15; }
.plate__mine { font-family: var(--f-cond); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1b1608; background: var(--gold); padding: 2px 7px; border-radius: 2px; }

/* ---------------------------------------------------------------- the team
   Every portrait is forced into the same box. The tile sets an explicit width
   and an aspect-ratio, and object-fit: cover crops whatever is dropped in to
   fill it — so uploads of any dimension render identically and no image is
   ever stretched. Champions without a file fall back to an initials tile of
   exactly the same size, keeping the row even.
   ------------------------------------------------------------------------ */
.team { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }

.champ { width: 74px; display: flex; flex-direction: column; gap: 5px; }

.champ__art {
  position: relative;
  width: 100%;
  aspect-ratio: 140 / 182;          /* the Raid portrait ratio */
  max-width: 100%;
  border: 2px solid var(--iron-400);
  border-radius: 3px;
  background: var(--iron-600);
  overflow: hidden;
}
/* initials sit underneath; an image that loads covers them completely */
.champ__art::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 20px; font-weight: 600;
  color: var(--ink-faint); letter-spacing: .03em;
}
.champ__art img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;                /* identical crop for any source size */
  object-position: center top;      /* faces sit high in Raid portraits */
  display: block;
  opacity: 0;
  transition: opacity .18s;
}
.champ__art img.is-loaded { opacity: 1; }

.champ__name {
  font-family: var(--f-cond); font-size: 12.5px; font-weight: 500;
  line-height: 1.25; color: var(--ink-dim);
  overflow-wrap: anywhere;
}

/* Rarity is carried by the frame, at full strength rather than a tint —
   gold for the legendary, purple for the epics, matching the game. */
.champ--legendary .champ__art {
  border-color: var(--legendary);
  box-shadow: 0 0 0 1px rgba(224,163,60,.25), 0 0 10px rgba(224,163,60,.18);
}
.champ--legendary .champ__name { color: var(--legendary); }

.champ--epic .champ__art {
  border-color: var(--epic);
  box-shadow: 0 0 0 1px rgba(155,107,214,.25), 0 0 10px rgba(155,107,214,.16);
}
.champ--epic .champ__name { color: #c0a3e8; }

.champ--lead { width: 86px; }
.champ--lead .champ__art {
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(224,163,60,.3), 0 0 14px rgba(224,163,60,.28);
}
.champ--lead .champ__name { font-weight: 600; }

/* a champion matched by the filters outranks its rarity colour */
.champ--hit .champ__art {
  border-color: var(--gold-lit);
  box-shadow: 0 0 0 3px rgba(201,162,75,.35), 0 0 14px rgba(232,200,122,.3);
}
.champ--hit .champ__name { color: var(--gold-lit); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip {
  font-family: var(--f-cond); font-size: 15px; font-weight: 600;
  padding: 3px 10px; border-radius: 2px;
  border: 1px solid var(--iron-500);
  background: var(--iron-600); color: var(--ink-dim);
  white-space: nowrap;
}
.chip--legendary { color: var(--legendary); border-color: rgba(224,163,60,.4); }
.chip--epic { color: var(--epic); border-color: rgba(155,107,214,.4); }
.chip--rare { color: var(--rare); border-color: rgba(74,144,217,.4); }
.chip--hit { background: rgba(201,162,75,.18); border-color: var(--gold); color: var(--gold-lit); }

.plate__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; font-family: var(--f-cond); font-size: 13.5px; font-weight: 500; color: var(--ink-dim); }
.plate__meta span { display: inline-flex; gap: 5px; }
.plate__meta b { color: var(--ink); font-weight: 700; }

.plate__side { display: flex; align-items: center; gap: 14px; }
.plate__score { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.medallion__tag {
  font-family: var(--f-cond); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}

/* rating medallion — the one lifted element on the plate */
.medallion { width: 54px; height: 54px; flex: 0 0 54px; position: relative; display: grid; place-items: center; }
.medallion svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.medallion__track { fill: none; stroke: var(--iron-500); stroke-width: 3; }
.medallion__arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .3s; }
.medallion__num { position: relative; font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.medallion__num small { font-size: 10px; color: var(--ink-faint); font-weight: 400; }
.medallion--none .medallion__num { color: var(--ink-faint); }

.plate__go {
  font-family: var(--f-cond); font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--radius);
  border: 1px solid var(--iron-500); background: var(--iron-600);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.plate__go:hover { border-color: var(--gold); background: var(--gold); color: #1b1608; }

/* "Use link" and "Copy" stack, so the plate stays as narrow as it was and the
   two read as one choice: open it now, or take the address away with you.
   Copy is deliberately quieter — using the link is still the main path. */
.plate__actions { display: flex; flex-direction: column; gap: 5px; }
.plate__actions .plate__go { text-align: center; }
.plate__actions .plate__copy {
  font-family: var(--f-cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--radius);
  border: 1px solid var(--iron-500); background: transparent;
  color: var(--ink-faint); cursor: pointer; white-space: nowrap;
}
.plate__actions .plate__copy:hover { color: var(--gold-lit); border-color: var(--gold-deep); }
.plate__actions .plate__copy[data-done="1"] { color: var(--good); border-color: var(--good); }

.empty { padding: 48px 20px; text-align: center; color: var(--ink-faint); border: 1px dashed var(--iron-500); border-radius: var(--radius); }
.empty b { display: block; color: var(--ink-dim); font-size: 16px; margin-bottom: 5px; }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--iron-600); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
thead th {
  position: sticky; top: 0;
  font-family: var(--f-cond); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 10px 13px;
  background: var(--iron-900); border-bottom: 1px solid var(--iron-600);
  white-space: nowrap;
}
tbody td { padding: 10px 13px; border-bottom: 1px solid var(--iron-600); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--iron-600); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.rank { font-family: var(--f-display); font-size: 20px; font-weight: 600; color: var(--gold); width: 1%; }
.champ-name { font-weight: 600; }

.score-bar { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.score-bar__track { flex: 1; height: 5px; background: var(--iron-500); border-radius: 3px; overflow: hidden; }
.score-bar__fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 3px; }
.score-bar__val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); min-width: 32px; text-align: right; }

/* ------------------------------------------------------- rankings table */
.rank-champ { display: flex; align-items: center; gap: 11px; min-width: 190px; }
.rank-champ__art {
  position: relative; flex: 0 0 38px; width: 38px;
  aspect-ratio: 140 / 182;
  border: 2px solid var(--legendary); border-radius: 3px;
  background: var(--iron-600); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(224,163,60,.25);
}
.rank-champ__art::after {
  content: attr(data-initials);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 13px; color: var(--ink-faint);
}
.rank-champ__art img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}

/* Fixed geometry, so the same value draws the same length in every column —
   a percentage of the cell would make 5.0 look longer in a wider column. */
.score-cell { width: 116px; }
.mini-bar { display: flex; align-items: center; gap: 9px; }
.mini-bar__track {
  flex: 0 0 56px; height: 6px;
  background: var(--iron-500); border-radius: 3px; overflow: hidden;
}
.mini-bar__fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(155,107,214,.55), var(--epic));
  border-radius: 3px;
}
.score-cell__val {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--ink); min-width: 28px; text-align: right;
}

.code-cell { display: flex; align-items: center; gap: 9px; }
.code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 14.5px; font-weight: 600; letter-spacing: .04em;
  background: var(--iron-900); border: 1px solid var(--iron-500);
  padding: 3px 9px; border-radius: 2px; color: var(--gold-lit);
}
.copy {
  appearance: none; cursor: pointer; border: 1px solid var(--iron-500);
  background: transparent; color: var(--ink-faint);
  font-family: var(--f-cond); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
}
.copy:hover { color: var(--gold-lit); border-color: var(--gold-deep); }
.copy[data-done="1"] { color: var(--good); border-color: var(--good); }
tr.is-expired td { color: var(--ink-faint); }
tr.is-expired .code { color: var(--ink-faint); text-decoration: line-through; }

/* ------------------------------------------------------------------ prose */
.prose { max-width: 66ch; }
.prose h2, .section-head { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--ink); margin: 0 0 6px; text-wrap: balance; }
.section-sub { color: var(--ink-dim); margin: 0 0 20px; max-width: 62ch; }
.prose p { color: var(--ink-dim); }
.prose ol { padding-left: 20px; color: var(--ink-dim); }
.prose ol li { margin-bottom: 8px; padding-left: 3px; }
.prose ol li::marker { color: var(--gold); font-weight: 600; }
.prose strong { color: var(--ink); font-weight: 600; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; max-width: 900px; }
.guide {
  border: 1px solid var(--iron-600); background: var(--iron-700);
  border-radius: var(--radius); padding: 20px 22px 22px;
}
.guide__kicker { font-family: var(--f-cond); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 5px; }
.guide h3 { font-family: var(--f-display); font-size: 21px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.guide__note { font-size: 13px; color: var(--ink-faint); margin: 0 0 14px; }

/* numbered steps with the numeral as a struck disc, so the sequence reads
   as a procedure rather than a bulleted list */
.steps { list-style: none; counter-reset: step; margin: 16px 0 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 14px 42px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-size: 14px; font-weight: 700;
  color: var(--gold-lit);
  background: var(--iron-600);
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
}
/* the connecting rule between discs */
.steps li:not(:last-child)::after {
  content: "";
  position: absolute; left: 13px; top: 28px; bottom: 4px;
  width: 1px; background: var(--iron-500);
}

.guide__warn {
  display: flex; flex-direction: column; gap: 3px;
  margin: 18px 0 0; padding: 11px 13px;
  border: 1px solid rgba(217,164,65,.34);
  border-left: 3px solid var(--warn);
  background: rgba(217,164,65,.08);
  border-radius: var(--radius);
  font-size: 14.5px; color: var(--ink-dim);
}
.guide__warn b {
  font-family: var(--f-cond); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--warn);
}

.guide__link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid var(--iron-600);
}
.guide__link-label {
  font-family: var(--f-cond); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  width: 100%;
}
.guide__link a { font-size: 15px; overflow-wrap: anywhere; }

.combo-rating { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; margin-top: 12px; }
.combo-rating dt { font-family: var(--f-cond); font-size: 13px; color: var(--ink-dim); }
.combo-rating dd { margin: 0; }

/* ------------------------------------------------------------------- form */
.request-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.form-card { border: 1px solid var(--iron-600); background: var(--iron-700); border-radius: var(--radius); padding: 22px 24px 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.form-hint { font-size: 13px; color: var(--ink-faint); margin: 0; }
.aside { border-left: 2px solid var(--iron-600); padding-left: 20px; }
.aside h3 { font-family: var(--f-display); font-size: 19px; margin: 0 0 8px; color: var(--ink); }
.aside p, .aside li { color: var(--ink-dim); font-size: 14px; }
.aside ul { padding-left: 18px; margin: 0; }
.aside li { margin-bottom: 7px; }
.aside li::marker { color: var(--gold-deep); }

.req { color: var(--bad); font-weight: 700; }
.optional { color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* an unfilled required field is marked and stays marked until it's fixed */
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--bad);
  box-shadow: 0 0 0 2px rgba(201,88,79,.18);
}
.field--error label { color: var(--bad); }

.form-status { margin: 0; font-size: 13.5px; }
.form-status[data-kind="ok"] { color: var(--good); }
.form-status[data-kind="err"] { color: var(--bad); }

/* ------------------------------------------------------- pricing & payment */
/* The three prices sit above the form rather than inside it: someone deciding
   whether to ask at all shouldn't have to fill anything in to find the cost. */
.pricebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--iron-600);
  border: 1px solid var(--iron-600);
  border-radius: var(--radius);
  margin-bottom: 26px;
  overflow: hidden;
}
.pricebar__item { background: var(--iron-700); padding: 15px 18px; display: grid; gap: 2px; }
.pricebar__item b {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: 12.5px; color: var(--ink-faint); font-weight: 600;
}
.pricebar__item span:last-child { font-size: 13px; color: var(--ink-dim); line-height: 1.4; }
.pricebar__amt {
  font-family: var(--f-display); font-size: 28px; font-weight: 700;
  color: var(--gold-lit); line-height: 1.05;
}
.pricebar__amt--free { color: var(--good); }

/* Discord sign-in */
.signin {
  border: 1px solid var(--iron-500);
  background: var(--iron-600);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.signin__prompt { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signin__copy { flex: 1 1 260px; }
.signin__copy b { display: block; font-size: 15px; margin-bottom: 2px; }
.signin__copy p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.btn--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn--discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }

.signin__who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.signin__art {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--iron-500); position: relative; overflow: hidden;
}
.signin__art::after {
  content: attr(data-initials); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-cond); font-weight: 600; font-size: 15px; color: var(--ink-dim);
}
.signin__art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.signin__id { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.signin__id b { display: block; font-size: 15px; }
.signin__id span { font-size: 13px; color: var(--ink-faint); }
.signin__badge {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: 11.5px; font-weight: 600; color: var(--good);
  border: 1px solid rgba(111,174,106,.45); border-radius: 999px; padding: 2px 9px;
}

/* the join-the-server gate, between sign-in and the form it blocks */
.gate {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid var(--iron-500); border-left: 3px solid var(--gold);
  background: var(--iron-600); border-radius: 0 var(--radius) var(--radius) 0;
}
.gate[data-state="checking"] { border-left-color: var(--gold-deep); }
.gate[data-state="error"]    { border-left-color: var(--warn); }
.gate__copy { flex: 1 1 240px; }
.gate__copy b { display: block; font-size: 15px; margin-bottom: 2px; }
.gate__copy p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.gate__acts { display: flex; gap: 9px; flex-wrap: wrap; }
.gate__acts .btn { text-decoration: none; }
.gate__line { margin: 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.45; }
.gate__line b { color: var(--ink); }

/* the two optional extras and the payment picker share one block treatment */
.block {
  border: 1px solid var(--iron-600); border-radius: var(--radius);
  padding: 4px 16px 16px; margin: 20px 0 0; min-width: 0;
}
.block--error { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(201,88,79,.15); }
.block legend {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; font-weight: 600; color: var(--gold); padding: 0 8px;
}
/* what the ledger decided, in a line — the price is worked out, not offered */
.ledger {
  margin: 4px 0 10px; padding: 9px 12px 9px 13px;
  border-left: 3px solid var(--iron-400);
  background: var(--iron-600); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px; color: var(--ink-dim); line-height: 1.45;
}
.ledger[data-state="ready"] { border-left-color: var(--good); color: var(--ink); }
.ledger[data-state="anon"], .ledger[data-state="loading"] { border-left-color: var(--gold-deep); }
.ledger[data-state="off"], .ledger[data-state="error"] { border-left-color: var(--warn); }

.opt { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.opt input { accent-color: var(--gold); width: 16px; height: 16px; margin-top: 3px; flex: none; }
.opt b { display: block; font-size: 15px; font-weight: 600; }
.opt em { display: block; font-style: normal; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.opt__price { color: var(--gold-lit); }
.opt--confirm { border-top: 1px solid var(--iron-600); margin-top: 14px; padding-top: 14px; }

.tally {
  border-top: 1px solid var(--iron-600); margin-top: 12px; padding-top: 12px;
}
.tally__lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.tally__lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-dim); }
.tally__lines b { color: var(--ink); font-weight: 600; }
.tally__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0;
  border-top: 1px solid var(--iron-600); padding-top: 9px;
}
.tally__total span {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: 12.5px; color: var(--ink-faint); font-weight: 600;
}
.tally__total b { font-family: var(--f-display); font-size: 25px; color: var(--gold-lit); }
.tally[data-free="1"] .tally__total b { color: var(--good); }

.pay-picker { display: flex; gap: 9px; flex-wrap: wrap; padding: 6px 0 2px; }
.pay-opt {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--iron-500); border-radius: var(--radius);
  padding: 8px 14px; font-size: 14.5px; font-weight: 500;
}
.pay-opt:hover { border-color: var(--gold-deep); }
.pay-opt input { accent-color: var(--gold); width: 15px; height: 15px; }
.pay-opt:has(input:checked) { border-color: var(--gold); background: rgba(201,162,75,.08); color: var(--gold-lit); }
.pay-empty { font-size: 13.5px; color: var(--ink-dim); margin: 6px 0 0; }

.pay-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--iron-600);
}
/* A how-to-pay picture might be a square QR or a tall phone screenshot, so the
   frame takes whichever shape fits inside one fixed box rather than stretching
   the card to the height of the image. */
.pay-card__art {
  width: 148px; border: 1px solid var(--iron-500); border-radius: var(--radius);
  background: var(--iron-800); overflow: hidden; line-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.pay-card__art img {
  max-width: 100%; max-height: 210px; width: auto; height: auto; display: block;
}
.pay-card__body { display: grid; gap: 9px; align-content: start; }
.pay-card__send { margin: 0; font-size: 15px; color: var(--ink-dim); }
.pay-card__send b { font-family: var(--f-display); font-size: 22px; color: var(--gold-lit); }
.pay-card__handle { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pay-card__handle code {
  font-size: 15px; background: var(--iron-800); border: 1px solid var(--iron-500);
  border-radius: var(--radius); padding: 4px 10px; color: var(--ink);
}
.pay-card__body .btn { justify-self: start; }
.pay-card__note { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.pay-card__note code { font-size: 12.5px; color: var(--gold-lit); }
.pay-card__acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* the thumbnail doubles as the button that opens the full-size code */
.pay-card__art--btn {
  appearance: none; padding: 0; cursor: pointer; position: relative; display: block;
  width: 148px; flex: none;
}
.pay-card__art--btn span {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--f-cond); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: rgba(14,16,22,.82);
  padding: 4px 0; line-height: 1.3;
  opacity: 0; transition: opacity .15s;
}
.pay-card__art--btn:hover { border-color: var(--gold); }
.pay-card__art--btn:hover span, .pay-card__art--btn:focus-visible span { opacity: 1; }

/* --------------------------------------------------------------- pay dialog */
body.is-modal { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal__scrim { position: absolute; inset: 0; background: rgba(8, 9, 13, .78); backdrop-filter: blur(3px); }
.modal__box {
  position: relative; z-index: 1;
  width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--iron-700); border: 1px solid var(--iron-500);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  text-align: center;
  animation: modal-in .16s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }

.modal__x {
  position: absolute; top: 8px; right: 10px;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 26px; line-height: 1; padding: 4px 8px;
}
.modal__x:hover { color: var(--ink); }

.modal__kicker {
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 2px;
}
.modal__box h3 {
  font-family: var(--f-display); font-size: 29px; font-weight: 700;
  margin: 0 0 14px; color: var(--ink);
}
.modal__art {
  width: 260px; max-width: 100%; margin: 0 auto 14px;
  border: 1px solid var(--iron-500); border-radius: var(--radius);
  background: var(--iron-800); overflow: hidden; line-height: 0;
}
.modal__art img { width: 100%; height: auto; display: block; }

.modal__handle { display: flex; justify-content: center; align-items: center; gap: 9px; margin-bottom: 11px; }
.modal__handle code {
  font-size: 16px; background: var(--iron-900); border: 1px solid var(--iron-500);
  border-radius: var(--radius); padding: 5px 11px; color: var(--ink);
}
.modal__note { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.45; }
.modal__note code { color: var(--gold-lit); }
.modal__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--iron-600); padding-block: 22px 40px; color: var(--ink-faint); font-size: 13px; }
.footer p { margin: 0 0 5px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .finder { grid-template-columns: 1fr; }
  .rail { position: static; }
  .rail__block--filters .field { margin-bottom: 10px; }
  .request-grid { grid-template-columns: 1fr; }
  .aside { border-left: 0; border-top: 2px solid var(--iron-600); padding-left: 0; padding-top: 18px; }
}
@media (max-width: 620px) {
  .masthead__stats { margin-left: 0; width: 100%; justify-content: flex-start; }
  .plate { grid-template-columns: 1fr; }
  .plate__side { justify-content: space-between; margin-top: 4px; }
  /* on a phone the plate is one column, so the buttons have room to sit
     side by side rather than stacking into a tall thin pair */
  .plate__actions { flex-direction: row; align-items: center; gap: 8px; }
  .plate__actions .plate__copy { padding: 9px 14px; font-size: 12.5px; }
  .form-row { grid-template-columns: 1fr; }
  .pricebar { grid-template-columns: 1fr; }
  .pay-card { grid-template-columns: 1fr; }
  .pay-card__art { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}