/* =========================
   BASE (TON CSS) + RESPONSIVE
   ========================= */

/* Reset léger */
*{ box-sizing:border-box; }
html, body{ width:100%; height:100%; }

/* Fond sombre et texture légère */
body {
  background: linear-gradient(135deg, #0d0d0d 0%, #121212 100%);
  color: #00ffea;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;                 /* ✅ pour mobile */
  padding: 30px;             /* ✅ remplace margin */
  user-select: none;
}

/* ✅ Container optionnel (si tu ajoutes class="container" dans HTML) */
.container{
  max-width: 980px;
  margin: 0 auto;
}

/* ✅ Cartes optionnelles (si tu veux entourer des blocs) */
.card{
  padding: 16px;
  border: 1px solid rgba(0,255,234,.18);
  border-radius: 14px;
  background: rgba(10,10,10,.28);
  box-shadow: 0 0 18px rgba(0,255,234,.10);
  margin: 14px 0;
}

/* Titres */
h1, h2, h3 {
  text-shadow: 0 0 8px #00ffea, 0 0 15px #00c8b3;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  margin-top: 0;
}

/* Boutons stylés */
button {
  background: transparent;
  border: 2px solid #00ffea;
  color: #00ffea;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 10px 25px;
  margin: 10px 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow:
    0 0 8px #00ffea,
    0 0 20px #00ffea inset;
  text-transform: uppercase;
}

button:hover {
  background: #00ffea;
  color: #121212;
  box-shadow:
    0 0 15px #00fff0,
    0 0 30px #00fff0 inset;
  transform: scale(1.05);
}

/* ✅ bouton disabled (utile mode spectateur / fin) */
button:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 0 6px rgba(0,255,234,.45);
}

/* Inputs stylés */
input[type="number"], input[type="text"] {
  background: #121212;
  border: 2px solid #00ffea;
  color: #00ffea;
  font-family: monospace;
  font-size: 1.1rem;
  padding: 8px 15px;
  border-radius: 8px;
  margin: 5px 0;
  width: 180px; /* desktop */
  max-width: 100%;
  box-shadow: 0 0 5px #00ffea;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

input[type="number"]:focus, input[type="text"]:focus {
  border-color: #00fff0;
  outline: none;
  box-shadow: 0 0 12px #00fff0;
  transform: translateY(-1px);
}

/* ✅ SELECT (menu déroulant) – style néon + flèche custom */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-color: #121212;
  border: 2px solid #00ffea;
  color: #00ffea;

  font-family: monospace;
  font-size: 1.05rem;

  padding: 10px 44px 10px 14px; /* espace à droite pour la flèche */
  border-radius: 10px;

  margin: 6px 0 10px 0;
  min-width: 260px; /* desktop */
  max-width: 100%;

  box-shadow:
    0 0 6px rgba(0,255,234,.85),
    0 0 18px rgba(0,255,234,.22) inset;

  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;

  /* flèche SVG en data-uri */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='%2300ffea' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

select:hover {
  border-color: #00fff0;
  box-shadow:
    0 0 12px rgba(0,255,240,.95),
    0 0 22px rgba(0,255,240,.25) inset;
}

select:focus {
  outline: none;
  border-color: #00fff0;
  box-shadow: 0 0 16px rgba(0,255,240,.95);
  transform: translateY(-1px);
}

/* Options (Safari/Chrome les limitent parfois, mais ça aide) */
select option {
  background: #0f1113;
  color: #00ffea;
}

/* Labels */
label {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 6px;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(0,255,234,.65);
}

/* Listes */
ul { padding-left: 20px; }
li {
  margin-bottom: 6px;
  letter-spacing: 1px;
}

/* Sections masquées */
.hidden { display: none; }

/* Zone messages */
#messages, #scores, #waitError, #createError, #joinError {
  margin-top: 1rem;
  font-weight: bold;
  color: #00ffea;
  text-shadow: 0 0 6px #00ffea;
}

/* Style zone choix */
#gameArea { margin-top: 20px; }

/* ✅ Layout responsive sans toucher à tes HTML :
   - Les champs et boutons se mettent en bloc sur petit écran
*/
@media (max-width: 820px){
  body{ padding: 14px; }

  /* Inputs / select / boutons prennent toute la largeur */
  input[type="number"], input[type="text"], select{
    width: 100%;
    min-width: 0;
  }

  button{
    width: 100%;
    margin: 10px 0;
  }

  /* titres un peu plus petits */
  h1{ font-size: 1.6rem; }
  h2{ font-size: 1.2rem; }
}

/* Petit effet glitch titre (optionnel) */
@keyframes glitch {
  0%   { text-shadow: 2px 0 #00fff0, -2px 0 #00c8b3; }
  20%  { text-shadow: 2px 2px #00fff0, -2px -2px #00c8b3; }
  40%  { text-shadow: 2px -2px #00fff0, -2px 2px #00c8b3; }
  60%  { text-shadow: 2px 0 #00fff0, -2px 0 #00c8b3; }
  100% { text-shadow: 2px 0 #00fff0, -2px 0 #00c8b3; }
}

.glitch { animation: glitch 1.4s infinite; }