/* Panneau principal de connexion */
#join-game {
  position: fixed !important;
  left: 24px !important;
  bottom: 24px !important;
  top: auto !important;

  width: 430px !important;
  max-width: calc(100vw - 48px) !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  z-index: 100 !important;
}

/* Tous les panneaux */
#join-game > section,
#join-game > .app,
#join-game section.app {
  background: rgba(10, 13, 25, 0.78) !important;
  border: 1px solid rgba(220, 154, 52, 0.5) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 18px !important;
}

/* Titres plus compacts */
#join-game h1,
#join-game h2 {
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
}

/* Champs et boutons */
#join-game input,
#join-game select,
#join-game button {
  min-height: 36px !important;
  border-radius: 8px !important;
}

/* Masque le grand panneau des détails de session */
#join-game > section:nth-of-type(2),
#join-game > .app:nth-of-type(2) {
  display: none !important;
}

/* Bouton retour accueil compact */
#join-game button,
#join-game .button {
  width: 100%;
}

/* Responsive */
@media (max-width: 700px) {
  #join-game {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}

#join-game-details {
  display: none !important;
}
/* ================================
   Mise en page générale
   ================================ */

#join-game {
  position: fixed !important;
  top: 28px !important;
  left: 28px !important;
  bottom: auto !important;

  width: 420px !important;
  max-width: calc(100vw - 56px) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ================================
   Panneaux
   ================================ */

#join-game > section,
#join-game > .app,
#join-game .application {
  background:
    linear-gradient(
      145deg,
      rgba(30, 18, 12, 0.90),
      rgba(72, 38, 16, 0.78)
    ) !important;

  border: 1px solid rgba(239, 167, 72, 0.48) !important;
}

/* ================================
   Titres
   ================================ */

#join-game h1,
#join-game h2 {
  font-size: 1.45rem !important;
  line-height: 1.15 !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

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

#join-game form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#join-game .form-group {
  margin: 0 !important;
}

#join-game input,
#join-game select {
  min-height: 42px !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;

  background: rgba(41, 43, 61, 0.88) !important;
  color: #f4ead8 !important;

  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

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

#join-game button,
#join-game .button {
  min-height: 42px !important;
  width: 100% !important;

  border: 0 !important;
  border-radius: 10px !important;

  background:
    linear-gradient(
      135deg,
      #df8c20,
      #f4b14b
    ) !important;

  color: #211507 !important;
  font-weight: 700 !important;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

  transition:
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease;
}

#join-game button:hover,
#join-game .button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* ================================
   Texte secondaire
   ================================ */

#join-game p,
#join-game .notes,
#join-game .hint {
  color: rgba(234, 218, 198, 0.72) !important;
  line-height: 1.4;
}

/* ================================
   Description du monde
   ================================ */

#join-game-description {
  max-height: 150px !important;
  overflow-y: auto !important;
}

/* Si le panneau possède un autre id */
#join-game .world-description {
  max-height: 150px !important;
  overflow-y: auto !important;
}

/* ================================
   Suppression du bloc session
   ================================ */

#join-game-details {
  display: none !important;
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 700px) {
  #join-game {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;

    width: auto !important;
    max-width: none !important;
  }

  #join-game > section,
  #join-game > .app,
  #join-game .application {
    padding: 14px 16px !important;
  }
}
/* ================================
   TITRE DU MONDE
   ================================ */

#main-header {
  position: fixed !important;
  top: 12px !important;

  left: 470px !important;
  right: 20px !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  z-index: 1000 !important;
  pointer-events: none;
}

#main-header h1 {
  position: static !important;
  transform: none !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(3rem, 5vw, 5.5rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  text-align: center !important;
}
/* ================================
   ICÔNE FOUNDRY
   ================================ */

#logo,
img#logo,
#main-logo,
.foundry-logo,
.vtt-logo {
  position: fixed !important;

  top: 105px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;

  width: 78px !important;
  height: 78px !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 999 !important;
}

/* ================================
   VERSION FOUNDRY
   ================================ */

#watermark {
  position: fixed !important;

  left: 50% !important;
  right: auto !important;
  bottom: 16px !important;
  top: auto !important;

  transform: translateX(-50%) !important;

  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  text-align: center !important;
  white-space: nowrap !important;

  z-index: 1000 !important;
}

#watermark #software-version,
#software-version {
  display: block !important;

  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 1.35rem !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Nouvelle palette des panneaux de connexion */
#join-game > section,
#join-game > .app,
#join-game .application {
  background:
    linear-gradient(
      145deg,
      rgba(8, 22, 28, 0.94),
      rgba(14, 42, 48, 0.86)
    ) !important;

  border: 1px solid rgba(104, 190, 192, 0.38) !important;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Champs */
#join-game input,
#join-game select {
  background: rgba(20, 45, 52, 0.96) !important;
  color: #eef7f5 !important;

  border: 1px solid rgba(136, 211, 211, 0.22) !important;
}

/* Titres */
#join-game h1,
#join-game h2 {
  color: #f3f7f5 !important;
}

/* Texte secondaire */
#join-game p,
#join-game .notes,
#join-game .hint {
  color: rgba(221, 237, 234, 0.76) !important;
}

/* Boutons */
#join-game button,
#join-game .button {
  background:
    linear-gradient(
      135deg,
      #2d8f91,
      #56b8b3
    ) !important;

  color: #061516 !important;
}