:root {
  --bg: #0a0b0f;
  --bg-2: #0f1117;
  --card: #14161e;
  --card-2: #191c26;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #eceef4;
  --muted: #9aa1b2;
  --faint: #6b7183;
  --gold: #ffc83c;
  --gold-dim: #d9a520;
  --red: #ff4655;
  --green: #37d67a;
  --radius: 16px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
code {
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1em 0.45em;
  border-radius: 6px;
  font-size: 0.9em;
  color: var(--gold);
}

.accent { color: var(--gold); }

/* Le mot « Slash », tranché en deux par un coup de lame : deux copies
   du mot, l'une rognée au-dessus d'une ligne de coupe oblique, l'autre
   en dessous, décalées le long de la coupe. La copie basse reste dans
   le flux (elle donne la largeur), la haute est posée par-dessus. */
.sliced {
  position: relative;
  display: inline-block;
  z-index: 0; /* contexte d'empilement : les débris z-index -1 restent DERRIÈRE les lettres */
}
.sliced .cut-a,
.sliced .cut-b {
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
}
/* Découpes COMPLÉMENTAIRES (léger recouvrement 1%) : au repos, les deux
   moitiés alignées reforment le mot entier sans couture. Les morceaux
   sont groupés en "pièces" (lettres + sang) animées d'un bloc. */
.sliced .cut-a { /* moitié haute (logo nav, d'un seul tenant) */
  position: absolute;
  inset: 0;
  clip-path: polygon(0 -10%, 100% -10%, 100% 39.5%, 0 58.5%);
}
/* Hero : la moitié haute est en DEUX morceaux qui excluent la colonne du
   L — son chapeau est un fragment indépendant (.piece-l). Bornes MESURÉES
   sur les glyphes rendus (canvas) : S 0-16.6, L 19.2-33.7, A 34.5-57.8. */
.sliced .cut-a1,
.sliced .cut-a2,
.sliced .cut-l {
  position: absolute;
  inset: 0;
}
.sliced .cut-a1 { clip-path: polygon(0 -10%, 19% -10%, 19% 54.9%, 0 58.5%); }
.sliced .cut-a2 { clip-path: polygon(34.3% -10%, 100% -10%, 100% 39.5%, 34.3% 52%); }
.sliced .cut-l  { clip-path: polygon(18.9% -10%, 34.2% -10%, 34.2% 52%, 18.9% 54.9%); }
.sliced .cut-b { /* moitié basse */
  display: inline-block;
  clip-path: polygon(0 57.5%, 100% 38.5%, 100% 110%, 0 110%);
}
.sliced .piece-bottom {
  display: inline-block;
  position: relative;
  transform: translate(0, 0);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.6, 1);
}
.sliced .piece-top {
  position: absolute;
  inset: 0;
  transform: translate(0, 0);
  transform-origin: 30% 60%;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.6, 1);
}
/* Le COUP : la moitié basse encaisse (choc sec), la moitié haute est
   soulevée par la lame puis TOMBE sous gravité — bascule, micro-rebond,
   et se pose de travers sur la moitié basse. */
.sliced.slashing .piece-bottom {
  transform: translate(-0.045em, 0.028em);
  transition: transform 0.11s cubic-bezier(0.15, 0.9, 0.3, 1);
}
/* Le chapeau du L : fragment libre. Éjecté par la lame, il tournoie vers
   la droite et vient s'échouer EN TRAVERS sur le flanc gauche du A. */
