:root {
  --kqm-night: #05071a;
  --kqm-panel: #0d1231;
  --kqm-blue: #1976ff;
  --kqm-cyan: #5ce9ff;
  --kqm-gold: #ffd45f;
  --kqm-line: rgba(111, 199, 255, .34);
}

.hub-community-game-locked { opacity: .48; cursor: not-allowed !important; filter: saturate(.55); }
.hub-community-game-locked > span { color: var(--kqm-gold) !important; border-color: rgba(255,212,95,.38) !important; background: rgba(15,22,65,.7) !important; }
.hub-more-grid .hub-more-standby { position: relative; opacity: .5; filter: saturate(.55); }
.hub-more-grid .hub-more-standby::after { position: absolute; top: 7px; right: 7px; content: "BIENTÔT"; color: var(--kqm-gold); font-size: .46rem; font-weight: 950; letter-spacing: .08em; }

.kqm-view { padding-bottom: 28px; }
.kqm-game { position: relative; width: calc(100% - 24px); min-height: 680px; margin: 0 12px 24px; overflow: hidden; border: 1px solid var(--kqm-line); border-radius: 14px; background: var(--kqm-night); color: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.42); isolation: isolate; }
.kqm-game::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 28% 32%,rgba(21,95,221,.34),transparent 31%),radial-gradient(circle at 70% 80%,rgba(90,35,167,.24),transparent 35%),linear-gradient(155deg,#090d2a,#040515 70%); }
.kqm-game::after { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .13; background: repeating-linear-gradient(90deg,transparent 0 79px,rgba(102,201,255,.2) 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(102,201,255,.14) 80px); mask-image: linear-gradient(to bottom,transparent,#000 28%,#000); pointer-events: none; }

.kqm-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 12px 18px; border-bottom: 1px solid rgba(92,233,255,.18); background: rgba(5,8,27,.82); backdrop-filter: blur(18px); }
.kqm-brand { display: flex; align-items: center; gap: 11px; }
.kqm-brand > span { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid var(--kqm-gold); border-radius: 50%; background: #101844; color: var(--kqm-gold); box-shadow: 0 0 24px rgba(25,118,255,.5),inset 0 0 16px rgba(92,233,255,.14); font-size: 1.45rem; font-weight: 1000; }
.kqm-brand strong { font-size: .72rem; line-height: 1.13; letter-spacing: .08em; }
.kqm-question-counter { display: grid; justify-items: center; gap: 2px; padding: 7px 18px; border-right: 1px solid var(--kqm-line); border-left: 1px solid var(--kqm-line); }
.kqm-question-counter small { color: var(--kqm-cyan); font-size: .52rem; font-weight: 900; letter-spacing: .14em; }
.kqm-question-counter strong { font-size: .92rem; }
.kqm-top-counters { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.kqm-reward-counter { display: grid; min-width: 92px; justify-items: center; gap: 2px; padding: 7px 12px; border: 1px solid rgba(245,200,91,.34); border-radius: 8px; background: rgba(55,35,7,.3); }
.kqm-reward-counter small { color: var(--kqm-gold); font-size: .5rem; font-weight: 900; letter-spacing: .1em; }
.kqm-reward-counter strong { color: var(--kqm-gold); font-size: .82rem; }
.kqm-top-actions { display: flex; align-items: center; gap: 8px; }
.kqm-top-actions button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--kqm-line); border-radius: 50%; background: rgba(9,15,50,.8); color: #fff; font-size: 1.08rem; cursor: pointer; }
.kqm-top-actions button:hover { border-color: var(--kqm-gold); color: var(--kqm-gold); }
.kqm-game.is-muted #kqmSoundToggle { border-color: rgba(255,92,112,.5); background: rgba(81,24,38,.72); }

.kqm-stage { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(340px,1.45fr) minmax(176px,.55fr); min-height: 510px; }
.kqm-presenter { position: relative; display: flex; min-width: 0; align-items: end; justify-content: center; margin: 0; overflow: hidden; border-right: 1px solid rgba(92,233,255,.14); background: linear-gradient(to top,rgba(10,26,71,.86),transparent 64%); }
.kqm-presenter-light { position: absolute; top: -18%; left: 12%; width: 76%; height: 86%; background: conic-gradient(from 160deg at 50% 0,transparent 0 38%,rgba(80,170,255,.25) 45%,transparent 54%); filter: blur(10px); transform-origin: top; animation: kqm-light-sweep 7s ease-in-out infinite alternate; }
.kqm-presenter img { position: relative; z-index: 1; width: min(94%,310px); max-height: 88%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 22px rgba(0,0,0,.6)); transition: filter 420ms ease,transform 420ms cubic-bezier(.2,.8,.2,1); }
.kqm-presenter figcaption { position: absolute; z-index: 2; right: 10px; bottom: 12px; left: 10px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(4,7,25,.78); color: rgba(255,255,255,.78); font-size: .62rem; line-height: 1.35; text-align: center; backdrop-filter: blur(12px); }
.kqm-game[data-mood="easy"] .kqm-presenter img { filter: drop-shadow(0 16px 22px rgba(0,0,0,.6)) saturate(1.08) brightness(1.08); transform: translateY(3px) scale(1.02); }
.kqm-game[data-mood="hard"] .kqm-presenter img { filter: drop-shadow(0 16px 22px rgba(0,0,0,.6)) contrast(1.14) saturate(.72) hue-rotate(8deg); transform: scale(1.055); }
.kqm-game[data-mood="suspense"] .kqm-presenter img { filter: drop-shadow(0 16px 22px rgba(0,0,0,.6)) contrast(1.25) brightness(.72); transform: scale(1.08); }
.kqm-game[data-mood="correct"] .kqm-presenter img { filter: drop-shadow(0 0 26px rgba(82,235,159,.55)) saturate(1.2) brightness(1.12); }
.kqm-game[data-mood="wrong"] .kqm-presenter img { filter: grayscale(.72) contrast(1.2) brightness(.72); transform: translateY(8px); }

.kqm-content { display: grid; place-items: center; min-width: 0; padding: clamp(18px,3vw,34px); }
.kqm-screen { width: min(100%,720px); text-align: center; animation: kqm-screen-in 360ms cubic-bezier(.2,.8,.2,1) both; }
.kqm-screen[hidden] { display: none; }
.kqm-eyebrow { color: var(--kqm-cyan); font-size: .6rem; font-weight: 950; letter-spacing: .15em; }
.kqm-welcome h2,.kqm-finish h2 { margin: 14px 0 12px; font-size: clamp(2rem,5vw,4.1rem); line-height: .94; letter-spacing: 0; }
.kqm-welcome h2 em { color: var(--kqm-gold); font-style: normal; text-shadow: 0 0 28px rgba(255,212,95,.22); }
.kqm-welcome p,.kqm-finish p { max-width: 520px; margin: 0 auto 22px; color: rgba(255,255,255,.67); font-size: .78rem; line-height: 1.5; }
.kqm-sound-prompt { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background: radial-gradient(circle at 50% 35%,#142a71 0,#080d2d 37%,#02030e 76%); color: #fff; }
.kqm-sound-prompt[hidden] { display: none; }
body.kqm-sound-prompt-open { overflow: hidden; }
.kqm-sound-prompt-card { position: relative; display: grid; width: min(100%,650px); justify-items: center; padding: clamp(24px,5vw,44px); border: 1px solid rgba(92,233,255,.34); border-radius: 18px; background: rgba(6,10,36,.88); box-shadow: 0 30px 100px rgba(0,0,0,.68),inset 0 0 60px rgba(25,118,255,.1); text-align: center; animation: kqm-confirm-in .36s cubic-bezier(.16,.84,.28,1) both; }
.kqm-sound-prompt-close { position: absolute; top: 12px; right: 12px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--kqm-line); border-radius: 50%; background: rgba(9,15,50,.85); color: #fff; font-size: 1.15rem; cursor: pointer; }
.kqm-sound-prompt-logo { display: grid; width: 74px; height: 74px; margin-bottom: 17px; place-items: center; border: 2px solid var(--kqm-gold); border-radius: 50%; background: #101844; color: var(--kqm-gold); box-shadow: 0 0 34px rgba(25,118,255,.55),inset 0 0 20px rgba(92,233,255,.14); font-size: 2rem; font-weight: 1000; }
.kqm-sound-prompt-card > small { color: var(--kqm-cyan); font-size: .58rem; font-weight: 950; letter-spacing: .16em; }
.kqm-sound-prompt-card h2 { margin: 12px 0 9px; font-size: clamp(1.8rem,6vw,3.5rem); line-height: .98; }
.kqm-sound-prompt-card > p { max-width: 470px; margin: 0 0 24px; color: rgba(255,255,255,.68); font-size: .75rem; line-height: 1.5; }
.kqm-sound-prompt-card > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: 100%; }
.kqm-sound-prompt-card > div button { display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; min-height: 92px; padding: 14px 18px; border-radius: 14px; text-align: left; }
.kqm-sound-prompt-card > div button > span { grid-row: 1 / 3; align-self: center; font-size: 1.6rem; }
.kqm-sound-prompt-card > div button strong { font-size: .78rem; }
.kqm-sound-prompt-card > div button small { color: rgba(255,255,255,.6); font-size: .58rem; }
.kqm-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--kqm-gold); border-radius: 999px; background: #15205a; color: #fff; box-shadow: 0 0 0 3px rgba(25,118,255,.16),0 10px 26px rgba(0,0,0,.3); font: inherit; font-size: .75rem; font-weight: 950; }
.kqm-primary:disabled { opacity: .55; cursor: not-allowed; }

.kqm-question-meta { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; margin-bottom: 12px; color: var(--kqm-cyan); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.kqm-question-meta > span { justify-self: start; }
.kqm-question-meta > b { justify-self: center; padding: 6px 10px; border: 1px solid rgba(255,212,95,.36); border-radius: 999px; background: rgba(255,212,95,.08); color: var(--kqm-gold); font-size: .56rem; white-space: nowrap; }
.kqm-question-meta strong { color: var(--kqm-gold); font-size: .76rem; }
.kqm-question-meta > strong { justify-self: end; }
.kqm-question h2 { margin: 0 0 20px; padding: 18px 22px; border-top: 1px solid var(--kqm-line); border-bottom: 1px solid var(--kqm-line); background: rgba(9,15,50,.74); font-size: clamp(1rem,2.5vw,1.45rem); line-height: 1.35; }
.kqm-answers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.kqm-answer { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; min-height: 58px; padding: 8px 12px; border: 1px solid var(--kqm-line); border-radius: 8px; background: rgba(11,18,59,.9); color: #fff; text-align: left; transition: border-color 180ms ease,background 180ms ease,transform 180ms ease; }
.kqm-answer:focus:not(:focus-visible) { outline: 0; }
.kqm-answers.is-entering .kqm-answer { pointer-events: none; }
.kqm-answer > b { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,212,95,.55); border-radius: 50%; color: var(--kqm-gold); font-size: .68rem; }
.kqm-answer > span { font-size: .72rem; line-height: 1.25; }
.kqm-answer.is-selected { border-color: var(--kqm-gold); background: #5f4510; }
.kqm-answer.is-correct { border-color: #55e7a0; background: #12462f; }
.kqm-answer.is-wrong { border-color: #ff5c70; background: #511826; }
.kqm-answer.is-removed { visibility: hidden; pointer-events: none; }

.kqm-audience { display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: 8px; min-height: 126px; margin-top: 15px; padding: 12px; border: 1px solid var(--kqm-line); border-radius: 9px; background: rgba(4,8,28,.88); }
.kqm-audience[hidden] { display: none; }
.kqm-audience div { display: grid; grid-template-rows: 1fr auto auto; align-items: end; height: 100px; gap: 3px; color: var(--kqm-cyan); font-size: .62rem; font-weight: 900; }
.kqm-audience i { width: 100%; min-height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(to top,var(--kqm-blue),var(--kqm-cyan)); animation: kqm-bar-in 480ms ease both; }

.kqm-ladder { padding: 14px 12px; border-left: 1px solid rgba(92,233,255,.14); background: rgba(4,7,25,.64); }
.kqm-ladder header { display: grid; gap: 3px; padding: 2px 7px 10px; border-bottom: 1px solid rgba(92,233,255,.16); }
.kqm-ladder header small { color: var(--kqm-cyan); font-size: .48rem; font-weight: 900; letter-spacing: .12em; }
.kqm-ladder header strong { color: var(--kqm-gold); font-size: .7rem; }
.kqm-ladder ol { display: grid; gap: 2px; margin: 9px 0 0; padding: 0; list-style: none; }
.kqm-ladder li { display: grid; grid-template-columns: 24px 1fr; align-items: center; min-height: 25px; padding: 2px 7px; color: rgba(255,255,255,.55); font-size: .6rem; }
.kqm-ladder li span { color: var(--kqm-cyan); font-weight: 800; }
.kqm-ladder li strong { justify-self: end; color: inherit; }
.kqm-ladder li.is-safe { color: var(--kqm-gold); }
.kqm-ladder li.is-current { border-radius: 5px; background: var(--kqm-gold); color: #10142f; font-weight: 950; }
.kqm-ladder li.is-passed { color: #5de7aa; }

.kqm-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 92px; padding: 12px 18px; border-top: 1px solid rgba(92,233,255,.18); background: rgba(5,8,27,.86); }
.kqm-lifelines { display: flex; gap: 8px; }
.kqm-lifelines button { display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; align-items: center; min-width: 142px; min-height: 54px; padding: 7px 10px; border: 1px solid var(--kqm-line); border-radius: 8px; background: #0d153f; color: #fff; text-align: left; }
.kqm-lifelines button > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--kqm-gold); border-radius: 50%; color: var(--kqm-gold); font-size: .66rem; font-weight: 950; }
.kqm-lifelines button small { color: rgba(255,255,255,.56); font-size: .54rem; }
.kqm-lifelines button:disabled,.kqm-lifelines button.is-used { opacity: .34; cursor: not-allowed; }
.kqm-quit { display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; align-items: center; min-height: 50px; padding: 7px 12px; border: 1px solid rgba(255,212,95,.28); border-radius: 9px; background: rgba(41,28,9,.32); color: rgba(255,255,255,.78); font-size: .62rem; font-weight: 850; text-align: left; cursor: pointer; }
.kqm-quit > span { grid-row: 1 / 3; font-size: 1.15rem; }
.kqm-quit small { font-size: .52rem; }
.kqm-quit strong { color: var(--kqm-gold); font-size: .64rem; }
.kqm-quit:hover { border-color: var(--kqm-gold); background: rgba(95,69,16,.45); }

.kqm-lock { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3,5,18,.72); backdrop-filter: blur(8px) saturate(.55); }
.kqm-game:not(.is-locked) .kqm-lock { display: none; }
.kqm-lock > div { width: min(100%,480px); padding: 28px; border: 1px solid rgba(255,212,95,.42); border-radius: 14px; background: rgba(8,12,39,.94); box-shadow: 0 26px 80px rgba(0,0,0,.58),inset 0 0 45px rgba(25,118,255,.1); text-align: center; }
.kqm-lock span { color: var(--kqm-gold); font-size: .58rem; font-weight: 950; letter-spacing: .15em; }
.kqm-lock h2 { margin: 10px 0 8px; font-size: clamp(1.5rem,5vw,2.4rem); }
.kqm-lock p { margin: 0 auto 18px; color: rgba(255,255,255,.64); font-size: .72rem; line-height: 1.5; }
.kqm-lock b { display: inline-block; padding: 8px 13px; border: 1px solid var(--kqm-line); border-radius: 999px; color: var(--kqm-cyan); font-size: .62rem; text-transform: uppercase; }

body.kqm-immersive { overflow: hidden !important; overscroll-behavior: none; touch-action: none; }
body.kqm-immersive > .social-app,body.kqm-immersive > .app-bottom-nav,body.kqm-immersive > .app-floating-compose,body.kqm-immersive > .app-notification-beacon,body.kqm-immersive > .hub-mini-player,body.kqm-immersive > .hub-social-music-shortcut { visibility: hidden !important; pointer-events: none !important; }
.kqm-game.is-immersive { position: fixed; z-index: 120; inset: 0; width: 100vw; height: 100dvh; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.kqm-game.is-immersive .kqm-stage { height: calc(100dvh - 170px); min-height: 0; }

@keyframes kqm-screen-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kqm-light-sweep { to { transform: rotate(13deg); opacity: .6; } }
@keyframes kqm-bar-in { from { height: 0 !important; opacity: 0; } }

@media (max-width: 900px) {
  .kqm-question-meta { grid-template-columns: 1fr auto; gap: 7px; }
  .kqm-question-meta > b { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .kqm-question-meta > span,.kqm-question-meta > strong { grid-row: 2; }
  .kqm-stage { grid-template-columns: 150px minmax(0,1fr); }
  .kqm-ladder { position: absolute; z-index: 5; top: 82px; right: 8px; width: 142px; max-height: calc(100% - 184px); overflow: auto; border: 1px solid var(--kqm-line); border-radius: 8px; background: rgba(4,7,25,.9); }
  .kqm-ladder header { display: none; }
  .kqm-ladder li { min-height: 22px; }
  .kqm-content { padding-right: 156px; }
  .kqm-lifelines button { min-width: 54px; grid-template-columns: 1fr; }
  .kqm-lifelines button > span { grid-row: auto; }
  .kqm-lifelines button small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}

@media (max-width: 620px) {
  .kqm-game { min-height: 650px; }
  .kqm-topbar { min-height: 66px; padding: 8px 10px; }
  .kqm-top-counters { gap: 4px; }
  .kqm-reward-counter { min-width: 72px; padding: 5px 7px; }
  .kqm-reward-counter small { font-size: .42rem; }
  .kqm-reward-counter strong { font-size: .7rem; }
  .kqm-brand > span { width: 40px; height: 40px; }
  .kqm-brand strong { font-size: .58rem; }
  .kqm-question-counter { padding: 5px 9px; }
  .kqm-stage { display: grid; grid-template-columns: 90px minmax(0,1fr); grid-template-rows: minmax(0,1fr) 78px; min-height: 500px; }
  .kqm-presenter { align-items: start; }
  .kqm-presenter img { width: 115%; max-width: none; max-height: 74%; margin-top: 28px; }
  .kqm-presenter figcaption { right: 4px; bottom: 8px; left: 4px; padding: 6px; font-size: .52rem; }
  .kqm-content { padding: 16px 10px; padding-right: 10px; }
  .kqm-welcome h2,.kqm-finish h2 { font-size: 2rem; }
  .kqm-question h2 { padding: 13px 9px; font-size: .9rem; }
  .kqm-answers { grid-template-columns: 1fr; gap: 6px; }
  .kqm-answer { min-height: 44px; padding: 6px 8px; }
  .kqm-ladder { position: relative; top: auto; right: auto; bottom: auto; grid-column: 1 / -1; width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 7px 8px; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; opacity: .98; scrollbar-width: thin; }
  .kqm-ladder ol { display: flex; width: max-content; min-width: 100%; gap: 3px; margin: 0; }
  .kqm-ladder li { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; width: 54px; min-height: 54px; padding: 5px 3px; font-size: .52rem; }
  .kqm-ladder li strong { justify-self: center; white-space: nowrap; }
  .kqm-controls { min-height: 76px; padding: 8px 10px; }
  .kqm-lifelines { gap: 5px; }
  .kqm-lifelines button { min-width: 42px; min-height: 42px; padding: 4px; }
  .kqm-lifelines button > span { width: 32px; height: 32px; }
  .kqm-quit { max-width: 124px; padding: 5px 7px; }
  .kqm-game.is-immersive .kqm-stage { height: calc(100dvh - 142px); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .kqm-topbar { min-height: 54px; padding: 5px 12px; }
  .kqm-brand > span { width: 36px; height: 36px; }
  .kqm-stage { grid-template-columns: 120px minmax(0,1fr); }
  .kqm-game.is-immersive .kqm-stage { height: calc(100dvh - 116px); }
  .kqm-presenter img { max-height: 90%; }
  .kqm-presenter figcaption { display: none; }
  .kqm-content { padding: 7px 135px 7px 12px; }
  .kqm-welcome h2,.kqm-finish h2 { margin: 5px 0; font-size: 1.8rem; }
  .kqm-welcome p,.kqm-finish p { margin-bottom: 8px; }
  .kqm-question h2 { margin-bottom: 7px; padding: 8px 10px; }
  .kqm-answer { min-height: 36px; }
  .kqm-ladder { top: 60px; right: 6px; bottom: 58px; width: 124px; max-height: none; }
  .kqm-controls { min-height: 62px; padding: 5px 10px; }
  .kqm-lifelines button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .kqm-game * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Homepage teaser and one-time announcement for the private beta. */
.hub-kqm-teaser {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: calc(100% - 24px);
  min-height: 106px;
  margin: 14px 12px 2px;
  padding: 11px 12px;
  border: 1px solid rgba(75, 218, 255, .26);
  border-radius: 15px;
  color: #f7f2e9;
  background: radial-gradient(circle at 12% 20%, rgba(26, 177, 241, .2), transparent 38%), linear-gradient(120deg, #18254c, #17152f 60%, #382047);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.hub-kqm-teaser::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 210, 90, .08), transparent 65%); transform: translateX(-100%); transition: transform .7s ease; }
.hub-kqm-teaser:not(:disabled):hover::after { transform: translateX(100%); }
.hub-kqm-teaser-art { display: block; width: 82px; height: 82px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.hub-kqm-teaser-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-kqm-teaser > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.hub-kqm-teaser small { color: #5ee6ff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.hub-kqm-teaser strong { font-size: .93rem; line-height: 1.12; }
.hub-kqm-teaser em { color: rgba(247,242,233,.66); font-size: .68rem; font-style: normal; }
.hub-kqm-teaser > b { display: flex; align-items: center; gap: 6px; color: #ffd46b; font-size: .66rem; white-space: nowrap; }
.hub-kqm-teaser > b i { font-size: 1.4rem; font-style: normal; line-height: 1; }
.hub-kqm-teaser-locked { opacity: .58; filter: saturate(.55); cursor: not-allowed !important; }
.kqm-announcement { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(5, 7, 18, .82); backdrop-filter: blur(18px); }
.kqm-announcement[hidden] { display: none; }
.kqm-announcement-backdrop { position: absolute; inset: 0; border: 0; background: transparent; }
.kqm-announcement-card { position: relative; z-index: 1; width: min(100%, 510px); padding: 14px; border: 1px solid rgba(88, 224, 255, .35); border-radius: 22px; background: linear-gradient(145deg, #111936, #221634); box-shadow: 0 24px 80px rgba(0,0,0,.55); text-align: center; animation: kqmAnnouncementIn .45s cubic-bezier(.2,.8,.2,1); }
.kqm-announcement-card img { display: block; width: 100%; max-height: 235px; border-radius: 14px; object-fit: cover; }
.kqm-announcement-card small { display: block; margin: 16px 0 6px; color: #5ee6ff; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }
.kqm-announcement-card h2 { margin: 0; color: #fff7e9; font-size: clamp(1.35rem, 4vw, 2rem); }
.kqm-announcement-card p { margin: 12px auto 18px; max-width: 38ch; color: rgba(255,247,233,.78); line-height: 1.5; }
.kqm-primary { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; color: #171124; background: #ffd46b; font-weight: 800; cursor: pointer; }
body.kqm-announcement-open { overflow: hidden; }
@keyframes kqmAnnouncementIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.kqm-reward-limit-notice { position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2, 4, 16, .86); backdrop-filter: blur(16px); }
.kqm-reward-limit-notice[hidden] { display: none; }
.kqm-reward-limit-backdrop { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.kqm-reward-limit-card { position: relative; z-index: 1; width: min(100%, 520px); padding: clamp(26px, 5vw, 44px); border: 1px solid rgba(245, 200, 91, .62); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(52, 77, 166, .5), transparent 52%), #080d29; box-shadow: 0 28px 100px rgba(0, 0, 0, .72), 0 0 42px rgba(245, 200, 91, .16); text-align: center; animation: kqm-confirm-in .36s var(--kqm-ease) both; }
.kqm-reward-limit-card small { color: var(--kqm-gold); font-size: .62rem; font-weight: 950; letter-spacing: .16em; }
.kqm-reward-limit-card h2 { margin: 12px 0 10px; color: #fff; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.05; }
.kqm-reward-limit-card p { margin: 0 auto 24px; max-width: 40ch; color: rgba(255, 255, 255, .72); font-size: .82rem; line-height: 1.55; }
body.kqm-reward-limit-open { overflow: hidden; }
.kqm-exit-confirmation { position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2, 4, 16, .88); backdrop-filter: blur(16px); }
.kqm-exit-confirmation[hidden] { display: none; }
.kqm-exit-confirmation-backdrop { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.kqm-exit-confirmation-card { position: relative; z-index: 1; width: min(100%, 560px); padding: clamp(24px, 5vw, 42px); border: 1px solid rgba(245, 200, 91, .7); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(66, 55, 16, .6), transparent 58%), #080d29; box-shadow: 0 28px 100px rgba(0, 0, 0, .76), 0 0 42px rgba(245, 200, 91, .18); text-align: center; animation: kqm-confirm-in .36s var(--kqm-ease) both; }
.kqm-exit-confirmation-card small { color: var(--kqm-gold); font-size: .62rem; font-weight: 950; letter-spacing: .16em; }
.kqm-exit-confirmation-card h2 { margin: 12px 0 10px; color: #fff; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.05; }
.kqm-exit-confirmation-card p { margin: 0 auto 12px; max-width: 44ch; color: rgba(255, 255, 255, .74); font-size: .82rem; line-height: 1.55; }
.kqm-exit-confirmation-card > strong { display: block; margin-bottom: 24px; color: var(--kqm-gold); font-size: .78rem; }
.kqm-exit-confirmation-card > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 620px) {
  .hub-kqm-teaser { grid-template-columns: 68px minmax(0, 1fr) auto; min-height: 90px; gap: 9px; margin-top: 10px; padding: 9px; }
  .hub-kqm-teaser-art { width: 68px; height: 68px; }
  .hub-kqm-teaser strong { font-size: .82rem; }
  .hub-kqm-teaser > b { font-size: .57rem; }
  .kqm-announcement { padding: 12px; }
  .kqm-announcement-card { padding: 10px; border-radius: 18px; }
  .kqm-announcement-card img { max-height: 190px; }
}

/* Cinematic game flow. */
.kqm-game[data-screen="intro"] .kqm-topbar,
.kqm-game[data-screen="intro"] .kqm-stage,
.kqm-game[data-screen="intro"] .kqm-controls,
.kqm-game[data-screen="menu"] .kqm-controls,
.kqm-game[data-screen="finish"] .kqm-controls { display: none; }
.kqm-game[data-screen="menu"] .kqm-stage,
.kqm-game[data-screen="finish"] .kqm-stage { min-height: 590px; }
.kqm-game[data-screen="menu"] .kqm-content { background: radial-gradient(circle at center, rgba(43,113,255,.13), transparent 64%); }
.kqm-intro { position: absolute; z-index: 30; inset: 0; overflow: hidden; background: #02030b; }
.kqm-intro[hidden] { display: none; }
.kqm-intro video { display: block; width: 100%; height: 100%; object-fit: contain; background: #02030b; }
.kqm-intro-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 65%, rgba(1,2,10,.72)); }
.kqm-intro-skip { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(5,8,28,.65); color: #fff; font-size: .66rem; font-weight: 850; backdrop-filter: blur(10px); }
.kqm-intro-play { position: absolute; top: 50%; left: 50%; display: grid; justify-items: center; gap: 12px; border: 0; background: transparent; color: #fff; transform: translate(-50%,-50%); }
.kqm-intro-play[hidden] { display: none; }
.kqm-intro-play span { display: grid; width: 72px; height: 72px; place-items: center; border: 2px solid var(--kqm-gold); border-radius: 50%; background: rgba(13,18,49,.82); box-shadow: 0 0 42px rgba(92,233,255,.45); font-size: 1.6rem; }
.kqm-intro-play strong { font-size: .75rem; letter-spacing: .08em; }
.kqm-menu-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kqm-theme-panel { width: min(100%,650px); margin: 14px auto 16px; padding: 12px; border: 1px solid rgba(92,233,255,.25); border-radius: 11px; background: rgba(4,8,28,.68); text-align: left; }
.kqm-theme-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kqm-theme-heading small { color: var(--kqm-cyan); font-size: .5rem; font-weight: 950; letter-spacing: .12em; }
.kqm-theme-heading h3 { margin: 2px 0 0; color: #fff; font-size: .82rem; }
.kqm-theme-heading button { min-height: 30px; padding: 0 11px; border: 1px solid rgba(255,212,95,.38); border-radius: 999px; background: rgba(41,28,9,.5); color: var(--kqm-gold); font-size: .55rem; font-weight: 900; cursor: pointer; }
.kqm-theme-panel > p { margin: 8px 0 10px; color: rgba(255,255,255,.58); font-size: .56rem; line-height: 1.4; }
.kqm-theme-selector { display: flex; flex-wrap: wrap; gap: 6px; }
.kqm-theme-selector label { position: relative; cursor: pointer; }
.kqm-theme-selector input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kqm-theme-selector span { display: block; padding: 7px 9px; border: 1px solid rgba(92,233,255,.2); border-radius: 999px; background: rgba(11,18,59,.76); color: rgba(255,255,255,.72); font-size: .54rem; font-weight: 850; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; }
.kqm-theme-selector label:hover span { border-color: rgba(92,233,255,.52); transform: translateY(-1px); }
.kqm-theme-selector input:focus-visible + span { outline: 2px solid var(--kqm-cyan); outline-offset: 2px; }
.kqm-theme-selector input:checked + span { border-color: var(--kqm-gold); background: linear-gradient(135deg,#624917,#2a2454); color: #fff; box-shadow: 0 0 18px rgba(255,212,95,.18); }
.kqm-theme-selector input:checked + span::before { content: "✓ "; color: var(--kqm-gold); }
.kqm-theme-mode { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(92,233,255,.15); }
.kqm-theme-mode strong { color: var(--kqm-gold); font-size: .58rem; }
.kqm-theme-mode span { color: rgba(255,255,255,.55); font-size: .52rem; text-align: right; }
.kqm-play-button { min-width: 190px; min-height: 58px; background: linear-gradient(135deg,#1c3d9a,#17225c 55%,#604611); color: #fff; box-shadow: 0 0 0 3px rgba(25,118,255,.17),0 0 32px rgba(92,233,255,.25),0 14px 32px rgba(0,0,0,.35); animation: kqm-play-pulse 2.2s ease-in-out infinite; }
.kqm-secondary { min-height: 48px; padding: 0 18px; border: 1px solid rgba(92,233,255,.42); border-radius: 999px; background: rgba(8,15,50,.72); color: #fff; font-size: .7rem; font-weight: 850; }
.kqm-menu-paliers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; max-width: 470px; margin: 24px auto 0; }
.kqm-menu-paliers span { display: grid; justify-items: center; gap: 5px; padding: 9px 6px; border: 1px solid rgba(92,233,255,.18); border-radius: 8px; background: rgba(5,10,36,.56); color: rgba(255,255,255,.62); font-size: .57rem; font-weight: 800; }
.kqm-menu-paliers i { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--kqm-gold); border-radius: 50%; color: var(--kqm-gold); font-style: normal; }
.kqm-friend-hint { margin-top: 12px; padding: 12px 15px; border: 1px solid rgba(255,212,95,.4); border-radius: 8px; background: rgba(41,28,9,.82); text-align: left; animation: kqm-screen-in .35s ease both; }
.kqm-friend-hint[hidden] { display: none; }
.kqm-friend-hint small { display: block; margin-bottom: 4px; color: var(--kqm-gold); font-size: .54rem; font-weight: 900; letter-spacing: .12em; }
.kqm-friend-hint strong { font-size: .7rem; line-height: 1.35; }
.kqm-friend-hint img { float: left; width: 54px; height: 54px; margin: 0 10px 2px 0; object-fit: contain; border: 1px solid rgba(255,212,95,.38); border-radius: 8px; background: rgba(3,6,22,.72); }
.kqm-rules { position: absolute; z-index: 45; inset: 0; display: grid; place-items: center; padding: 18px; }
.kqm-rules[hidden] { display: none; }
.kqm-rules-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,3,15,.82); backdrop-filter: blur(14px); }
.kqm-rules-card { position: relative; z-index: 1; width: min(100%,720px); max-height: calc(100dvh - 36px); overflow: auto; padding: 20px; border: 1px solid rgba(92,233,255,.42); border-radius: 14px; background: linear-gradient(145deg,#101945,#080d2b 62%,#251636); box-shadow: 0 28px 90px rgba(0,0,0,.66),inset 0 0 40px rgba(25,118,255,.08); animation: kqm-rules-in .36s cubic-bezier(.2,.8,.2,1); }
.kqm-rules-card header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.kqm-rules-card header small { color: var(--kqm-cyan); font-size: .54rem; font-weight: 900; letter-spacing: .14em; }
.kqm-rules-card h2 { margin: 4px 0 0; font-size: clamp(1.35rem,4vw,2rem); }
.kqm-rules-card header button { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid var(--kqm-line); border-radius: 50%; background: rgba(7,12,40,.76); color: #fff; font-size: 1.2rem; }
.kqm-rules-card > p { color: rgba(255,255,255,.72); font-size: .72rem; line-height: 1.55; }
.kqm-rules-ladder { display: grid; gap: 6px; margin: 15px 0; padding: 13px; border: 1px solid rgba(255,212,95,.28); border-radius: 9px; background: rgba(4,8,28,.72); }
.kqm-rules-ladder small { color: var(--kqm-gold); font-size: .54rem; font-weight: 950; letter-spacing: .12em; }
.kqm-rules-ladder strong { color: #fff; font-size: .68rem; line-height: 1.5; }
.kqm-rules-ladder span { color: var(--kqm-cyan); font-size: .62rem; }
.kqm-rules-jokers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }
.kqm-rules-jokers article { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(92,233,255,.2); border-radius: 9px; background: rgba(11,18,59,.7); }
.kqm-rules-jokers b { color: var(--kqm-gold); font-size: .68rem; }
.kqm-rules-jokers span { color: rgba(255,255,255,.64); font-size: .61rem; line-height: 1.4; }
.kqm-milestone { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle,rgba(25,118,255,.68),rgba(3,5,20,.96) 64%); }
.kqm-milestone[hidden] { display: none; }
.kqm-milestone::before,.kqm-milestone::after { position: absolute; width: 85vmax; height: 85vmax; content: ""; border: 1px solid rgba(92,233,255,.2); border-radius: 50%; animation: kqm-rings 4s linear infinite; }
.kqm-milestone::after { width: 55vmax; height: 55vmax; animation-direction: reverse; }
.kqm-milestone > div { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 36px; text-align: center; animation: kqm-milestone-in .5s cubic-bezier(.2,.8,.2,1) both; }
.kqm-milestone small { color: var(--kqm-cyan); font-size: .67rem; font-weight: 950; letter-spacing: .2em; }
.kqm-milestone strong { color: var(--kqm-gold); font-size: clamp(3rem,11vw,7rem); line-height: .9; text-shadow: 0 0 42px rgba(255,212,95,.46); }
.kqm-milestone span { font-size: clamp(.9rem,3vw,1.5rem); font-weight: 950; letter-spacing: .16em; }
.kqm-milestone.is-leaving { opacity: 0; transition: opacity .42s ease; }
.kqm-ladder li.is-current { animation: kqm-current-glow 1.15s ease-in-out infinite alternate; }
.kqm-game.is-transitioning .kqm-question h2 { opacity: 0; transform: translateY(-9px); }
.kqm-game.is-transitioning .kqm-answer { opacity: 0; transform: translateY(11px); }
.kqm-question h2 { transition: opacity .32s ease,transform .32s ease; }
.kqm-answer { animation: kqm-answer-in .36s ease var(--answer-delay,0ms) both; }
.kqm-game.is-suspense::before { animation: kqm-tension-bg .85s ease-in-out infinite alternate; }
.kqm-game.is-suspense .kqm-answer:not(.is-selected) { opacity: .56; }
.kqm-controls { transition: opacity .25s ease,transform .25s ease; }

@keyframes kqm-play-pulse { 50% { box-shadow: 0 0 0 5px rgba(25,118,255,.12),0 0 46px rgba(92,233,255,.37),0 14px 32px rgba(0,0,0,.35); transform: translateY(-1px); } }
@keyframes kqm-rules-in { from { opacity: 0; transform: translateY(15px) scale(.98); } }
@keyframes kqm-answer-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes kqm-current-glow { to { box-shadow: 0 0 22px rgba(255,212,95,.58); } }
@keyframes kqm-rings { to { transform: rotate(1turn); } }
@keyframes kqm-milestone-in { from { opacity: 0; transform: scale(.72); } }
@keyframes kqm-tension-bg { to { filter: brightness(.7) saturate(1.25); } }

@media (max-width: 620px) {
  .kqm-sound-prompt-card > div { grid-template-columns: 1fr; }
  .kqm-sound-prompt-card > div button { min-height: 74px; }
  .kqm-game[data-screen="menu"] .kqm-stage,.kqm-game[data-screen="finish"] .kqm-stage { min-height: 520px; }
  .kqm-menu-actions { display: grid; }
  .kqm-theme-panel { margin: 10px auto 12px; padding: 10px; }
  .kqm-theme-panel > p { display: none; }
  .kqm-theme-selector { max-height: 92px; overflow-y: auto; scrollbar-width: thin; }
  .kqm-theme-selector span { padding: 6px 8px; font-size: .5rem; }
  .kqm-theme-mode { align-items: flex-start; }
  .kqm-theme-mode span { max-width: 62%; }
  .kqm-play-button { min-width: min(100%,220px); justify-self: center; }
  .kqm-menu-paliers { gap: 4px; margin-top: 16px; }
  .kqm-menu-paliers span { font-size: .48rem; }
  .kqm-rules { padding: 8px; }
  .kqm-rules-card { max-height: calc(100dvh - 16px); padding: 14px; }
  .kqm-rules-jokers { grid-template-columns: 1fr; }
  .kqm-intro video { object-fit: contain; }
  .kqm-friend-hint { padding: 8px 10px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .kqm-game[data-screen="menu"] .kqm-stage,.kqm-game[data-screen="finish"] .kqm-stage { min-height: 0; }
  .kqm-menu-paliers { margin-top: 7px; }
  .kqm-theme-panel { margin: 5px auto 7px; padding: 7px 9px; }
  .kqm-theme-heading h3 { font-size: .7rem; }
  .kqm-theme-panel > p { display: none; }
  .kqm-theme-selector { max-height: 54px; overflow-y: auto; }
  .kqm-theme-selector span { padding: 4px 7px; }
  .kqm-theme-mode { margin-top: 5px; padding-top: 5px; }
  .kqm-menu-paliers span { grid-template-columns: auto auto; justify-content: center; align-items: center; }
  .kqm-welcome p { margin-bottom: 8px; }
  .kqm-rules-card { max-height: calc(100dvh - 10px); }
}

/* Audio-directed joker sequences and viewport-safe immersive layout. */
.kqm-joker-sequence { position: absolute; z-index: 43; inset: 0; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: radial-gradient(circle at center, rgba(31,87,198,.78), rgba(2,5,24,.96) 68%); overflow: hidden; }
.kqm-joker-sequence[hidden] { display: none; }
.kqm-joker-sequence::before,.kqm-joker-sequence::after { position: absolute; width: min(72vmin,620px); aspect-ratio: 1; content: ""; border: 1px solid rgba(92,233,255,.28); border-radius: 50%; animation: kqm-rings 5s linear infinite; }
.kqm-joker-sequence::after { width: min(48vmin,420px); animation-direction: reverse; }
.kqm-joker-sequence > div { position: relative; z-index: 1; display: grid; width: min(100%,760px); justify-items: center; gap: 14px; text-align: center; animation: kqm-screen-in .4s cubic-bezier(.2,.8,.2,1) both; }
.kqm-joker-sequence small { color: var(--kqm-gold); font-size: clamp(.62rem,1.6vw,.9rem); font-weight: 950; letter-spacing: .2em; }
.kqm-joker-sequence img { width: min(34vmin,240px); max-height: 30dvh; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); animation: kqm-caller-in .45s cubic-bezier(.2,.8,.2,1) both; }
.kqm-joker-sequence img[hidden] { display: none; }
.kqm-joker-sequence h2 { max-width: 18ch; margin: 0; color: #fff; font-size: clamp(1.7rem,6vw,4.8rem); line-height: .98; text-wrap: balance; text-shadow: 0 0 34px rgba(92,233,255,.34); }
.kqm-joker-sequence span { width: 112px; height: 3px; border-radius: 999px; background: linear-gradient(90deg,transparent,var(--kqm-cyan),var(--kqm-gold),transparent); animation: kqm-joker-line 1.2s ease-in-out infinite alternate; }
.kqm-audience.is-pending i { height: 5% !important; opacity: .34; animation: kqm-pending-bar .8s ease-in-out infinite alternate; }
.kqm-audience.is-pending b { color: rgba(255,255,255,.45); }
.kqm-audience div.is-eliminated { opacity: .24; }
.kqm-audience div.is-eliminated i { height: 0 !important; min-height: 0; animation: none; }

.kqm-answer-confirmation { position: absolute; z-index: 44; inset: 0; display: grid; place-items: center; padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background: radial-gradient(circle at 50% 35%,rgba(36,83,190,.82),rgba(2,4,20,.97) 68%); }
.kqm-answer-confirmation[hidden] { display: none; }
.kqm-answer-confirmation > div { display: grid; width: min(100%,680px); max-height: 100%; justify-items: center; gap: 12px; overflow: auto; text-align: center; animation: kqm-confirm-in .42s cubic-bezier(.16,.84,.28,1) both; }
.kqm-answer-confirmation img { width: min(30vmin,220px); max-height: 34dvh; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.58)); }
.kqm-answer-confirmation h2 { margin: 0; color: #fff; font-size: clamp(1.8rem,5.4vw,4.5rem); line-height: .96; text-wrap: balance; text-shadow: 0 0 34px rgba(92,233,255,.38); }
.kqm-answer-confirmation p { margin: 0; padding: 9px 14px; border: 1px solid rgba(255,212,95,.42); border-radius: 999px; color: var(--kqm-gold); font-size: clamp(.68rem,1.8vw,.95rem); font-weight: 900; }
.kqm-abandon-confirmation p { max-width: 560px; border-radius: 12px; line-height: 1.45; }
.kqm-abandon-confirmation p strong { color: #fff; }
.kqm-answer-confirmation > div > div { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.kqm-game.is-immersive { display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: 100%; max-width: 100vw; height: 100dvh; max-height: 100dvh; overflow: hidden; contain: layout paint; }
.kqm-game.is-immersive .kqm-stage { height: auto !important; min-height: 0 !important; overflow: hidden; }
.kqm-game.is-immersive .kqm-presenter,.kqm-game.is-immersive .kqm-content,.kqm-game.is-immersive .kqm-ladder { min-height: 0; }
.kqm-game.is-immersive .kqm-content { overflow: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
.kqm-game.is-immersive .kqm-controls { min-height: 0; padding-bottom: max(8px,env(safe-area-inset-bottom)); }
.kqm-game.is-immersive .kqm-topbar { padding-top: max(8px,env(safe-area-inset-top)); padding-right: max(14px,env(safe-area-inset-right)); padding-left: max(14px,env(safe-area-inset-left)); }

@keyframes kqm-joker-line { to { width: 190px; filter: brightness(1.45); } }
@keyframes kqm-pending-bar { to { height: 18% !important; opacity: .7; } }
@keyframes kqm-caller-in { from { opacity: 0; transform: translateY(18px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes kqm-confirm-in { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  .kqm-answer:hover { border-color: var(--kqm-gold); transform: translateY(-1px); }
}

@media (max-width: 620px) {
  .kqm-game.is-immersive .kqm-topbar { min-height: 54px; padding-top: max(5px,env(safe-area-inset-top)); padding-bottom: 5px; }
  .kqm-game.is-immersive .kqm-stage { grid-template-rows: minmax(0,1fr) 54px; }
  .kqm-game.is-immersive .kqm-content { padding: 10px 8px; }
  .kqm-game.is-immersive .kqm-question-meta { margin-bottom: 7px; }
  .kqm-game.is-immersive .kqm-question h2 { margin-bottom: 8px; padding: 10px 8px; }
  .kqm-game.is-immersive .kqm-answer { min-height: 40px; }
  .kqm-game.is-immersive .kqm-ladder { height: 54px; padding: 4px 6px; }
  .kqm-game.is-immersive .kqm-ladder li { width: 48px; min-height: 44px; padding: 3px 2px; }
  .kqm-game.is-immersive .kqm-controls { min-height: 62px; padding: 6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .kqm-game.is-immersive .kqm-lifelines button { min-height: 38px; }
  .kqm-joker-sequence { padding: 14px; }
  .kqm-answer-confirmation { padding: 12px; }
  .kqm-answer-confirmation img { width: min(34vmin,150px); max-height: 26dvh; }
  .kqm-answer-confirmation h2 { font-size: clamp(1.55rem,9vw,2.7rem); }
  .kqm-answer-confirmation .kqm-primary,.kqm-answer-confirmation .kqm-secondary { min-height: 42px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .kqm-game.is-immersive .kqm-topbar { min-height: 48px; }
  .kqm-game.is-immersive .kqm-stage { grid-template-rows: minmax(0,1fr); }
  .kqm-game.is-immersive .kqm-content { padding: 6px 130px 6px 10px; }
  .kqm-game.is-immersive .kqm-controls { min-height: 54px; padding-top: 4px; padding-bottom: max(4px,env(safe-area-inset-bottom)); }
  .kqm-game.is-immersive .kqm-answer { min-height: 34px; }
  .kqm-game.is-immersive .kqm-ladder { top: 54px; bottom: 54px; }
}
/* Classement officiel Kafmillion */
.kqm-leaderboard-card{width:min(100%,880px)}.kqm-leaderboard-list{display:grid;gap:8px;margin-top:16px}.kqm-leaderboard-row{display:grid;grid-template-columns:42px minmax(130px,1.35fr) repeat(4,minmax(74px,.65fr));gap:10px;align-items:center;padding:11px 12px;border:1px solid rgba(92,233,255,.18);background:rgba(4,8,28,.72)}.kqm-leaderboard-row.is-podium{border-color:rgba(255,212,95,.42);background:linear-gradient(90deg,rgba(255,212,95,.12),rgba(4,8,28,.78))}.kqm-leaderboard-rank{color:var(--kqm-gold);font-size:1rem;font-weight:950;text-align:center}.kqm-leaderboard-user{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;min-width:0}.kqm-leaderboard-user img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#0b1130}.kqm-leaderboard-user span{min-width:0}.kqm-leaderboard-user strong,.kqm-leaderboard-user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kqm-leaderboard-user strong{font-size:.7rem}.kqm-leaderboard-user small{color:rgba(255,255,255,.48);font-size:.55rem}.kqm-leaderboard-stat{display:grid;gap:2px;text-align:center}.kqm-leaderboard-stat small{color:rgba(255,255,255,.48);font-size:.48rem;text-transform:uppercase}.kqm-leaderboard-stat strong{color:#fff;font-size:.66rem}.kqm-leaderboard-empty{padding:28px;color:rgba(255,255,255,.62);text-align:center}@media(max-width:760px){.kqm-leaderboard-row{grid-template-columns:34px minmax(0,1fr) repeat(2,64px)}.kqm-leaderboard-row .kqm-leaderboard-stat:nth-last-child(-n+2){display:none}.kqm-leaderboard-user{grid-template-columns:32px minmax(0,1fr)}.kqm-leaderboard-user img{width:32px;height:32px}}

/* Classement compact et fiche publique partagees par le site et l'app */
.kqm-leaderboard-card{width:min(100%,940px)}
.kqm-leaderboard-columns{display:grid;grid-template-columns:42px minmax(130px,1.35fr) repeat(4,minmax(74px,.65fr));gap:10px;padding:0 12px 5px;color:rgba(255,255,255,.42);font-size:.48rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.kqm-leaderboard-columns span:nth-child(n+3){text-align:center}
.kqm-leaderboard-row{cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.kqm-leaderboard-row:hover,.kqm-leaderboard-row:focus-visible{border-color:var(--kqm-gold);background:rgba(18,20,62,.9);transform:translateY(-1px);outline:none}
.kqm-leaderboard-row.is-rank-1 .kqm-leaderboard-rank{color:#ffe066;text-shadow:0 0 12px rgba(255,224,102,.7)}
.kqm-leaderboard-row.is-rank-2 .kqm-leaderboard-rank{color:#dce7f5}
.kqm-leaderboard-row.is-rank-3 .kqm-leaderboard-rank{color:#e7a46a}
.kqm-leaderboard-user img{display:block;min-width:38px}
.kqm-profile-card{width:min(100%,820px)}
.kqm-profile-heading{display:flex;align-items:center;gap:16px;margin:20px 0;padding:14px;border:1px solid rgba(92,233,255,.2);border-radius:10px;background:rgba(3,8,30,.7)}
.kqm-profile-heading img{display:block;width:76px;height:76px;flex:0 0 76px;border-radius:50%;object-fit:cover;background:#0b1130}
.kqm-profile-heading strong,.kqm-profile-heading small,.kqm-profile-heading span{display:block}
.kqm-profile-heading strong{font-size:1.2rem}
.kqm-profile-heading small,.kqm-profile-heading span{margin-top:4px;color:rgba(255,255,255,.58);font-size:.72rem}
.kqm-profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kqm-profile-stats div{padding:11px;border:1px solid rgba(92,233,255,.16);border-radius:8px;background:rgba(4,8,28,.62)}
.kqm-profile-stats small,.kqm-profile-stats strong{display:block}
.kqm-profile-stats small{color:rgba(255,255,255,.58);font-size:.56rem}
.kqm-profile-stats strong{margin-top:4px;color:var(--kqm-gold);font-size:.92rem}
.kqm-profile-history{margin-top:18px}
.kqm-profile-history-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:rgba(255,255,255,.58)}
.kqm-profile-history-title small{color:var(--kqm-gold);font-weight:900;letter-spacing:.08em}
.kqm-profile-history-title span{font-size:.68rem}
.kqm-profile-history ol{display:grid;gap:6px;max-height:34dvh;margin:0;padding:0;overflow:auto;list-style:none}
.kqm-profile-history li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:9px 10px;border-left:2px solid rgba(255,212,71,.55);background:rgba(4,8,28,.56)}
.kqm-profile-history li>b{color:var(--kqm-gold);font-size:.72rem}
.kqm-profile-history li strong,.kqm-profile-history li small,.kqm-profile-history li span{display:block}
.kqm-profile-history li strong{font-size:.72rem}
.kqm-profile-outcome{display:inline-block;padding:2px 6px;border-radius:999px;color:#061021;font-size:.52rem;font-weight:950;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.kqm-profile-outcome.is-victory{background:#55e6b5}.kqm-profile-outcome.is-quit{background:#ffd447}.kqm-profile-outcome.is-defeat{background:#ff806f}
.kqm-profile-history li small,.kqm-profile-history li span{margin-top:3px;color:rgba(255,255,255,.58);font-size:.58rem;line-height:1.35}
.kqm-profile-back{display:block;margin:16px auto 0}
@media(max-width:760px){.kqm-leaderboard-columns{display:none}.kqm-leaderboard-row{grid-template-columns:34px minmax(0,1fr) repeat(2,64px);padding:8px}.kqm-leaderboard-row .kqm-leaderboard-stat:nth-last-child(-n+2){display:none}.kqm-leaderboard-user{grid-template-columns:32px minmax(0,1fr);gap:7px}.kqm-leaderboard-user img{width:32px;height:32px;min-width:32px}.kqm-profile-stats{grid-template-columns:repeat(2,1fr)}.kqm-profile-heading img{width:60px;height:60px;flex-basis:60px}}