/* ════════════════════════════════════════════════════════════════════════════
   DECKED OUT 2 — page-specific styles
   ────────────────────────────────────────────────────────────────────────────
   Layered on /stylings/wonder.css. The base provides typography (Jersey 15 +
   EB Garamond), the site palette, and shared components (.site-nav,
   .page-footer).

   DO2 has its own color identity within the site family:
     - Site paper background (kept — that's the family resemblance)
     - Frostdeep blue (#004466) as the accent, replacing the teal used on
       other pages
     - Cold-ice cyan highlights for hover states and emphasis

   The hero uses a darkened blue panel with a subtle radial glow to
   evoke the Citadel's interior — paper outside, cold dungeon inside.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* DO2-specific palette layered on top of wonder.css's :root */
  --do2-deep:   #004466;
  --do2-mid:    #1a6090;
  --do2-glow:   #8fc4e3;
  --do2-ice:    #cfdfff;
  --do2-cold:   #2a3a48;
}

/* ─── HERO ─────────────────────────────────────────────────────────────── */

.do2-hero {
  position: relative;
  width: 100%;
  min-height: 320px;
  padding: 5rem 2rem 4rem;
  background:
    linear-gradient(180deg, #001a2a 0%, #002238 60%, #002a44 100%);
  overflow: hidden;
  text-align: center;
}

/* Subtle radial glow behind the title — Frostdeep's torchlight */
.do2-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%,
    rgba(143, 196, 227, 0.18) 0%,
    rgba(143, 196, 227, 0.06) 30%,
    transparent 70%);
  pointer-events: none;
}

.do2-hero-content {
  position: relative;
  z-index: 1;
  max-width: 70ch;
  margin: 0 auto;
}

.do2-eyebrow {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--do2-glow);
  margin-bottom: 0.6rem;
}

.do2-hero-mark {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #f0e8d4;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 0 30px rgba(143, 196, 227, 0.4),
    0 0 60px rgba(143, 196, 227, 0.2);
}

.do2-hero-tag {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--do2-ice);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ─── SECTION NAV ──────────────────────────────────────────────────────── */

.do2-section-nav {
  position: sticky;
  top: 53px;
  z-index: 50;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 0.8rem 2rem;
  background: rgba(0, 68, 102, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.do2-section-nav a {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--do2-ice);
  letter-spacing: 0.06em;
  border-bottom: none;
  text-transform: uppercase;
  position: relative;
}

.do2-section-nav a:hover { color: #f0e8d4; }

.do2-section-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--do2-glow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.do2-section-nav a:hover::after { transform: scaleX(1); }

/* ─── MAIN ─────────────────────────────────────────────────────────────── */

.do2-main {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.do2-section {
  margin: 4rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-line);
  scroll-margin-top: 130px;
}

.do2-section-first { border-top: none; padding-top: 0; margin-top: 0; }

.do2-section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--do2-deep);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.do2-section-intro {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

/* ─── ABOUT / WELCOME ──────────────────────────────────────────────────── */

.do2-welcome-lead {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}

.do2-welcome-lead::first-letter {
  font-family: var(--font-display);
  font-size: 3rem;
  float: left;
  line-height: 0.85;
  padding: 0.25rem 0.5rem 0 0;
  color: var(--do2-deep);
}

.do2-welcome {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 1rem;
}

.do2-welcome-small {
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 60ch;
  margin: 1rem 0;
}

.do2-server-address {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.6rem 1rem 0.6rem 0;
  background: rgba(0, 68, 102, 0.08);
  border-left: 4px solid var(--do2-deep);
}

.do2-server-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--do2-deep);
  padding-left: 1rem;
}

.do2-server-ip {
  font-family: var(--font-display);
  font-size: 1.3rem;
  background: var(--do2-cold);
  color: #f0e8d4;
  padding: 0.25rem 0.8rem;
  letter-spacing: 0.04em;
  user-select: all;
}

/* ─── VIDEO ────────────────────────────────────────────────────────────── */

.do2-video {
  background: rgba(0, 68, 102, 0.06);
  border: 1px solid var(--paper-line);
  padding: 1rem;
}

.do2-video video {
  width: 100%;
  height: auto;
  max-height: 600px;
  display: block;
  background: #000;
  border: 1px solid var(--do2-cold);
}

.do2-video-credit {
  margin-top: 0.6rem;
  font-style: italic;
  color: var(--ink-faded);
  font-size: 0.95rem;
  text-align: center;
}

/* ─── CLIENT DOWNLOAD CARD ─────────────────────────────────────────────── */

.do2-client-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: rgba(255, 251, 240, 0.5);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--do2-deep);
  padding: 1.2rem 1.5rem;
  transition: all 0.15s ease;
}

.do2-client-card:hover {
  background: rgba(255, 251, 240, 0.75);
  box-shadow: 0 4px 14px rgba(0, 68, 102, 0.12);
}

