/* Qui veut gagner des Kafpoints : couche « plateau télé ». Chargée après kafmillion-tv.css. */

/* ---------- Plateau : couleur d'ambiance selon le palier ---------- */
#kqmGame { --show-hue: 43, 110, 255; --show-glow: rgba(var(--show-hue), .55); }
#kqmGame[data-tier="2"] { --show-hue: 146, 72, 255; }
#kqmGame[data-tier="3"] { --show-hue: 255, 54, 92; }
#kqmGame[data-final="true"] { --show-hue: 255, 196, 72; }

/* Le grand anneau lumineux derrière la question. */
#kqmGame .kqm-studio-rings { top: 56%; width: min(150vw, 980px); aspect-ratio: 1.55; }
#kqmGame .kqm-studio-rings i { border-color: rgba(var(--show-hue), .32); box-shadow: 0 0 34px rgba(var(--show-hue), .2), inset 0 0 40px rgba(var(--show-hue), .12); transition: border-color 1.2s ease, box-shadow 1.2s ease; }
#kqmGame .kqm-studio-rings::before { position: absolute; inset: -2%; content: ""; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--show-hue), .9) 72%, rgba(255, 255, 255, .95) 75%, rgba(var(--show-hue), .9) 78%, transparent 88%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); filter: blur(1px) drop-shadow(0 0 10px rgba(var(--show-hue), .9)); animation: kqm-show-orbit 7s linear infinite; }

/* Projecteurs qui balaient la scène, teintés par le palier. */
#kqmGame .kqm-beam { opacity: .34; background: linear-gradient(180deg, rgba(var(--show-hue), .75), rgba(var(--show-hue), .12) 55%, transparent 80%); filter: blur(9px); animation: kqm-show-sweep 8s ease-in-out infinite alternate; }
#kqmGame .kqm-beam-b { opacity: .22; animation-duration: 11s; }
#kqmGame .kqm-beam-c { animation-duration: 9.5s; animation-delay: -4s; }
#kqmGame[data-screen="question"] .kqm-studio-backdrop { background: radial-gradient(ellipse at 50% 60%, rgba(var(--show-hue), .38), transparent 46%), radial-gradient(ellipse at 50% 100%, rgba(var(--show-hue), .22), transparent 55%), linear-gradient(180deg, #01020a 0%, #050b2a 46%, #03041a 100%); transition: background 1.2s ease, filter 1.2s ease; }

/* Question finale : le plateau s'éteint, un seul projecteur doré. */
#kqmGame .kqm-studio::after { position: absolute; top: -10%; left: 50%; width: 120%; height: 95%; content: ""; opacity: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 222, 140, .38), transparent 62%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(6px); transform: translateX(-50%); transition: opacity 1.4s ease; pointer-events: none; }
#kqmGame[data-final="true"] .kqm-studio::after { opacity: 1; }
#kqmGame[data-final="true"] .kqm-beam { opacity: .05; }

/* Défaite : le plateau perd ses couleurs. */
#kqmGame:is([data-phase="wrong"], [data-phase="finalAnswerWrong"], [data-phase="defeat"]) .kqm-studio { filter: grayscale(.85) brightness(.7); transition: filter 1s ease; }

