/* tv.css - Styles écran TV 1920×1080 */

/* ---- Conteneur maître ---- */
#tv-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  background: var(--color-bg);
  font-size: 18px;
}

/* ---- Version (bas-droite, discrète) ---- */
.menu-version {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.25);
  font-family: var(--font-body);
  z-index: 9999;
  pointer-events: none;
}

/* ---- Écrans (sections) ---- */
.tv-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ========================================
   HOME — Écran d'accueil avant création
======================================== */
#screen-home {
  overflow: hidden;
}

.home-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home-perso {
  position: absolute;
  bottom: -18px;
  height: 860px;
  object-fit: contain;
  z-index: 1;
}

.home-perso-left {
  left: -220px;
  transform-origin: bottom left;
  animation: perso-breathe 4s ease-in-out infinite;
}

.home-perso-right {
  right: -220px;
  transform-origin: bottom right;
  animation: perso-breathe 4s ease-in-out infinite;
}

@keyframes perso-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.018); }
}

.home-titre-img {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  object-fit: contain;
  z-index: 2;
}

#home-options {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}

#home-create-btn {
  font-size: 2.2rem;
  padding: 28px 80px;
  background: linear-gradient(135deg, var(--color-primary), #5b21b6);
  animation: pulse 2.5s ease infinite;
}

.home-options-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.option-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.option-label {
  font-size: 1rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.option-btns {
  display: flex;
  gap: 10px;
}

.option-btn {
  padding: 10px 22px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.option-btn.active,
.option-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ========================================
   LOBBY
======================================== */
#screen-lobby {
  overflow: hidden;
}

.lobby-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* QR code : position exacte (170,546), taille 195×195 */
#lobby-qr-container {
  position: absolute;
  left: 200px;
  top: 630px;
  width: 210px;
  height: 210px;
  z-index: 1;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

#lobby-qr-container img,
#lobby-qr-container canvas {
  display: block;
  width: 210px !important;
  height: 210px !important;
}

/* Code salle : centré dans (165,765)→(370,791) */
#lobby-code {
  position: absolute;
  left: 200px;
  top: 870px;
  width: 205px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ff4dd8;
  text-shadow: 0 0 12px rgba(255, 77, 216, 0.7);
}

#lobby-url { display: none; }

/* Compteur joueurs (overlay badge top-right) */
#lobby-player-count-wrap {
  position: absolute;
  right: 150px;
  top: 98px;
  z-index: 1;
}

#lobby-player-count {
  font-size: 50px;
  font-weight: 900;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}

/* Grille joueurs : 2 rangées × 4 colonnes de polaroids */
#lobby-players-grid {
  position: absolute;
  left: 680px;
  top: 295px;
  display: grid;
  grid-template-columns: repeat(4, 230px);
  gap: 30px;
  align-content: start;
  z-index: 1;
}

.lobby-player-card {
  position: relative;
  width: 230px;
  height: 280px;
  cursor: default;
  animation: card-drop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Frame diapo par-dessus l'image */
.lobby-player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/diapo.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Zone photo : positionnée dans le trou du diapo */
.polaroid-photo {
  position: absolute;
  top: 20px;
  left: 16px;
  right: 24px;
  bottom: 72px;
  overflow: hidden;
  z-index: 0;
}

.lobby-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pseudo sur la zone brushstroke */
.polaroid-pseudo {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  left: 6px;
  right: 14px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 900;
  color: #000;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-title);
}

.lobby-player-card .kick-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: rgba(220, 38, 38, 0.92);
  border: none;
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
  padding: 3px 8px;
  border-radius: 50px;
  z-index: 2;
}

.lobby-player-card:hover .kick-btn { opacity: 1; }

/* ---- Animation dépôt de carte ---- */
@keyframes card-drop {
  0% {
    transform: translateY(-180px) scale(1.8) rotate(0deg);
    opacity: 0;
  }
  62% {
    transform: translateY(16px) scale(0.95) rotate(var(--card-tilt, 0deg));
    opacity: 1;
  }
  80% {
    transform: translateY(-7px) scale(1.03) rotate(var(--card-tilt, 0deg));
  }
  100% {
    transform: translateY(0) scale(1) rotate(var(--card-tilt, 0deg));
    opacity: 1;
  }
}

#lobby-footer {
  position: absolute;
  bottom: 28px;
  right: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  z-index: 1;
}

#lobby-start-hint {
  position: absolute;
  left: 920px;
  top: 170px;
  font-size: 30px;
  color: #a855f7;
  background: rgba(0,0,0,0.4);
  padding: 8px 20px;
  border-radius: 40px;
  white-space: nowrap;
  animation: hint-blink 2.5s ease-in-out infinite;
}

@keyframes hint-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

#lobby-start-hint.ready {
  color: #a855f7;
  animation: pulse 1.8s ease infinite;
}

#btn-start-game {
  font-size: 1.6rem;
  padding: 14px 40px;
  background: var(--color-success, #22c55e);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: pulse 1.4s ease infinite;
  transition: transform 0.1s;
}

#btn-start-game:hover {
  transform: scale(1.04);
}

