/* Importation des polices */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap");

/* Réinitialisation de base */
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === GÉNÉRAL & FOND === */
body {
  min-height: 100vh;
  background: #0b1a1e; /* Base très sombre, un bleu-noir profond */
  overflow-x: hidden;
  position: relative;
  font-family: "Inter", "Montserrat", Arial, sans-serif;
  color: #e0e0e0; /* Gris très clair pour le texte principal */
  z-index: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Suppression des animations de fond et de particules */
body::before,
body::after {
  content: ""; /* Maintien du contenu vide pour ne pas casser la structure si des JS s'y réfèrent */
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none; /* Suppression des dégradés et particules */
  opacity: 1; /* Opacité par défaut */
  mix-blend-mode: normal; /* Mode de mélange normal */
}

/* === CONTAINER / CARD PRINCIPALE === */
.main-card,
.container {
  background: rgba(
    10,
    20,
    25,
    0.95
  ); /* Fond de carte très sombre, touche de bleu */
  box-shadow: 0 8px 30px rgba(0, 150, 150, 0.15),
    0 0 0 1px rgba(0, 150, 150, 0.2), 0 0 0 4px rgba(0, 70, 70, 0.4); /* Ombres dans les tons bleu canard profonds */
  border-radius: 20px;
  max-width: 520px;
  margin: 80px auto;
  padding: 3em 2.5em 2.5em 2.5em;
  position: relative;
  z-index: 10;
  overflow: hidden;
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(0, 150, 150, 0.4); /* Bordure fine bleu canard sombre */
  /* Animation cardPop supprimée */
}

/* Suppression de l'animation de glow pour le main-card */
.main-card::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: none; /* Suppression de l'éclat */
  filter: none; /* Suppression du flou */
  z-index: 0;
  pointer-events: none;
  /* Animation glowMove supprimée */
}

/* === TYPOGRAPHIE : TITRES === */
h1 {
  font-family: "Orbitron", sans-serif;
  color: #00b0b0; /* Bleu canard vif */
  font-size: 2.8em;
  letter-spacing: 2px;
  margin-bottom: 0.3em;
  text-shadow: 0 0 18px rgba(0, 150, 150, 0.8), 0 0 4px rgba(255, 255, 255, 0.1); /* Ombre de texte bleu canard profond */
  /* Animation titlePulse supprimée */
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}

h2,
.subtitle {
  color: #b0b0b0; /* Gris clair élégant */
  margin-bottom: 1.5em;
  font-size: 1.25em;
  font-weight: 400;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
  position: relative;
}

/* === CHAMPS DE FORMULAIRE === */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0 1.6rem 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 150, 150, 0.2); /* Bordure fine bleu canard */
  background: rgba(
    10,
    20,
    25,
    0.7
  ); /* Fond de champ très sombre semi-transparent */
  color: #e0e0e0;
  font-size: 1.05rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 300;
  box-shadow: 0 0 6px rgba(0, 150, 150, 0.1) inset; /* Ombre interne bleu canard discrète */
  outline: none;
  backdrop-filter: blur(3px);
}

input::placeholder,
textarea::placeholder {
  color: #888888;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #00b0b0; /* Bordure bleu canard vif au focus */
  box-shadow: 0 0 12px rgba(0, 150, 150, 0.6),
    0 0 6px rgba(0, 150, 150, 0.3) inset; /* Ombre de focus bleu canard profond */
  background: rgba(15, 25, 30, 0.8); /* Fond plus clair au focus */
  transform: translateY(-1px);
}

/* === BOUTONS D'ACTION === */
button,
a.button,
.btn-main,
.btn-action {
  display: inline-block;
  background: linear-gradient(
    90deg,
    #00b0b0 0%,
    #007070 100%
  ); /* Dégradé bleu canard vif à profond */
  color: #ffffff;
  padding: 1.1rem 2.5rem;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(0, 150, 150, 0.2),
    0 0 0 1px rgba(0, 150, 150, 0.3); /* Ombre multicouche bleu canard pro */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  overflow: hidden;
  filter: drop-shadow(
    0 0 10px rgba(0, 150, 150, 0.5)
  ); /* Effet glow bleu canard subtil */
}

button:hover,
a.button:hover,
.btn-main:hover,
.btn-action:hover {
  background: linear-gradient(
    90deg,
    #007070 0%,
    #00b0b0 100%
  ); /* Inversion du dégradé */
  box-shadow: 0 6px 35px rgba(0, 150, 150, 0.4),
    0 0 8px rgba(255, 255, 255, 0.1);
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.15) drop-shadow(0 0 18px rgba(0, 150, 150, 0.8)); /* Glow bleu canard plus intense */
}

button:active,
a.button:active,
.btn-main:active,
.btn-action:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 70, 70, 0.6); /* Ombre au clic */
}