/* ---------- Question : capsule télé qui apparaît comme un habillage ---------- */
#kqmGame .kqm-question-frame::before { border-color: rgba(214, 228, 255, .78); background: linear-gradient(180deg, #102a6c 0%, #071648 47%, #040c30 53%, #0b2160 100%); box-shadow: 0 0 30px rgba(var(--show-hue), .35), inset 0 1px 0 rgba(255, 255, 255, .22); }
#kqmGame .kqm-question-frame > i { border-color: #ffd877; background: linear-gradient(135deg, #ffe7a3, #b9801e); box-shadow: 0 0 12px rgba(255, 210, 110, .6); }
#kqmGame .kqm-question h2 { font-weight: 800; letter-spacing: .01em; }
#kqmGame .kqm-question h2.is-revealing { animation: kqm-show-question-in .75s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- Réponses : capsules reliées par la ligne de l'émission ---------- */
#kqmGame .kqm-capsule { position: relative; display: grid; }
#kqmGame .kqm-capsule::before { position: absolute; top: 50%; right: -30px; left: -30px; z-index: 0; height: 2px; content: ""; background: linear-gradient(90deg, transparent, rgba(198, 222, 255, .75) 10%, rgba(198, 222, 255, .75) 90%, transparent); box-shadow: 0 0 8px rgba(var(--show-hue), .6); transform: translateY(-50%); }
#kqmGame .kqm-capsule > .kqm-answer { z-index: 1; }
#kqmGame .kqm-answer { border-color: rgba(214, 228, 255, .8); background: linear-gradient(180deg, #0f2b70 0%, #081a50 46%, #040c2e 54%, #0a1d58 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .4); }
#kqmGame .kqm-answer > b { display: flex; width: auto; align-items: baseline; justify-content: center; color: #ffcf5a; font-size: .95rem; font-weight: 900; text-shadow: 0 0 10px rgba(255, 196, 70, .5); }
#kqmGame .kqm-answer > b::after { content: ":"; margin-left: 1px; }
#kqmGame .kqm-answer > span { color: #fff; font-weight: 700; }
#kqmGame .kqm-answer.is-selected { border-color: #ffe2a0; background: linear-gradient(180deg, #ffb444 0%, #e9860f 46%, #c86a04 54%, #f09a2a 100%); box-shadow: 0 0 34px rgba(255, 150, 30, .65), inset 0 1px 0 rgba(255, 255, 255, .45); }
#kqmGame .kqm-answer.is-selected > b,
#kqmGame .kqm-answer.is-selected > span { color: #1c0d00; text-shadow: none; }
#kqmGame .kqm-answer.is-correct { border-color: #c8ffd9; background: linear-gradient(180deg, #48e08b 0%, #1aa55a 46%, #0c8343 54%, #2cc06e 100%); box-shadow: 0 0 44px rgba(43, 220, 118, .7); animation: kqm-show-blink .34s steps(2, jump-none) 4; }
#kqmGame .kqm-answer.is-correct > b,
#kqmGame .kqm-answer.is-correct > span { color: #02240f; text-shadow: none; }
/* À la télé, la mauvaise réponse choisie reste orange pendant que la bonne clignote en vert. */
#kqmGame .kqm-answer.is-wrong { border-color: #ffd9a8; background: linear-gradient(180deg, #d9862c 0%, #a65a0c 50%, #7d4207 100%); box-shadow: 0 0 22px rgba(255, 120, 40, .4); filter: saturate(.8); }
#kqmGame .kqm-answer.is-wrong > b,
#kqmGame .kqm-answer.is-wrong > span { color: #210f00; text-shadow: none; }
#kqmGame .kqm-answer.is-removed { animation: kqm-show-dissolve .55s ease-out both; }
#kqmGame .kqm-capsule:has(.is-removed)::before { opacity: .3; }
#kqmGame.is-suspense .kqm-question-frame { filter: brightness(.6); transition: filter .5s ease; }
#kqmGame.is-suspense .kqm-answer.is-selected { animation: kqm-show-suspense 1.1s ease-in-out infinite; }

/* ---------- Jokers : les ovales de l'émission ---------- */
#kqmGame .kqm-lifelines button > span { width: 58px; height: 38px; border: 2px solid #d3e1ff; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #2f63d6, #0b2370 62%, #051042); color: #fff; font-weight: 900; box-shadow: 0 0 14px rgba(var(--show-hue), .45), inset 0 2px 0 rgba(255, 255, 255, .25); }
#kqmGame .kqm-lifelines button > span svg { width: 21px; height: 21px; }
#kqmGame .kqm-lifelines button.is-used { opacity: .72; }
#kqmGame .kqm-lifelines button.is-used > span { filter: grayscale(.7) brightness(.6); }
#kqmGame .kqm-lifelines button.is-used > span::after { position: absolute; inset: -4px 6px; content: ""; background: linear-gradient(32deg, transparent 45%, #ff2f45 45% 55%, transparent 55%), linear-gradient(-32deg, transparent 45%, #ff2f45 45% 55%, transparent 55%); filter: drop-shadow(0 0 4px rgba(255, 40, 60, .8)); animation: kqm-show-stamp .35s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Quitter : un vrai bouton « Je m'arrête · 75 KP ». */
#kqmGame .kqm-quit { display: grid; grid-template-columns: 1fr; align-content: center; justify-items: center; gap: 1px; padding: 6px 12px; border: 1px solid rgba(255, 216, 120, .6); border-radius: 0; background: linear-gradient(180deg, rgba(60, 38, 6, .9), rgba(18, 10, 2, .92)); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
#kqmGame .kqm-quit small { color: rgba(255, 240, 200, .8); font-size: .56rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
#kqmGame .kqm-quit strong { color: #ffd46a; font-size: .78rem; white-space: nowrap; }

/* ---------- Mr SkyJames : bandeau sous-titre façon télé ---------- */
#kqmGame .kqm-presenter img { animation: kqm-show-breathe 5.5s ease-in-out infinite; }
#kqmGame .kqm-presenter figcaption { border-left: 0; border-top: 2px solid #ffcf5a; background: linear-gradient(90deg, rgba(3, 8, 30, .96), rgba(10, 24, 74, .9) 70%, rgba(3, 8, 30, .7)); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
#kqmGame .kqm-presenter figcaption small { justify-self: start; padding: 2px 8px; background: #ffcf5a; color: #1b1000; letter-spacing: .14em; }
#kqmGame .kqm-presenter figcaption span { color: #fff; font-weight: 600; }

/* ---------- Compteur de questions : ouvre la pyramide ---------- */
#kqmGame .kqm-question-counter { position: relative; cursor: pointer; }
#kqmGame .kqm-pyramid-hint { position: absolute; right: 5px; bottom: 4px; width: 9px; height: 7px; background: #ffcf5a; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .85; }

