/* VØID DOMINION · design system · rtfm.codes */
:root {
  --bg: #0b0612;
  --bg-raise: #150d22;
  --bg-inset: #070409;
  --purple: #7b2fbf;
  --purple-hi: #b57bff;
  --purple-glow: rgba(150, 80, 255, 0.35);
  --line: rgba(181, 123, 255, 0.20);
  --line-strong: rgba(181, 123, 255, 0.45);
  --gold: #c9a15a;
  --gold-hi: #eed9a6;
  --gold-line: rgba(201, 161, 90, 0.35);
  --silver: #c9c4d4;
  /* the game's own rarity colours: SR is blue, SSR purple, UR gold. Only the
     blue is new — the other two are the portal's existing accents, which is
     why gear quality can be coloured without inventing a second palette. */
  --rar-sr: #6fa8ff;
  --ink: #eae5f2;
  --ink-dim: #a79fb8;
  --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --pad: clamp(16px, 4.5vw, 28px);
  --measure: 46rem;
  /* Every tracked label on the site is written `calc(0.06em * var(--track))`
     rather than `0.06em`, so that one line below can switch letter-spacing off
     for a script that must not have it. */
  --track: 1;
}

/* Thai. Two changes, and neither of them is decoration.

   Letter-spacing goes to zero. Thai vowels and tone marks are stacked on the
   consonant they belong to rather than written beside it, so spacing the
   letters apart tears a syllable into pieces: the tracking that makes a Latin
   label look deliberate makes a Thai label look broken.

   Lines get more room, for the same reason — those marks sit above and below
   the line, and Thai set at the Latin line-height collides with itself between
   rows. Headings keep a tighter figure so a two-line title still reads as one
   block. */
html[lang="th"] {
  --track: 0;
  --font-display: 'Noto Serif Thai', 'Cinzel', Georgia, serif;
}
html[lang="th"] body { line-height: 1.9; }
html[lang="th"] .page-title,
html[lang="th"] .card-label,
html[lang="th"] .acc-name,
html[lang="th"] table.vt th { line-height: 1.45; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none; transition: none; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* violet nebula glow at top */
.sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(78vh, 700px);
  background:
    radial-gradient(ellipse 85% 55% at 50% -6%, rgba(123, 47, 191, 0.30), transparent 65%),
    radial-gradient(ellipse 45% 30% at 50% 3%, rgba(181, 123, 255, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.page { position: relative; z-index: 1; }

/* ── language bar ── */
.langbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 6, 18, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.langbar-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px var(--pad);
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin: 0 auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.langbar-inner::-webkit-scrollbar { display: none; }
.lang-btn {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: calc(0.04em * var(--track));
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.lang-btn:hover { color: var(--purple-hi); }
.lang-btn[aria-pressed="true"] {
  color: var(--purple-hi);
  border-color: var(--line-strong);
  background: rgba(123, 47, 191, 0.14);
}
@media (min-width: 700px) {
  .langbar-inner { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
.lang-hint {
  display: none;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--purple-hi);
  cursor: pointer;
  filter: drop-shadow(0 0 6px var(--purple-glow));
  transition: opacity 0.3s;
}
.lang-hint svg { animation: hintNudge 1.6s ease-in-out infinite; }
.lang-hint.gone { opacity: 0; pointer-events: none; }
@keyframes hintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (max-width: 699.98px) {
  .lang-hint { display: flex; }
  .langbar-inner {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent);
  }
}

/* ── header / hero ── */
.hero {
  text-align: center;
  padding: clamp(28px, 7vw, 56px) var(--pad) clamp(24px, 6vw, 48px);
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin: 0 auto;
}
.hero-emblem {
  width: clamp(150px, 40vw, 220px);
  height: auto;
  filter: drop-shadow(0 6px 30px var(--purple-glow));
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 8.5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  margin-top: 10px;
  background: linear-gradient(178deg, #e8dff5 8%, var(--silver) 38%, var(--purple-hi) 72%, #5e2a92 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px var(--purple-glow));
}
.hero-tagline {
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  color: var(--ink-dim);
  margin-top: 10px;
}
.server-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: calc(0.14em * var(--track));
  color: var(--gold-hi);
  text-transform: uppercase;
}
.server-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
}

/* gold-purple divider */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(20px, 5vw, 32px) auto 0;
  max-width: 340px;
}
.ornament::before, .ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.ornament::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.ornament .gem {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--purple-hi);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--purple-glow);
}

/* ── content shell ── */
.content {
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad) 32px;
}

/* ── home tiles ── */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(20px, 5vw, 32px);
}
/* the home page groups its tiles, so the spacing above comes from the heading */
.navgroup + .navgroup { margin-top: clamp(22px, 6vw, 34px); }
.navgroup .tiles { margin-top: 10px; }
.navgroup-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: calc(0.26em * var(--track));
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.navgroup-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}
@media (min-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raise), rgba(21, 13, 34, 0.4));
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}
a.tile:active { transform: scale(0.985); }
a.tile:hover { border-color: var(--line-strong); }
.tile-icon {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(150, 80, 255, 0.45));
}
.tile-txt { min-width: 0; }
.tile-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
  line-height: 1.3;
  text-wrap: balance;
}
.tile-desc {
  font-size: 0.875rem;
  color: var(--ink-dim);
  margin-top: 6px;
  line-height: 1.5;
}
.tile.gold .tile-title { color: var(--gold-hi); }
.tile.soon { opacity: 0.55; }
.tile.soon .tile-title { padding-right: 88px; }
.tile .soon-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: calc(0.12em * var(--track));
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  text-transform: uppercase;
}

/* ── guide page primitives ── */
.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 6.5vw, 2.4rem);
  letter-spacing: calc(0.07em * var(--track));
  text-transform: uppercase;
  line-height: 1.15;
  background: linear-gradient(178deg, #e8dff5 10%, var(--silver) 40%, var(--purple-hi) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.card {
  border: 1px solid var(--line);
  background: var(--bg-raise);
  padding: clamp(16px, 4.5vw, 24px);
  margin-bottom: 14px;
}
.card.gold { border-color: var(--gold-line); }
.card-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: calc(0.24em * var(--track));
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.card p { margin: 0 0 0.9em; }
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--gold-hi); font-weight: 600; }
.vlist { list-style: none; }
.vlist li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.5em;
}
.vlist li:last-child { margin-bottom: 0; }
.vlist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--purple-hi);
  transform: rotate(45deg);
}
.note {
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(201, 161, 90, 0.10), rgba(201, 161, 90, 0.03));
  padding: 14px 18px;
  margin: 0 0 1em;
  color: var(--gold-hi);
  font-weight: 500;
}
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1em; }
table.vt {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  min-width: 480px;
}
table.vt th, table.vt td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
table.vt th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
  background: rgba(123, 47, 191, 0.10);
  white-space: nowrap;
}
table.vt td.num { font-family: var(--font-mono); white-space: nowrap; }
table.vt.compact { min-width: 0; }

