/* Dungeon Blitz: the public website (6.1.0).
   World: the party's camp the night before a dungeon. Charcoal and soot are the ground; the only warm light is the
   fire, and the fire sits on the action (the ember button, the active link, the live count). Content cools into
   smoke grey the further it is from an action. Bricolage Grotesque speaks, Onest reads, the game's own hand-drawn
   screenshots carry every picture. Shared by the home, download, TamDesk, support, account, rankings, profile,
   terms and privacy pages; the admin panel (/ap/) uses the same palette at working density. */

:root {
  --bg: #0c0a09;             /* charcoal: the camp ground */
  --bg-2: #0a0b0c;           /* far from the fire: the cold edge of the night */
  --panel: rgba(19, 18, 18, .88);
  --panel-solid: #141312;    /* soot, cooling away from the fire */
  --panel-hi: #201a17;       /* raised: the visitor's own pick, a hovered row */
  --well: #0f0c0b;           /* sunken lists, inputs */
  --well-2: #090807;
  --line: rgba(190, 202, 216, .12);      /* cool slate hairline: the night, away from the fire */
  --line-soft: rgba(190, 202, 216, .07);
  --line-warm: rgba(255, 138, 61, .38);   /* an edge the fire reaches */
  --gold: #ff8a3d;           /* ember light: links, numbers, the lit edge */
  --gold-hi: #ffcf8a;        /* spark */
  --gold-deep: #e0531a;
  --ember: #ff6b1f;          /* the fire itself: the one primary action */
  --ember-glow: rgba(255, 107, 31, .42);
  --text: #f2ece6;
  --muted: #a8a19b;          /* ash */
  --smoke: #8b949f;          /* (the contract's #7c8794, lifted for 4.5:1 on the footer ground) */          /* smoke: what sits far from the fire (footer, fine print) */
  --on-gold: #1a0a02;
  --ok: #a8e0b2;
  --bad: #ffab9c;
  --dread: #ff8f73;
  --silver: #d6d9df;
  --bronze: #e0a170;
  --shadow: 0 24px 48px -20px rgba(0, 0, 0, .75);
  --shadow-sm: 0 10px 22px -10px rgba(0, 0, 0, .7);
  --radius: 14px;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: Onest, "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* a coal: the ring that carries a station's number (the number itself sits on top of it) */
  --lozenge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='24.5' fill='%23161210' stroke='%23ff8a3d' stroke-opacity='.55' stroke-width='1.2'/%3E%3Ccircle cx='26' cy='26' r='19' fill='none' stroke='%23ff6b1f' stroke-opacity='.18'/%3E%3C/svg%3E");

  /* the names the page stylesheets were written against, mapped onto the camp */
  --ink: #060505;
  --stone-hi: #2e2724;
  --stone-1: var(--panel-hi);
  --stone-2: var(--panel-solid);
  --stone-3: var(--well);
  --stone-4: var(--well-2);
  --stone: var(--panel-solid);
  --stone-dark: var(--well);
  --stone-edge: var(--line);
  --stone-light: var(--stone-hi);
  --cream: var(--text);
  --cream-dim: var(--muted);
  --orange: var(--gold);
  --orange-lit: var(--gold-hi);
  --orange-deep: var(--gold-deep);
  --teal: #3a2a22;
  --teal-lit: #4a352a;
  --teal-deep: #2a1d17;
  --btn-stone: #1d1816;
  --btn-stone-hi: #26201d;
  --btn-stone-lip: #0f0c0b;
  --red: #c8432a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-padding-top: 96px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  /* the fire lights the top of every page and the night takes over below it */
  background:
    radial-gradient(70% 520px at 18% 0, rgba(255, 107, 31, .09), rgba(255, 107, 31, 0) 70%),
    linear-gradient(180deg, #120e0c 0, var(--bg) 640px, var(--bg-2));
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--gold); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-hi); }
:where(a, button, input, select, summary, textarea):focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
::selection { background: var(--ember); color: var(--on-gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden, [hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: #3a332f var(--bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a332f; border: 3px solid var(--bg); border-radius: 8px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; margin: 0; color: var(--text); text-shadow: none; font-optical-sizing: auto; }
h1 { font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; }
h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 750; line-height: 1.1; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
p { margin: 0; }
.lede { max-width: 54ch; font-size: clamp(17px, 1.6vw, 19px); color: var(--text); }
.muted { color: var(--muted); font-size: 15px; }
.muted-text { color: var(--muted); font-size: 14px; }

/* the name inside a headline: struck in ember */
.logo-word { color: var(--ember); font-style: normal; }

/* ------------------------------------------------------------------ the top bar */
.linkbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  background: rgba(10, 9, 8, .9);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .8);
}
.linkbar-inner {
  display: flex;
  align-items: center;
  gap: 6px 18px;
  width: 100%;
  max-width: 1160px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; color: var(--text); text-decoration: none; }
/* the dragon emblem carries the name; only the studio line sits beside it */
.brand img { width: auto; height: 56px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); transition: transform .2s var(--ease-out); }
.brand-by { font: 500 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); white-space: nowrap; }
.brand:hover img { transform: scale(1.04); }
.brand:hover .brand-by { color: var(--gold-hi); }
.linkbar nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin-left: auto; }
/* a link the fire reaches: the current page carries two keylines, the ember and its glow a few pixels above */
.linkbar nav a {
  position: relative;
  padding: 12px 12px;
  color: var(--muted);
  font: 500 15px/1 var(--body);
  text-decoration: none;
  border-radius: 8px;
  transition: color .16s ease, background-color .16s ease;
}
.linkbar nav a:hover { color: var(--text); background: rgba(236, 224, 212, .05); }
.linkbar nav a[aria-current="page"] { color: var(--text); }
.linkbar nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ember);
  box-shadow: 0 -4px 0 -1px rgba(255, 107, 31, .3), 0 2px 10px var(--ember-glow);
}
.linkbar .btn { min-height: 42px; padding: 11px 18px; font-size: 15px; }

