/* Page de pré-inscription (bientot.html) : mêmes couleurs que le jeu, bleu nuit et or. */
:root {
  --bg: #08122a;
  --bg-2: #0b1733;
  --surface: #0f1f40;
  --surface-2: #15284f;
  --line: #20365f;
  --line-2: #2d4a7c;
  --text: #edf2fb;
  --muted: #8a9abb;
  --accent: #f2b630;
  --accent-hover: #ffc94d;
  --accent-ink: #08122a;
  --green: #3ddc84;
  --red: #ff4d63;
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 50% -120px, rgba(242, 182, 48, 0.16), transparent 70%),
    repeating-linear-gradient(-60deg, transparent 0 22px, rgba(255, 255, 255, 0.014) 22px 23px),
    linear-gradient(180deg, var(--bg-2), var(--bg) 520px);
  background-color: var(--bg);
  color: var(--text);
  font: 500 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pre { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }

/* En-tête */
.pre-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pre-brand { display: inline-flex; align-items: center; gap: 8px; font: italic 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.pre-brand b { color: var(--accent); font-weight: inherit; }
.pre-brand svg { width: 32px; height: 32px; }

.pre-lang { position: relative; }
.pre-lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.pre-lang summary::-webkit-details-marker { display: none; }
.pre-lang summary i { font-style: normal; color: var(--muted); }
.pre-lang img { border-radius: 2px; display: block; }
.pre-lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; list-style: none; min-width: 190px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.pre-lang li button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: start; text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; }
.pre-lang li button:hover, .pre-lang li button[aria-current] { background: var(--surface-2); }
.pre-lang li button[aria-current] { color: var(--accent); }