/* back link */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.875rem;
  margin: 14px 0 4px;
  transition: color 0.15s;
}
.backlink:hover { color: var(--purple-hi); }
.backlink::before { content: '‹'; font-size: 1.2em; color: var(--purple-hi); }

/* ── outro / footer ── */
.outro {
  text-align: center;
  padding: clamp(36px, 9vw, 64px) var(--pad);
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 80% 90% at 50% 115%, rgba(123, 47, 191, 0.16), transparent 65%);
}
.outro-cry {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 4.6vw, 1.8rem);
  letter-spacing: calc(0.12em * var(--track));
  text-transform: uppercase;
  background: linear-gradient(178deg, #e8dff5 15%, var(--purple-hi) 60%, #5e2a92 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px var(--purple-glow));
}
footer {
  text-align: center;
  padding: 18px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(181, 123, 255, 0.10);
  color: #6b6478;
  font-size: 0.72rem;
  letter-spacing: calc(0.12em * var(--track));
  text-transform: uppercase;
}
footer a { color: #8a8098; text-decoration: none; }

/* ── filter chips ── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.1em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chip[aria-pressed="true"] {
  color: var(--purple-hi);
  border-color: var(--line-strong);
  background: rgba(123, 47, 191, 0.16);
}

/* ── hero roster ── */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.hcard {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg-inset);
  padding: 0 0 7px;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.hcard:active { transform: scale(0.97); }
.hcard[aria-expanded="true"] { border-color: var(--line-strong); }
.hcard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.hcard-name {
  font-size: 0.78rem;
  line-height: 1.25;
  margin-top: 6px;
  padding: 0 4px;
  letter-spacing: calc(0.02em * var(--track));
}
.hcard-cls {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hcard-q {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: calc(0.06em * var(--track));
  padding: 2px 6px;
  color: var(--bg);
}
.q-UR  { background: var(--gold); }
.q-SSR { background: var(--purple-hi); }
.q-SR  { background: var(--silver); }
.hcard.q-border-UR  { border-color: var(--gold-line); }
.hcard.q-border-SSR { border-color: var(--line-strong); }

/* hero detail panel, injected below the tapped row */
.hdetail {
  grid-column: 1 / -1;
  border: 1px solid var(--line-strong);
  background: var(--bg-raise);
  padding: clamp(14px, 4vw, 20px);
}
.hdetail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.hdetail-head img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
}
.hdetail-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
  line-height: 1.2;
}
.hdetail-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.06em * var(--track));
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-top: 3px;
}
.skill {
  border-top: 1px solid var(--line);
  padding: 11px 0 0;
  margin-top: 11px;
}
.skill:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.skill-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--purple-hi);
}
.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-left: 8px;
  white-space: nowrap;
}
.skill-desc { font-size: 0.875rem; color: var(--ink-dim); line-height: 1.5; margin-top: 3px; }
.hclose {
  display: block;
  margin: 14px auto 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: calc(0.14em * var(--track));
  text-transform: uppercase;
  padding: 6px 18px;
  cursor: pointer;
}
.hclose:hover { color: var(--purple-hi); border-color: var(--line-strong); }

/* ── sanctuary level rows (mobile: no side-scroll) ── */
.lvrow {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.lvrow:first-of-type { border-top: none; padding-top: 0; }
.lvrow-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.lvrow-lv {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--gold-hi);
  min-width: 2.6em;
}
.lvrow-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
}
.lvrow-cost span { white-space: nowrap; }
.lvrow-cost i {
  font-style: normal;
  color: var(--ink-dim);
  font-size: 0.92em;
}
.lvrow-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--purple-hi);
  white-space: nowrap;
}
.lvrow-req {
  font-size: 0.8rem;
  color: var(--ink-dim);
  line-height: 1.45;
  margin-top: 4px;
}

