/* =========================================================================
   current-song2 — thème djuju02 « Neon Grid »
   Reproduit fidèlement le composant .panneau des overlays du site :
   bordure en dégradé violet → magenta → jaune, voile intérieur, trait
   d'énergie qui file en haut et en bas, équerres jaunes.

   ── Lisibilité ────────────────────────────────────────────────────────────
   La version précédente posait un halo violet sur un texte blanc violacé,
   au-dessus d'un fond violet sombre : le glow bavait sur les lettres au lieu
   de les détacher, et l'ensemble virait au violet sur violet.

   Ici, trois règles :
     • le fond est nettement plus dense (opacité .94) ;
     • les ombres de texte sont NOIRES, pas colorées — c'est le contraste
       qui détache les lettres, la couleur ne fait que les diluer ;
     • la couleur ne sert qu'à hiérarchiser : blanc pour le titre, violet
       clair pour l'artiste.

   Un overlay doit rester lisible par-dessus n'importe quelle image de jeu,
   claire comme sombre. D'où le fond opaque plutôt qu'un simple flou.

   Source navigateur OBS : 524 × 154
   ========================================================================= */

@font-face {
  font-family: "Orbitron";
  src: url("orbitron.woff2") format("woff2");
  font-weight: 400 900;
  font-display: block;
}
@font-face {
  font-family: "Rajdhani";
  src: url("rajdhani.woff2") format("woff2");
  font-weight: 400 700;
  font-display: block;
}

:root {
  /* Palette — identique à core.css du site */
  --encre:        #07040F;
  --nuit:         #150C2B;
  --violet:       #A855F7;
  --violet-clair: #C084FC;
  --violet-pale:  #E9D8FF;
  --magenta:      #E93CFF;
  --jaune:        #FFE23D;
  --jaune-chaud:  #FFC916;
  --texte:        #F4ECFF;

  /* Fond plus dense que sur le site : ici l'overlay passe par-dessus du
     gameplay, pas par-dessus une page web au fond maîtrisé. */
  --surface:      rgba(11, 6, 22, .94);
  --trait:        rgba(168, 85, 247, .40);

  /* Ombre portée noire : c'est elle qui rend le texte lisible sur tout fond.
     Une ombre colorée ferait l'inverse. */
  --ombre-texte: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8);

  --f-titre: "Orbitron", Bahnschrift, "Segoe UI Variable Display", sans-serif;
  --f-ui:    "Rajdhani", "Segoe UI Variable Text", "Segoe UI", sans-serif;

  /* Découpe à 45°, signature géométrique du site */
  --coupe: 14px;
  --clip: polygon(
    0 0,
    calc(100% - var(--coupe)) 0,
    100% var(--coupe),
    100% 100%,
    var(--coupe) 100%,
    0 calc(100% - var(--coupe))
  );

  /* Géométrie — modifier ici uniquement */
  --cadre-l: 480px;
  --cadre-h: 110px;
  --disque:   80px;
  --marge:    22px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: transparent !important;
  margin: 0;
  padding: 0;
  width:  calc(var(--cadre-l) + var(--marge) * 2);
  height: calc(var(--cadre-h) + var(--marge) * 2);
  overflow: hidden;
  font-family: var(--f-ui);
}

/* =========================================================================
   Panneau — bordure en dégradé
   Le dégradé est porté par #wrapper, le fond par son ::before décalé de 2px.
   Deux formes clippées superposées : c'est la technique de core.css, elle
   donne une bordure dégradée que border-image ne sait pas faire avec un
   clip-path.
   ========================================================================= */
#wrapper {
  position: absolute;
  top:  var(--marge);
  left: var(--marge);
  width:  var(--cadre-l);
  height: var(--cadre-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin: 0;

  background: linear-gradient(135deg, var(--violet) 0%, var(--magenta) 45%, var(--jaune) 100%);
  clip-path: var(--clip);
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, .55));

  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 1;
  transition: opacity .4s ease;
}

/* Fond intérieur, en retrait de 2px : laisse apparaître le dégradé en liseré.
   ─────────────────────────────────────────────────────────────────────────
   Le voile lumineux du haut est intégré ICI, en superposition de dégradés,
   au lieu d'occuper un second pseudo-élément.

   Pourquoi : la version précédente plaçait le voile dans #wrapper::after
   avec `height: 52%` ET `clip-path: var(--clip)`. Or un clip-path s'applique
   à la boîte de l'élément qui le porte — ici une boîte deux fois moins haute
   que le panneau. La découpe à 45° tombait donc en plein milieu, juste sur
   la pochette, et coupait le disque en biais.

   Un seul fond, un seul clip : le problème ne peut plus se reproduire. */