.sliced .piece-l {
  position: absolute;
  inset: 0;
  transform: rotate(0deg);
  /* PIVOT = coin bas-droit du chapeau du L, posé sur la coupe : le
     fragment BASCULE autour (rotation pure, aucun vol), jusqu'à 62° —
     l'angle exact où sa pointe rencontre la pente du A. */
  transform-origin: 26.5% 54.9%;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.6, 1);
}
.sliced .blood-l { /* tranche ensanglantée du fragment */
  position: absolute;
  inset: 0;
  color: #a3122a;
  -webkit-text-fill-color: #a3122a;
  filter: drop-shadow(0 0 0.012em rgba(200, 26, 54, 0.5));
  opacity: 0;
  transition: opacity 0.5s ease;
  clip-path: polygon(
    18.9% 54.9%, 34.2% 52%,
    34.2% 48.4%, 29% 50.6%, 24% 48.9%, 18.9% 51.4%);
}
.sliced.slashing .blood-l {
  opacity: 1;
  transition: opacity 0.2s linear;
}
/* Pose finale CALÉE PAR L'UTILISATEUR via le tuner /#tune :
   angle 54.5° · x 0.075em · y 0.16em — la bascule s'accompagne d'une
   chute dans l'entaille (le pied glisse en contrebas). */
@keyframes l-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(0, -0.012em) rotate(-4deg); }          /* choc : léger recul */
  30%  { transform: translate(0.012em, 0.012em) rotate(6deg); }      /* commence à pencher */
  50%  { transform: translate(0.028em, 0.055em) rotate(22deg); }     /* la gravité accélère */
  68%  { transform: translate(0.055em, 0.115em) rotate(42deg); }
  80%  { transform: translate(0.082em, 0.172em) rotate(57deg); }     /* impact contre le A */
  88%  { transform: translate(0.068em, 0.148em) rotate(50.5deg); }   /* rebond */
  100% { transform: translate(0.075em, 0.16em) rotate(54.5deg); }    /* au repos, calé contre le A */
}
.sliced.slashing .piece-l {
  animation: l-fall 1.15s linear 0.1s forwards;
}
.sliced.static-cut .piece-l { transform: translate(0.075em, 0.16em) rotate(54.5deg); }

@keyframes top-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  16%  { transform: translate(0.05em, -0.042em) rotate(-0.6deg); }  /* soulevée par la lame */
  38%  { transform: translate(0.062em, -0.028em) rotate(-0.2deg); } /* apex, un instant en l'air */
  62%  { transform: translate(0.072em, 0.022em) rotate(0.8deg); }   /* la gravité reprend */
  78%  { transform: translate(0.078em, 0.052em) rotate(1.5deg); }   /* impact */
  86%  { transform: translate(0.079em, 0.043em) rotate(1.2deg); }   /* micro-rebond */
  100% { transform: translate(0.08em, 0.05em) rotate(1.35deg); }    /* posée, de travers */
}
.sliced.slashing .piece-top {
  animation: top-fall 1.05s cubic-bezier(0.3, 0, 0.7, 1) 0.12s forwards;
}
/* Version statique (logo nav, préférence "animations réduites") : tranché figé. */
.sliced.static-cut .cut-a { transform: translate(0.04em, -0.022em); }
.sliced.static-cut .cut-b { transform: translate(-0.04em, 0.022em); }
.sliced.static-cut .piece-top .cut-a,
.sliced.static-cut .piece-bottom .cut-b { transform: none; }
.sliced.static-cut .piece-top { transform: translate(0.05em, -0.028em) rotate(0.8deg); }
.sliced.static-cut .piece-bottom { transform: translate(-0.04em, 0.024em); }
.sliced.static-cut .whole { clip-path: inset(-30% -10% -30% 110%); transition: none; }
.sliced.static-cut .cut-layer { clip-path: inset(-30% -10% -30% -5%); transition: none; }
.sliced.static-cut .blood-a,
.sliced.static-cut .blood-b { opacity: 1; transition: none; }

/* DEUX CALQUES COMPLÉMENTAIRES balayés ensemble par le fil de la lame :
   .cut-layer (moitiés écartées + sang) n'existe qu'à GAUCHE du fil,
   .whole (mot intact) n'existe qu'à sa DROITE. La frontière traverse le
   mot en 0.3s — aucune duplication possible, aucune apparition globale. */
