@import url('./fonts/fonts.css');
@import url('./themes.css');
/* =====================================================================
   Party Games — système de design commun (écran TV, régie, téléphones)
   Direction « Le Grand Show du Comptoir » : un plateau de jeu télé français
   traité comme une affiche sérigraphiée. Encre de nuit, crème affiche,
   lumière d'ampoules (laiton), rideau de velours grenat. Contours encrés et
   ombres pleines décalées, polices d'affiche et de tableau de stade.
   Les jeux réutilisent ces classes et variables (voir docs/GAME_API.md) :
   les noms des variables sont stables, seules les valeurs ont changé.
   ===================================================================== */
:root {
  /* Scène */
  --bg: #101828;           /* encre de nuit */
  --bg-2: #1a2438;         /* coulisse */
  --card: #24304a;         /* ardoise */
  --card-2: #2c3a58;
  --card-3: #364668;
  --ink: #0a0f1c;          /* encre : contours et ombres */
  --line: #0a0f1c;
  --line-2: #141c2e;
  --well: #0e1524;         /* creux : champs, pistes, bandeaux sombres */
  --text: #fff4e0;         /* crème affiche */
  --paper: #fff4e0;        /* cartons de question */
  --muted: #aeb8cc;        /* brume */
  --faint: #7c879e;

  /* Lumière et décor */
  --brass: #f5b83d;        /* laiton, ampoules */
  --brass-2: #ffd27a;
  --gold: #f5b83d;         /* or du 1er (couronne, podium) : repère universel, jamais changé par une ambiance */
  --velvet: #b3263a;       /* velours grenat : rideau, « en direct » */
  --velvet-2: #7d1626;
  --spot: #7fc8f8;         /* bleu projecteur */
  --bulb-off: #3a3f4f;
  --silver: #d9dfe9;       /* 2e */
  --wood: #4a2e1a;         /* comptoir, cadres en bois */
  --wood-2: #3b2414;
  --wood-3: #2d1a0e;
  --bronze: #e0955a;       /* 3e */

  /* Couleurs franches (noms historiques conservés pour les jeux) */
  --yellow: #f5b83d;
  --coral: #ff5a4e;
  --mint: #3ddc97;
  --sky: #7fc8f8;
  --orange: #f2a81d;
  --lilac: #b69cff;
  --pink: #ff8fab;

  --accent: var(--brass);
  --accent-2: var(--velvet);
  --on-accent: var(--ink); /* texte posé sur la couleur d'accent */
  --ok: #3ddc97;
  --warn: #f2a81d;
  --bad: #ff5a4e;
  --info: #7fc8f8;

  /* Couleurs des catégories de jeux (affiches) */
  --t-action: #f2a81d;
  --t-musique: #ff8fab;
  --t-culture: #3ddc97;
  --t-strategie: #ff5a4e;
  --t-memoire: #b69cff;
  --t-reflexes: #7fc8f8;
  --t-creatif: #f5b83d;
  --t-equipes: #ffd27a;
  --t-cooperatif: #f2a81d;

  /* Réponses QCM : couleur ET forme (daltoniens) — A ● tomate, B ▲ bleu Klein, C ■ moutarde, D ◆ sapin */
  --a1: #e4473a;
  --a2: #2f5bea;
  --a3: #f2a81d;
  --a4: #16936a;
  --on-a3: #0a0f1c;        /* texte encre sur moutarde */

  --radius: 18px;
  --radius-sm: 12px;
  --border: 3px solid var(--ink);
  --pop: 0 5px 0 var(--ink);
  --pop-lg: 0 8px 0 var(--ink);
  --shadow: 0 8px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, 0.4);
  --font: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --font-ui: 'Bricolage Grotesque', 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bagel Fat One', 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Big Shoulders Display', 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  /* Conservé pour compatibilité : aplat laiton légèrement modelé */
  --grad: linear-gradient(180deg, #ffd27a, #f5b83d);
  /* Grain papier et trame, très discrets */
  --grain: radial-gradient(circle at 1px 1px, rgba(255, 244, 224, 0.045) 1.1px, transparent 1.5px) 0 0 / 16px 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { font-synthesis: none; }
body {
  /* Lumière de scène : un projecteur chaud tombe du haut, sur le grain du papier */
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(245, 184, 61, 0.16), transparent 70%),
    var(--grain),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.005em; margin: 0; line-height: 1.08; }
h1, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; }
.num, .tabnum { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; fill: currentColor; }
a { color: inherit; }
b, strong { font-weight: 800; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.hidden { display: none !important; }
.grad-text { color: var(--accent); }
::selection { background: var(--accent); color: var(--ink); }

/* ---------------- Boutons ---------------- */
.btn {
  font: inherit; font-family: var(--font-ui); font-weight: 700; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--card-2); border: var(--border); border-radius: var(--radius-sm);
  padding: 10px 18px; box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s, opacity 0.2s;
  user-select: none;
}
.btn:hover { background: var(--card-3); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--brass-2); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.btn-danger { background: var(--coral); color: var(--ink); }
.btn-lg { padding: 14px 26px; font-size: 1.12rem; border-radius: 16px; }
.btn-xl { padding: 18px 32px; font-size: 1.3rem; border-radius: 18px; box-shadow: var(--pop); }
.btn-sm { padding: 6px 12px; font-size: 0.88rem; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.btn-block { width: 100%; }
.icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 1.15rem; }

/* ---------------- Formulaires ---------------- */
.input, select.input, textarea.input {
  font: inherit; font-weight: 700; color: var(--text); width: 100%;
  background: var(--well); border: var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 184, 61, 0.3); }