/* tier rows */
.tier {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.tier:first-of-type { border-top: none; padding-top: 0; }
.tier-badge {
  flex: 0 0 46px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
  border: 1px solid var(--line);
}
.tier-S  { color: var(--gold-hi); border-color: var(--gold-line); background: rgba(201, 161, 90, 0.12); }
.tier-A  { color: var(--purple-hi); border-color: var(--line-strong); background: rgba(123, 47, 191, 0.14); }
.tier-B  { color: var(--silver); }
.tier-C  { color: var(--ink-dim); }
.tier-body { flex: 1; min-width: 0; }
.tier-names { font-weight: 600; line-height: 1.45; }
.tier-why { font-size: 0.85rem; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }

.fade-swap { animation: fadeSwap 0.28s ease; }
@keyframes fadeSwap {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- events accordion ---- */
.acc {
  border: 1px solid var(--line);
  background: var(--bg-raise);
  margin-bottom: 12px;
}
.acc.gold { border-color: var(--gold-line); }
.acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: clamp(14px, 4vw, 20px);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.acc-t { flex: 1 1 auto; min-width: 0; }
.acc-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--silver);
}
.acc.gold .acc-name { color: var(--gold-hi); }
.acc-when {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  line-height: 1.4;
  letter-spacing: calc(0.07em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.acc-mark {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-right: 3px;
  border-right: 1.6px solid var(--purple-hi);
  border-bottom: 1.6px solid var(--purple-hi);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.acc-head[aria-expanded="true"] .acc-mark { transform: rotate(-135deg); }
.acc-body {
  padding: 0 clamp(14px, 4vw, 20px) clamp(16px, 4vw, 22px);
  animation: accIn 0.22s ease both;
}
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.acc-body .vlist li { margin-bottom: 0.85em; }
.acc-body .vlist li:last-child { margin-bottom: 0; }

/* ---- spending: purchase rows + gift codes ---- */
.card .card-label:not(:first-child) { margin-top: 1.3em; }
.buy {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.buy-price {
  flex: 0 0 auto;
  min-width: 62px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-hi);
}
.buy-t { flex: 1 1 auto; min-width: 0; }
.buy-name {
  display: block;
  font-weight: 600;
  letter-spacing: calc(0.02em * var(--track));
  color: var(--ink);
}
.buy-why {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.codes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; }
.code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: calc(0.06em * var(--track));
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-inset);
  color: var(--gold-hi);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.code:hover { border-color: var(--gold-line); }
.code.copied { background: var(--gold-hi); border-color: var(--gold); color: var(--bg); }

/* ---- numbered steps + Sanctuary milestone rows ---- */
.vsteps { list-style: none; counter-reset: vstep; }
.vsteps li {
  position: relative;
  counter-increment: vstep;
  padding-left: 30px;
  margin-bottom: 0.75em;
}
.vsteps li:last-child { margin-bottom: 0; }
.vsteps li::before {
  content: counter(vstep);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 21px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  color: var(--purple-hi);
}
.ms {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.ms-lv {
  flex: 0 0 auto;
  width: 30px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: right;
  color: var(--gold-hi);
}
.ms-what {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* inline links inside prose keep the brand palette, never browser blue */
.card a, .acc-body a {
  color: var(--purple-hi);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.card a:hover, .acc-body a:hover { color: var(--gold-hi); text-decoration-color: var(--gold-line); }

/* ---- downloadable card gallery ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.gcard {
  border: 1px solid var(--line);
  background: var(--bg-raise);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.gshot { display: block; line-height: 0; border: 1px solid var(--line); }
.gshot img { width: 100%; height: auto; display: block; }
.gname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.3;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}
.gdesc {
  margin: -3px 0 0;
  font-size: 0.78rem;
  line-height: 1.42;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}
.gdl {
  display: block;
  padding: 8px 6px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(201, 161, 90, 0.12), rgba(201, 161, 90, 0.03));
  color: var(--gold-hi);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: calc(0.09em * var(--track));
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.gdl:hover { border-color: var(--gold); background: rgba(201, 161, 90, 0.18); }

/* ---- point table ---- */
.searchbox { margin: 0 0 14px; }
input.search {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg-inset);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
input.search:focus { outline: none; border-color: var(--gold-line); }
input.search::placeholder { color: var(--ink-dim); }
.ptlist { margin-top: 4px; }
.pt {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.pt-v {
  flex: 0 0 auto;
  min-width: 74px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
  color: var(--gold-hi);
}
.pt-t { flex: 1 1 auto; min-width: 0; }
.pt-name { display: block; font-size: 0.95rem; line-height: 1.4; }
.pt-sub, .pt-alt {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-dim);
}
.pt-alt { font-family: var(--font-mono); font-size: 0.76rem; }

/* ---- building list ---- */
.blist { margin-top: 4px; }
.btier {
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: calc(0.14em * var(--track));
  text-transform: uppercase;
  color: var(--gold);
}
.btier:first-child { margin-top: 0; }
.btier.t-S { color: var(--gold-hi); border-bottom-color: var(--gold-line); }
.btier.t-A { color: var(--purple-hi); border-bottom-color: var(--line-strong); }
.bitem { border-top: 1px solid var(--line); }
.bitem:first-of-type { border-top: none; }
.bhead {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 11px 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bicon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(150, 80, 255, 0.35));
}
.bmid { flex: 1 1 auto; min-width: 0; }
.bname {
  display: block;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: calc(0.02em * var(--track));
}
.bchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.bchip {
  padding: 1px 7px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.04em * var(--track));
  color: var(--ink-dim);
  white-space: nowrap;
}
.bcar {
  flex: 0 0 auto;
  color: var(--purple-hi);
  font-size: 0.8rem;
  transition: transform 0.18s ease;
}
.bitem.on .bcar { transform: rotate(180deg); }
.bdet { display: none; padding: 2px 0 16px; }
.bitem.on .bdet { display: block; }
.bdes { color: var(--ink-dim); font-size: 0.92rem; margin-bottom: 0.9em; }
.btip {
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(201, 161, 90, 0.06);
  font-size: 0.92rem;
}

/* ---- research ---- */
.card-label.with-icon { display: flex; align-items: center; gap: 8px; }
.clabel-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(150, 80, 255, 0.45));
}
.agap { height: 14px; }
.at {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.at-n { font-size: 0.95rem; line-height: 1.35; }
.at-v {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold-hi);
  white-space: nowrap;
  align-self: center;
}
.at-d {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-dim);
}
.tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.tr-n { font-size: 0.9rem; line-height: 1.35; }
.tr-l {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--purple-hi);
  white-space: nowrap;
  align-self: center;
}
.tr-d {
  grid-column: 1 / -1;
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--ink-dim);
}

/* ---- elixir battlefield ---- */
.mapwrap { display: block; margin: 4px 0 14px; border: 1px solid var(--line); }
.mapimg { display: block; width: 100%; height: auto; }
.ft {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.ft-i {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(150, 80, 255, 0.35));
}
.ft-m { flex: 1 1 auto; min-width: 0; }
.ft-n { display: block; font-size: 0.98rem; line-height: 1.35; }
.ft-e {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-dim);
}
.bchip.gold { color: var(--gold-hi); border-color: var(--gold-line); }
.bchip.hot { color: var(--purple-hi); border-color: var(--line-strong); }
.chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 0.9em;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bg-inset);
}
.chat-l {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: calc(0.06em * var(--track));
  color: var(--gold-hi);
}

/* ---- rules gate ---- */
body.gated { overflow: hidden; }
.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7, 4, 9, 0.88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.gate-card {
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  overflow-y: auto;
  /* no padding at the foot: the sticky action bar supplies it. A sticky child
     cannot reach past its parent's content box, so leaving padding here left a
     20px strip under the bar with the creed scrolling through it. */
  padding: clamp(20px, 5vw, 30px) clamp(20px, 5vw, 30px) 0;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg));
  box-shadow: 0 0 60px rgba(123, 47, 191, 0.35);
  text-align: left;
}
.gate-emblem {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 auto 12px;
}
.gate-title {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-hi);
}
.gate-creed {
  margin: 1em 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--purple);
  background: rgba(123, 47, 191, 0.08);
  font-size: 0.92rem;
}
.gate-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 14px;
  font-size: 0.95rem;
  cursor: pointer;
}
.gate-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--purple-hi);
}
.gate-go {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(201, 161, 90, 0.18), rgba(201, 161, 90, 0.05));
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: calc(0.14em * var(--track));
  text-transform: uppercase;
  cursor: pointer;
}
.gate-go[disabled] { opacity: 0.35; cursor: not-allowed; }
.gate-go:not([disabled]):hover { background: rgba(201, 161, 90, 0.28); }
.gate-more {
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  text-align: center;
  color: var(--ink-dim);
}
.gate-more:hover { color: var(--gold-hi); }

/* ── formations page ── */
.fm-tri { display: grid; gap: 8px; margin-bottom: 12px; }
.fm-trow {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--bg-inset);
  padding: 9px 12px;
}
.fm-cicon {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(150, 80, 255, 0.45));
}
.fm-cicon.dim { opacity: 0.55; filter: none; }
.fm-ttext { flex: 1; font-size: 0.9375rem; line-height: 1.45; }
.fm-how {
  color: var(--ink-dim);
  font-size: 0.875rem;
  margin-bottom: 1em;
}
.fm-bval { font-family: var(--font-mono); white-space: nowrap; color: var(--gold-hi); }

