/* ===========================================================================
   LifeUp — landing
   Couleurs, rayons et typos repris de packages/mobile/src/theme/*.ts : la page
   doit être reconnaissable comme la même chose que l'app.
   Polices auto-hébergées — le CSP de prod est `font-src 'self' data:`.
   ========================================================================= */

@font-face {
  font-family: 'Sora';
  src: url('./fonts/sora-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/mono-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* surfaces */
  --void: #0f0f1a;
  --surface: #1a1a2e;
  --elevated: #242440;
  --line: #2d2d4e;
  --line-soft: #23233e;
  /* texte */
  --text: #f5f5fa;
  --muted: #9a9ab8;
  /* L'app utilise #6E6E8A pour textFaint, mais sur ces fonds il tombe à
     3,86:1 — sous le seuil AA. Éclairci à 4,78:1 minimum pour la landing,
     où ces libellés sont souvent la seule source d'une information. */
  --faint: #8f8fac;
  /* marque + sémantique */
  --primary: #7c5cfc;
  --primary-hi: #8e72ff;
  /* Le violet de marque ne donne que 4,38:1 avec du blanc. Les aplats qui
     portent du texte blanc utilisent cette variante (4,90:1) ; les bordures,
     halos et textes d'accent gardent --primary. */
  --primary-solid: #7355f0;
  --wash: rgba(124, 92, 252, 0.13);
  --success: #3ddc84;
  --danger: #ff6b6b;
  --gold: #ffd700;
  --diamond: #4dd9e8;
  /* classes */
  --warrior: #ff6b6b;
  --mage: #7c5cfc;
  --thief: #a57cff;
  --archer: #3ddc84;
  --paladin: #ffd700;
  --bard: #fc5c8c;
  /* raretés */
  --common: #9a9ab8;
  --rare: #4ea1ff;
  --epic: #7c5cfc;
  --legendary: #ffd700;
  --mythic: #fc5c8c;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sp-band: clamp(72px, 9vw, 128px);
  --wrap: 1120px;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── mapping donnée → couleur ─────────────────────────────────────────
   Chaque élément porté par une donnée du jeu (stat, classe, rareté,
   monnaie) expose sa couleur en variable locale. Les composants ne
   connaissent qu'une variable, jamais la liste des valeurs.
   ------------------------------------------------------------------- */

[data-stat='STRENGTH'] { --st: var(--warrior); }
[data-stat='INTELLIGENCE'] { --st: var(--mage); }
[data-stat='AGILITY'] { --st: var(--thief); }
[data-stat='ENDURANCE'] { --st: var(--archer); }
[data-stat='CHARISMA'] { --st: var(--bard); }
[data-stat='WISDOM'] { --st: var(--diamond); }

[data-cls='warrior'] { --cls: var(--warrior); }
[data-cls='mage'] { --cls: var(--mage); }
[data-cls='thief'] { --cls: var(--thief); }
[data-cls='archer'] { --cls: var(--archer); }
[data-cls='paladin'] { --cls: var(--paladin); }
[data-cls='bard'] { --cls: var(--bard); }

[data-rar='common'] { --rar: var(--common); }
[data-rar='rare'] { --rar: var(--rare); }
[data-rar='epic'] { --rar: var(--epic); }
[data-rar='legendary'] { --rar: var(--legendary); }
[data-rar='mythic'] { --rar: var(--mythic); }

[data-cur='gold'] { --cur: var(--gold); }
[data-cur='diamond'] { --cur: var(--diamond); }

/* ── base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.07;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ta-r {
  text-align: right;
}

:focus-visible {
  outline: 2px solid var(--primary-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--primary-solid);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 16px;
}

.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}

/* ── typo utilitaire ──────────────────────────────────────────────────── */

.eyebrow {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-hi);
}

.head {
  max-width: 640px;
  margin-bottom: 56px;
}
.head h2 {
  font-size: clamp(30px, 4.2vw, 46px);
}
.head .sub {
  max-width: 56ch;
  margin-top: 18px;
  font-size: 17px;
  color: var(--muted);
}

/* ── boutons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 600 15px / 1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, color 0.18s ease;
}
.btn-primary {
  background: var(--primary-solid);
  color: #fff;
  box-shadow: 0 8px 28px rgba(124, 92, 252, 0.32);
}
/* Le survol renforce le halo plutôt que d'éclaircir l'aplat : --primary-hi
   avec du blanc retomberait sous AA. */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(124, 92, 252, 0.48);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--primary);
  background: var(--wash);
}
.btn-bare {
  padding-inline: 4px;
  background: none;
  color: var(--faint);
}
.btn-bare:hover {
  color: var(--text);
}
.btn-sm {
  padding: 9px 16px;
  font-size: 13.5px;
}