/* ------------------------------------------------------------------ buttons: the fire for the action, cold stone for the rest */
/* The ember button is the only warm light source in a view: a spark line on its top edge and a pool of light
   thrown downward onto whatever sits under it. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 24px;
  font: 650 16px/1 var(--body);
  letter-spacing: -.005em;
  text-decoration: none;
  color: var(--on-gold);
  background: var(--ember);
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .75), inset 0 -2px 0 rgba(120, 30, 0, .35), 0 14px 30px -12px var(--ember-glow);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .22s ease, background-color .16s ease, color .16s ease;
}
.btn:hover { color: var(--on-gold); background: #ff7a33; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 220, 170, .85), inset 0 -2px 0 rgba(120, 30, 0, .3), 0 20px 40px -12px rgba(255, 107, 31, .6); }
.btn:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 214, 160, .6), inset 0 2px 6px rgba(120, 30, 0, .35), 0 8px 18px -10px var(--ember-glow); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-stone {
  color: var(--text);
  background: rgba(236, 224, 212, .04);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px -14px rgba(0, 0, 0, .8);
}
.btn-stone:hover { color: var(--text); background: rgba(236, 224, 212, .08); box-shadow: inset 0 0 0 1px var(--line-warm), 0 14px 26px -14px rgba(0, 0, 0, .85); }
.btn-stone:active { box-shadow: inset 0 0 0 1px var(--line-warm); }
.btn[disabled], button.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

/* ------------------------------------------------------------------ page frame */
.page { max-width: 1160px; margin: 0 auto; padding: 40px 16px 64px; }
.page > * + * { margin-top: 48px; }
.section-gap { margin-top: 48px; }
.page > .tablet, .page > .stone { max-width: none; margin-inline: 0; }