.sliced .cut-layer {
  position: relative;
  display: inline-block;
  clip-path: inset(-30% 110% -30% -5%); /* repos : rien */
  transition: clip-path 0s linear 0.6s; /* disparaît après la refermeture */
}
.sliced.slashing .cut-layer {
  clip-path: inset(-30% -10% -30% -5%); /* ouvert par la lame */
  transition: clip-path 0.3s linear;
}
.sliced .whole {
  position: absolute;
  inset: 0;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  clip-path: inset(-30% -10% -30% 0); /* repos : couvre tout */
  /* Refermeture : les moitiés se recollent (0.5s) puis les calques
     permutent d'un coup — invisible, les pixels sont identiques. */
  transition: clip-path 0s linear 0.6s;
}
.sliced.slashing .whole {
  clip-path: inset(-30% -10% -30% 110%); /* la lame l'a découpé */
  transition: clip-path 0.3s linear;
}
.sliced .debris { /* éclats statiques (version miniature du logo nav) */
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  right: -0.58em;
  top: -0.12em;
  overflow: visible;
  pointer-events: none;
}
.sliced .debris-field { /* champ de particules vivant (hero) : couvre toute
  l'entaille (densité croissante vers la sortie), derrière les lettres */
  position: absolute;
  left: -0.05em;
  right: -0.6em;
  top: -0.3em;
  bottom: -0.05em;
  pointer-events: none;
  z-index: -1;
}
.sliced .debris-field span { position: absolute; }

/* Sang IMPRÉGNÉ dans les lettres le long de la coupure : deux copies
   rouges du mot, rognées en bandes étroites qui longent l'entaille
   (bord extérieur déchiqueté = imprégnation irrégulière). Le rouge ne
   peint que les pixels des glyphes — aucune ligne dans le vide. */
.sliced .blood-a,
.sliced .blood-b {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 0.012em rgba(200, 26, 54, 0.5));
  opacity: 0;
  transition: opacity 0.5s ease;
  /* Le mouvement vient des .piece-* parents : le sang est collé à sa pièce. */
}
.sliced.slashing .blood-a,
.sliced.slashing .blood-b {
  opacity: 1;
  /* Pas de fondu global : le sang est révélé par le balayage du calque,
     l'opacité monte juste assez vite pour être pleine au passage du fil. */
  transition: opacity 0.2s linear;
}
.sliced .blood-a { /* lèvre basse de la moitié haute : liseré fin (~3.5%)
  collé à la coupe, avec quelques infiltrations plus profondes. */
  color: #8f1226;
  -webkit-text-fill-color: #8f1226;
  clip-path: polygon(
    0 58.2%, 100% 39.2%,
    100% 35.7%, 90% 37.7%, 83% 36.4%, 78% 40.1%, 66% 42.3%,
    58% 39.7%, 52% 44.8%, 40% 47.1%, 33% 43.7%, 27% 49.6%,
    14% 52.1%, 7% 48.8%, 0 54.7%);
}
.sliced .blood-b { /* lèvre haute de la moitié basse : liseré fin, les
  infiltrations descendent (gravité). */
  color: #b41730;
  -webkit-text-fill-color: #b41730;
  clip-path: polygon(
    0 57.5%, 100% 38.5%,
    100% 42%, 91% 43.4%, 85% 49.4%, 80% 46%, 68% 48.1%,
    60% 54.7%, 54% 50.7%, 42% 53%, 35% 58.8%, 28% 55.7%,
    16% 57.9%, 9% 64%, 0 61%);
}

/* Formes géométriques 3D en arrière-plan, sur plusieurs plans de
   profondeur : rotation 3D lente (CSS) + parallaxe souris/scroll (JS).
   z-index -1 : elles vivent DERRIÈRE le contenu, visibles dans les
   respirations sombres de la page. */
.geo-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.geo-field canvas { display: block; }