/* Héros */
.pre-hero { text-align: center; padding: 28px 0 8px; }
.pre-kicker { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border: 1px solid rgba(242, 182, 48, 0.45); border-radius: 999px; background: rgba(242, 182, 48, 0.1); color: var(--accent); font: 700 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.14em; }
.pre-title { margin: 0; font: italic 800 clamp(40px, 9vw, 76px)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
.pre-title b { display: block; color: var(--accent); font-weight: inherit; }
.pre-date { margin: 14px 0 0; font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.pre-date sup { text-transform: none; font-size: 0.6em; letter-spacing: 0; }

/* Compte à rebours : cases en octogone, comme le logo */
.cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 28px auto 0; }
.cd-cell { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 4px 12px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.cd-cell::before { content: ''; position: absolute; inset: 0; padding: 2px; background: linear-gradient(180deg, #ffe08a, #b9821a); clip-path: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cd-num { font: 800 clamp(36px, 10vw, 58px)/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-num.flip { animation: flip 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes flip { from { transform: translateY(-6px); opacity: 0.3; } }
.cd-lbl { font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }

/* Carte d'inscription */
.pre-card { max-width: 520px; margin: 28px auto 0; padding: 20px; background: rgba(15, 31, 64, 0.85); border: 1px solid var(--line-2); border-radius: 14px; text-align: start; }
.pre-gift { margin: 0 0 14px; font-size: 15px; }
.pre-gift b { color: var(--accent); }
.pre-form { display: flex; gap: 8px; }
.pre-form input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); font-size: 16px; }
.pre-form input::placeholder { color: #5f7299; }
.pre-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pre-btn { padding: 13px 18px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 800 17px/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; }
.pre-btn:hover { background: var(--accent-hover); }
.pre-btn:disabled { opacity: 0.6; cursor: wait; }
.pre-msg { margin: 10px 0 0; color: var(--red); font-size: 14px; }
.pre-count { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 18px auto 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(15, 31, 64, 0.85); border: 1px solid var(--line-2); color: var(--muted); font-size: 15px; }
.pre-count b { color: var(--accent); font: 800 20px/1 var(--display); }
.pre-count-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: live-dot 1.8s infinite; }
@keyframes live-dot { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@media (max-width: 460px) {
  .pre-form { flex-direction: column; }
}

.pre-done { display: flex; gap: 12px; align-items: flex-start; }
.pre-done-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(61, 220, 132, 0.15); color: var(--green); font-weight: 800; font-size: 20px; }
.pre-done strong { font: 800 22px/1.1 var(--display); text-transform: uppercase; }
.pre-done p { margin: 4px 0 0; color: var(--muted); font-size: 14px; word-break: break-word; }
.pre-done b { color: var(--text); }
.pre-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pre-link { border: 0; background: none; padding: 4px 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Atouts */
.pre-feats { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 720px) { .pre-feats { grid-template-columns: repeat(3, 1fr); } }
.pre-feat { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pre-feat-ico { font-size: 26px; }
.pre-feat h2 { margin: 6px 0 4px; font: italic 800 22px/1 var(--display); text-transform: uppercase; color: var(--accent); }
.pre-feat p { margin: 0; color: var(--muted); font-size: 14px; }

.pre-insta { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 28px auto 0; padding: 14px; max-width: 520px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 600; }
.pre-insta:hover { border-color: var(--accent); }
.pre-insta b { color: var(--accent); }

.pre-foot { margin-top: 32px; text-align: center; color: var(--muted); font-size: 12.5px; }
.pre-foot p { margin: 6px auto; max-width: 620px; }
.pre-foot a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .cd-num.flip { animation: none; } }

/* Inscription : pseudo + e-mail, parrain du lien */
.pre-form { flex-wrap: wrap; }
.pre-form #pre-pseudo { flex: 1 1 140px; }
.pre-form #pre-email { flex: 2 1 200px; }
@media (max-width: 460px) { .pre-form #pre-pseudo, .pre-form #pre-email { flex: none; } } /* en colonne, la base de flex deviendrait la hauteur */
.pre-invited { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(61, 220, 132, 0.12); color: var(--green); font-size: 14px; }
.pre-invited b { color: var(--text); }

/* Lien de parrainage */
.pre-link-box { margin-top: 16px; padding: 14px; border: 1px dashed rgba(242, 182, 48, 0.5); border-radius: 10px; background: rgba(242, 182, 48, 0.06); }
.pre-link-lbl { margin: 0 0 8px; font: 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.pre-link-row { display: flex; gap: 8px; }
.pre-link-input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); font-size: 14px; color: var(--text); direction: ltr; cursor: copy; }
.pre-link-help { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.pre-link-box + .pre-link { margin-top: 10px; }
@media (max-width: 460px) { .pre-link-row { flex-direction: column; } }

/* Classement des parrains */
.pre-board { max-width: 520px; margin: 36px auto 0; padding: 20px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; }
.pre-board h2 { margin: 0; font: italic 800 28px/1 var(--display); text-transform: uppercase; }
.pre-board-sub { margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.pre-board-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pre-board-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
.pre-board-list li:nth-child(-n+3) { background: linear-gradient(90deg, rgba(242, 182, 48, 0.14), var(--bg-2) 70%); }
.pre-board-list li.is-me { outline: 2px solid var(--accent); }
.pb-rank { text-align: center; font: 800 20px/1 var(--display); color: var(--muted); }
.pb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-name em { font-style: normal; font-size: 12px; color: var(--accent); text-transform: uppercase; }
.pb-count { color: var(--muted); font-size: 14px; white-space: nowrap; }
.pb-count b { color: var(--accent); font: 800 20px/1 var(--display); }
.pre-board-empty, .pre-board-me { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.pre-board-me { margin-top: 10px; }
.pre-board-me b { color: var(--accent); }

/* Décor animé : deux projecteurs qui balaient, l'octogone de la cage qui respire, des étincelles dorées */
.bc-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bc-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, transparent 45%, rgba(4, 9, 22, 0.85) 100%); }
.bc-beam { position: absolute; top: -10vh; width: 80vw; height: 150vh; opacity: 0.9; filter: blur(10px); mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg 166deg, rgba(255, 200, 90, 0.18) 172deg, rgba(255, 228, 160, 0.38) 180deg, rgba(255, 200, 90, 0.18) 188deg, transparent 194deg 360deg);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 90%); mask: linear-gradient(180deg, #000 30%, transparent 90%); }
.bc-beam-l { left: -20vw; transform-origin: 50% 0; animation: beam-l 9s ease-in-out infinite alternate; }
.bc-beam-r { right: -20vw; transform-origin: 50% 0; animation: beam-r 11s ease-in-out infinite alternate; }
@keyframes beam-l { from { transform: rotate(-28deg); } to { transform: rotate(-8deg); } }
@keyframes beam-r { from { transform: rotate(26deg); } to { transform: rotate(6deg); } }
.bc-cage { position: absolute; left: 50%; top: 40vh; width: min(820px, 125vw); height: auto; transform: translate(-50%, -50%); opacity: 0.22;
  fill: none; animation: cage 8s ease-in-out infinite; }
.bc-cage path { stroke: #f2b630; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bc-cage path + path { stroke-dasharray: 6 10; opacity: 0.6; animation: cage-dash 30s linear infinite; }
@keyframes cage { 0%, 100% { opacity: 0.28; transform: translate(-50%, -50%) scale(0.98); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.02); } }
.bc-cage { filter: drop-shadow(0 0 12px rgba(242, 182, 48, 0.55)); }
@keyframes cage-dash { to { stroke-dashoffset: -480; } }
/* Fumée colorée qui dérive lentement */
.bc-bg::before { content: ''; position: absolute; inset: -20%; opacity: 0.8;
  background: radial-gradient(35% 30% at 25% 35%, rgba(90, 140, 255, 0.22), transparent 70%), radial-gradient(30% 28% at 75% 60%, rgba(242, 150, 40, 0.18), transparent 70%), radial-gradient(40% 35% at 50% 20%, rgba(242, 182, 48, 0.16), transparent 70%);
  animation: smoke 22s ease-in-out infinite alternate; }
@keyframes smoke { from { transform: translate(-3%, -2%) rotate(0deg); } to { transform: translate(3%, 3%) rotate(6deg); } }
.bc-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .bc-beam, .bc-cage, .bc-cage path + path, .bc-bg::before { animation: none; }
}

/* Trois cartes en éventail (Fury, Topuria, Usyk), comme sur l'accueil du jeu */
.pre-cards { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 230px; margin: 26px 0 8px; }
.pre-cards .lc { width: 136px; margin: 0 -16px; transition: transform 0.3s var(--ease-out); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)); }
.pre-cards .lc-0 { transform: rotate(-12deg) translateY(12px); }
.pre-cards .lc-1 { transform: translateY(-8px) scale(1.1); z-index: 1; }
.pre-cards .lc-2 { transform: rotate(12deg) translateY(12px); }
.pre-cards:hover .lc-0 { transform: rotate(-16deg) translate(-14px, 6px); }
.pre-cards:hover .lc-2 { transform: rotate(16deg) translate(14px, 6px); }
.pre-cards-cap { position: relative; z-index: 2; margin: 34px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
@media (max-width: 460px) { .pre-cards { height: 190px; } .pre-cards .lc { width: 112px; margin: 0 -14px; } }

/* Lot du concours des parrains */
.pre-prize { margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(90deg, rgba(242, 182, 48, 0.2), rgba(242, 182, 48, 0.05)); border: 1px solid rgba(242, 182, 48, 0.5); font-size: 15px; }
.pre-prize b { color: var(--accent); }
.pre-prize a { margin-inline-start: 4px; color: var(--muted); font-size: 13px; }

/* Actus (titres + lien vers l'article d'origine) */
.pre-news { margin: 36px auto 0; max-width: 980px; }
.pre-news h2 { margin: 0 0 14px; font: italic 800 30px/1 var(--display); text-transform: uppercase; text-align: center; }
.pn-top { display: grid; gap: 12px; }
@media (min-width: 720px) { .pn-top { grid-template-columns: repeat(3, 1fr); } }
.pn-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 210px; padding: 14px; border-radius: 12px; overflow: hidden;
  color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line-2); isolation: isolate; }