.fm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fm-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: calc(0.02em * var(--track));
  color: var(--gold-hi);
}
.fm-bonus {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: calc(0.06em * var(--track));
  color: var(--purple-hi);
  border: 1px solid var(--line-strong);
  background: rgba(123, 47, 191, 0.14);
  padding: 3px 9px;
  white-space: nowrap;
}
.fm-bonus.zero {
  /* the long "no lineup bonus" wording has to be allowed to shrink and wrap */
  flex: 0 1 auto;
  max-width: 46%;
  overflow-wrap: normal;
  color: var(--ink-dim);
  border-color: var(--line);
  background: none;
  white-space: normal;
  text-align: center;
}
.fm-shape {
  /* five slots, always on one row — a squad that wraps stops reading as a squad */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 18px;
}
.fm-slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--bg-inset);
  padding: 8px 4px 6px;
}
.fm-sicon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(150, 80, 255, 0.45));
}
.fm-scls {
  /* Hexenmeister / レンジャー have to wrap inside a fifth of a phone screen */
  overflow-wrap: anywhere;
  font-size: 0.58rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  line-height: 1.2;
}
.fm-picks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.fm-pick {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.fm-face {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--gold-line);
  background: var(--bg-inset);
}
.fm-pname {
  overflow-wrap: anywhere;
  font-size: 0.72rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
  line-height: 1.2;
}
.fm-text { margin: 0; }

/* the permanent way back to the rules, injected into every footer */
footer a.rules-link {
  display: block;
  margin-top: 8px;
  color: var(--purple-hi);
  border-bottom: 1px solid rgba(181, 123, 255, 0.35);
  padding-bottom: 2px;
  width: fit-content;
  margin-inline: auto;
}

/* ── survivors page ── */
.sv-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sv-stat {
  border: 1px solid var(--line);
  background: var(--bg-inset);
  padding: 12px 10px;
  text-align: center;
}
.sv-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--gold-hi);
  line-height: 1.2;
}
.sv-cap {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.25;
}
.sv-band { color: var(--ink-dim); font-size: 0.875rem; margin-bottom: 12px; }
.sv-row {
  display: flex;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--bg-inset);
  padding: 11px 12px;
  margin-bottom: 8px;
}
.sv-icon {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(150, 80, 255, 0.4));
}
.sv-mid { min-width: 0; flex: 1; }
.sv-post {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
  line-height: 1.25;
}
.sv-where {
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin-bottom: 7px;
}
.sv-gives { list-style: none; }
.sv-gives li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.83rem;
  line-height: 1.35;
  padding: 2px 0;
  border-top: 1px solid rgba(181, 123, 255, 0.12);
}
.sv-gname { min-width: 0; }
.sv-gval {
  flex: none;
  font-family: var(--font-mono);
  color: var(--gold-hi);
  white-space: nowrap;
}

/* event cards carry the game's own icon, and link out when they have a page */
.acc-icon {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(150, 80, 255, 0.45));
}
.acc-more {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold-hi);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--gold-line);
  text-decoration: none;
  padding-bottom: 2px;
}
.acc-more::after { content: ' ›'; }

/* the Alliance Duel — six day cards, each with its own scoring tables */
.dl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.dl-dicon {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(150, 80, 255, 0.45));
}
.dl-htxt { min-width: 0; }
.dl-dnum {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.14em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
}
.dl-dname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}
.dl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.dl-tag {
  font-size: 0.72rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 3px 8px;
  overflow-wrap: anywhere;
}
.dl-ri {
  width: 22px;
  height: 22px;
  flex: none;
  object-fit: contain;
  vertical-align: -5px;
  margin-right: 7px;
}
.dl-rt { overflow-wrap: anywhere; }
.dl-rp { color: var(--gold-hi); }
.dl-hidden {
  border-left: 2px solid var(--gold-line);
  padding-left: 12px;
  margin-bottom: 1em;
}
.dl-hhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.dl-htitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: calc(0.1em * var(--track));
  text-transform: uppercase;
  color: var(--gold);
  overflow-wrap: anywhere;
}
.dl-hflag {
  font-size: 0.72rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
  border: 1px solid var(--line);
  padding: 2px 7px;
  overflow-wrap: anywhere;
}
.dl-hnote {
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.dl-tip {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.dl-goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 1em;
}
.dl-goal {
  border: 1px solid var(--line);
  padding: 8px 6px;
  text-align: center;
  min-width: 0;
}
.dl-gn {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: calc(0.1em * var(--track));
  color: var(--purple-hi);
}
.dl-gv {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}
.dl-lad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 5px;
  margin-bottom: 1em;
}
.dl-lcell {
  border: 1px solid var(--line);
  padding: 6px 4px;
  text-align: center;
  min-width: 0;
}
.dl-llv {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.06em * var(--track));
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.dl-lpts {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}

/* building level ladders: seven narrow columns that must fit a 360px phone */
table.vt.bl th, table.vt.bl td {
  padding: 5px 4px;
  font-size: 0.76rem;
  text-align: right;
}
table.vt.bl th { font-size: 0.62rem; letter-spacing: calc(0.04em * var(--track)); text-align: right; }
table.vt.bl th:first-child, table.vt.bl td:first-child { text-align: left; }
table.vt.bl td { font-family: var(--font-mono); white-space: nowrap; }
.bl-legend { margin-top: 8px; }
.bl-legend .note { margin: 0; font-size: 0.78rem; font-weight: 400; }

/* building level ladder — two short lines per level, never a sideways scroll */
.bl-list { margin: 4px 0 10px; }
.bl-row {
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.bl-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bl-lv {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
  flex: none;
}
.bl-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--silver);
  overflow-wrap: anywhere;
}
.bl-need {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 1px 6px;
  flex: none;
}
.bl-cost {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}
.bl-note { margin: 0; font-size: 0.78rem; font-weight: 400; }

/* formations: one portrait row per squad, class badge on the portrait */
.fm-make {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.fm-shot { position: relative; line-height: 0; }
.fm-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 21px;
  height: 21px;
  object-fit: contain;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  padding: 1px;
}
.fm-text { margin-top: 10px; font-size: 0.94rem; }

/* Point table — the "show everything" switch under the clipped list */
.ptmore {
  display: block;
  width: 100%;
  margin-top: var(--vf-space-3, 12px);
  padding: 11px 14px;
  background: transparent;
  border: 1px solid rgba(123, 47, 191, 0.55);
  border-radius: 8px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  cursor: pointer;
}
.ptmore:hover { border-color: rgba(181, 123, 255, 0.9); color: #e9e4f2; }
.ptmore[hidden] { display: none; }

/* Elixir battle order — the step number in the accordion head */
.acc-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 161, 90, 0.5);
  border-radius: 50%;
  color: var(--gold-hi, #eed9a6);
  font-size: 0.78rem;
  letter-spacing: 0;
}

/* ---- site-wide search ----
   Results are grouped by the page they came from. Ungrouped, eight hits on one
   page were eight identical boxes each stamped with the same gold page name,
   and the whole result set read as one texture. Now the page is named once, in
   a header with its own icon, and the hits under it are quiet rows — so the
   thing that varies is the only thing drawn loudly. */
.sr-list { margin-top: var(--vf-space-3, 12px); }