#wrapper::before {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(180deg, rgba(168, 85, 247, .16) 0%, transparent 52%),
    var(--surface);
  clip-path: var(--clip);
  z-index: 0;
}

/* Le contenu passe au-dessus du fond et du voile. */
#artwrap, #meta { position: relative; z-index: 2; }

/* =========================================================================
   Trait d'énergie — injecté par user.js
   Un segment lumineux parcourt le haut, un autre le bas en sens inverse.
   ========================================================================= */
.energie {
  position: absolute;
  inset: 2px;
  pointer-events: none;
  overflow: hidden;
  /* Sous le contenu (z-index 2) : le trait file derrière le disque et le
     texte, il ne les barre pas. */
  z-index: 1;
  clip-path: var(--clip);
}
.energie::before,
.energie::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 22%;
  background: linear-gradient(90deg, transparent, var(--jaune), transparent);
  filter: drop-shadow(0 0 6px var(--jaune));
}
.energie::before { top: 0;    animation: filer 4.2s linear infinite; }
.energie::after  { bottom: 0; animation: filer 4.2s linear infinite reverse; animation-delay: 2.1s; }

@keyframes filer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(560%); }
}

body.est-en-pause .energie::before,
body.est-en-pause .energie::after { animation-play-state: paused; }


/* =========================================================================
   Pochette
   ========================================================================= */
#artwrap {
  width:  var(--disque);
  height: var(--disque);
  min-width: var(--disque);
  flex: 0 0 var(--disque);
}

#art {
  width:  var(--disque);
  height: var(--disque);
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--violet-clair);
  background: var(--nuit);
  box-shadow: 0 0 12px rgba(168, 85, 247, .85), 0 0 22px rgba(255, 226, 61, .22);
  animation: rotation 14s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

#artwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--encre);
  border: 2px solid var(--jaune);
  pointer-events: none;
}

@keyframes rotation { to { transform: rotate(360deg); } }

body.est-en-pause #art { animation-play-state: paused; filter: grayscale(.55); }

/* =========================================================================
   Textes — hiérarchie par la couleur, lisibilité par l'ombre noire
   ========================================================================= */
#meta {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

.linewrap {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  contain: layout paint;
}

#meta .linewrap:nth-child(1) { height: 30px; }   /* titre   */
#meta .linewrap:nth-child(2) { height: 24px; }   /* artiste */

#title, #artist {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Titre : blanc franc, ombre noire. Aucun glow coloré — c'est ce qui
   diluait les lettres dans la version précédente. */
#title {
  font-family: var(--f-titre);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 30px;
  color: #FFFFFF;
  text-shadow: var(--ombre-texte);
}

/* Artiste : violet PÂLE (#E9D8FF), et non le --texte-doux #A88FCE d'origine
   qui se confondait avec le fond violet. */
#artist {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 24px;
  color: var(--violet-pale);
  text-shadow: var(--ombre-texte);
}

/* =========================================================================
   Défilement du texte long
   ========================================================================= */
.defile { animation: va-et-vient var(--duree, 12s) ease-in-out infinite; }

@keyframes va-et-vient {
  0%,  10%  { transform: translate3d(0, 0, 0); }
  45%, 55%  { transform: translate3d(calc(-1 * var(--offset, 0px)), 0, 0); }
  90%, 100% { transform: translate3d(0, 0, 0); }
}

body.est-en-pause .defile { animation-play-state: paused; }

/* =========================================================================
   Barre de progression
   ========================================================================= */
#barrow {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  margin-top: 5px;
  position: relative;
  z-index: 2;
}

#elapsed, #duration {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  line-height: 14px;
  /* Blanc atténué plutôt que violet : lisible sans attirer l'œil. */
  color: rgba(244, 236, 255, .78);
  text-shadow: var(--ombre-texte);
  width: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 5px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--trait);
  overflow: hidden;
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--magenta), var(--jaune));
  background-size: 220% 100%;
  animation: defilement-degrade 6s linear infinite;
  box-shadow: 0 0 8px rgba(233, 60, 255, .8);
  transition: width .3s linear;
  will-change: width;
}

@keyframes defilement-degrade { to { background-position: -220% 0; } }

body.est-en-pause .fill { animation-play-state: paused; }

/* =========================================================================
   Rien en lecture
   ========================================================================= */
body.est-vide #wrapper { opacity: 0; }