/* === VARIANTES DE BOUTONS D'ACTION === */
.btn-action.kick {
  background: linear-gradient(
    90deg,
    #00b0b0 30%,
    #005050 100%
  ); /* Bleu canard vif à très profond */
}
.btn-action.ban {
  background: linear-gradient(90deg, #005050 30%, #00b0b0 100%);
}
.btn-action.rename {
  background: linear-gradient(
    90deg,
    #d0d0d0 30%,
    #a0a0a0 100%
  ); /* Fond gris plus neutre pour l'action secondaire */
  color: #0b1a1e; /* Texte très sombre pour le contraste */
  box-shadow: 0 4px 20px rgba(180, 180, 180, 0.2),
    0 0 0 1px rgba(180, 180, 180, 0.3);
  filter: drop-shadow(0 0 10px rgba(180, 180, 180, 0.5));
}
.btn-action.kick:hover {
  filter: drop-shadow(0 0 8px rgba(0, 150, 150, 0.7));
}
.btn-action.ban:hover {
  filter: drop-shadow(0 0 8px rgba(0, 70, 70, 0.7));
}
.btn-action.rename:hover {
  filter: drop-shadow(0 0 8px rgba(180, 180, 180, 0.7));
}

/* === LISTE DES JOUEURS === */
.players-list {
  list-style: none;
  padding: 0;
  margin: 1.8em 0 2.5em 0;
  z-index: 1;
  position: relative;
}

.players-list li {
  background: linear-gradient(
    90deg,
    rgba(0, 150, 150, 0.08) 0%,
    rgba(0, 70, 70, 0.08) 100%
  ); /* Fond très léger avec des bleus canard profonds */
  margin: 0.6em 0;
  padding: 0.9em 1.2em;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05em;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 150, 150, 0.08); /* Ombre bleu canard très discrète */
  /* Animation fadeInList supprimée */
  border: 1px solid rgba(0, 150, 150, 0.2); /* Bordure fine bleu canard */
  backdrop-filter: blur(2px);
}

.players-list li span {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #f0f0f0;
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px rgba(0, 150, 150, 0.1);
  flex-grow: 1;
  margin-right: 1em;
}

.inline-form {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.rename-input {
  border: none;
  border-radius: 8px;
  padding: 0.4em 0.8em;
  font-size: 0.95em;
  background: rgba(10, 20, 25, 0.9); /* Fond plus sombre */
  color: #e0e0e0;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 150, 150, 0.1) inset;
  border: 1px solid rgba(0, 150, 150, 0.3);
  transition: all 0.2s ease-in-out;
}

.rename-input:focus {
  border-color: #00b0b0;
  box-shadow: 0 0 8px rgba(0, 150, 150, 0.4) inset;
}

/* === MESSAGES D'ERREUR & ALERTES === */
.error {
  color: #ffffff;
  background: linear-gradient(
    90deg,
    #00b0b0 0%,
    #007070 100%
  ); /* Bleu canard plus soutenu pour l'erreur */
  padding: 0.8em 1.5em;
  border-radius: 10px;
  margin-bottom: 1.5em;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  /* Animation shake supprimée */
  box-shadow: 0 0 20px rgba(0, 150, 150, 0.6); /* Ombre plus marquée bleu canard profond */
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}

/* === LIEN DE DÉCONNEXION === */
.logout {
  margin-top: 2.5em;
  display: inline-block;
  background: rgba(10, 20, 25, 0.8); /* Fond plus sombre */
  color: #a0a0a0; /* Gris plus doux */
  border: 1px solid rgba(0, 150, 150, 0.3); /* Bordure subtile bleu canard */
  border-radius: 12px;
  padding: 0.8em 1.6em;
  text-decoration: none;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out,
    box-shadow 0.25s ease-in-out;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.8px;
}
.logout:hover {
  background: #007070; /* Bleu canard profond au survol */
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 150, 150, 0.4);
  transform: translateY(-1px);
}

/* === ID DE SALLE === */
.room-id {
  font-size: 0.85em;
  background: rgba(0, 150, 150, 0.05); /* Fond très léger bleu canard */
  color: #e0e0e0;
  padding: 0.2em 0.8em;
  border-radius: 8px;
  margin-left: 0.5em;
  letter-spacing: 0.5px;
  font-weight: 400;
  border: 1px solid rgba(0, 150, 150, 0.2); /* Bordure discrète bleu canard */
  box-shadow: 0 0 5px rgba(0, 150, 150, 0.2);
}

/* === RESPONSIVE AJUSTEMENTS === */
@media (max-width: 600px) {
  .main-card,
  .container {
    padding: 1.8em 1em;
    margin: 40px auto;
    border-radius: 16px;
  }
  h1 {
    font-size: 1.8em;
    letter-spacing: 1px;
  }
  h2,
  .subtitle {
    font-size: 1.1em;
  }
  .players-list li {
    font-size: 0.9em;
    padding: 0.6em 0.8em;
  }
  .btn-main,
  .btn-action,
  button,
  a.button {
    font-size: 0.95em;
    padding: 0.9em 1.5em;
    border-radius: 12px;
  }
  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }
  .rename-input {
    width: 100%;
    margin-bottom: 0.5em;
  }
}

/* === SCROLLBAR ÉLÉGANTE === */
::-webkit-scrollbar {
  width: 8px;
  background: #0f1a1f; /* Fond de la scrollbar très sombre */
}
::-webkit-scrollbar-thumb {
  background: #007070; /* Pouce bleu canard profond */
  border-radius: 6px;
  border: 2px solid #0b1a1e; /* Bordure assortie au fond */
}

/* === SÉLECTION DE TEXTE PROFESSIONNELLE === */
::selection {
  background-color: #00b0b0; /* Bleu canard vif pour la sélection */
  color: white;
}