.srg { margin-bottom: 26px; }          /* groups need real air between them */
.srg:last-child { margin-bottom: 8px; }

.srg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(123, 47, 191, 0.20), transparent 78%);
  border-left: 3px solid var(--gold);
  color: var(--gold-hi);
  text-decoration: none;
}
.srg-head:hover { background: linear-gradient(90deg, rgba(123, 47, 191, 0.32), transparent 78%); }
.srg-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 4px rgba(0, 245, 255, 0.35));
}
.srg-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
}
.srg-n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}

.sr {
  display: block;
  padding: 11px 14px 11px 16px;
  margin-top: 8px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(201, 161, 90, 0.35);
  color: var(--ink);
  text-decoration: none;
}
.sr:hover { border-color: var(--line-strong); border-left-color: var(--gold); }
.sr-sec {
  margin-bottom: 5px;
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
}
.sr-txt {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--silver);
}
.sr mark {
  background: rgba(123, 47, 191, 0.42);
  color: #f3ecff;
  padding: 0 2px;
  border-radius: 2px;
}
/* in a heading the purple block would fight the gold — a tint is enough */
.srg-name mark, .sr-sec mark { background: rgba(123, 47, 191, 0.28); color: inherit; }

/* The magnifier rides at the head of the language bar on every page. It sits
   inside the scrolling strip rather than floating over its right edge, where
   it would collide with the "more languages" arrow on a phone. */
.searchjump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 0.8125rem;
  letter-spacing: calc(0.04em * var(--track));
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.searchjump:hover { color: var(--gold-hi); border-color: var(--gold-line); }
.searchjump[aria-current="page"] {
  color: var(--gold-hi);
  border-color: var(--gold-line);
  background: rgba(201, 161, 90, 0.12);
}
.searchjump svg { width: 14px; height: 14px; display: block; }

/* ---- VIP: the three stops worth aiming at ---- */
.stop {
  border-left: 2px solid var(--line-strong);
  padding: 2px 0 2px 14px;
  margin-top: var(--vf-space-4, 16px);
}
.stop-now { border-left-color: var(--gold); }
.stop-next { border-left-color: var(--purple-hi); }
.stop-later { border-left-color: var(--line-strong); }
.stop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.stop-lv {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: calc(0.08em * var(--track));
  color: var(--gold-hi);
}
.stop-now .stop-lv { color: var(--gold-hi); }
.stop-next .stop-lv { color: var(--purple-hi); }
.stop-tag {
  font-size: 0.72rem;
  letter-spacing: calc(0.09em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.stop-txt { margin-top: 6px; font-size: 0.94rem; }
.stop-cost {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: calc(0.04em * var(--track));
  color: var(--ink-dim);
}

/* ---- VIP: the privilege list ---- */
/* A badge row: icon, name, the game's own description, and the cap.
   Centring a 30px icon against a five-line description left it floating in the
   middle of nowhere and the row read as a paragraph with a stray picture in it.
   The icon belongs beside the NAME — so it aligns to the top — and it needs
   enough size and glow to be the thing the eye lands on first. */
.vp {
  display: flex;
  align-items: flex-start;
  /* a long value — "20 members per R4" — used to win the fight for the row and
     squeeze the label into a one-word-per-line column. Let the row wrap
     instead: the value drops to its own line, still right-aligned, and the
     label keeps a readable measure. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.vp-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-top: 1px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0, 245, 255, 0.32));
}
/* the same idea one size down, for the leader-settings rows: those are one
   short line each, so a 38px icon would out-shout the setting it labels */
.vp-i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(0, 245, 255, 0.3));
}
.vp-mid { flex: 1 1 150px; min-width: 0; }
.vp-name { font-size: 0.92rem; line-height: 1.4; }
.vp-from {
  margin-top: 2px;
  font-size: 0.72rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.vp-max {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold-hi);
  white-space: nowrap;
}
/* name on the left, value on the right — the same shape the survivor page uses */
.vp-new { list-style: none; }
.vp-new li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.88rem;
  line-height: 1.4;
  border-top: 1px solid rgba(181, 123, 255, 0.12);
}
.vp-gname { min-width: 0; }
.vp-gval {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--gold-hi);
  white-space: nowrap;
}

/* ---- VIP: the consecutive-login ladder ---- */
.streak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  margin: 14px 0 10px;
}
.streak-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 6px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  text-align: center;
}
.streak-d {
  font-size: 0.72rem;
  letter-spacing: calc(0.07em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.streak-p {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--gold-hi);
}

/* ---- the two legendary survivors ---- */
.lg-head { display: flex; align-items: center; gap: 14px; }
.lg-pic {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--gold-line);
  background: var(--bg-inset);
}
.lg-ht { min-width: 0; }
.lg-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
  line-height: 1.25;
}
.lg-post {
  margin-top: 4px;
  font-size: 0.74rem;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lg-story { margin-top: 12px; font-size: 0.92rem; color: var(--silver); }

/* three columns: what it is, where it starts, where it ends */
.lg-tab { margin: 10px 0 12px; }
.lg-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}
.lg-row-h {
  border-top: 0;
  font-size: 0.7rem;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lg-c1 { min-width: 0; }
.lg-c2, .lg-c3 {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-align: right;
  white-space: nowrap;
}
.lg-c2 { color: var(--ink-dim); }
.lg-c3 { color: var(--gold-hi); }
/* The block and ladder tables carry a whole cost sentence in the last column,
   so there it drops to a line of its own. The "what she gives" table holds two
   bare numbers and must keep all three columns — collapsing that one put the
   ceiling value on its own line under the name and read as a bug. */
.lg-tab-cost .lg-c3 { white-space: normal; }
@media (max-width: 460px) {
  .lg-tab-cost .lg-row { grid-template-columns: 1fr auto; }
  .lg-tab-cost .lg-c3 { grid-column: 1 / -1; text-align: left; color: var(--ink-dim); }
}

/* ── gear ─────────────────────────────────────────────────────────────── */

/* the priority number on a slot row — the same badge the level accordions
   use, because it means the same thing: this one comes first */
.gr-rank {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 161, 90, 0.5);
  border-radius: 50%;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
/* craft cost and total stones, hung under the tier row they belong to */
.gr-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-dim);
}
.gr-slotname {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: calc(0.08em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.gr-bhead { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.gr-bicon { width: 34px; height: 34px; flex: none; object-fit: contain; }
.gr-bname {
  font-size: 0.86rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--silver);
}

/* ── specialty skills ─────────────────────────────────────────────────── */

.sk { padding: 12px 0; border-top: 1px solid var(--line); }
.sk-head {
  display: flex;
  align-items: baseline;
  gap: 8px 10px;
  flex-wrap: wrap;
}
/* the priority number only exists in the "take these first" card */
.sk-rank {
  float: left;
  margin: 2px 10px 0 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 161, 90, 0.5);
  border-radius: 50%;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.sk-name { font-size: 0.95rem; color: var(--silver); }
.sk-gate {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold-hi);
  white-space: nowrap;
}
.sk-desc { margin-top: 5px; font-size: 0.86rem; color: var(--ink-dim); }
.sk-foot {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sk-season { color: var(--purple-hi); }

/* ── a single-line order, loud enough to be the thing you remember ────── */
.callout {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  background: rgba(201, 161, 90, 0.08);
  color: var(--gold-hi);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(0.06em * var(--track));
  font-size: 0.9rem;
  text-align: center;
}

/* ── permission matrix: one line of prose, one line of badges ──────────── */
/* Sections inside the permission table. A 51-row list with nothing but hairline
   rules between the rows reads as one grey texture; the group heading has to
   look like a heading, and the rows under it have to belong to it visibly. */
.pm-sec { margin-top: 20px; }
.pm-sec:first-of-type { margin-top: 12px; }
.pm-sechead {
  padding: 7px 12px;
  background: rgba(123, 47, 191, 0.16);
  border-left: 3px solid var(--purple-hi);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: calc(0.09em * var(--track));
  text-transform: uppercase;
  color: var(--ink);
}
.pm { padding: 11px 10px; border-top: 1px solid var(--line); }
.pm-sec .pm:nth-of-type(even) { background: rgba(255, 255, 255, 0.022); }
.pm-name { font-size: 0.9rem; line-height: 1.4; }
.pm-marks {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  /* nine marks have to sit on ONE line at 390px — wrapped onto two they stop
     being a row you can read across and become a second paragraph */
  flex-wrap: nowrap;
}
.pm-m {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.04em * var(--track));
  text-align: center;
  color: var(--ink-dim);
  opacity: 0.45;
}
.pm-m.on {
  border-color: var(--gold-line);
  background: rgba(201, 161, 90, 0.14);
  color: var(--gold-hi);
  opacity: 1;
}
/* the appointed posts sit after the ranks, always in the same four slots */
.pm-p {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  /* At 0.28 alone the gold badge art still glowed and every post read as
     granted — which is the exact opposite of what the row says. Draining the
     colour is what actually makes "off" look off. */
  opacity: 0.3;
  filter: grayscale(1) brightness(0.5);
}
.pm-m + .pm-p { margin-left: 8px; }
.pm-p img { width: 18px; height: 18px; object-fit: contain; }
.pm-p.on {
  border-color: var(--gold-line);
  background: rgba(201, 161, 90, 0.14);
  opacity: 1;
  filter: none;
}
.pm-legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.pm-leg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--silver);
}
.pm-leg img { width: 20px; height: 20px; object-fit: contain; }

