:root {
  --void: #081014;
  --gold: #d4a64d;
  --gold-bright: #f4d37d;
  --ink: #eff4ee;
  --ink-dim: #a8b8ae;
  --line: rgba(95, 214, 205, 0.28);
  --cyan: #61d6d0;
  --green: #80d69a;
  --amber: #e7b96a;
  --red: #e48d79;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    linear-gradient(180deg, #081014, #102026 42%, #071014),
    repeating-linear-gradient(90deg, rgba(95, 214, 205, 0.05) 0 1px, transparent 1px 96px);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.68;
  overflow-x: hidden;
}
a { color: var(--cyan); }
.wrap {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}
.top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 40px;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; }
.brand span {
  color: var(--gold-bright);
  font-weight: 700;
  text-transform: uppercase;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
}
.locale-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -18px 0 22px;
  font-size: 13px;
}
.locale-links a[aria-current="page"] {
  color: var(--gold-bright);
  text-decoration: none;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: center;
  padding: clamp(18px, 3vw, 34px) 0 clamp(28px, 5vw, 54px);
  border-bottom: 1px solid var(--line);
}
.hero > * { min-width: 0; }
.kicker,
.updated,
th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kicker {
  color: var(--cyan);
  font-size: 12px;
  text-transform: uppercase;
}
h1, h2, h3 {
  color: var(--gold-bright);
  line-height: 1.18;
}
h1 {
  margin: 12px 0 18px;
  font-size: clamp(34px, 5vw, 56px);
  overflow-wrap: anywhere;
}
h2 { margin-top: 0; font-size: clamp(25px, 3vw, 34px); }
h3 { font-size: 21px; }
.lead { font-size: 19px; color: #ded5c3; }
.updated { color: var(--ink-dim); font-size: 12px; }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.btn {
  display: inline-block;
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  font-weight: 700;
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.btn.secondary { color: var(--gold-bright); background: transparent; }
figure { margin: 18px 0; }
.hero figure { margin: 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(95, 214, 205, 0.22);
  border-radius: 6px;
}
figcaption { margin-top: 8px; color: var(--ink-dim); font-size: 14px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 26px 0;
}
.card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
}
.card strong {
  display: block;
  color: var(--gold-bright);
  font-size: 24px;
  line-height: 1.15;
}
.card span { display: block; margin-top: 8px; color: var(--ink-dim); font-size: 14px; }
section {
  min-width: 0;
  padding: clamp(28px, 5vw, 52px) 0;
  border-bottom: 1px solid rgba(95, 214, 205, 0.18);
}
.toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  padding-left: 22px;
}
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(95, 214, 205, 0.18);
  border-radius: 6px;
}
table { width: 100%; border-collapse: collapse; min-width: 850px; }
th, td {
  border-bottom: 1px solid rgba(200, 163, 90, 0.16);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--cyan);
  background: rgba(8, 16, 20, 0.82);
  font-size: 13px;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
.boss, .quest, .finale {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.boss { color: var(--red); }
.quest { color: var(--green); }
.finale { color: var(--amber); }
.note {
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  background: rgba(200, 163, 90, 0.08);
}
.checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.checklist div { border-top: 2px solid var(--cyan); padding: 14px 0; }
.checklist li { border-top: 2px solid var(--cyan); padding: 14px 0; }
.checklist strong { display: block; color: var(--green); }
details { border-top: 1px solid rgba(200, 163, 90, 0.2); padding: 16px 0; }
details:last-child { border-bottom: 1px solid rgba(200, 163, 90, 0.2); }
summary { cursor: pointer; color: var(--gold-bright); font-weight: 700; }
footer { margin-top: 28px; color: var(--ink-dim); font-size: 14px; }
@media (max-width: 860px) {
  .top, .hero { align-items: flex-start; grid-template-columns: 1fr; }
  .top { flex-direction: column; }
  .top nav { width: 100%; max-width: 100%; }
  .top nav a, .locale-links a { overflow-wrap: anywhere; }
  .stats, .checklist { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 20px, 1100px); }
  .top,
  .hero,
  .hero > *,
  .cta-row,
  .lead,
  .updated,
  figure,
  figure img {
    width: 100%;
    max-width: 100%;
  }
  .top nav,
  .locale-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .top nav a,
  .locale-links a {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  h1 {
    font-size: 28px;
    overflow-wrap: normal;
  }
  .lead { font-size: 17px; }
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
  .stats, .checklist, .toc { grid-template-columns: 1fr; }
}

.starting-points-page .hero { min-width: 0; }
@media (max-width: 560px) {
  .starting-points-page .wrap {
    width: min(355px, calc(100% - 20px));
    margin-left: 10px;
    margin-right: 0;
  }
  .starting-points-page .hero { display: block; }
  .starting-points-page .hero > *,
  .starting-points-page .hero h1,
  .starting-points-page .hero .lead,
  .starting-points-page .hero .checked {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}