/* ─────────────────────────────────────────────────────────────────────────
   Le socle de la parure : les pieces qui reviennent sur les dix-huit planches
   de direction artistique. Un cadre a ferrures, une banniere de titre, une
   rangee d'action, un sceau de decision, une jauge segmentee, une vignette
   peinte, un bloc de parchemin.

   Chaque ecran habille ses propres blocs avec ces classes. Rien ici ne vise
   un ecran en particulier : les regles propres a un ecran vivent dans sa
   feuille, pas ici.
   ───────────────────────────────────────────────────────────────────────── */


/* ── Le cadre des panneaux ───────────────────────────────────────────────
   Toutes les planches montrent le meme panneau : un fond de pierre presque
   noir, un double lisere d'or, une ferrure a deux angles opposes. */

.parure {
  position: relative;
  padding: var(--e-4) var(--e-4);
  /* Les coins au dragon sont tires d'une planche, poses quatre fois en
     miroir ; sous le voile sombre, le mur de pierre de la meme planche. */
  background:
    url(/jeu/images/cadres/coin-hg.webp?v=308) left top / 3.2rem auto no-repeat,
    url(/jeu/images/cadres/coin-hd.webp?v=308) right top / 3.2rem auto no-repeat,
    url(/jeu/images/cadres/coin-bg.webp?v=308) left bottom / 3.2rem auto no-repeat,
    url(/jeu/images/cadres/coin-bd.webp?v=308) right bottom / 3.2rem auto no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 88%, transparent), color-mix(in srgb, var(--pierre-0) 93%, transparent)),
    url(/jeu/images/cadres/pierre.webp?v=308) center / 384px 384px repeat;
  border: 1px solid var(--or-fonce);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--or) 22%, transparent), var(--ombre-2);
}

/* Les equerres tracees en CSS ont cede la place aux coins d'or de la planche.
   Les deux pseudo-elements restent poses, vides, pour que les feuilles qui les
   citent ne trouvent pas un trou. */
.parure::before,
.parure::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.parure--sang {
  border-color: color-mix(in srgb, var(--cire-vif) 75%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--cire-vif) 28%, transparent), var(--ombre-2);
}

.parure--gel {
  border-color: color-mix(in srgb, var(--or-sourd) 60%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--or-sourd) 24%, transparent), var(--ombre-2);
}


/* ── La banniere de titre ────────────────────────────────────────────────
   Le titre des planches est pose sur un bandeau sombre aux bouts biseautes,
   avec un losange d'or de chaque cote. */

.parure__banniere {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin: 0 0 var(--e-3);
  padding: var(--e-1) var(--e-3);
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
  /* Le cartouche de la planche : ses deux pointes sont les tranches, le
     milieu s'etire a la largeur du titre. */
  border: 0 solid transparent;
  border-width: 0 1.1rem;
  border-image: url(/jeu/images/cadres/cartouche.webp?v=308) 0 100 0 100 fill / 0 1.1rem 0 1.1rem stretch;
  background: none;
}

.parure__banniere::before,
.parure__banniere::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  background: var(--or);
  transform: rotate(45deg);
  opacity: 0.85;
}

.parure__banniere--sang {
  color: var(--parchemin-clair);
  /* Le meme cartouche, tire vers le sang par un filtre : une seule image. */
  filter: sepia(0.7) saturate(2.4) hue-rotate(-28deg) brightness(0.92);
}


/* ── Les rangees d'action ────────────────────────────────────────────────
   Le menu d'une ville et celui d'un camp sont une pile de lignes : une marque
   a gauche, le mot, un chevron a droite. La ligne qu'on attend du joueur
   porte le rouge. */

.rangee {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-corps);
  font-size: var(--t-4);
  text-align: left;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  cursor: pointer;
}

.rangee + .rangee { border-top: 0; }

.rangee:hover,
.rangee:focus-visible {
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 95%, transparent), color-mix(in srgb, var(--pierre-2) 95%, transparent));
}

.rangee__marque {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rangee__mot { flex: 1; min-width: 0; }

.rangee__dit {
  display: block;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

.rangee__chevron {
  flex: none;
  color: var(--or);
  opacity: 0.7;
}

.rangee--premiere {
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire) 90%, transparent), color-mix(in srgb, var(--cire-fonce) 90%, transparent));
  border-color: color-mix(in srgb, var(--cire-vif) 80%, transparent);
}

.rangee--premiere:hover,
.rangee--premiere:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire-vif) 95%, transparent), color-mix(in srgb, var(--cire-fonce) 95%, transparent));
  border-color: color-mix(in srgb, var(--or) 70%, transparent);
}

.rangee[disabled],
.rangee[aria-disabled="true"] {
  color: var(--texte-pale);
  cursor: not-allowed;
  opacity: 0.55;
}


/* ── Le sceau, bouton de la decision ─────────────────────────────────────
   « Lancer la bataille », « Choisir l'operation », « Rang suivant » : chaque
   planche finit par un bouton large, rouge, cercle d'or. */

.sceau-sang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 2.9rem;
  padding: var(--e-1) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.09em;
  color: var(--parchemin-clair);
  text-shadow: var(--ombre-texte);
  /* La plaque de cuir rouge de la planche, coins et rivets dans les tranches. */
  border: 0.55rem solid transparent;
  border-image: url(/jeu/images/cadres/plaque-sang.webp?v=308) 44 fill / 0.55rem stretch;
  background: none;
  box-shadow: var(--ombre-2);
  cursor: pointer;
}

