/* ==========================================================================
   STAGE — the masjid screen and the OBS feed
   White ground, metallic gold, bottle green, lapis blue. The arch from the
   Habib Ul Quraan mark is the frame. Composed on a fixed 1920 × 1080 canvas
   and scaled to whatever glass it is shown on. Safe area: 96 px / 54 px.
   Category colour: Jannati blue · Forty Ahadith gold · Seerah Bayan green.
   ========================================================================== */

html,body{margin:0;height:100%;background:#fff;overflow:hidden}
body.stage-screen{font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.is-output body{cursor:none}

.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;isolation:isolate;background:#fff;
  --accent:var(--ahadith);--wash:var(--ahadith-tint);--fg:var(--green-900)}
.stage[data-cat="ladder"],.stage[data-layer-cat="ladder"]{--accent:var(--jannati);--wash:var(--jannati-tint)}
.stage[data-cat="hadith"],.stage[data-layer-cat="hadith"]{--accent:var(--ahadith);--wash:var(--ahadith-tint)}
.stage[data-cat="bayan"],.stage[data-layer-cat="bayan"]{--accent:var(--bayan);--wash:var(--bayan-tint)}
.stage:not([data-mode="live"]):not([data-layer-cat]){--accent:var(--gold-800);--wash:var(--gold-100)}

/* ---------------------------------------------------------------- ground */
.st-ground{position:absolute;inset:0;z-index:-3;background:#fff}
/* The category is carried by the whole field — a wash from the top-left and a band down the edge. */
.st-glow{position:absolute;inset:0;z-index:-2;transition:background 520ms var(--ease-out);
  background:radial-gradient(1500px 900px at 0% 0%,var(--wash) 0%,color-mix(in oklab,var(--wash) 40%,#fff) 40%,#fff 75%)}
/* The left band is the competition colour — blue for the boys, purple for the girls — on every screen. */
.stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:var(--competition);z-index:2;transition:background 520ms}
.stage::after{content:"";position:absolute;left:16px;top:0;bottom:0;width:3px;background:var(--gold-leaf);z-index:2}
.stage:not([data-mode="live"])::before{background:var(--competition)}
.stage:not([data-mode="live"]) .st-glow{background:radial-gradient(1000px 760px at 50% 55%,var(--wash) 0%,color-mix(in oklab,var(--wash) 30%,#fff) 45%,#fff 80%)}
.st-lattice{position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;background:url(/hq-lattice.svg) center/150px repeat;
  -webkit-mask:radial-gradient(1200px 760px at 50% 50%,transparent 40%,#000 100%);mask:radial-gradient(1200px 760px at 50% 50%,transparent 40%,#000 100%)}

/* ---------------------------------------------------------------- head */
.st-head{position:absolute;left:96px;right:96px;top:48px;height:140px;display:flex;align-items:center;justify-content:space-between}
.st-brand{height:140px;display:flex;align-items:center}
.st-brand img{height:128px;width:auto;display:block}
.st-eyebrow{text-align:right;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.st-eyebrow span{font:800 26px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);transition:color 520ms}
.st-eyebrow small{font:800 20px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--competition)}
.stage:not([data-mode="live"]) .st-head,.stage:not([data-mode="live"]) .st-live,.stage:not([data-mode="live"]) .st-foot{visibility:hidden}

/* ---------------------------------------------------------------- shared */
.eyebrow{margin:0;font:800 22px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lede{margin:0;font:500 34px/1.4 var(--ui);color:var(--ink-soft)}
.st-rule{display:flex;align-items:center;justify-content:center;width:520px;margin:30px auto}
.st-rule i{flex:1;height:2px;background:var(--gold-leaf)}
.st-rule b{width:18px;height:18px;margin:0 14px;transform:rotate(45deg);border:2px solid var(--gold-500)}

/* ---------------------------------------------------------------- live */
.st-live{position:absolute;left:96px;right:96px;top:216px;bottom:204px}
.st-foot{position:absolute;left:96px;right:96px;bottom:54px;height:126px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:40px;
  border-top:2px solid transparent;border-image:var(--gold-leaf) 1;padding-top:18px}
.ident{display:flex;flex-direction:column;gap:6px;min-width:0}
.ident-eyebrow{font:800 18px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.ident-name{font:700 66px/1 var(--display);color:var(--green-900);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ident-meta{font:600 24px/1.2 var(--ui);color:var(--ink-soft)}
.ident-meta i{font-style:normal;margin:0 12px;color:var(--gold-500)}
.clock{min-width:230px;height:104px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;
  box-shadow:inset 0 0 0 2px var(--gold-500),0 10px 26px #0a2a1812}
.clock b{font:800 76px/1 var(--ui);font-variant-numeric:tabular-nums lining-nums;color:var(--green-900);letter-spacing:-.02em}
.clock.low b{color:var(--stop)}
.clock.waiting{min-width:360px;background:var(--gold-50)}
.clock.waiting span{font:700 24px/1.2 var(--ui);letter-spacing:.04em;color:var(--gold-800);text-align:center;padding:0 20px}
.clock.empty{visibility:hidden}
.lifebar{display:flex;gap:12px;align-self:center;flex-wrap:wrap;justify-content:flex-end;max-width:760px}
.life{font:800 16px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:12px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
.life.spent{opacity:.4;text-decoration:line-through;box-shadow:inset 0 0 0 1.5px #C9CFCB;color:var(--muted)}

/* Ladder */
.ladder-play{position:absolute;left:0;top:0;width:1360px;bottom:0;display:flex;flex-direction:column;gap:30px}
.question{position:relative;background:var(--green-800);color:#fff;border-radius:18px;padding:40px 56px 44px;
  box-shadow:0 0 0 2px var(--gold-500),0 0 0 9px #fff,0 0 0 10.5px color-mix(in oklab,var(--gold-500) 60%,#fff),0 30px 60px #0a2a1826}
.question .eyebrow{color:var(--gold-300);margin-bottom:18px}
.question-text{margin:0;font:600 52px/1.26 var(--display);color:#fff;text-wrap:balance}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.plaque{position:relative;display:flex;align-items:center;gap:24px;min-height:112px;padding:18px 28px;border-radius:14px;background:#fff;
  box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--gold-500) 80%,#fff),0 10px 24px #0a2a1810;transition:background 320ms var(--ease-out),box-shadow 320ms,opacity 320ms}
.plaque b{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font:800 28px/1 var(--ui);color:#fff;background:var(--accent)}
.plaque span{font:600 40px/1.2 var(--ui);color:var(--green-900)}
.plaque.sel{background:var(--wash);box-shadow:inset 0 0 0 4px var(--accent),0 10px 24px #0a2a1818}
.plaque.gone{opacity:.3}
.plaque.gone span{text-decoration:line-through;text-decoration-thickness:2px}
.plaque.correct{background:var(--green-700);box-shadow:inset 0 0 0 3px var(--gold-300),0 16px 40px #0A4C2840}
.plaque.correct span{color:#fff}
.plaque.correct b{background:#fff;color:var(--green-700)}
.plaque.chosen-wrong{box-shadow:inset 0 0 0 3px #9AA39D;opacity:.85}
.verdict{position:absolute;right:24px;top:50%;transform:translateY(-50%);font:800 22px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--gold-300)}
.audience{display:flex;gap:26px;height:170px;align-items:flex-end;margin-top:26px}
.audience div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px}
.audience i{display:block;width:100%;background:var(--gold-300);border-radius:6px 6px 0 0}
.audience span{font:800 24px/1 var(--ui);font-variant-numeric:tabular-nums;color:#fff}
.ladder{position:absolute;right:0;top:0;bottom:0;width:330px;margin:0;padding:18px 20px;list-style:none;display:flex;flex-direction:column;gap:6px;
  border-radius:18px;background:#fff;box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--gold-500) 70%,#fff),0 10px 26px #0a2a1810}
.rung{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-radius:10px;color:#9AA39D}
.rung b{font:800 30px/1 var(--ui);font-variant-numeric:tabular-nums}
.rung span{font:800 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700)}
.rung.mile b{color:var(--gold-700)}
.rung.won{color:var(--green-700);background:var(--green-50)}
.rung.now{background:var(--accent);color:#fff}
.rung.now span{color:#fff}

/* Forty Ahadith */
.card{position:absolute;left:120px;right:120px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:calc(24px * var(--fit,1));overflow:hidden;
  background:#fff;border-radius:22px;padding:40px 80px;box-shadow:inset 0 0 0 2px var(--gold-500),0 30px 60px #0a2a1818}
.hadith-arabic{margin:0;font:400 calc(64px * var(--fit,1))/1.8 var(--arabic-face);color:var(--green-900);text-wrap:balance}
.hadith-translation{margin:0;font:italic 400 calc(34px * var(--fit,1))/1.45 var(--display);color:var(--ink-soft);max-width:1300px}
.hadith-title{margin:0;font:700 calc(44px * var(--fit,1))/1.2 var(--display);color:var(--green-900);max-width:1400px;text-wrap:balance}
.big-number .hadith-title{font-size:56px}
.hadith-narrator{margin:0;font:700 20px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-800)}
.big-number{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.big-number b{font:800 300px/0.9 var(--display);background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:lining-nums}
.big-number.quiet .lede{font:600 64px/1.2 var(--display);color:var(--green-900)}

/* Bayan */
.speech{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:30px;padding:0 120px}
.speech-title{margin:0;font:700 92px/1.12 var(--display);color:var(--green-900);text-wrap:balance}
.timing-bar{align-self:center;width:420px;height:14px;border-radius:999px;background:#E6E9E6;overflow:hidden;position:relative}
.timing-bar i{position:absolute;inset:0;border-radius:999px;transition:background 320ms}
.timing-bar:not(.green):not(.amber):not(.red){visibility:hidden}
.timing-bar.green i{background:#1F7A4B}
.timing-bar.amber i{background:#D9921E}
.timing-bar.red i{background:#C0392B}

/* Results */
.results{position:absolute;inset:0;display:flex;flex-direction:column;gap:30px;align-items:center;justify-content:center}
.results-grid{display:flex;gap:40px;width:100%;justify-content:center}
.results-col{flex:1;max-width:520px;background:#fff;border-radius:18px;padding:28px 34px;box-shadow:inset 0 0 0 2px var(--gold-500),0 20px 40px #0a2a1812}
.results-col h3{margin:0 0 14px;font:800 22px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.results-col ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.results-col li{display:grid;grid-template-columns:52px 1fr;align-items:baseline;column-gap:14px}
.results-col li b{font:800 40px/1 var(--ui);color:var(--gold-700);grid-row:span 2}
.results-col li span{font:700 44px/1.1 var(--display);color:var(--green-900)}
.results-col li em{font:600 22px/1.2 var(--ui);font-style:normal;color:var(--muted)}

/* ---------------------------------------------------------------- scenes */
.st-layer{position:absolute;inset:0}
.layer-page{position:absolute;inset:0}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}
.scene .arch{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);color:var(--gold-500)}
.scene::before{content:"";position:absolute;left:50%;bottom:54px;width:1060px;height:900px;transform:translateX(-50%);
  background:radial-gradient(560px 520px at 50% 58%,color-mix(in oklab,var(--wash) 80%,#fff),transparent 72%);pointer-events:none}
.scene-inner{position:relative;width:900px;padding-top:150px;display:flex;flex-direction:column;align-items:center;gap:18px}
.scene-list .scene-inner{padding-top:170px}
.scene-logo{height:200px;width:auto;margin-bottom:22px}
.display{margin:0;font:700 104px/1.06 var(--display);color:var(--green-900);letter-spacing:-.01em;text-wrap:balance}
.display.small{font-size:80px}
.display.name{font-size:112px}
.scene .lede{max-width:820px}
.note{margin:0;font:500 30px/1.5 var(--ui);color:var(--ink-soft);max-width:820px}
.arabic-lead{margin:0 0 6px;font:400 72px/1.7 var(--arabic-face);color:var(--gold-800)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;width:720px;text-align:left}
.list li{display:flex;gap:28px;align-items:baseline;font:600 34px/1.25 var(--ui);color:var(--green-900);padding-bottom:12px;border-bottom:1px solid #E7E2D2}
.list li b{flex:none;width:120px;font:800 32px/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--jannati)}
.return{margin:26px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.return span{font:800 22px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--jannati)}
.return b{font:800 132px/1 var(--ui);font-variant-numeric:tabular-nums lining-nums;color:var(--green-900);letter-spacing:-.02em}
.countdown{margin:0;font:700 28px/1 var(--ui);color:var(--gold-800);min-height:28px}
.place{margin:6px 0 0;font:800 66px/1 var(--display);background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text;color:transparent}
.scene-award .display.name{font-size:124px}
.scene-award .winner:not(.shown){min-height:132px}

/* ---------------------------------------------------------------- message */
.st-message{position:absolute;left:96px;right:96px;bottom:200px;display:flex;justify-content:center;pointer-events:none;z-index:5}
.stage:not([data-mode="live"]) .st-message{bottom:70px}
.st-message span{max-width:1500px;padding:18px 40px;border-radius:999px;background:var(--jannati);color:#fff;font:700 34px/1.25 var(--ui);
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold-500),0 20px 50px #0a2a1826;text-align:center}
.st-signature{position:absolute;right:96px;bottom:24px;font:800 14px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700)}
.stage[data-mode="live"] .st-signature{display:none}

/* Rehearsal marker: a corner tag, never a bar across the frame */
body.stage-screen #modeBanner{position:fixed;left:24px;bottom:12px;top:auto;right:auto;width:auto;z-index:50;padding:6px 10px;border-radius:6px;
  font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:var(--gold-100);color:var(--gold-800);border:1px solid #E3D1A6}
body.stage-screen{padding-top:0!important}
.sound-hint{position:fixed;right:14px;bottom:14px;z-index:60;font:700 13px/1 var(--ui);padding:9px 12px;border-radius:8px;border:1px solid var(--gold-500);background:#fff;color:var(--gold-800);cursor:pointer;opacity:.8}
.sound-hint[hidden]{display:none}
body.stage-screen[data-connected="0"] .st-head::after{content:"Reconnecting…";position:absolute;right:0;top:-34px;font:700 14px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------- break video */
.scene-video{z-index:3;background:#fff}
.scene-video .break-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.scene-video .video-return{position:absolute;right:130px;top:66px;display:flex;align-items:baseline;gap:14px;padding:12px 26px;border-radius:999px;
  background:linear-gradient(140deg,#0F5E33,#073D20);color:#fff;box-shadow:0 10px 24px rgba(7,42,24,.18)}
.scene-video .video-return span{font:700 22px/1 var(--ui);letter-spacing:.06em;color:#E3C98E}
.scene-video .video-return b{font:800 34px/1 var(--ui)}

/* ------------------------------------------------ name card (30 Sep 2026) */
.namecard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.namecard .eyebrow{font:800 30px/1.2 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--competition,var(--gold-700))}
.namecard .nc-name{margin:0;font:700 180px/1 var(--display);color:var(--green-900);text-wrap:balance;max-width:1600px}
.namecard .nc-meta{margin:0;font:600 46px/1.25 var(--ui);color:var(--muted)}
.namecard .nc-meta i{font-style:normal;margin:0 18px;color:var(--gold-500)}
.nc-qr{display:flex;align-items:center;gap:28px;margin-top:26px;padding:20px 30px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 2px var(--gold-300)}
.nc-qr svg{width:170px;height:170px}
.nc-qr div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left}
.nc-qr b{font:700 40px/1.1 var(--display);color:var(--green-900)}
.nc-qr span{font:700 30px/1 var(--ui);color:var(--gold-800)}
.plaque.pick{box-shadow:inset 0 0 0 3px var(--gold-300),0 8px 18px #0a2a1812}
.plaque.sel{background:#FFF1CC;box-shadow:inset 0 0 0 5px #C98A00,0 14px 30px #0a2a1822}
/* The audience's answer on the plaques (30 Sep 2026): a gold fill to the percentage and the figure. */
.plaque.polled{background:linear-gradient(90deg,#F6E7C1 var(--pct),#fff var(--pct))}
.plaque.polled.correct{background:var(--green-700)}
.plaque .poll{margin-left:auto;font:800 44px/1 var(--ui);font-style:normal;color:var(--gold-800);font-variant-numeric:tabular-nums}
.plaque.correct .poll{color:var(--gold-300)}
.plaque.correct .poll + .verdict{margin-left:18px}
.question .poll-note{position:absolute;right:40px;bottom:22px;margin:0;font:800 20px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
.plaque.polled .verdict{top:12px;transform:none;font-size:16px}
/* Jannati: everything scales with --lfit when a question or its answers are long (set by the screen). */
.ladder-play{gap:calc(30px * var(--lfit,1))}
.ladder-play .question{padding:calc(40px * var(--lfit,1)) 56px calc(44px * var(--lfit,1))}
.ladder-play .question-text{font-size:calc(52px * var(--lfit,1))}
.ladder-play .answers{gap:calc(24px * var(--lfit,1))}
.ladder-play .plaque{min-height:calc(112px * var(--lfit,1));padding-top:calc(18px * var(--lfit,1));padding-bottom:calc(18px * var(--lfit,1))}
.ladder-play .plaque span{font-size:calc(40px * var(--lfit,1))}
.question .poll-note{top:40px;bottom:auto;right:56px}

/* ---- Jannati, question bank v2 (Oct 2026): prizes, readable ladder, gentle wrong answers, end of turn */
.ladder-play{width:1330px}
.rung{color:#5F6B64}
.rung b{font-size:36px}
.rung span{font:800 22px/1 var(--ui);letter-spacing:.02em;text-transform:none;color:var(--gold-800)}
.rung span.amt{font-variant-numeric:tabular-nums}
.rung.won{background:var(--gold-500);color:#fff}
.rung.won span{color:#fff}
.rung .tick{font-style:normal;font:800 24px/1 var(--ui);margin-left:8px}
.rung.now span{color:#fff}
.plaque.pick{box-shadow:inset 0 0 0 6px var(--gold-500),0 10px 24px #0a2a1820;background:#FFFBEF}
.plaque.chosen-wrong{opacity:1;background:#F4F1EA;box-shadow:inset 0 0 0 6px #8A6A2E}
.plaque.chosen-wrong b{background:#8A6A2E}
.verdict{font-size:30px}
.verdict.theirs{color:#8A6A2E}
.verdict.locked{color:#9A6400}
.plaque.correct .verdict{color:var(--gold-300)}
.plaque.polled .verdict{font-size:20px}
.life{font-size:24px;padding:14px 20px}
.nc-qr svg{width:420px;height:420px;flex:none}
.nc-qr strong{font:800 38px/1.1 var(--ui);color:var(--green-900)}
.nc-qr span{font-size:26px}
.question{position:relative}
.qr-bug{position:absolute;right:24px;top:22px;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;padding:10px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--gold-300)}
.qr-bug svg{width:150px;height:150px}
.qr-bug span{font:800 18px/1 var(--ui);color:var(--gold-800);letter-spacing:.04em}
.ladder-play .question:has(.qr-bug) .question-text,.ladder-play .question:has(.qr-bug) .eyebrow{padding-right:190px}
.turn-end{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:12px}
.te-line{margin:0;font:700 46px/1.15 var(--display);color:var(--green-900)}
.te-prize{margin:0;font:800 120px/1 var(--ui);color:var(--gold-700);font-variant-numeric:tabular-nums}
.nc-title{font-size:120px}
.rung span.amt{margin-left:auto;margin-right:0}
.rung .tick{margin-left:14px}