/* Light grey and blue, with game touches: a condensed display face (Anton) for headings and
   wordmarks, slanted buttons, cut-corner cards and angled section edges. */
:root {
  --bg: #e6e9ef;
  --bg-2: #dde2ec;
  --wordmark: #cbd3e5;
  --ink: #10162b;
  --muted: #59617a;
  --accent: #1f43c4;
  --accent-ink: #fff;
  --card: #f3f5f9;
  --card-2: #eef1f6;
  --line: rgba(16, 22, 43, .07);
  --line-2: #cdd3e0;
  --night: #0d1226;
  --display: Anton, Impact, "Arial Narrow", sans-serif;
  /* Height of the angled edge on the slanted sections. */
  --slant: clamp(28px, 5vw, 90px);
  /* Width of the slanted ends on buttons. */
  --cut: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Onest, system-ui, sans-serif;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--accent-ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 6vw, 88px);
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
.nav.is-scrolled {
  background: rgba(230, 233, 239, .78);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__brand { font-family: var(--display); font-size: 22px; letter-spacing: .06em; }
/* Top middle: Home and Discord. */
.nav__links { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 36px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.nav__links a { opacity: .65; transition: opacity .2s, color .2s; }
.nav__links a:hover { opacity: 1; color: var(--accent); }
/* Top right: Download and Log in (the account name once logged in, session.js). */
.nav__right { display: flex; gap: 10px; align-items: center; }
/* Phone menu button and the Download link that only the phone menu shows (end of this file). */
.nav__menu, .nav__menu-only { display: none; }

/* ---------- Buttons ---------- */
/* Slanted ends (clip-path), and a light sheen that sweeps across on hover. */
.btn {
  position: relative; overflow: hidden;
  display: inline-block; padding: 15px 34px;
  background: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .1em;
  border: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  transition: transform .2s, background .2s, color .2s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  translate: -120% 0; transition: translate .6s;
}
.btn:hover { transform: translateY(-2px); background: #2a52dc; }
.btn:hover::after { translate: 120% 0; }
.btn--ghost { background: rgba(31, 67, 196, .1); color: var(--accent); }
.btn--ghost:hover { background: rgba(31, 67, 196, .18); }
/* Placeholder button until downloads / sign-up exist. */
.btn--soon { cursor: default; opacity: .6; }
.btn--soon:hover { transform: none; background: var(--accent); }
.btn--soon::after { content: none; }
.btn--sm { --cut: 8px; padding: 9px 20px; font-size: 12px; }

/* ---------- Hero ---------- */
/* Two columns: text left, character right. The character only ever fills its own column,
   so it never covers the text at any window size. */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 0 clamp(20px, 6vw, 88px);
  display: grid; align-items: end;
  grid-template-columns: minmax(0, clamp(420px, 32vw, 640px)) minmax(0, 1fr);
  /* Wider than the pointer drift (data-mouse) so the art never slides onto the text. */
  column-gap: clamp(40px, 4vw, 96px);
  /* The character is cut off cleanly at the hero's bottom edge, also while the parallax moves it. */
  overflow: hidden;
  /* 100cqw (the hero's content width) lets .hero__char work out its column's width. */
  container-type: inline-size;
}
.hero__wordmark, .dl__wordmark, .play__wordmark {
  font-family: var(--display); line-height: .85;
  color: var(--wordmark);
  white-space: nowrap; user-select: none;
  will-change: transform;
}
.hero__wordmark {
  position: absolute; left: 50%; top: 11vh;
  translate: -50% 0;
  font-size: clamp(110px, 25vw, 460px);
}
/* Soft blue light behind the character, high enough to fade out before the hero's bottom edge. */
.hero__glow {
  position: absolute; right: 6vw; bottom: 6vh;
  width: 50vw; height: 50vw; max-width: 1200px; max-height: 1200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 67, 196, .22), transparent 62%);
  will-change: transform;
}
.hero__char {
  grid-column: 2; grid-row: 1; position: relative; justify-self: end;
  /* As tall as the column is wide (the whole figure), but never shorter than the window:
     in a narrow column the right side is cropped (scythe blade) instead of the figure
     shrinking. His left is never cropped here (the phone layout below may crop it).
     Never wider than its column, so it stays off the text. The legs run past the bottom
     edge and are cut off there. */
  --col: calc(100cqw - clamp(420px, 32vw, 640px) - clamp(40px, 4vw, 96px));
  --h: min(116vh, 72vw, max(100vh, var(--col) * 1410 / 1400));
  width: min(100%, var(--h)); height: var(--h); max-width: none;
  object-fit: cover; object-position: left top;
  margin-bottom: -20vh;
  filter: drop-shadow(0 30px 40px rgba(13, 18, 38, .28));
  will-change: transform;
  animation: rise 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
.hero__copy {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 2;
  padding-bottom: 14vh;
  animation: fade 1s .25s both;
}
.hero__copy h1 { font-size: clamp(44px, 5.2vw, 100px); line-height: .98; }
.hero__copy p { color: var(--muted); line-height: 1.6; margin: 20px 0 30px; font-size: clamp(16px, 1.1vw, 20px); }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__ctas .btn { padding: 18px 44px; font-size: 15px; }

@keyframes rise { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Sections ---------- */
section { position: relative; }
.about { padding: 110px clamp(20px, 6vw, 88px) 90px; background: var(--bg); }
.stats { padding: 140px clamp(20px, 6vw, 88px) 0; }
.roster { padding: 140px clamp(20px, 6vw, 88px); }
h2 { font-size: clamp(40px, 4.4vw, 80px); line-height: 1; }
/* Gold bar under each section title. */
.about h2::after, .mode h2::after, .stats h2::after, .roster h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 16px; background: var(--accent);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
/* Wide screens: keep section content in one centred column instead of stretching edge to edge. */
.about > *, .mode > *, .stats > *, .roster > * { max-width: 1600px; margin-left: auto; margin-right: auto; }
.lede { color: var(--muted); line-height: 1.6; margin-top: 18px; margin-bottom: 48px; font-size: clamp(16px, 1.1vw, 20px); }

/* In-game screenshot (the game window keeps its own border), on an offset cut-corner backing plate. */
.shot { position: relative; margin-top: 0; margin-bottom: 0; filter: drop-shadow(0 28px 44px rgba(16, 22, 43, .16)); }
.shot::before {
  content: ""; position: absolute; inset: 0; translate: clamp(10px, 1.4vw, 22px) clamp(10px, 1.4vw, 22px);
  background: linear-gradient(135deg, rgba(31, 67, 196, .22), rgba(31, 67, 196, .06));
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.shot img { position: relative; display: block; width: 100%; height: auto; }

.about h2 + .cards { margin-top: 44px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 28px); }
/* Cut top-right corner, gold tick top-left, lifts on hover. */
.card, .step, .auth__box {
  position: relative;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.card::before, .step::after, .auth__box::before {
  content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--accent);
}
.card { padding: 32px 34px; transition: transform .25s, border-color .25s; }
.card:hover { transform: translateY(-4px); border-color: rgba(31, 67, 196, .35); }
.card__num { font-weight: 900; color: var(--accent); font-size: 14px; }
.card h3 { margin: 0 0 10px; font-size: clamp(26px, 2.2vw, 36px); }
.card p { color: var(--muted); line-height: 1.5; margin: 0; font-size: 18px; }

/* Dark band with a slow background layer */
.draft { overflow: hidden; color: #fff; background: var(--night); }
.draft__bg {
  position: absolute; inset: -20% 0;
  background: url(assets/lobby-bg.jpg) center / cover;
  opacity: .35; filter: saturate(.7) blur(2px);
  will-change: transform;
}
.draft__inner { position: relative; padding: 160px clamp(20px, 6vw, 88px); }
.draft .lede { color: #b9c1dc; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: s; }
.steps li {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); border-radius: 4px; padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.steps b { font-size: 24px; }
.steps b::before { counter-increment: s; content: "0" counter(s) "  "; color: var(--accent); font-size: 14px; }
.steps span { color: #c9d0e8; line-height: 1.55; }
.steps--plain b::before { content: none; }
.steps--plain b { font-size: clamp(24px, 2.2vw, 30px); }
.steps--plain span { font-size: 17px; }

/* Text roster (off the live page; kept in archive/sections.html). */
.roster__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.roster__grid li {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px;
  display: flex; gap: 12px; align-items: baseline;
  transition: transform .2s, background .2s;
}
.roster__grid li:hover { transform: translateY(-3px); background: #fff; }
.roster__grid small { color: var(--accent); font-weight: 700; min-width: 2ch; }
.roster__grid span { font-weight: 500; }
.roster__grid em { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* Portrait roster: the game's hero bubbles, name underneath. 27 heroes = 9 x 3 on desktop, 3 wide on phones. */
.heroes {
  list-style: none; padding: 0; margin-top: 0; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 44px 12px;
}
.hero-chip { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-chip img {
  width: min(100%, 150px); height: auto; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(13, 18, 38, .18));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s;
}
.hero-chip:hover img {
  transform: translateY(-6px) scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 14px 18px rgba(31, 67, 196, .28));
}
.hero-chip span { font-weight: 500; font-size: clamp(13px, 1vw, 17px); text-align: center; color: var(--muted); transition: color .2s; }
.hero-chip:hover span { color: var(--ink); }

/* Pure Mode and Play: lighter bands with angled top and bottom edges and faint diagonal stripes. */
.mode, .play {
  background:
    repeating-linear-gradient(135deg, rgba(16, 22, 43, .022) 0 2px, transparent 2px 16px),
    var(--bg-2);
}
.mode {
  padding: calc(140px + var(--slant)) clamp(20px, 6vw, 88px);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.play {
  overflow: hidden; padding: calc(180px + var(--slant)) clamp(20px, 6vw, 88px) 180px; text-align: center;
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
}
.play__wordmark {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-size: clamp(140px, 30vw, 520px); line-height: 1;
}
.play__inner { position: relative; }
.play .lede { margin: 18px auto 34px; max-width: 640px; }
.play__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.play h2 { font-size: clamp(48px, 5.6vw, 100px); }

.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 32px clamp(20px, 6vw, 88px); color: var(--muted); font-size: 13px;
  border-top: 1px solid var(--line);
}
.footer img { height: 40px; width: auto; }
.footer__link { margin-left: 14px; text-decoration: underline; text-underline-offset: 3px; }
.footer__link:hover { color: var(--accent); }

/* ---------- Privacy page ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 140px clamp(20px, 6vw, 40px) 90px; line-height: 1.65; font-size: 16px; }
.legal h1 { font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 18px; }
.legal h2 { font-size: 24px; margin: 38px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal b { color: var(--ink); font-weight: 500; }

/* Scroll reveal */
.reveal { opacity: 0; translate: 0 30px; transition: opacity .7s, translate .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- Small screens ---------- */
@media (max-width: 1100px) {
  /* Too narrow for side by side (the character would shrink to a third of the screen): the
     character fills the hero behind the text, head at the top. The text sits at the bottom on
     a solid fade of the page colour, so it stays readable. */
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 100svh; }
  .hero__char {
    grid-area: auto; position: absolute; left: 0; top: 64px; width: 100%; height: calc(100% - 64px); margin: 0;
    object-fit: cover; object-position: 60% top;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--bg) 32%, rgba(230, 233, 239, .88) 46%, rgba(230, 233, 239, 0) 68%);
  }
  .hero__copy { grid-column: 1; grid-row: 1; padding-bottom: 48px; max-width: 640px; }
}
@media (max-width: 900px) {
  .heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-chip img { width: min(100%, 110px); }
}
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .dl-steps .steps-row { grid-template-columns: 1fr; gap: 20px; }
  .steps-row .step + .step::before { content: none; }
}
/* The rest of the phone layout is at the end of this file, after every page's own rules. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__char, .hero__copy, .dl__char, .dl__inner { animation: none; }
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .btn::after { content: none; }
}

/* ---------- Download page ---------- */
/* Hero like the landing page: wordmark behind, character right, button bottom-left. */
.dl {
  overflow: hidden; min-height: 92vh;
  padding: 0 clamp(20px, 6vw, 88px);
  display: flex; align-items: flex-end;
  background:
    radial-gradient(ellipse 45% 60% at 74% 60%, rgba(31, 67, 196, .12), transparent 70%);
}
.dl__wordmark {
  position: absolute; left: 50%; top: 14vh; translate: -50% 0;
  font-size: clamp(80px, 21vw, 380px);
}
.dl__char {
  position: absolute; right: clamp(-20px, 4vw, 90px); bottom: -2vh;
  height: min(88vh, 56vw); width: auto; max-width: none;
  filter: drop-shadow(0 30px 40px rgba(13, 18, 38, .28));
  will-change: transform;
  animation: rise 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
/* Button block centred in the left half. */
.dl__inner {
  position: relative; z-index: 2; width: 50%; padding-bottom: 18vh; text-align: center;
  animation: fade 1s .25s both;
}
.dl .btn { padding: 20px 48px; font-size: 16px; }
.dl__meta { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

/* Steps: three cards, an icon on each, chevrons between. */
.dl-steps {
  padding: calc(120px + var(--slant)) clamp(20px, 6vw, 88px) 100px;
  background:
    repeating-linear-gradient(135deg, rgba(16, 22, 43, .022) 0 2px, transparent 2px 16px),
    var(--bg-2);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
.steps-row {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px;
}
/* No cut corner here: the arrow badge sits outside the card's left edge. */
.step { padding: 34px 32px 36px; clip-path: none; }
/* Between cards: a small arrow badge, centred in the gap. */
.step + .step::before {
  content: ""; position: absolute; left: -48px; top: 50%; translate: 0 -50%; z-index: 1;
  width: 32px; height: 32px;
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  background: var(--accent) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}
.step__icon {
  display: grid; place-items: center; width: 52px; height: 52px;
  background: rgba(31, 67, 196, .1); color: var(--accent); margin-bottom: 22px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.step__icon svg { width: 26px; height: 26px; }
.step h3 { font-size: clamp(26px, 2.2vw, 34px); margin-bottom: 8px; }
.step p { color: var(--muted); line-height: 1.5; margin: 0; font-size: 17px; }

/* Alpha note: blue callout, laid out like the warning below it. */
.note {
  max-width: 1100px; margin: 64px auto 0; display: flex; gap: 20px; align-items: flex-start;
  background: #eaf0ff; border: 1.5px solid #9fb3ef; padding: 26px 30px;
}
.note__icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--accent); color: var(--accent-ink);
}
.note__icon svg { width: 24px; height: 24px; }
.note h3 { font-family: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 19px; margin-bottom: 6px; color: var(--ink); }
.note p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 16px; }

/* Unknown-publisher warning: amber callout. */
.warn {
  max-width: 1100px; margin: 28px auto 0; display: flex; gap: 20px; align-items: flex-start;
  background: #fff6e0; border: 1.5px solid #f0c75e; padding: 26px 30px;
}
.warn__icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  background: #f7d46e; color: #6b4a00;
}
.warn__icon svg { width: 26px; height: 26px; }
.warn h3 { font-family: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 19px; margin-bottom: 6px; color: #4a3300; }
.warn p { margin: 0; color: #6b5310; line-height: 1.55; font-size: 16px; }
.warn b { color: #3d2a00; }
.dl-help { max-width: 1100px; margin: 26px auto 0; color: var(--muted); font-size: 14px; text-align: center; }
.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Sign-up page ---------- */
[hidden] { display: none !important; }
.auth {
  padding: 140px clamp(20px, 6vw, 88px) 100px; display: flex; justify-content: center;
  min-height: 70vh;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(31, 67, 196, .08), transparent 70%);
}
.auth__box { width: 100%; max-width: 440px; padding: 36px 36px 32px; }
.auth__box h1 { font-size: clamp(32px, 3vw, 42px); margin-bottom: 24px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form .btn { margin-top: 6px; cursor: pointer; font-family: inherit; }
.form .btn:disabled { opacity: .6; cursor: default; transform: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-weight: 500; font-size: 14px; }
.field small { color: var(--muted); font-size: 13px; }
.field input {
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 11px 14px; border-radius: 2px; border: 1px solid var(--line-2); background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 67, 196, .15); }
.field.is-bad input { border-color: #c4312b; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__error { margin: 0; color: #b0281f; font-size: 14px; line-height: 1.5; }
.auth__done p { color: var(--muted); line-height: 1.6; margin: 0 0 20px; font-size: 17px; }
.auth__done b { color: var(--ink); font-weight: 500; }

/* ---------- Log-in, account and launcher sign-in pages ---------- */
.sso { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.sso__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px; background: #fff; border: 1px solid var(--line-2);
  font-weight: 500; font-size: 15px; transition: border-color .15s, background .15s;
}
.sso__btn:hover { border-color: var(--accent); background: rgba(31, 67, 196, .05); }
.sso__or { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.sso__or::before, .sso__or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth__alt { margin: 22px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.auth__note { color: var(--muted); line-height: 1.6; margin: 0 0 16px; font-size: 16px; }
.auth__note b { color: var(--ink); font-weight: 500; }
.auth__h2 { font-size: 22px; margin: 30px 0 14px; }
.auth__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.auth__actions .btn, .auth__logout { cursor: pointer; font-family: inherit; }
.auth__logout { margin-top: 30px; }
.form__ok { margin: 0; color: #1d7a3e; font-size: 14px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.methods li {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  background: #fff; border: 1px solid var(--line-2);
}
.methods span { flex: 1; font-weight: 500; }
.methods small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; overflow-wrap: anywhere; }
.methods .btn { cursor: pointer; font-family: inherit; }
.methods .btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- Phones (760px and narrower) ----------
   Last in the file so these win over each page's own rules. One header row: brand, Sign in / Join
   and a menu button that opens Home, Download and Discord below the bar (session.js). Tighter
   sections, compact cards and steps, 4 heroes a row. */
@media (max-width: 760px) {
  .nav { padding: 14px 20px; }
  .nav.is-open { background: rgba(230, 233, 239, .97); backdrop-filter: blur(12px); }
  .nav__right .btn--ghost { display: none; }
  .nav__menu {
    display: grid; place-items: center; width: 38px; height: 34px; padding: 0; cursor: pointer;
    background: rgba(31, 67, 196, .1); color: var(--accent); border: 0;
  }
  .nav__menu span, .nav__menu span::before, .nav__menu span::after {
    display: block; width: 18px; height: 2px; background: currentColor; transition: transform .2s, background .2s;
  }
  .nav__menu span { position: relative; }
  .nav__menu span::before, .nav__menu span::after { content: ""; position: absolute; left: 0; }
  .nav__menu span::before { top: -6px; }
  .nav__menu span::after { top: 6px; }
  .nav.is-open .nav__menu span { background: transparent; }
  .nav.is-open .nav__menu span::before { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav__menu span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; translate: none;
    flex-direction: column; gap: 0; padding: 0 20px 8px;
    background: rgba(230, 233, 239, .97); backdrop-filter: blur(12px);
    box-shadow: 0 12px 24px rgba(16, 22, 43, .08); font-size: 14px;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { padding: 15px 0; border-top: 1px solid var(--line-2); opacity: .8; }
  .nav__links .nav__menu-only { display: block; }

  .about { padding: 72px 20px 56px; }
  .mode { padding: calc(56px + var(--slant)) 20px; }
  .stats { padding: 72px 20px 0; }
  .roster { padding: 80px 20px 72px; }
  .play { padding: calc(72px + var(--slant)) 20px 80px; }
  .about h2 + .cards { margin-top: 28px; }
  .lede { margin-bottom: 28px; }
  .cards { gap: 12px; }
  .card { padding: 20px 22px; }
  .card h3 { font-size: 24px; margin-bottom: 6px; }
  .card p { font-size: 16px; }
  .heroes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 8px; }
  .hero-chip { gap: 6px; }
  .hero-chip img { width: min(100%, 84px); }
  .hero-chip span { font-size: 12px; line-height: 1.25; }

  /* Download: knight centred under the wordmark, the button full width below it. */
  .dl { display: block; min-height: 0; padding: calc(64px + 52vh) 20px 40px; }
  .dl .dl__wordmark { top: calc(64px + 6vh); }
  .dl__char { top: calc(64px + 2vh); bottom: auto; left: 0; right: 0; margin: 0 auto; height: 48vh; }
  .dl__inner { width: 100%; padding-bottom: 0; }
  .dl .btn { display: block; padding: 18px 20px; font-size: 15px; white-space: nowrap; }
  .dl-steps { padding: calc(48px + var(--slant)) 20px 64px; }
  .dl-steps .steps-row { gap: 12px; }
  .step {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center;
    padding: 18px 20px;
  }
  .step__icon { grid-row: span 2; width: 44px; height: 44px; margin-bottom: 0; }
  .step h3 { font-size: 24px; margin: 0; }
  .step p { grid-column: 2; font-size: 15px; margin-top: 4px; }
  .note, .warn { gap: 14px; padding: 20px 18px; }
  .note { margin-top: 28px; }
  .warn { margin-top: 14px; }
  .note__icon, .warn__icon { width: 40px; height: 40px; }

  .auth { padding: 96px 20px 64px; min-height: 0; }
  .auth__box { padding: 28px 22px 26px; }
  .legal { padding-top: 96px; }

  .footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 20px; }
  .footer p { margin: 0; line-height: 1.6; }
  .footer__link { display: block; width: fit-content; margin: 6px 0 0; }
}