/* ---------- Montée de la pyramide après une bonne réponse ---------- */
#kqmGame .kqm-climb { position: absolute; z-index: 24; inset: 0; display: grid; place-items: center; padding: 16px; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(var(--show-hue), .32), transparent 70%), rgba(2, 3, 13, .97); pointer-events: none; transition: opacity .25s ease; }
#kqmGame .kqm-climb.is-visible { opacity: 1; }
#kqmGame .kqm-climb-card { display: grid; justify-items: center; gap: 6px; width: min(100%, 320px); padding: 18px 14px 14px; border: 1px solid rgba(214, 228, 255, .35); background: linear-gradient(180deg, rgba(8, 22, 70, .95), rgba(2, 6, 22, .97)); box-shadow: 0 0 50px rgba(var(--show-hue), .3); transform: scale(.94); transition: transform .35s cubic-bezier(.2, 1.3, .4, 1); }
#kqmGame .kqm-climb.is-visible .kqm-climb-card { transform: none; }
#kqmGame .kqm-climb-card > small { color: #7dffb0; font-size: .62rem; font-weight: 900; letter-spacing: .24em; }
#kqmGame .kqm-climb-amount { color: #ffd46a; font-size: 2.3rem; font-weight: 900; line-height: 1; text-shadow: 0 0 26px rgba(255, 200, 80, .6); font-variant-numeric: tabular-nums; }
#kqmGame .kqm-climb ol { position: relative; display: grid; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; }
#kqmGame .kqm-climb li { position: relative; z-index: 1; display: grid; grid-template-columns: 30px 1fr; align-items: center; min-height: 23px; padding: 0 14px; color: rgba(230, 236, 255, .55); font-size: .74rem; font-weight: 800; }
#kqmGame .kqm-climb li span { color: rgba(140, 186, 255, .8); }
#kqmGame .kqm-climb li b { justify-self: end; }
#kqmGame .kqm-climb li.is-safe { color: #fff; }
#kqmGame .kqm-climb li.is-passed { color: rgba(255, 210, 120, .8); }
#kqmGame .kqm-climb li.is-reached { color: #1b0f00; transition: color .2s ease .6s; }
#kqmGame .kqm-climb li.is-reached span { color: #3a2400; transition: color .2s ease .6s; }
#kqmGame .kqm-climb-marker { position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 23px; background: linear-gradient(180deg, #ffd27a, #e98b14); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); box-shadow: 0 0 20px rgba(255, 170, 40, .8); transition: transform .75s cubic-bezier(.3, 1.3, .5, 1); }

/* ---------- Paliers, victoire : confettis dorés et chèque géant ---------- */
#kqmGame .kqm-confetti { position: absolute; top: -12px; left: var(--x); z-index: 30; width: 8px; height: 13px; border-radius: 2px; pointer-events: none; animation: kqm-show-confetti var(--duration) cubic-bezier(.25, .6, .45, 1) var(--delay) both; }
#kqmGame .kqm-milestone > div { animation: kqm-show-stamp .55s cubic-bezier(.2, 1.4, .4, 1) both; }
#kqmGame .kqm-milestone > div > p::before { content: "GARANTIS · "; color: #ffd46a; font-weight: 900; letter-spacing: .14em; }

#kqmGame .kqm-cheque { position: relative; display: grid; width: min(100%, 460px); gap: 6px; margin-top: 10px; padding: 14px 18px 12px; border: 2px solid #b98a2c; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px), linear-gradient(135deg, #fff8e1, #f3dfa6); color: #2a1a00; text-align: left; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transform: rotate(-2deg); animation: kqm-show-cheque .9s cubic-bezier(.2, 1.3, .4, 1) .3s both; }
#kqmGame .kqm-cheque header { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(90, 60, 0, .35); padding-bottom: 5px; }
#kqmGame .kqm-cheque header small { color: #7a5200; font-size: .6rem; font-weight: 900; letter-spacing: .16em; }
#kqmGame .kqm-cheque header em { color: #5a3d00; font-size: .62rem; }
#kqmGame .kqm-cheque p { margin: 2px 0 0; color: #4a3200; font-size: .74rem; }
#kqmGame .kqm-cheque p b { color: #1a0f00; font-size: .9rem; }
#kqmGame .kqm-cheque strong { color: #8a5a00; font-size: 1.5rem; letter-spacing: .06em; text-shadow: none; }
#kqmGame .kqm-cheque span { color: #5a3d00; font-size: .7rem; font-style: italic; }
#kqmGame .kqm-cheque footer { justify-self: end; }
#kqmGame .kqm-cheque footer i { color: #1f2f7a; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.2rem; }

/* ---------- Écran titre : logo rayonnant et bouton qui pulse ---------- */
#kqmGame .kqm-menu-emblem { position: relative; }
#kqmGame .kqm-menu-emblem::before { position: absolute; inset: -38%; z-index: -1; content: ""; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .22) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: kqm-show-orbit 28s linear infinite; }
#kqmGame .kqm-menu-emblem img { animation: kqm-show-float 6s ease-in-out infinite; }
#kqmGame .kqm-play-button { border-color: #ffe3a0; background: linear-gradient(180deg, #ffbf4a, #e3860f 50%, #c66b04 51%, #f0a030); color: #1d0f00; font-weight: 900; animation: kqm-show-pulse 2.2s ease-in-out infinite; }

