/* LOGIN — Cockpit UI */
#screen-login.sc-screen.active {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.login-panel {
  width: min(420px, 90vw);
  padding: 28px 24px;
  background: rgba(10, 20, 33, 0.6);
  border: 1px solid var(--sc-border);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 32px rgba(92,199,255,.2);
  text-align: center;
}

/* Titre futuriste */
.login-title {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  margin-bottom: 14px;
  color: #e6f4ff;
  text-shadow: 0 0 12px rgba(92,199,255,.6);
  letter-spacing: .05em;
}

/* Champs */
.input-wrap { position: relative; width: 100%; }

.login-input {
  width: 100%;
  padding: 12px 14px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,0.04);
  color: #cfe8ff;
  font-size: 1rem;
  backdrop-filter: blur(4px);
}

/* Bouton Hyperdrive Style */
.login-btn {
  width: 100%;
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 1.05rem;
  border-radius: 12px;
  background: var(--sc-accent);
  color: #031219;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--sc-border);
  box-shadow: 0 0 18px rgba(92,199,255,.4);
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .25s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(92,199,255,.55);
}

/* Alternatif */
.login-alt {
  margin-top: 12px;
  color: #9ec7e6;
  font-size: .9rem;
}
.login-alt a {
  color: var(--sc-accent);
  text-decoration: none;
  font-weight: 600;
}
.login-alt a:hover {
  text-decoration: underline;
}

/* Arrivée animée */
.anim-panel {
  opacity: 0;
  transform: translateY(20px) scale(.97);
  animation: fadeUp .7s ease-out forwards;
}

/* Mini KAR-2 au dessus du panel */
.login-kar2 {
  width: 90px;
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(92,199,255,.5));
  opacity: .8;
}

/* Animation mini droid (léger flottement) */
.anim-kar2-small {
  animation: smallFloat 3s infinite ease-in-out;
}

@keyframes smallFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

#screen-prelogin.sc-screen.active {
  display:flex;
  justify-content:center;
  align-items:center;
}

.prelogin-btn {
  margin-top:22px;
  background:var(--sc-accent);
  color:#031219;
  padding:14px 28px;
  font-size:1.2rem;
  font-weight:700;
  border-radius:999px;
  border:1px solid var(--sc-border);
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 0 24px rgba(92,199,255,.45);
  transition:transform .25s ease;
}
.prelogin-btn:hover {
  transform: scale(1.05);
}

/* ===== Pre-Login (Accéder au cockpit) ===== */
#screen-prelogin .sc-center{
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; text-align: center;
  padding: 16px;
}
#screen-prelogin .login-kar2{
  width: min(46vw, 180px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(92,199,255,.35));
  animation: kar2-float 3s ease-in-out infinite;
}
#btn-prelogin{
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--sc-border);
  background: linear-gradient(90deg,#23a7ff,#00ffa8);
  color: #07121e;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}
@keyframes kar2-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@media (min-width: 768px){
  #screen-prelogin .login-kar2{ width: 220px; }
}
@media (min-width: 1200px){
  #screen-prelogin .login-kar2{ width: 280px; }
}

/* ===== Login window : centre & CTA visible ===== */
#screen-login.windowed{
  align-items: center; justify-content: center;
}
#screen-login .login-panel{
  margin: 0 auto;
  width: min(92vw, 440px);
}
#screen-login .login-title{ font-size: 1.4rem; }
@media (min-width: 1200px){
  #screen-login .login-panel{ width: 500px; }
  #screen-login .login-title{ font-size: 1.6rem; }
}

/* Lien “Créer mon accès” → style bouton secondaire */
#screen-login .login-alt{
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  margin-top: 14px;
}
#to-signup.btn-secondary{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--sc-border);
  background: rgba(14,24,38,.6);
  color: #e6f2ff; text-decoration: none; font-weight: 700;
}

#login-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;
}

#login-btn.enabled {
  animation: glow 1.2s infinite alternate ease-in-out;
}
@keyframes glow {
  from { transform: scale(1);}
  to   { transform: scale(1.06);}
}

/* Shake */
@keyframes shake {
  0%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  50%{transform:translateX(4px);}
  75%{transform:translateX(-4px);}
 100%{transform:translateX(0);}
}
#login-btn.shake {
  animation: shake .45s ease;
}

/* Aide */
#login-help {
  color: #ff9c9c;
  text-align: center;
  font-size: .85rem;
  margin-top: 6px;
}

/* 🌌 Bouton Login direct depuis l'écran langue */
#btn-to-login {
    margin-top: 1.8rem;
    padding: 0.95rem 1.4rem;
    width: 100%;
    max-width: 300px;
    display: inline-block;
    border: none;
    border-radius: 50px;
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    
    /* Style military clean */
    background: #101928;
    color: #6bf3ff;
    box-shadow: 0 0 12px rgba(90, 220, 255, 0.6),
                inset 0 0 8px rgba(0, 130, 170, 0.45);

    transition: transform 0.22s ease, box-shadow 0.25s ease;
}

/* Survol/tap */
#btn-to-login:active,
#btn-to-login:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 18px rgba(90, 220, 255, 0.9),
                inset 0 0 10px rgba(0, 160, 200, 0.6);
}

/* Mode "pulsation" quand on détecte un capitaine déjà connu */
#btn-to-login.pulse {
    animation: pulseStar 1.2s infinite ease-in-out;
}

@keyframes pulseStar {
    0%   { transform: scale(1);   box-shadow: 0 0 10px rgba(0,200,255,.4); }
    50%  { transform: scale(1.08); box-shadow: 0 0 20px rgba(0,200,255,.9); }
    100% { transform: scale(1);   box-shadow: 0 0 10px rgba(0,200,255,.4); }
}

/* ✅ Mobile-First Align */
.sc-lang-choices {
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#btn-to-login {
    margin-bottom: 10px;
}

/* KAR-2 holo */
.login-kar2 {
  opacity: 0;
  transform: scale(.85);
  animation: kar2-appear .8s ease-out forwards;
  filter: drop-shadow(0 0 18px rgba(0,255,255,.55));
}

@keyframes kar2-appear {
  to { opacity:1; transform:scale(1); }
}

/* Panel slide */
.login-panel {
  opacity: 0;
  transform: translateY(50px);
  animation: panel-up .9s .2s ease-out forwards;
}

@keyframes panel-up {
  to { opacity:1; transform: translateY(0); }
}

/* Bouton boost */
.login-btn {
  animation: pulse 2.2s infinite ease-in-out;
}

@keyframes pulse {
  0%,100% { transform: scale(1); box-shadow:0 0 18px rgba(0,191,255,.25); }
  50%     { transform: scale(1.04); box-shadow:0 0 18px rgba(0,191,255,.45); }
}

/* ✅ Succès → flash & halo */
#screen-login.login-ok {
  animation: login-ok-flash .6s ease-out;
}

@keyframes login-ok-flash {
  0% { background: rgba(0,255,180,.35); }
  100%{ background: transparent; }
}