.pn-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.pn-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 8, 20, 0.96) 15%, rgba(4, 8, 20, 0.55) 55%, rgba(4, 8, 20, 0.1)); }
.pn-card:hover img { transform: scale(1.05); }
.pn-card strong { font: 700 17px/1.25 var(--body); }
.pn-meta { color: var(--accent); font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: 0.08em; }

/* Actu mise en avant : sous-titre du héros, bandeau « En direct », badge rouge */
.pre-tagline { max-width: 560px; margin: 14px auto 0; color: #c9d4ea; font-size: 17px; line-height: 1.4; }
.pre-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: #e8283f; color: #fff;
  font: 800 12px/1 var(--display); text-transform: uppercase; letter-spacing: 0.1em; vertical-align: middle; }
.pre-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: live-blink 1.2s infinite; }
@keyframes live-blink { 50% { opacity: 0.25; } }
.pre-news h2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .pre-live::before { animation: none; } }

/* Lot du concours, tout en haut */
.pre-prize-top { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 18px auto 0; padding: 12px 16px; border-radius: 12px; text-align: start;
  background: linear-gradient(90deg, rgba(242, 182, 48, 0.28), rgba(242, 182, 48, 0.08)); border: 1px solid rgba(242, 182, 48, 0.7); color: var(--text); text-decoration: none;
  box-shadow: 0 0 24px -8px rgba(242, 182, 48, 0.6); font-size: 15px; line-height: 1.35; }
