/* ─────────────────────────────────────────────────────────────────────────
   La parure : les cadres, les ferrures et les reperes repris des planches
   de direction artistique. Cette feuille se charge en dernier, apres toutes
   les autres, pour que ses regles gagnent sans avoir a monter en poids.
   ───────────────────────────────────────────────────────────────────────── */

/* Les ors, le sang et le noir des planches sont les jetons de jeu/jetons.css :
   --or, --or-vif, --or-fonce, --cire, --cire-vif, --pierre-0, --pierre-2,
   --gain-fond et --perte-fond. */


/* Au-dessus de 60rem le bandeau porte cinq blocs : le logo, le jour, le nom,
   les reserves, le rang. Cette regle reste enfermee dans sa largeur : posee
   sans condition, elle ecrasait les grilles etroites de salle.css et de
   pages.css, le rang se posait par-dessus la fenetre des reglages et son
   bouton de fermeture ne repondait plus. */
@media (min-width: 60.0625rem) {
  .bandeau,
  #jeu .hud .bandeau {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  }
}

/* ── Les reserves dans le bandeau ────────────────────────────────────────
   Les planches gardent l'or, les vivres et les matieres visibles en haut de
   chaque ecran. Le joueur sait ce qu'il peut payer sans changer de page. */

.bandeau__tresor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-0);
  justify-self: center;
}

.bandeau__tresor:empty { display: none; }

.tresor {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-0) var(--e-2);
  line-height: 1.1;
  white-space: nowrap;
}

.tresor + .tresor { border-left: 1px solid color-mix(in srgb, var(--or) 20%, transparent); }

/* Le medaillon tire de la planche des ressources : la pierre et l'anneau d'or
   sont dans l'image, la feuille ne pose que la taille et une ombre. */
.tresor__marque {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: var(--rayon-rond);
  object-fit: cover;
  box-shadow: var(--ombre-1);
}

.tresor__chiffres {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tresor__stock {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
  letter-spacing: 0.01em;
  text-shadow: var(--ombre-texte);
}

.tresor__debit {
  font-size: var(--t-1);
  color: var(--gain);
  letter-spacing: 0.02em;
}

.tresor__debit.est-negatif { color: var(--perte); }

.tresor[data-ressource="or"] .tresor__stock { color: var(--or-vif); }
.tresor.est-en-alerte .tresor__marque { box-shadow: 0 0 0 1px var(--perte), var(--ombre-1); }

/* Sur telephone, les reserves restent hors du bandeau. Le bandeau y mesure
   deja 100 pixels pour une reserve de hauteur de 72 : une case de plus le
   poussait a 126 et recouvrait le bouton qui ferme les reglages. Les reserves
   se lisent dans l'ecran du domaine tant que la barre du haut n'est pas
   reprise en entier. */
@media (max-width: 60rem) {
  .bandeau__tresor { display: none; }
}