/* ---------- Choix du son : lisible ---------- */
.kqm-sound-prompt-card > div .kqm-primary,
.kqm-sound-prompt-card > div .kqm-primary strong { color: #1d1200; }
.kqm-sound-prompt-card > div .kqm-primary small { color: rgba(40, 26, 0, .78); }

/* ---------- Téléphone en portrait : plateau plein écran, pyramide en tiroir ---------- */
@media (max-width: 720px) and (orientation: portrait) {
  #kqmGame.is-immersive[data-screen="question"] .kqm-stage { grid-template-rows: 190px minmax(0, 1fr) 0; }
  #kqmGame.is-immersive.is-audience-visible[data-screen="question"] .kqm-stage { grid-template-rows: 130px minmax(0, 1fr) 0; }
  #kqmGame.is-immersive .kqm-presenter { grid-template-columns: 1fr; }
  #kqmGame.is-immersive .kqm-presenter img { position: absolute; bottom: 0; left: 4px; width: 150px; height: 100%; max-height: none; }
  #kqmGame.is-immersive .kqm-presenter-orbit { top: 10px; left: 80px; width: 150px; }
  #kqmGame.is-immersive .kqm-presenter figcaption { position: absolute; grid-area: auto; right: 10px; bottom: 14px; left: 118px; width: auto; min-height: 0; padding: 8px 12px 9px; }
  #kqmGame.is-immersive .kqm-presenter figcaption span { min-height: 2.6em; font-size: .74rem; line-height: 1.32; }
  #kqmGame.is-immersive .kqm-content { padding: 6px 14px 12px; }
  #kqmGame.is-immersive .kqm-question h2 { min-height: 84px; font-size: clamp(1.02rem, 4.9vw, 1.28rem); }
  #kqmGame.is-immersive .kqm-answers { gap: 9px; }
  #kqmGame.is-immersive .kqm-answer { min-height: 56px; padding: 8px 20px; }
  #kqmGame.is-immersive .kqm-answer > span { font-size: clamp(.86rem, 4vw, 1rem); }

  /* La pyramide sort du côté quand on touche le compteur de questions. */
  #kqmGame.is-immersive .kqm-ladder { position: absolute; grid-area: auto; top: 6px; right: 6px; bottom: auto; left: auto; z-index: 15; display: block; width: 176px; height: auto; max-height: calc(100% - 12px); padding: 10px 8px; overflow: auto; border: 1px solid rgba(214, 228, 255, .45); background: linear-gradient(180deg, rgba(6, 14, 46, .97), rgba(2, 5, 20, .97)); box-shadow: -10px 0 40px rgba(0, 0, 0, .6); opacity: 0; transform: translateX(calc(100% + 20px)); transition: transform .35s cubic-bezier(.2, .9, .3, 1), opacity .25s ease; pointer-events: none; }
  #kqmGame.is-immersive.is-ladder-open .kqm-ladder { opacity: 1; transform: none; pointer-events: auto; }
  #kqmGame.is-immersive .kqm-ladder header { display: grid; padding: 0 6px 6px; text-align: left; }
  #kqmGame.is-immersive .kqm-ladder ol { display: grid; width: auto; min-width: 0; gap: 1px; margin: 0; }
  #kqmGame.is-immersive .kqm-ladder li { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto; justify-items: stretch; width: auto; min-height: 24px; padding: 2px 10px; font-size: .7rem; }
  #kqmGame.is-immersive .kqm-ladder li strong { justify-self: end; }
  #kqmGame.is-immersive .kqm-ladder li.is-current { transform: none; }

  #kqmGame .kqm-final-result-card { box-sizing: border-box; width: 92%; min-width: 0; padding: 24px 14px; }
  #kqmGame .kqm-final-result-card h2 { max-width: 100%; font-size: clamp(1.6rem, 8.6vw, 2.4rem); }
  #kqmGame .kqm-cheque { box-sizing: border-box; width: 100%; padding: 12px 14px 10px; }
  #kqmGame .kqm-cheque strong { font-size: 1.25rem; }
  #kqmGame.is-immersive .kqm-controls { gap: 10px; }
  #kqmGame.is-immersive .kqm-lifelines button { width: 64px; min-width: 64px; }
  #kqmGame.is-immersive .kqm-lifelines button > span { width: 56px; height: 36px; }
  #kqmGame.is-immersive .kqm-quit { min-width: 112px; min-height: 50px; }
}

/* ---------- Animations ---------- */
@keyframes kqm-show-orbit { to { transform: rotate(360deg); } }
@keyframes kqm-show-sweep { 0% { rotate: -14deg; } 100% { rotate: 14deg; } }
@keyframes kqm-show-question-in { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); letter-spacing: .08em; } 60% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); letter-spacing: .01em; } }
@keyframes kqm-show-blink { 0% { filter: brightness(1.25); } 50% { filter: brightness(.55); } 100% { filter: brightness(1.25); } }
@keyframes kqm-show-dissolve { 0% { opacity: 1; filter: brightness(2.2) blur(0); } 100% { opacity: .14; filter: grayscale(1) blur(1.5px); } }
@keyframes kqm-show-suspense { 0%, 100% { box-shadow: 0 0 22px rgba(255, 150, 30, .45); } 50% { box-shadow: 0 0 46px rgba(255, 170, 40, .9); } }
@keyframes kqm-show-stamp { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kqm-show-breathe { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -2px; scale: 1.012; } }
@keyframes kqm-show-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), 105vh) rotate(var(--spin)); } }
@keyframes kqm-show-cheque { 0% { opacity: 0; transform: rotate(-14deg) scale(.4) translateY(80px); } 100% { opacity: 1; transform: rotate(-2deg) scale(1); } }
@keyframes kqm-show-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes kqm-show-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(255, 180, 60, .35); } 50% { box-shadow: 0 0 34px rgba(255, 190, 70, .8); } }