/* Sélecteur de langue à drapeaux */
.lang-menu { position: relative; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--muted);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  padding: 7px 11px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lang-toggle:hover { color: var(--gold); border-color: var(--gold); }
.lang-menu .flag {
  display: inline-flex;
  width: 21px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.lang-menu .flag svg { width: 100%; height: 100%; display: block; }
.lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 6px;
  min-width: 150px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.lang-item:hover { background: rgba(255, 200, 60, 0.1); color: var(--gold); }

/* Sélecteur de serveur du classement */
.srv-tab.active {
  background: rgba(255, 70, 85, 0.1);
  border-color: rgba(255, 70, 85, 0.45);
  color: #ff8a94;
}

/* Colonne niveau (serveur RPG uniquement) */
.board .col-lvl { display: none; }
.board-rpg .col-lvl { display: table-cell; color: var(--gold); font-weight: 700; }

/* Cartes de perks RPG */
.perk h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perk-max {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  flex: none;
}
.perk-cta { display: flex; flex-direction: column; }
.perk-cta .btn { margin-top: auto; align-self: flex-start; }

/* Background glow */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(255, 200, 60, 0.10), transparent 60%),
    radial-gradient(700px 600px at 88% 12%, rgba(255, 70, 85, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
}

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px clamp(16px, 4vw, 40px);
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.5px; }
.brand-name .accent { margin-left: 2px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 0.95rem; color: var(--muted); }
.nav-links a { transition: color 0.15s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--gold); }

/* Burger (mobile) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s, opacity 0.2s;
}
.nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { padding: 9px 18px; font-size: 0.9rem; border-radius: 10px; }
.btn-lg { padding: 17px 34px; font-size: 1.1rem; }
.btn-join {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #1a1508;
  box-shadow: 0 8px 26px rgba(255, 200, 60, 0.25);
}
.btn-join:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 200, 60, 0.38); }
.btn-icon { font-size: 0.8em; }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.4px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--gold); }
.copy-hint {
  font-size: 0.75rem;
  color: var(--faint);
  border-left: 1px solid var(--line-strong);
  padding-left: 10px;
  font-family: var(--font);
  letter-spacing: 0;
}

/* HERO */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 110px) clamp(16px, 4vw, 40px) 40px;
  text-align: center;
}

/* ---- Animations douces (désactivées si "animations réduites") ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Entrée du hero en cascade au chargement */
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }
  .hero > * { animation: rise-in 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) backwards; }
  .hero > *:nth-child(1) { animation-delay: 0.05s; }
  .hero > *:nth-child(2) { animation-delay: 0.15s; }
  .hero > *:nth-child(3) { animation-delay: 0.25s; }
  .hero > *:nth-child(4) { animation-delay: 0.35s; }
  .hero > *:nth-child(5) { animation-delay: 0.45s; }

  /* Révélation au scroll */
  .reveal,
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .reveal.in,
  .reveal-stagger.in > * { opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.22s; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.34s; }
  .reveal-stagger.in > *:nth-child(7) { transition-delay: 0.4s; }
  .reveal-stagger.in > *:nth-child(8) { transition-delay: 0.46s; }
  .reveal-stagger.in > *:nth-child(9) { transition-delay: 0.52s; }
  .reveal-stagger.in > *:nth-child(10) { transition-delay: 0.58s; }
  .reveal-stagger.in > *:nth-child(11) { transition-delay: 0.64s; }
  .reveal-stagger.in > *:nth-child(12) { transition-delay: 0.7s; }
  .reveal-stagger.in > *:nth-child(n+13) { transition-delay: 0.76s; }

  /* Fondu au changement d'onglet du classement */
  @keyframes panel-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .table-wrap:not(.hidden) { animation: panel-fade 0.3s ease; }
}