/* ------------------------------------------------------------------ the panel */
.tablet, .stone {
  position: relative;
  padding: clamp(24px, 3.6vw, 44px);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tablet-wide { padding-inline: clamp(22px, 4.6vw, 60px); }
.well {
  position: relative;
  background: var(--well);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

/* a section's title: the heading, its note, and a hairline that starts lit by the fire and cools out to the edge */
.plaque {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
}
.plaque h2 { font-size: clamp(24px, 2.7vw, 32px); }
.plaque span { font: 400 16px/1.3 var(--body); color: var(--muted); }
.plaque::after {
  content: "";
  order: 3;
  flex: 1 1 60px;
  min-width: 40px;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, var(--line-warm), var(--line) 30%, rgba(236, 224, 212, 0));
}
.tablet-titled { padding-top: clamp(24px, 3.4vw, 40px); }

/* ------------------------------------------------------------------ framed screenshots */
.frame {
  display: block;
  margin: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.frame img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------------ the camp: the home page's first viewport
   A real in-game screenshot fills the width and sinks into the charcoal; the fire block sits in its lower left,
   with the platform downloads and the three stations of getting in. On load the scene warms up once, as if the
   fire had just caught. */
.page > .camp { margin: -40px calc(50% - 50vw) 0; }
.camp {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(86vh, 900px);
  padding: clamp(96px, 14vh, 160px) 16px clamp(36px, 6vh, 64px);
  overflow: hidden;
}
.camp-scene { position: absolute; inset: 0; z-index: -2; margin: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 88%); mask-image: linear-gradient(180deg, #000 55%, transparent 88%); }
.camp-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 18%;
  /* a little larger than the frame: the screenshot's own dark border stays outside the view */
  transform: scale(1.07);
  transform-origin: 40% 45%;
  animation: camp-catch 1.8s var(--ease-out) both;
}
/* the night closing in from the left and the bottom; the fire block reads on charcoal, the game shows on the right */
.camp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 10, 9, .96) 0, rgba(12, 10, 9, .86) 34%, rgba(12, 10, 9, .35) 62%, rgba(12, 10, 9, .05) 82%),
    linear-gradient(0deg, var(--bg) 0, rgba(12, 10, 9, .8) 16%, rgba(12, 10, 9, 0) 46%),
    linear-gradient(180deg, rgba(10, 9, 8, .7) 0, rgba(10, 9, 8, 0) 22%);
}
.camp-inner { width: 100%; max-width: 1160px; margin: 0 auto; }
.camp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 0; background: linear-gradient(180deg, rgba(12, 10, 9, 0), var(--bg)); pointer-events: none; }
.camp-inner { position: relative; z-index: 1; }
.camp-fire { position: relative; display: grid; gap: 22px; justify-items: start; max-width: 600px; }
/* the light the fire throws on the ground under the download buttons */
.camp-fire::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -20%;
  top: 34%;
  bottom: -6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 107, 31, .16), rgba(255, 107, 31, 0));
  pointer-events: none;
  animation: camp-glow 2.4s var(--ease-out) both .3s;
}
.camp-logo { width: clamp(200px, 26vw, 340px); height: auto; margin-bottom: -6px; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .6)); }
.camp h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: .98; letter-spacing: -.035em; }
.camp .lede { color: #ddd5ce; max-width: 50ch; }
.camp .btn-row { gap: 12px; }
.camp-more { color: var(--muted); font-weight: 500; text-decoration: none; }
.camp-more:hover { color: var(--gold-hi); text-decoration: underline; }
.camp .note { color: var(--smoke); font-size: 14px; max-width: 52ch; }
.camp-caption { position: absolute; right: clamp(96px, 7vw, 120px); bottom: clamp(22px, 4vh, 40px); padding: 6px 12px; border-radius: 999px; background: rgba(10, 9, 8, .62); margin: 0; color: rgba(242, 236, 230, .72); font-size: 13px; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }

/* Download, Install, Play: the way in, as three stations in a row */
.stations { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); counter-reset: station; }
.stations li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding-right: 14px; }
.stations li::before {
  counter-increment: station;
  content: counter(station);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font: 700 14px/1 var(--display);
  color: var(--gold);
  border: 1px solid var(--line-warm);
  border-radius: 50%;
  background: rgba(22, 18, 16, .8);
  font-variant-numeric: tabular-nums;
}
.stations li:first-child::before { color: var(--on-gold); background: var(--ember); border-color: var(--ember); box-shadow: 0 6px 16px -6px var(--ember-glow); }
.stations b { font: 650 15px/1.25 var(--body); color: var(--text); }
.stations span { grid-column: 2; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

@keyframes camp-catch { from { filter: brightness(.45) saturate(.6); transform: scale(1.11); } to { filter: none; transform: scale(1.07); } }
@keyframes camp-glow { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ hero */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4.5vw, 60px); }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-copy .note { color: var(--muted); font-size: 15px; max-width: 46ch; }
.hero-art { margin: 0; }
.hero-art figcaption { margin-top: 12px; text-align: center; color: var(--muted); font: italic 400 15px/1.4 var(--body); }

