/* Apparence de la page : fond sombre, jeu centré, voile aux couleurs Vestige. */
html, body {
  margin: 0;
  height: 100%;
  background: #08080c;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scene {
  position: relative;
}

/* L'interface HTML suit la taille du canvas : le jeu fixe --echelle-ui à chaque image
   (largeur affichée / 1280). Sans ça, cartes et boutons restent en pixels fixes —
   minuscules sur un grand écran, énormes sur un petit. */
#voile,
#choix,
#pacte,
#bastion,
#reliquaire,
#serments,
#pause-abandon {
  zoom: var(--echelle-ui, 1);
}

canvas {
  display: block;
  /* Le jeu remplit le navigateur en gardant ses proportions 16:9. */
  width: min(96vw, calc(96vh * 16 / 9));
  height: auto;
}

/* Le voile recouvre l'arène pour l'écran-titre et l'écran de chute. */
#voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(8, 8, 12, 0.82);
  font-family: Georgia, 'Times New Roman', serif;
  text-align: center;
}

#voile.cache {
  display: none;
}

#voile h1 {
  margin: 0;
  color: #d4a017;
  font-size: 42px;
  font-weight: normal;
  letter-spacing: 2px;
}

#voile p {
  margin: 0;
  color: #f2ead9;
  font-size: 18px;
  font-style: italic;
}

/* La ligne annexe du voile : record, fragments du Serment — discrète, sous le texte principal. */
#voile-annexe {
  max-width: 720px;
  color: #9a917e;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

#voile button {
  margin-top: 12px;
  padding: 10px 32px;
  background: none;
  border: 2px solid #d4a017;
  color: #d4a017;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 1px;
  cursor: pointer;
}

#voile button:hover {
  background: #d4a017;
  color: #0d0d14;
}

/* Le bouton discret du voile (accès au Bastion). */
#voile button.secondaire {
  margin-top: 0;
  padding: 6px 18px;
  font-size: 14px;
  border-color: #1e2a4a;
  color: #9a917e;
}

#voile button.secondaire:hover {
  border-color: #d4a017;
  color: #d4a017;
  background: none;
}

/* Les écrans de choix (montée de niveau, pacte du Cœur), le Bastion, le Reliquaire, les Serments. */
#choix,
#pacte,
#bastion,
#reliquaire,
#serments {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(8, 8, 12, 0.82);
  font-family: Georgia, 'Times New Roman', serif;
}

#choix.cache,
#pacte.cache,
#bastion.cache,
#reliquaire.cache,
#serments.cache {
  display: none;
}

#choix h2,
#pacte h2,
#bastion h2,
#reliquaire h2,
#serments h2 {
  margin: 0;
  color: #d4a017;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 1px;
}

#pacte h2 {
  color: #ff5a2a;
}

#pacte p {
  margin: 0;
  color: #f2ead9;
  font-style: italic;
  font-size: 15px;
}

#choix-cartes,
#pacte-cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 900px;
}


.carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 200px;
  padding: 22px 16px;
  background: #101020;
  border: 2px solid #1e2a4a;
  color: #f2ead9;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.carte strong {
  color: #d4a017;
  font-size: 18px;
  font-weight: normal;
}

.carte:hover {
  border-color: #d4a017;
}

/* Le Bastion : la ressource et les bâtiments. */
#bastion-fragments {
  margin: 0;
  color: #4a7bd0;
  font-size: 16px;
}

#bastion-batiments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* Le Reliquaire ouvert : le Registre et les fragments du Serment. */
#reliquaire-registre {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 26px;
  font-size: 15px;
  color: #f2ead9;
}

#reliquaire-registre .valeur {
  color: #d4a017;
  text-align: right;
}

/* Le Reliquaire : un vestibule à quatre portes, une seule salle affichée à la fois. */
#reliquaire {
  overflow-y: auto;
  padding: 26px 0;
}

#reliquaire .cache {
  display: none;
}

#reliquaire-salles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* Les hauts faits accomplis à cette chute, en or sur l'écran de mort. */
#voile-hautsfaits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #d4a017;
  font-size: 16px;
}

#voile-hautsfaits:empty {
  display: none;
}

/* Les hauts faits au Reliquaire : accomplis en or, à faire en clair, voilés en « ??? ». */
#reliquaire-hautsfaits {
  max-width: 760px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: rgba(242, 234, 217, 0.35);
}

