:root{
  --frame:#bd6baa;   /* cadre + cartouche */
  --bgText:#ffffff;  /* texte */
  --strike:#ff2d2d;  /* croix rouges */

  /* ✅ actif */
  --activeFrame: rgba(255,211,92,.95);  /* jaune principal */
  --activeGlow:  rgba(255,211,92,.22);  /* glow doux */
}

html, body{
  margin:0;
  width:1920px;
  height:1080px;
  overflow:hidden;
  background:transparent;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stage{
  position:absolute;
  inset:0;
  background:transparent;
}

/* =========================
   CADRE CAM
   - Transparence au centre
   - Bordure 8px
   ========================= */
.camFrame{
  position:absolute;
  width:484px;
  height:278px;

  border:8px solid var(--frame);
  border-radius:18px;
  background:transparent;
  box-sizing:border-box;
  pointer-events:none;

  /* IMPORTANT: crée un contexte de stacking pour z-index */
  z-index: 0;

  /* ✅ transition douce */
  transition: border-color .12s ease, box-shadow .12s ease;
}

/* ✅ Actif = on remplace la bordure rose par la bordure jaune + glow léger */
.camFrame.active{
  border-color: var(--activeFrame);

  /* glow pro, pas trop fort */
  box-shadow:
    0 0 0 3px rgba(255,211,92,.12),
    0 0 18px 6px var(--activeGlow);
}

/*
  Gris translucide à l'intérieur (camera "out")
  IMPORTANT:
  - position absolute est relative au padding box (déjà à l’intérieur de la bordure)
  - donc on met inset:0 (sinon on crée un “gap”)
*/
.camFrame.lost::after{
  content:"";
  position:absolute;
  inset:0;                 /* PAS de marge inutile */
  border-radius:10px;      /* rayon interne = 18 - 8 = 10 */
  background: rgba(80, 80, 80, 0.55);
  backdrop-filter: blur(1px);
  z-index: 1;              /* sous le cartouche */
}

/* =========================
   CARTOUCHE BAS
   "à cheval" sur la cam
   ========================= */
.camFrame .label{
  position:absolute;
  left:18px;
  right:18px;
  bottom:-18px;              /* chevauche la cam */
  height:56px;

  background:var(--frame);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  gap:12px;

  box-shadow:0 10px 20px rgba(0,0,0,.22);

  z-index: 2;                /* AU-DESSUS du gris */
}

/* Bloc nom : le pseudo, et les pronoms dessous s'ils sont renseignés.
   Quand les pronoms sont vides, .pronouns:empty les retire du flux et
   le pseudo se recentre verticalement comme avant. */
.label .nameBlock{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
  max-width:280px;
}

.label .name{
  color:var(--bgText);
  font-weight:950;
  font-size:22px;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.label .pronouns{
  color:rgba(255,255,255,.80);
  font-weight:800;
  font-size:14px;
  line-height:1;
  letter-spacing:.4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Aucun pronom renseigné : rien ne s'affiche, aucun espace réservé */
.label .pronouns:empty{ display:none; }

.label .score{
  color:var(--bgText);
  font-weight:1000;
  font-size:42px;   /* plus gros */
  line-height:1;
}

/* 2 croix rouges AU CENTRE entre nom et score */
.label .strikes{
  flex:1;
  display:flex;
  justify-content:center;
  gap:14px;
}

/* Croix plus grosses */
.strike{
  width:48px;
  height:48px;
  border-radius:12px;
  position:relative;
  opacity:.20;               /* strike "off" */
}

.strike.on{ opacity:1; }

.strike::before,
.strike::after{
  content:"";
  position:absolute;
  left:21px;                 /* centré dans 48px */
  top:6px;
  width:6px;
  height:36px;
  background:var(--strike);
  border-radius:6px;
}

.strike::before{ transform:rotate(45deg); }
.strike::after{ transform:rotate(-45deg); }

/* =========================
   POSITIONS (espacement 58px)
   ========================= */
.camFrame.p1{ left:39px; top:66px; }
.camFrame.p2{ left:39px; top:400px; }
.camFrame.p3{ left:39px; top:736px; }