.hero-title {
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 0.98;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #fff, #b9bdca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .accent { -webkit-text-fill-color: var(--gold); }
.hero-sub {
  max-width: 560px;
  margin: 0 auto 36px;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Cartes serveurs du hero : vignette de la map en cours + statut + Join + IP */
.hero-servers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
  gap: 16px;
  justify-content: center;
  margin-bottom: 56px;
  text-align: left;
}
.hsrv {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease;
  will-change: transform;
  transform: translateZ(0);
}
.hsrv:hover { transform: translateZ(0) translateY(-3px); border-color: var(--line-strong); }
.hsrv-banner {
  position: relative;
  height: 96px;
  background: linear-gradient(135deg, var(--card-2), #0c0e14);
  background-size: cover;
  background-position: center 35%;
}
.hsrv-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,6,9,0.15), rgba(5,6,9,0.78));
}
.hsrv-head {
  position: absolute;
  left: 14px; right: 14px; bottom: 9px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hsrv-name { font-weight: 800; font-size: 1.05rem; }
.hsrv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.hsrv-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.hsrv-status.online .dot { background: var(--green); animation: srv-pulse 2s infinite; }
.hsrv-map {
  position: absolute;
  top: 8px; left: 14px;
  z-index: 1;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text);
  background: rgba(5, 6, 9, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 2px 8px;
}
.hsrv-body {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  align-items: stretch;
}
.hsrv-body .btn-join { padding: 10px 16px; font-size: 0.9rem; border-radius: 10px; flex: none; }
.hsrv-ip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.hsrv-ip:hover { border-color: var(--gold); }
.hsrv-ip .ip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsrv-ip .copy-hint { border-left: 1px solid var(--line-strong); padding-left: 8px; font-size: 0.7rem; color: var(--faint); font-family: var(--font); }
.hsrv.skeleton .hsrv-body { color: var(--faint); font-size: 0.85rem; }

/* STAT BAND */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 780px;
  margin: 0 auto;
}
.stat { background: var(--card); padding: 24px 12px; }
.stat-num {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label { font-size: 0.82rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.6px; }

/* PLAYING NOW */
.now-playing {
  max-width: 780px;
  margin: 26px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: left;
}
.now-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--faint);
  font-weight: 700;
  margin-bottom: 12px;
}
.now-list { display: flex; flex-wrap: wrap; gap: 8px; }
.now-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 0.92rem;
}
.now-chip .now-name { font-weight: 600; }
.now-chip .now-meta { color: var(--faint); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.now-chip .now-srv {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--gold);
  background: rgba(255, 200, 60, 0.1);
  border: 1px solid rgba(255, 200, 60, 0.25);
  border-radius: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
}
.now-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  object-fit: cover;
  font-size: 0.7rem;
}

/* SECTIONS */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 90px) clamp(16px, 4vw, 40px);
}
.section-head { text-align: center; margin-bottom: 46px; }
.section-head h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* FEATURES */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.feature {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.feature:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.feature h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
}
.feature p { color: var(--muted); font-size: 0.97rem; }