.sceau-sang:hover,
.sceau-sang:focus-visible {
  filter: brightness(1.18);
}

.sceau-sang[disabled] {
  color: var(--texte-pale);
  filter: grayscale(0.85) brightness(0.72);
  cursor: not-allowed;
}


/* ── Les jauges segmentees ───────────────────────────────────────────────
   Le moral, la loyaute et l'ambition se lisent en segments : les planches
   montrent des paliers, et un palier se compte. */

.jauge-parure {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.jauge-parure__rail {
  position: relative;
  flex: 1;
  min-width: 4rem;
  height: 0.6rem;
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  overflow: hidden;
}

/* La part remplie est posee dans un `span`. Sans `display: block`, sa largeur
   ne prenait pas et toutes les jauges du jeu restaient sur un rail noir : le
   moral, la loyaute, l ambition, les hommes debout. Deux ecrans avaient deja
   pose la meme rustine chacun de leur cote. */
.jauge-parure__part {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, var(--gain), var(--gain-fond));
}

.jauge-parure__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--pierre-0) 90%, transparent) calc(10% - 1px) 10%);
  pointer-events: none;
}

.jauge-parure--tiede .jauge-parure__part { background: linear-gradient(180deg, var(--alerte), var(--or-fonce)); }
.jauge-parure--basse .jauge-parure__part { background: linear-gradient(180deg, var(--cire-vif), var(--cire-fonce)); }

.jauge-parure__valeur {
  flex: none;
  min-width: 2.4rem;
  font-family: var(--police-titre);
  text-align: right;
  color: var(--parchemin);
}


/* ── La vignette peinte ──────────────────────────────────────────────────
   Chaque image des planches est enfermee dans un cadre d'or, avec un fond de
   pierre derriere. Sans le cadre, une illustration ressemble a une image
   collee dans la page. */

.vignette {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--pierre-0);
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 25%, transparent), inset 0 0 24px color-mix(in srgb, var(--pierre-0) 80%, transparent);
}

.vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le héros en vignette (vignette-du-heros.js) : une photo de son corps 3D sur
   fond transparent. La pièce sombre derrière lui est peinte ici, la même dans
   tous les cadres, et tient le cadre le temps que la photo arrive. */
.vignette-heros {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  background: radial-gradient(90% 70% at 50% 26%, #3b3127 0%, #1b1612 58%, #0b0907 100%);
}

.vignette--choisie {
  border-color: var(--or);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or-vif) 55%, transparent), 0 0 12px color-mix(in srgb, var(--or) 35%, transparent);
}

.vignette__legende {
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-2);
  text-align: center;
  color: var(--texte);
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
}


/* ── Le parchemin ────────────────────────────────────────────────────────
   Les planches du siege, de l'evenement et de la chronique posent le texte
   long sur du parchemin, jamais sur la pierre. */

.parchemin-bloc {
  padding: var(--e-3) var(--e-4);
  color: var(--pierre-4);
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--parchemin-clair) 55%, transparent), transparent 60%),
    linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
  border: 1px solid color-mix(in srgb, var(--bois) 60%, transparent);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--bois) 35%, transparent), var(--ombre-2);
}

.parchemin-bloc a { color: var(--peril); }
.parchemin-bloc .parchemin-bloc__titre {
  margin: 0 0 var(--e-2);
  padding-bottom: var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--cire-fonce);
  /* Le filet d'or a losange de la planche, sous chaque titre. */
  background: url(/jeu/images/cadres/separateur.webp?v=308) center bottom / auto 0.75rem no-repeat;
}


/* ── Le chemin d'etapes ──────────────────────────────────────────────────
   Les rangs, les etats du domaine, les phases de la Longue Nuit et les ages
   du dragon suivent la meme forme : des vignettes en file, reliees par un
   trait d'or, l'etape atteinte allumee. */

.chemin {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(7rem, 1fr);
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: var(--e-2);
}

.chemin__etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
  padding: var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
}

.chemin__etape--atteinte { border-color: color-mix(in srgb, var(--or) 60%, transparent); }

.chemin__etape--courante {
  border-color: var(--or-vif);
  box-shadow: 0 0 10px color-mix(in srgb, var(--or) 35%, transparent);
}

.chemin__etape--verrouillee { opacity: 0.5; }

.chemin__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  text-align: center;
  color: var(--or-vif);
}

.chemin__dit {
  font-size: var(--t-2);
  text-align: center;
  color: var(--texte-pale);
}


/* ── Le fanion de blason ─────────────────────────────────────────────────
   Les planches pendent un ecu au coin de chaque panneau qui appartient a une
   maison. Il tient dans un carre, en haut a gauche du titre. */

.fanion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.9rem;
  flex: none;
  font-size: var(--t-6);
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border: 1px solid var(--or-fonce);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}

.fanion--pierre { background: linear-gradient(180deg, var(--pierre-4), var(--pierre-2)); }

/* Un ecu peint remplace la lettre. L'image est deja decoupee en ecu, fond
   compris : le fanion perd donc son fond, son filet et son decoupage, sinon on
   verrait un ecu dans un ecu. */
.fanion--arme {
  padding: 0;
  background: none;
  border: 0;
  clip-path: none;
  width: 2.5rem;
  height: 2.9rem;
}

.fanion--arme img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Une marque peinte prend la place d'un trace : elle garde la classe de son
   ecran, donc sa taille, et n'a besoin que de tenir dans le carre. */
img.marque--peinte {
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}