.input-lg { font-size: 1.15rem; padding: 15px 16px; border-radius: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .label { font-size: 0.78rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.seg { display: flex; gap: 6px; background: var(--well); padding: 5px; border-radius: 15px; border: var(--border); flex-wrap: wrap; }
.seg button { flex: 1; font: inherit; font-weight: 800; font-size: 0.92rem; color: var(--muted); background: transparent; border: 0; padding: 9px 10px; border-radius: 10px; cursor: pointer; min-width: 60px; }
.seg button:hover { color: var(--text); }
.seg button.sel { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--ink); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 800; }
.switch input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: var(--well); border: var(--border); position: relative; cursor: pointer; transition: background 0.2s; margin: 0; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; }
.switch input:checked { background: var(--mint); }
.switch input:checked::after { transform: translateX(20px); background: var(--ink); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .input { text-align: center; width: 90px; }

/* ---------------- Cartes & pastilles ---------------- */
.card { background: var(--card); border: var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--pop-lg); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  color: var(--ink); background: var(--c, var(--accent)); border: 2px solid var(--ink);
}
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card-2); border: var(--border); border-radius: 999px; padding: 5px 12px 5px 5px; font-weight: 800; }
.kbd { font-family: ui-monospace, Consolas, monospace; background: var(--well); border: 2px solid var(--ink); padding: 2px 8px; border-radius: 8px; font-weight: 700; }

/* ---------------- Avatars ---------------- */
.avatar {
  --size: 44px; width: var(--size); height: var(--size); flex: none;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--size) * 0.56); line-height: 1;
  background: var(--pc, var(--lilac));
  border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  position: relative;
}
.avatar.off { filter: grayscale(1); opacity: 0.45; }
/* Les Habitués : le médaillon dessiné porte déjà son contour */
.avatar.hab-av { background: none; border: 0; box-shadow: 0 3px 0 rgba(10, 15, 28, 0.55); font-size: 0; }
.avatar.hab-av svg { width: 100%; height: 100%; display: block; }
.avatar .badge { position: absolute; right: -4px; bottom: -4px; font-size: 0.7em; }

/* ---------------- Médaillons de jeux (tampon d'affiche) ---------------- */
.gicon { width: var(--s, 56px); height: var(--s, 56px); flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--c, var(--accent)); color: var(--ink); border: max(2px, calc(var(--s, 56px) * 0.05)) solid var(--ink); box-shadow: 0 max(2px, calc(var(--s, 56px) * 0.06)) 0 var(--ink); }
.gicon .ico { width: 58%; height: 58%; vertical-align: 0; }

/* ---------------- Affiches de jeux (jaquettes 3:4) ---------------- */
.jaquette { position: relative; aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; border: var(--border); border-radius: 14px; box-shadow: var(--pop-lg);
  background: var(--c, var(--accent)); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 8% 7% 9%; container-type: inline-size; }
.jaquette .jq-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 244, 224, 0.28) 0 9deg, transparent 9deg 18deg); }
.jaquette::after { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: 0.8; pointer-events: none; }
.jaquette .jq-icon { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); border: var(--border); box-shadow: 0 5px 0 var(--ink); display: flex; align-items: center; justify-content: center; }
.jaquette .jq-icon .ico { width: 62%; height: 62%; vertical-align: 0; }
.jaquette .jq-title { position: relative; font-family: var(--font-display); text-align: center; line-height: 0.95; font-size: 13cqw; color: var(--paper); -webkit-text-stroke: 1.6cqw var(--ink); paint-order: stroke fill; text-shadow: 0 1.2cqw 0 var(--ink); text-wrap: balance; }
.jaquette .jq-tag { position: relative; margin-top: 4cqw; display: inline-flex; align-items: center; gap: 1.6cqw; background: var(--ink); color: var(--paper); border-radius: 99px; padding: 1.4cqw 4cqw; font-family: var(--font-ui); font-weight: 800; font-size: 5.4cqw; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------------- Réponses colorées (QCM) ---------------- */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.answer {
  --ac: var(--a1);
  display: flex; align-items: center; gap: 14px; text-align: left;
  font: inherit; font-family: var(--font-ui); font-weight: 800; color: #fff; cursor: pointer;
  background: var(--ac); border: var(--border);
  border-radius: 18px; padding: 16px 20px; min-height: 84px; font-size: 1.25rem; line-height: 1.2;
  box-shadow: 0 6px 0 var(--ink);
  text-shadow: 0 2px 0 rgba(10, 15, 28, 0.35);
  transition: transform 0.08s, opacity 0.3s, filter 0.3s, box-shadow 0.08s;
}
.answer:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.answer .shape { width: 1.7em; height: 1.7em; flex: none; display: flex; align-items: center; justify-content: center; text-shadow: none; }
.shape svg { width: 100%; height: 100%; fill: var(--paper); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; overflow: visible; filter: drop-shadow(0 3px 0 rgba(10, 15, 28, 0.5)); }
.answer:nth-child(3) { color: var(--on-a3); text-shadow: none; }
.answer:nth-child(1) { --ac: var(--a1); } .answer:nth-child(2) { --ac: var(--a2); }
.answer:nth-child(3) { --ac: var(--a3); } .answer:nth-child(4) { --ac: var(--a4); }
/* Mauvaises réponses à la révélation : teinte désaturée (couleur du socle mêlée à l'ardoise), texte et compteur
   restent pleinement lisibles à 5 m (crème sur fond sombre, contraste > 7:1). Pas d'opacité ni de filtre. */
.answer.dim, .answer.dim:nth-child(3) { opacity: 1; filter: none; color: var(--paper); text-shadow: none; background: var(--card-2); background: color-mix(in srgb, var(--ac) 30%, var(--card)); transform: scale(0.96); transition: transform 0.25s, background 0.25s; }
.answer.dim .shape svg { fill: var(--muted); }
.answer.dim .count { opacity: 1; }
.answer.picked { outline: 5px solid var(--text); outline-offset: 2px; }
.answer.correct { outline: 5px solid var(--paper); outline-offset: 3px; animation: flipOk 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; position: relative; }
/* Tampon « BONNE RÉPONSE » encré sur la bonne réponse */
.answer.correct::after { content: 'BONNE RÉPONSE'; position: absolute; z-index: 3; left: 50%; right: auto; top: -0.95em; transform: translateX(-50%) rotate(-3deg); animation: stampIn 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) 0.25s both; white-space: nowrap; font-family: var(--font-ui); font-weight: 800; font-size: 0.62em; letter-spacing: 0.06em; color: var(--velvet); background: var(--paper); border: 3px solid var(--velvet); border-radius: 8px; padding: 2px 10px; box-shadow: 0 3px 0 var(--ink); text-shadow: none; }
/* Tampon : il tombe sur la carte (scale 1,6 → 1), centré en haut pour ne jamais cacher un compteur */
@keyframes stampIn { from { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(1.6); } }
@keyframes flipOk { from { transform: perspective(600px) rotateX(-90deg); } to { transform: perspective(600px) rotateX(0) scale(1.03); } }
.answer .count { margin-left: auto; background: rgba(10, 15, 28, 0.35); padding: 4px 12px; border-radius: 999px; font-size: 1rem; text-shadow: none; }
@keyframes pulseOk { 50% { transform: scale(1.03) rotate(-0.5deg); } }