.pre-prize-top b { color: var(--accent); }
.pre-prize-ico { font-size: 28px; flex: none; }
.pre-hero .pre-card { margin-top: 16px; }
.pre-hero .cd { margin-top: 22px; }

/* Le jeu en un coup d'œil : maquette d'un prono + cartes */
.pre-game { margin-top: 40px; }
.pre-game h2 { margin: 0 0 16px; text-align: center; font: italic 800 30px/1 var(--display); text-transform: uppercase; }
.pre-game-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .pre-game-grid { grid-template-columns: 1fr 1fr; } }
.pv { max-width: 380px; width: 100%; margin: 0 auto; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -20px #000; }
.pv-ev { margin: 0 0 12px; color: var(--muted); font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.pv-fight { display: flex; align-items: center; justify-content: space-around; }
.pv-f { display: grid; justify-items: center; gap: 6px; }
.pv-f strong { font: italic 800 22px/1 var(--display); text-transform: uppercase; }
.pv-oct { position: relative; display: grid; place-items: center; width: 64px; height: 64px; background-size: cover; background-position: center;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.pv-oct::after { content: ''; position: absolute; inset: 0; background: rgba(8, 18, 42, 0.45); }
.pv-oct b { position: relative; z-index: 1; font: italic 800 20px/1 var(--display); color: #fff; text-shadow: 0 2px 6px #000; }
.pv-vs { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent-ink); font: italic 800 15px/1 var(--display);
  background: linear-gradient(180deg, #ffe08a, #f2b630 55%, #b9821a); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.pv-odds, .pv-meth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pv-meth { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.pv-odds span, .pv-meth span { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.pv-meth span { justify-content: center; font-size: 12.5px; padding: 8px 4px; }
.pv-odds b { font: 800 18px/1 var(--display); }
.pv .is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pv-slip { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px dashed rgba(242, 182, 48, 0.6); font-size: 14px; }
.pv-slip b { color: var(--accent); font: 800 20px/1 var(--display); }
.pv-cap { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.pre-game .pre-cards { margin-top: 10px; }
.pre-count[hidden] { display: none; }
.pre-game .pre-cards-cap { text-align: center; }

/* Chasse la ceinture : échelle des rangs (grande sur ordinateur) et règles en 4 cases */
.pre-ranks { margin-top: 28px; text-align: center; }
.pre-ranks h2 { margin: 0; font: italic 800 34px/1 var(--display); text-transform: uppercase; color: var(--accent); }
.pre-ranks-sub { max-width: 560px; margin: 8px auto 20px; color: var(--muted); font-size: 15px; }
.pre-ladder { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 0; padding: 18px 10px; list-style: none;
  border-radius: 16px; background: radial-gradient(70% 120% at 50% 0%, rgba(242, 182, 48, 0.12), transparent 70%), rgba(15, 31, 64, 0.7); border: 1px solid var(--line-2); }
.pre-ladder li { display: grid; justify-items: center; gap: 6px; min-width: 62px; animation: ladder-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i) * 70ms); }
.pre-ladder span { font: 800 13px/1 var(--display); text-transform: uppercase; letter-spacing: 0.06em; }
.pre-emblem { width: 40px; height: 45px; filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 50%, transparent)); }
@keyframes ladder-in { from { opacity: 0; transform: translateY(10px) scale(0.8); } }
.pre-rules { display: grid; gap: 10px; margin-top: 14px; text-align: start; }
@media (min-width: 720px) { .pre-rules { grid-template-columns: repeat(4, 1fr); } }
.pre-rules > div { padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pre-rules b { font: italic 800 24px/1 var(--display); color: var(--accent); }
.pre-rules p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
@media (min-width: 900px) {
  .pre-ladder { flex-wrap: nowrap; justify-content: space-between; padding: 26px 28px; }
  .pre-emblem { width: 64px; height: 72px; }
  .pre-ladder span { font-size: 15px; }
  .pre-ranks h2 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pre-ladder li { animation: none; } }
.pre-collect { margin-top: 36px; text-align: center; }

/* Version courte : « Le jeu » en 3 colonnes (empilées sur téléphone) */
.pre-trio { display: grid; gap: 14px; }
@media (min-width: 900px) { .pre-trio { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.pre-col { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: rgba(15, 31, 64, 0.8); border: 1px solid var(--line-2); text-align: center; }
.pre-col h3 { margin: 0; font: italic 800 22px/1 var(--display); text-transform: uppercase; color: var(--accent); }
.pre-col-txt { margin: auto 0 0; color: var(--muted); font-size: 13.5px; }
.pre-col .pv { padding: 12px; box-shadow: none; }
.pre-col .pv-oct { width: 52px; height: 52px; }
.pre-col .pv-f strong { font-size: 19px; }
.pre-col .pre-cards { height: 180px; margin: 4px 0 0; }
.pre-col .pre-cards .lc { width: 104px; margin: 0 -14px; }
.pre-col .pre-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; padding: 12px 6px; }
.pre-col .pre-emblem { width: 36px; height: 41px; }
.pre-col .pre-ladder span { font-size: 12px; }

/* Après l'inscription : ma position, boutons de partage */
.pre-me { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(61, 220, 132, 0.1); border: 1px solid rgba(61, 220, 132, 0.35); color: var(--text); font-size: 14.5px; }
.pre-me:empty { display: none; }
.pre-me b { color: var(--accent); }
.pre-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pre-sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; border-radius: 10px; border: 0; color: #fff; font: 700 14px/1 var(--body); text-decoration: none; cursor: pointer; }
.pre-sh svg { width: 18px; height: 18px; flex: none; }
.pre-sh-whatsapp { background: #1fa855; }
.pre-sh-snapchat { background: #fffc00; color: #111; }
.pre-sh-x { background: #000; border: 1px solid #333; }
.pre-sh-telegram { background: #229ed9; }
.pre-sh-instagram { background: linear-gradient(45deg, #f9a31c, #e1306c 45%, #833ab4); }
.pre-sh-more { background: var(--surface-2); border: 1px solid var(--line-2); }
.pre-sh:hover { filter: brightness(1.1); }
.pre-btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); }
.pre-btn-ghost:hover { background: var(--line-2); }

/* Intro : l'arène (octogone) s'agrandit vers le spectateur, le logo apparaît au centre puis tout s'efface */
.bc-intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; pointer-events: auto; cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%, #12224a, #050a18 75%); animation: intro-out 0.5s ease-in 1.5s forwards; }
.bc-intro-cage { position: absolute; width: 60vmin; height: 60vmin; fill: none; animation: intro-zoom 1.9s cubic-bezier(0.55, 0, 0.2, 1) forwards; filter: drop-shadow(0 0 18px rgba(242, 182, 48, 0.7)); }
.bc-intro-cage path { stroke: #f2b630; stroke-width: 3; vector-effect: non-scaling-stroke; }
.bc-intro-cage path:nth-child(2) { stroke-dasharray: 8 10; opacity: 0.7; }
.bc-intro-cage path:nth-child(3) { opacity: 0.35; }
.bc-intro-logo { position: relative; display: flex; align-items: center; gap: 14px; font: italic 800 clamp(40px, 9vw, 84px)/1 var(--display); color: #fff; letter-spacing: 0.01em;
  animation: intro-logo 1.6s ease-out forwards; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); }
.bc-intro-logo b { color: var(--accent); font-weight: inherit; }
.bc-intro-logo svg { width: 1.2em; height: 1.2em; filter: drop-shadow(0 0 14px rgba(242, 182, 48, 0.6)); }
@keyframes intro-zoom { 0% { transform: scale(0.15) rotate(-22deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(4.5) rotate(0deg); opacity: 0.15; } }
@keyframes intro-logo { 0% { opacity: 0; transform: scale(0.7); } 30% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.5); filter: blur(6px); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .bc-intro { display: none; } }