/* the game's own job description is a sentence, not a label — it must not be
   set in the uppercase treatment .vp-from uses for short tags */
.vp-desc {
  margin-top: 3px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* a closing paragraph after a list of rows needs air, or it reads as one more
   row that lost its border */
.vp + p, .pm + p { margin-top: 14px; }

/* ── Quiz of Wisdom ────────────────────────────────────────────────────────
   In game this is three lettered buttons and a countdown. So the page has to
   answer in the same shape: a numbered question, three lettered options, and
   exactly one of them unmistakably lit. The first build set the three options
   as three near-identical lines with a hairline between questions, and 81 of
   those is a single grey slab — you could not tell where one question ended.
   Cards, numbers, letters and a tick fix that in one pass. */
.qzlist { margin-top: 6px; }

.qz {
  margin-top: 18px;
  padding: 14px 14px 12px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-top: 2px solid rgba(123, 47, 191, 0.55);
}
.qz:first-child { margin-top: 10px; }

.qz-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.qz-num {
  flex: 0 0 auto;
  min-width: 22px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--purple-hi);
}
.qz-q {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.qz-opts {
  margin: 10px 0 0 32px;      /* aligned under the question, clear of the number */
  display: grid;
  gap: 6px;
}
.qz-o {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
/* the letter badge — the thing the player is actually about to tap */
.qz-l {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.qz-t { flex: 1 1 auto; min-width: 0; font-size: 0.87rem; line-height: 1.4; }

.qz-o.on {
  border-color: var(--gold-line);
  background: rgba(201, 161, 90, 0.11);
  color: var(--gold-hi);
}
.qz-o.on .qz-l {
  border-color: var(--gold);
  background: var(--gold);
  color: #1a1005;
  font-weight: 700;
}
.qz-o.on .qz-t { font-weight: 600; }
/* A tick drawn in CSS rather than set as ✓ — the glyph is missing from enough
   phone fonts to show a .notdef box, and a box next to the right answer reads
   as "broken", which is the last thing this page can afford. */
.qz-ok {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
}
.qz-ok::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--gold-hi);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ── alliance dig sites ────────────────────────────────────────────────── */
/* Both dig families used to render as a bare heading followed by forty rows of
   "name .......... number". Two of those stacked read as one grey column and
   the reader cannot tell where the pirate wreck ends and the fountain begins.
   Each family now gets a bordered block with the game's own site art in the
   header, and every prize carries the item's own icon — the guide already had
   the icon for each one, it simply was not drawing it. */

.quiet {
  margin: 0 0 1em;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.dg {
  margin-top: 22px;
  border: 1px solid var(--gold-line);
  background: rgba(255, 255, 255, 0.012);
}
.dg:first-of-type { margin-top: 14px; }
.dg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(201, 161, 90, 0.14), rgba(201, 161, 90, 0.04));
  border-bottom: 1px solid var(--gold-line);
}
.dg-icon { width: 46px; height: 46px; flex: none; object-fit: contain; }
.dg-t { min-width: 0; }
.dg-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.dg-desc {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-dim);
}
.dg-body { padding: 2px 14px 12px; }
.dg-sec {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.09em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
}
.dg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.dg-ic { width: 28px; height: 28px; flex: none; object-fit: contain; }
.dg-n { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; line-height: 1.35; }
.dg-q {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--gold-hi);
  white-space: nowrap;
}

/* ── leadership playbook: numbered, so it reads as steps not as prose ──── */
/* Six paragraphs of "and also you should…" is a wall. A gold number in front
   of each one turns the same text into a list somebody can hold in their head
   and come back to — and the heading line gives the eye somewhere to land. */

.ld {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.ld:first-of-type { border-top: none; padding-top: 4px; }
.ld-n {
  flex: none;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: rgba(201, 161, 90, 0.14);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-hi);
}
.ld-t { min-width: 0; }
.ld-h {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--gold-hi);
}
.ld-b {
  margin-top: 6px;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink);
}

/* ── gear: one block per piece ─────────────────────────────────────────── */
/* Four slots × four benefit lines is sixteen numbers. Read as a flat list they
   are indistinguishable; boxed per piece, with the client's own slot
   silhouette on the header and a stat glyph on every line, the reader can find
   "what does the sword give" without counting rows. */