/* ---------------- Chronos ---------------- */
.ring { position: relative; width: var(--s, 120px); height: var(--s, 120px); flex: none; border-radius: 50%; background: var(--ink); box-shadow: 0 6px 0 rgba(10, 15, 28, 0.6); }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.ring .bg { stroke: rgba(255, 255, 255, 0.1); }
.ring .fg { stroke: var(--brass); transition: stroke 0.3s; }
.ring.low .fg { stroke: var(--coral); }
.ring .num { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 800; font-size: calc(var(--s, 120px) * 0.5); font-variant-numeric: tabular-nums; color: var(--text); }
.ring.low .num { color: var(--coral); animation: tickPulse 1s infinite; }
@keyframes tickPulse { 50% { transform: scale(1.1); } }
.tbar { height: 14px; border-radius: 99px; background: var(--well); border: 3px solid var(--ink); overflow: hidden; }
.tbar > i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; }
.tbar.low > i { background: var(--coral); }

/* ---------------- Classements ---------------- */
.lb { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: var(--card-2); border: var(--border); border-radius: 14px; padding: 7px 14px 7px 8px; box-shadow: 0 3px 0 var(--ink); transition: transform 0.3s; }
.lb-row .rk { width: 30px; text-align: center; font-family: var(--font-num); font-weight: 800; color: var(--muted); font-size: 1.5rem; }
.lb-row .nm { flex: 1; min-width: 0; font-family: var(--font-ui); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .sc { font-family: var(--font-num); font-weight: 800; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.lb-row .gain { font-weight: 900; font-size: 0.92rem; color: var(--mint); min-width: 64px; text-align: right; }
.lb-row .gain.zero { color: var(--faint); }
.lb-row.r1 { background: var(--yellow); color: var(--ink); }
.lb-row.r1 .rk, .lb-row.r1 .gain { color: var(--ink); }
.lb-row.r1 .faint, .lb-row.r1 .muted { color: rgba(10, 15, 28, 0.6); }
.lb-row.r2 .rk { color: var(--silver); } .lb-row.r3 .rk { color: var(--bronze); }
.lb-row.me { outline: 3px solid var(--sky); outline-offset: 2px; }
/* Classement version TV (UI.leaderboard(liste, { tv: true })) : rien sous 40 px sur la scène 1920×1080 */
.lb.tv { gap: 12px; }
.lb.tv .lb-row { padding: 8px 20px 8px 10px; border-radius: 18px; gap: 18px; }
.lb.tv .lb-row .rk { width: 56px; font-size: 56px; }
.lb.tv .lb-row .nm { font-size: 40px; }
.lb.tv .lb-row .sc { font-size: 56px; }
.lb.tv .lb-row .gain { font-size: 40px; min-width: 110px; }

/* ---------------- Podium ---------------- */
.podium { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.pod { position: relative; width: 210px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pod .block { width: 100%; border-radius: 18px 18px 8px 8px; border: var(--border); box-shadow: var(--pop-lg); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 12px; font-family: var(--font-num); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--ink);
  /* relief en façade : bandeau clair en haut de la marche */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 10px, transparent 10px); }
.pod .nm { font-family: var(--font-ui); font-weight: 800; font-size: 1.3rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .sc { color: var(--muted); font-family: var(--font-num); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
.pod .sc b { color: var(--text); font-weight: 800; }
.pod .sc small { font-family: var(--font-ui); font-weight: 700; font-size: 0.8em; color: var(--muted); }
.pod.p1 { animation-delay: 0.5s; } .pod.p2 { animation-delay: 0.25s; }
.pod.p1 .block { height: 190px; background-color: var(--gold); }
.pod.p2 .block { height: 140px; background-color: var(--silver); }
.pod.p3 .block { height: 105px; background-color: var(--bronze); }
.pod-crown { position: absolute; z-index: 2; top: -0.55em; left: 50%; font-size: 64px; line-height: 1; color: var(--gold); transform: translateX(-80%) rotate(-14deg); filter: drop-shadow(0 4px 0 var(--ink)); }
.pod-crown .ico { width: 1em; height: 1em; vertical-align: 0; }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Séquence de 6 s (UI.podium sur la TV) : 3e (0,2 s) → 2e (1 s) → roulement et projecteur → 1er qui jaillit */
.podium.seq .pod { animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.podium.seq .pod.p3 { animation-delay: 0.2s; }
.podium.seq .pod.p2 { animation-delay: 1s; }
.podium.seq .pod.p1 { animation: podJump 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) 3.3s both; }
@keyframes podJump { from { transform: translateY(120px) scale(0.7); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
/* Projecteur qui balaie pendant le roulement, puis se pose sur le 1er */
.pod-spot { position: absolute; z-index: 0; left: 50%; bottom: 0; width: 46%; height: 140%; margin-left: -23%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 244, 224, 0.26), transparent 70%); animation: podSpot 1.6s ease-in-out 1.7s both; }
.podium.won .pod-spot { opacity: 1; transform: none; animation: none; }
@keyframes podSpot { 0% { opacity: 0; transform: translateX(-70%); } 15% { opacity: 1; } 50% { transform: translateX(70%); } 100% { opacity: 1; transform: translateX(0); } }
.podium .pod { z-index: 1; }
/* Confettis papier (UI.paperConfetti) : une seule pluie, transform et opacity uniquement */
.paper-confetti { position: absolute; z-index: 3; left: -10%; right: -10%; top: -40%; height: 0; pointer-events: none; }
.paper-confetti i { position: absolute; top: 0; height: 8px; border-radius: 2px; border: 1.5px solid var(--ink); opacity: 0; animation: paperFall 1.5s cubic-bezier(0.3, 0.6, 0.6, 1) both; }
@keyframes paperFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .pod, .podium.seq .pod, .podium.seq .pod.p1, .pod-spot { animation: none !important; } .pod-spot { display: none; } }

/* ---------------- Superpositions ---------------- */
.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(10, 15, 28, 0.82); }
.count321 { font-family: var(--font-display); font-size: min(40vw, 320px); line-height: 1; color: var(--brass); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 14px 0 var(--ink); animation: zoomOut 0.9s ease both; }
@keyframes zoomOut { from { transform: scale(1.8) rotate(-8deg); opacity: 0; } 30% { opacity: 1; transform: scale(1) rotate(2deg); } to { transform: scale(0.85); opacity: 0.2; } }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 520px); }
.toast { background: var(--card-3); border: var(--border); padding: 11px 18px; border-radius: 14px; font-weight: 800; box-shadow: var(--pop); animation: toastIn 0.25s ease; text-align: center; }
.toast.ok { background: var(--mint); color: var(--ink); } .toast.bad { background: var(--coral); color: var(--ink); }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } }
.flash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 950; pointer-events: none; animation: flash 0.5s ease forwards; }
@keyframes flash { from { opacity: 0.55; } to { opacity: 0; } }
.confetti { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 980; }