@media (prefers-reduced-motion: reduce) {
  #kqmGame .kqm-studio-rings::before, #kqmGame .kqm-beam, #kqmGame .kqm-presenter img, #kqmGame .kqm-menu-emblem::before, #kqmGame .kqm-menu-emblem img, #kqmGame .kqm-play-button, #kqmGame.is-suspense .kqm-answer.is-selected { animation: none; }
}
html.app-reduced-motion #kqmGame :is(.kqm-studio-rings, .kqm-beam, .kqm-presenter img, .kqm-menu-emblem, .kqm-menu-emblem img, .kqm-play-button, .kqm-answer)::before,
html.app-reduced-motion #kqmGame :is(.kqm-beam, .kqm-presenter img, .kqm-menu-emblem img, .kqm-play-button) { animation: none; }

/* ---------- En partie : plus de projecteurs qui balaient (ça fatigue les yeux) ---------- */
#kqmGame:not([data-screen="menu"]) .kqm-beam { opacity: .1; animation: none; rotate: 0deg; }
#kqmGame:not([data-screen="menu"]) .kqm-beam-b { opacity: .07; }

/* ---------- Boutons de jokers : reflet, pression, joker en cours ---------- */
#kqmGame .kqm-lifelines button > span { overflow: hidden; transition: transform .18s ease, box-shadow .25s ease; }
#kqmGame .kqm-lifelines button:not(.is-used) > span::before { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: kqm-joker-shine 4.5s ease-in-out infinite; }
#kqmGame .kqm-lifelines button:nth-child(2):not(.is-used) > span::before { animation-delay: 1.5s; }
#kqmGame .kqm-lifelines button:nth-child(3):not(.is-used) > span::before { animation-delay: 3s; }
#kqmGame .kqm-lifelines button:active:not(:disabled) > span { transform: scale(.92); }
#kqmGame[data-joker="fifty"] #kqmFifty > span,
#kqmGame[data-joker="phone"] #kqmPhone > span,
#kqmGame[data-joker="audience"] #kqmAudienceButton > span { border-color: #ffe08a; box-shadow: 0 0 26px rgba(255, 200, 80, .9); filter: none; }
#kqmGame .kqm-lifelines button small { color: rgba(232, 237, 250, .7); }

/* ---------- Écran de joker : un décor par joker ---------- */
#kqmGame .kqm-joker-sequence > div > :is(.kqm-fx-fifty, .kqm-fx-call, .kqm-fx-vote) { display: none; }
#kqmGame[data-joker] .kqm-joker-sequence { background: radial-gradient(ellipse at 50% 46%, rgba(var(--show-hue), .45), transparent 66%), rgba(1, 3, 14, .97); }
/* Les anciens cercles tournants de l'écran de joker faisaient doublon avec les nouveaux décors. */
#kqmGame .kqm-joker-sequence::before,
#kqmGame .kqm-joker-sequence::after { display: none; }

/* 50:50 : l'emblème se coupe en deux, un éclair balaie l'écran. */
#kqmGame[data-joker="fifty"] .kqm-joker-sequence > div > .kqm-fx-fifty { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: min(80vw, 420px); height: 120px; }
#kqmGame .kqm-fx-fifty b { display: grid; place-items: center; width: 118px; height: 92px; border: 3px solid #e3ecff; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #3b74ee, #0c2675 62%, #04103f); color: #fff; font-size: 2.6rem; font-weight: 900; box-shadow: 0 0 30px rgba(80, 140, 255, .7), inset 0 3px 0 rgba(255, 255, 255, .3); }
#kqmGame .kqm-fx-fifty em { color: #ffd46a; font-size: 2.4rem; font-style: normal; font-weight: 900; }
#kqmGame .kqm-fx-fifty .is-left { animation: kqm-fifty-left 1.6s cubic-bezier(.6, 0, .3, 1) .5s both; }
#kqmGame .kqm-fx-fifty .is-right { animation: kqm-fifty-right 1.6s cubic-bezier(.6, 0, .3, 1) .5s both; }
#kqmGame .kqm-fx-fifty > i { position: absolute; top: 50%; right: -30%; left: -30%; height: 4px; background: linear-gradient(90deg, transparent, #fff, #ffd46a, #fff, transparent); box-shadow: 0 0 22px #fff; opacity: 0; transform: translateY(-50%) scaleX(0); animation: kqm-fifty-slash .7s ease-out 1.1s both; }
#kqmGame .kqm-answer.is-removed::after { opacity: 1; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); animation: kqm-removed-slice .6s ease-out both; }