/* ── barre du haut ────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
  padding-block: 18px;
}
/* Le fond doit couvrir toute la largeur, pas seulement la colonne centrale. */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.topbar[data-scrolled='true']::before {
  border-bottom-color: var(--line-soft);
}

.brand {
  margin-right: auto;
  text-decoration: none;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.04em;
}
.brand-up {
  color: var(--primary-hi);
}

.topnav {
  display: flex;
  gap: 28px;
}
.topnav a {
  padding-block: 6px; /* porte la cible à 24px de haut */
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.topnav a:hover {
  color: var(--text);
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 88px) clamp(72px, 9vw, 120px);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -34% -20% auto -30%;
  z-index: -1;
  height: 820px;
  background: radial-gradient(
    56% 46% at 30% 30%,
    rgba(124, 92, 252, 0.26),
    transparent 68%
  );
  pointer-events: none;
}

/* Plafonné à 58px : au-delà, « LifeUp les affiche. » remplit la colonne au
   pixel près et passe à la ligne dès que le rendu de Sora varie un peu. */
.hero h1 {
  font-size: clamp(38px, 4.8vw, 58px);
}
.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--primary-hi);
}

.lede {
  max-width: 46ch;
  margin-top: 24px;
  font-size: 17.5px;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--faint);
}

/* ── la fiche de personnage ───────────────────────────────────────────── */

.sheet {
  position: relative;
  padding: 20px;
  background: linear-gradient(168deg, var(--surface), #17172a);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.sheet-tag {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 2px 12px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.avatar {
  display: grid;
  place-items: end center;
  width: 96px;
  height: 128px;
  background: radial-gradient(60% 44% at 50% 84%, var(--wash), transparent 72%);
}
.sprite {
  display: block;
  width: 74px;
  height: 128px;
  background: url('./img/sprite-hero.png') 0 0 / 296px 128px no-repeat;
  image-rendering: pixelated;
  animation: idle 0.8s steps(1) infinite;
}
@keyframes idle {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -74px 0;
  }
  50% {
    background-position: -148px 0;
  }
  75% {
    background-position: -222px 0;
  }
}

.sheet-id {
  min-width: 0;
}
.sheet-level {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.lvl-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.lvl-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--muted);
  transition: color 0.24s ease, border-color 0.24s ease;
}
.streak[data-hot='true'] {
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--gold);
}
.streak b {
  color: var(--gold);
}
.flame {
  width: 6px;
  height: 6px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: currentColor;
}

.xpbar {
  height: 9px;
  overflow: hidden;
  background: #12121f;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
}
.xpbar-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-hi));
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet-xp {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--faint);
}

.trend {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cls, var(--line));
  border-radius: var(--r-sm);
  transition: border-left-color 0.28s ease;
}
.trend[data-empty='true'] {
  opacity: 0.55;
}
.trend-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.trend-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cls, var(--muted));
}

.statbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.statbar li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 2px;
  background: #16162a;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.statbar li.bump {
  border-color: var(--st);
  background: color-mix(in srgb, var(--st) 15%, #16162a);
}
.st-key {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.st-val {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.quest-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.quest-day b {
  color: var(--muted);
}

.quests {
  display: grid;
  gap: 5px;
}

.quest {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  background: #16162a;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text);
  font: 400 14px var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease,
    transform 0.16s ease, opacity 0.24s ease;
}
.quest:hover {
  border-color: var(--primary);
  background: #1b1b32;
}
.quest:active {
  transform: scale(0.99);
}
.quest[data-done='true'] {
  opacity: 0.4;
  cursor: default;
}
.quest[data-done='true']:hover {
  border-color: var(--line-soft);
  background: #16162a;
}

.tick {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.tick::after {
  content: '';
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--void);
  border-bottom: 2px solid var(--void);
  rotate: -45deg;
  translate: 0 -1px;
  opacity: 0;
}
.quest[data-done='true'] .tick {
  background: var(--success);
  border-color: var(--success);
}
.quest[data-done='true'] .tick::after {
  opacity: 1;
}

/* En 10-12px, les teintes pleines tombent sous AA sur fond sombre : on les
   éclaircit vers le blanc pour le texte, en gardant la teinte pleine pour
   les pastilles, bordures et halos. */
.quest-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--st) 85%, #fff);
}
.quest-xp {
  min-width: 46px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}

.sheet-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.sheet-hint {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-align: right;
  color: var(--faint);
}

/* le nombre d'XP qui s'envole */
.pop {
  position: absolute;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  text-shadow: 0 2px 12px rgba(61, 220, 132, 0.5);
  pointer-events: none;
  animation: pop 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.85);
  }
  18% {
    opacity: 1;
    transform: translateY(-8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-46px) scale(1);
  }
}

.sheet.levelup {
  animation: levelup 0.7s ease;
}
@keyframes levelup {
  30% {
    border-color: var(--primary-hi);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5),
      0 0 0 4px rgba(124, 92, 252, 0.22);
  }
}

/* ── bandes ───────────────────────────────────────────────────────────── */

.band {
  padding-block: var(--sp-band);
}
.band-alt {
  background: #141424;
  border-block: 1px solid var(--line-soft);
}

/* ── barème ───────────────────────────────────────────────────────────── */

.bareme-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.xptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.xptable th {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--faint);
}
.xptable th.ta-r {
  text-align: right;
}
.xptable td {
  padding-block: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.xptable tbody tr:last-child td {
  border-bottom: 0;
}
.xptable td.mono {
  font-weight: 700;
}

.tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--st) 42%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--st) 11%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--st) 88%, #fff);
}

.mults {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mults-title {
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.mult-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14.5px;
  color: var(--muted);
}
.mult-list li:last-child {
  border-bottom: 0;
}
.mult-list b {
  font-size: 15px;
  color: var(--gold);
}
.mults-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--faint);
}

.guard {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--wash);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  border-radius: var(--r-lg);
  font-size: 14.5px;
  color: var(--muted);
}
.guard-key {
  display: inline-block;
  margin-right: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-hi);
}
.guard b {
  color: var(--text);
}

/* ── classes ──────────────────────────────────────────────────────────── */

/* 6 éléments : on force 3 colonnes pour obtenir 3+3, pas 4+2. */
.classes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.cls {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.cls::after {
  content: '';
  position: absolute;
  inset: auto -40% -70% auto;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, var(--cls), transparent 66%);
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.cls:hover {
  border-color: color-mix(in srgb, var(--cls) 55%, transparent);
  transform: translateY(-3px);
}
.cls:hover::after {
  opacity: 0.3;
}
.cls-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--cls);
  box-shadow: 0 0 16px var(--cls);
}
.cls h3 {
  font-size: 21px;
}
.cls-stats {
  margin: 6px 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--cls) 85%, #fff);
}
.cls p:last-child {
  font-size: 14.5px;
  color: var(--muted);
}

