/* swordland.css — Swordland Showdown page only (swordland-showdown/).
   Loaded after styles.css + events.css (the phase rows and checklist
   live there — they're shared with Vikings). The duel page's bespoke
   tables: the buildings, the two scoreboards, the scoring matrix, the
   three games with their roles, and the enemy tag. */

/* The enemy accent — blue appears only on the swordland page.
   The tag keeps the hedera leaf; only the colour marks the side. */
html[data-page="swordland"] .tag-them { color: var(--enemy); }
html[data-page="swordland"] .tag-them::before { content: "❧ "; }

/* ─── Swordland — the buildings table ──────────────────── */
.btable { margin: var(--space-m) 0; border-top: 1px solid rgba(157, 149, 127, 0.25); }
.bt-row {
  display: grid;
  grid-template-columns: minmax(9rem, 12.5rem) 10.5rem 1fr;
  gap: 0.7rem 1.1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(157, 149, 127, 0.14);
  font-size: var(--step--1);
}
.bt-name { font-family: var(--body); font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.bt-pts { font-family: var(--body); font-weight: 700; letter-spacing: 0.05em; color: var(--amber); }
.bt-note { color: var(--ink-dim); }
@media (max-width: 640px) {
  .bt-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .bt-pts { color: var(--amber-dim); }
}

/* ─── Swordland — the scoreboards ──────────────────────── */
/* Two ruled rows, one per scoreboard: the alliance's bracket
   and your personal tier. No cards, no tags — a scoreboard
   reads as rows, so it's rows. */
.sboard { margin: var(--space-m) 0; border-top: 1px solid rgba(157, 149, 127, 0.25); }
.sb-row {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) 1fr;
  gap: 0.7rem 1.2rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(157, 149, 127, 0.14);
}
.sb-tag {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.sb-row:nth-child(2) .sb-tag { color: var(--ink); }
.sb-body { color: var(--ink-dim); font-size: var(--step--1); }
.sb-body strong, .sb-body b { color: var(--ink); }
.sboard-note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-dim);
  font-style: italic;
}
.sboard-note b { color: var(--ink); }
@media (max-width: 640px) {
  .sb-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ─── Swordland — the scoring matrix ───────────────────── */
/* The four point sources as a ruled grid: source · alliance
   points · personal points · what it is. The columns are the
   point of the table — which scoreboard does this feed? */
.matrix { margin: var(--space-m) 0; border-top: 1px solid rgba(157, 149, 127, 0.25); }
.mx-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) 5rem 8.5rem 1fr;
  gap: 0.7rem 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(157, 149, 127, 0.14);
  font-size: var(--step--1);
}
.mx-head {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: rgba(157, 149, 127, 0.28);
}
.mx-head .mx-name, .mx-head .mx-ally, .mx-head .mx-me, .mx-head .mx-note { color: inherit; }
.mx-name { font-family: var(--body); font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.mx-ally { color: var(--amber); }
.mx-ally.mx-no { color: var(--ink-muted); }
.mx-me { color: var(--ink); }
.mx-note { color: var(--ink-dim); }
@media (max-width: 700px) {
  .mx-head { display: none; }
  .mx-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ─── Swordland — the three games ──────────────────────── */
/* The matchup panels: three ruled columns on a wide screen,
   stacked panels on a narrow one. The even game carries the
   role lanes inside it — the roles only exist in that game. */
.games { display: grid; gap: var(--space-l); margin: var(--space-l) 0; }
.game {
  padding-top: var(--space-m);
  border-top: 1px solid var(--signal-line);
  min-width: 0;
}
.game h3 {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.game .facts { margin-top: var(--space-s); }
.roles { margin-top: var(--space-s); border-top: 1px solid rgba(157, 149, 127, 0.18); }
.role { padding: 0.65rem 0; border-bottom: 1px solid rgba(157, 149, 127, 0.14); }
.role h4 {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: var(--step-0);
  margin-bottom: 0.25rem;
}
.role > p { color: var(--ink-dim); font-size: var(--step--1); }
.role details { margin-top: var(--space-s); }
.role .d-body { padding: 0.2rem 0 var(--space-s); }
/* The matchday blocks sit full-width with longer paragraphs —
   roomier than the compact matchup role cards. */
.roles-wide .role { padding: 1rem 0; }
.roles-wide .role h4 { margin-bottom: 0.45rem; }
.game .note { margin-top: var(--space-s); }
@media (min-width: 900px) {
  .games { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-l) var(--space-m); align-items: start; }
}

#swcalc input[type="range"] { min-height: 44px; }