/* Appel à un ami : un écran d'appel avec ondes, minuteur et boutons. */
#kqmGame[data-joker="phone"] .kqm-joker-sequence > div { display: flex; flex-direction: column; align-items: center; }
#kqmGame[data-joker="phone"] .kqm-joker-sequence > div > .kqm-fx-call { display: grid; justify-items: center; gap: 6px; order: 2; }
#kqmGame[data-joker="phone"] .kqm-joker-sequence > div > small { order: 0; }
#kqmGame[data-joker="phone"] .kqm-joker-sequence > div > img { order: 1; width: 132px; height: 132px; max-height: none; border: 3px solid #e3ecff; border-radius: 50%; background: #0b1d5c; object-fit: cover; box-shadow: 0 0 0 6px rgba(80, 140, 255, .25), 0 0 40px rgba(80, 140, 255, .6); }
#kqmGame[data-joker="phone"] .kqm-joker-sequence > div > h2 { order: 3; font-size: clamp(1.3rem, 6vw, 2.6rem); }
#kqmGame[data-joker="phone"] .kqm-joker-sequence > div > span { order: 4; }
#kqmGame .kqm-fx-call-rings { position: relative; width: 0; height: 0; }
#kqmGame .kqm-fx-call-rings i { position: absolute; top: -166px; left: -86px; width: 172px; height: 172px; border: 2px solid rgba(125, 190, 255, .7); border-radius: 50%; opacity: 0; animation: kqm-call-wave 2.1s ease-out infinite; }
#kqmGame .kqm-fx-call-rings i:nth-child(2) { animation-delay: .7s; }
#kqmGame .kqm-fx-call-rings i:nth-child(3) { animation-delay: 1.4s; }
#kqmGame .kqm-joker-sequence:not(.is-connected) .kqm-fx-call-rings i { top: -20px; }
#kqmGame .kqm-fx-call-state { color: #8fd0ff; font-size: .7rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; animation: kqm-call-blink 1.2s ease-in-out infinite; }
#kqmGame .kqm-joker-sequence.is-connected .kqm-fx-call-state { color: #7dffb0; animation: none; }
#kqmGame .kqm-fx-call-timer { color: #fff; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
#kqmGame .kqm-fx-call-buttons { display: flex; gap: 22px; margin-top: 8px; }
#kqmGame .kqm-fx-call-buttons i { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14) center / 22px no-repeat; }
#kqmGame .kqm-fx-call-buttons .is-hang { background-color: #e5384f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 9c-1.6 0-3.1.3-4.6.7v3.1c0 .4-.2.7-.6.9-1 .5-1.9 1.1-2.7 1.8-.2.2-.4.3-.7.3s-.5-.1-.7-.3L.3 13.1c-.2-.2-.3-.4-.3-.7s.1-.5.3-.7C3.3 8.9 7.4 7 12 7s8.7 1.9 11.7 4.7c.2.2.3.4.3.7s-.1.5-.3.7l-2.5 2.5c-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.8-.7-1.7-1.3-2.7-1.8-.4-.2-.6-.5-.6-.9V9.7C15.1 9.3 13.6 9 12 9z'/%3E%3C/svg%3E"); }
#kqmGame .kqm-fx-call-buttons .is-mute { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11z'/%3E%3C/svg%3E"); }
#kqmGame .kqm-fx-call-buttons .is-speaker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); }

/* La réponse de l'ami : une carte d'appel avec le compte à rebours de 30 secondes. */
#kqmGame .kqm-friend-hint { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 4px 12px; overflow: hidden; padding: 12px 14px 16px; border: 1px solid rgba(214, 228, 255, .45); border-radius: 16px; background: linear-gradient(135deg, rgba(14, 34, 96, .95), rgba(4, 10, 36, .95)); box-shadow: 0 0 30px rgba(80, 140, 255, .3); }
#kqmGame .kqm-friend-hint[hidden] { display: none; }
#kqmGame .kqm-friend-hint img { grid-row: 1 / 3; float: none; width: 52px; height: 52px; margin: 0; border: 2px solid #e3ecff; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(125, 255, 176, .5); }
#kqmGame .kqm-friend-hint small { margin: 0; color: #7dffb0; letter-spacing: .14em; }
#kqmGame .kqm-friend-hint small::before { content: "● "; animation: kqm-call-blink 1s ease-in-out infinite; }
#kqmGame .kqm-friend-hint strong { position: relative; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: #fff; color: #10183a; font-size: .84rem; font-weight: 700; line-height: 1.38; animation: kqm-bubble-in .5s cubic-bezier(.2, 1.3, .4, 1) .15s both; }
#kqmGame .kqm-call-countdown { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg, #7dffb0, #ffd46a, #ff4d5e); transform-origin: left; animation: kqm-call-countdown 30s linear both; }

