/* =========================
   PALETTE & THEMING
   ========================= */
:root{
  --bg:#07080d; --bg2:#0b0f1a; --card:#0e1422; --text:#eaf1ff; --muted:#9fb0c7;
  --accent:#66e4ff; --accent2:#8b5cf6; --good:#1bd96a; --bad:#ff5a74; --neon:#66e4ff;

  /* thème compétitif rouge */
  --brand:#ff4040;         /* rouge principal */
  --brand2:#ff7a59;        /* rouge-orangé gradient */
  --brandDark:#1a0d10;     /* fond sombre tirant rouge */
}

/* Bloc statique (protégé des toggles JS) */
[data-static="true"]{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* =========================
   BASE
   ========================= */
html, body { margin:0; overflow-x:hidden; background-color:var(--bg); color-scheme:dark; }
*{ box-sizing:border-box }
body{ font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); }
.wrap{ max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,28px); }
.center{ min-height:100dvh; display:grid; place-content:center; text-align:center; gap:18px; }

/* Fond Rust */
.bg-rust{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,8,13,.9) 0%, rgba(11,15,26,.65) 40%, rgba(11,15,26,.9) 100%),
    url("rust-bg.jpg") center / cover no-repeat fixed;
  filter: saturate(1.05) contrast(1.06) brightness(.68);
  transform: scale(1.04);
  background-color:#0b0f1a;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes slowpan{ 0%{transform:scale(1.04)} 100%{transform:scale(1.08)} }
  .bg-rust{ animation: slowpan 35s ease-in-out infinite alternate; will-change: transform; }
}

/* Néons top/bottom */
.led-strip{ position:fixed; left:0; right:0; height:16px; z-index:2; pointer-events:none; }
.led-strip.top{ top:0; } .led-strip.bottom{ bottom:0; }
.led-strip::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.8), rgba(255,255,255,.95));
  box-shadow: 0 0 8px var(--neon), 0 0 18px var(--neon), 0 0 36px rgba(102,228,255,.45), 0 0 64px rgba(102,228,255,.3);
}
.led-strip::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,64,64,.12), transparent 70%),
    linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  filter: blur(6px); opacity:.85;
}

/* Beams */
.beams{ position:fixed; inset:0; pointer-events:none; z-index:1; }
.beam{ position:absolute; top:0; bottom:0; width:42vw; filter:blur(24px); opacity:.22; mix-blend-mode:screen; }
.beam.left { left:-10vw; background:radial-gradient(60% 80% at 60% 40%, rgba(255,64,64,.18), transparent 70%); }
.beam.right{ right:-10vw; background:radial-gradient(60% 80% at 40% 60%, rgba(255,64,64,.18), transparent 70%); }
@media (prefers-reduced-motion: reduce){ .beams{ display:none } }

/* =========================
   TOPBAR
   ========================= */
.topbar .bar{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:12px;
  max-width:1200px; 
  margin-inline:auto; 
  padding-inline:clamp(16px,4vw,28px); /* garde le padding gauche/droite */
  padding-block:12px;                  /* ajoute du padding haut/bas */
}

