/* ================================================
   BANDS — Bandeaux latéraux gauche / droite
   Intégrés dans le flux (flex row du .wrapper)
   — pas de position fixed, le contenu n'est pas masqué
   Texte piloté via js/bands.js
   ================================================ */

.band {
  width: 10vw;
  max-width: 10%;
  min-width: 32px;
  height: 100dvh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  pointer-events: none;
  overflow: hidden;
}

/* Slot : occupe la moitié (50%) ou la totalité (100%) de la hauteur */
.band-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Séparateur or entre les deux slots */
.band-slot + .band-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,0.35), transparent);
}

/* ── Couleur joueur dynamique ── */
.band-slot.has-color {
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--player-color) 30%, transparent) 30%,
    color-mix(in srgb, var(--player-color) 30%, transparent) 70%,
    transparent
  );
}
.band-slot.has-color .band-text {
  color: var(--player-color);
  text-shadow:
    0 0 16px color-mix(in srgb, var(--player-color) 70%, transparent),
    0 0 4px  color-mix(in srgb, var(--player-color) 40%, transparent);
}

/* ── Gauche : or 40% → transparent vers la droite ── */
.band-left {
  background: linear-gradient(
    to right,
    rgba(201, 168, 76, var(--band-opacity-max, 0.40)),
    transparent
  );
}

/* ligne or bord extérieur gauche */
.band-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201, 168, 76, 0.60) 20%,
    rgba(201, 168, 76, 0.60) 80%,
    transparent
  );
}

/* ── Droite : or 40% → transparent vers la gauche ── */
.band-right {
  background: linear-gradient(
    to left,
    rgba(201, 168, 76, var(--band-opacity-max, 0.40)),
    transparent
  );
}

.band-right::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201, 168, 76, 0.60) 20%,
    rgba(201, 168, 76, 0.60) 80%,
    transparent
  );
}

/* ── Texte vertical ── */
.band-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9px, 1.2vw, 14px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  user-select: none;
  text-shadow:
    0 0 16px rgba(201, 168, 76, 0.70),
    0 0 4px  rgba(201, 168, 76, 0.40);
}

/* gauche : de bas en haut */
.band-left  .band-text { transform: rotate(180deg); }
/* droite  : de haut en bas */
.band-right .band-text { transform: rotate(0deg); }

/* ── Gauche : or 40% → transparent vers la droite ── */
.band-left {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(201, 168, 76, var(--band-opacity-max, 0.40)),
    transparent
  );
}

/* fine ligne or au bord extérieur gauche */
.band-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201, 168, 76, 0.60) 20%,
    rgba(201, 168, 76, 0.60) 80%,
    transparent
  );
}

/* ── Droite : or 40% → transparent vers la gauche ── */
.band-right {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(201, 168, 76, var(--band-opacity-max, 0.40)),
    transparent
  );
}

.band-right::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201, 168, 76, 0.60) 20%,
    rgba(201, 168, 76, 0.60) 80%,
    transparent
  );
}

/* ── Texte vertical ── */
.band-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9px, 1.2vw, 14px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  user-select: none;
  text-shadow:
    0 0 16px rgba(201, 168, 76, 0.70),
    0 0 4px  rgba(201, 168, 76, 0.40);
}

/* gauche : de bas en haut */
.band-left .band-text  { transform: rotate(180deg); }
/* droite : de haut en bas (défaut) */
.band-right .band-text { transform: rotate(0deg); }