/* =========================================================
   AUTH GATE — DarkInsta (Desktop split / Mobile card)
   ========================================================= */

:root{
  --bg:#0b0c0f;
  --ink:#e9ecf6;
  --muted:#9aa4be;
  --stroke:#1c2133;
  --panel:rgba(14,16,25,.62);
  --panel-strong:rgba(14,16,25,.78);
  --blur:8px;

  --red:#ff3355;
  --red-2:#A41228;

  --blue:#2da2cc;
  --discord:#5865F2;

  --shadow:0 30px 80px rgba(0,0,0,.45), inset 0 0 40px rgba(255,255,255,.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 560px at 18% -8%, rgba(211,47,69,.18), transparent 60%),
    radial-gradient(1100px 580px at 85% -6%, rgba(45,162,204,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* =============== LAYOUT (desktop par défaut) =============== */

.gate{
  position:relative;
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr min(70px,6vw) 1fr; /* gauche | séparation | droite */
  align-items:stretch;
  overflow:hidden;
}

/* léger halo fond */
.gate-back{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 560px at 12% -8%, rgba(211,47,69,.20), transparent 60%),
    radial-gradient(1100px 580px at 86% -8%, rgba(45,162,204,.16), transparent 55%);
  filter:saturate(115%);
  opacity:.9;
}

/* colonnes */
.gate-col{
  position:relative;
  display:grid;
  place-items:center;
  padding: clamp(18px, 5vw, 40px);
}
.gate-inner{
  width:min(520px, 86%);
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding: clamp(18px, 3.2vw, 28px);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}

.gate-left .gate-inner{
  background:
    linear-gradient(180deg, rgba(211,47,69,.06), transparent 40%),
    var(--panel);
}
.gate-right .gate-inner{
  background:
    linear-gradient(180deg, rgba(45,162,204,.06), transparent 40%),
    var(--panel);
}

/* titres + sous-texte */
.gate h1{
  margin:0 0 8px;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing:.2px;
}
.gate .muted{ color:var(--muted); margin:0 0 14px }

/* icône haute (emoji) */
.gate-icon{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  font-size:20px;
  background:linear-gradient(180deg, #0f1326, #0b1020);
  border:1px solid #1f2744;
  box-shadow: inset 0 0 10px rgba(255,255,255,.02);
  margin-bottom:10px;
}

/* ===== Séparateur central : éclat/éclair fin ===== */

.gate-divider{
  position:relative;
  display:grid; place-items:center;
  pointer-events:none;
}
.gate-divider::before{
  content:""; position:absolute; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%, rgba(255,255,255,.06) 60%, transparent);
  filter:blur(.2px);
}
.gate-bolt{
  position:absolute; width:8px; height:78vh; max-height:700px;
  border-radius:6px;
  background:
    radial-gradient(6px 20px at 50% 2%, #ffe6ea, transparent 65%),
    repeating-linear-gradient(180deg, #ff9fb0 0 16px, #ff3355 16px 32px);
  box-shadow:
    0 0 22px rgba(255,51,85,.55),
    0 0 60px rgba(255,51,85,.35);
  mask: linear-gradient(180deg, transparent 0 6%, black 6% 94%, transparent 94% 100%);
  animation: bolt-flicker 2.2s infinite both;
}
@keyframes bolt-flicker{
  12%,38%,64%{ filter:brightness(1) }
  0%,20%,50%,100%{ filter:brightness(1.12) }
}

/* ===== Boutons ===== */

.gate-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px; border-radius:12px; border:0; cursor:pointer;
  font-weight:900; letter-spacing:.2px; text-decoration:none;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.gate-btn:hover{ transform:translateY(-1px) }
.gate-btn:active{ transform:translateY(0) scale(.98) }

.gate-btn-discord{
  width:100%;
  background: linear-gradient(180deg, #6d79f6, var(--discord));
  color:white;
  box-shadow: 0 12px 26px rgba(88,101,242,.35);
}
.gate-btn-primary{
  width:100%;
  background:linear-gradient(90deg, var(--red), var(--red-2));
  color:white;
  box-shadow:0 12px 28px rgba(163,24,45,.35);
}

.gate-note{
  margin-top:10px; color:var(--muted); font-size:12px;
}

/* ===== Formulaire ===== */

.gate-form{
  display:grid; gap:10px; margin-top:6px;
}
.gate-form label{ font-weight:800; color:#dfe6ff }
.gate-form input{
  width:100%; padding:12px 14px; border-radius:12px; outline:0;
  background:#0e1220; color:var(--ink); border:1px solid #1c233c;
  transition: border-color .2s, box-shadow .2s;
}
.gate-form input:focus{
  border-color:#356fb6; box-shadow:0 0 0 3px rgba(45,162,204,.18);
}

/* flashes */
.gate-flash{ margin-top:10px; display:grid; gap:8px }
.flash{padding:10px 12px;border-radius:10px;background:#102014}
.flash.error{background:#2a0f15;color:#ffb3b3;border:1px solid #51212b}

/* =========================================================
   ========  RESPONSIVE  —  Tablettes & Mobiles  ==========
   ========================================================= */

/* === Breakpoint principal mobile/tablette === */
@media (max-width: 760px){

  /* Nouveau fond — plus net et profond */
  body{
    background:
      radial-gradient(900px 360px at 50% -12%, rgba(211,47,69,.22), transparent 62%),
      radial-gradient(900px 500px at 80% -8%, rgba(45,162,204,.12), transparent 58%),
      var(--bg);
  }

  /* Layout : une seule colonne, carte unique */
  .gate{
    display:block; min-height:100dvh; padding: 16px 12px;
  }

  .gate-back{ opacity:.85 }

  /* On masque le séparateur/éclair */
  .gate-divider{ display:none }

  /* On fusionne les contenus en une seule “carte” empilée avec sections */
  .gate-col{ padding:0; }
  .gate-left, .gate-right{
    display:block; margin:0;
  }

  .gate-left .gate-inner,
  .gate-right .gate-inner{
    width:100%;
    border-radius:18px;
    border:1px solid var(--stroke);
    background: var(--panel-strong);
    box-shadow: var(--shadow);
  }

  /* Carte Discord en haut, Local juste après, avec espacement */
  .gate-left .gate-inner{ margin-top: 8dvh; }
  .gate-right .gate-inner{ margin-top: 12px; }

  /* Titres centrés sur mobile */
  .gate h1{ text-align:center; font-size: clamp(20px, 6vw, 24px) }
  .gate .muted{ text-align:center }

  /* Icône au centre */
  .gate-icon{ margin: 0 auto 10px }

  /* Boutons full-width + spacing confortable */
  .gate-btn{ padding:14px 16px; border-radius:14px; font-size:15px }

  /* Form : champs plus grands, doigt-friendly */
  .gate-form input{ height:48px; border-radius:14px; font-size:15px }

  /* Note sous le bouton Discord */
  .gate-note{ text-align:center }

  /* Quelques micro-animations allégées sur mobile */
  .gate-left .gate-inner,
  .gate-right .gate-inner{
    animation: card-rise .28s ease both;
  }
  @keyframes card-rise{
    from{ transform: translateY(6px); opacity:.0 }
    to{ transform:none; opacity:1 }
  }
}

/* === Palier tablette (portrait/landscape) === */
@media (min-width: 761px) and (max-width: 1024px){
  .gate{
    grid-template-columns: 1fr 60px 1fr;
  }
  .gate-inner{ width:min(560px, 88%) }
  .gate-bolt{ height:72vh }
}

/* === Accessibilité : réduire les animations si demandé === */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}