/* ========================================
   DÉMARRAGE
======================================== */
#screen-starting {
  align-items: center;
  justify-content: center;
  gap: 48px;
  background: radial-gradient(ellipse at center, #1e1040 0%, var(--color-bg) 65%);
}

#starting-title {
  font-size: 8rem;
  color: var(--color-white);
  animation: bounce-in 0.7s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

#starting-subtitle {
  font-size: 2.8rem;
  color: var(--color-text-muted);
  animation: fadeInUp 0.5s ease 0.3s both;
}

#starting-players-preview {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.5s ease 0.5s both;
}

/* ========================================
   INTRO MANCHE
======================================== */
#screen-round-intro {
  align-items: center;
  justify-content: center;
  gap: 40px;
}

#round-number-label {
  font-size: 2.2rem;
  color: var(--color-text-muted);
  letter-spacing: 6px;
  text-transform: uppercase;
  animation: fadeInUp 0.4s ease both;
}

#round-theme-icon {
  font-size: 10rem;
  animation: bounce-in 0.6s ease 0.15s both;
  line-height: 1;
}

#round-theme-label {
  font-size: 6rem;
  font-weight: 900;
  animation: fadeInUp 0.5s ease 0.3s both;
  text-align: center;
  max-width: 1600px;
}

/* ========================================
   QUESTION
======================================== */
#screen-question {
  position: absolute;
  inset: 0;
  background: #06080f;
}

/* Cadre décoratif (ex-fond) — élément à part : z0, donc devant la boîte
   noire #question-bg-image (z-1) et derrière l'UI (z auto) */
#question-frame-bg {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Numéro de question — centré sur x=890, top=100 */
#question-number-area {
  position: absolute;
  right: 790px;
  top: 48px;
  width: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#question-type-badge {
  font-size: 1rem;
  padding: 8px 24px;
  transform: translate(-250px, -10px);
}

#question-progress {
  color: var(--color-text-muted);
  font-size: 3.0rem;
  font-weight: 600;
}

/* Image LEGENDE — position 128,264 taille 460×345 */
#question-image-block {
  position: absolute;
  left: 128px;
  top: 264px;
  width: 460px;
  height: 345px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#question-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fadeIn 0.4s ease both;
  max-height: none;
  max-width: none;
}

/* Zone texte — centre (608–1170, 160–800) */
#question-text-block {
  position: absolute;
  left: 608px;
  top: 160px;
  width: 562px;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

#question-text {
  font-size: 3.4rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.35;
  animation: fadeInUp 0.5s ease both;
}

/* Image de fond ou cadre noir — masqué par défaut, visible en mode VOTE */
#question-bg-image {
  display: none;
  position: absolute;
  left: 147px;
  top: 294px;
  width: 526px;
  height: 408px;
  background: #000;
  border-radius: 0;
  overflow: hidden;
  z-index: -1;
  transform: rotate(-1.3deg);
}
#question-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#question-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 24, 0.65);
  border-radius: inherit;
}
#question-bg-image.has-image::after {
  display: none;
}
/* Affiché en mode VOTE (cadre noir même sans image) ET dès qu'une image
   est présente, quel que soit le type (SELFIE/DESSIN/ESTIMATION inclus). */
#screen-question.vote-mode #question-bg-image,
#question-bg-image.has-image {
  display: block;
}

/* Avec visuel hors mode VOTE : le texte se place entre le cadre polaroïd
   (x 120–700) et le panneau des joueurs (x 1356), sans chevaucher l'image. */
#screen-question.has-visual:not(.vote-mode) #question-text-block {
  left: 736px;
  width: 596px;
}

/* Label "LA QUESTION" — masqué par défaut, visible en mode VOTE */
#question-vote-label {
  display: none;
  position: absolute;
  left: 728px;
  top: 292px;
  width: 602px;
  object-fit: contain;
  pointer-events: none;
}
#screen-question.vote-mode #question-vote-label {
  display: block;
  left: 778px;
}

/* Mode VOTE : panel joueurs sans cadre visuel */
#screen-question.vote-mode #question-players-panel {
  background: none;
  border: none;
  backdrop-filter: none;
  border-radius: 0;
  top: 196px;
  left: 1456px;
  width: 383px;
}
#screen-question.vote-mode .qp-title {
  display: none;
}
#screen-question.vote-mode .qp-player-row {
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 24px;
  padding-right: 24px;
  grid-template-columns: 59px 1fr auto;
}
#screen-question.vote-mode .qp-avatar {
  width: 59px;
  height: 59px;
}
#screen-question.vote-mode .qp-status {
  font-size: 1.2rem;
  padding: 5px 12px;
}

/* Mode VOTE : cadre ancré sous le label image, pousse vers le bas */
#screen-question.vote-mode #question-text-block {
  left: 728px;
  top: 375px;
  transform: none;
  width: 702px;
  height: auto;
  max-height: 510px;
}