/* ---------------- Animations utilitaires ---------------- */
.pop { animation: pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.fade-in { animation: fadeIn 0.35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }
.shake { animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.float { animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
.wobble { animation: wobble 0.6s ease; }
@keyframes wobble { 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }

/* ---------------- Mise en page générique d'un jeu ---------------- */
.g-stage { position: relative; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.g-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.g-title { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.g-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; min-height: 0; }
.g-big { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 5.5rem); line-height: 1.05; }
.g-sub { font-size: clamp(1rem, 1.6vw, 1.4rem); color: var(--muted); font-weight: 700; }
.round-pill { font-family: var(--font-display); font-size: 1.1rem; background: var(--accent); color: var(--on-accent); border: var(--border); padding: 6px 16px; border-radius: 999px; box-shadow: 0 3px 0 var(--ink); }

/* Téléphone : gros boutons */
.pad { display: grid; gap: 12px; }
.pad-btn {
  font: inherit; font-family: var(--font-display); color: #fff; cursor: pointer; user-select: none;
  border-radius: 24px; min-height: 120px; font-size: 1.8rem; touch-action: manipulation;
  background: var(--bc, var(--accent)); border: 4px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink);
  text-shadow: 0 3px 0 rgba(10, 15, 28, 0.4);
  transition: transform 0.05s, box-shadow 0.05s;
}
.pad-btn:active, .pad-btn.down { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.pad-btn:disabled { opacity: 0.35; }

/* =====================================================================
   Navigateurs sans color-mix() (navigateurs de TV, anciens téléphones)
   Le style principal n'en dépend presque plus ; quelques jeux s'en servent encore.
   ===================================================================== */
.no-cm .lb-row.me { outline: 3px solid var(--sky); }

/* ---------- Écran d'annonce : lancement, pause, message (core/announce.js) ----------
   Une affiche de spectacle : rideau de velours fermé, fronton d'ampoules, cartouche du bar,
   titre en lettres d'affiche, compte à rebours façon tableau de stade, ticket du lot. */
.announce-ov { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 4vh 6vw;
  background: radial-gradient(ellipse 45% 55% at 50% 45%, rgba(245, 184, 61, 0.22), transparent 70%), var(--frame-wide); }
.announce-ov.kind-message { background:
    radial-gradient(ellipse 45% 55% at 50% 45%, rgba(255, 244, 224, 0.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2.2vw, rgba(255, 255, 255, 0.05) 2.2vw 3.4vw, rgba(0, 0, 0, 0.1) 3.4vw 5.6vw),
    linear-gradient(180deg, #2f5bea, #1d3a9e); }
/* Fronton d'ampoules en haut de l'écran */
.announce-ov::before { content: ''; position: absolute; left: 4vw; right: 4vw; top: 2.2vh; height: 2.4vh; border-radius: 99px; background: radial-gradient(circle, var(--brass) 0 38%, rgba(245, 184, 61, 0.25) 42%, transparent 62%) 0 50% / 3.2vh 100% repeat-x; filter: drop-shadow(0 0 6px rgba(245, 184, 61, 0.6)); }
.an-box { width: min(1300px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6vh; position: relative; z-index: 1; }
.an-cartouche { background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; padding: 10px 22px; box-shadow: 0 8px 0 var(--ink); }
.an-logo { max-width: min(360px, 40vw); max-height: 15vh; object-fit: contain; display: block; }
.an-venue { font-family: var(--font-ui); font-style: italic; font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 2.4rem); color: var(--paper); opacity: 0.85; }
.an-chip { display: inline-flex; align-items: center; gap: 0.5em; background: var(--ink); color: var(--brass); border: 3px solid var(--brass); border-radius: 999px; padding: 6px 22px; font-family: var(--font-ui); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1rem, 1.6vw, 1.5rem); }
.an-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, min(7.4vw, 11vh), 8.8rem); line-height: 0.95; color: var(--paper); -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; text-shadow: 0 0.09em 0 var(--ink); text-wrap: balance; }
.an-msg { margin: 0; font-family: var(--font-ui); font-size: clamp(1.3rem, 2.7vw, 3.2rem); color: var(--paper); font-weight: 700; max-width: 26em; }
.an-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 0.5vh; background: var(--ink); border: 4px solid var(--brass); border-radius: 22px; padding: 1vh 3vw 1.4vh; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45); }
.an-timer small { font-family: var(--font-ui); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-size: clamp(0.9rem, 1.4vw, 1.4rem); }
.an-count { font-family: var(--font-num); font-weight: 800; font-size: clamp(4rem, min(15vw, 21vh), 16rem); line-height: 0.95; color: var(--paper); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(245, 184, 61, 0.65), 0 0 2px var(--brass); }
.an-when { font-family: var(--font-ui); font-weight: 800; color: var(--brass); font-size: clamp(1rem, 1.8vw, 1.8rem); min-height: 1.2em; }
.announce-ov.soon .an-count { color: var(--brass); animation: anPulse 1s ease-in-out infinite; }
.announce-ov.ended .an-count { color: var(--mint); font-family: var(--font-display); font-weight: 400; font-size: clamp(3.5rem, 9vw, 10rem); text-shadow: 0 0.06em 0 var(--ink); animation: anPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes anPulse { 50% { transform: scale(1.05); } }
@keyframes anPop { from { transform: scale(0.6); opacity: 0; } }
.an-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; margin-top: 1vh; }
.an-join { display: flex; align-items: center; gap: 14px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 var(--ink); padding: 12px 20px; text-align: left; transform: rotate(1.5deg); }
.an-join small { display: block; font-family: var(--font-ui); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }
.an-join img { width: min(130px, 13vh); height: min(130px, 13vh); background: #fff; border-radius: 8px; padding: 4px; border: 3px solid var(--ink); }
.an-join b { font-family: var(--font-num); font-weight: 800; font-size: 1.6rem; }
.an-controls { display: flex; gap: 12px; margin-top: 1.5vh; }
.an-gaston { position: absolute; left: 3vw; bottom: 2vh; z-index: 1; pointer-events: none; }
@media (max-width: 1100px) { .an-gaston { display: none; } }

/* Ticket de tombola (lot à gagner) */
.ticket { display: inline-flex; align-items: center; gap: 14px; background: var(--brass); color: var(--ink); padding: 12px 30px; font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.1rem, 1.9vw, 2rem); position: relative; text-align: left; filter: drop-shadow(0 6px 0 var(--ink));
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.ticket > .ico { width: 1.6em; height: 1.6em; }
.ticket small { display: block; font-size: 0.6em; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.ticket > div { border-left: 3px dashed rgba(10, 15, 28, 0.45); padding-left: 14px; }

/* Téléphone */
.announce-ov.compact { padding: 22px 18px; }
.announce-ov.compact::before { left: 12px; right: 12px; top: 10px; height: 14px; background-size: 20px 100%; }
.announce-ov.compact .an-title { font-size: 2.3rem; }
.announce-ov.compact .an-msg { font-size: 1.2rem; }
.announce-ov.compact .an-count { font-size: 5rem; }
.announce-ov.compact .an-timer { padding: 8px 22px 10px; }
.announce-ov.compact .an-logo { max-height: 70px; }
.announce-ov.compact .ticket { font-size: 1.05rem; padding: 10px 22px; }

/* Lot à gagner (accueil, côté, résultats, téléphones) */
.prize-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--brass); color: var(--ink); border: var(--border); border-radius: 999px; padding: 6px 16px; font-family: var(--font-ui); font-weight: 800; box-shadow: var(--pop); }
.prize-badge .ico { width: 1.3em; height: 1.3em; }
.prize-badge small { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75em; opacity: 0.75; }

/* ---------- Remise des prix (core/ceremony.js) : rideau, projecteurs, podium ---------- */
.ceremony-ov { background:
    radial-gradient(ellipse 55% 60% at 50% 70%, rgba(245, 184, 61, 0.28), transparent 70%),
    var(--grain), var(--bg); }
.ceremony-ov::before { display: none; }
/* Rideau ouvert sur les bords */
.ceremony-ov .an-box::before, .ceremony-ov .an-box::after { display: none; }
.spots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.spots i { position: absolute; top: -10%; width: 34vw; height: 120%; background: linear-gradient(180deg, rgba(255, 244, 224, 0.22), rgba(255, 244, 224, 0) 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
.spots i:nth-child(1) { left: 6%; transform: rotate(-18deg); }
.spots i:nth-child(2) { left: 33%; }
.spots i:nth-child(3) { left: 60%; transform: rotate(18deg); }
@media (prefers-reduced-motion: no-preference) {
  .spots i:nth-child(1) { animation: spotL 6s ease-in-out infinite; }
  .spots i:nth-child(3) { animation: spotR 6s ease-in-out infinite; }
}
@keyframes spotL { 50% { transform: rotate(-6deg); } }
@keyframes spotR { 50% { transform: rotate(6deg); } }
body.tv-lite .spots i { animation: none !important; }
.ceremony-ov .an-box { z-index: 1; }
.cer-podium { display: flex; align-items: flex-end; justify-content: center; gap: 2vw; margin-top: 2vh; width: 100%; }
.cer-step { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(30%, 360px); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 1.3, 0.4, 1); }
.cer-step.hidden-step { opacity: 0; transform: translateY(40px) scale(0.9); }
.cer-step.revealed { animation: anPop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cer-who { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Ex æquo : côte à côte sur la marche (élargie), noms plus petits */
.cer-whos { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px 18px; }
.cer-step.tied { width: auto; min-width: min(30%, 360px); max-width: 46%; }
.cer-step.tied .cer-who b { font-size: clamp(1.2rem, 2vw, 2rem); }
.ceremony-ov .an-box { scrollbar-width: none; }
.ceremony-ov .an-box::-webkit-scrollbar { display: none; }
.cer-who b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 3rem); text-shadow: 0 4px 0 var(--ink); }
.cer-who small { color: var(--muted); font-family: var(--font-num); font-weight: 700; font-size: 1.4rem; }
.cer-prize { display: inline-flex; align-items: center; gap: 8px; background: var(--brass); color: var(--ink); border: var(--border); border-radius: 14px; padding: 8px 14px; font-family: var(--font-ui); font-weight: 800; box-shadow: var(--pop); text-align: center; font-size: clamp(1rem, 1.6vw, 1.5rem); }
.cer-prize .ico { flex: none; }
.cer-block { width: 100%; border: var(--border); border-radius: 18px 18px 0 0; box-shadow: var(--pop-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-num); font-weight: 800; font-size: clamp(2rem, 4vw, 4rem); color: var(--ink); }
.cer-step.r1 .cer-block { height: 26vh; background: var(--gold); }
.cer-podium, .cer-step { position: relative; }
.cer-crown { top: -0.7em; }
.cer-step.hidden-step .cer-crown { visibility: hidden; }
.cer-step.r2 .cer-block { height: 18vh; background: var(--silver); }
.cer-step.r3 .cer-block { height: 13vh; background: var(--bronze); }
/* Médaille et rang côte à côte : tiennent dans la marche la plus basse (en colonne, « 3e » sortait de la marche) */
.cer-block { flex-direction: row; gap: 0.25em; overflow: hidden; }
.medal { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 0.8em; }
.medal .ico { width: 70%; height: 70%; vertical-align: 0; }
.medal.m1 { background: var(--brass); } .medal.m2 { background: var(--silver); } .medal.m3 { background: var(--bronze); }
.cer-me { display: flex; justify-content: center; }
.cer-list { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
.cer-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: var(--border); border-radius: 14px; padding: 8px 12px; text-align: left; }
.cer-row.me { background: var(--card-3); border-color: var(--brass); }
.cer-row b { flex: 1; font-family: var(--font-ui); }
.cer-row small { color: var(--brass); font-weight: 800; }

/* Lot d'un jeu (réglages, résultats) */
.game-prize { display: flex; justify-content: center; margin: 6px 0 12px; }
.game-prize .prize-badge { font-size: 1.15rem; }

/* ---------------- Gaston (présentateur) ---------------- */
.gaston-wrap { width: var(--gs, 200px); aspect-ratio: 200 / 240; flex: none; }
.gaston-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 8px 0 rgba(10, 15, 28, 0.45)); }
.gaston .g-open { display: none; }
.gaston.talk .g-open { display: block; }
.gaston.talk .g-closed { display: none; }
.gaston.pose-laugh .g-open, .gaston.pose-wow .g-open { display: block; }
.gaston.pose-laugh .g-closed, .gaston.pose-wow .g-closed { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gaston-wrap { animation: gastonSway 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
}
@keyframes gastonSway { 50% { transform: rotate(-2.5deg) translateY(-3px); } }

/* ---------------- Ampoules de plateau ---------------- */
.bulb { width: 1em; height: 1em; }
.bulb.off circle { fill: var(--bulb-off); }
.bulbs { display: flex; justify-content: space-between; gap: 4px; padding: 6px 10px; }
.bulbs i { width: 18px; height: 18px; border-radius: 50%; background: var(--bulb-off); border: 2px solid var(--ink); flex: none; transition: background 0.3s, box-shadow 0.3s; }
.bulbs i.on { background: var(--brass); box-shadow: 0 0 10px 3px rgba(245, 184, 61, 0.55); }
.bulbs.chase i:nth-child(odd) { animation: chase 0.5s steps(1) infinite; }
@keyframes chase { 50% { background: var(--bulb-off); box-shadow: none; } }

/* ---------------- Rideau de velours (transitions entre jeux) ---------------- */
.curtain { position: fixed; inset: 0; z-index: 970; pointer-events: none; display: flex; }
.curtain::before, .curtain::after { content: ''; flex: 1; background:
  repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 14px, rgba(255, 255, 255, 0.06) 14px 22px, rgba(0, 0, 0, 0.1) 22px 40px),
  linear-gradient(180deg, var(--velvet), var(--velvet-2));
  border-bottom: 10px solid var(--brass); }
