/* La barre des six sorts — quatre de classe (A Z E R) et deux universels (D F).
 *
 * Elle vivait dans `hub.css`, que l'arène et l'écran de chargement ne chargent
 * pas : même piège que `decorFit.css`, et la même sortie. Les trois écrans qui
 * montrent les six cases lisent maintenant la même feuille, si bien qu'un sort
 * en recharge se lit pareil dans la ville, sur l'écran de chargement et en duel.
 *
 * La taille d'une case est une **variable**, pas une constante : le bandeau du
 * hub tient dans un panneau de 150 px et l'écran de chargement occupe la page.
 * `--case` la porte ; tout le reste (lettre, icône, voile) s'en déduit.
 *
 * `--echelle-hud` est écrite par la poignée d'étirement (`hudFit.js`), qui ne
 * sait pas ce qu'elle étire : elle pose un **facteur**, la feuille décide de ce
 * qu'il multiplie. C'est ce qui rend l'agrandissement uniforme sans un mot de
 * plus — la lettre, l'icône et le voile se déduisent déjà de `--case`, donc
 * tout suit. Écrire une largeur en pixels aurait étiré les cases sans grossir
 * ce qu'elles contiennent, ce qui n'est pas agrandir mais déformer. */
/* `--echelle-hud` est **héritée, jamais redéclarée ici**. Elle est posée par
 * `hudFit.js` sur le panneau qui porte la poignée (`#combat-hud`), et la barre
 * est dedans : une déclaration locale, même à 1, l'emporterait sur l'héritage et
 * la poignée n'aurait plus aucun effet. D'où la valeur de repli dans le `var()`,
 * qui sert aux deux barres posées hors de tout panneau — l'arène et l'écran de
 * chargement. */
.spell-bar {
  --case: calc(26px * var(--echelle-hud, 1));
  display: grid;
  grid-template-columns: repeat(var(--slots, 6), var(--case));
  gap: calc(3px * var(--echelle-hud, 1));
  margin-top: calc(7px * var(--echelle-hud, 1));
}

.spell-slot {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(4, 12, 17, .72);
  transition: border-color .08s ease, background-color .08s ease, box-shadow .08s ease;
}

.spell-slot img {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7));
}

.spell-slot b {
  position: absolute;
  z-index: 3;
  top: 1px;
  left: 2px;
  padding: 1px 2px;
  border-radius: 2px;
  background: rgba(2, 8, 12, .78);
  color: #cfe9f2;
  font-size: max(8px, calc(var(--case) * .23));
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

/* Le voile de recharge monte par le bas, comme partout ailleurs dans le jeu :
 * une case pleine est une case prête. */
.spell-slot i {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  height: 0;
  background: rgba(2, 10, 14, .78);
  transition: height .12s linear;
}

.spell-slot.pret { border-color: var(--sort, #6ce8ff); box-shadow: inset 0 0 8px rgba(108, 232, 255, .14); }
.spell-slot.actif {
  border-color: rgba(255, 255, 255, .86);
  background: color-mix(in srgb, var(--sort, #6ce8ff) 12%, rgba(4, 12, 17, .72));
  box-shadow: 0 0 calc(var(--case) * .12) color-mix(in srgb, var(--sort, #6ce8ff) 72%, transparent),
    inset 0 0 calc(var(--case) * .22) color-mix(in srgb, var(--sort, #6ce8ff) 30%, transparent);
}
.spell-slot.actif img {
  filter: brightness(1.13) saturate(1.08) drop-shadow(0 0 3px var(--sort, #6ce8ff));
}
.spell-slot.actif b { color: #fff; }
.spell-slot.epuise { opacity: .4; }
.spell-slot.epuise b { color: #7d8f96; }

/* L'instance de l'écran de chargement : mêmes cases, plus grandes, centrées
 * au-dessus de la ligne de commandes. Le joueur s'échauffe pendant le décodage
 * des GLB — il doit y voir les six sorts qu'il aura en combat, pas seulement
 * lire « D F SORTS » en petit. */
.loading-spell-bar {
  --case: calc(54px * var(--echelle-hud));
  justify-content: center;
  margin: 0 auto 8px;
}