/* Panel joueurs droite — position 1190,173 taille 407×575 */
#question-players-panel {
  position: absolute;
  left: 1356px;
  top: 120px;
  width: 483px;
  height: 743px;
  background: rgba(13,15,26,0.78);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.qp-title {
  padding: 20px 16px;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  background: rgba(124,58,237,0.25);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  flex-shrink: 0;
}

#question-players-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.qp-player-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}

.qp-player-row:last-child { border-bottom: none; }

.qp-player-row.voted-row { background: rgba(34,197,94,0.06); }

.qp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.15);
}

.qp-pseudo {
  font-size: 1.75rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.qp-status {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.qp-status.waiting {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.4);
}

.qp-status.voted {
  background: rgba(34,197,94,0.2);
  color: var(--color-success);
}

/* Barre de progression timer — position 450,813 taille 1100×32 */
#question-timer-bar-wrap {
  position: absolute;
  left: 522px;
  top: 923px;
  width: 1292px;
  height: 36px;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

#question-timer-bar {
  height: 100%;
  width: 100%;
  border-radius: 16px;
  background: #22c55e;
  transition: width 0.25s linear, background 0.4s;
}

#question-timer-bar.urgent { background: #ef4444; }

/* ========================================
   PHASE DE VOTE TV
======================================== */
#screen-vote {
  padding: 36px 80px;
  gap: 28px;
}

#vote-title {
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-accent);
  text-align: center;
  animation: bounce-in 0.5s ease both;
}

#vote-submissions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  flex: 1;
}

.vote-submission-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--color-border);
  animation: fadeInUp 0.4s ease both;
  transition: border-color var(--transition-med);
  overflow: hidden;
}

.vote-submission-letter {
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-accent);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,158,11,0.12);
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  flex-shrink: 0;
}

.vote-submission-card img {
  max-width: 100%;
  max-height: 240px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.vote-submission-label {
  font-size: 1.6rem;
  font-style: italic;
  text-align: center;
  color: var(--color-text);
  line-height: 1.4;
}

/* Mode texte (LEGENDE) : lignes lisibles, lettre à gauche du texte */
#vote-submissions-grid.text-mode {
  align-content: center;
  gap: 18px;
}
#vote-submissions-grid.text-mode .vote-submission-card {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
}
#vote-submissions-grid.text-mode .vote-submission-label {
  flex: 1;
  margin: 0;
  text-align: left;
}

/* ========================================
   REVEAL TV
======================================== */
#screen-reveal {
  padding: 36px 80px;
  gap: 24px;
  align-items: center;
  overflow: hidden;
}

#reveal-title {
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--color-accent);
  animation: bounce-in 0.6s ease both;
  text-align: center;
}

/* Reveal VOTE — joueur(s) le(s) plus voté(s) (plusieurs en cas d'égalité) */
#reveal-top-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.reveal-vote-winners {
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: flex-end;
}

.reveal-vote-winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.reveal-vote-winner .player-avatar {
  width: 220px;
  height: 220px;
  border: 8px solid gold;
  box-shadow: 0 0 60px rgba(255,215,0,0.6);
  animation: flash-gold 2s ease infinite;
}

.reveal-top-pseudo {
  font-size: 3.5rem;
  font-weight: 900;
  text-align: center;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reveal-top-player.is-tie .reveal-top-pseudo { font-size: 2.6rem; }

.reveal-vote-count {
  font-size: 1.8rem;
  color: var(--color-text-muted);
}

/* Bandeau « Égalité ! » (VOTE et soumissions) */
.reveal-tie-label {
  padding: 4px 28px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #1a1205;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Reveal ESTIMATION */
#reveal-correct-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 48px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 3px solid var(--color-accent);
}

#reveal-correct-answer .answer-label {
  font-size: 1.6rem;
  color: var(--color-text-muted);
}

.correct-value {
  font-size: 5rem;
  font-weight: 900;
  color: var(--color-accent);
  animation: bounce-in-down 0.7s ease both;
}

/* ========================================
   REVEAL SELFIE / DESSIN / LEGENDE — soumission(s) gagnante(s)
   Polaroid posé sous le titre, auteur + votes en dessous. Les autres
   soumissions s'affichent en petit (levée de l'anonymat).
======================================== */
#reveal-winners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  z-index: 4;
}

.reveal-winners-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reveal-winners-row {
  display: flex;
  gap: 44px;
  justify-content: center;
  align-items: flex-start;
}

/* Avant la révélation : cartes « face cachée » (le suspense) */
.reveal-winners-row.is-hidden { visibility: hidden; }
.reveal-winners-row.reveal-winner-pop {
  animation: reveal-winner-pop 0.85s cubic-bezier(0.18, 1.3, 0.4, 1);
}

