html, body {
      margin: 0; 
      padding: 0;
      background: black;
      height: 100%;
      overflow: auto;
      font-family: 'Orbitron', sans-serif;
  display: flex;
  flex-direction: column;
}

    /* Google Font Orbitron */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

.stars {
  position: fixed;
  width: 100%;
  height: 100%;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='5' cy='5' r='1' fill='white'/><circle cx='50' cy='50' r='0.5' fill='white'/><circle cx='90' cy='30' r='0.75' fill='white'/></svg>") repeat;
  animation: moveStars 60s linear infinite;
  z-index: -1;
}

@keyframes moveStars {
  from { background-position: 0 0; }
  to { background-position: -1000px 1000px; }
}


body.centered.dark {
    background: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
  max-width: 600px;
  padding: 2rem;
  background: #111;
  border-radius: 10px;
  box-shadow: 0 0 10px #0ff;
}

.form-box {
    background: #111;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px #0ff;

    /* Ajout pour centrer le contenu verticalement */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-box-admin {
    background: #111;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px #0ff;
    height: 150px;
}

input[type="text"],
input[type="submit"] {
    font-size: 1.2rem;
    margin: 0.5rem;
    padding: 0.75rem;
    border-radius: 5px;
    border: none;
}

input[type="submit"] {
    background: #0cf;
    color: #000;
    cursor: pointer;
}

input[type="submit"]:hover {
    background: #09a;
}

.code-inputs {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.code-inputs input {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    text-align: center;
}

.nombre-inputs {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.nombre-inputs input {
    width: 6rem;
    height: 2rem;
    font-size: 1.8rem;
    text-align: center;
}

.tuyere-inputs {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.tuyere-inputs input {
    width: 12rem;
    height: 2rem;
    font-size: 1.8rem;
    text-align: center;
}

.bonus-input {
    display: block;
    gap: 1rem;
    justify-content: center;
}

.bonus-input input {
    display: block;
    width: 2000px;
    height: 100px;
    font-size: 1.8rem;
    text-align: left;
}

.erreur {
    color: red;
    margin-top: 1rem;
}

.confirmation {
    color: green;
    margin-top: 1rem;
}

.video-screen {
    background: #000;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

.video-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
}


.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: url('play.png') no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
}

#overlay {
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
  color: white;
  text-shadow: 0 0 8px #00f0ff, 0 0 20px #00f0ff;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 15;
}

.video-container {
      position: relative;
      width: 100%;
      height: 100%;
      background: black;
    }

    /* Gestion fullscreen sur container */
    .video-container:-webkit-full-screen {
      width: 100vw !important;
      height: 100vh !important;
    }
    .video-container:-moz-full-screen {
      width: 100vw !important;
      height: 100vh !important;
    }
    .video-container:-ms-fullscreen {
      width: 100vw !important;
      height: 100vh !important;
    }
    .video-container:fullscreen {
      width: 100vw !important;
      height: 100vh !important;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: black;
    }

    /* Bouton play personnalisé */
    .custom-play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 10;
      transition: transform 0.2s ease;
    }

    .custom-play-button img {
      width: 400px;
      height: 400px;
      border-radius: 50%;
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }

    .custom-play-button:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }

    .custom-play-button.hidden {
      display: none;
    }

    /* Overlay nom équipe */
    #teamNameOverlay {
      position: absolute;
      bottom: 20%;
      width: 100%;
      text-align: center;
      font-size: 2.5rem;
      color: white;
      text-shadow: 0 0 8px #00f0ff, 0 0 20px #00f0ff;
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 15;
    }

footer {
  color: #fff;
  text-align: center;
  padding: 15px 0;
}

select.color-select {
    font-size: 1.8rem; /* Augmente visuellement le champ */
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
  }

  table {
  margin-left: auto;
  margin-right: auto;
  /* optionnel : largeur pour mieux centrer */
  width: 80%; /* ou width: 500px; */
}

/* Cache le bouton radio natif */
input[type="radio"] {
  display: none;
}

/* Style des images */
.radio-image {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: 0.3s;
  width: 120px;
    max-width: 120px;
      height: auto;
}

/* Effet quand l'option est sélectionnée */
input[type="radio"]:checked + label img {
  border-color: #0ff;
  box-shadow: 0 0 10px #0ff;
  transform: scale(1.05);
}

 /* Disposition responsive */
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }

/* Pour espacer les options */
label {
  display: block;
   text-align: center;
}