:root{
  --c1:#ffffff;
  --c2:#bd6baa;
  --c3:#f4d6ff;

  --ink:#141421;
  --shadow: rgba(0,0,0,.30);

  --qLeft: 600px;
  --qTop: 40px;

  /* bas à y=800 => qTop(40)+qHeight=800 => qHeight=760 */
  --qWidth: 1140px;
  --qHeight: 760px;

  --gap: 40px;
  --radius: 22px;

  --boxBg: #f4d6ff;
  --boxTextDark: #1b1b24;
}

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

.root{ position:absolute; inset:0; background:transparent; }
.hidden{ display:none !important; }

/* Idle (optionnel) */
.idle{
  position:absolute;
  left: var(--qLeft);
  top: calc(var(--qTop) + 140px);
  width: var(--qWidth);
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(17, 18, 28, .55);
  border: 2px solid rgba(189,107,170,.35);
  box-shadow: 0 18px 34px var(--shadow);
  color: var(--c1);
}
.idleTitle{ font-size: 34px; font-weight: 1000; }
.idleSub{ margin-top: 8px; font-size: 18px; opacity: .85; }

/* Conteneur global */
.qWrap{
  position:absolute;
  left: var(--qLeft);
  top: var(--qTop);
  width: var(--qWidth);
  height: var(--qHeight);

  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

/* Mode panel: un seul encadré, pas de réponse */
.qWrap.panelMode{
  gap: 0;
}
.qWrap.panelMode .boxAnswer{
  display:none !important;
}

/* Boxes */
.box{
  border-radius: var(--radius);
  background: var(--boxBg);
  border: 4px solid rgba(189,107,170,.90);
  box-shadow: 0 18px 34px var(--shadow);
  overflow:hidden;
}

/* Question */
.boxQuestion{
  flex:1;
  padding: 20px;
  display:flex;
  flex-direction:column;
  min-height: 0;
}

/* HEADER */
.qHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.qCategory{
  flex:1;
  text-align:center;
  text-transform:uppercase;
  font-size:36px;
  font-weight:1000;
  letter-spacing:1.4px;
  color:var(--boxTextDark);
}

.qValue{
  min-width:120px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(189,107,170,.95);
  color:#fff;
  font-size:30px;
  font-weight:1000;
}

/* Zone contenu */
.qContent{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  margin-top: 18px;
  min-height: 0;
}

.qContent.noMedia{
  justify-content:center;
}

/* Prompt */
.qPrompt{
  border-radius:18px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  padding:18px 22px;
  font-size:36px;
  font-weight:950;
  line-height:1.2;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
  text-align:center;
  max-width:1000px;
  margin:0 auto;
  white-space: pre-line;
}
.qPrompt.hiddenPrompt{
  display:none !important;
}

/* MEDIA wrappers */
.mediaSingleWrap,
.skinsSingleWrap,
.skinsCompareWrap,
.panelWrap{
  flex:1;
  min-height: 0;
  margin-top: 18px;
  overflow:hidden;
}

/* Single media */
.mediaSingleWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:2px solid rgba(0,0,0,.08);
  padding:12px;
}

.mediaSingleWrap img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit:contain;
  border-radius:16px;
  display:block;
}

/* Skins */
.skinsSingleWrap{ display:flex; }
.skinsSingleWrap .imgBox{ width:100%; }

.skinsCompareWrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.imgBox{
  position:relative;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:2px solid rgba(0,0,0,.08);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:0;
}

.imgBox img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
  display:block;
}

.imgLabel{
  position:absolute;
  left:12px;
  top:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(189,107,170,.95);
  color:#fff;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.8px;
}

/* Réponse */
.boxAnswer{
  height:110px;
  padding:10px 20px;
  display:flex;
  min-height: 0;
}

.answerCenter{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  gap: 4px;
}

.answerText{
  font-size:64px;
  font-weight:1000;
  line-height:1.05;
  color:rgba(20,20,30,.92);
}
.answerText.muted{ color:rgba(20,20,30,.28); }

.answerExplain{
  font-size:18px;
  font-weight:900;
  margin-top:4px;
  color:rgba(20,20,30,.70);
}

/* ========================= */
/* PANEL (AMÉLIORÉ) */
/* ========================= */

/* Le panel doit “remplir” verticalement : */
.panelWrap{
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:2px solid rgba(0,0,0,.08);
  padding: 14px;
  display:flex;
  align-items:stretch;
}

/* La liste prend toute la hauteur disponible */
.panelList{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow:hidden;
}