.feature { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); }
.feature img { width: 96px; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.feature p { color: var(--muted); }
.intro-copy { max-width: 44ch; font-size: 18px; color: var(--text); }

/* ------------------------------------------------------------------ steps: numerals cut into lozenges */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; }
.steps li { position: relative; padding: 4px clamp(14px, 2.4vw, 30px) 4px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: start; }
.steps li + li { padding-left: clamp(14px, 2.4vw, 30px); }
.steps li + li::after { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line-soft); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font: 800 19px/1 var(--display);
  color: var(--gold);
  font-variant-numeric: lining-nums;
  background: var(--lozenge) center / contain no-repeat;
}
.steps b { display: block; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; color: var(--text); align-self: end; }
.steps p { color: var(--muted); font-size: 16px; grid-column: 2; }
.fine-print { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------------ prose blocks and FAQ */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 54px); }
.split h2, .split h3 { margin-bottom: 10px; }
.split p { color: var(--text); max-width: 56ch; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 28px; }
.checklist li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; background: var(--ember); border-radius: 50%; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--well); border: 1px solid var(--line-soft); border-radius: 8px; transition: border-color .16s ease; }
.faq details[open] { border-color: var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 16px 52px 15px 20px; font: 700 17px/1.3 var(--display); color: var(--text); border-radius: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 13px; height: 1.5px; margin-top: -1px; background: var(--gold); transition: transform .22s var(--ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover { color: var(--gold-hi); }
.faq details p { padding: 0 22px 18px 20px; color: var(--muted); max-width: 66ch; }

/* ------------------------------------------------------------------ rank medals and class tags (home, rankings) */
.medal {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font: 800 15px/1 var(--display);
  color: var(--on-gold);
  background: #6d665f;
  box-shadow: 0 0 0 1px rgba(255, 230, 190, .25) inset, 0 3px 8px rgba(0, 0, 0, .45);
  font-variant-numeric: lining-nums tabular-nums;
}
.medal.r1 { background: var(--gold-hi); box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.medal.r2 { background: #c9ced6; }
.medal.r3 { background: var(--bronze); }
.medal.plain { background: transparent; color: var(--muted); box-shadow: none; }

.cls { display: inline-block; margin-left: 8px; padding: 1px 8px 2px; border: 1px solid currentColor; border-radius: 999px; font: 700 12px/16px var(--body); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; color: #c9c2bb; background: rgba(0, 0, 0, .25); }
.cls.paladin { color: #f2d08a; }
.cls.mage { color: #a9c8ff; }
.cls.rogue { color: #aee6a0; }

/* ------------------------------------------------------------- hero portraits (home Top Heroes, rankings) */
/* The head is drawn by the game itself and sent to the server; it sits in a dark medallion ringed in the class colour. */
.portrait {
  --size: 52px;
  --ring: #a39d98;
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, #26201d, #110e0d);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
  vertical-align: middle;
}
.portrait.paladin { --ring: #f2d08a; }
.portrait.mage { --ring: #a9c8ff; }
.portrait.rogue { --ring: #aee6a0; }
.portrait img {
  position: absolute;
  inset: 0 -8% -14%;
  width: 116%;
  max-width: none;
  height: 114%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ring), inset 0 -6px 10px -4px rgba(0, 0, 0, .55);
  pointer-events: none;
}
/* no portrait yet: a hooded silhouette in the class colour */
.portrait.empty::before {
  content: "";
  position: absolute;
  inset: 18% 14% -4%;
  background: var(--ring);
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3c-6.6 0-11 5-11 11.4 0 3.9 1.6 7.2 4.2 9.2C7.4 25.4 3 29.7 2 36.5V40h36v-3.5c-1-6.8-5.4-11.1-11.2-12.9 2.6-2 4.2-5.3 4.2-9.2C31 8 26.6 3 20 3Z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3c-6.6 0-11 5-11 11.4 0 3.9 1.6 7.2 4.2 9.2C7.4 25.4 3 29.7 2 36.5V40h36v-3.5c-1-6.8-5.4-11.1-11.2-12.9 2.6-2 4.2-5.3 4.2-9.2C31 8 26.6 3 20 3Z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.portrait.sm { --size: 40px; }
.portrait.xs { --size: 30px; }
.portrait.sm::after, .portrait.xs::after { box-shadow: inset 0 0 0 1.5px var(--ring); }

/* rank medal pinned to the portrait's lower left, like a level badge on a unit frame */
.hero-badge { position: relative; flex: none; display: inline-block; line-height: 0; }
.hero-badge .medal { position: absolute; left: -6px; bottom: -4px; width: 24px; height: 24px; font-size: 12px; z-index: 1; }
.hero-badge .medal.plain { background: var(--panel-solid); color: var(--text); box-shadow: 0 0 0 1px var(--line) inset; }

/* ------------------------------------------------------------------ the home page's side boards
   Two ad boards (left) and the Top Heroes board (right). On wide screens they stand fixed beside the page;
   narrower, they line up under the hero. Filled by /side-boards.js from /api/ad-boards and /api/rankings. */
.side-boards {
  --rail-w: clamp(220px, calc((100vw - 1160px) / 2 - 32px), 330px);
  --rail-x: max(16px, calc(((100vw - 1160px) / 2 - var(--rail-w)) / 2));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: 40px 24px;
}
.side-boards > .stone { padding: 18px 18px 20px; }

.ad-board { position: relative; }
.ad-board[hidden] { display: none !important; }
.ad-link { display: grid; gap: 12px; color: var(--text); text-decoration: none; border-radius: 6px; }
.ad-link:hover { color: var(--text); }
.ad-link:focus-visible { outline-offset: 8px; }
.ad-tag {
  position: absolute;
  top: -11px;
  right: 18px;
  z-index: 2;
  padding: 4px 10px 4px;
  font: 700 11px/1 var(--display);
  letter-spacing: .08em;
  color: var(--gold);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ad-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  background: var(--well-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.ad-media img.ad-cover { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out), filter .3s ease; }
.ad-media.is-icon { background: linear-gradient(180deg, #2a1a12, var(--well-2)); }
.ad-media .ad-badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  background: var(--text);
  border-radius: 18px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .5);
}
.ad-media .ad-badge img, .ad-media .ad-badge svg { width: 46px; height: 46px; object-fit: contain; }
.ad-media .ad-badge svg { color: #2e2724; }
.ad-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 700 18px/1.2 var(--display);
  color: var(--gold-hi);
  text-wrap: balance;
}
.ad-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: -4px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ad-host { display: flex; align-items: center; gap: 9px; min-width: 0; padding-top: 11px; color: var(--gold); font: 700 14px/1.2 var(--body); border-top: 1px solid var(--line-soft); }
.ad-host .ad-chip { flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: var(--text); border-radius: 6px; }
.ad-host .ad-chip img, .ad-host .ad-chip svg { width: 15px; height: 15px; object-fit: contain; }
.ad-host .ad-chip svg { color: #2e2724; }
.ad-host span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-host .ad-go { flex: none; width: 18px; height: 18px; margin-left: auto; transition: transform .2s var(--ease-out); }
.ad-link:hover .ad-cover { transform: scale(1.04); filter: brightness(1.06); }
.ad-link:hover .ad-title { color: var(--gold); }
.ad-link:hover .ad-go { transform: translate(2px, -2px); }

.top-heroes .plaque { margin-bottom: 8px; }
.top-heroes .plaque h2 { font-size: 21px; white-space: nowrap; }
.top-list { list-style: none; margin: 0; padding: 0; display: grid; }
.top-list li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 10px 2px 10px 6px; }
.top-list .portrait { --size: 44px; }
.top-list li + li { border-top: 1px solid var(--line-soft); }
.top-list .who { min-width: 0; }
.top-list .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 17px; }
.top-list .who > span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.top-list .who .cls { margin-left: 0; margin-right: 6px; }
.top-list .pts { font: 800 17px/1 var(--display); color: var(--text); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.top-list .pts small { display: block; margin-top: 4px; font: 500 12px/1 var(--body); letter-spacing: .04em; color: var(--muted); }
.top-list li:first-child .who b { color: var(--gold-hi); }
.top-empty { padding: 14px 4px 6px; color: var(--muted); font-size: 15px; }
.top-heroes .btn { width: 100%; min-height: 44px; margin-top: 14px; padding: 11px 16px; font-size: 15px; }
.top-heroes .btn svg { width: 18px; height: 18px; }
.top-list .hero-link { color: inherit; text-decoration: none; }
.top-list .hero-link::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.top-list li:hover .hero-link { color: var(--gold-hi); }
.top-list li:has(.hero-link:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: -2px; border-radius: 6px; }
.top-list .hero-link:focus-visible { outline: none; }

/* wide screens: pinned beside the page, outside the scrolling panels */
@media (min-width: 1680px) and (min-height: 820px) {
  .page > .side-boards { display: block; height: 0; margin: 0; }
  .side-boards > * { position: fixed; z-index: 40; width: var(--rail-w); animation: rail-in .7s var(--ease-out) both .15s; }
  .ad-board[data-ad-slot="top"] { left: var(--rail-x); top: 110px; }
  .ad-board[data-ad-slot="bottom"] { left: var(--rail-x); bottom: 26px; --from: -28px; animation-delay: .3s; }
  .ad-board { --from: -28px; }
  .top-heroes { right: var(--rail-x); top: 110px; --from: 28px; }
}
@keyframes rail-in { from { transform: translateX(var(--from, 0)); } to { transform: none; } }

/* ------------------------------------------------------------------ footer */
/* the far edge of the camp: smoke, not fire */
.site-foot { margin-top: 72px; padding: 32px 16px 40px; background: rgba(6, 6, 7, .7); border-top: 1px solid var(--line-soft); color: var(--smoke); font-size: 15px; }
.site-foot-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot a { color: var(--muted); font-weight: 500; text-decoration: none; }
.site-foot a:hover { color: var(--gold-hi); text-decoration: underline; }
.site-foot .foot-community { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.site-foot .foot-community a { font-weight: 500; }
.community-links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.community-links h2 { font-size: 19px; margin: 0 0 6px; }
.community-links p { margin: 0 0 8px; color: var(--muted); }
.community-links ul { margin: 0; padding-left: 20px; }
.community-links li::marker { color: var(--gold); }
.community-links a { font-weight: 700; }
.site-foot .legal { color: var(--muted); }
/* 6.3.0: the rights note sits at the very bottom of every page; a short page pushes the footer down to the window edge */
body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.site-foot .fan-note { flex: 1 1 380px; max-width: 64ch; margin: 0; color: var(--smoke); font-size: 14px; line-height: 1.6; }
.site-foot .fan-note strong { color: var(--text); font-weight: 600; }
.site-foot .foot-social { display: inline-flex; align-items: center; gap: 6px; }
.site-foot .foot-social img { width: 16px; height: 16px; border-radius: 3px; background: var(--text); object-fit: contain; }
body[data-social-dock] .site-foot { padding-bottom: 96px; }

/* ------------------------------------------------------------------ the admin's social buttons, always bottom right */
.social-dock {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  --dock-bg: #1a1817;
  --dock-ink: #f2ece6;
}
.social-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--dock-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
  text-decoration: none;
  animation: dock-in .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 300ms);
  transition: transform .18s var(--ease-out), border-color .18s ease;
}
.social-btn:hover { transform: translateY(-3px); border-color: var(--gold); }
.social-btn:active { transform: translateY(0); }
.social-icon { display: grid; place-items: center; width: 34px; height: 34px; background: #cfc9c3; border-radius: 8px; }
.social-icon img, .social-icon svg { width: 22px; height: 22px; object-fit: contain; }
.social-icon svg { color: #2e2724; }
.social-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  translate: 0 -50%;
  padding: 7px 12px;
  font: 700 14px/1.1 var(--display);
  color: var(--gold-hi);
  white-space: nowrap;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 6px;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .16s ease, transform .2s var(--ease-out);
}
.social-btn:hover .social-tip, .social-btn:focus-visible .social-tip { opacity: 1; transform: none; }
@keyframes dock-in { from { transform: translateX(28px); } to { transform: none; } }

/* ------------------------------------------------------------------ forms */
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: 500 17px/1.4 var(--body);
  color: var(--text);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 8px;
  caret-color: var(--gold);
  transition: border-color .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: #8a837d; opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: rgba(255, 138, 61, .6); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); background: var(--well-2); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.field { margin: 0 0 20px; }
.field label { display: block; margin: 0 0 8px; font: 600 15px/1.2 var(--body); color: var(--text); }
.error { min-height: 22px; margin: 6px 0 12px; font-size: 15px; font-weight: 700; color: var(--bad); }
.ok-msg { color: var(--ok); }
.card-head { margin-bottom: 24px; }
.card-head h2 { margin-bottom: 8px; }
.card-head p { color: var(--muted); }
.info-list { display: grid; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.info-list svg { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--gold); }
.info-list strong { display: block; color: var(--text); font-weight: 700; }
.privacy-note { margin-top: 16px; color: var(--muted); font-size: 14px; }
.chat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.chat-top .card-head { margin: 0; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: 700 13px/1 var(--display); letter-spacing: .03em; color: var(--ok); background: rgba(90, 170, 110, .1); border: 1px solid rgba(140, 210, 160, .35); border-radius: 999px; white-space: nowrap; }
.live-pill::before { content: ""; width: 7px; height: 7px; background: #79d38f; border-radius: 50%; }
#cs-expiry { margin: 14px 0; color: var(--muted); font-size: 14px; }
#cs-messages { display: flex; flex-direction: column; gap: 12px; min-height: 260px; max-height: min(48vh, 480px); overflow-y: auto; padding: 14px; margin-bottom: 16px; }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.msg small { display: block; margin-top: 6px; font-size: 12px; opacity: .78; }
.msg.user { align-self: flex-end; color: var(--on-gold); background: var(--ember); border-bottom-right-radius: 3px; }
.msg.admin { align-self: flex-start; color: var(--text); background: var(--panel-hi); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.sys { align-self: center; max-width: 100%; text-align: center; color: var(--muted); background: transparent; border: 1px dashed var(--line-soft); font-size: 14px; }
.send-row { display: flex; gap: 10px; }
.send-row input { flex: 1; min-width: 0; }
.send-row .btn { min-height: 48px; }
#cs-new { margin-top: 14px; }
.support-grid { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(24px, 4vw, 48px); }
.support-grid > * + * { margin-top: 0; }
.support-intro { display: grid; gap: 18px; align-content: start; }

/* commands in help text (download page, Linux) */
code { padding: 1px 6px; font: 500 .88em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--gold-hi); background: var(--well-2); border: 1px solid var(--line-soft); border-radius: 4px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ terms / privacy */
.legal-page .lede { max-width: 70ch; }
h1 + .lede { margin-top: 16px; }
.legal-meta { margin-top: 14px; color: var(--muted); font-size: 15px; }
.legal-body h3 { margin: 22px 0 8px; font-size: 19px; }
.legal-body h3:first-of-type { margin-top: 4px; }
.legal-body p, .legal-body li { color: var(--text); max-width: 74ch; }
.legal-body p + p { margin-top: 10px; }
.legal-body ul { margin: 0 0 6px; padding-left: 22px; display: grid; gap: 8px; }
.legal-body ul + p { margin-top: 12px; }
.legal-body li::marker { color: var(--gold); }
.legal-body strong { color: var(--gold-hi); font-weight: 700; }

/* ------------------------------------------------------------------ live player count */
.online-pill {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 5px 14px 5px 8px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .16s ease, background-color .16s ease;
}
.online-pill[hidden] { display: none; }
.online-pill:hover { color: var(--text); border-color: var(--gold); background: var(--panel-hi); }
.online-heads { display: flex; padding-left: 8px; }
.online-heads[hidden] { display: none; }
.online-heads img {
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border-radius: 50%;
  object-fit: cover;
  background: #26201d;
  border: 2px solid var(--panel-solid);
}
.online-dot {
  width: 9px;
  height: 9px;
  margin-left: -12px;
  align-self: flex-end;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #79d38f;
  border: 2px solid var(--panel-solid);
}
.online-heads[hidden] + .online-dot { margin-left: 0; align-self: center; margin-bottom: 0; }
.online-pill b { font: 800 16px/1 var(--display); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.online-label { font: 500 14px/1 var(--body); color: var(--muted); }
/* no room beside the bar: the bar's own row takes the count, between the links and the button */
@media (max-width: 1320px) {
  .linkbar { flex-wrap: wrap; align-items: center; gap: 0 14px; min-height: 68px; }
  .linkbar-inner { display: contents; }
  .brand { order: 1; }
  .linkbar nav { order: 2; }
  .online-pill { order: 3; position: static; translate: none; min-height: 34px; padding: 3px 12px 3px 6px; }
  .linkbar .btn { order: 4; }
  .online-pill b { font-size: 14px; }
  .online-label { font-size: 13px; }
  .online-heads img { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1020px) {
  .linkbar nav a { padding-inline: 9px; font-size: 14px; }
}
@media (max-width: 900px) {
  /* small screens: the game on top, the fire block under it on charcoal */
  .camp { min-height: 0; padding-top: min(58vw, 380px); }
  .camp-scene { bottom: auto; height: min(78vw, 520px); }
  .camp::before {
    background: linear-gradient(180deg, rgba(10, 9, 8, .6) 0, rgba(10, 9, 8, 0) 90px);
  }
  .camp-caption { display: none; }
  .stations { grid-template-columns: 1fr; gap: 14px; }
  .hero-grid, .split, .support-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps li, .steps li + li { padding: 0; }
  .steps li + li { padding-top: 22px; }
  .steps li + li::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
}
@media (max-width: 860px) {
  /* the bar stops following the page: two rows would cover too much of a small screen */
  .linkbar { position: relative; padding-top: 10px; }
  .online-pill { margin-left: auto; }
  .linkbar nav { order: 5; flex: 1 0 100%; flex-wrap: nowrap; justify-content: flex-start; margin: 4px -16px 0; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .linkbar nav::-webkit-scrollbar { display: none; }
  .linkbar nav a { flex: none; padding: 13px 10px; }
  html { scroll-padding-top: 16px; }
}
@media (max-width: 560px) {
  /* one row for the brand, the live count and the download; the links scroll under it */
  .online-pill { order: 3; margin-left: auto; padding: 3px 10px 3px 6px; }
  .online-label { display: none; }
  .online-heads { display: none; }
  .online-heads + .online-dot { margin-left: 0; align-self: center; margin-bottom: 0; }
  .linkbar .btn { margin-left: 0; }
}
@media (max-width: 720px) {
  .page { padding: 28px 16px 56px; }
  .page > * + *, .section-gap { margin-top: 36px; }
  /* small screens: the links leave the corner (they covered the downloads) and close the page under the footer */
  .social-dock { position: static; flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 0 16px 28px; background: rgba(6, 6, 7, .7); }
  .social-btn { animation: none; }
  body[data-social-dock] .site-foot { padding-bottom: 20px; }
  .social-btn { width: 48px; height: 48px; border-radius: 10px; }
  .social-icon { width: 30px; height: 30px; border-radius: 7px; }
  .social-tip { display: none; }
  .send-row { flex-wrap: wrap; }
  .send-row .btn { width: 100%; }
  .msg { max-width: 92%; }
}
@media (max-width: 440px) {
  .btn-row .btn { width: 100%; }
  .brand-by { display: none; }
  .brand img { height: 46px; }
  .linkbar .btn { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

/* below the wide-screen rails the Top Heroes stand in the page as an open list, not a boxed card (6.1.0) */
@media not ((min-width: 1680px) and (min-height: 820px)) {
  .side-boards > .top-heroes { padding: 0; background: transparent; border: 0; box-shadow: none; }
}
.social-icon.is-mono { font: 800 17px/1 var(--display); color: #1a1817; }