.reveal-winner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reveal-winner-crown {
  position: absolute;
  top: -34px;
  right: -22px;
  font-size: 3.4rem;
  transform: rotate(18deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
  z-index: 2;
}

/* Polaroid blanc (même langage visuel que le lobby) */
.reveal-winner-polaroid {
  background: #fff;
  padding: 12px 12px 14px;
  border-radius: 6px;
  transform: rotate(-2deg);
  box-shadow: 0 0 0 5px gold, 0 0 60px rgba(255, 215, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.reveal-winner-img {
  display: block;
  width: 400px;
  height: 300px;
  object-fit: contain;
  background: #f4f1ea;
  border-radius: 3px;
}

/* LEGENDE : image de la question + légende manuscrite (ou bulle seule) */
.reveal-winner-polaroid.is-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 640px;
}

.reveal-winner-legend-img {
  display: block;
  width: 400px;
  height: 220px;
  object-fit: cover;
  border-radius: 3px;
}

.reveal-winner-caption {
  margin: 0;
  padding: 6px 14px 2px;
  max-width: 600px;
  font-family: 'Caveat', 'Nunito', cursive;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #1d1d2b;
  overflow-wrap: break-word;
}

/* Plusieurs gagnants : cartes plus compactes */
.reveal-winners-row[data-count="2"] .reveal-winner-img { width: 340px; height: 255px; }
.reveal-winners-row[data-count="3"] .reveal-winner-img { width: 290px; height: 218px; }
.reveal-winners-row[data-count="2"] .reveal-winner-legend-img { width: 340px; height: 190px; }
.reveal-winners-row[data-count="3"] .reveal-winner-legend-img { width: 290px; height: 160px; }
.reveal-winners-row[data-count="3"] .reveal-winner-polaroid.is-caption { max-width: 420px; }

.reveal-winner-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--radius-full);
  background: rgba(8, 11, 24, 0.82);
  border: 2px solid rgba(255, 215, 0, 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

.reveal-winner-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid gold;
}

.reveal-winner-who {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.reveal-winner-by {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.reveal-winner-pseudo {
  font-size: 2rem;
  font-weight: 900;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reveal-winner-votes {
  padding: 4px 16px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #1a1205;
  font-size: 1.5rem;
  font-weight: 900;
  white-space: nowrap;
}

.reveal-winners-empty {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-align: center;
}

/* Bandeau des autres soumissions (auteur + votes) */
.reveal-others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1600px;
}

.reveal-other-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  padding: 6px 14px 6px 6px;
  border-radius: 12px;
  background: rgba(8, 11, 24, 0.78);
  border: 1px solid var(--color-border);
}

.reveal-other-img {
  width: 64px;
  height: 48px;
  object-fit: contain;
  background: #f4f1ea;
  border-radius: 6px;
  flex-shrink: 0;
}

.reveal-other-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.1rem;
  font-style: italic;
}

.reveal-other-meta {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reveal-other-meta strong { color: var(--color-text); }

/* Gains : rangée de joueurs posée SUR la table en bois (moitié basse du décor).
   Sous chaque avatar, les jetons des points gagnés tombent du ciel et
   rebondissent sur la table. Positionné en absolu pour viser la table. */
#reveal-scores-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-top: auto;          /* pousse la rangée en bas ET réserve la place au-dessus (pas de chevauchement) */
  padding: 0 80px 120px;     /* remonte les joueurs sur le plateau de la table */
  z-index: 3;
}

.gain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 168px;
  animation: fadeInUp 0.4s ease both;
}

/* Ombre de contact elliptique : ancre visuellement le joueur sur la table */
.gain-card::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 28px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  z-index: -1;
}

/* Photo (selfie) du joueur + badge score par-dessus */
.gain-photo {
  position: relative;
}

.gain-avatar {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6);
  display: block;
}

.gain-pseudo {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Score gagné : badge posé PAR-DESSUS la photo, en haut */
.gain-total {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 18px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #1a1205;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/* Zone où atterrissent les jetons : en flux sous l'avatar/pseudo, posée sur
   la table. Chaque jeton tombe du ciel et rebondit dans cet emplacement. */
.gain-tokens {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
  min-height: 96px;          /* réserve la place pour éviter tout saut de mise en page */
}

/* Jeton rond style poker (anneau cranté + reflet) */
.gain-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 6px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #2a1c00;
  background: radial-gradient(circle at 50% 36%, #ffe79a 0%, #ffcb3d 46%, #e8a200 100%);
  border: 5px dashed rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-300px) scale(0.6) rotate(-14deg);
  animation: token-toss 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gain-token.token-bonus {
  color: #06240f;
  background: radial-gradient(circle at 50% 36%, #b6f5c8 0%, #34d36b 46%, #15a04a 100%);
}

.gain-token.token-joker {
  color: #2a1c00;
  font-size: 1.15rem;
  white-space: normal;
  background: radial-gradient(circle at 50% 36%, #fff1c2 0%, #ffd54a 42%, #ff9d00 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 26px rgba(255, 196, 0, 0.8), 0 10px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* Tombe du ciel, premier contact sur la table, puis deux rebonds amortis */
@keyframes token-toss {
  0%   { opacity: 0; transform: translateY(-300px) scale(0.7) rotate(-14deg); }
  40%  { opacity: 1; transform: translateY(0)    scale(1)    rotate(3deg); }
  56%  { transform: translateY(-48px) scale(1.05) rotate(-2deg); }
  72%  { transform: translateY(0)    scale(1)    rotate(1deg); }
  86%  { transform: translateY(-16px) scale(1.02) rotate(0); }
  100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0); }
}

/* ========================================
   SCORES INTERMÉDIAIRES
======================================== */
#screen-question-scores {
  align-items: center;
  justify-content: center;
  gap: 40px;
}

#inline-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 1000px;
}

.inline-score-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 22px 40px;
  background: var(--color-surface);
  border-radius: var(--radius-lg, 18px);
  border: 2px solid var(--color-border);
  animation: fadeInUp 0.4s ease both;
}