.curtain::before { transform: translateX(-101%); animation: curtainL 2.4s cubic-bezier(0.6, 0, 0.3, 1) both; box-shadow: 8px 0 0 var(--ink); }
.curtain::after { transform: translateX(101%); animation: curtainR 2.4s cubic-bezier(0.6, 0, 0.3, 1) both; box-shadow: -8px 0 0 var(--ink); }
.curtain .curtain-poster { position: absolute; left: 50%; top: 50%; width: min(26vw, 300px); transform: translate(-50%, -160%); animation: posterDrop 2.4s cubic-bezier(0.3, 1.4, 0.4, 1) both; z-index: 1; }
@keyframes curtainL { 0% { transform: translateX(-101%); } 28%, 72% { transform: translateX(0); } 100% { transform: translateX(-101%); } }
@keyframes curtainR { 0% { transform: translateX(101%); } 28%, 72% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes posterDrop { 0%, 20% { transform: translate(-50%, -160%) rotate(-4deg); } 38% { transform: translate(-50%, -50%) rotate(3deg); } 46%, 72% { transform: translate(-50%, -50%) rotate(-1deg); } 90%, 100% { transform: translate(-50%, -170%) rotate(0); } }

/* =====================================================================
   Mode « TV lente » (body.tv-lite, posé par host-shell.js : ?lite=1, appli TV, détection)
   Tout ce qui coûte au processeur d'une TV est coupé, l'écran reste beau et lisible :
   pas de grain ni de dégradés superposés, aucun flou (ombres floues, halos, drop-shadow, backdrop),
   aucune 3D, aucune boucle, rideau en simple fondu, pas de confettis ni de projecteurs mobiles.
   ===================================================================== */
body.tv-lite {
  --grain: none;
  /* Cadre plat : une couleur unie au lieu de 3 ou 4 dégradés (suit l'ambiance via --velvet) */
  --frame: var(--velvet);
  --frame-wide: var(--velvet-2);
  /* Ombres pleines seulement (jamais de rayon de flou) */
  --shadow: 0 8px 0 var(--ink);
  background-image: none !important;
  background-color: var(--bg) !important;
}
body.tv-lite *, body.tv-lite *::before, body.tv-lite *::after { animation-iteration-count: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.tv-lite .gaston-wrap, body.tv-lite .bulbs.chase i, body.tv-lite .float { animation: none !important; }
/* Flous coûteux : drop-shadow du logo, de Gaston et des formes ; projecteurs et confettis */
body.tv-lite .brand .logo, body.tv-lite .gaston-wrap svg, body.tv-lite .shape svg, body.tv-lite .c-crown, body.tv-lite .pod-crown { filter: none !important; }
body.tv-lite .spots, body.tv-lite .pod-spot, body.tv-lite .paper-confetti, body.tv-lite .confetti { display: none !important; }
body.tv-lite .hero.stage::before, body.tv-lite .hero.stage::after { box-shadow: none !important; }
/* Ampoules sans halo : l'allumage passe par un remplissage plus clair */
body.tv-lite .bulbs i, body.tv-lite .bulbs i.on { box-shadow: none !important; transition: none; }
body.tv-lite .bulbs i.on { background: var(--brass-2); }
/* Bonne réponse sans 3D : changement de fond immédiat, tampon en opacité et échelle (composité) */
body.tv-lite .answer, body.tv-lite .answer.dim { transition: none; }
body.tv-lite .answer.correct { animation: none !important; transform: none !important; }
/* Compte à rebours allégé : contour de 4 px, sans ombre */
body.tv-lite .count321 { -webkit-text-stroke: 4px var(--ink); text-shadow: none; }
/* Podium : montée en translateY seule */
body.tv-lite .podium.seq .pod.p1 { animation-name: rise !important; animation-timing-function: ease-out !important; }
/* Rideau : fondu de l'aplat de velours (opacité seulement), l'affiche du jeu posée au centre */
body.tv-lite .curtain { background: var(--velvet); animation: curtainFade 2.4s linear both; }
body.tv-lite .curtain::before, body.tv-lite .curtain::after { display: none; }
body.tv-lite .curtain .curtain-poster { transform: translate(-50%, -50%); animation: none; }
@keyframes curtainFade { 0% { opacity: 0; } 17%, 83% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .curtain::before, .curtain::after, .curtain .curtain-poster { animation-duration: 0.01s !important; }
}

/* =====================================================================
   Écran TV (body.display-mode, scène fixe 1920×1080) : aucun texte utile sous 40 px.
   Les écrans communs (annonce, remise des prix, lots, classements TV) sont relevés ici.
   Les petits éléments génériques des jeux (.label, .pill, .g-sub, .round-pill) passent par
   :where() : ils grandissent sur la TV sans écraser les tailles que chaque jeu fixe lui-même.
   ===================================================================== */
:where(body.display-mode) .label { font-size: 40px; letter-spacing: 0.06em; }
:where(body.display-mode) .pill { font-size: 40px; padding: 4px 18px; border-width: 3px; }
:where(body.display-mode) .g-sub { font-size: 40px; }
:where(body.display-mode) .round-pill { font-size: 40px; padding: 6px 22px; }
:where(body.display-mode) .prize-badge { font-size: 40px; }
:where(body.display-mode) .prize-badge small { font-size: 40px; text-transform: none; letter-spacing: 0; }
/* Classement TV (UI.leaderboard({ tv: true })) : rien sous 40 px, compact pour tenir un top 10 */
body.display-mode .lb.tv .lb-row .nm .faint { font-size: 40px !important; }
/* Écran d'annonce (lancement, pause, message) */
body.display-mode .an-chip { font-size: 40px; }
body.display-mode .an-venue { font-size: 48px; }
body.display-mode .an-msg { font-size: 52px; }
body.display-mode .an-timer small { font-size: 40px; letter-spacing: 0.08em; }
body.display-mode .an-when { font-size: 44px; }
body.display-mode .an-join { gap: 20px; padding: 14px 24px; }
body.display-mode .an-join img { width: 200px; height: 200px; }
body.display-mode .an-join small { font-size: 40px; text-transform: none; letter-spacing: 0; }
body.display-mode .an-join b { font-size: 60px; line-height: 1; }
body.display-mode .ticket { font-size: 48px; }
body.display-mode .ticket small { font-size: 40px; letter-spacing: 0.04em; text-transform: none; }
body.display-mode .announce-ov .btn { font-size: 40px; }
/* Remise des prix */
body.display-mode .cer-who b { font-size: 64px; }
body.display-mode .cer-who small { font-size: 44px; }
body.display-mode .cer-prize { font-size: 40px; }
body.display-mode .cer-row { font-size: 40px; }
body.display-mode .cer-row small { font-size: 40px; }
body.display-mode .cer-block { font-size: 96px; }
/* Scène TV 1920×1080 : marches en pixels (la hauteur de la scène est fixe), le podium tient sous le titre */
body.display-mode .cer-step.r1 .cer-block { height: 240px; }
body.display-mode .cer-step.r2 .cer-block { height: 170px; }
body.display-mode .cer-step.r3 .cer-block { height: 130px; }
body.display-mode .cer-step.tied .cer-who b { font-size: 44px; }
body.display-mode .cer-step.tied .cer-who small { font-size: 30px; }
/* 3 ex æquo (ou plus) sur une marche : podium sur presque toute la scène, noms en 48 px sur 2 lignes au besoin
   (le podium peut être réduit jusqu'à 40 px de nom, pas en dessous) */
body.display-mode .ceremony-ov.cer-wide .an-box { width: 1800px; }
body.display-mode .cer-wide .cer-step:not(.tied3) { width: 320px; }
/* Gaston débordait sur la 2e marche quand le podium prend toute la largeur */
body.display-mode .ceremony-ov.cer-wide .an-gaston { display: none; }
body.display-mode .cer-step.tied3 { width: 1030px; min-width: 0; max-width: none; flex: none; }
body.display-mode .cer-step.tied3 .cer-who { width: 330px; }
body.display-mode .cer-step.tied3 .cer-who b { font-size: 48px; line-height: 1.05; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
body.display-mode .cer-step.tied3 .cer-who small { font-size: 30px; }
/* Révélation sur la TV : compteurs en 48 px, tampon en 40 px placé au-dessus du centre de la carte
   (les jeux le décalaient à droite, sur le compteur : on le recentre ici) */
body.display-mode .answer .count { font-size: 48px; line-height: 1; opacity: 1; }
body.display-mode .answer.correct::after { font-size: 40px; top: -1.2em; left: 50%; right: auto; z-index: 3; }
body.display-mode .answer.correct { transform: scale(1.04); box-shadow: 0 0 0 8px var(--paper), 0 8px 0 8px var(--ink); outline: 0; z-index: 2; }
/* Classement TV : le gain et le score ne se touchent plus (« +0 2006 ») */
body.display-mode .lb.tv .lb-row .gain { min-width: 150px; margin-right: 18px; }
/* « +0 » des classements des jeux : masqué sur la TV (la place reste réservée, les scores restent alignés) */
body.display-mode .gain.zero { visibility: hidden; }
/* Divers */
body.display-mode .count321 { font-size: 320px; }
body.display-mode .toast { font-size: 40px; padding: 14px 26px; }
body.display-mode .toasts { width: min(92vw, 1100px); }
body.display-mode .toasts { bottom: 54px; }

/* ---------- Mode gages (core/gages.js) : écran « GAGE ! » sur la TV, la régie et les téléphones ---------- */
.gage-ov { background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255, 90, 78, 0.28), transparent 70%), var(--grain, none), var(--bg); }
.gage-ov .gg-title { color: var(--coral); }
.gg-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vw; width: 100%; }
.gg-card { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 10px 0 var(--ink); padding: 18px 26px; width: min(560px, 100%); text-align: center; }
.gg-cards.many .gg-card { width: min(420px, 100%); }
.gg-card.given { transform: rotate(1deg); }
.gg-who { display: flex; align-items: center; gap: 14px; }
.gg-who b { font-family: var(--font-ui); font-size: clamp(1.4rem, 2.4vw, 2.6rem); }
.gg-text { margin: 0; font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 2.8rem); line-height: 1.15; text-wrap: balance; }
.gg-sips { font-family: var(--font-num); font-weight: 800; font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: 1; color: var(--velvet); }
.gg-alt, .gg-by { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 700; color: #4a5570; font-size: clamp(1rem, 1.5vw, 1.6rem); }
.gg-giver { display: flex; align-items: center; gap: 14px; font-family: var(--font-ui); font-weight: 700; color: var(--paper); font-size: clamp(1.2rem, 2vw, 2.4rem); }
.gg-note { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); border: 3px solid var(--brass); border-radius: 16px; padding: 10px 20px; font-family: var(--font-ui); font-weight: 700; font-size: clamp(1rem, 1.7vw, 2rem); text-align: left; max-width: 1400px; }
.gg-note .ico { color: var(--brass); width: 1.4em; height: 1.4em; flex: none; }
.gg-note b { color: var(--brass); }
body.display-mode .gg-alt, body.display-mode .gg-by, body.display-mode .gg-note, body.display-mode .gg-giver { font-size: 40px; }
.gage-ov.compact .gg-card { padding: 14px; box-shadow: 0 6px 0 var(--ink); }
.gage-ov.compact .gg-text { font-size: 1.3rem; }
.gage-ov.compact .gg-sips { font-size: 2.8rem; }
.gage-ov.compact .gg-note { font-size: 0.95rem; padding: 8px 12px; }
.gg-swap { margin-top: 6px; min-height: 56px; white-space: normal; }
.gg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.gg-pick-btn { display: flex; align-items: center; gap: 8px; min-height: 60px; justify-content: flex-start; text-align: left; overflow: hidden; }
.gg-pick-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-warn .adult-warn-box h1 { color: var(--brass); }