.two-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--muted);
}
.two-notes b {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* ── cartes ───────────────────────────────────────────────────────────── */

/* Idem : 6 cartes en 3+3. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}
.card h3 {
  margin-bottom: 10px;
  font-size: 19px;
}
.card p {
  font-size: 14.5px;
  color: var(--muted);
}

/* ── saisons & butin ──────────────────────────────────────────────────── */

.loot {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.loot-title {
  margin-bottom: 16px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.rarity-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.rar {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 8px 12px;
  background: color-mix(in srgb, var(--rar) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--rar) 14%, transparent);
}
.rar img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rar) 60%, transparent));
}
.rar span {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--rar) 82%, #fff);
}

.loot-note {
  max-width: 54ch;
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--muted);
}

.chars {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.chars li {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.chars img {
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}
.chars span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.wallets {
  display: grid;
  gap: 14px;
}
.wal {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cur);
  border-radius: var(--r-lg);
}
.wal-name {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cur);
}
.wal-how {
  margin: 4px 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wal p:last-child {
  font-size: 14.5px;
  color: var(--muted);
}

/* ── offres ───────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.plan {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.plan-pro {
  background: linear-gradient(165deg, #201a3e, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 46%, transparent);
}
.plan-name {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.plan-pro .plan-name {
  color: var(--primary-hi);
}
.ticks {
  display: grid;
  gap: 11px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--muted);
}
.ticks li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 3px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  rotate: -45deg;
}
.plan-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--faint);
}

/* ── bêta ─────────────────────────────────────────────────────────────── */

.beta {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-band);
  border-top: 1px solid var(--line-soft);
}
.beta::before {
  content: '';
  position: absolute;
  inset: auto -10% -28% -10%;
  height: 640px;
  background: radial-gradient(
    44% 56% at 50% 100%,
    rgba(124, 92, 252, 0.32),
    transparent 70%
  );
  pointer-events: none;
}
.beta-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.beta-icon {
  width: 84px;
  height: 84px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
}
.beta h2 {
  font-size: clamp(34px, 5.2vw, 54px);
}
.beta-copy {
  max-width: 48ch;
  margin-top: 18px;
  font-size: 17px;
  color: var(--muted);
}

.waitlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(100%, 460px);
  margin-top: 32px;
}
.waitlist[hidden] {
  display: none;
}
.waitlist input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text);
  font: 400 15px var(--font-body);
}
.waitlist input::placeholder {
  color: var(--faint);
}
.waitlist input:focus-visible {
  border-color: var(--primary);
}

.waitlist-status {
  min-height: 22px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--success);
}
.waitlist-status[data-error='true'] {
  color: var(--danger);
}

.waitlist-legal {
  max-width: 44ch;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--faint);
}

.soon {
  margin-top: 28px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── pied ─────────────────────────────────────────────────────────────── */

.foot {
  padding-block: 32px;
  border-top: 1px solid var(--line-soft);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.foot-brand {
  font-size: 17px;
}
.foot p {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ── révélation au scroll ─────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .hero,
  .bareme-grid,
  .loot {
    grid-template-columns: minmax(0, 1fr);
  }
  .topnav {
    display: none;
  }
}

@media (max-width: 620px) {
  .wrap,
  .hero,
  .topbar {
    width: min(100% - 32px, var(--wrap));
  }
  .hero h1 {
    font-size: clamp(34px, 10vw, 48px);
  }
  .sheet {
    padding: 16px;
  }
  .sheet-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .avatar {
    display: none;
  }
  .statbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quest {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  .quest-cat {
    grid-column: 2;
  }
  .quest-xp {
    grid-row: 1 / span 2;
    grid-column: 3;
  }
  .rar img {
    width: 48px;
    height: 48px;
  }
  .sheet-foot {
    flex-wrap: wrap;
  }
}

/* ── mouvement réduit ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}