#reliquaire-hautsfaits .trouve {
  color: #f2ead9;
}

#reliquaire-hautsfaits strong {
  color: #d4a017;
  font-weight: normal;
}

/* Les reliques des Échos : les écrins vides sont voilés, les reliques gagnées portent leur nom d'or. */
#reliquaire-reliques {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: rgba(242, 234, 217, 0.35);
}

#reliquaire-reliques .trouve {
  color: #f2ead9;
}

#reliquaire-reliques strong {
  color: #d4a017;
  font-weight: normal;
}

#reliquaire-serment {
  max-width: 760px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-style: italic;
  color: #9a917e;
  text-align: center;
}

#reliquaire-serment .trouve {
  color: #f2ead9;
}

#reliquaire-retour {
  padding: 8px 26px;
  background: none;
  border: 2px solid #d4a017;
  color: #d4a017;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

#reliquaire-retour:hover {
  background: #d4a017;
  color: #0d0d14;
}

/* La Salle des Serments : les vœux, dont un seul brûle à la fois. */
#serments-intro {
  margin: 0;
  color: #f2ead9;
  font-style: italic;
  font-size: 15px;
}

#serments-cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.carte.jure {
  border-color: #d4a017;
  background: #16142a;
}

/* Le bouton d'abandon de la pause, sous le mot « Pause » au centre de l'écran. */
#pause-abandon {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
  padding: 10px 28px;
  background: none;
  border: 2px solid #a03030;
  color: #f2ead9;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

#pause-abandon:hover {
  background: #a03030;
}

#pause-abandon.cache {
  display: none;
}

/* Le choix de la vue (zoom caméra), discret sous les boutons de l'écran-titre. */
#voile-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #9a917e;
  font-size: 14px;
  font-style: italic;
}

#voile-zoom button.actif {
  border-color: #d4a017;
  color: #d4a017;
}

/* Le bouton de l'écran-titre pendant que la Garde s'équipe. */
#voile-bouton:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Le détail des fragments à l'écran de mort : une ligne par source, le total souligné d'or. */
#voile-fragments {
  list-style: none;
  margin: 0;
  padding: 10px 18px;
  width: 380px;
  background: rgba(16, 16, 32, 0.85);
  border: 1px solid #2a2a44;
  font-size: 15px;
  color: #f2ead9;
  text-align: left;
}

#voile-fragments:empty {
  display: none;
}

#voile-fragments li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 3px 0;
}

#voile-fragments li.total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #d4a017;
  color: #d4a017;
}

/* Les lignes d'une carte de serment : le vœu, le gain, la condition — chacune sur sa ligne. */
.serment-voeu {
  font-style: italic;
}

.serment-gain {
  color: #d4a017;
  font-size: 17px;
}

.serment-condition {
  font-size: 13px;
  opacity: 0.75;
}

#serments-retour {
  padding: 8px 26px;
  background: none;
  border: 2px solid #d4a017;
  color: #d4a017;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

#serments-retour:hover {
  background: #d4a017;
  color: #0d0d14;
}

.batiment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  background: #101020;
  border: 2px solid #1e2a4a;
  color: #f2ead9;
}

.batiment canvas {
  width: 220px;
  border: 1px solid #1e2a4a;
}

.batiment strong {
  color: #d4a017;
  font-size: 19px;
  font-weight: normal;
}

.batiment span {
  max-width: 340px;
  font-size: 14px;
  text-align: center;
}

.batiment button {
  padding: 8px 22px;
  background: none;
  border: 2px solid #d4a017;
  color: #d4a017;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.batiment button:hover:enabled {
  background: #d4a017;
  color: #0d0d14;
}

.batiment button:disabled {
  border-color: #1e2a4a;
  color: #9a917e;
  cursor: default;
}

#bastion-retour {
  padding: 10px 32px;
  background: none;
  border: 2px solid #d4a017;
  color: #d4a017;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
}

#bastion-retour:hover {
  background: #d4a017;
  color: #0d0d14;
}

/* La carte du pacte : les couleurs du Cœur, pas celles de la Garde. */
.carte.carte-coeur {
  border-color: #5a2418;
}

.carte.carte-coeur strong {
  color: #ff5a2a;
}

.carte.carte-coeur:hover {
  border-color: #ff5a2a;
}