.gs {
  margin-top: 20px;
  border: 1px solid var(--gold-line);
  background: rgba(255, 255, 255, 0.012);
}
.gs:first-of-type { margin-top: 12px; }
.gs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(201, 161, 90, 0.14), rgba(201, 161, 90, 0.04));
  border-bottom: 1px solid var(--gold-line);
}
.gs-pic {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(181, 123, 255, 0.35));
}
.gs-t { flex: 1 1 auto; min-width: 0; }
.gs-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.gs-rank {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold-hi);
}
.gs-role {
  margin-top: 3px;
  font-size: 0.76rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.gs-pow { flex: none; text-align: right; }
.gs-powv {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--gold-hi);
  white-space: nowrap;
}
.gs-powl {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
.gs-body { padding: 0 14px 10px; }
.gs-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.gs-row-h {
  border-top: none;
  padding: 8px 0 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--ink-dim);
}
img.gs-ic { width: 24px; height: 24px; object-fit: contain; }
.gs-n { min-width: 0; font-size: 0.9rem; line-height: 1.35; }
.gs-a, .gs-b {
  min-width: 56px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  white-space: nowrap;
}
.gs-a { color: var(--ink-dim); }
.gs-b { color: var(--gold-hi); }

/* milestone bonuses, grouped under the piece they belong to */
.ms-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--gold-line);
}
.ms-head:first-of-type { margin-top: 12px; }
.ms-pic { width: 30px; height: 30px; flex: none; object-fit: contain; }
.ms-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.ms-row {
  display: grid;
  grid-template-columns: auto 24px 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ms-head + .ms-row { border-top: none; }
.ms-lv {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--purple-hi);
}
img.ms-ic { width: 24px; height: 24px; object-fit: contain; }
.ms-n { min-width: 0; font-size: 0.9rem; line-height: 1.35; }
.ms-v {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--gold-hi);
  white-space: nowrap;
}

/* ── cost chips: an amount, its icon, and what it buys ─────────────────── */
/* Every cost in the guide used to print as "12 500 × Gearstone · 150 ×
   Tempered Steel · 23 437 500 × Herb" — correct, and unreadable ten rows deep,
   because every line has the same shape. The icon is what makes a row
   identifiable before it is read. */

.cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 3px 10px 3px 0;
  white-space: nowrap;
  vertical-align: middle;
}
.cost-i { width: 20px; height: 20px; flex: none; object-fit: contain; }
.cost-n {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--gold-hi);
}
.cost-k {
  font-size: 0.76rem;
  color: var(--ink-dim);
  white-space: normal;
}
/* inside the right-hand column of a cost table the chips stack instead of
   running off the edge */
.lg-tab-cost .lg-c3 .cost { margin-right: 12px; }

/* the leader's settings reuse the matrix sections, so they need its zebra too */
.pm-sec .vp:nth-of-type(even) { background: rgba(255, 255, 255, 0.022); }
.pm-sec .vp { padding-left: 10px; padding-right: 10px; }

/* ── research branches by the lab level that opens them ────────────────── */
/* The level is the thing that repeats, so it is printed once per group and
   the branches under it become chips carrying the research screen's own art.
   As a two-column table this needed a horizontal scrollbar at 390px. */

.labg {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.labg:first-of-type { border-top: none; }
.labg-lv {
  flex: none;
  min-width: 74px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
}
.labg-b { display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.labg-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--gold-line);
  background: rgba(201, 161, 90, 0.07);
  font-size: 0.85rem;
  line-height: 1.3;
}
.labg-c img { width: 20px; height: 20px; flex: none; object-fit: contain; }

/* gear quality as a chip, not as three grey letters in a column. The table it
   sits in exists to say "quality is the ceiling", so the quality has to be the
   loudest thing in the row. */
.qual {
  display: inline-block;
  min-width: 3.4em;
  padding: 2px 7px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.86rem;
  letter-spacing: calc(0.06em * var(--track));
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.q-SR  { color: var(--rar-sr); border-color: rgba(111, 168, 255, 0.4); background: rgba(111, 168, 255, 0.12); }
.q-SSR { color: var(--purple-hi); border-color: var(--line-strong); background: rgba(123, 47, 191, 0.16); }
.q-UR  { color: var(--gold-hi); border-color: var(--gold-line); background: rgba(201, 161, 90, 0.14); }

/* A ladder of costs — 10 → 25 → 45 → … — inside a sentence. Bolding nine
   figures paints the paragraph; leaving them in running text is the wall this
   whole pass is about. Set as one mono run with arrows, it reads as a shape:
   the eye sees the climb without reading a single number. */
.seq {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--gold-hi);
  white-space: normal;
  word-spacing: 0.05em;
}

/* The duel stockpile board — six day blocks, each with the four things worth
   holding for it. One block per row on a phone; two side by side as soon as
   there is width for them, because the whole point is seeing the week at once. */
.bk {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 4px 0 14px;
}
@media (min-width: 620px) {
  .bk { grid-template-columns: 1fr 1fr; }
}
.bk-day {
  border: 1px solid var(--line);
  background: rgba(21, 13, 34, 0.6);
  padding: 11px 12px 8px;
}
.bk-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--gold-line);
}
.bk-di {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(150, 80, 255, 0.45));
}
.bk-ht { min-width: 0; }
.bk-dn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.14em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
}
.bk-dname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: calc(0.04em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}
.bk-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}
.bk-ri {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
  margin-top: 1px;
}
.bk-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.bk-p {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold-hi);
  white-space: nowrap;
}

/* The duel index read thing-first: one row per scoring item, a six-dot strip
   for the days that count it, the value on the right. The dots are the whole
   device — a lit one is a day, an unlit one holds the column so every strip
   lines up down the card and the pattern is readable at a glance. On a phone
   the strip drops to its own line: squeezing it beside the name leaves the
   name about six characters wide, and the game's row texts are sentences. */
.wd { margin: 4px 0 12px; }
.wd-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "i t p" ". d d";
  align-items: center;
  gap: 5px 9px;
  padding: 8px 0;
  border-top: 1px solid rgba(181, 123, 255, 0.12);
}
.wd-row:first-child { border-top: 0; }
.wd-i {
  grid-area: i;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.wd-t {
  grid-area: t;
  min-width: 0;
  font-size: 0.83rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.wd-days {
  grid-area: d;
  display: flex;
  gap: 3px;
}
.wd-d {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(214, 205, 226, 0.28);
}
.wd-d.on {
  border-color: var(--gold-line);
  background: rgba(201, 161, 90, 0.16);
  color: var(--gold-hi);
}
.wd-p {
  grid-area: p;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold-hi);
  white-space: nowrap;
}
@media (min-width: 560px) {
  .wd-row {
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    grid-template-areas: "i t d p";
  }
}

/* The footer facts: which day the server is on, and what the guide contains.
   Two quiet lines — the clock in the gold the site uses for a number that
   matters, the counts dimmer than the credit above them, because they are
   evidence for a claim rather than the claim. */
.foot-clock {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.1em * var(--track));
  color: var(--gold);
}
.foot-stats {
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: calc(0.06em * var(--track));
  line-height: 1.7;
  color: #5b5468;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* A row the game files describe and this server has not switched on. It is
   printed, not deleted — the reader still wants to know it is coming — but it
   is greyed and badged so it cannot be planned around by mistake. */
.gated-row { opacity: 0.62; }
.gate-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-dim);
  vertical-align: middle;
}