.inline-score-rank {
  font-size: 3rem;
  font-weight: 900;
  width: 70px;
  text-align: center;
  color: var(--color-accent);
}

.inline-score-avatar {
  width: 92px;
  height: 92px;
}

.inline-score-pseudo {
  flex: 1;
  font-size: 2.6rem;
  font-weight: 700;
}

.inline-score-value {
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-accent);
}

/* ========================================
   SCOREBOARD LATÉRAL
======================================== */
#tv-scoreboard {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
  max-width: 320px;
  z-index: 50;
  pointer-events: none;
}

.scoreboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(13,15,26,0.88);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  transition: background var(--transition-med);
}

.scoreboard-row.rank-top {
  background: rgba(124,58,237,0.2);
  border-color: var(--color-primary);
}

.scoreboard-rank {
  font-size: 1.3rem;
  font-weight: 900;
  width: 30px;
  text-align: center;
  color: var(--color-accent);
}

.scoreboard-avatar {
  width: 44px;
  height: 44px;
  border-width: 2px;
}

.scoreboard-pseudo {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-score {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--color-accent);
}

/* Phase de vote : coche des joueurs ayant voté */
.scoreboard-row.has-voted { border-color: var(--color-success); }
.scoreboard-row.has-voted .scoreboard-pseudo::after {
  content: " ✓";
  color: var(--color-success);
}

/* ========================================
   PODIUM MANCHE / GAME OVER
======================================== */
#screen-round-podium,
#screen-game-over {
  padding: 40px 80px;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

#podium-title,
#game-over-title {
  font-size: 5.5rem;
  font-weight: 900;
  animation: bounce-in 0.6s ease both;
  text-align: center;
}

#game-over-winner {
  font-size: 2.8rem;
  color: var(--color-accent);
  animation: fadeInUp 0.5s ease 0.3s both;
  text-align: center;
}

.podium-places {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.podium-crown {
  font-size: 3rem;
  animation: bounce-in 0.5s ease 0.4s both;
}

.podium-place .player-avatar {
  border-color: var(--color-text-muted);
}

.podium-place.rank-1 .player-avatar {
  width: 200px;
  height: 200px;
  border-color: gold;
  border-width: 6px;
  box-shadow: 0 0 60px rgba(255,215,0,0.5);
  animation: flash-gold 3s ease infinite;
}

.podium-place.rank-2 .player-avatar {
  width: 160px;
  height: 160px;
  border-color: silver;
  border-width: 5px;
  box-shadow: 0 0 30px rgba(192,192,192,0.4);
}

.podium-place.rank-3 .player-avatar {
  width: 130px;
  height: 130px;
  border-color: #cd7f32;
  border-width: 4px;
  box-shadow: 0 0 24px rgba(205,127,50,0.3);
}

.podium-pseudo {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-platform {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px 32px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 1.5rem;
  font-weight: 900;
  min-width: 200px;
}

.platform-1 {
  background: linear-gradient(135deg, #f5c842, #d4a017);
  color: #0d0f1a;
  min-height: 140px;
}

.platform-2 {
  background: linear-gradient(135deg, #c0c0c0, #8a8a8a);
  color: #0d0f1a;
  min-height: 100px;
}

.platform-3 {
  background: linear-gradient(135deg, #cd7f32, #9a5e1d);
  color: white;
  min-height: 72px;
}

.platform-score {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 4px;
}

.podium-rest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  color: var(--color-text-muted);
  font-size: 1.2rem;
}

.podium-rest-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================================
   TIMER ANNEAU TV
======================================== */
#tv-timer {
  position: absolute;
  left: 886px;
  top: 772px; /* au-dessus de la barre de progression (y≈923) : plus de chevauchement */
  z-index: 50;
}

.timer-ring {
  position: relative;
  width: 126px;
  height: 126px;
  filter: none;
  background: #1e2030;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #7c3aed, 0 4px 12px rgba(0,0,0,0.6);
}

.timer-ring svg {
  transform: rotate(-90deg);
}

.timer-ring-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 8;
}

.timer-ring-circle-fg {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s linear;
}

/* Compteur de votes de la phase VOTE (sous le titre) */
.vote-progress {
  margin: 4px 0 12px;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-align: center;
}

.vote-progress.all-in {
  color: var(--color-success);
}

.timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--color-text);
}

/* Timer urgent */
.timer-ring.urgent .timer-text {
  color: var(--color-danger);
  animation: pulse 0.5s ease infinite;
}

/* ========================================
   ESTIMATION — Ligne de réponses
======================================== */
#estimation-line-container {
  width: 100%;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.estimation-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
}