/* Chaque ligne grandit pour remplir, au lieu d’être “petite” */
.panelRow{
  flex: 1 1 0;
  min-height: 0;

  border-radius:18px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.10);
  padding: 14px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.panelRow.hiddenRow{
  background: rgba(0,0,0,.04);
  color: rgba(20,20,30,.22);
  border-style:dashed;
}

.panelRow.revealedAll{
  background: rgba(0,0,0,.02);
  color: rgba(20,20,30,.40);
}

.panelLeft{
  display:flex;
  align-items:center;
  gap: 14px;
  overflow:hidden;
}

.panelRank{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size: 18px;

  background: rgba(189,107,170,.18);
  border: 1px solid rgba(189,107,170,.35);
  color: rgba(20,20,30,.78);
  flex: 0 0 auto;
}

.panelText{
  font-size: 28px;     /* <- plus lisible */
  font-weight: 1000;
  line-height: 1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 880px;
}

.panelPct{
  font-size: 28px;     /* <- plus lisible */
  font-weight: 1000;
  color: rgba(20,20,30,.86);
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   MODE ZOOM   (state.stage === "zoomskin")

   Remplace l'ancienne scène OBS ZOOM_SKIN et sa transformation de
   source. questions.js pose la classe .zoom sur .root dès que le
   stage vaut "zoomskin", et la retire sinon.

   Principe : on agrandit l'encart question, rien d'autre. Il garde
   son fond rose et son liseré, donc il reste nettement détaché du
   fond du stream. La barre réponse est masquée pour laisser toute
   la hauteur à l'image.

   GARDE-FOU CAMFRAMES
   Les cadres webcam occupent x = 39 à 523 px, et jusqu'à ~547 px
   quand le cadre actif affiche son halo jaune. --zLeft est calé à
   560 px : l'encart zoomé ne mord jamais dessus, quel que soit le
   joueur actif. Si tu descends --zLeft sous 560, tu passeras
   derrière les cams.

   Toutes les valeurs ci-dessous sont libres et n'affectent QUE le
   zoom. Le rendu normal reste piloté par --qLeft / --qTop /
   --qWidth / --qHeight en haut du fichier.
   ═══════════════════════════════════════════════════════════════ */

.root.zoom{

  /* Géométrie. 560 + 1320 = 1880  ->  40 px de marge à droite
                 40 + 1000 = 1040  ->  40 px de marge en bas      */
  --zLeft:    560px;
  --zTop:      40px;
  --zWidth:  1320px;
  --zHeight: 1000px;

  /* Barre réponse : none = masquée.
     Mets  flex  si tu veux la réafficher en zoom.                */
  --zAnswer:  none;

  /* Épaisseur du liseré rose autour de l'encart agrandi */
  --zBorder:    5px;

  /* Marge intérieure de l'encart */
  --zPadding:  26px;

  /* Tailles de texte, revues pour le grand format */
  --zCategorySize: 44px;
  --zValueSize:    36px;
  --zValueHeight:  70px;
  --zPromptSize:   42px;

  /* Comparaison des deux images après révélation */
  --zCompareGap:   18px;
  --zLabelSize:    16px;
  --zLabelPad:  8px 14px;
}

/* Pas de panneau d'attente en grand format */
.root.zoom .idle{ display:none !important; }

/* L'encart se repositionne et grandit. gap à 0 : il n'y a plus
   qu'un seul bloc, la barre réponse étant masquée. */
.root.zoom .qWrap{
  left:   var(--zLeft);
  top:    var(--zTop);
  width:  var(--zWidth);
  height: var(--zHeight);
  gap: 0;
}

/* La barre réponse sort du cadre */
.root.zoom .boxAnswer{ display: var(--zAnswer) !important; }

/* L'encart garde fond rose + liseré, simplement épaissi et
   avec un peu plus d'air à l'intérieur. */
.root.zoom .boxQuestion{
  border-width: var(--zBorder);
  padding: var(--zPadding);
}

/* En-tête et intitulé mis à l'échelle */
.root.zoom .qCategory{ font-size: var(--zCategorySize); }

.root.zoom .qValue{
  font-size: var(--zValueSize);
  height:    var(--zValueHeight);
  min-width: 150px;
}

.root.zoom .qPrompt{
  font-size: var(--zPromptSize);
  max-width: none;
}

/* Images : la grille de comparaison se resserre un peu pour
   gagner de la largeur utile sur chaque visuel. */
.root.zoom .skinsCompareWrap{ gap: var(--zCompareGap); }

.root.zoom .imgLabel{
  font-size: var(--zLabelSize);
  padding:   var(--zLabelPad);
}