/* Vote du public : boîtiers qui clignotent, puis l'histogramme télé. */
#kqmGame[data-joker="audience"] .kqm-joker-sequence > div > .kqm-fx-vote { display: grid; justify-items: center; gap: 10px; }
#kqmGame .kqm-fx-keypad { display: grid; grid-template-columns: repeat(12, 14px); gap: 7px; padding: 12px; border: 1px solid rgba(214, 228, 255, .3); border-radius: 12px; background: rgba(2, 8, 30, .7); }
#kqmGame .kqm-fx-keypad i { width: 14px; height: 14px; border-radius: 4px; background: #13306f; animation: kqm-keypad var(--speed) steps(1) var(--blink) infinite; }
#kqmGame .kqm-fx-vote-label { color: #8fd0ff; font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
#kqmGame .kqm-audience { position: relative; gap: 12px; padding: 14px 16px 10px; border: 1px solid rgba(214, 228, 255, .4); border-radius: 14px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 25%), linear-gradient(180deg, rgba(9, 24, 74, .95), rgba(2, 6, 24, .97)); box-shadow: 0 0 34px rgba(var(--show-hue), .3); }
#kqmGame .kqm-audience[hidden] { display: none; }
#kqmGame .kqm-audience > div { height: 130px; gap: 5px; }
#kqmGame .kqm-audience i { border-radius: 4px 4px 0 0; background: linear-gradient(0deg, #1f4fc2, #6fb2ff 70%, #dff0ff); box-shadow: 0 0 14px rgba(90, 160, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .7); transform-origin: bottom; animation: kqm-bar-rise .9s cubic-bezier(.2, 1.2, .4, 1) var(--bar-delay, 0ms) both; }
#kqmGame .kqm-audience > div.is-top i { background: linear-gradient(0deg, #c06d06, #ffb946 70%, #fff1c4); box-shadow: 0 0 20px rgba(255, 180, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .8); }
#kqmGame .kqm-audience b { color: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; }
#kqmGame .kqm-audience > div.is-top b { color: #ffd46a; }
#kqmGame .kqm-audience span { color: #ffcf5a; }
#kqmGame .kqm-audience.is-pending i { height: 30% !important; opacity: .6; animation: kqm-bar-voting .45s ease-in-out infinite alternate; }
#kqmGame .kqm-audience.is-pending > div:nth-child(2) i { animation-delay: .12s; }
#kqmGame .kqm-audience.is-pending > div:nth-child(3) i { animation-delay: .24s; }
#kqmGame .kqm-audience.is-pending > div:nth-child(4) i { animation-delay: .36s; }