.estimation-correct-marker {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.estimation-correct-line {
  width: 4px;
  bottom: 72px;
  background: var(--color-accent);
  border-radius: 2px;
  animation: bounce-in-down 0.7s ease both;
}

.estimation-player-marker {
  position: absolute;
  top: -48px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.estimation-player-marker img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.estimation-player-marker.close img {
  border-color: var(--color-success);
  box-shadow: 0 0 16px rgba(34,197,94,0.5);
}

.estimation-player-value {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.estimation-correct-value {
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ========================================
   CONFETTIS CANVAS
======================================== */
#confetti-canvas {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 999;
}

/* ========================================
   FOND ANIMÉ — semi-transparence (Wii U)
   Les backgrounds spécifiques per-screen sont overridés ici
   pour laisser les orbes de fond passer à travers.
   Note : les backgrounds inline posés par JS (round-intro)
   ont la priorité sur ce bloc donc le thème reste visible.
======================================== */
#screen-home     { background: rgba(18, 8, 45, 0.72) !important; }
#screen-lobby    { background: transparent !important; }
#screen-starting { background: rgba(8, 11, 24, 0.72) !important; }
/* #screen-question background géré par la règle principale ci-dessus */
#screen-vote     { background: rgba(8, 11, 24, 0.78) !important; }
/* Reveal : décor « tribunal » plein écran. Un voile sombre dégradé en haut
   garde le titre / gagnant lisibles ; la table en bois (moitié basse) reste
   claire pour accueillir les jetons. */
#screen-reveal {
  background:
    linear-gradient(to bottom,
      rgba(6, 8, 15, 0.62) 0%,
      rgba(6, 8, 15, 0.30) 28%,
      rgba(6, 8, 15, 0.00) 50%),
    url('/assets/images/image_distribution_points.png') center / cover no-repeat !important;
}
#screen-question-scores { background: rgba(8, 11, 24, 0.78) !important; }
#screen-round-podium    { background: rgba(8, 11, 24, 0.78) !important; }
#screen-game-over       { background: rgba(8, 11, 24, 0.78) !important; }

/* ---- Grille diagonale — override TV (plus visible, plus rapide) ---- */
#tv-root .bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  animation-duration: 4s;
}

/* ========================================
   CARTE TYPE DE JEU
======================================== */
#screen-game-type-card { gap: 18px; }
#game-type-eyebrow {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
#game-type-label {
  font-size: 6rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--color-accent);
  text-shadow: 0 6px 40px rgba(124,58,237,0.55);
  animation: gtPop .6s cubic-bezier(.2,1.4,.4,1) both;
}
#game-type-sub { font-size: 1.8rem; color: var(--color-text-muted); }
@keyframes gtPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ========================================
   CAPTURE SELFIE TV — polaroids
======================================== */
#screen-selfie-capture { gap: 20px; padding: 40px; }
#selfie-capture-tv-title { font-size: 3rem; font-weight: 900; }
#selfie-capture-tv-sub { font-size: 1.5rem; color: var(--color-text-muted); }
#selfie-capture-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: flex-end;
  max-width: 1500px;
}
#selfie-capture-progress { font-size: 1.6rem; font-weight: 800; color: var(--color-accent); }

.selfie-polaroid {
  background: #fff;
  padding: 10px 10px 6px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s, filter .3s;
  animation: polaroidIn .4s ease both;
}
.selfie-polaroid.pending { filter: grayscale(0.7) brightness(0.7); }
.selfie-polaroid.ready { filter: none; transform: rotate(var(--tilt, 0deg)) scale(1.04); }
.selfie-polaroid-photo {
  position: relative;
  width: 170px;
  height: 128px;
  border-radius: 3px;
  overflow: hidden;
  background: #111;
}
.selfie-polaroid-photo img { width: 100%; height: 100%; object-fit: cover; }
.selfie-polaroid-wait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  background: rgba(0,0,0,0.35);
}
.selfie-polaroid.ready .selfie-polaroid-wait { display: none; }
.selfie-polaroid-name {
  display: block;
  text-align: center;
  color: #222;
  font-weight: 800;
  font-size: 1.1rem;
  margin-top: 6px;
  font-family: 'Caveat', 'Nunito', cursive;
}
@keyframes polaroidIn {
  from { transform: rotate(var(--tilt,0deg)) translateY(20px); opacity: 0; }
  to   { transform: rotate(var(--tilt,0deg)) translateY(0); opacity: 1; }
}

/* ========================================
   BANNIÈRE SUJET — intro de manche
======================================== */
#round-subject-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 14px 26px;
  border-radius: 60px;
  background: rgba(255,215,0,0.12);
  border: 2px solid rgba(255,215,0,0.5);
  font-size: 1.7rem;
}
#round-subject-banner img {
  width: 70px; height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid gold;
}