/* TABS + LEADERBOARD */
.board-controls {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.search {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 11px 16px;
  min-width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.search:focus { border-color: var(--gold); }
.search::placeholder { color: var(--faint); }
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 11px 22px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab.active {
  background: rgba(255, 200, 60, 0.12);
  border-color: rgba(255, 200, 60, 0.4);
  color: var(--gold);
}

.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.board { width: 100%; border-collapse: collapse; min-width: 560px; }
.board thead th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--faint);
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.board .col-num, .board td.col-num { text-align: right; }
.board .col-rank { width: 64px; text-align: center; }
.board tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.board tbody tr:last-child td { border-bottom: none; }
.board tbody tr { transition: background 0.12s; }
.board tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.board td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-rank .rank-badge {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  font-weight: 800; font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.05); color: var(--muted);
}
.rank-1 .rank-badge { background: linear-gradient(135deg, #ffd75e, #d9a520); color: #1a1508; }
.rank-2 .rank-badge { background: linear-gradient(135deg, #e2e6ee, #a9b0bf); color: #1a1c22; }
.rank-3 .rank-badge { background: linear-gradient(135deg, #e0a06a, #b9743c); color: #1a1508; }
.board tbody tr.clickable { cursor: pointer; }
.player-cell { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex: none;
  object-fit: cover;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.avatar-fallback {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid; place-items: center;
  background: rgba(255, 200, 60, 0.10);
  border: 1px solid rgba(255, 200, 60, 0.2);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.85rem;
}
.player-name { font-weight: 600; }
.points-val { color: var(--gold); font-weight: 700; }
.cut-val { color: var(--red); font-weight: 700; }
.victim { color: var(--faint); font-size: 0.9rem; }
.empty { text-align: center; color: var(--faint); padding: 40px 18px !important; }
.hidden { display: none; }

/* SERVERS */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.server-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.server-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.srv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.srv-name { font-size: 1.3rem; font-weight: 800; }
.srv-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.srv-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  flex: none;
}
.srv-status.online .dot {
  background: var(--green);
  animation: srv-pulse 2s infinite;
}
@keyframes srv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(55, 214, 122, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(55, 214, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(55, 214, 122, 0); }
}
.srv-tagline { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; min-height: 2.9em; }
.srv-meta {
  display: flex;
  gap: 16px;
  color: var(--faint);
  font-size: 0.85rem;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.srv-meta b { color: var(--gold); font-weight: 700; }
.srv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.srv-actions .btn-ghost { flex: 1; justify-content: space-between; min-width: 0; }
.srv-actions .btn-ghost .ip { overflow: hidden; text-overflow: ellipsis; }
.server-card.skeleton .srv-name { color: var(--faint); }

/* ACTIVITY CHART */
.chart-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 14px;
}
.chart-wrap { position: relative; }
#activity-chart { display: block; width: 100%; height: 220px; }
.chart-x {
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font-size: 0.78rem;
  padding: 8px 2px 0;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 0.85rem;
  white-space: nowrap;
  transform: translate(-50%, -110%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 5;
}
.chart-tooltip .tt-val { color: var(--gold); font-weight: 700; }
.chart-empty {
  color: var(--faint);
  text-align: center;
  padding: 60px 0;
  font-size: 0.95rem;
}

/* MAPS */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.map-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  aspect-ratio: 16 / 9;
  /* Seul le transform est animé : transitionner border-color repeignait
     la carte (et sa grosse image) à chaque frame du survol. */
  transition: transform 0.15s;
  /* Calque GPU permanent : le survol est composité, pas repeint
     (un filter sur l'image forçait une re-rasterisation par frame). */
  will-change: transform;
  transform: translateZ(0);
}
.map-card:hover { transform: translateZ(0) translateY(-3px); border-color: var(--gold); }
.map-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-card { display: block; color: var(--text); }
.map-card .map-open {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(5, 6, 9, 0.6);
  border: 1px solid rgba(255, 200, 60, 0.3);
  border-radius: 7px;
  padding: 2px 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.map-card:hover .map-open { opacity: 1; }
.map-card .map-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 9, 0.88));
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 600;
}
.map-card.skeleton .map-name { color: var(--faint); background: none; }

/* CTA */
.cta {
  max-width: 720px;
  margin: 20px auto clamp(40px, 8vw, 90px);
  text-align: center;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.07), rgba(255, 70, 85, 0.04));
  border: 1px solid var(--line-strong);
  border-radius: 24px;
}
.cta h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 10px; }
.cta p { color: var(--muted); margin-bottom: 28px; }
.cta-ip { margin-top: 20px; color: var(--faint); font-size: 0.9rem; }

/* FOOTER */
.footer {
  border-top: 1px solid var(--line);
  padding: 30px clamp(16px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-brand { font-weight: 700; }

/* PLAYER MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 6, 9, 0.7);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; } /* .hidden seul perd face au display:grid ci-dessus */
.modal {
  position: relative;
  width: min(460px, 100%);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}
.modal-close:hover { color: var(--text); }
.modal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.modal-avatar {
  width: 60px; height: 60px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  background: rgba(255, 200, 60, 0.10);
  border: 1px solid rgba(255, 200, 60, 0.2);
  display: grid; place-items: center;
  color: var(--gold);
  font-weight: 800;
  font-size: 1.4rem;
}
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.modal-name { font-size: 1.3rem; font-weight: 800; }
.modal-rank { color: var(--muted); font-size: 0.9rem; }
.modal-rank .accent { font-weight: 700; }
.modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.mstat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.mstat-num { font-weight: 800; font-size: 1.1rem; color: var(--gold); }
.mstat-label { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
.modal-victim { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.modal-victim span { color: var(--text); font-weight: 600; }
.modal-steam {
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.92rem;
}
.modal-steam:hover { text-decoration: underline; }

/* TOAST */
.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gold);
  color: #1a1508;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* SQUELETTES DE CHARGEMENT */
@keyframes sk-sweep {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.sk-line {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.05) 75%);
  background-size: 600px 100%;
  animation: sk-sweep 1.4s linear infinite;
}
.sk-shimmer {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 75%);
  background-size: 600px 100%;
  animation: sk-sweep 1.4s linear infinite;
}
.sk-row td { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.hsrv.skeleton .hsrv-body { flex-direction: column; gap: 10px; padding: 16px 14px; }

/* PODIUM TOP 3 */
.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}
.pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 18px 12px 16px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  min-width: 0;
  transition: transform 0.15s;
  will-change: transform;
  transform: translateZ(0);
}
.pod:hover { transform: translateZ(0) translateY(-3px); }
.pod-1 {
  order: 2;
  padding-top: 24px;
  padding-bottom: 24px;
  border-color: rgba(255, 200, 60, 0.5);
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.07), var(--card));
}
.pod-2 { order: 1; border-color: rgba(205, 212, 228, 0.32); }
.pod-3 { order: 3; border-color: rgba(205, 127, 50, 0.4); }
.pod-medal {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  color: #1a1508;
}
.pod-1 .pod-medal { background: var(--gold); }
.pod-2 .pod-medal { background: #cdd4e4; }
.pod-3 .pod-medal { background: #cd7f32; }
.pod-avatar img, .pod-avatar .pod-fallback {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  object-fit: cover;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--muted);
}
.pod-1 .pod-avatar img, .pod-1 .pod-avatar .pod-fallback { width: 72px; height: 72px; font-size: 1.7rem; }
.pod-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.95rem;
}
.pod-lvl { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.pod-points { color: var(--gold); font-weight: 800; font-size: 0.92rem; font-variant-numeric: tabular-nums; }

/* Badge « en jeu » sur les cartes de maps */
.map-live {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7ce8a2;
  background: rgba(5, 6, 9, 0.7);
  border: 1px solid rgba(80, 220, 120, 0.45);
  border-radius: 999px;
  padding: 3px 9px;
}
.map-live .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: srv-pulse 2s infinite;
}