/* The research that multiplies duel points: name, what it covers, and the cap.
   A three-row list rather than a table — three rows do not need a header. */
.bo { margin: 6px 0 2px; }
.bo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(181, 123, 255, 0.12);
}
.bo-row:first-child { border-top: 0; }
.bo-mid { flex: 1 1 auto; min-width: 0; }
.bo-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: calc(0.03em * var(--track));
  color: var(--gold-hi);
  overflow-wrap: break-word;
}
.bo-s {
  margin-top: 2px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--ink-dim);
}
.bo-v {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--purple-hi);
  white-space: nowrap;
}
.card-label.sub { margin-top: 16px; }

/* ---------------------------------------------------------------- arena ----
   The class cycle, the three-squad lineups and the rank-bracket reward rows.
   Everything here has to survive 390px, where a squad of five icons and a
   bracket of six reward chips both want to wrap rather than scroll. */
.ar-cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  margin: 4px 0 14px;
}
.ar-node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--gold-line);
  background: rgba(201, 161, 90, 0.08);
}
.ar-node img { width: 22px; height: 22px; flex: none; object-fit: contain; }
.ar-node span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.ar-arrow {
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--purple-hi);
}

.ar-preset { margin-top: 18px; }
.ar-preset:first-of-type { margin-top: 8px; }
.ar-pname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.ar-pwhy {
  margin: 5px 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.ar-team {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.ar-slot {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: rgba(201, 161, 90, 0.14);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--gold-hi);
}
.ar-five { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ar-ci { width: 26px; height: 26px; flex: none; object-fit: contain; }
.ar-ci.dim { opacity: 0.42; }
.ar-tn { min-width: 0; font-size: 0.8rem; line-height: 1.4; color: var(--ink-dim); }
.ar-tn b { color: var(--gold-hi); font-weight: 400; font-family: var(--font-mono); }

.ar-rw {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.ar-rank {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: calc(0.06em * var(--track));
  color: var(--purple-hi);
}
.ar-gives { min-width: 0; }
.ar-gap { font-size: 0.8rem; line-height: 1.45; color: var(--ink-dim); }
.ar-sub {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.09em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
}
.ar-quote { margin-top: 6px; }
.ar-qh {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.ar-quote .vlist { margin: 5px 0 0; }
.ar-quote .vlist li { font-size: 0.86rem; line-height: 1.5; color: var(--ink-dim); }
.ar-fact {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ar-fn { font-size: 0.86rem; line-height: 1.35; color: var(--ink-dim); }
.ar-fv {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: right;
  color: var(--gold-hi);
  overflow-wrap: break-word;
}
.ar-band {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: nowrap;
}
/* a dense table whose headers may wrap — four short columns of German or
   French still have to fit a 390px phone without a sideways scroll. The
   header size is put back to the site's own 0.72rem: `.bl` shrinks headers
   to 0.62rem (9.9px) because it carries seven numeric columns on a 360px
   phone, and four columns do not have to pay that price. Nothing on the
   site is allowed below 11px. */
table.vt.hw th { white-space: normal; font-size: 0.72rem; }

/* ── /epigraphs/ ──
   Two shapes this page needs that nothing else on the site has: a family row
   (art, name, slot, one sentence) and a material row (art, name, the client's
   own description). Both are art-first, because the reader is looking for a
   picture they have already seen on their own screen. */
.ep-fam, .ep-mat {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.ep-fi, .ep-mi {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(150, 80, 255, 0.45));
}
.ep-mi { width: 34px; height: 34px; }
.ep-mat { grid-template-columns: 34px minmax(0, 1fr); }
.ep-fn, .ep-mn {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
.ep-fs {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: calc(0.09em * var(--track));
  text-transform: uppercase;
  color: var(--purple-hi);
}
.ep-fd, .ep-md {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
/* The Epigraph's own skill, quoted from the client. It is the one line on the
   page a reader compares word for word against their screen, so it is set
   apart from our prose rather than mixed into it. */
.ep-skill {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  font-size: 0.95rem;
  line-height: 1.55;
}
.ep-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.ep-get { margin-top: 16px; }
/* a "the game does not store this" cell, and the marker on a derived figure */
.ep-calc { color: var(--purple-hi); }
.ep-key {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: calc(0.06em * var(--track));
  text-transform: uppercase;
  color: var(--gold-hi);
}
/* R is the fourth rarity this page needs and the first page to need it: the
   guide had never printed anything below SR before. */
.q-R {
  color: var(--ink-dim);
  border-color: var(--line);
  background: rgba(167, 159, 184, 0.10);
}
/* one Raven Evolve stage: level, name, what it opens, and its four figures */
.ep-stage {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.ep-slv {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gold-hi);
  white-space: nowrap;
}
.ep-sb { min-width: 0; }
.ep-sn {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.35;
  letter-spacing: calc(0.05em * var(--track));
  text-transform: uppercase;
  color: var(--silver);
}
.ep-sl { margin: 6px 0 0; }
.ep-sl li { font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.2em; }
.ep-sm {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: calc(0.03em * var(--track));
  color: var(--ink-dim);
}

/* ---- epigraphs: the order the four slots are worth filling ---- */
/* Same 44px art column as .ep-fam, with a rank numeral in front of it, so the
   reader sees the four families twice in the same shape — once as "what they
   are", once as "which one first". */
.ep-ord {
  display: grid;
  grid-template-columns: 26px 44px minmax(0, 1fr);
  /* top-aligned, not centred: the reasons run four or five lines and a numeral
     floating at the middle of that block reads as belonging to nothing */
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--gold-line);
}
.ep-on {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  /* sits on the same baseline as the family name beside it */
  line-height: 1.25;
  color: var(--gold);
  text-align: center;
}

/* ---- rules gate: the way in stays on screen ----
   Five rules plus the creed stopped fitting one phone screen in every
   language once the rally and excavation lines joined the pact. Cutting the
   rules was the wrong trade, so the tick-box and the button ride the bottom
   of the scroll area instead — the reader never has to go looking for the
   way in, and the rules above scroll under a fade rather than a hard edge. */
.gate-actions {
  position: sticky;
  bottom: 0;
  padding-top: 14px;
  padding-bottom: clamp(20px, 5vw, 30px);
  background: var(--bg);
  box-shadow: 0 -16px 20px -8px var(--bg);
}
.gate-actions .gate-check { margin-top: 0; }