@keyframes kqm-joker-shine { 0%, 70% { left: -60%; } 100% { left: 140%; } }
@keyframes kqm-fifty-left { 0%, 30% { transform: translateX(0) rotate(0); } 100% { opacity: .9; transform: translateX(-34px) rotate(-8deg); } }
@keyframes kqm-fifty-right { 0%, 30% { transform: translateX(0) rotate(0); } 100% { opacity: .9; transform: translateX(34px) rotate(8deg); } }
@keyframes kqm-fifty-slash { 0% { opacity: 0; transform: translateY(-50%) scaleX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scaleX(1); } }
@keyframes kqm-removed-slice { 0% { left: -40%; } 100% { left: 110%; } }
@keyframes kqm-call-wave { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes kqm-call-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes kqm-bubble-in { 0% { opacity: 0; transform: translateY(8px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes kqm-call-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes kqm-keypad { 0% { background: #13306f; } 50% { background: #ffd46a; box-shadow: 0 0 8px #ffd46a; } }
@keyframes kqm-bar-rise { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes kqm-bar-voting { from { transform: scaleY(.4); } to { transform: scaleY(1.6); } }

@media (prefers-reduced-motion: reduce) {
  #kqmGame .kqm-lifelines button > span::before, #kqmGame .kqm-fx-call-rings i, #kqmGame .kqm-fx-keypad i, #kqmGame .kqm-audience i, #kqmGame .kqm-fx-fifty * { animation: none; }
}

/* ---------- En partie : décor fixe (ni anneau qui tourne ni projecteurs), pyramide jamais visible au lancement ---------- */
#kqmGame:not([data-screen="menu"]) .kqm-studio-rings::before { animation: none; opacity: 0; }
#kqmGame:not([data-screen="menu"]) .kqm-beam { display: none; }
@media (max-width: 720px) and (orientation: portrait) {
  #kqmGame.is-immersive .kqm-ladder { animation: none !important; transition: none; }
  #kqmGame.is-immersive.is-ladder-open .kqm-ladder { transition: transform .35s cubic-bezier(.2, .9, .3, 1), opacity .25s ease; }
}

/* ---------- Bandeau de question et entrée des réponses ---------- */
#kqmGame .kqm-qcard { position: absolute; top: 40%; right: 0; left: 0; z-index: 23; display: grid; place-items: center; pointer-events: none; }
#kqmGame .kqm-qcard > div { display: grid; justify-items: center; gap: 2px; width: 100%; padding: 14px 0 12px; border-top: 2px solid #ffd46a; border-bottom: 2px solid #ffd46a; background: linear-gradient(90deg, transparent, rgba(6, 16, 56, .97) 12%, rgba(12, 32, 100, .97) 50%, rgba(6, 16, 56, .97) 88%, transparent); box-shadow: 0 0 50px rgba(var(--show-hue), .55); animation: kqm-qcard 1.45s cubic-bezier(.7, 0, .3, 1) both; }
#kqmGame .kqm-qcard small { color: #8fd0ff; font-size: .62rem; font-weight: 900; letter-spacing: .24em; }
#kqmGame .kqm-qcard strong { color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: .08em; text-shadow: 0 0 20px rgba(var(--show-hue), .9); }
#kqmGame .kqm-qcard em { color: #ffd46a; font-size: .9rem; font-style: normal; font-weight: 900; letter-spacing: .16em; }
#kqmGame .kqm-answers.is-entering .kqm-capsule { animation: kqm-capsule-left .55s cubic-bezier(.2, .9, .3, 1) var(--answer-delay, 0ms) both; }
#kqmGame .kqm-answers.is-entering .kqm-capsule:nth-child(even) { animation-name: kqm-capsule-right; }
#kqmGame .kqm-question-frame { overflow: hidden; }
#kqmGame .kqm-question h2.is-revealing::after { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: kqm-question-sweep 1s ease-out .3s both; }
@keyframes kqm-qcard { 0% { opacity: 0; transform: scaleY(0) translateX(-30%); } 18% { opacity: 1; transform: scaleY(1) translateX(0); } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(30%); } }
@keyframes kqm-capsule-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes kqm-capsule-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes kqm-question-sweep { from { left: -40%; } to { left: 120%; } }
@media (prefers-reduced-motion: reduce) { #kqmGame .kqm-qcard, #kqmGame .kqm-answers.is-entering .kqm-capsule { animation: none; } }

/* QVGDK ne se joue qu'en plein écran : la page « Disponible maintenant » derrière n'est jamais visible. */
#hubKafmillionView > .app-view-heading { display: none; }
#hubKafmillionView #kqmGame:not(.is-immersive) { visibility: hidden; }
#hubKafmillionView { min-height: 100dvh; background: #01020a; }

/* ---------- Plus calme : la lisibilité d'aujourd'hui, la sobriété d'avant ---------- */
/* Plus de bandeau « Question N » plein écran à chaque question : la question arrive en fondu, les réponses suivent. */
#kqmGame .kqm-qcard { display: none !important; }
#kqmGame .kqm-question h2.is-revealing { animation: kqm-calm-in .4s ease-out both; }
#kqmGame .kqm-question h2.is-revealing::after { display: none; }
#kqmGame .kqm-answers.is-entering .kqm-capsule,
#kqmGame .kqm-answers.is-entering .kqm-capsule:nth-child(even) { animation: kqm-calm-rise .35s ease-out var(--answer-delay, 0ms) both; }
/* Décor immobile et discret pendant la partie. */
#kqmGame .kqm-presenter img { animation: none; }
#kqmGame .kqm-lifelines button > span::before { display: none; }
#kqmGame:not([data-screen="menu"]) .kqm-studio-rings i { border-color: rgba(var(--show-hue), .12); box-shadow: none; }
#kqmGame .kqm-friend-hint small::before { animation: none; }
#kqmGame .kqm-call-countdown { display: none; }
/* Vote du public : les barres montent l'une après l'autre, plus lentement. */
#kqmGame .kqm-audience i { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.25, .8, .3, 1); }
@keyframes kqm-calm-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kqm-calm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Les lignes de l'émission s'arrêtent aux capsules : elles ne barrent plus le texte des réponses éteintes. */
#kqmGame .kqm-capsule::before { -webkit-mask: linear-gradient(90deg, #000 0 30px, transparent 30px calc(100% - 30px), #000 calc(100% - 30px)); mask: linear-gradient(90deg, #000 0 30px, transparent 30px calc(100% - 30px), #000 calc(100% - 30px)); }

/* Joker utilisé : une seule croix (l'ancienne barre rouge faisait doublon). */
#kqmGame .kqm-lifelines button.is-used::after { display: none; }

/* Téléphone : la carte de l'ami et le vote du public prennent la place du présentateur, jamais de défilement. */
@media (max-width: 720px) and (orientation: portrait) {
  #kqmGame.is-immersive.has-friend-hint[data-screen="question"] .kqm-stage,
  #kqmGame.is-immersive.is-audience-visible[data-screen="question"] .kqm-stage { grid-template-rows: 0 minmax(0, 1fr) 0; }
  #kqmGame.is-immersive:is(.has-friend-hint, .is-audience-visible)[data-screen="question"] .kqm-presenter { visibility: hidden; overflow: hidden; }
  #kqmGame.is-immersive:is(.has-friend-hint, .is-audience-visible) .kqm-question h2 { min-height: 0; }
  #kqmGame.is-immersive:is(.has-friend-hint, .is-audience-visible) .kqm-answer { min-height: 48px; }
  #kqmGame.is-immersive .kqm-friend-hint { margin-top: 10px; padding: 10px 12px; }
  #kqmGame.is-immersive .kqm-friend-hint strong { font-size: .8rem; }
  #kqmGame.is-immersive .kqm-audience { margin-top: 10px; padding: 10px 12px 8px; }
  #kqmGame.is-immersive .kqm-audience > div { height: 104px; }
}

/* Pyramide (à partir de 40 KP) : les marches montent l'une après l'autre, de la base au sommet. */
@keyframes kqm-climb-step { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#kqmGame .kqm-climb.is-visible li { animation: kqm-climb-step .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--row, 0) * 22ms); }
html.app-reduced-motion #kqmGame .kqm-climb li { animation: none; }
@media (prefers-reduced-motion: reduce) { #kqmGame .kqm-climb li { animation: none; } }