/* ========================================
   REVEAL — qui a voté pour qui
======================================== */
#reveal-votes-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: center;
  max-width: 1400px;
  margin: 16px auto;
}
.vote-breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  padding: 14px 16px;
  border-radius: 16px;
}
.vb-voter-name {
  font-size: 1.5rem;
  font-weight: 900;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-vote-photo {
  width: 150px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0f1c;
  border: 3px solid var(--color-accent);
}
.vb-vote-photo img { width: 100%; height: 100%; object-fit: cover; }
.vb-target-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Indicateur « prêts à continuer » sur l'écran scores */
#scores-continue-hint {
  margin-top: 24px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-muted);
}
#scores-ready-count { color: var(--color-accent); }

/* ========================================
   BOUTON ARRÊTER + MODAL DE CONFIRMATION
======================================== */
#tv-stop-btn {
  position: absolute;
  top: 36px;
  right: 40px;
  z-index: 600;
  padding: 10px 20px;
  border-radius: 40px;
  border: 2px solid rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.18);
  color: #ff6b6b;
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
#tv-stop-btn:hover { background: rgba(239,68,68,0.28); transform: scale(1.04); }

/* ----- Menu flottant (bulle ⋯) : retour accueil depuis tous les écrans ----- */
#tv-menu {
  position: absolute;
  top: 36px;
  left: 40px;
  z-index: 650;
}
#tv-menu-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(248,250,252,0.35);
  background: rgba(0,0,0,0.5);
  color: #f8fafc;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}
#tv-menu-btn:hover { background: rgba(168,85,247,0.55); transform: scale(1.06); }

#tv-menu-popover {
  position: absolute;
  top: 70px;
  left: 0;
  min-width: 280px;
  padding: 10px;
  border-radius: 16px;
  border: 2px solid var(--color-border, #2a2d42);
  background: var(--color-surface, #1a1d2e);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  animation: tv-menu-pop .12s ease;
}
@keyframes tv-menu-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#tv-menu-home {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #f8fafc;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
#tv-menu-home:hover { background: rgba(168,85,247,0.3); }

#tv-confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
}
.tv-modal-box {
  background: var(--color-surface, #1a1d2e);
  border: 2px solid var(--color-border);
  border-radius: 22px;
  padding: 48px 56px;
  text-align: center;
  max-width: 760px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: gtPop .35s cubic-bezier(.2,1.4,.4,1) both;
}
.tv-modal-title { font-size: 3.2rem; font-weight: 900; margin-bottom: 16px; }
.tv-modal-text { font-size: 1.7rem; color: var(--color-text-muted); margin-bottom: 36px; }
.tv-modal-actions { display: flex; gap: 24px; justify-content: center; }
.tv-modal-actions .btn { font-size: 1.6rem; padding: 16px 44px; }
.btn-danger {
  background: var(--color-danger, #ef4444);
  color: #fff;
  border: none;
}

/* =====================================================================
   DEBUG — cadres pointillés (activés via body.debug-layout)
   ===================================================================== */

/* Cadre réel (auto-dimensionné) */
body.debug-layout #question-text-block {
  outline: 2px dashed rgba(255, 80, 80, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 80, 80, 0.2);
}
body.debug-layout #question-text-block::before {
  content: "cadre question";
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 11px;
  font-family: monospace;
  color: rgba(255, 80, 80, 0.9);
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}

/* Zone maximale (fond translucide) */
body.debug-layout #screen-question.vote-mode #question-text-block::after {
  content: "zone max";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 590px;
  border: 1px dashed rgba(100, 180, 255, 0.4);
  background: rgba(100, 180, 255, 0.04);
  font-size: 11px;
  font-family: monospace;
  color: rgba(100, 180, 255, 0.6);
  display: flex;
  align-items: flex-start;
  padding: 4px 6px;
  pointer-events: none;
  box-sizing: border-box;
}
.btn-danger:hover { background: #dc2626; }

/* ========================================
   OVERLAY DE RECONNEXION (hors scale)
======================================== */
#tv-reconnect-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  background: rgba(12, 6, 32, 0.82);
  backdrop-filter: blur(6px);
}
#tv-reconnect-overlay.visible { display: flex; }
#tv-reconnect-overlay .reconnect-title {
  font-size: 3.4rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
}
#tv-reconnect-overlay .reconnect-text {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
.reconnect-spinner {
  width: 96px;
  height: 96px;
  border: 10px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--color-primary, #7c3aed);
  border-radius: 50%;
  animation: reconnect-spin 0.9s linear infinite;
}
@keyframes reconnect-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   COMPTEUR DE RÉPONSES « X / N » (panel question)
======================================== */
#qp-answered-count {
  display: inline-block;
  margin-left: 8px;
  color: var(--color-accent, #f59e0b);
  font-weight: 900;
  letter-spacing: 1px;
}
#qp-answered-count.all-in {
  color: var(--color-success, #22c55e);
}
#qp-answered-count.bump {
  animation: qp-count-bump 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes qp-count-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
/* En vote-mode, garder le bandeau visible (version compacte) pour afficher
   le compteur « X / N ont répondu » — feedback clé pour les spectateurs TV. */
#screen-question.vote-mode .qp-title {
  display: block;
  padding: 12px 16px;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