/* FAQ / How to join */
.join-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.step { position: relative; padding-top: 24px; }
.step-num {
  position: absolute;
  top: -14px; left: 20px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1508;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(255, 200, 60, 0.25);
}
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gold);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold); }
.faq-item p { padding: 0 20px 16px; color: var(--muted); line-height: 1.6; }

/* Actions de la fiche joueur */
.modal-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.modal-share {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Ancres sous la nav sticky */
.section, .cta { scroll-margin-top: 84px; }

@media (max-width: 680px) {
  .nav { gap: 12px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    background: rgba(10, 11, 15, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-strong);
  }
  .nav.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 14px 24px; border-top: 1px solid var(--line); font-size: 1rem; }
  .lang-menu { margin-left: auto; }
  .nav-burger { display: flex; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .btn-ghost { font-size: 0.85rem; }
  .board-controls { flex-direction: column; align-items: stretch; }
  .search { width: 100%; }
  .modal-grid { grid-template-columns: repeat(2, 1fr); }
  /* Classement condensé : rang, joueur, points (+ niveau sur le RPG). */
  .board { min-width: 0; }
  .board .col-sec, .board td.col-sec { display: none; }
  .board tbody td, .board thead th { padding-left: 12px; padding-right: 12px; }
  .podium { gap: 8px; }
  .pod-name { font-size: 0.82rem; }
  .join-steps { grid-template-columns: 1fr; gap: 22px; }
}