/* Polices servies par le VPS (licence OFL), jeu latin seulement */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/cinzel.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/im-fell-english.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/im-fell-english-italic.woff2") format("woff2");
}

/* Hors de tout @layer : ces règles passent devant celles de Foundry */

:root {
  --albi-black: #0e0a09;
  --albi-fire: #e0782f;
  --albi-gold: #b5a583;
  --albi-parchment: #e9dcc0;
  --albi-gold-deep: #c49a4f;
  --albi-gold-light: #e2c283;
  --albi-blood: #b22222;
  --albi-ui-font: "Cinzel", serif;
  --albi-text-font: "IM Fell English", Georgia, serif;
  /* Géométrie du bandeau : la liste des joueurs se cale dessus */
  --albi-field-height: 46px;
  --albi-band-bottom: 2.25rem;
  --albi-form-gap: 1rem;
  --albi-username-offset: calc(var(--albi-band-bottom) + var(--albi-field-height));
  --albi-recap-height: 30vh;
}

/* Fond : illustration fixe et vignette */
body.join #main-background {
  background-image: url("albi-fond.webp");
  background-size: cover;
  /* Foundry l'affiche à moitié transparente, notre vignette suffit */
  opacity: 1;
  /* Calé un peu bas : sur écran ultra-large, garde le titre et la couronne */
  background-position: center 65%;
}

body.join #main-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 55% 50%, transparent 50%, rgba(8, 5, 4, 0.45) 100%),
    linear-gradient(to top, rgba(8, 5, 4, 0.85) 0%, transparent 18%);
}

/* Écran tenu en hauteur : l'illustration verticale, titre en haut */
@media (orientation: portrait) {
  body.join #main-background {
    background-image: url("albi-fond-portrait.webp");
    background-position: center top;
  }
}

/* Masqués à l'œil mais lus par les lecteurs d'écran : le titre est dessiné dans l'illustration */
body.join #main-header,
body.join #join-game-form label.icon {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* « Précédemment… » : la description du monde, sous le titre de l'illustration */
body.join #join-game-world {
  position: fixed;
  top: 52vh;
  left: 8vw;
  width: min(30rem, 84vw);
  max-height: var(--albi-recap-height);
  margin: 0;
  padding: 1rem 1.25rem;
  background: rgba(14, 10, 9, 0.72);
  border: none;
  border-left: 2px solid var(--albi-gold);
  border-radius: 0;
  box-shadow: none;
  z-index: 2;
}

body.join #join-game-world h2 {
  margin: 0 0 0.5rem;
  border: none;
  font-family: var(--albi-ui-font);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  color: var(--albi-gold);
}

body.join #join-game-world h2::before,
body.join #join-game-world h2::after {
  display: none;
}

body.join #world-description {
  max-height: calc(var(--albi-recap-height) - 4rem);
  font-family: var(--albi-text-font);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--albi-parchment);
}

body.join.albi-no-recap #join-game-world {
  display: none;
}

/* Bandeau du formulaire, collé en bas de l'écran */
body.join #join-game {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: 2.5rem 8vw var(--albi-band-bottom);
  z-index: 3;
}

body.join #join-game-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--albi-form-gap);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

body.join #join-game-form::before,
body.join #join-game-form::after,
body.join #join-game-form h2 {
  display: none;
}

body.join #join-game-form .form-group {
  flex: 1;
  margin: 0;
}

body.join #join-game-form input {
  height: var(--albi-field-height);
  padding: 0 1rem;
  background: rgba(14, 10, 9, 0.78);
  border: 1px solid rgba(181, 165, 131, 0.45);
  border-radius: 2px;
  font-family: var(--albi-text-font);
  font-size: 1.15rem;
  color: var(--albi-parchment);
}

body.join #join-game-form input::placeholder {
  color: rgba(233, 220, 192, 0.55);
}

/* Champ actif : liseré rouge sang */
body.join #join-game-form input:focus {
  border-color: var(--albi-blood);
  box-shadow: 0 0 0 1px var(--albi-blood), 0 0 14px rgba(178, 34, 34, 0.45);
  outline: none;
}

body.join #join-game-form .form-footer {
  flex: none;
  margin: 0;
}

/* Bouton « Affronter le Cauchemar » : l'or du titre, une lueur qui respire */
body.join #join-game-form button[type="submit"] {
  height: var(--albi-field-height);
  padding: 0 1.75rem;
  background: var(--albi-gold-deep);
  border: 1px solid var(--albi-gold-light);
  border-radius: 2px;
  font-family: var(--albi-ui-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--albi-black);
  animation: albi-gold-pulse 3.5s ease-in-out infinite;
}

/* La coche de Foundry décentrait le texte */
body.join #join-game-form button[type="submit"] i {
  display: none;
}

