/* ==================================================================
   vinyl.css, ce qui sort d'un booster : des disques, pas des cartes.

   Le composant garde son nom (`.card`) et toute sa mécanique : même
   format, même retournement, mêmes états de révélation. Seul l'habillage
   change. Un disque de couleur dépasse de sa pochette intérieure, où
   sont imprimées les informations du titre.

   La couleur du vinyle dit la rareté, comme chez les disquaires : noir
   pour les communes, vert, bleu, violet translucides, or massif pour les
   légendaires, éclaboussures arc-en-ciel pour les mythiques, marbre pour
   les secrètes.

   Tout est peint une fois pour toutes. Seule l'étiquette tourne quand
   l'extrait joue ; les reflets restent fixes, comme sous une vraie lampe.
   ================================================================== */

.card {
  --vinyl: radial-gradient(circle, #23232d 0 30%, #0d0d12 70%, #16161d);
  --vinyl-edge: rgba(255, 255, 255, .1);
  --label-ring: color-mix(in srgb, var(--r-color) 70%, #fff);
}
.card.r-uncommon  { --vinyl: radial-gradient(circle, #3be39a 0 22%, #13925a 55%, #0b5c39 80%, #16a567); --vinyl-edge: rgba(160, 255, 210, .35); }
.card.r-rare      { --vinyl: radial-gradient(circle, #7cc4ff 0 22%, #1e6fd6 55%, #0d3c87 80%, #2a82ea); --vinyl-edge: rgba(170, 215, 255, .4); }
.card.r-epic      { --vinyl: radial-gradient(circle, #d3a8ff 0 22%, #8b43f0 55%, #4a1597 80%, #9b57ff); --vinyl-edge: rgba(220, 190, 255, .45); }
.card.r-legendary {
  --vinyl: conic-gradient(from 30deg, #ffe9a8, #c98a12, #ffd36a, #8f5a00, #ffe08a, #b87708, #ffe9a8);
  --vinyl-edge: rgba(255, 240, 190, .7);
}
.card.r-mythic {
  --vinyl:
    radial-gradient(1.6em 1.2em at 30% 22%, #ffe95f 60%, transparent 62%),
    radial-gradient(2.2em 1.4em at 74% 30%, #3fa9ff 60%, transparent 62%),
    radial-gradient(1.4em 2em at 80% 70%, #2ee08a 60%, transparent 62%),
    radial-gradient(2em 1.3em at 24% 76%, #a855f7 60%, transparent 62%),
    radial-gradient(1em 1em at 55% 88%, #ffb020 60%, transparent 62%),
    radial-gradient(circle, #ff6b93 0 30%, #d11d52 70%, #ff3d71);
  --vinyl-edge: rgba(255, 190, 215, .7);
}
.card.r-secret {
  --vinyl:
    radial-gradient(120% 60% at 20% 30%, rgba(255, 255, 255, .5), transparent 40%),
    radial-gradient(90% 70% at 80% 70%, rgba(139, 233, 255, .55), transparent 45%),
    conic-gradient(from 90deg, #ff5fd2, #1a1030, #8be9ff, #1a1030, #ffe95f, #1a1030, #ff5fd2);
  --vinyl-edge: rgba(255, 255, 255, .8);
}

/* ------------------------------ la face ------------------------------ */

.card-front {
  background: none !important;
  border: 0 !important;
  /* les anciens cadres de rareté dessinaient une lueur rectangulaire */
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
}
.card-bg,
.card-glare,
.card-front::before { display: none !important; }

.card-frame {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  animation: none !important;
}

/* --- le disque --- */
.card-art {
  position: absolute;
  left: 4%;
  top: 1.1em;
  width: 92%;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vinyl);
  box-shadow:
    0 0 0 .18em rgba(10, 6, 26, .9),
    inset 0 0 0 .35em var(--vinyl-edge),
    0 1.6em 2.4em -1em rgba(0, 0, 0, .85);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  z-index: 0;
}
.card:hover .card-art,
.card.is-active .card-art,
.card.is-sounding .card-art { transform: translateY(-1em); }

.disc-spin { position: absolute; inset: 0; border-radius: 50%; }
.card.is-sounding .disc-spin { animation: disc-spin 1.8s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }

/* les sillons : une trame fixe de cercles fins, et la plage lisse du bord */
.disc-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 36%, rgba(0, 0, 0, .35) 37%, transparent 38.5%,
                            transparent 66%, rgba(0, 0, 0, .3) 67%, transparent 68.5%,
                            transparent 94%, rgba(255, 255, 255, .08) 95%, transparent 97%),
    repeating-radial-gradient(circle, rgba(0, 0, 0, .26) 0 .07em, transparent .07em .3em);
}

/* l'étiquette centrale : la pochette de l'album, en rond */
.disc-label {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  overflow: hidden;
  background: #0a0a12;
  box-shadow: 0 0 0 .22em rgba(10, 6, 26, .85), 0 0 0 .42em var(--label-ring);
}
.disc-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: none;
}
.card:hover .card-art img { transform: none; }
.disc-hole {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.3em; height: 1.3em;
  translate: -50% -50%;
  border-radius: 50%;
  background: #07060f;
  box-shadow: 0 0 0 .2em rgba(255, 255, 255, .55), inset 0 .2em .3em rgba(0, 0, 0, .8);
  z-index: 2;
}

/* les reflets de la lampe : deux quartiers de lumière, fixes */
.art-shine {
  opacity: 1;
  mix-blend-mode: normal;
  border-radius: 50%;
  background:
    radial-gradient(14em 14em at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 60%),
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255, 255, 255, .2) 28deg, transparent 58deg,
      transparent 180deg, rgba(255, 255, 255, .14) 208deg, transparent 238deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%);
          mask: radial-gradient(circle, transparent 30%, #000 31%);
  z-index: 1;
}
.art-vignette { display: none; }

/* l'irisation des paliers supérieurs, sur les sillons seulement */
.art-holo {
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #ff0080, #ff8c00, #ffe600, #00ff9d, #00b3ff, #8b00ff, #ff0080);
  background-size: auto;
  -webkit-mask: radial-gradient(circle, transparent 31%, #000 32%);
          mask: radial-gradient(circle, transparent 31%, #000 32%);
  z-index: 1;
}
.card.r-mythic .art-holo,
.card.r-secret .art-holo { animation: disc-spin 9s linear infinite; }

/* le liseré qui signale les très hauts paliers, autour du disque */
.card.r-legendary .card-art {
  box-shadow: 0 0 0 .18em rgba(10, 6, 26, .9), inset 0 0 0 .35em var(--vinyl-edge),
              0 0 0 .4em #ffd36a, 0 0 2.6em .2em rgba(255, 176, 32, .75);
}
.card.r-mythic .card-art {
  box-shadow: 0 0 0 .18em rgba(10, 6, 26, .9), inset 0 0 0 .35em var(--vinyl-edge),
              0 0 0 .4em #ff7ab8, 0 0 3em .3em rgba(255, 61, 113, .8);
}
.card.r-secret .card-art {
  box-shadow: 0 0 0 .18em rgba(10, 6, 26, .9), inset 0 0 0 .35em var(--vinyl-edge),
              0 0 0 .4em #fff, 0 0 3.2em .4em rgba(139, 233, 255, .8);
}
.card.r-secret .card-front { box-shadow: none; }

/* --- le macaron de rareté, collé en biais sur le coin --- */
.card-band {
  position: absolute;
  top: calc(51% - 1.5em);
  right: -.4em;
  z-index: 3;
  gap: .4em;
  padding: .35em .75em;
  border-radius: .7em;
  border: .16em solid rgba(10, 6, 26, .95);
  background: linear-gradient(180deg, color-mix(in srgb, var(--r-color) 80%, #fff), var(--r-color));
  box-shadow: 0 .3em 0 rgba(10, 6, 26, .8), inset 0 .15em 0 rgba(255, 255, 255, .5);
  transform: rotate(5deg);
}
.band-name {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 .1em 0 rgba(10, 6, 26, .7);
}
.card-band .star { fill: #fff; filter: none; width: 1em; height: 1em; }
.card.r-common .card-band { background: linear-gradient(180deg, #c3c9d8, #8b95ad); }

.chip-explicit,
.chip-score {
  z-index: 3;
  border: .14em solid rgba(10, 6, 26, .95);
  background: rgba(20, 14, 42, .92);
}
.chip-score { top: .5em; right: -.2em; }
.chip-explicit { top: .5em; left: -.2em; right: auto; }
.card.is-compact .chip-explicit { display: none; }

/* --- la pochette intérieure, où tout est imprimé --- */
.card-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 49%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .42em;
  padding: 1.65em 1.25em 1em;
  border-radius: 1.2em;
  border: .18em solid rgba(10, 6, 26, .95);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--r-color) 26%, #221a48), #15102e 34%, #0e0b20);
  box-shadow: inset 0 .16em 0 rgba(255, 255, 255, .14), 0 1.4em 2.6em -1.2em #000;
  /* l'encoche du pouce, en haut au milieu, comme sur les vraies pochettes */
  /* assez plate pour qu'un long titre passe dessous sans être rogné */
  -webkit-mask: radial-gradient(4.2em 1.45em at 50% 0, transparent 97%, #000 100%);
          mask: radial-gradient(4.2em 1.45em at 50% 0, transparent 97%, #000 100%);
  overflow: hidden;
}
/* le reflet qui balaie la pochette à la révélation */
.card-label::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, .2) 47%, rgba(255, 255, 255, .05) 52%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.card:hover .art-holo { opacity: var(--holo, 0); }
.card:hover .card-label::after { animation: glare-sweep 1.1s var(--ease-out); }
.card.is-popped:not(.r-common):not(.r-uncommon) .card-label::after { animation: glare-sweep 1.1s var(--ease-out) .12s; }

.card-title {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 1.55em;
  letter-spacing: .01em;
  line-height: 1.1;
}
.card-artist { margin-top: .1em; font-size: 1.15em; }
.card-stats { padding-top: .45em; gap: .15em .8em; border-top-color: rgba(255, 255, 255, .12); }
.card-meter { padding-top: .2em; }
.card-foot { padding-top: .35em; }

/* les actions se posent sur la pochette */
.card-actions { left: .8em; right: .8em; bottom: .8em; }
.card.is-active .card-frame::after,
.card.is-sounding .card-frame::after { display: none; }
.card.is-active .card-label::before,
.card.is-sounding .card-label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(8, 6, 20, .94) 5em, transparent 11em);
  pointer-events: none;
}
.card-actions { z-index: 4; }
.act {
  border: .14em solid rgba(10, 6, 26, .95);
  background: linear-gradient(180deg, #3a2d78, #231a52);
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .2), 0 .25em 0 rgba(10, 6, 26, .85);
  backdrop-filter: none;
}
.act-reco { flex: 0 0 auto; width: 3.4em; padding: 0; color: #fff; background: linear-gradient(180deg, #ff8cc6, #e0408f); }
.act-reco:hover { background: linear-gradient(180deg, #ffa3d3, #f0509f); }

/* l'égaliseur se place sur l'étiquette du disque */
.card.is-sounding .card-art::after {
  left: 50%; bottom: 36%;
  translate: -50% 0;
  z-index: 3;
}

/* la lueur de rareté entoure le disque plutôt qu'un rectangle */
.card::after {
  inset: -8% -10% 30%;
  border-radius: 50%;
}

/* ------------------------------- le dos -------------------------------
   Un disque noir sans étiquette imprimée, qui dépasse d'une pochette
   neutre. Même silhouette que la face : le retournement ne trahit rien. */

.card-back,
.deck-card {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  display: block;
}
.back-art {
  position: absolute;
  left: 4%;
  top: 1.1em;
  width: 92%;
  aspect-ratio: 1;
  display: block;
}
.back-vinyl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, .045) 0 .07em, transparent .07em .3em),
    radial-gradient(circle, #1e1a33 0 30%, #0c0a18 70%, #151226);
  box-shadow: 0 0 0 .18em rgba(10, 6, 26, .9), inset 0 0 0 .35em rgba(255, 255, 255, .08),
              0 1.6em 2.4em -1em rgba(0, 0, 0, .85);
  overflow: hidden;
}
.back-vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 255, 255, .16) 28deg, transparent 58deg,
    transparent 180deg, rgba(255, 255, 255, .1) 208deg, transparent 238deg);
}
.back-ring { position: absolute; inset: 30%; border: 0; border-radius: 50%;
  background: radial-gradient(circle, #8b5cf6, #5b21b6 70%, #2e1065);
  box-shadow: 0 0 0 .22em rgba(10, 6, 26, .85), 0 0 0 .42em rgba(196, 170, 255, .55); }
.back-disc {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #22d3ee, #ec4899, #8b5cf6);
  opacity: .5;
  filter: none;
  animation: back-spin 9s linear infinite;
}
.back-logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 24%;
  translate: -50% -50%;
  filter: drop-shadow(0 0 .8em rgba(139, 92, 246, .9));
}
.back-sleeve {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 49%;
  display: grid;
  place-items: center;
  border-radius: 1.2em;
  border: .18em solid rgba(10, 6, 26, .95);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 .5em, transparent .5em 1.2em),
    linear-gradient(180deg, #2c2263, #1a1440 45%, #110d2a);
  box-shadow: inset 0 .16em 0 rgba(255, 255, 255, .14), 0 1.4em 2.6em -1.2em #000;
  -webkit-mask: radial-gradient(4.4em 2.6em at 50% 0, transparent 97%, #000 100%);
          mask: radial-gradient(4.4em 2.6em at 50% 0, transparent 97%, #000 100%);
}
.back-word {
  position: static;
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 1.9em;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .55);
  text-shadow: 0 .1em 0 rgba(10, 6, 26, .8);
}

/* la pile : des disques dans leur pochette, empilés */
.deck-card { font-size: calc(var(--cw) / 30); }

/* ---------------------- les petites tailles ----------------------
   En vignette, l'essentiel reste lisible : le disque, le titre, l'artiste.
   Les détails passent à la fiche. */
.card.is-compact { aspect-ratio: 63 / 80; }
.card.is-compact .card-stats { display: none; }
.card.is-compact .card-label { height: 38%; gap: .3em; padding-top: 1.8em; }
.card.is-compact .card-band { top: calc(62% - 1.5em); }
.card.is-compact .card-title { font-size: 1.8em; -webkit-line-clamp: 1; }
.card.is-compact .card-artist { font-size: 1.35em; }
.card.is-compact .card-meter { margin-top: auto; }
.card.is-compact .card-foot { display: none; }
.card-grid > .card { contain-intrinsic-size: 196px 249px; }
.card-count { right: auto; left: -.5em; }

/* ------------------------------ le compteur ------------------------------
   Les cinq cases en haut de la scène deviennent cinq petits disques. */
.pip {
  width: 20px !important;
  height: 20px;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, #0c0a18 0 16%, transparent 17%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    #1b1633;
}
.pip.is-done {
  background:
    radial-gradient(circle, #0c0a18 0 14%, color-mix(in srgb, var(--pip) 50%, #fff) 15% 34%, transparent 35%),
    radial-gradient(circle, var(--pip), color-mix(in srgb, var(--pip) 55%, #000));
}
.pip.is-current {
  background:
    radial-gradient(circle, #0c0a18 0 14%, #fff 15% 34%, transparent 35%),
    radial-gradient(circle, #e9ddff, #8b6ce0);
  animation: pip-turn 1.6s linear infinite;
}
@keyframes pip-turn { to { transform: rotate(360deg); } }

/* ------------------------------- allégé ------------------------------- */
.fx-lite .art-holo { opacity: calc(var(--holo, 0) * .5); animation: none !important; }
.fx-lite .card.r-legendary .card-art,
.fx-lite .card.r-mythic .card-art,
.fx-lite .card.r-secret .card-art { box-shadow: 0 0 0 .18em rgba(10, 6, 26, .9), 0 0 0 .4em var(--r-glow); }
.fx-lite .back-disc { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .card.is-sounding .disc-spin, .art-holo, .back-disc, .pip.is-current { animation: none !important; }
}

/* ==================================================================
   LE BOOSTER : une pochette de disque, sous film
   Le cadre du composant ne change pas (mêmes proportions, mêmes
   classes) : la pochette carrée en occupe le bas, le disque dépasse
   au-dessus. La déchirure devient l'ouverture du film plastique.
   ================================================================== */

.pack-vinyl {
  position: absolute;
  left: 8%;
  top: 1%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;
  background:
    radial-gradient(circle, transparent 36%, rgba(0, 0, 0, .35) 37%, transparent 38.5%,
                            transparent 66%, rgba(0, 0, 0, .3) 67%, transparent 68.5%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .05) 0 .07em, transparent .07em .3em),
    radial-gradient(circle, #221d38 0 30%, #0d0b18 70%, #17132b);
  box-shadow: 0 0 0 .2em rgba(10, 6, 26, .9), inset 0 0 0 .35em rgba(255, 255, 255, .08),
              0 1em 2em -1em rgba(0, 0, 0, .9);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
/* les reflets fixes sur le vinyle */
.pack-vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 255, 255, .2) 28deg, transparent 58deg,
    transparent 180deg, rgba(255, 255, 255, .12) 208deg, transparent 238deg);
}
.pv-label {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #07060f 0 7%, rgba(255, 255, 255, .7) 8% 10%, transparent 11%),
    repeating-conic-gradient(from 0deg, hsl(var(--hue) 90% 62%) 0 30deg, hsl(calc(var(--hue) + 40) 90% 55%) 30deg 60deg);
  box-shadow: 0 0 0 .2em rgba(10, 6, 26, .85), 0 0 0 .38em hsl(var(--hue) 90% 80% / .6);
  animation: disc-spin 6s linear infinite;
}
.pack:hover .pack-vinyl { transform: translateY(-7%); }

/* la pochette carrée, en bas du cadre */
.pack-shell {
  inset: auto 0 0 0;
  aspect-ratio: 1;
  border-radius: .5em;
  z-index: 1;
  box-shadow:
    0 0 0 .2em rgba(10, 6, 26, .95),
    0 4em 6em -3em rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
}
/* une pochette est plate : plus de rondeur de sachet, un simple biseau */
.pack-cylinder {
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 7%, transparent 93%, rgba(0, 0, 0, .35));
}
.pack-scrim {
  background: linear-gradient(180deg, transparent 55%, rgba(4, 4, 10, .55) 78%, rgba(4, 4, 10, .8));
}

/* l'illustration : les pochettes de ce que le booster contient, en carré */
.pack-window {
  top: 9%;
  width: 60%;
  border-radius: .45em;
  box-shadow:
    0 0 0 .2em rgba(10, 6, 26, .9),
    0 0 0 .38em hsl(var(--hue) 80% 75% / .45),
    0 1.2em 2em -.6em rgba(0, 0, 0, .85);
}
.pack-window.has-art .win-disc,
.pack-window.has-art .win-ring,
.pack-window.has-art .win-mark { display: none; }
.pack-window .win-glow {
  background: linear-gradient(160deg, hsl(var(--hue) 95% 72% / .28), transparent 45%, rgba(4, 4, 10, .35));
}

/* l'étiquette de période, en bandeau sur le bord gauche */
.pack-tab { top: 7%; }

/* le titre, imprimé en bas de la pochette */
.pack-plate { top: 73%; gap: .1em; }
.plate-kicker, .plate-rule { display: none; }
.plate-name { font-size: 2.1em; line-height: 1.05; }
.plate-tag { font-size: .95em; }
.pack-foot { bottom: 3.5%; }
.pack-foot .foot-count { display: none; }

/* la pastille ronde collée sur le film : « 5 vinyles » */
.pack-sticker {
  position: absolute;
  right: 4%;
  top: 4%;
  z-index: 4;
  width: 4.6em;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: .16em solid rgba(10, 6, 26, .95);
  background: radial-gradient(circle at 35% 30%, #fff6b8, #ffd24a 55%, #ff9f1c);
  box-shadow: 0 .25em 0 rgba(10, 6, 26, .8), inset 0 .15em 0 rgba(255, 255, 255, .7);
  color: #5a2600;
  font-family: var(--font-display, inherit);
  font-size: 1em;
  line-height: .95;
  transform: rotate(12deg);
}
.pack-sticker b { display: block; font-weight: 400; font-size: 1.9em; }

/* le film plastique : la bande d'ouverture en haut, avec sa languette */
.pack-crimp { background: none; box-shadow: none; }
.pack-crimp.is-bottom { display: none; }
.pack-crimp.is-top {
  height: 5%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06));
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.pack-crimp.is-top::after { display: none; }
.pack-crimp.is-top i {
  left: auto;
  right: 12%;
  bottom: -.9em;
  width: 1.5em;
  height: 1.8em;
  border-radius: 0 0 .4em .4em;
  background: linear-gradient(180deg, #ff5a7a, #d81b4a);
  box-shadow: 0 .15em .3em rgba(0, 0, 0, .5);
}
.pack-seam { top: 0; }

/* la charge : le disque sort peu à peu et se met à tourner */
.charge-wrap.is-charging .pack-vinyl {
  transform: translateY(calc(var(--charge) * -16%)) rotate(calc(var(--charge) * 220deg));
  transition: none;
}
.charge-wrap.is-charging .pack-vinyl { will-change: transform; }
.charge-wrap.is-charging .pv-label { animation-duration: 2s; }
.charge-wrap.is-charging.is-hot .pv-label { animation-duration: .8s; }

/* la déchirure du film : le disque jaillit vers le haut */
.charge-wrap.is-tearing .pack-vinyl {
  animation: vinyl-shoot .9s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes vinyl-shoot {
  0%   { transform: translateY(-16%) rotate(220deg) scale(1); opacity: 1; }
  30%  { transform: translateY(-70%) rotate(560deg) scale(1.18); opacity: 1; }
  100% { transform: translateY(-160%) rotate(900deg) scale(.6); opacity: 0; }
}
.tear-light { top: 31%; }

.shop-skeleton { border-radius: .5em; }
.fx-lite .pv-label { animation: none; }

/* ==================================================================
   LA SÉLECTION DE TEXTE
   Un jeu se touche, il ne se surligne pas : un appui long ou un double
   tap sélectionnait les titres, les boutons et même la scène d'ouverture.
   On ne garde la sélection que là où on peut vouloir copier une
   information : les champs de saisie, la pochette d'un disque (titre,
   artiste, album, label), la fiche d'un album et l'aide.
   ================================================================== */
html {
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
img, svg, a { -webkit-user-drag: none; user-drag: none; }

input, textarea, select, [contenteditable="true"],
.card-label .card-id, .card-label .card-stats,
.detail-title, .detail-artist, .detail-meta, .detail-tracks .trk-title, .detail-tracks .trk-name,
.faq-body, .soc-id span, .me-id {
  -webkit-user-select: text;
          user-select: text;
  -webkit-touch-callout: default;
}

/* pendant l'ouverture, rien du tout, pas même la pochette */
.stage, .stage * {
  -webkit-user-select: none !important;
          user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ==================================================================
   LE DÉCOR DE L'OUVERTURE
   Un horizon de nuit électrique : ciel de nébuleuse, vinyle géant en
   guise de soleil couchant, égaliseur sur la ligne d'horizon, sol
   quadrillé qui défile vers nous, notes qui montent. La rareté en cours
   (`--aura`) teinte l'ensemble, et chaque palier accélère la musique.
   Aucune couche ne se repeint : tout bouge en transformation.
   ================================================================== */
.stage-world {
  --horizon: 64%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sw-sky {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40% 30% at 22% 28%, rgba(168, 85, 247, .32), transparent 70%),
    radial-gradient(38% 28% at 80% 22%, rgba(34, 211, 238, .2), transparent 70%),
    radial-gradient(60% 40% at 50% var(--horizon), color-mix(in srgb, var(--aura) 45%, #ff4fd8), transparent 70%),
    linear-gradient(180deg, #07051a 0%, #150b3a 45%, #2a0f4a 62%, #0a0618 64%);
  animation: sw-drift 26s ease-in-out infinite alternate;
}
@keyframes sw-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.06); }
}
.sw-stars {
  position: absolute;
  left: 0; right: 0;
  top: -100%;
  height: calc(var(--horizon) * 2 + 100%);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 34% 8%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 58% 22%, #fff, transparent),
    radial-gradient(1px 1px at 76% 12%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 88% 30%, #fff, transparent),
    radial-gradient(1px 1px at 22% 38%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 46% 44%, #fff, transparent),
    radial-gradient(1px 1px at 68% 40%, #fff, transparent);
  background-size: 100% 50%;
  opacity: .7;
  animation: sw-stars 60s linear infinite;
}
@keyframes sw-stars { to { transform: translate3d(0, 50%, 0); } }

/* le soleil : un vinyle géant qui tourne, à moitié couché sur l'horizon */
.sw-sun {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  width: min(78vmin, 640px);
  aspect-ratio: 1;
  translate: -50% -58%;
}
.sw-sun::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--aura) 60%, #ff4fd8), transparent 70%);
  opacity: .55;
  animation: sw-pulse 2.4s ease-in-out infinite;
}
@keyframes sw-pulse { 50% { transform: scale(1.06); opacity: .75; } }
.sw-vinyl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 20deg, rgba(255, 255, 255, .16) 32deg, transparent 50deg,
                   transparent 190deg, rgba(255, 255, 255, .1) 205deg, transparent 222deg),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .06) 0 1px, transparent 1px 5px),
    radial-gradient(circle, #1a1030 0 30%, #07050f 72%, #120b25);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aura) 70%, #ff4fd8), 0 0 60px color-mix(in srgb, var(--aura) 50%, #ff4fd8);
  animation: disc-spin 14s linear infinite;
}
.sw-vinyl i {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #07050f 0 6%, transparent 7%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--aura) 80%, #fff) 0 22.5deg, color-mix(in srgb, var(--aura) 55%, #ff4fd8) 22.5deg 45deg);
  box-shadow: 0 0 0 4px rgba(7, 5, 15, .8);
}

/* l'égaliseur, silhouette de ville sur l'horizon */
.sw-eq {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--horizon) - 16vmin);
  height: 16vmin;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 2vw;
  opacity: .5;
}
.sw-eq i {
  width: 1.9%;
  height: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--aura) 70%, #ff4fd8), #22d3ee);
  transform-origin: bottom;
  transform: scaleY(var(--h));
  animation: sw-bar var(--d) ease-in-out var(--o) infinite alternate;
}
@keyframes sw-bar {
  from { transform: scaleY(calc(var(--h) * .25)); }
  to   { transform: scaleY(var(--h)); }
}

/* le sol : une grille néon en perspective qui défile */
.sw-floor {
  position: absolute;
  left: 0; right: 0;
  top: var(--horizon);
  bottom: 0;
  overflow: hidden;
  perspective: 240px;
  perspective-origin: 50% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--aura) 35%, #2a0f4a), #07051a 70%);
  box-shadow: 0 -2px 18px color-mix(in srgb, var(--aura) 80%, #ff4fd8);
}
.sw-grid {
  position: absolute;
  left: -100%; right: -100%;
  top: 0;
  height: 400%;
  transform-origin: 50% 0;
  transform: rotateX(72deg);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--aura) 75%, #ff4fd8) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--aura) 75%, #ff4fd8) 0 2px, transparent 2px 64px);
  opacity: .55;
  animation: sw-run 1.1s linear infinite;
}
@keyframes sw-run {
  from { transform: rotateX(72deg) translate3d(0, -64px, 0); }
  to   { transform: rotateX(72deg) translate3d(0, 0, 0); }
}

/* les notes qui montent */
.sw-notes span {
  position: absolute;
  left: var(--x);
  bottom: -10%;
  font-size: calc(28px * var(--s));
  color: color-mix(in srgb, var(--aura) 55%, #fff);
  opacity: 0;
  animation: sw-note var(--t) linear var(--o) infinite;
}
@keyframes sw-note {
  0%   { transform: translate3d(0, 0, 0) rotate(-10deg); opacity: 0; }
  10%  { opacity: .35; }
  80%  { opacity: .2; }
  100% { transform: translate3d(30px, -110vh, 0) rotate(20deg); opacity: 0; }
}

/* ça s'emballe : pendant la charge, à la déchirure, aux grands paliers */
.stage.is-revving .sw-grid,
.stage[data-rarity="epic"] .sw-grid { animation-duration: .5s; }
.stage.is-revving .sw-vinyl,
.stage[data-rarity="epic"] .sw-vinyl { animation-duration: 4s; }
.stage.is-revving .sw-eq,
.stage[data-rarity="epic"] .sw-eq { opacity: .8; }
.stage.is-revving .sw-eq i { animation-duration: .28s; }
.stage.is-burst .sw-grid,
.stage[data-rarity="legendary"] .sw-grid,
.stage[data-rarity="mythic"] .sw-grid,
.stage[data-rarity="secret"] .sw-grid { animation-duration: .3s; opacity: .8; }
.stage.is-burst .sw-vinyl,
.stage[data-rarity="legendary"] .sw-vinyl,
.stage[data-rarity="mythic"] .sw-vinyl,
.stage[data-rarity="secret"] .sw-vinyl { animation-duration: 1.6s; }
.stage[data-rarity="legendary"] .sw-eq,
.stage[data-rarity="mythic"] .sw-eq,
.stage[data-rarity="secret"] .sw-eq { opacity: 1; }
.stage[data-rarity="legendary"] .sw-eq i,
.stage[data-rarity="mythic"] .sw-eq i,
.stage[data-rarity="secret"] .sw-eq i { animation-duration: .22s; }
.stage.is-slowmo .sw-grid,
.stage.is-slowmo .sw-vinyl,
.stage.is-slowmo .sw-eq i { animation-play-state: paused; }

/* le récapitulatif garde le décor, plus calme */
.stage[data-phase="carousel"] .sw-eq { opacity: .3; }

/* ------------------------------- allégé -------------------------------
   Sans carte graphique, un grand calque qui tourne ou qui défile se
   recompose à chaque image. On garde le décor, figé, et seul l'égaliseur
   (de petites barres) continue de battre. */
.fx-lite .sw-sky,
.fx-lite .sw-stars,
.fx-lite .sw-vinyl,
.fx-lite .sw-grid,
.fx-lite .sw-sun::before { animation: none !important; }
.fx-lite .sw-notes { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stage-world * { animation: none !important; }
}

/* ---------------------- la révélation d'un disque ----------------------
   Au retournement, le disque sort de sa pochette d'un coup et tourne
   à toute vitesse avant de ralentir, comme lancé sur la platine. */
.card.is-popped .card-art { animation: disc-eject .95s cubic-bezier(.2, .9, .25, 1.15) backwards; }
@keyframes disc-eject {
  0%   { transform: translateY(42%) scale(.86); }
  55%  { transform: translateY(-10%) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.card.is-popped .disc-spin { animation: disc-whirl 1.6s cubic-bezier(.12, .7, .2, 1); }
@keyframes disc-whirl { from { transform: rotate(-1080deg); } to { transform: rotate(0deg); } }
.card.is-popped.is-sounding .disc-spin { animation: disc-spin 1.8s linear infinite; }
/* aux grands paliers, un anneau de lumière part du disque */
.card.is-popped.r-epic .card-art::before,
.card.is-popped.r-legendary .card-art::before,
.card.is-popped.r-mythic .card-art::before,
.card.is-popped.r-secret .card-art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: .4em solid var(--r-glow);
  animation: disc-ring 1.1s ease-out .25s both;
  z-index: 3;
  pointer-events: none;
}
@keyframes disc-ring {
  from { transform: scale(.6); opacity: 1; }
  to   { transform: scale(1.02); opacity: 0; }
}

/* ==================================================================
   LA COLLECTION PAR SÉRIES
   L'étagère : une pochette par série entamée, un disque qui en dépasse
   et dont l'arc dit la progression. Les familles filtrent l'étagère ;
   une série ouverte garde ses voisines à portée de pouce.
   ================================================================== */
.coll-fams {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 4px;
  margin: 0 -2px;
}
.coll-fams::-webkit-scrollbar { display: none; }
.coll-fams[hidden] { display: none; }
.cf-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 999px;
  background: linear-gradient(180deg, #33286b, #221a4c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(10, 6, 26, .85);
  color: #e6ddff;
  font-family: var(--font-display, inherit);
  font-size: 14px;
  cursor: pointer;
}
.cf-chip b {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(10, 6, 26, .55);
  color: #bfb2f2;
}
.cf-chip.is-on {
  color: #fff;
  background: linear-gradient(180deg, #ff7ad9, #b43bf0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 #5a1b86;
}
.cf-chip.is-on b { background: rgba(255, 255, 255, .25); color: #fff; }

.shelf-lead { margin: 2px 2px 16px; font-size: 13px; color: var(--ink-2); }
.shelf {
  display: grid;
  gap: 26px 18px;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
.shelf-tile {
  --hue: 268;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: tile-in .5s cubic-bezier(.2, .8, .2, 1) var(--delay) both;
}
@keyframes tile-in { from { opacity: 0; transform: translateY(14px); } }
.shelf-tile > .st-disc,
.shelf-tile > .st-sleeve { width: 82%; }

/* la pochette : les quatre disques phares de la série en mosaïque */
.st-sleeve {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(10, 6, 26, .95);
  background: linear-gradient(150deg, hsl(var(--hue) 75% 52%), hsl(calc(var(--hue) + 30) 70% 26%));
  box-shadow: 0 4px 0 rgba(10, 6, 26, .85), 0 16px 26px -14px rgba(0, 0, 0, .9);
  z-index: 1;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.st-art {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.st-art i {
  background: hsl(var(--hue) 60% 30%) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(10, 6, 26, .5);
}
.st-sleeve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 38%),
              linear-gradient(0deg, hsl(var(--hue) 70% 20% / .55), transparent 45%);
}
.st-vol {
  position: absolute;
  left: 6px; bottom: 6px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid rgba(10, 6, 26, .95);
  background: linear-gradient(180deg, #fff3a8, #ffc233);
  color: #5a2600;
  font-family: var(--font-display, inherit);
  font-size: 12px;
}

/* le disque qui dépasse à droite : l'arc lumineux, c'est la complétion */
.st-disc {
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0a0816 0 6%, transparent 7%),
    radial-gradient(circle, hsl(var(--hue) 85% 60%) 0 22%, transparent 23%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    radial-gradient(circle, #1d1834 0 30%, #0b0916 72%);
  box-shadow: 0 0 0 2px rgba(10, 6, 26, .95);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.st-disc i {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--pct) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 69%, transparent 70%);
          mask: radial-gradient(circle, transparent 62%, #000 63%, #000 69%, transparent 70%);
}
.shelf-tile:hover .st-disc,
.shelf-tile:focus-visible .st-disc { transform: translateX(12%) rotate(40deg); }
.shelf-tile:hover .st-sleeve { transform: translateY(-3px) rotate(-1.5deg); }
.shelf-tile:active .st-sleeve { transform: scale(.97); }

.st-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-name {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.1;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-era { font-style: normal; font-size: 12px; color: var(--ink-2); }
.st-bar {
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  border: 2px solid rgba(10, 6, 26, .95);
  background: rgba(10, 6, 26, .7);
  overflow: hidden;
}
.st-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--hue) 90% 55%), hsl(calc(var(--hue) + 40) 100% 70%));
}
.st-num { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-num b { color: #fff; }

/* --- une série ouverte --- */
.serie-head {
  --hue: 268;
  position: relative;
  margin: 0 0 22px;
  padding: 14px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, hsl(var(--hue) 80% 50% / .35), transparent 60%),
    linear-gradient(180deg, rgba(50, 38, 104, .6), rgba(24, 17, 58, .75));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 rgba(10, 6, 26, .85);
  animation: tile-in .4s cubic-bezier(.2, .8, .2, 1) both;
}
.sh-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 2px solid rgba(10, 6, 26, .9);
  border-radius: 999px;
  background: rgba(10, 6, 26, .45);
  color: #e6ddff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.sh-back .i { width: 16px; height: 16px; }
.sh-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 12px;
}
.sh-txt { flex: 1 1 260px; min-width: 0; }
.sh-txt h2 {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 0 rgba(20, 14, 51, .9);
}
.sh-txt h2 small { font-size: .55em; color: #ffe08a; }
.sh-txt p { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.sh-bar {
  height: 12px;
  margin-top: 10px;
  border-radius: 999px;
  border: 2px solid rgba(10, 6, 26, .95);
  background: rgba(10, 6, 26, .7);
  overflow: hidden;
}
.sh-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--hue) 90% 55%), hsl(calc(var(--hue) + 40) 100% 70%));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.sh-num b { color: #fff; }
.sh-open { flex: 0 0 auto; padding: 11px 20px; font-size: 15px; }

.sh-hop {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 14px -14px -14px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sh-hop::-webkit-scrollbar { display: none; }
.sh-hop-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 2px solid rgba(10, 6, 26, .9);
  border-radius: 999px;
  background: rgba(10, 6, 26, .45);
  color: #e6ddff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.sh-hop-btn i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--hue) 85% 60%); }
.sh-hop-btn b { font-size: 11px; color: var(--ink-3); }
.sh-hop-btn.is-on { background: hsl(var(--hue) 70% 45%); color: #fff; }
.sh-hop-btn.is-on b { color: #fff; }

@media (max-width: 560px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .st-name { font-size: 15.5px; }
  .sh-open { width: 100%; }
}
.fx-lite .shelf-tile { animation: none; }

/* ==================================================================
   LES RECOMMANDATIONS (onglet Amis)
   ================================================================== */
.recos { margin-bottom: 8px; }
.recos:empty { display: none; }
.reco-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #ffb3d9;
}
.reco-h svg { width: 16px; height: 16px; fill: currentColor; }
.reco-h em {
  margin-left: auto;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--ink-3);
}
.lot.reco { border-left-color: #ff7ab8; }
.lot.reco.is-sent { border-left-color: var(--c); }
/* la pochette devient un petit disque */
.reco-disc {
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(10, 6, 26, .9), 0 0 0 5px var(--c);
}
.reco-disc::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #07060f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}
.reco-disc .lot-tier { z-index: 1; }
.reco-from { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reco-av { width: 20px; height: 20px; font-size: 9px; }
.reco-take {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 12px;
  background: linear-gradient(180deg, #ff9ad3, #e0408f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #7a1446;
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 14px;
  cursor: pointer;
}
.reco-take svg { width: 14px; height: 14px; fill: currentColor; }
.reco-take:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #7a1446; }
.reco-take:disabled { opacity: .5; cursor: default; }
.reco-count { font-family: var(--font-display, inherit); font-weight: 400; font-size: 20px; color: #ffb3d9; }
.reco-count small { font-size: 12px; color: var(--ink-3); }
.reco-sent { margin-top: 10px; }
.reco-empty, .reco-hint {
  padding: 14px 16px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.reco-hint { margin-top: 10px; }

/* le cœur, à côté de « Vendre » dans la liste des titres */
.trk-reco {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 2px solid rgba(20, 14, 51, .9);
  border-radius: 50%;
  background: linear-gradient(180deg, #ff9ad3, #e0408f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #7a1446;
  color: #fff;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.trk-reco .i { width: 14px; height: 14px; }
.trk-reco:hover { transform: translateY(-1px); }
.trk-reco:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #7a1446; }

/* les projecteurs : ils s'allument avec la rareté et balaient le ciel */
.sw-beams { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.sw-beams i {
  position: absolute;
  bottom: -6%;
  width: 22vmin;
  height: 120vh;
  transform-origin: 50% 100%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--aura) 70%, #fff), transparent 85%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
          mask: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  opacity: .5;
  animation: sw-sweep 3.2s ease-in-out infinite alternate;
}
.sw-beams i:nth-child(1) { left: 6%;  --a: -28deg; --b: 8deg; }
.sw-beams i:nth-child(2) { left: 24%; --a: -12deg; --b: 18deg; animation-delay: -.8s; }
.sw-beams i:nth-child(3) { right: 24%; --a: 12deg; --b: -18deg; animation-delay: -1.6s; }
.sw-beams i:nth-child(4) { right: 6%; --a: 28deg; --b: -8deg; animation-delay: -2.4s; }
@keyframes sw-sweep {
  from { transform: rotate(var(--a)); }
  to   { transform: rotate(var(--b)); }
}
.stage[data-rarity="rare"] .sw-beams      { opacity: .25; }
.stage[data-rarity="epic"] .sw-beams      { opacity: .5; }
.stage[data-rarity="legendary"] .sw-beams,
.stage[data-rarity="mythic"] .sw-beams,
.stage[data-rarity="secret"] .sw-beams,
.stage.is-burst .sw-beams                 { opacity: .85; }
.stage[data-rarity="mythic"] .sw-beams i,
.stage[data-rarity="secret"] .sw-beams i  { animation-duration: 1.4s; }
.fx-lite .sw-beams i { animation: none; }

/* les volumes d'une collection ouverte : chacun avec sa période et sa jauge */
.sh-vols {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 14px;
  padding-bottom: 2px;
}
.sh-vols::-webkit-scrollbar { display: none; }
.sh-vol {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 12px 10px;
  border: 2px solid rgba(10, 6, 26, .9);
  border-radius: 12px;
  background: rgba(10, 6, 26, .45);
  color: #e6ddff;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}
.sh-vol b { font-family: var(--font-display, inherit); font-weight: 400; font-size: 14px; color: #fff; }
.sh-vol span { font-size: 11px; color: var(--ink-3); }
.sh-vol i {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: calc(var(--p, 0) * 100%);
  min-width: 3px;
  background: linear-gradient(90deg, hsl(var(--hue) 90% 60%), hsl(calc(var(--hue) + 40) 100% 72%));
}
.sh-vol.is-on { background: hsl(var(--hue) 70% 45%); border-color: rgba(10, 6, 26, .95); }
.sh-vol.is-on span { color: rgba(255, 255, 255, .8); }

/* ==================================================================
   DES POCHETTES QUI SE RECONNAISSENT
   Chaque volume porte en pleine pochette l'album phare qu'il contient,
   dans sa propre teinte : on distingue « Jazz, les origines » de « Jazz,
   la période récente » avant même de lire. La complétion se lit sur la
   pochette (pastille) et sur l'étiquette du disque (anneau).
   ================================================================== */
.pack-hero {
  position: absolute;
  inset: 0;
  background: hsl(var(--hue) 50% 30%) center / cover no-repeat;
  filter: saturate(1.15) contrast(1.05);
}
/* la teinte du volume par-dessus l'image : un duotone léger, peint une fois */
.pack.has-hero .pack-motif { opacity: .18; }
.pack.has-hero .pack-foil { opacity: 1; }
.pack.has-hero .pack-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, hsl(var(--hue) 90% 55% / .55), transparent 45%),
    linear-gradient(0deg, hsl(calc(var(--hue) + 20) 80% 14% / .95) 0%, hsl(var(--hue) 70% 20% / .5) 32%, transparent 55%);
}
.pack.has-hero .pack-window { display: none; }
.pack.has-hero .pack-plate { top: auto; bottom: 12%; }
.pack.has-hero .plate-name { font-size: 2.3em; }
.pack.has-hero .plate-tag {
  display: inline-block;
  margin-top: .25em;
  padding: .15em .7em;
  border-radius: 999px;
  background: rgba(10, 6, 26, .55);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 1em;
  letter-spacing: .03em;
}
.pack.has-hero .pack-tab {
  top: 6%;
  padding: .5em 1.1em .55em 1em;
  border: .16em solid rgba(10, 6, 26, .95);
  border-left: 0;
  box-shadow: .25em .25em 0 rgba(10, 6, 26, .6);
}
.pack.has-hero .pack-tab b { color: #fff; font-size: 1.2em; letter-spacing: .08em; }
.pack.has-hero .pack-tab span { font-size: 1em; }

/* la pastille de complétion */
.pack-pct {
  position: absolute;
  left: 5%;
  bottom: 4%;
  z-index: 4;
  padding: .3em .75em;
  border-radius: 999px;
  border: .14em solid rgba(10, 6, 26, .95);
  background: rgba(10, 6, 26, .78);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 1.05em;
  box-shadow: 0 .2em 0 rgba(10, 6, 26, .7);
}
.pack-pct::before {
  content: "";
  display: inline-block;
  width: .7em; height: .7em;
  margin-right: .4em;
  border-radius: 50%;
  vertical-align: -.02em;
  background: conic-gradient(#ffd24a calc(var(--pct, 0) * 360deg), rgba(255, 255, 255, .2) 0);
}
.pack-pct.is-full {
  background: linear-gradient(180deg, #fff3a8, #ffc233);
  color: #5a2600;
}
.pack-pct.is-full::before { display: none; }

/* l'anneau de complétion autour de l'étiquette du disque qui dépasse */
.pack[style*="--pct"] .pv-label {
  box-shadow: 0 0 0 .2em rgba(10, 6, 26, .85), 0 0 0 .38em rgba(255, 255, 255, .15);
}
.pack[style*="--pct"] .pack-vinyl::before {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: conic-gradient(#ffd24a calc(var(--pct) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 80%);
          mask: radial-gradient(circle, transparent 78%, #000 80%);
  z-index: 1;
}

/* ==================================================================
   LE SÉLECTEUR DE COLLECTIONS
   Téléphone : une barre avec la collection en cours et ses voisines, et
   une feuille plein écran avec toutes les collections en grille.
   Ordinateur (≥ 1100 px) : la même grille en colonne, toujours ouverte, à
   gauche du présentoir.
   ================================================================== */
.browse { margin-bottom: 0; }
.browse-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pick-nav {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 50%;
  background: linear-gradient(180deg, #33286b, #221a4c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(10, 6, 26, .85);
  color: #e6ddff;
  cursor: pointer;
}
.pick-nav .i { width: 18px; height: 18px; }
.pick-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 8px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(60, 46, 124, .9), rgba(34, 26, 76, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(10, 6, 26, .85);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pick-ico {
  --hue: 268;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 2px solid rgba(10, 6, 26, .9);
  background: hsl(var(--hue) 70% 45%) center / cover no-repeat;
  font-style: normal;
  font-size: 18px;
}
.pick-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pick-txt b {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-txt em { font-style: normal; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 11px;
  border: 2px solid rgba(10, 6, 26, .9);
  background: linear-gradient(180deg, #ff7ad9, #b43bf0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
  font-family: var(--font-display, inherit);
  font-size: 14px;
}
.pick-all .i { width: 16px; height: 16px; }

/* la feuille */
.picker {
  position: fixed;
  inset: 0;
  z-index: 6000;
  visibility: hidden;
  pointer-events: none;
}
.picker.is-armed { visibility: visible; }
.picker.is-armed .picker-panel { will-change: transform; }
.picker.is-open { visibility: visible; pointer-events: auto; }
.picker-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 12, .72);
  opacity: 0;
  transition: opacity .3s;
}
.picker.is-open .picker-scrim { opacity: 1; }
.picker-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: max(24px, env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 0;
  border-radius: 22px 22px 0 0;
  border: 2px solid rgba(20, 14, 51, .95);
  border-bottom: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(168, 85, 247, .25), transparent 60%),
    linear-gradient(180deg, #1c1542, #0e0a22);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .9);
  transform: translateY(104%);
  transition: transform .42s cubic-bezier(.2, .9, .25, 1);
}
.picker.is-open .picker-panel { transform: none; }
.picker-head { display: flex; align-items: center; justify-content: space-between; }
.picker-head h2 {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 24px;
  color: #fff;
}
.picker .coll-find { max-width: none; width: 100%; }
.picker .fam-bar {
  flex: 0 0 auto;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  border-radius: 14px;
}
.picker .fam-bar::-webkit-scrollbar { display: none; }
.picker .rail {
  flex: 1 1 auto;
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 2px calc(24px + var(--safe-b));
  -webkit-mask-image: none;
          mask-image: none;
  scroll-snap-type: none;
  overscroll-behavior: contain;
}
.pk-sec { margin-bottom: 16px; }
.pk-sec h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 2px 9px;
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d7c9ff;
}
.pk-sec h3 em { font-style: normal; font-size: 12px; color: var(--ink-3); letter-spacing: 0; }
.pk-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.picker .coll-wrap .coll,
.picker .coll {
  width: 100%;
  grid-template-columns: auto 1fr auto;
  border: 2px solid rgba(20, 14, 51, .95);
  background: linear-gradient(180deg, rgba(50, 38, 104, .75), rgba(24, 17, 58, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 rgba(10, 6, 26, .85);
}
.picker .coll-ico { grid-row: 1 / 3; width: 38px; height: 38px; }
.coll-pct {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-display, inherit);
  font-size: 13px;
  color: #ffe08a;
}
.picker .coll.is-on {
  border-color: hsl(var(--hue) 85% 65%);
  background: linear-gradient(140deg, hsl(var(--hue) 75% 48% / .75), hsl(var(--hue) 70% 30% / .75));
  color: #fff;
}
.picker .coll-fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
}
.picker .fav-star { top: 4px; right: 4px; }
.picker .coll-pct { margin-right: 10px; }

@media (max-width: 1099px) {
  #view-open .browse { padding: 0 2px; }
}

/* --- ordinateur : la grille devient une colonne permanente --- */
@media (min-width: 1100px) {
  #view-open.is-active {
    display: grid;
    grid-template-columns: minmax(280px, 330px) 1fr;
    grid-template-rows: minmax(0, 1fr);
    /* de l'air entre la colonne des collections et le présentoir, qui
       grandit avec l'écran */
    gap: clamp(28px, 4vw, 72px);
  }
  #view-open .browse { height: 100%; min-height: 0; }
  .browse-bar { display: none; }
  .picker {
    position: static;
    visibility: visible;
    pointer-events: auto;
    height: 100%;
  }
  .picker-scrim, .picker-close { display: none; }
  .picker-panel {
    position: relative;
    inset: auto;
    height: 100%;
    transform: none;
    border-radius: 20px;
    border-bottom: 2px solid rgba(20, 14, 51, .95);
    padding: 14px 12px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 0 rgba(10, 6, 26, .85);
    background: linear-gradient(180deg, rgba(34, 26, 76, .85), rgba(16, 12, 38, .9));
  }
  .picker-head h2 { font-size: 20px; }
  .pk-grid { grid-template-columns: 1fr; gap: 7px; }
  .picker .rail { padding-bottom: 14px; }
}
.fx-lite .picker-panel { transition: none; }

/* la jauge de chaque volume, sous son nom */
.vol { position: relative; overflow: hidden; }
.vol-fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd24a, #fff3a8);
}

/* ==================================================================
   LE VOTE
   ================================================================== */
.vt-hero {
  position: relative;
  margin-bottom: 20px;
  padding: 18px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 20px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(34, 211, 238, .25), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(255, 79, 216, .3), transparent 60%),
    linear-gradient(180deg, #2c2263, #19133e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 rgba(10, 6, 26, .85);
  overflow: hidden;
}
.vt-kicker {
  font-family: var(--font-display, inherit);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffb3e6;
}
.vt-hero h2 {
  margin: 4px 0 6px;
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 0 rgba(20, 14, 51, .9);
}
.vt-hero p { max-width: 60ch; font-size: 14px; line-height: 1.5; color: #d9d0ff; }
.vt-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; font-size: 13px; color: #fff; font-weight: 700; }
.vt-timer::before { content: "⏱ "; }
.vt-steps { display: inline-flex; align-items: center; gap: 5px; }
.vt-steps i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(10, 6, 26, .9); background: rgba(10, 6, 26, .5); }
.vt-steps i.is-on { background: linear-gradient(180deg, #ffe08a, #ffb020); }
.vt-steps i:last-of-type { margin-right: 4px; }

.vt-grid {
  display: grid;
  gap: 14px 20px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}
.vt-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 2px 10px;
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}
.vt-h em { font-family: system-ui, sans-serif; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.vt-list { display: grid; gap: 7px; }
.vt-opt {
  --hue: 268;
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(50, 38, 104, .7), rgba(24, 17, 58, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 rgba(10, 6, 26, .85);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s;
}
.vt-opt:hover:not(:disabled) { transform: translateY(-1px); }
.vt-opt:active:not(:disabled) { transform: translateY(2px); }
/* la part des voix, en fond de la ligne */
.vt-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, hsl(var(--hue) 80% 50% / .35), hsl(var(--hue) 80% 60% / .15));
  pointer-events: none;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.vt-ico, .vt-name, .vt-pct, .vt-check { position: relative; z-index: 1; }
.vt-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 2px solid rgba(10, 6, 26, .9);
  background: linear-gradient(180deg, hsl(var(--hue) 85% 62%), hsl(var(--hue) 75% 40%));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
  font-style: normal;
  font-size: 18px;
}
.vt-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--font-display, inherit);
  font-size: 15.5px;
  line-height: 1.15;
}
.vt-name em {
  font-family: system-ui, sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #b9adf0;
}
.vt-pct { font-family: var(--font-display, inherit); font-weight: 400; font-size: 15px; color: #ffe08a; }
.vt-opt.is-mine {
  border-color: #ffd24a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 0 #9a4a00, 0 0 0 3px rgba(255, 210, 74, .25);
}
.vt-check {
  position: absolute;
  top: 50%; right: 54px;
  translate: 0 -50%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff3a8, #ffc233);
  border: 2px solid rgba(10, 6, 26, .9);
  color: #5a2600;
  animation: quest-stamp .5s cubic-bezier(.3, 1.8, .5, 1);
}
.vt-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vt-opt.is-won { opacity: .45; cursor: default; }
.vt-opt:disabled:not(.is-won) { cursor: default; }
.vt-opt.is-sending { opacity: .6; }
.vt-more {
  margin-top: 8px;
  padding: 7px 14px;
  border: 2px solid rgba(20, 14, 51, .9);
  border-radius: 999px;
  background: rgba(10, 6, 26, .45);
  color: #e6ddff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.vt-wins {
  margin-bottom: 20px;
  padding: 14px;
  border: 2px dashed rgba(255, 210, 74, .45);
  border-radius: 18px;
  background: rgba(255, 210, 74, .06);
}
.vt-win-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.vt-win-row > b { font-family: var(--font-display, inherit); font-weight: 400; color: #ffe08a; margin-right: 4px; }
.vt-win {
  --hue: 268;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  border: 2px solid rgba(10, 6, 26, .9);
  background: linear-gradient(180deg, hsl(var(--hue) 75% 50%), hsl(var(--hue) 70% 34%));
  font-family: var(--font-display, inherit);
  font-size: 14px;
  color: #fff;
}
.vt-win i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.vt-note { font-size: 12.5px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .vt-check { animation: none; } }

/* ==================================================================
   LE PARTAGE
   ================================================================== */
.act-share { flex: 0 0 auto; width: 3.4em; padding: 0; color: #fff; background: linear-gradient(180deg, #5ee0ff, #2a8fd8); }
.act-share:hover { background: linear-gradient(180deg, #7de8ff, #3aa0e8); }
.trk-share {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 2px solid rgba(20, 14, 51, .9);
  border-radius: 50%;
  background: linear-gradient(180deg, #5ee0ff, #2a8fd8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #0f4a78;
  color: #fff;
  cursor: pointer;
}
.trk-share .i { width: 14px; height: 14px; }
.trk-share:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #0f4a78; }

.share-panel { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; }
.sp-scrim { position: absolute; inset: 0; background: rgba(4, 3, 12, .78); opacity: 0; transition: opacity .3s; }
.sp-card {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 32px);
  padding: 18px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 22px;
  background: linear-gradient(180deg, #2c2263, #17123a);
  box-shadow: 0 30px 80px -20px #000;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .9, .25, 1.2), opacity .25s;
}
.share-panel.is-on .sp-scrim { opacity: 1; }
.share-panel.is-on .sp-card { transform: none; opacity: 1; }
.sp-img { width: 42%; max-height: 70vh; object-fit: contain; border-radius: 14px; box-shadow: 0 10px 30px -10px #000; }
.sp-side { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.sp-side h2 { font-family: var(--font-display, inherit); font-weight: 400; font-size: 24px; color: #fff; }
.sp-side p { font-size: 14px; color: #d9d0ff; }
.sp-side .btn { justify-content: center; }
.sp-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-nets a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid rgba(10, 6, 26, .9);
  background: rgba(10, 6, 26, .45);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.sp-close { position: absolute; top: 10px; right: 10px; }
@media (max-width: 560px) {
  .sp-card { flex-direction: column; overflow-y: auto; }
  .sp-img { width: 62%; max-height: 46vh; }
}

/* ==================================================================
   DEEZER EN PREMIER
   L'extrait et les données viennent de Deezer : son bouton porte son
   nom, dans sa couleur ; les autres services restent en pictogrammes.
   ================================================================== */
.act-deezer {
  flex: 1 1 auto !important;
  width: auto !important;
  padding: 0 .8em !important;
  gap: .4em !important;
  color: #fff !important;
  background: linear-gradient(180deg, #b660ff, #8a1fe8) !important;
}
.act-deezer:hover { background: linear-gradient(180deg, #c47aff, #9a30f5) !important; }
.act-deezer .act-label { font-family: var(--font-display, inherit); font-weight: 400; font-size: 1.05em; }
.act-deezer .ico { width: 1.5em; height: 1.5em; }
.act-spotify, .act-qobuz, .act-tidal { opacity: .8; }
/* en vignette, la place manque : Deezer et Spotify seulement */
.card.is-compact .act-qobuz,
.card.is-compact .act-tidal { display: none; }
@media (max-width: 480px) {
  .act-deezer .act-label { display: inline; }
  .card:not(.is-compact) .act-qobuz, .card:not(.is-compact) .act-tidal { display: none; }
}
.player-deezer { color: #b660ff; }
.player-deezer .i { width: 22px; height: 22px; }

/* Aide : propulsé par Deezer */
.powered {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 22px;
  padding: 16px 18px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(50, 38, 104, .7), rgba(24, 17, 58, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 rgba(10, 6, 26, .85);
}
.powered-by { display: flex; flex-direction: column; gap: 4px; }
.powered-by span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.powered-by img { width: 150px; height: auto; display: block; }
.powered p { flex: 1 1 260px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.powered a { color: #c99bff; }

/* ==================================================================
   LE DISQUE DU JOUR
   ================================================================== */
.daily-btn {
  position: absolute;
  left: max(6px, 1.5vw);
  top: 6px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 46, 124, .95), rgba(34, 26, 76, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(10, 6, 26, .85);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.db-disc {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0a0816 0 8%, transparent 9%),
    radial-gradient(circle, #ffd24a 0 30%, transparent 31%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    radial-gradient(circle, #231d3d, #0b0916);
  box-shadow: 0 0 0 2px rgba(10, 6, 26, .95);
}
.daily-btn.is-ready .db-disc { animation: disc-spin 3s linear infinite; }
.daily-btn.is-ready { background: linear-gradient(180deg, #ff7ad9, #b43bf0); animation: quest-nudge 2.6s ease-in-out infinite; }
.db-txt { display: flex; flex-direction: column; line-height: 1.1; }
.db-txt b { font-family: var(--font-display, inherit); font-weight: 400; font-size: 14px; }
.db-txt em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .8); }
.db-streak { font-family: var(--font-display, inherit); font-size: 14px; padding-left: 4px; }
.daily-btn .tab-dot { position: absolute; top: -2px; right: -2px; }
@media (max-width: 560px) {
  .db-txt em { display: none; }
  .daily-btn { padding-right: 10px; }
}

.seal-daily {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .15em .7em;
  border-radius: 999px;
  background: linear-gradient(100deg, #ffd24a, #ff7ad9);
  color: #3a1030;
  font-weight: 800;
  font-size: .95em;
  letter-spacing: .02em;
}
.seal-daily::before { content: "★"; }

.daily-modal { position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center; padding: 14px; }
.daily-modal[hidden] { display: none; }
.dl-scrim { position: absolute; inset: 0; background: rgba(4, 3, 12, .8); opacity: 0; transition: opacity .3s; }
.daily-modal.is-on .dl-scrim { opacity: 1; }
.dl-card {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 20px 18px 18px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255, 210, 74, .22), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(255, 79, 216, .2), transparent 60%),
    linear-gradient(180deg, #2c2263, #150f34);
  box-shadow: 0 30px 80px -20px #000;
  transform: translateY(24px) scale(.95);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2, .9, .25, 1.2), opacity .25s;
}
.daily-modal.is-on .dl-card { transform: none; opacity: 1; }
.dl-close { position: absolute; top: 10px; right: 10px; }
.dl-kicker { font-family: var(--font-display, inherit); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #ffe08a; }
.dl-card h2 { font-family: var(--font-display, inherit); font-weight: 400; font-size: 30px; color: #fff; text-shadow: 0 3px 0 rgba(20, 14, 51, .9); }
.dl-lead { margin: 4px auto 10px; max-width: 36ch; font-size: 13.5px; color: #d9d0ff; }
.dl-stage { display: grid; place-items: center; min-height: 200px; margin: 6px 0 12px; }
.dl-stage .card { --w: min(250px, 64vw); text-align: left; }
.dl-wait { color: var(--ink-2); }
.dl-foot { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.dl-streak { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dl-streak b { font-family: var(--font-display, inherit); font-weight: 400; font-size: 17px; color: #fff; }
.dl-streak b::before { content: "🔥 "; }
.dl-streak em { font-style: normal; font-size: 12.5px; color: #ffe08a; }
.dl-week { display: flex; gap: 6px; }
.dl-day { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; }
.dl-day i {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(10, 6, 26, .9);
  background: rgba(10, 6, 26, .5);
  font-style: normal;
  font-size: 13px;
  color: #3a1d00;
}
.dl-day.is-on i { background: linear-gradient(180deg, #fff3a8, #ffc233); }
.dl-claim { justify-content: center; font-size: 17px; padding: 14px; }
.dl-done { font-size: 13.5px; color: #b9f5d8; }

/* ==================================================================
   LES POCHETTES BRILLANTES
   Un album complet change de statut : liseré doré, reflet arc-en-ciel
   qui glisse sur la pochette, ruban « Complet ». Le reflet bouge en
   transformation seulement ; en mode allégé il reste fixe.
   ================================================================== */
.jacket-stage.is-full .jacket {
  box-shadow: 0 0 0 2px #ffd24a, 0 0 0 4px rgba(10, 6, 26, .9), 0 10px 26px -8px rgba(255, 190, 60, .75);
  overflow: hidden;
}
.jacket-holo {
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255, 0, 128, .28) 38%, rgba(255, 230, 0, .3) 44%,
    rgba(0, 255, 160, .28) 50%, rgba(0, 170, 255, .3) 56%, rgba(170, 0, 255, .28) 62%, transparent 70%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
  animation: holo-slide 4.5s ease-in-out infinite;
}
@keyframes holo-slide {
  0%, 100% { transform: translate3d(-25%, 0, 0); }
  50%      { transform: translate3d(25%, 0, 0); }
}
.jacket-ribbon {
  position: absolute;
  right: -30%;
  top: 10%;
  width: 90%;
  padding: .2em 0;
  transform: rotate(35deg);
  text-align: center;
  background: linear-gradient(180deg, #fff3a8, #ffc233);
  border-top: 2px solid rgba(10, 6, 26, .85);
  border-bottom: 2px solid rgba(10, 6, 26, .85);
  color: #5a2600;
  font-family: var(--font-display, inherit);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.jacket-stage.is-full .disc { box-shadow: 0 0 0 2px #ffd24a, 0 0 18px rgba(255, 210, 74, .6); }
.fx-lite .jacket-holo { animation: none; mix-blend-mode: normal; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .jacket-holo { animation: none; } }

/* ==================================================================
   LE CLASSEMENT ENTRE AMIS
   ================================================================== */
.board { margin-bottom: 8px; }
.board:empty { display: none; }
.bd-h { color: #ffe08a; }
.bd-tabs { margin: 0 0 10px; }
.bd-list { list-style: none; display: grid; gap: 7px; padding: 0; margin: 0; }
.bd-row {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: 34px 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(50, 38, 104, .7), rgba(24, 17, 58, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 rgba(10, 6, 26, .85);
  overflow: hidden;
}
.bd-row.is-me { border-color: #ffd24a; }
.bd-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, rgba(255, 210, 74, .22), rgba(255, 122, 217, .12));
  pointer-events: none;
}
.bd-rank, .bd-av, .bd-name, .bd-val { position: relative; z-index: 1; }
.bd-rank { font-size: 20px; text-align: center; font-family: var(--font-display, inherit); color: #d7c9ff; }
.bd-av { width: 34px; height: 34px; font-size: 12px; }
.bd-name { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-val { font-family: var(--font-display, inherit); font-weight: 400; font-size: 20px; color: #ffe08a; }
.bd-unit { margin: 6px 2px 0; font-size: 12px; color: var(--ink-3); }
/* le bouton Deezer prend la place : l'extrait se contente de son pictogramme */
.act-play { flex: 0 0 auto !important; width: 3.4em; padding: 0; gap: 0; }
.act-play .act-label { display: none; }

/* ==================================================================
   LES CADENAS ET LE MARTEAU
   Un volume sous cadenas garde sa pochette, assombrie et barrée de
   deux chaînes, avec un gros cadenas doré au milieu. Au marteau, le
   cadenas encaisse trois coups, se fend, puis éclate ; les chaînes
   tombent. Tout est en transformations et opacité.
   ================================================================== */
/* la pochette sous cadenas s'assombrit, le cadenas reste éclatant */
.shop-slot.is-locked .pack-body > :not(.lock-ov) { filter: saturate(.35) brightness(.5); }
.lock-ov {
  /* exactement la pochette (carrée, en bas du sachet), pas le disque qui dépasse */
  position: absolute;
  inset: auto 0 0 0;
  aspect-ratio: 1;
  z-index: 8;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lock-chains {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55));
  transition: transform .9s cubic-bezier(.5, 0, .75, 0), opacity .5s .35s;
}
/* un reflet court le long des chaînes */
.lk-chain { animation: lk-glint 3.4s ease-in-out infinite; }
.lk-chain + .lk-chain { animation-delay: 1.7s; }
@keyframes lk-glint {
  0%, 70%, 100% { filter: brightness(1); }
  80% { filter: brightness(1.55); }
}
.pl-halo {
  position: absolute;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 90, .5), rgba(255, 170, 40, .12) 45%, transparent 70%);
  animation: pl-halo 2.8s ease-in-out infinite;
}
@keyframes pl-halo { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
.padlock {
  position: relative;
  width: 34%;
  min-width: 58px;
  transform-origin: 50% 12%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65)) drop-shadow(0 0 10px rgba(255, 200, 80, .35));
  animation: pl-swing 3.6s ease-in-out infinite;
}
@keyframes pl-swing {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 5deg; }
}
.pl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl-shackle-hi { stroke: rgba(255, 255, 255, .85); }
.pl-body { stroke: #6e3f00; stroke-width: 2; }
.pl-bevel { stroke: rgba(255, 246, 200, .55); }
.pl-sweep { fill: rgba(255, 255, 255, .55); animation: pl-sweep 3.6s ease-in-out infinite; }
@keyframes pl-sweep { 0%, 55% { transform: skewX(-22deg) translateX(0); } 85%, 100% { transform: skewX(-22deg) translateX(120px); } }
.pl-rivet { fill: #fff3c0; stroke: #8a5200; stroke-width: .8; }
.pl-hole { fill: #3a1f00; }
.pl-spark {
  position: absolute;
  width: 10px; height: 10px;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%),
              conic-gradient(from 45deg, transparent 0 20deg, #fff6d6 22deg 26deg, transparent 28deg 110deg, #fff6d6 112deg 116deg,
                             transparent 118deg 200deg, #fff6d6 202deg 206deg, transparent 208deg 290deg, #fff6d6 292deg 296deg, transparent 298deg);
  border-radius: 50%;
  opacity: 0;
  animation: pl-twinkle 2.4s ease-in-out infinite;
}
.pl-spark.s1 { left: 30%; top: 30%; }
.pl-spark.s2 { right: 28%; top: 40%; animation-delay: .8s; width: 8px; height: 8px; }
.pl-spark.s3 { left: 40%; bottom: 26%; animation-delay: 1.6s; }
@keyframes pl-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(45deg); } }
.lock-ov.is-hof .pl-halo { background: radial-gradient(circle, rgba(255, 236, 150, .7), rgba(255, 190, 40, .2) 45%, transparent 70%); }
/* les coups de marteau */
.padlock::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%;
  top: 50%; bottom: 10%;
  opacity: 0;
  background:
    linear-gradient(118deg, transparent 46%, #3b2200 47% 50%, transparent 51%),
    linear-gradient(62deg, transparent 58%, #3b2200 59% 61%, transparent 62%),
    linear-gradient(160deg, transparent 30%, #3b2200 31% 33%, transparent 34%);
  transition: opacity .1s;
}
.padlock[data-crack="1"]::after { opacity: .45; }
.padlock[data-crack="2"]::after { opacity: .75; }
.padlock[data-crack="3"]::after { opacity: 1; }
.padlock.is-hit { scale: .9; }
.padlock.is-rattle { animation: pl-rattle .5s ease-in-out; }
@keyframes pl-rattle {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -14deg; }
  40% { rotate: 12deg; }
  60% { rotate: -8deg; }
  80% { rotate: 4deg; }
}
.lock-ov.is-broken .padlock { animation: pl-burst .7s cubic-bezier(.2, .8, .3, 1) forwards; }
.lock-ov.is-broken .pl-shackle, .lock-ov.is-broken .pl-shackle-hi { transform-origin: 46px 36px; animation: pl-shackle .5s ease-out forwards; }
.lock-ov.is-broken .lock-chains { transform: translateY(40%) rotate(8deg); opacity: 0; }
.lock-ov.is-broken .pl-halo { animation: none; opacity: 0; transition: opacity .3s; }
.lock-ov.is-broken .hammer { opacity: 0; transition: opacity .2s; }
@keyframes pl-burst {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.3) translateY(-8%); opacity: 1; }
  100% { transform: scale(.4) translateY(40%) rotate(35deg); opacity: 0; }
}
@keyframes pl-shackle { to { transform: rotate(-38deg) translate(-4px, -10px); } }
/* le marteau, levé au-dessus du cadenas, qui s'abat */
.hammer {
  position: absolute;
  width: 34%;
  min-width: 64px;
  left: 50%;
  top: 6%;
  z-index: 2;
  transform-origin: 80% 95%;
  transform: translateX(-10%) rotate(40deg);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6));
}
.hammer.is-swing { animation: hm-swing .34s cubic-bezier(.55, 0, .9, .6); }
@keyframes hm-swing {
  0%   { transform: translateX(-10%) rotate(40deg); }
  45%  { transform: translateX(-10%) rotate(62deg); }
  75%  { transform: translateX(-10%) rotate(-8deg); }
  100% { transform: translateX(-10%) rotate(40deg); }
}
.hm-svg { display: block; width: 100%; height: auto; }
.hm-handle { fill: #8a5a2b; stroke: #4a2b10; stroke-width: 2; }
.hm-head { fill: #b9c1d3; stroke: #3c4254; stroke-width: 2.5; }
.hm-shine { stroke: rgba(255, 255, 255, .8); fill: none; }
.shop-slot:not(.is-active) .lock-ov * { animation: none !important; }
.fx-lite .lock-ov * { animation-duration: 0s !important; animation: none !important; }
.fx-lite .lock-ov.is-broken .padlock { animation: pl-burst .5s forwards !important; }

/* le panneau sous le présentoir */
.shop-lock {
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid rgba(20, 14, 51, .95);
  background: linear-gradient(180deg, rgba(60, 46, 124, .9), rgba(28, 21, 64, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 rgba(10, 6, 26, .85);
  text-align: center;
}
.shop-lock[hidden] { display: none; }
.sl-txt { font-size: 13.5px; color: var(--ink-2); }
.sl-txt b { color: #fff; }
.sl-bar { width: 100%; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd36a, #ff7ad9); border-radius: inherit; }
.sl-smash { display: inline-flex; align-items: center; gap: 8px; }
.sl-smash .i { width: 20px; height: 20px; }
.sl-smash.is-empty { filter: grayscale(.7) brightness(.8); }
.sl-how { font-size: 12.5px; }
.shop-actions.is-locked #shop-open,
.shop-actions.is-locked #shop-ten { display: none; }
.vol-lock { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }

/* la garantie légendaire */
.shop-pity {
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: center;
}
.shop-pity b { color: #ffd36a; font-weight: 800; }
.shop-pity.is-close { color: #ffe9a8; animation: quest-nudge 2.6s ease-in-out infinite; }

/* la vitrine de la semaine */
.showcase-btn {
  position: absolute;
  right: max(6px, 1.5vw);
  top: 6px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 46, 124, .95), rgba(34, 26, 76, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(10, 6, 26, .85);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.showcase-btn[hidden] { display: none; }
.showcase-btn.is-ready { background: linear-gradient(180deg, #ffd36a, #f08a24); color: #3a1c00; }
.showcase-btn.is-ready .db-txt em { color: rgba(58, 28, 0, .85); }
.sc-star {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 17px;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #ffb020);
  color: #7a3a00;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.showcase-btn .tab-dot { top: -2px; left: auto; right: -2px; }
.btn-free {
  background: linear-gradient(180deg, #ffe08a, #f5a623);
  color: #3a1c00;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #9a5a00;
}
@media (max-width: 520px) {
  .showcase-btn { padding: 5px; }
  .showcase-btn .db-txt em { display: none; }
}
.fx-lite .shop-pity.is-close { animation: none; }

/* ==================================================================
   LA FICHE D'UN DISQUE : titre, artiste, album
   ================================================================== */
.trk-info {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 2px solid rgba(20, 14, 51, .9);
  border-radius: 50%;
  background: linear-gradient(180deg, #b69bff, #7a4ff0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 #3c1f86;
  color: #fff;
  cursor: pointer;
}
.trk-info .i { width: 15px; height: 15px; }

.tinfo { position: fixed; inset: 0; z-index: 9200; display: grid; place-items: end center; }
.tinfo[hidden] { display: none; }
.tinfo-scrim { position: absolute; inset: 0; background: rgba(4, 3, 12, .7); opacity: 0; transition: opacity .25s; }
.tinfo.is-on .tinfo-scrim { opacity: 1; }
.tinfo-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px calc(16px + var(--safe-b));
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(168, 85, 247, .22), transparent 60%),
    linear-gradient(180deg, #1c1542, #0e0a22);
  box-shadow: 0 -20px 60px -20px #000;
  transform: translateY(104%);
  transition: transform .36s cubic-bezier(.2, .9, .25, 1);
  user-select: text;
}
.tinfo.is-on .tinfo-panel { transform: none; }
@media (min-width: 760px) {
  .tinfo { place-items: center; }
  .tinfo-panel { border-radius: 22px; }
}
.tinfo-close { position: absolute; top: 10px; right: 10px; }
.tinfo-head { display: flex; gap: 14px; align-items: center; padding-right: 36px; }
.tinfo-cover { flex: 0 0 auto; width: 96px; aspect-ratio: 1; border-radius: 12px; background: #0a0a12 center / cover; box-shadow: 0 8px 20px -8px #000; }
.tinfo-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tinfo-id h2 { font-family: var(--font-display, inherit); font-weight: 400; font-size: 21px; line-height: 1.1; color: #fff; }
.tinfo-id p { color: var(--ink-2); font-weight: 700; }
.tinfo-tier {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--rc);
  color: #0b0b13;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tinfo-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tinfo-acts .btn { padding: 7px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tinfo-deezer { background: linear-gradient(180deg, #b27bff, #7a3cff); color: #fff; text-decoration: none; }
.tinfo-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.tinfo-tabs button {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-display, inherit);
  font-size: 15px;
  cursor: pointer;
}
.tinfo-tabs button.is-on { background: #efe8ff; color: #2a1760; }
.tinfo-body { overflow-y: auto; min-height: 180px; padding: 2px; }
.tinfo-body h3 { font-family: var(--font-display, inherit); font-weight: 400; font-size: 16px; color: #fff; margin: 14px 0 8px; }
.tinfo-list { display: grid; gap: 6px; }
.tinfo-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; font-size: 13.5px; }
.tinfo-row dt { color: var(--ink-3); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.tinfo-row dd { color: var(--ink); margin: 0; display: flex; align-items: center; gap: 8px; }
.tinfo-pop { flex: 0 0 110px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tinfo-pop i { display: block; height: 100%; background: linear-gradient(90deg, #7dd3fc, #c99bff); }
.tinfo-pop-n { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; }
.tinfo-artist, .tinfo-album { display: flex; gap: 14px; align-items: flex-start; }
.tinfo-avatar { flex: 0 0 auto; width: 84px; aspect-ratio: 1; border-radius: 50%; background: #0a0a12 center / cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.tinfo-albart { flex: 0 0 auto; width: 110px; aspect-ratio: 1; border-radius: 10px; background: #0a0a12 center / cover; }
.tinfo-artist .tinfo-list, .tinfo-album .tinfo-list { flex: 1; min-width: 0; }
.tinfo-artist .tinfo-row, .tinfo-album .tinfo-row { grid-template-columns: 110px 1fr; }
.tinfo-top { display: grid; gap: 4px; padding-left: 18px; font-size: 13.5px; color: var(--ink); }
.tinfo-top li.is-mine span { color: #ffd36a; }
.tinfo-top em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 6px; }
.tinfo-rels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tinfo-rel { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink-2); font-size: 11.5px; text-align: center; }
.tinfo-rel i { width: 100%; max-width: 70px; aspect-ratio: 1; border-radius: 50%; background: #0a0a12 center / cover; }
.tinfo-rel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tinfo-wait { color: var(--ink-3); }
@media (max-width: 420px) {
  .tinfo-row { grid-template-columns: 104px 1fr; }
  .tinfo-cover { width: 78px; }
  .tinfo-artist, .tinfo-album { flex-direction: column; align-items: center; }
}

/* La Découverte : un grand « ? » sur des pochettes qui défilent en fondu */
.pack-mystery { background: radial-gradient(circle at 50% 40%, #3a2a7a, #140d33); }
.pm-l {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
  filter: saturate(.9) blur(.5px);
}
.pm-l.is-on { opacity: .55; }
.pm-q {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: calc(var(--w, 250px) * .62);
  line-height: 1;
  color: #fff;
  text-shadow: 0 .04em 0 rgba(20, 14, 51, .9), 0 0 .3em rgba(200, 150, 255, .9);
  -webkit-text-stroke: .02em rgba(20, 14, 51, .9);
  z-index: 1;
}
.pack.has-mystery .pack-hero::after { z-index: 0; }
.fx-lite .pm-l { transition: none; }

/* l'édition Hall of Fame : un sceau or massif */
.seal-hof { background: linear-gradient(100deg, #fff1b8, #f5b82e 45%, #b8860b); color: #3a2400; }
.seal-hof::before { content: "♛"; }
.shop-lock.is-hof .sl-bar { display: none; }

/* ---------- l'écran Ouvrir sur téléphone : moins d'étages ---------- */
.btn-open.is-free { background: linear-gradient(180deg, #ffe9a8, #f5a623); }
.btn-open .free-n { font-weight: 800; }
@media (max-width: 560px) {
  /* le disque du jour et la vitrine deviennent deux pastilles rondes */
  .daily-btn, .showcase-btn { padding: 4px; gap: 0; }
  .daily-btn .db-txt, .showcase-btn .db-txt { display: none; }
  .daily-btn .db-streak { position: absolute; right: -6px; bottom: -6px; padding: 1px 5px; border-radius: 999px;
    background: #1b1540; font-size: 11px; box-shadow: 0 0 0 2px rgba(10, 6, 26, .95); }
  .db-disc, .sc-star { width: 34px; height: 34px; }
  .shop-pity { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 94vw; }
  .shop-lock { padding: 8px 10px; gap: 6px; }
  .sl-txt { font-size: 12.5px; }
}

/* ==================================================================
   LE HALL OF FAME : l'accueil se dore
   ================================================================== */
/* le fond doré couvre toute la page, pas seulement la vue */
body.hof-on main {
  background:
    radial-gradient(70% 45% at 50% 30%, rgba(255, 200, 70, .26), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(255, 170, 40, .16), transparent 70%),
    linear-gradient(180deg, rgba(90, 55, 0, .32), rgba(40, 22, 0, .12));
}
@keyframes hof-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
#view-open.is-hof .shop-name { color: #ffe08a; text-shadow: 0 3px 0 rgba(70, 40, 0, .9), 0 0 24px rgba(255, 200, 80, .6); }
.hof-deco { display: none; }
#view-open.is-hof .hof-deco {
  display: block;
  position: absolute;
  inset: -6% -4%;
  pointer-events: none;
  z-index: 0;
}
.hd-halo {
  position: absolute;
  left: 50%; top: 46%;
  width: 90%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18deg, rgba(255, 220, 120, .22) 24deg, transparent 34deg,
                                        transparent 90deg, rgba(255, 220, 120, .18) 100deg, transparent 112deg,
                                        transparent 180deg, rgba(255, 220, 120, .22) 192deg, transparent 202deg,
                                        transparent 270deg, rgba(255, 220, 120, .18) 280deg, transparent 292deg);
  animation: hd-spin 28s linear infinite;
}
.hd-halo.h2 { width: 60%; animation-duration: 18s; animation-direction: reverse; opacity: .8; }
@keyframes hd-spin { to { rotate: 360deg; } }
.hd-beam {
  position: absolute;
  left: 50%; top: -10%;
  width: 46%; height: 80%;
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(255, 236, 170, .35), transparent 80%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(6px);
  animation: hof-breathe 4s ease-in-out infinite;
}
.hd-trophy {
  position: absolute;
  width: 13%;
  max-width: 64px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(255, 200, 80, .6));
  animation: hd-float 5.5s ease-in-out infinite;
}
.hd-trophy svg { display: block; width: 100%; height: auto; }
.hd-trophy.t1 { left: 3%; top: 70%; rotate: -10deg; }
.hd-trophy.t2 { right: 4%; top: 66%; rotate: 8deg; animation-delay: -2s; width: 11%; }
.hd-trophy.t3 { left: 22%; top: 84%; rotate: 6deg; animation-delay: -3.5s; width: 8%; opacity: .85; }
@keyframes hd-float { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 8px; } }
.hd-disc {
  position: absolute;
  width: 16%;
  max-width: 78px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px rgba(20, 14, 51, .8), 0 8px 18px -6px #000;
  animation: hd-float 6.5s ease-in-out infinite, hd-turn 9s linear infinite;
}
.hd-disc::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1030 0 18%, #fff 20% 60%, #d9dee9 62%);
}
.hd-disc b {
  position: absolute;
  bottom: -16px;
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .12em;
  color: #fff6d6;
  text-shadow: 0 1px 0 #000;
  rotate: 0deg;
}
.hd-disc.is-plat {
  background:
    repeating-radial-gradient(circle, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px),
    conic-gradient(from 20deg, #f7f9ff, #aeb6c8, #ffffff, #8d96ab, #eef1f8, #a3abc0, #f7f9ff);
}
.hd-disc.is-diam {
  background:
    repeating-radial-gradient(circle, rgba(0, 40, 60, .12) 0 1px, transparent 1px 3px),
    conic-gradient(from 0deg, #e8fbff, #7fe3ff, #ffffff, #b58bff, #e8fbff, #6ad7ff, #ffffff, #e8fbff);
  box-shadow: 0 0 0 2px rgba(20, 14, 51, .8), 0 0 18px rgba(140, 230, 255, .7);
}
.hd-disc.d1 { right: 3%; top: 24%; }
.hd-disc.d2 { left: 3%; top: 26%; animation-delay: -1.5s, -3s; width: 13%; }
.hd-disc.d3 { right: 22%; top: 86%; animation-delay: -3s, -6s; width: 8%; opacity: .8; }
.hd-disc.d4 { right: 10%; top: 82%; animation-delay: -4.5s, -2s; width: 8%; opacity: .75; }
@keyframes hd-turn { to { rotate: 360deg; } }
.hd-glint {
  position: absolute;
  width: 12px; height: 12px;
  background: radial-gradient(circle, #fff 0 16%, transparent 18%),
              conic-gradient(from 45deg, transparent 0 20deg, #fff6d6 22deg 26deg, transparent 28deg 110deg, #fff6d6 112deg 116deg,
                             transparent 118deg 200deg, #fff6d6 202deg 206deg, transparent 208deg 290deg, #fff6d6 292deg 296deg, transparent 298deg);
  border-radius: 50%;
  opacity: 0;
  animation: pl-twinkle 2.6s ease-in-out infinite;
}
.hd-glint.g1 { left: 20%; top: 20%; }
.hd-glint.g2 { left: 78%; top: 14%; animation-delay: .3s; }
.hd-glint.g3 { left: 86%; top: 50%; animation-delay: .9s; }
.hd-glint.g4 { left: 8%; top: 58%; animation-delay: 1.2s; }
.hd-glint.g5 { left: 30%; top: 86%; animation-delay: 1.6s; }
.hd-glint.g6 { left: 66%; top: 88%; animation-delay: 2s; }
.hd-glint.g7 { left: 50%; top: 6%; animation-delay: .6s; }
.hd-glint.g8 { left: 92%; top: 76%; animation-delay: 1.4s; width: 8px; height: 8px; }
.hd-glint.g9 { left: 4%; top: 32%; animation-delay: 2.2s; width: 8px; height: 8px; }
.fx-lite .hof-deco * { animation: none !important; }
.fx-lite #view-open.is-hof::before { animation: none; }
.fx-lite .hd-glint { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .hof-deco * { animation: none !important; } }

@media (max-width: 560px) {
  #view-open.is-hof .hof-deco { inset: 0; }
  .hd-trophy { width: 11%; }
  .hd-disc { width: 12%; }
  .hd-disc b { display: none; }
  .hd-disc.d3, .hd-disc.d4, .hd-trophy.t3 { display: none; }
}
.shop-lock.is-hof { border-color: rgba(255, 200, 80, .7); background: linear-gradient(180deg, rgba(110, 70, 10, .9), rgba(50, 30, 6, .95)); }

/* les maillons qui passent par-dessus la tranche : plus sombres, plus petits */
.lk-wrap { opacity: .7; filter: brightness(.6); }
.padlock { margin-top: 12%; }

/* Les pictogrammes seuls prennent une largeur fixe, un peu plus étroite :
   le bouton Deezer garde toujours la place d'afficher son nom en entier. */
.card-actions { gap: .45em; }
.card-actions .act:not(.act-deezer) { flex: 0 0 2.9em !important; width: 2.9em !important; padding: 0; }
.act-deezer { min-width: max-content; }

/* « Propulsé par Deezer » : le logo vectoriel, net à toutes les tailles */
.dz-wordmark { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.dz-wordmark .i { width: 34px; height: 34px; color: #a238ff; }
.dz-wordmark b { font-family: var(--font-display, inherit); font-weight: 400; font-size: 30px; letter-spacing: -.01em; }
.powered-by .dz-wordmark { font-size: inherit; letter-spacing: 0; text-transform: none; color: #fff; }