.brand{
  font-family:Orbitron,Inter,sans-serif; letter-spacing:.06em; font-weight:900; text-decoration:none; color:#fff;
  text-shadow:0 0 10px rgba(255,64,64,.25);
}
.brand span{ color:#ffb6b6; }
.actions{ display:flex; gap:10px; align-items:center; }

/* =========================
   BOUTONS
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:none; border-radius:.8rem; padding:10px 14px; font-weight:800;
  text-decoration:none; transition:transform .15s, box-shadow .15s, filter .15s;
}
.btn.solid{
  background:linear-gradient(180deg,#8bdfff,#54c9ff); color:#0b0f1a; box-shadow:0 6px 16px rgba(84,201,255,.25);
}
.btn.solid:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn.ghost{
  background:transparent; color:#eaf1ff; border:1px solid #2a3a58; box-shadow:inset 0 0 12px rgba(255,255,255,.03);
}
.btn.ghost:hover{ border-color:#3f537c; }
.btn.red{
  background:linear-gradient(180deg, var(--brand), var(--brand2)); color:#0b0f1a;
  box-shadow:0 8px 20px rgba(255,64,64,.3), inset 0 0 12px rgba(255,255,255,.05);
}
.btn.red:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn.full{ width:100%; }

/* =========================
   CARTES & TITRES
   ========================= */
.card{
  border:1px solid #1b2641; border-radius:1.2rem; padding:28px 22px;
  background:linear-gradient(180deg, rgba(12,18,32,.92), rgba(11,15,26,.92));
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 20px rgba(102,228,255,.18), inset 0 0 25px rgba(255,255,255,.02);
  position:relative; isolation:isolate;
}
.card::after{
  content:""; position:absolute; inset:-2px; border-radius:1.35rem; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(102,228,255,.55), rgba(102,228,255,.35), rgba(102,228,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:2px; opacity:.4; filter:blur(.6px);
}
.section-title{
  font-family:Orbitron,Inter,sans-serif; letter-spacing:.06em; margin:0 0 10px; font-size:1.1rem;
}

/* Logo néon */
.logo{
  font-family:Orbitron,Inter,sans-serif; font-weight:900; letter-spacing:.08em;
  font-size:clamp(36px,8vw,84px); line-height:1; margin:10px 0 8px; display:inline-block;
  color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 10px rgba(255,64,64,.25);
  transition:color .2s, text-shadow .2s;
}
.logo .tube{ display:inline-block; padding:.1em .2em; border-radius:.2em; position:relative; isolation:isolate; color:#ffdcdc; }
.logo .tube::after{
  content:""; position:absolute; inset:-6px; border-radius:.25em;
  background:radial-gradient(120px 40px at 50% 30%, rgba(255,255,255,.35), rgba(255,64,64,.25), transparent);
  filter:blur(12px); opacity:1;
}
@keyframes flicker{ 0%,10%,20%,22%,24%,28%{opacity:.2} 12%,18%,21%,26%{opacity:.6} 30%,100%{opacity:1} }
.logo.flicker{ animation:flicker 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce){ .logo.flicker{ animation:none } }

.lead{ color:var(--muted); margin:6px auto 18px; max-width:70ch; line-height:1.6; }
.muted{ color:#9fb0c7; opacity:.85; }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =========================
   ÉVÉNEMENTS (3 colonnes)
   ========================= */
.enroll{ padding:26px 22px; }
.events-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:1160px; margin:14px auto 0;
}
@media (max-width:900px){ .events-grid{ grid-template-columns:1fr; } }

.event-card{
  border:1px solid #3a2b38; border-radius:1rem; padding:22px 18px;
  background:linear-gradient(180deg,#10131c,#0c0f19);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 12px rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.event-card:hover{
  transform:translateY(-4px);
  border-color:#6a2a2a;
  box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 18px rgba(255,64,64,.22);
}
.event-head{ display:flex; align-items:center; gap:10px; }
.badge{
  font-size:.78rem; color:#ffd0d0; padding:6px 10px; border-radius:999px;
  background:rgba(255,64,64,.12); border:1px solid rgba(255,64,64,.35);
}
.event-title{
  font-family:"Orbitron",system-ui,sans-serif; font-weight:800; letter-spacing:.4px; font-size:1.05rem; margin:0;
}

.event-meta{ font-size:.95rem; line-height:1.5; color:var(--muted); }
.event-meta .price{ color:var(--good); font-weight:800; display:block; margin-bottom:4px; }
.capacity{ font-weight:700; color:var(--text); }

/* =========================
   PRIZEPOOL / REFUND
   ========================= */
.info{ display:grid; gap:16px; grid-template-columns:1fr; width:min(1160px,96%); margin:6px auto 24px; }
.prize-card{
  border-radius:1.2rem; padding:26px 22px; position:relative; overflow:hidden; text-align:center; color:#fff;
  background:linear-gradient(135deg, #3a0d12, #5a0f16 35%, #8a111c 65%, #ff4040 100%);
  box-shadow:0 0 28px rgba(255,64,64,.35), inset 0 0 12px rgba(255,255,255,.06);
}
.prize-card::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(60% 40% at 50% 50%, rgba(255,64,64,.20), transparent 70%);
  animation:prizePulse 4.8s ease-in-out infinite; pointer-events:none;
}
.prize-card::after{
  content:""; position:absolute; inset:0; transform:skewX(-18deg) translateX(-120%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation:prizeShine 6.5s ease-in-out infinite; pointer-events:none;
}
@keyframes prizePulse{ 0%,100%{opacity:.35} 50%{opacity:.6} }
@keyframes prizeShine{
  0%{ transform:skewX(-18deg) translateX(-120%); }
  50%{ transform:skewX(-18deg) translateX(0%); }
  100%{ transform:skewX(-18deg) translateX(120%); }
}
.prize-card h3{
  font-family:"Orbitron",sans-serif; font-size:1.25rem; margin:0 0 10px;
  text-shadow:0 0 12px rgba(255,64,64,.4);
}
.prize-card p{ font-size:1rem; line-height:1.6; margin:0; }
.prize-card .highlight{ color:#ffe082; font-weight:800; }

.refund-card h3{ font-family:"Orbitron",sans-serif; font-size:1.1rem; margin:0 0 8px; }
.refund-card p{ margin:0; color:var(--muted); }

/* =========================
   ANIM ENTER
   ========================= */
body.page-enter .wrap{ transform:scale(.985); opacity:.98; }
body.page-enter .wrap{ transition:transform .28s ease, opacity .28s ease; }
body.page-enter .wrap{ transform:scale(1); opacity:1; }

/* A) Décaler le contenu vers le bas (éviter le chevauchement avec le topbar) */
.wrap{ padding-top:92px; }           /* était sans padding-top */
.topbar{ top:0; }                    /* déjà fixé, on garde */

/* B) Event meta : forcer un retour à la ligne pour "Équipes inscrites" */
.event-meta{
  font-size:.95rem; line-height:1.6; color:var(--muted);
  display:flex; flex-direction:column; gap:4px;   /* << force les lignes */
}
.event-meta .price{
  color:var(--good); font-weight:900; display:inline-block;
  background:linear-gradient(180deg, rgba(27,217,106,.18), rgba(27,217,106,.08));
  border:1px solid rgba(27,217,106,.35);
  padding:6px 10px; border-radius:.6rem;
  width:max-content; max-width:100%;
}
.capacity-line{ color:#cbd5ff; opacity:.9; margin-top:4px; }
.capacity{ font-weight:800; color:#fff; }

/* C) Bouton Inscription : encore plus “esport”, dégradé + outline lumineux */
.btn.solid.red, .btn.buy{
  background:
    radial-gradient(120% 220% at 50% 0%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(180deg, var(--brand), var(--brand2));
  color:#0b0f1a;
  border:1px solid rgba(255,64,64,.45);
  box-shadow:
    0 10px 26px rgba(255,64,64,.32),
    0 0 18px rgba(255,64,64,.28),
    inset 0 0 10px rgba(255,255,255,.06);
}
.btn.solid.red:hover, .btn.buy:hover{
  filter:brightness(1.07);
  transform:translateY(-2px);
  box-shadow:
    0 14px 32px rgba(255,64,64,.42),
    0 0 22px rgba(255,64,64,.34),
    inset 0 0 12px rgba(255,255,255,.08);
}

/* D) Descendre les cartes section "enroll" un peu plus */
.enroll.card{ margin-top:8px; }  /* tu peux pousser à 16/24px si besoin */

/* ===== Bouton Rules (couleur spéciale néon violet) ===== */
.btn.rules-special{
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 45%),
    linear-gradient(180deg, #a78bfa, #8b5cf6);
  color:#0b0f1a;
  border:1px solid rgba(167,139,250,.55);
  box-shadow:
    0 12px 28px rgba(139,92,246,.35),
    0 0 22px rgba(139,92,246,.35),
    inset 0 0 12px rgba(255,255,255,.08);
}
.btn.rules-special:hover{
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 16px 36px rgba(139,92,246,.45),
    0 0 28px rgba(139,92,246,.42),
    inset 0 0 14px rgba(255,255,255,.10);
}


/* ===== Recentrer/remettre le halo rouge derrière “CUP” ===== */
/* On recentre le radial glow dans le span .tube */
.logo .tube::after{
  /* existants : inset:-6px; border-radius:.25em; */
  background:
    radial-gradient(120px 60px at 50% 50%, rgba(255,64,64,.35), rgba(255,64,64,.18) 50%, transparent 75%);
  filter: blur(14px);
  opacity: 1;
}

/* optionnel : petit boost de glow sur le mot CUP */
.logo .tube{
  text-shadow:
    0 0 10px rgba(255,64,64,.45),
    0 0 22px rgba(255,64,64,.35);
}


/* Centrer le HERO */
.hero{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

/* Centrer le logo */
.logo{
  margin-inline:auto; /* force centrage horizontal */
  display:block;
}

/* Centrer la description */
.hero-desc{
  max-width:70ch;
  margin-inline:auto;
  line-height:1.6;
  font-size:1.05rem;
  color:var(--muted);
}

/* Boutons côte à côte */
.hero-cta{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}


/* Réduction de la taille du bloc remboursement */
.refund.card{
  max-width: 600px;   /* largeur plus compacte */
  margin: 0 auto;     /* centré horizontalement */
  padding: 18px 20px; /* un peu moins d’air autour */
}

/* Soulignement du titre */
.refund.card h3{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 900;
  color: #fff;
}

.account-steam{
  margin-top:8px;  /* descend un peu le bouton Steam */
}

/* Assure que le conteneur des actions est en flex (sinon ça “saute”) */
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Topbar bien au-dessus et avec fond (sinon ça peut se confondre avec le fond) */
.topbar{
  position:fixed;
  top:32px;              /* ajuste si tu veux plus bas/haut */
  left:0; right:0;
  z-index:1000;
}
.topbar .bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:1200px;
  margin-inline:auto;

  /* on GARDE le padding horizontal existant + on AJOUTE du vertical */
  padding-inline:clamp(16px,4vw,28px);
  padding-block:12px;

  /* fond léger + blur pour séparer de la barre d’adresse */
  background:rgba(11,15,26,.55);
  backdrop-filter:blur(6px);
  border-radius:12px;
}

/* Comme la topbar descend, on décale le contenu pour éviter le chevauchement */
.wrap{
  padding-top:120px; /* augmente si tu montes top: ou padding-block */
}

/* Bouton Steam : rien d’exotique, juste présent, visible, cliquable */
.account-steam{
  transform:none;            /* au cas où tu avais une ancienne règle */
  margin:0;                  /* reset de marges hasardeuses */
}

/* Sécurité : le style du bouton “solid” (au cas où) */
.btn.solid{
  background:linear-gradient(180deg,#8bdfff,#54c9ff);
  color:#0b0f1a;
  box-shadow:0 6px 16px rgba(84,201,255,.25);
}

/* ===== Aide SteamID64 ===== */
.howto{
  margin-top:22px;
  padding:22px;
  border-radius:1rem;
  background:linear-gradient(180deg, rgba(12,18,32,.92), rgba(11,15,26,.92));
  box-shadow:0 14px 36px rgba(0,0,0,.4), 0 0 16px rgba(255,64,64,.18);
}
.howto h2{
  font-family:Orbitron, system-ui, sans-serif;
  font-size:1.2rem;
  margin:0 0 14px;
  text-shadow:0 0 10px rgba(255,64,64,.35);
}
.howto-body{
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
}
.howto img{
  width:min(420px, 100%);
  height:auto;
  border-radius:.6rem;
  border:1px solid #2a3a58;
  box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 14px rgba(255,64,64,.18);
}
.howto-text{
  flex:1 1 260px;
}
.howto ol{
  margin:0 0 8px 18px;
  line-height:1.6;
}
.howto .hint{
  margin:0;
  color:#ffe082;
  font-weight:800;
}

/* petit glow rouge pour rester dans le thème */
.howto::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:1.2rem;
  pointer-events:none;
  box-shadow:0 0 22px rgba(255,64,64,.22);
}