/* Au survol, l'or se teinte du sang de la couronne */
body.join #join-game-form button[type="submit"]:hover,
body.join #join-game-form button[type="submit"]:focus-visible {
  background: var(--albi-gold-light);
  box-shadow: 0 0 0 1px var(--albi-blood), 0 0 22px rgba(178, 34, 34, 0.7);
  animation: none;
}

@keyframes albi-gold-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(216, 179, 106, 0.25); }
  50% { box-shadow: 0 0 20px rgba(216, 179, 106, 0.55); }
}

/* Rien d'utile aux joueurs : détails de la partie et numéro de version */
body.join #join-game-details,
body.join #watermark {
  display: none;
}

/* Retour à l'installation : replié derrière le cadenas, pour le MJ seulement */
body.join #join-game-setup {
  display: none;
}

body.join.albi-admin-open #join-game-setup {
  position: fixed;
  right: 1.5rem;
  bottom: 4.5rem;
  display: block;
  width: min(22rem, calc(100vw - 3rem));
  z-index: 4;
}

/* Boutons discrets du coin, sur une grille de slots de 36 px : cadenas (0), musique (1), jauge (2 à 4), mappemonde (5) */
.albi-corner-button {
  position: fixed;
  right: calc(1.25rem + var(--slot, 0) * 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  bottom: 1.25rem;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: rgba(181, 165, 131, 0.55);
  z-index: 4;
  cursor: pointer;
}

.albi-corner-button:hover,
.albi-corner-button:focus-visible {
  color: var(--albi-gold);
}

/* Jauge du volume, à gauche du haut-parleur : trait doré rempli jusqu'au niveau (--fill, posé par le script) */
.albi-volume {
  position: fixed;
  right: calc(1.25rem + 2 * 36px);
  bottom: 1.25rem;
  width: calc(3 * 36px - 4px);
  height: 32px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  z-index: 4;
}

.albi-volume::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--albi-gold-deep) var(--fill), rgba(181, 165, 131, 0.3) var(--fill));
}

.albi-volume::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--albi-gold-deep) var(--fill), rgba(181, 165, 131, 0.3) var(--fill));
}

.albi-volume::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: none;
  border-radius: 50%;
  background: var(--albi-gold-light);
  appearance: none;
}

.albi-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--albi-gold-light);
}

.albi-volume:focus-visible {
  outline: 1px solid var(--albi-gold);
  outline-offset: 2px;
}

/* Pas de cadre après un clic, seulement au clavier */
.albi-corner-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Liste des joueurs de Foundry : il l'ouvre sous le champ, donc hors de l'écran ; on l'ouvre au-dessus */
body.join #autocomplete {
  top: auto !important;
  bottom: calc(var(--albi-username-offset) + 4px);
  max-height: min(50vh, 20rem);
  overflow-y: auto;
}

/* Braises qui montent du bas de l'écran */
.albi-embers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.albi-embers span {
  position: absolute;
  bottom: -10px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--albi-fire);
  box-shadow: 0 0 6px 2px rgba(224, 120, 47, 0.7);
  opacity: 0;
  animation: albi-ember-rise var(--duration) linear var(--delay) infinite;
}

@keyframes albi-ember-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(var(--drift), -85vh); opacity: 0; }
}

/* Téléphone ou fenêtre étroite : les deux champs côte à côte, le bouton dessous, pour laisser voir la couronne */
@media (max-width: 720px) {
  /* Le champ du nom est sur la ligne du haut : bouton, écart et champ le séparent du bas */
  :root {
    --albi-field-height: 40px;
    --albi-band-bottom: 1rem;
    --albi-form-gap: 0.5rem;
    --albi-username-offset: calc(var(--albi-band-bottom) + 2 * var(--albi-field-height) + var(--albi-form-gap));
    --albi-recap-height: 36vh;
  }

  body.join #join-game-world {
    top: 30vh;
    left: 6vw;
  }

  body.join #join-game {
    padding: 1.5rem 5vw var(--albi-band-bottom);
  }

  body.join #join-game-form {
    flex-wrap: wrap;
  }

  body.join #join-game-form .form-group {
    flex: 1 1 40%;
  }

  body.join #join-game-form input {
    padding: 0 0.75rem;
    font-size: 1rem;
  }

  body.join #join-game-form .form-footer,
  body.join #join-game-form button[type="submit"] {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Les boutons du coin passent en haut, ils recouvraient le bouton */
  .albi-corner-button,
  .albi-volume {
    top: 0.75rem;
    bottom: auto;
  }

  body.join.albi-admin-open #join-game-setup {
    top: 3.25rem;
    bottom: auto;
  }

  /* Le texte du bouton tient sur une ligne, même sur un petit écran */
  body.join #join-game-form button[type="submit"] {
    padding: 0 0.5rem;
    white-space: nowrap;
    letter-spacing: 0.06em;
  }
}

/* Mouvements réduits à la demande du joueur */
@media (prefers-reduced-motion: reduce) {
  body.join #join-game-form button[type="submit"] {
    animation: none;
  }

  .albi-embers {
    display: none;
  }
}