* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: transparent;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Rajdhani', sans-serif;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
}

/* La carte est positionnée où tu veux qu'elle apparaisse à l'écran (ex: coin haut-gauche).
   Ajuste left/top/width ici — le ratio hauteur/largeur s'adapte tout seul par catégorie. */
.card {
  position: absolute;
  left: 3%;
  top: 6%;
  width: 26%;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .35s ease, transform .35s ease;
  /* Le texte à l'intérieur est dimensionné en cqw (% de la largeur de LA CARTE, pas de la
     fenêtre) — comme ça il reste à la bonne taille peu importe où/comment la carte est
     affichée (overlay OBS en 26% de large, aperçu du panel en 55%, etc.). */
  container-type: inline-size;
}
.card.visible { opacity: 1; transform: translateX(0); }

/* Dans l'aperçu du panel de test uniquement : carte centrée et agrandie pour mieux voir
   le rendu (la position/taille réelle sur l'overlay OBS n'est pas touchée). */
.card.preview-mode {
  left: 50%; top: 50%; width: 55%;
  transform: translate(-50%, -50%) translateX(-40px);
}
.card.preview-mode.visible { transform: translate(-50%, -50%) translateX(0); }
.card.preview-mode.cat-follow { width: 68%; }

.card img#cardBg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Positions génériques (cartes "barre simple" : Raid/Bits/ReSub/Sub/SubPrime/GiftSub/Donation) ──
   Mesurées au pixel sur les fichiers réels (barre hexagonale sous le titre). */
.pseudo {
  position: absolute;
  left: 57%; top: 78%; width: 19%; height: 18%;
  display: flex; align-items: center;
  font-weight: 800; font-size: 3.6cqw; color: #fff;
  text-shadow: 0 0 8px rgba(56,189,248,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge {
  position: absolute;
  left: 77%; top: 78%; width: 10%; height: 18%;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5cqw;
  font-weight: 700; font-size: 2.8cqw; color: #93c5fd;
  white-space: nowrap;
}
.badge-icon {
  width: 3cqw; height: 3cqw; flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(147,197,253,.6));
}

/* ── HypeTrain (Début/En cours/Fin) : "LEVEL [n]" + barre de progression, mesuré sur HypeDebut.png ── */
.level-box {
  position: absolute; display: none;
  left: 64.5%; top: 70%; width: 9%; height: 16%;
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 3.6cqw; color: #fff;
}
.progress-track {
  position: absolute; display: none;
  left: 74.5%; top: 73%; width: 20.5%; height: 10%;
  background: rgba(56,189,248,.15); border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
  box-shadow: 0 0 8px #38bdf8;
  transition: width .6s ease;
}

/* ── Follow (bannière large, layout différent) — mesuré sur Follow.png ── */
.card.cat-follow { width: 34%; }
.card.cat-follow .pseudo { left: 45%; top: 73%; width: 38%; height: 15%; font-size: 5cqw; }
.card.cat-follow .badge { display: none; }

/* ── HypeTrain : élargir un peu la carte, cacher pseudo/badge ── */
.card.cat-hype .pseudo, .card.cat-hype .badge { display: none; }
.card.cat-hype .level-box, .card.cat-hype .progress-track { display: flex; }
.card.cat-hypeprogress .progress-track { display: block; }