/* Podium compact sur la TV (UI.podium ajoute .compact quand un bandeau de lot le suit, .tight si la colonne déborde encore) :
   le podium et le bandeau du lot tiennent entiers à 1080p. Spécificité plus forte que host.css (body.display-mode .pod…). */
body.display-mode .podium.compact .pod .avatar { --size: 120px !important; }
body.display-mode .podium.compact .pod.p1 .avatar { --size: 150px !important; }
body.display-mode .podium.compact .pod .nm { font-size: 48px; }
body.display-mode .podium.compact .pod.p1 .nm { font-size: 56px; }
body.display-mode .podium.compact .pod .block { font-size: 88px; }
body.display-mode .podium.compact .pod.p1 .block { height: 150px; font-size: 110px; }
body.display-mode .podium.compact .pod.p2 .block { height: 112px; }
body.display-mode .podium.compact .pod.p3 .block { height: 88px; }
body.display-mode .podium.compact .pod-crown { font-size: 64px; }
body.display-mode .podium.tight .pod .avatar { --size: 96px !important; }
body.display-mode .podium.tight .pod.p1 .avatar { --size: 120px !important; }
body.display-mode .podium.tight .pod.p1 .block { height: 120px; font-size: 96px; }
body.display-mode .podium.tight .pod.p2 .block { height: 92px; font-size: 76px; }
body.display-mode .podium.tight .pod.p3 .block { height: 74px; font-size: 64px; }
/* Bandeau du lot sous le podium (TV) : jamais écrasé par la colonne, texte sur deux lignes au besoin plutôt que rogné */
body.display-mode .results-tv .rt-left > * { flex: none; }
body.display-mode .results-tv .prize-badge { white-space: normal; overflow: visible; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.15; border-radius: 32px; padding: 8px 26px; max-width: 100%; }