/* ========================================
   COMPTE À REBOURS DE LANCEMENT (écran starting)
======================================== */
#starting-countdown {
  margin-top: 36px;
  min-height: 220px;
  font-size: 13rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 50px var(--color-primary, #7c3aed), 0 8px 30px rgba(0, 0, 0, 0.5);
}
#starting-countdown.tick {
  animation: countdown-pop 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes countdown-pop {
  0%   { transform: scale(0.2); opacity: 0; }
  35%  { transform: scale(1.15); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.15; }
}

/* ========================================
   RÉVÉLATION DU GAGNANT (zoom-bounce dramatique)
======================================== */
#reveal-top-player.reveal-winner-pop {
  animation: reveal-winner-pop 0.85s cubic-bezier(0.18, 1.3, 0.4, 1);
}
@keyframes reveal-winner-pop {
  0%   { transform: scale(0.3) rotate(-6deg); opacity: 0; }
  55%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  75%  { transform: scale(0.97) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Sécurise le rendu du texte de question (mots très longs, overflow) */
#question-text {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* ========================================
   TOASTS TV — erreurs serveur, (dé)connexions
   Gros caractères : lisibles depuis le canapé (~3 m)
======================================== */
#tv-toast-stack {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 9000;
  pointer-events: none;
}

.tv-toast {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1400px;
  padding: 18px 40px 18px 28px;
  border-radius: var(--radius-full);
  background: rgba(13, 15, 26, 0.94);
  border: 3px solid var(--color-primary);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  color: var(--color-text);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  animation: tv-toast-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tv-toast.leaving {
  animation: tv-toast-out 0.4s ease both;
}

.tv-toast-icon { font-size: 2.4rem; flex-shrink: 0; }
.tv-toast-text { overflow-wrap: break-word; }

.tv-toast-error   { border-color: var(--color-danger);  background: rgba(60, 10, 16, 0.95); }
.tv-toast-warn    { border-color: var(--color-accent); }
.tv-toast-success { border-color: var(--color-success); }

@keyframes tv-toast-in {
  from { opacity: 0; transform: translateY(-40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tv-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-30px); }
}

/* ========================================
   JOUEURS DÉCONNECTÉS — grisé + icône 📵
======================================== */
/* Lobby : carte diapo */
.lobby-card-offline {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  background: rgba(8, 11, 24, 0.55);
  z-index: 1;
}
.lobby-player-card.is-offline .lobby-card-offline { display: flex; }
.lobby-player-card.is-offline .lobby-card-img { filter: grayscale(1) brightness(0.6); }
.lobby-player-card.is-offline .polaroid-pseudo { color: #666; }

/* Panel des réponses (écran question) */
.qp-player-row.is-offline { opacity: 0.45; }
.qp-player-row.is-offline .qp-avatar { filter: grayscale(1); }
.qp-status.offline {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

/* Scoreboard latéral */
.scoreboard-offline { display: none; font-size: 1.1rem; }
.scoreboard-row.is-offline { opacity: 0.5; }
.scoreboard-row.is-offline .scoreboard-avatar { filter: grayscale(1); }
.scoreboard-row.is-offline .scoreboard-offline { display: inline; }

/* Classement intermédiaire */
.inline-score-offline {
  display: none;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fca5a5;
  white-space: nowrap;
}
.inline-score-row.is-offline { opacity: 0.55; }
.inline-score-row.is-offline .inline-score-avatar { filter: grayscale(1); }
.inline-score-row.is-offline .inline-score-offline { display: inline; }

/* Podiums + capture selfie */
.podium-place.is-offline .player-avatar { filter: grayscale(1) brightness(0.75); }
.podium-rest-item.is-offline { opacity: 0.6; }
.selfie-polaroid.is-offline { opacity: 0.5; }

/* ========================================
   PODIUM DE MANCHE — annonce du prochain « sujet »
======================================== */
#screen-round-podium { gap: 30px; }

#podium-next-subject {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 56px 16px 18px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.22), rgba(124, 58, 237, 0.28));
  border: 3px solid gold;
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.55);
}

#podium-next-subject.subject-pop {
  animation: reveal-winner-pop 0.85s cubic-bezier(0.18, 1.3, 0.4, 1);
}

#podium-subject-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid gold;
  animation: flash-gold 2.4s ease infinite;
}

.podium-subject-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.podium-subject-eyebrow {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-accent);
}

.podium-subject-line {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
}

.podium-subject-line strong {
  color: gold;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
}

.podium-subject-crown {
  position: absolute;
  top: -40px;
  left: 70px;
  font-size: 3.6rem;
  transform: rotate(-16deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

/* ========================================
   FIN DE PARTIE — actions + variante « interrompue »
======================================== */
#game-over-actions {
  display: flex;
  gap: 32px;
  justify-content: center;
  animation: fadeInUp 0.5s ease 0.8s both;
}

#game-over-actions .btn {
  font-size: 2rem;
  padding: 20px 56px;
}

#screen-game-over.is-aborted #game-over-title { color: var(--color-text-muted); }
#screen-game-over.is-aborted #game-over-winner { color: var(--color-text-muted); font-size: 2.2rem; }