.do2-client-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.do2-client-meta {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.do2-client-download {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  background: var(--do2-deep);
  color: #f0e8d4;
  border-bottom: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.do2-client-download:hover {
  background: var(--do2-mid);
  color: #fff;
  transform: translateY(-1px);
}

/* ─── HALL OF FAME ─────────────────────────────────────────────────────── */
/*
  All-time records. Five cards (one per category), each with a small
  table of holders. The first holder gets gold styling; second/third get
  silver/bronze; everyone else reads as plain entries. Notes appear in
  their own row below the holder for narrative flavor.

  The color choices mirror rank.php's old palette but adjusted for the
  paper background — same deep-amber gold, slate silver, burnt umber
  bronze that's used on the Wonderbit chronicle.
*/

.do2-hall-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.do2-hall-card {
  background: rgba(255, 251, 240, 0.5);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--do2-deep);
  padding: 1.2rem 1.5rem;
}

.do2-hall-card-head {
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--paper-line);
}

.do2-hall-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--do2-deep);
  text-transform: uppercase;
  margin: 0;
}

.do2-hall-card-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0.2rem 0 0;
}

.do2-hall-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 1.05rem;
}

.do2-hall-row td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--paper-line);
}

.do2-hall-row:last-of-type td,
.do2-hall-note-row:last-of-type td {
  border-bottom: none;
}

/* Rank symbol column — narrow, centered, medal emoji or dot */
.do2-hall-rank {
  width: 2.5rem;
  text-align: center;
  font-size: 1.2rem;
}

/* Player name — wide, the visual anchor of each row */
.do2-hall-player {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* The value — right-aligned, monospace-ish via Jersey for tabular feel */
.do2-hall-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-align: right;
  color: var(--do2-deep);
  white-space: nowrap;
  padding-right: 1rem !important;
}

/* Date — small, right-aligned, dim */
.do2-hall-date {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--ink-faded);
  text-align: right;
  white-space: nowrap;
  width: 7rem;
}

/* Note row — full-width italic prose below a holder row.
   Border-bottom on the .do2-hall-row above gets removed when followed
   by a note row, so the visual unit (row + note) reads as one entry. */
.do2-hall-row:has(+ .do2-hall-note-row) td {
  border-bottom: none;
  padding-bottom: 0.2rem;
}

.do2-hall-note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  padding: 0 0.6rem 0.7rem 3.1rem !important;
  border-bottom: 1px solid var(--paper-line);
  text-wrap: pretty;
}

/* Top three styling — gold/silver/bronze, palette matched to the paper bg.
   Same colors as the rest of the chronicle: deep amber, slate, burnt umber. */
.do2-hall-row-gold   .do2-hall-player,
.do2-hall-row-gold   .do2-hall-value   { color: #a8830d; font-weight: 500; }
.do2-hall-row-silver .do2-hall-player,
.do2-hall-row-silver .do2-hall-value   { color: #4a5a6a; font-weight: 500; }
.do2-hall-row-bronze .do2-hall-player,
.do2-hall-row-bronze .do2-hall-value   { color: #8b5a2b; font-weight: 500; }
/* .do2-hall-row-rest gets default ink — no rule needed. */

.do2-hall-empty {
  font-style: italic;
  color: var(--ink-faded);
  text-align: center;
  padding: 1.5rem 1rem;
  margin: 0;
}

/* Carry the "lol-empty" class from the LoW page for consistency —
   used in the loading state. */
.lol-empty {
  text-align: center;
  font-style: italic;
  color: var(--ink-faded);
  padding: 2rem 1rem;
}

/* ─── JOIN (Discord CTA) ───────────────────────────────────────────────── */

.do2-join-box {
  background: rgba(0, 68, 102, 0.06);
  border: 1px solid var(--do2-deep);
  padding: 2rem;
  text-align: center;
}

.do2-join-line {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: 55ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.do2-join-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.do2-join-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
  background: var(--do2-deep);
  color: #f0e8d4;
  border-bottom: none;
  transition: all 0.15s ease;
}

.do2-join-cta:hover {
  background: var(--do2-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 68, 102, 0.4);
}

.do2-join-fineprint {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.do2-join-fineprint code {
  background: rgba(0, 68, 102, 0.12);
  color: var(--do2-deep);
  padding: 0.05rem 0.4rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .do2-hero { min-height: 240px; padding: 3rem 1.2rem 2.5rem; }

  .do2-section-nav {
    gap: 1rem;
    padding: 0.6rem 1rem;
    top: 48px;
  }
  .do2-section-nav a { font-size: 0.95rem; }

  .do2-main { padding: 2rem 1rem 3rem; }
  .do2-section { margin: 2.5rem 0; }
  .do2-section-title { font-size: 1.7rem; }

  .do2-client-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .do2-client-download { width: 100%; text-align: center; }

  .do2-server-address {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
  }
  .do2-server-label { padding-left: 0; }
  .do2-server-ip { font-size: 1.05rem; }
}