@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@500;700&family=Montserrat:wght@700;900&family=Teko:wght@600;700&family=Orbitron:wght@700;800;900&family=Chakra+Petch:wght@600;700&family=Bungee&family=Rajdhani:wght@600;700&family=Saira+Condensed:wght@700;800&display=swap');
/* auto-shrunk currency symbol in front of a live value ({{megapot}}) — casino look, no separate layer */
.gfx-cur{ font-size:.58em; margin-right:.06em; vertical-align:.12em; }
/* ---- widgets: prize counter · clock · text crawler ---- */
.gfx-prize-row{ display:inline-flex; align-items:baseline; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* odometer reels (prize "roll" style) */
.gfx-reels{ display:inline-flex; align-items:baseline; }
.gfx-reel{ display:inline-block; height:1em; width:.62em; overflow:hidden; vertical-align:baseline; }
.gfx-reel-col{ display:flex; flex-direction:column; will-change:transform; transition:transform var(--roll-dur,.8s) cubic-bezier(.19,.9,.22,1); }
.gfx-reel-col b{ display:block; height:1em; line-height:1; text-align:center; font-weight:inherit; }
.gfx-reel-sep{ display:inline-block; }
@media (prefers-reduced-motion:reduce){ .gfx-reel-col{ transition:none } }
.gfx-prize-pre, .gfx-prize-suf{ opacity:.92; }
.gfx-clock{ font-variant-numeric:tabular-nums; }
.gfx-clock .gfx-clock-line{ display:inline-flex; align-items:baseline; white-space:nowrap; }
.gfx-clock .gfx-ampm{ font-size:calc(1em * var(--ampm-scale, .5)); font-weight:inherit; margin-left:.22em; letter-spacing:.02em; }
/* COUNTDOWN (Starting Soon) — HH MM SS with optional HRS/MIN/SEC labels */
.gfx-countdown{ font-variant-numeric:tabular-nums; }
.gfx-countdown .gfx-cd-line{ display:inline-flex; align-items:flex-start; gap:.34em; white-space:nowrap; }
.gfx-countdown .gfx-cd-grp{ display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.gfx-countdown .gfx-cd-grp b{ font-weight:inherit; line-height:1; }
.gfx-countdown .gfx-cd-grp i{ font-size:.2em; font-style:normal; font-weight:700; letter-spacing:.22em; opacity:.72; margin-top:.5em; text-indent:.22em; }
.gfx-countdown .gfx-cd-sep{ padding:0 .04em; }
.gfx-countdown .gfx-cd-done{ line-height:1.05; }
.gfx-crawl{ position:relative; }
.gfx-crawl-track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:gfx-crawl-l linear infinite; }
.gfx-crawl-track .cw{ padding-right:3em; }
.gfx-crawl.crawl-r .gfx-crawl-track{ animation-name:gfx-crawl-r; }
@keyframes gfx-crawl-l{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes gfx-crawl-r{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
@media (prefers-reduced-motion:reduce){ .gfx-crawl-track{ animation:none } }
/* ============================================================
   FBM LIVE CONTROL — broadcast graphics: animation library +
   card layouts. Loaded by livefeed.html and ledwall.html on top
   of fbm-theme.css + theme.css.

   Structure the renderer builds:
     .gfx-wrap[data-pos]      full-stage positioner
       .gfx                   entrance / exit animation target
         .gfx-inner           loop animation target (content lives here)
   ============================================================ */

/* ---- Full-stage positioner ---- */
.gfx-wrap{ position:absolute; inset:0; z-index:20; display:flex; pointer-events:none;
  align-items:center; justify-content:center; }
.gfx-wrap[data-pos="top"]{ align-items:flex-start; padding-top:120px; }
.gfx-wrap[data-pos="bottom"]{ align-items:flex-end; padding-bottom:120px; }
.gfx-wrap[data-pos="lower"]{ align-items:flex-end; justify-content:flex-start; padding:0 0 96px 96px; }
.gfx-wrap[data-pos="lower-right"]{ align-items:flex-end; justify-content:flex-end; padding:0 96px 96px 0; }
/* LED wall: event card as a full-width top header (banner left, prize/winners right) */
.gfx-wrap[data-pos="ledwall-top"]{ align-items:flex-start; justify-content:stretch; padding:64px 80px 0; }
.gfx-wrap[data-pos="ledwall-top"] .gfx, .gfx-wrap[data-pos="ledwall-top"] .gfx-inner{ width:100%; }
/* free-form Studio: elements positioned on the full 1920×1080 stage */
.gfx-wrap[data-pos="studio"]{ align-items:stretch; justify-content:stretch; padding:0; }
.gfx-wrap[data-pos="studio"] .gfx, .gfx-wrap[data-pos="studio"] .gfx-inner{ width:100%; height:100%; }
.gfx-studio{ position:absolute; inset:0; }
/* deck-block layer + multi-face rotator */
.gfx-blk{ position:absolute; inset:0; }
.gfx-rot{ position:absolute; inset:0; }
.gfx-rot-face{ position:absolute; inset:0; }                                   /* visible container; the inner box carries opacity + transform */
.gfx-rot-inner{ position:absolute; opacity:0; will-change:transform,opacity; backface-visibility:hidden; -webkit-backface-visibility:hidden; }   /* content-sized; flips carry their own perspective() */
/* ---- FACES widget (type:'faces') — a placeable element that rotates its own faces with transitions ---- */
.gfx-faces{ position:relative; width:100%; height:100%; overflow:hidden; }
.gfx-faces > .gfx-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
/* ---- END-CREDIT CRAWL (kind:'credits') — full-stage scroller ---- */
.gfx-wrap.gfx-fullbleed{ position:absolute; inset:0; display:block; padding:0; }
.gfx-wrap.gfx-fullbleed .gfx, .gfx-wrap.gfx-fullbleed .gfx-inner{ position:absolute; inset:0; width:100%; height:100%; }
.gfx-credits{ position:absolute; inset:0; overflow:hidden; }
.cr-scroll{ position:absolute; left:0; right:0; top:0; padding:0 8%;
  display:flex; flex-direction:column; align-items:center; gap:.55em;
  text-align:center; color:var(--gfx-color,#fff); font-family:var(--font-body,var(--font-display));
  font-size:var(--cr-size,54px); font-weight:700; line-height:1.28; will-change:transform;
  text-shadow:0 6px 26px rgba(0,0,0,.6); }
.cr-scroll .cr-title{ font-family:var(--cr-title-font,var(--font-title,var(--font-display))); font-weight:900;
  font-size:var(--cr-title-size,1.7em); letter-spacing:.01em; margin-bottom:var(--cr-title-mb,.7em); color:var(--cr-title-color,var(--gfx-color,#ffd21a)); }
.cr-scroll .cr-line{ max-width:100%; }
/* movie-style structured credits (kind:'credits' with "## section" / "# role" / name markers).
   Each part's font / size / colour is overridable via the --cr-*-{font,size,color} vars set inline;
   spacing via --cr-gap (inline gap) / --cr-sec-mt / --cr-title-mb; wrapping via .cr-nowrap / .cr-break. */
.cr-scroll.cr-structured{ gap:.32em; }
.cr-scroll.cr-structured .cr-sec{ font-family:var(--cr-sec-font,var(--font-title,var(--font-display))); font-weight:900;
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--cr-sec-size,1.08em); color:var(--cr-sec-color,#ffd21a); margin:var(--cr-sec-mt,1.5em) 0 .3em; }
.cr-scroll.cr-structured .cr-role{ font-family:var(--cr-role-font,inherit); text-transform:uppercase; letter-spacing:.16em; font-weight:700;
  font-size:var(--cr-role-size,.5em); color:var(--cr-role-color,inherit); opacity:.62; margin:var(--cr-role-mt,.9em) 0 .04em; }
.cr-scroll.cr-structured .cr-name{ font-family:var(--cr-name-font,inherit); font-weight:800;
  font-size:1em; line-height:inherit; color:var(--cr-name-color,var(--gfx-color,#fff)); }
/* text-break / wrap controls */
.cr-scroll.cr-nowrap .cr-line, .cr-scroll.cr-nowrap .cr-title{ white-space:nowrap; }
.cr-scroll.cr-break .cr-line{ overflow-wrap:anywhere; word-break:break-word; }
/* logos in the roll — top (e.g. Cash Panalo) and an end row (FBM left / NRK right) */
.cr-scroll .cr-toplogo{ display:block; width:auto; max-width:78%; height:auto; margin:0 auto var(--cr-title-mb,.9em); object-fit:contain; }
.cr-scroll .cr-endlogos{ display:flex; align-items:center; justify-content:center; gap:var(--cr-endgap,5%); flex-wrap:wrap; margin-top:1.8em; width:100%; }
.cr-scroll .cr-endlogos img{ width:auto; max-width:42%; height:auto; object-fit:contain; }
.cr-scroll.cr-structured > :first-child{ margin-top:0; }
.cr-scroll.cr-up.cr-loop   { animation: cr-up   var(--cr-dur,30s) linear infinite; }
.cr-scroll.cr-down.cr-loop { animation: cr-down var(--cr-dur,30s) linear infinite; }
.cr-scroll.cr-up.cr-once   { animation: cr-up-once   var(--cr-dur,30s) linear forwards; }
.cr-scroll.cr-down.cr-once { animation: cr-down-once var(--cr-dur,30s) linear forwards; }
@keyframes cr-up        { from{ transform:translateY(100vh); } to{ transform:translateY(-100%); } }
@keyframes cr-down      { from{ transform:translateY(-100%); } to{ transform:translateY(100vh); } }
@keyframes cr-up-once   { from{ transform:translateY(100vh); } to{ transform:translateY(-100%); } }   /* roll fully off the TOP, then hold blank */
@keyframes cr-down-once { from{ transform:translateY(-100%); } to{ transform:translateY(100vh); } }   /* roll fully off the BOTTOM, then hold blank */
.st-el{ position:absolute; box-sizing:border-box; }
.st-text{ overflow:hidden; }
.st-img img{ display:block; }
.gfx-lwhdr{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; gap:48px; }
.gfx-lwhdr .lw-left{ text-align:left; }
.gfx-lwhdr .lw-right{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; }
.gfx-lwhdr .gfx-block{ margin:0; }
/* header-scale overrides + per-page colours/font (set by the LED-wall page from Settings).
   Defaults: plain WHITE title (no gold box), gold prize, white winners — matches the reference. */
.gfx-lwhdr .gfx-title{ font-size:86px !important; padding:0 !important; background:none !important; border:none !important;
  box-shadow:none !important; color:var(--lw-title,#ffffff) !important;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55) !important; }
.gfx-lwhdr .gfx-prize{ font-size:120px !important; color:var(--lw-prize,#ffd21a) !important;
  text-shadow:0 3px 0 #a06a00,0 7px 0 #6e4700,0 14px 22px rgba(0,0,0,.6); }
.gfx-lwhdr .gfx-winners{ font-size:44px !important; margin-bottom:2px; color:var(--lw-win,#ffffff) !important; }
.gfx-lwhdr .gfx-winners b{ color:var(--lw-win,#ffffff) !important; }
.gfx-lwhdr .gfx-kicker{ font-size:26px !important; color:var(--lw-win,#ffffff) !important; }
/* optional page font override (only when the operator picks one) */
body.lw-font .gfx-lwhdr .gfx-block{ font-family:var(--lw-font, var(--font-display)) !important; }
/* optional: keep the gold banner box on the LED wall */
body.lw-box .gfx-lwhdr .gfx-title{ padding:14px 40px !important;
  background:linear-gradient(180deg,#1a1205,#0a0700) !important; border:4px solid var(--gold) !important;
  box-shadow:0 8px 0 rgba(0,0,0,.4) !important; }

.gfx{ will-change:transform,opacity; }
.gfx-inner{ will-change:transform,filter; }

/* full-stage background image behind a graphic (winners board / any card) */
.gfx-stagebg{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; }
/* per-PAGE custom background (LED wall / Live feed — set in Settings → Page Layouts) */
.page-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; display:none; }
.page-bg.on{ display:block; }
/* Deck Block layers: always-on overlays underneath, rotating faces cross-fade on top */
.blk-always, .blk-rot{ position:absolute; inset:0; }
.blk-rot .blk-face{ position:absolute; inset:0; }

/* stacked "break" text blocks (Title Cards) */
.gfx-block{ margin:10px 0; line-height:1.02; }
.gfx-block:first-child{ margin-top:0; } .gfx-block:last-child{ margin-bottom:0; }
.gfx-event .gfx-normal{ font-family:var(--font-body, var(--font-display)); color:var(--gfx-color,#fff);
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.5); }
.gfx-event .gfx-block.gfx-title{ display:inline-block; }

/* ============================================================
   ENTRANCE animations (one-shot, on .gfx)  — class .in-<name>
   ============================================================ */
.gfx.in-fade  { animation:gInFade  .55s ease           forwards; }
.gfx.in-zoom  { animation:gInZoom  .70s cubic-bezier(.2,1.3,.35,1) forwards; }
.gfx.in-slide { animation:gInSlide .60s cubic-bezier(.22,.61,.36,1) forwards; }
.gfx.in-left  { animation:gInLeft  .60s cubic-bezier(.22,.61,.36,1) forwards; }
.gfx.in-drop  { animation:gInDrop  .85s cubic-bezier(.18,1.5,.3,1)  forwards; }
.gfx.in-flip  { animation:gInFlip  .70s cubic-bezier(.3,1,.4,1)     forwards; }

@keyframes gInFade { from{opacity:0} to{opacity:1} }
@keyframes gInZoom { from{opacity:0; transform:scale(.55)} to{opacity:1; transform:scale(1)} }
@keyframes gInSlide{ from{opacity:0; transform:translateY(70px)} to{opacity:1; transform:translateY(0)} }
@keyframes gInLeft { from{opacity:0; transform:translateX(-140px)} to{opacity:1; transform:translateX(0)} }
@keyframes gInDrop { 0%{opacity:0; transform:translateY(-160px)} 70%{opacity:1} 100%{opacity:1; transform:translateY(0)} }
@keyframes gInFlip { from{opacity:0; transform:perspective(1200px) rotateX(92deg)} to{opacity:1; transform:perspective(1200px) rotateX(0)} }
/* extended entrance set */
.gfx.in-right  { animation:gInRight  .60s cubic-bezier(.22,.61,.36,1) forwards; }
.gfx.in-down   { animation:gInDown   .60s cubic-bezier(.22,.61,.36,1) forwards; }
.gfx.in-bounce { animation:gInBounce .90s cubic-bezier(.28,1.4,.4,1)  forwards; }
.gfx.in-rotate { animation:gInRotate .75s cubic-bezier(.2,1,.3,1)     forwards; }
.gfx.in-blur   { animation:gInBlur   .65s ease                        forwards; }
.gfx.in-flipy  { animation:gInFlipY  .70s cubic-bezier(.3,1,.4,1)     forwards; }
.gfx.in-pop    { animation:gInPop    .50s cubic-bezier(.2,1.7,.35,1)  forwards; }
.gfx.in-swing  { animation:gInSwing  .85s cubic-bezier(.3,1.1,.4,1)   forwards; transform-origin:top center; }
.gfx.in-glitch { animation:gInGlitch .60s steps(2,end)                forwards; }

@keyframes gInRight { from{opacity:0; transform:translateX(140px)}  to{opacity:1; transform:translateX(0)} }
@keyframes gInDown  { from{opacity:0; transform:translateY(-70px)}  to{opacity:1; transform:translateY(0)} }
@keyframes gInBounce{ 0%{opacity:0; transform:translateY(-160px)} 60%{opacity:1; transform:translateY(22px)} 80%{transform:translateY(-9px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes gInRotate{ from{opacity:0; transform:rotate(-14deg) scale(.6)} to{opacity:1; transform:rotate(0) scale(1)} }
@keyframes gInBlur  { from{opacity:0; filter:blur(26px)} to{opacity:1; filter:blur(0)} }
@keyframes gInFlipY { from{opacity:0; transform:perspective(1200px) rotateY(92deg)} to{opacity:1; transform:perspective(1200px) rotateY(0)} }
@keyframes gInPop   { 0%{opacity:0; transform:scale(.3)} 100%{opacity:1; transform:scale(1)} }
@keyframes gInSwing { 0%{opacity:0; transform:rotate(-9deg)} 55%{opacity:1; transform:rotate(5deg)} 78%{transform:rotate(-3deg)} 100%{transform:rotate(0)} }
@keyframes gInGlitch{ 0%{opacity:0; transform:translate(-14px,6px)} 25%{opacity:1; transform:translate(10px,-6px)} 50%{transform:translate(-6px,4px)} 75%{transform:translate(4px,-2px)} 100%{opacity:1; transform:translate(0,0)} }

/* ============================================================
   EXIT animations (one-shot, on .gfx)  — class .out-<name>
   ============================================================ */
.gfx.out-fade  { animation:gOutFade  .45s ease forwards; }
.gfx.out-zoom  { animation:gOutZoom  .45s ease forwards; }
.gfx.out-slide { animation:gOutSlide .45s cubic-bezier(.5,0,.75,0) forwards; }
.gfx.out-left  { animation:gOutLeft  .45s cubic-bezier(.5,0,.75,0) forwards; }
.gfx.out-flip  { animation:gOutFlip  .45s ease forwards; }

@keyframes gOutFade { to{opacity:0} }
@keyframes gOutZoom { to{opacity:0; transform:scale(1.25)} }
@keyframes gOutSlide{ to{opacity:0; transform:translateY(70px)} }
@keyframes gOutLeft { to{opacity:0; transform:translateX(-140px)} }
@keyframes gOutFlip { to{opacity:0; transform:perspective(1200px) rotateX(-92deg)} }
/* extended exit set */
.gfx.out-right  { animation:gOutRight  .45s cubic-bezier(.5,0,.75,0) forwards; }
.gfx.out-up     { animation:gOutUp     .45s cubic-bezier(.5,0,.75,0) forwards; }
.gfx.out-down   { animation:gOutDown   .45s cubic-bezier(.5,0,.75,0) forwards; }
.gfx.out-rotate { animation:gOutRotate .50s ease forwards; }
.gfx.out-blur   { animation:gOutBlur   .45s ease forwards; }
.gfx.out-pop    { animation:gOutPop    .40s ease forwards; }
.gfx.out-flipy  { animation:gOutFlipY  .45s ease forwards; }

@keyframes gOutRight { to{opacity:0; transform:translateX(140px)} }
@keyframes gOutUp    { to{opacity:0; transform:translateY(-70px)} }
@keyframes gOutDown  { to{opacity:0; transform:translateY(70px)} }
@keyframes gOutRotate{ to{opacity:0; transform:rotate(14deg) scale(.6)} }
@keyframes gOutBlur  { to{opacity:0; filter:blur(26px)} }
@keyframes gOutPop   { to{opacity:0; transform:scale(.3)} }
@keyframes gOutFlipY { to{opacity:0; transform:perspective(1200px) rotateY(-92deg)} }

/* ============================================================
   LOOP / idle animations (infinite, on .gfx-inner) — class .loop-<name>
   ============================================================ */
.gfx-inner.loop-pulse { animation:gPulse 2.4s ease-in-out infinite; }
.gfx-inner.loop-float { animation:gFloat 3.4s ease-in-out infinite; }
.gfx-inner.loop-shine .gfx-prize,
.gfx-inner.loop-shine .gfx-title{ animation:gShine 2.6s ease-in-out infinite; }
.gfx-inner.loop-glow  { animation:gGlow  2.2s ease-in-out infinite; }

@keyframes gPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes gFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes gShine { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35) drop-shadow(0 0 26px rgba(255,210,74,.65))} }
@keyframes gGlow  { 0%,100%{filter:drop-shadow(0 0 6px rgba(0,200,255,.2))} 50%{filter:drop-shadow(0 0 26px rgba(0,200,255,.7))} }
/* extended loop / idle set */
.gfx-inner.loop-bob     { animation:gBob     2.0s ease-in-out infinite; }
.gfx-inner.loop-sway    { animation:gSway    3.0s ease-in-out infinite; }
.gfx-inner.loop-beat    { animation:gBeat    1.5s ease-in-out infinite; }
.gfx-inner.loop-wiggle  { animation:gWiggle  2.6s ease-in-out infinite; }
.gfx-inner.loop-breathe { animation:gBreathe 3.6s ease-in-out infinite; }
.gfx-inner.loop-flicker { animation:gFlicker 3.2s linear      infinite; }

@keyframes gBob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes gSway    { 0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(1.6deg)} }
@keyframes gBeat    { 0%,100%{transform:scale(1)} 14%{transform:scale(1.06)} 28%{transform:scale(1)} 42%{transform:scale(1.035)} 56%{transform:scale(1)} }
@keyframes gWiggle  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(1.8deg)} 75%{transform:rotate(-1.8deg)} }
@keyframes gBreathe { 0%,100%{transform:scale(1); opacity:.94} 50%{transform:scale(1.03); opacity:1} }
@keyframes gFlicker { 0%,100%{opacity:1} 48%{opacity:1} 50%{opacity:.72} 52%{opacity:1} 84%{opacity:1} 86%{opacity:.82} 88%{opacity:1} }

/* ============================================================
   CARD: GAME EVENT LOGO  (kind: event)  — the "LET'S DRAW" look
   ============================================================ */
.gfx-event{ text-align:center; padding:10px 40px; max-width:1500px; }
.gfx-event .gfx-kicker{ font-family:var(--font-kicker, var(--font-num)); font-weight:900; font-size:30px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; opacity:.92; margin-bottom:14px;
  text-shadow:0 2px 0 rgba(0,0,0,.5); }
/* Title ribbon — black gold-edged banner like the reference */
.gfx-event .gfx-title{ display:inline-block; font-family:var(--font-title, var(--font-display)); line-height:1;
  padding:18px 54px; border-radius:18px; color:#fff;
  background:linear-gradient(180deg,#1a1205,#0a0700);
  border:4px solid var(--gold); letter-spacing:.02em;
  box-shadow:0 10px 0 rgba(0,0,0,.45), 0 0 46px rgba(255,194,26,.4), inset 0 3px 0 rgba(255,255,255,.12);
  text-shadow:0 3px 0 rgba(0,0,0,.6), 0 0 24px rgba(255,194,26,.4); }
.gfx-event .gfx-winners{ margin-top:26px; font-family:var(--font-winners, var(--font-num)); font-weight:900;
  font-size:44px; letter-spacing:.06em; color:#fff; text-transform:uppercase;
  text-shadow:0 3px 0 rgba(0,0,0,.55); }
.gfx-event .gfx-winners b{ color:var(--brand-secondary); }
/* Big gold prize — hard arcade depth */
.gfx-event .gfx-prize{ margin-top:6px; font-family:var(--font-prize, var(--font-display));
  color:var(--gfx-color,#ffd21a); line-height:.95; letter-spacing:.01em;
  text-shadow:0 4px 0 #a06a00, 0 9px 0 #6e4700, 0 18px 30px rgba(0,0,0,.6); }

/* ============================================================
   CARD: TEXT / TITLE  (kind: text)
   ============================================================ */
.gfx-text{ text-align:center; padding:24px 46px; border-radius:22px; max-width:1500px;
  background:linear-gradient(180deg,rgba(14,23,48,.92),rgba(8,12,30,.92));
  border:2px solid rgba(43,107,255,.5);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 44px rgba(43,107,255,.18); }
.gfx-text.plain{ background:none; border:none; box-shadow:none; }
.gfx-text .gfx-title{ font-family:var(--font-title, var(--font-display)); color:var(--gfx-color,#fff); line-height:1.02;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5); }
.gfx-text .gfx-line{ margin-top:14px; font-family:var(--font-ui); font-weight:600;
  color:#cfe0ff; }
.gfx-text .gfx-line.accent{ color:var(--brand-accent); }

/* ============================================================
   CARD: LOWER-THIRD  (kind: lower)
   ============================================================ */
.gfx-lower{ display:inline-flex; flex-direction:column; align-items:flex-start; }
.gfx-lower .lt-bar{ display:flex; align-items:center; gap:0; }
.gfx-lower .lt-name{ font-family:var(--font-display); color:#fff; font-size:52px; line-height:1;
  padding:16px 30px; background:linear-gradient(180deg,#ff2733,var(--fbm-red));
  border-radius:14px 0 0 14px; box-shadow:0 6px 0 var(--red-dark); }
.gfx-lower .lt-sub{ font-family:var(--font-num); font-weight:900; color:#08111f; font-size:24px;
  letter-spacing:.05em; text-transform:uppercase; padding:16px 26px;
  background:linear-gradient(180deg,#ffe27a,var(--gold)); border-radius:0 14px 14px 0;
  box-shadow:0 6px 0 var(--gold-dark); }

/* ============================================================
   CARD: COMMENT spotlight (kind: comment) — one FB/YT/… comment on air
   ============================================================ */
/* optional brand logo above the pop-up card (per-pop-up custom) */
.cc-logowrap{ display:flex; margin-bottom:14px; }
.cc-logowrap.cc-lp-left{ justify-content:flex-start; } .cc-logowrap.cc-lp-center{ justify-content:center; } .cc-logowrap.cc-lp-right{ justify-content:flex-end; }
.cc-logowrap .cc-logo{ width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.gfx-comment{ position:relative; min-width:640px; max-width:1200px;
  background:linear-gradient(180deg,rgba(14,23,48,.96),rgba(8,12,30,.96));
  border:2px solid var(--plat,#ffc21a); border-left:10px solid var(--plat,#ffc21a); border-radius:18px;
  padding:22px 30px 22px 26px; box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--plat) 40%, transparent); }
.gfx-comment .cc-badge{ display:none !important; }   /* platform badge ("F FACEBOOK") hidden on the comment pop-up */
.gfx-comment .cc-badge .cc-ic{ font-weight:900; }
.gfx-comment .cc-row{ display:flex; align-items:center; gap:18px; margin-top:6px; }
.gfx-comment .cc-av{ width:76px; height:76px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:3px solid var(--plat,#ffc21a); }
.gfx-comment .cc-av.cc-init{ display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--font-display); font-size:38px; }
.gfx-comment .cc-name{ font-family:var(--font-comment, var(--font-num)); font-weight:900; font-size:26px; color:var(--plat,#ffd21a); letter-spacing:.02em; }
.gfx-comment .cc-body{ font-family:var(--font-comment, var(--font-ui)); font-weight:600; font-size:32px; color:#fff; line-height:1.25; margin-top:4px; overflow-wrap:anywhere; word-break:break-word; }

/* ---- pop-up STYLE VARIANTS (operator-selectable) ----
   .v-lower is the default look above; the rest restyle the same markup. */

/* CARD — solid panel, full-width platform ribbon on top */
.gfx-comment.v-card{ border:none; border-radius:20px; padding:0; overflow:hidden; min-width:720px;
  background:linear-gradient(180deg,#0e1730,#080c1e); box-shadow:0 26px 74px rgba(0,0,0,.62), 0 0 0 3px var(--plat); }
.gfx-comment.v-card .cc-badge{ position:static; width:100%; justify-content:flex-start; border-radius:0; padding:13px 28px; font-size:19px; }
.gfx-comment.v-card .cc-row{ margin:0; padding:24px 32px 28px; }

/* CHAT BUBBLE — white rounded bubble whose tail tucks under the avatar so the two read as connected */
.gfx-comment.v-bubble{ border:none; border-radius:26px; padding:20px 30px; min-width:520px; max-width:1100px;
  margin-left:82px; background:#fff; box-shadow:0 20px 54px rgba(0,0,0,.5); }
/* tail: a wide notch from the bubble's lower-left; its tip runs UNDER the avatar (z-index below) so there is no floating gap */
.gfx-comment.v-bubble::after{ content:""; position:absolute; left:-16px; bottom:24px; width:0; height:0;
  border-top:14px solid transparent; border-bottom:14px solid transparent; border-right:20px solid #fff; z-index:0; }
.gfx-comment.v-bubble .cc-badge{ top:-15px; }
.gfx-comment.v-bubble .cc-av{ position:absolute; left:-82px; bottom:2px; width:78px; height:78px; box-sizing:border-box;
  border:4px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.45); z-index:2; }
.gfx-comment.v-bubble .cc-row{ margin-top:8px; }
.gfx-comment.v-bubble .cc-name{ color:var(--plat); }
.gfx-comment.v-bubble .cc-body{ color:#15202b; }

/* MINIMAL BAR — slim single line, name + message inline, no badge tab */
.gfx-comment.v-bar{ min-width:auto; max-width:1360px; border:none; border-left:8px solid var(--plat); border-radius:12px;
  padding:15px 24px; background:linear-gradient(90deg, rgba(8,12,30,.97), rgba(8,12,30,.8)); box-shadow:0 12px 34px rgba(0,0,0,.5); }
.gfx-comment.v-bar .cc-badge{ display:none; }
.gfx-comment.v-bar .cc-row{ margin:0; gap:14px; align-items:center; }
.gfx-comment.v-bar .cc-av{ width:50px; height:50px; }
.gfx-comment.v-bar .cc-txt{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.gfx-comment.v-bar .cc-name{ font-size:24px; } .gfx-comment.v-bar .cc-body{ font-size:26px; margin-top:0; }

/* NEON GLASS — frosted glass with a platform-colored glow */
.gfx-comment.v-neon{ background:rgba(6,10,26,.62); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:2px solid var(--plat); box-shadow:0 0 34px var(--plat), inset 0 0 22px rgba(255,255,255,.06); }
.gfx-comment.v-neon .cc-name{ text-shadow:0 0 14px var(--plat); }
.gfx-comment.v-neon .cc-av{ box-shadow:0 0 18px var(--plat); }

/* ============================================================
   CARD: VIDEO (.mov / .webm transparent overlay)  (kind: video)
   ============================================================ */
.gfx-video{ width:1920px; height:1080px; display:flex; align-items:center; justify-content:center; }
.gfx-video video{ width:100%; height:100%; object-fit:contain; background:transparent; }

/* CARD: LOGO / IMAGE (kind: image) — branding graphic */
.gfx-image img{ max-width:1800px; height:auto; display:block; filter:drop-shadow(0 10px 34px rgba(0,0,0,.55)); }

/* ============================================================
   CARD: WINNERS BOARD  (kind: winners)  — the reference marquee
   ============================================================ */
/* ---- per-element loop animations (Studio elements: bar/text/image/winners) ---- */
/* 3D up/down rock — a strong X-axis tilt that never goes fully edge-on, so the bar always reads
   as a solid slab (with the depth shadow below) instead of turning into a thin broken line. */
@keyframes stFlip3d {
  0%, 100% { transform: perspective(720px) rotateX(-42deg); }
  50%      { transform: perspective(720px) rotateX(42deg); }
}
.anim-flip3d{ animation: stFlip3d 3s ease-in-out infinite; transform-style:preserve-3d; backface-visibility:visible;
  /* extruded-slab depth (so the flipping bar reads as a thick 3D block, not a paper-thin plane) */
  box-shadow:
    0 3px 0 rgba(0,0,0,.34), 0 6px 0 rgba(0,0,0,.28), 0 9px 0 rgba(0,0,0,.22),
    0 12px 0 rgba(0,0,0,.16), 0 15px 0 rgba(0,0,0,.11), 0 22px 34px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.16), inset 0 -5px 10px rgba(0,0,0,.4); }
@keyframes stElPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.anim-pulse{ animation: stElPulse 1.8s ease-in-out infinite; }
@keyframes stElFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.anim-float{ animation: stElFloat 3s ease-in-out infinite; }
@keyframes stElSway { 0%,100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(2.5deg); } }
.anim-sway{ animation: stElSway 3.4s ease-in-out infinite; }
@keyframes stElShine { 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.45); } }
.anim-shine{ animation: stElShine 2s ease-in-out infinite; }
/* ---- extra element loop presets ---- */
@keyframes stElFlip3dY { 0%,100%{ transform:perspective(720px) rotateY(-40deg);} 50%{ transform:perspective(720px) rotateY(40deg);} }
.anim-flip3dy{ animation:stElFlip3dY 3s ease-in-out infinite; transform-style:preserve-3d; backface-visibility:visible; }
@keyframes stElSpin { to{ transform:rotate(360deg);} }
.anim-spin{ animation:stElSpin 6s linear infinite; }
@keyframes stElBounce { 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-26px);} 55%{ transform:translateY(-8px);} 70%{ transform:translateY(-16px);} }
.anim-bounce{ animation:stElBounce 2.2s ease-in-out infinite; }
@keyframes stElBeat { 0%,100%{ transform:scale(1);} 14%{ transform:scale(1.09);} 28%{ transform:scale(1);} 42%{ transform:scale(1.05);} 56%{ transform:scale(1);} }
.anim-beat{ animation:stElBeat 1.6s ease-in-out infinite; }
@keyframes stElWiggle { 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(3deg);} 75%{ transform:rotate(-3deg);} }
.anim-wiggle{ animation:stElWiggle 1.4s ease-in-out infinite; }
@keyframes stElShake { 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-6px);} 40%{ transform:translateX(6px);} 60%{ transform:translateX(-4px);} 80%{ transform:translateX(4px);} }
.anim-shake{ animation:stElShake 1.2s ease-in-out infinite; }
@keyframes stElTada { 0%,100%{transform:scale(1) rotate(0);} 10%,20%{transform:scale(.94) rotate(-3deg);} 30%,50%,70%,90%{transform:scale(1.08) rotate(3deg);} 40%,60%,80%{transform:scale(1.08) rotate(-3deg);} }
.anim-tada{ animation:stElTada 2.6s ease-in-out infinite; }
@keyframes stElGlow { 0%,100%{ filter:drop-shadow(0 0 4px rgba(255,210,74,.3)); } 50%{ filter:drop-shadow(0 0 26px rgba(255,210,74,.85)); } }
.anim-glow{ animation:stElGlow 2s ease-in-out infinite; }
@keyframes stElBreathe { 0%,100%{ transform:scale(1); opacity:.92;} 50%{ transform:scale(1.04); opacity:1;} }
.anim-breathe{ animation:stElBreathe 3.2s ease-in-out infinite; }
@keyframes stElFlicker { 0%,100%{opacity:1;} 48%{opacity:1;} 50%{opacity:.62;} 52%{opacity:1;} 84%{opacity:1;} 86%{opacity:.78;} 88%{opacity:1;} }
.anim-flicker{ animation:stElFlicker 3s steps(1,end) infinite; }
/* in the Studio, freeze the animation on the SELECTED element so it can be dragged/edited
   (lifted momentarily for the instant preview when you pick a loop) */
#stStage.freeze-sel .st-edit.sel{ animation:none !important; }

/* Studio winners element: the board fills its own free-form element box instead of the fixed size. */
.st-el.st-winboard{ overflow:hidden; }
.gfx-winboard.sw-board{ width:100% !important; height:100% !important; margin:0 !important; }
/* FIXED box — always the same size; the list font auto-fits inside it (fitWinners). */
.gfx-winboard{ width:1660px; height:912px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0b1330,#070c20);
  border:6px solid var(--gold); border-radius:26px; padding:0 0 18px;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(255,194,26,.28), inset 0 0 0 2px rgba(255,255,255,.05); }
/* marquee-bulb title bar */
.gfx-winboard .wb-titlebar{ position:relative; margin:-6px -6px 0; padding:22px 40px;
  background:linear-gradient(180deg,#ff2a37,#b3000d); border-radius:26px 26px 0 0;
  border-bottom:4px solid var(--gold);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.18); text-align:center; }
.gfx-winboard .wb-title{ font-family:var(--font-title, var(--font-display)); font-size:56px; color:#ffe9a8; line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 24px rgba(255,194,26,.5); }
.gfx-winboard .wb-sub{ margin-top:8px; font-family:var(--font-num); font-weight:900; font-size:18px;
  letter-spacing:.2em; text-transform:uppercase; color:#ffd7db; }
.gfx-winboard .wb-titlebar{ flex:0 0 auto; }
/* fixed-height list area; flex row of balanced columns; font size = --wb-fs (set by fitWinners) */
.gfx-winboard .wb-list{ flex:1 1 auto; display:flex; gap:44px; padding:24px 50px 22px; overflow:hidden;
  align-items:flex-start; justify-content:center; }
.gfx-winboard .wb-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
/* single-column boards (few winners): centre vertically + horizontally instead of stuck top-left with a big gap */
.gfx-winboard .wb-list.wb-single{ align-items:center; }
.gfx-winboard .wb-list.wb-single .wb-col{ flex:0 1 auto; max-width:72%; }
.gfx-winboard .wb-item{ display:flex; gap:.5em; align-items:center; padding:.34em 4px;
  font-size:var(--wb-fs,24px);   /* row box scales with the auto-fit size, so padding/margins/circle all shrink together */
  border-bottom:1px dashed rgba(255,255,255,.1); }
/* number is intentionally smaller than the name — scale = --wb-numscale (default .62) */
.gfx-winboard .wb-item .wb-n{ font-family:var(--font-num); font-weight:900; color:var(--gold);
  min-width:2.4em; text-align:right; font-size:calc(var(--wb-fs,24px) * var(--wb-numscale,.62)); flex:0 0 auto; }
.gfx-winboard .wb-item .wb-name{ font-family:var(--wb-font, var(--font-names, var(--font-ui))); font-weight:var(--wb-weight,700); font-style:var(--wb-style,normal); color:var(--wb-namecol,#fff);
  font-size:var(--wb-fs,24px); line-height:1.14; text-shadow:0 1px 2px rgba(0,0,0,.6); min-width:0; text-align:var(--wb-align,left); }
/* name + stacked SUB-LINES (date, location…) on the left; prize stays on the right */
.gfx-winboard .wb-nm, .wb-tile .wb-nm{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:.02em; }
.gfx-winboard .wb-sub, .wb-tile .wb-sub{ font-family:var(--wb-font, var(--font-ui)); font-weight:600; font-style:italic; color:var(--wb-subcol, rgba(255,255,255,.66));
  font-size:calc(var(--wb-fs,24px) * var(--wb-subscale,.5)); line-height:1.14; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:var(--wb-align,left); }
/* BOXED ROWS — each winner sits in its own dark bar with a red base line (matches the megapot list screen) */
.gfx-winboard.wb-boxed .wb-item{ background:linear-gradient(180deg, rgba(22,26,44,.94), rgba(8,10,20,.94)); border:none;
  border-bottom:3px solid var(--wb-rowline,#b3122a); border-radius:6px; margin:0 0 .34em; padding:.44em .7em; }
.gfx-winboard.wb-boxed .wb-col{ gap:0; }

/* ---- BARE mode: drop the gold frame + title bar so you can place your own logo on top ---- */
.gfx-winboard.wb-bare{ background:none; border:none; box-shadow:none; padding:0; }
.gfx-winboard.wb-bare .wb-titlebar{ display:none; }
/* ---- RECAP top logo: a fixed-height band across the top; the tile grid auto-fits the space below ---- */
.gfx-winboard .wb-logo{ flex:0 0 auto; height:24%; display:flex; align-items:center; justify-content:center; padding:14px 20px 8px; }
.gfx-winboard.wb-bare .wb-logo{ padding-top:0; }
.gfx-winboard .wb-logo img{ max-height:100%; max-width:80%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)); }

/* ---- TILES layout: each winner is its own numbered box (Deal-or-No-Deal style) ---- */
.gfx-winboard.wb-tiles{ padding:22px; }
.gfx-winboard.wb-tiles.wb-bare{ padding:0; }
/* MASONRY (CSS multi-column): each column packs independently top-to-bottom — no row-alignment gaps.
   Boxes hug their own content (one-liners stay short); one even font for all. */
.wb-grid{ flex:1 1 auto; display:block; column-count:var(--wb-cols,3); column-gap:12px; column-fill:auto;
  padding:8px 12px; overflow:hidden; box-sizing:border-box; }
/* flex-column tiles: every column starts at the TOP (align-items:flex-start), boxes auto-arrange sequentially */
.wb-grid.wb-tflex{ display:flex; align-items:flex-start; gap:12px; column-count:auto; }
.wb-tflex .wb-tcol{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px; align-self:flex-start; }
.wb-tile{ min-width:0; width:100%; margin:0 0 12px; break-inside:avoid; -webkit-column-break-inside:avoid;
  page-break-inside:avoid; perspective:900px; }
.wb-tflex .wb-tile{ margin:0; }
.wb-tile .wb-tile-in{ display:flex; width:100%; align-items:center; gap:.5em; justify-content:flex-start; padding:.32em .62em;
  background:var(--sw-bar, linear-gradient(180deg,#152352,#0a1230)); border:2px solid var(--gold); border-radius:.34em;
  box-shadow:0 7px 20px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 8px rgba(0,0,0,.35);
  backface-visibility:hidden; overflow:hidden; }
.wb-tile .wb-n{ font-family:var(--font-num); font-weight:900; color:#0a1020; background:var(--gold);
  min-width:1.7em; height:1.7em; border-radius:.24em; display:inline-flex; align-items:center; justify-content:center; align-self:center;
  font-size:calc(var(--wb-fs,40px) * var(--wb-numscale,.62)); flex:0 0 auto; box-shadow:inset 0 -2px 0 rgba(0,0,0,.28); }
/* whole name — wraps to 2–3 lines, LEFT-aligned; fitWinners grows the font as big as the box allows */
.wb-tile .wb-name{ font-family:var(--wb-font, var(--font-names, var(--font-ui))); font-weight:var(--wb-weight,800); font-style:var(--wb-style,normal); color:var(--wb-namecol,#fff);
  font-size:var(--wb-fs,40px); line-height:1.12; text-shadow:0 1px 2px rgba(0,0,0,.6);
  white-space:normal; overflow-wrap:normal; word-break:normal; text-align:var(--wb-align,center); flex:1 1 auto; min-width:0; }
.wb-tile .wb-prize{ font-family:var(--font-num); font-weight:900; color:var(--wb-prizecol,#ffd21a); flex:0 0 auto; margin-left:.5em;
  font-size:calc(var(--wb-fs,40px) * .72); white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.gfx-winboard .wb-item .wb-name, .wb-tile .wb-name{ flex:0 0 auto; }   /* the .wb-nm wrapper now carries flex:1; the name is auto inside its column */
.gfx-winboard .wb-item .wb-prize{ font-family:var(--font-num); font-weight:900; color:var(--wb-prizecol,#ffd21a); flex:0 0 auto; margin-left:auto; padding-left:.6em;
  font-size:calc(var(--wb-fs,24px) * .82); white-space:nowrap; }

/* per-box REVEAL (staggered by tile index via --i) — plays on entrance / on air */
@keyframes wbFlip  { from{ opacity:0; transform:rotateX(90deg);} to{ opacity:1; transform:rotateX(0);} }
@keyframes wbFlipY { from{ opacity:0; transform:rotateY(90deg);} to{ opacity:1; transform:rotateY(0);} }
@keyframes wbPop   { 0%{ opacity:0; transform:scale(.3);} 100%{ opacity:1; transform:scale(1);} }
@keyframes wbDrop  { 0%{ opacity:0; transform:translateY(-70px);} 72%{ opacity:1;} 100%{ opacity:1; transform:translateY(0);} }
@keyframes wbSlide { 0%{ opacity:0; transform:translateX(-52px);} 100%{ opacity:1; transform:translateX(0);} }
.wb-tile.wbr-flip { transform-style:preserve-3d; animation:wbFlip  .6s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--i,0) * .11s); }
.wb-tile.wbr-flipy{ transform-style:preserve-3d; animation:wbFlipY .6s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--i,0) * .11s); }
.wb-tile.wbr-pop  { animation:wbPop  .5s cubic-bezier(.34,1.56,.55,1) both; animation-delay:calc(var(--i,0) * .09s); }
.wb-tile.wbr-drop { animation:wbDrop .55s cubic-bezier(.3,1.3,.4,1) both; animation-delay:calc(var(--i,0) * .09s); }
.wb-tile.wbr-slide{ animation:wbSlide .5s ease-out both; animation-delay:calc(var(--i,0) * .08s); }
/* per-box LOOP (starts after that box's reveal); reuses the element-loop keyframes */
.wb-tile-in.wbl-shine{ animation:stElShine 2s ease-in-out infinite; animation-delay:calc(var(--i,0) * .11s + .55s); }
.wb-tile-in.wbl-pulse{ animation:stElPulse 1.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * .11s + .55s); }
.wb-tile-in.wbl-float{ animation:stElFloat 3s ease-in-out infinite; animation-delay:calc(var(--i,0) * .11s + .55s); }
.wb-tile-in.wbl-glow { animation:stElGlow 2s ease-in-out infinite; animation-delay:calc(var(--i,0) * .11s + .55s); }
/* per-box EXIT (staggered) — plays when the board leaves air (.wb-playout added by playOut) */
@keyframes wbFlipOut { from{ opacity:1; transform:rotateX(0);} to{ opacity:0; transform:rotateX(90deg);} }
@keyframes wbFlipYOut{ from{ opacity:1; transform:rotateY(0);} to{ opacity:0; transform:rotateY(90deg);} }
@keyframes wbPopOut  { from{ opacity:1; transform:scale(1);} to{ opacity:0; transform:scale(.3);} }
@keyframes wbDropOut { from{ opacity:1; transform:translateY(0);} to{ opacity:0; transform:translateY(64px);} }
@keyframes wbSlideOut{ from{ opacity:1; transform:translateX(0);} to{ opacity:0; transform:translateX(64px);} }
.wb-tiles.wb-playout .wb-tile{ animation:none; }   /* drop the loop first */
.wb-tiles.wb-playout .wb-tile.wbo-flip { transform-style:preserve-3d; animation:wbFlipOut .45s cubic-bezier(.4,0,.7,.2) both; animation-delay:calc(var(--i,0) * .055s); }
.wb-tiles.wb-playout .wb-tile.wbo-flipy{ transform-style:preserve-3d; animation:wbFlipYOut .45s cubic-bezier(.4,0,.7,.2) both; animation-delay:calc(var(--i,0) * .055s); }
.wb-tiles.wb-playout .wb-tile.wbo-pop  { animation:wbPopOut .4s cubic-bezier(.5,0,.75,0) both; animation-delay:calc(var(--i,0) * .05s); }
.wb-tiles.wb-playout .wb-tile.wbo-drop { animation:wbDropOut .45s cubic-bezier(.5,0,.75,0) both; animation-delay:calc(var(--i,0) * .05s); }
.wb-tiles.wb-playout .wb-tile.wbo-slide{ animation:wbSlideOut .42s ease-in both; animation-delay:calc(var(--i,0) * .045s); }
/* in the Studio, hold tile reveals at their final frame (no flicker while editing); ▶ Preview plays them.
   during a preview (.reveal-play) the exit still runs when .wb-playout is toggled on. */
#stStage:not(.reveal-play) .wb-tile{ animation:none !important; }

/* ============================================================
   DECK PAGE: MECHANICS  (kind: mechanics) — titled full-screen rules
   ============================================================ */
.gfx-mechboard{ width:1660px; height:912px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0b1330,#070c20);
  border:6px solid var(--gold); border-radius:26px; padding:0 0 22px;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(255,194,26,.28), inset 0 0 0 2px rgba(255,255,255,.05); }
.gfx-mechboard .wb-titlebar{ position:relative; margin:-6px -6px 0; padding:22px 40px;
  background:linear-gradient(180deg,#ff2a37,#b3000d); border-radius:26px 26px 0 0;
  border-bottom:4px solid var(--gold); box-shadow:inset 0 3px 0 rgba(255,255,255,.18); text-align:center; flex:0 0 auto; }
.gfx-mechboard .wb-title{ font-family:var(--font-title, var(--font-display)); font-size:56px; color:#ffe9a8; line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 24px rgba(255,194,26,.5); }
/* rules list — one numbered mechanic per row; --mech-fs set by fitMech() */
.gfx-mechboard .mech-list{ flex:1 1 auto; overflow:hidden; padding:34px 64px 12px;
  display:flex; flex-direction:column; justify-content:center; gap:.62em; font-size:var(--mech-fs,34px); }
.gfx-mechboard .mech-item{ display:flex; gap:.7em; align-items:flex-start; }
.gfx-mechboard .mech-n{ flex:0 0 auto; min-width:1.7em; height:1.7em; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-num); font-weight:900;
  font-size:.72em; color:#08111f; background:linear-gradient(180deg,#ffe27a,var(--gold));
  box-shadow:0 3px 0 var(--gold-dark); margin-top:.1em; }
.gfx-mechboard .mech-t{ font-family:var(--font-body, var(--font-ui)); font-weight:600; color:#eef4ff; line-height:1.28;
  text-shadow:0 1px 2px rgba(0,0,0,.55); }

/* ============================================================
   COMMENTS TICKER — scrolling shout-out strip along the bottom
   ============================================================ */
.cm-ticker{ position:absolute; left:0; right:0; bottom:0; z-index:30; height:72px; overflow:hidden;
  display:flex; align-items:center; opacity:0; transform:translateY(100%); transition:opacity .4s, transform .4s;
  background:linear-gradient(180deg, rgba(6,8,15,.2), rgba(6,8,15,.92));
  border-top:3px solid var(--gold); }
.cm-ticker.show{ opacity:1; transform:translateY(0); }
.cm-ticker .cm-track{ display:inline-flex; align-items:center; white-space:nowrap;
  will-change:transform; animation:cmScroll 34s linear infinite; padding-left:100%; }
.cm-ticker .cm-item{ display:inline-flex; align-items:center; font-family:var(--font-comment, var(--font-ui)); font-size:28px; color:#fff; padding:0 10px; }
.cm-ticker .cm-item b{ color:var(--gold); font-weight:800; margin-right:8px; }
.cm-ticker .cm-av{ width:44px; height:44px; border-radius:50%; object-fit:cover; margin-right:10px; vertical-align:middle;
  border:2px solid rgba(255,255,255,.25); }
.cm-ticker .cm-av.cm-init{ display:inline-flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--font-display); font-size:22px; }
.cm-ticker .cm-badge{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; color:#fff; font-weight:900; font-size:16px; margin-right:12px; vertical-align:middle; }
/* operator custom message */
.cm-ticker .cm-msg{ color:var(--gold); font-weight:800; }
.cm-ticker .cm-msg .cm-mic{ margin-right:12px; font-size:26px; }
.cm-ticker .cm-dot{ color:var(--brand-secondary); font-size:14px; padding:0 22px; opacity:.8; }
@keyframes cmScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   LIVE-FEED FOOTER BAR — clock · ticker · PAGCOR · sponsor
   ============================================================ */
.lf-footer{ position:absolute; left:0; right:0; bottom:0; z-index:35; height:var(--footer-height,64px); display:none; align-items:stretch; box-sizing:border-box;
  background:var(--footer-bg, linear-gradient(180deg, rgba(6,8,15,.35), rgba(6,8,15,.96)));
  border-top:var(--footer-accent-w,3px) solid var(--footer-accent, var(--gold));
  border-bottom:var(--footer-accent-bw,0) solid var(--footer-accent-b,transparent); }
.lf-footer.show{ display:flex; }
.lf-clock{ flex:0 0 auto; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; line-height:1;
  padding:0 var(--clock-pad,26px); min-width:var(--clock-width,auto); border-radius:var(--clock-radius,0);
  clip-path:var(--clock-clip,none);
  font-family:var(--clock-font, var(--font-num)); font-weight:900; font-size:var(--clock-size,26px);
  color:var(--clock-color,#fff); background:var(--clock-bg, linear-gradient(180deg,#ff2733,var(--fbm-red)));
  box-shadow:2px 0 12px rgba(0,0,0,.4); }
.lf-clock.off{ display:none; }
/* when the clock is slanted, tuck the ticker under the diagonal cut so it (not the footer bg) shows in the slant */
.lf-ticker{ flex:1 1 auto; overflow:hidden; display:flex; align-items:center; background:var(--ticker-bg,transparent);
  margin-left:calc(-1 * var(--clock-slant, 0px)); }
/* "extend clock colour across the ticker" — the crawler strip picks up the clock's exact background */
.lf-footer.ticker-match-clock .lf-ticker{ background:var(--clock-bg, linear-gradient(180deg,#ff2733,var(--fbm-red))); }
/* seamless crawler: two identical segment groups slide -50% → no leading blank, no gap on loop */
.lf-ticker .lf-track{ display:inline-flex; flex:0 0 auto; align-items:center; width:max-content; white-space:nowrap; will-change:transform;
  animation:cmScroll var(--footer-speed,32s) linear infinite;
  font-family:var(--footer-font, var(--font-footer, var(--font-ui))); font-weight:700; font-size:var(--footer-size,26px); color:var(--footer-text,#fff); }
.lf-ticker .lf-track .seg{ white-space:nowrap; flex:0 0 auto; }
.lf-right{ flex:0 0 auto; position:relative; z-index:1; display:flex; align-items:center; gap:22px; padding:0 26px; max-width:46%; }
.lf-pagcor{ font-family:var(--pagcor-font, var(--font-num)); font-weight:900; font-size:var(--pagcor-size,15px); letter-spacing:.06em; text-transform:uppercase;
  color:var(--pagcor-color, var(--gold)); line-height:1.25; text-align:var(--pagcor-align,right);
  width:var(--pagcor-width,auto); background:var(--pagcor-bg,transparent);
  border-radius:var(--pagcor-radius,8px); clip-path:var(--pagcor-clip,none); box-sizing:border-box;
  padding:var(--pagcor-pt, var(--pagcor-pad,3px)) var(--pagcor-pr, var(--pagcor-pad,12px)) var(--pagcor-pb, var(--pagcor-pad,3px)) var(--pagcor-pl, var(--pagcor-pad,12px));
  margin:var(--pagcor-mt,0) var(--pagcor-mr,0) var(--pagcor-mb,0) var(--pagcor-ml,0);
  border:var(--pagcor-strokeW,0) solid var(--pagcor-strokeC,transparent);
  min-height:var(--pagcor-height,auto); display:flex; flex-direction:column; justify-content:center;
  align-items:var(--pagcor-items,flex-end); }
/* slant/chevron/bevel: sit the PAGCOR box flush to the ticker and overlap it leftward, so the cut
   reveals the ticker underneath (not the footer bg). lf-right (z-index:1) paints above the ticker. */
.lf-footer.pagcor-clip .lf-right{ padding-left:0; }
.lf-footer.pagcor-clip .lf-pagcor{ margin-left:calc(-1 * var(--pagcor-slant, 0px)); }
/* full-bleed: the box background fills edge-to-edge with no side gaps */
.lf-footer.pagcor-full .lf-right{ padding-left:0; padding-right:0; }
.lf-footer.pagcor-full .lf-pagcor{ flex:1 1 auto; padding-left:0; padding-right:0; }
.lf-footer.pagcor-full .lf-pagcor .rot-face{ padding-left:0; padding-right:0; }
/* PAGCOR slot rotator — flips/fades/slides between text/image faces */
.lf-pagcor{ position:relative; }
.lf-pagcor.rot{ height:var(--pagcor-height,44px); min-width:var(--pagcor-width,180px); overflow:hidden; }
.lf-pagcor.rot-3d{ perspective:900px; overflow:visible; }   /* 3D flips need perspective, not clipping */
.lf-pagcor .rot-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:var(--pagcor-just,flex-end); padding:0 var(--pagcor-pad,12px);
  border-radius:inherit; overflow:hidden;   /* per-face background colour keeps the slot's rounded corners */
  backface-visibility:hidden; transform-origin:center center; will-change:transform,opacity;
  transition:transform .55s cubic-bezier(.4,.15,.2,1), opacity .5s ease; }
.lf-pagcor .rot-face .rt{ font-family:var(--pagcor-font, var(--font-num)); font-weight:900; font-size:var(--pagcor-size,15px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--pagcor-color, var(--gold)); line-height:1.2; text-align:var(--pagcor-align,right); }
.lf-pagcor .rot-face img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; display:block; }
/* Camera + Image face: live capture fills the slot, the image sits on top as an overlay/frame */
.lf-pagcor .rot-face .rf-cam{ position:absolute; inset:0; width:100%; height:100%; max-height:none; max-width:none; object-fit:cover; z-index:0; }
.lf-pagcor .rot-face .rf-ov{ position:absolute; inset:0; width:100%; height:100%; max-height:100%; max-width:100%; object-fit:contain; z-index:1; }
.lf-sponsor{ height:46px; width:auto; display:none; flex:0 0 auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* ============================================================
   COMMENT FEED PAGES (comment-feed / -camera / -popup)
   ============================================================ */
.cf-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.cf-list{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; gap:15px; height:100%; padding:120px 56px 56px; overflow:hidden; }
/* full-screen comment wall: cards centered at 70% width (comment-feed page + live-feed overlay stay in sync) */
/* audience WALL: 1/2/3 columns (--cfw-cols) filling top→bottom, and an overall size factor (--cfw-sz) */
.cf-list.cf-wall{ display:grid; grid-template-columns:repeat(var(--cfw-cols,2), minmax(0,1fr));
  gap:calc(16px*var(--cfw-sz,1)) calc(24px*var(--cfw-sz,1)); align-content:start; align-items:start; justify-content:stretch; }
.cf-list.cf-wall .cf-card{ width:auto;
  padding:calc(17px*var(--cfw-sz,1)) calc(28px*var(--cfw-sz,1)) calc(17px*var(--cfw-sz,1)) calc(20px*var(--cfw-sz,1)); gap:calc(22px*var(--cfw-sz,1)); }
.cf-list.cf-wall .cf-card .cf-av{ width:calc(80px*var(--cfw-sz,1)); height:calc(80px*var(--cfw-sz,1)); }
/* --- comment card: glass pill with a platform-tinted edge + corner-badged avatar --- */
.cf-card{ display:flex; gap:22px; align-items:center; padding:17px 28px 17px 20px; border-radius:22px;
  background:linear-gradient(105deg, color-mix(in srgb, var(--plat,#ffc21a) 14%, rgba(12,18,42,.86)), rgba(9,13,28,.82));
  border:1px solid rgba(255,255,255,.09); border-left:6px solid var(--plat,#ffc21a);
  box-shadow:0 16px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:cfIn .5s cubic-bezier(.2,.85,.25,1) both; }
@keyframes cfIn{ from{opacity:0; transform:translateY(30px) scale(.985);} to{opacity:1; transform:none;} }
.cf-avwrap{ position:relative; flex:0 0 auto; }
.cf-av{ width:80px; height:80px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid var(--plat,#ffc21a); box-shadow:0 5px 16px rgba(0,0,0,.45); }
.cf-av.cf-init{ display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-size:36px; }
.cf-badge{ position:absolute; right:-3px; bottom:-3px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:16px;
  background:var(--plat,#ffc21a); border:3px solid #0b1020; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.cf-txt{ min-width:0; }
.cf-name{ font-family:var(--font-comment, var(--font-num)); font-weight:900; font-size:24px; color:var(--plat,#ffd21a);
  letter-spacing:.01em; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-body{ font-family:var(--font-comment, var(--font-ui)); font-weight:500; font-size:30px; color:#eef4ff; line-height:1.26; word-wrap:break-word; overflow-wrap:anywhere; word-break:break-word; }
/* Pinned comment enlarges into a bigger highlighted bubble, staying INSIDE the widget so it's never
   cropped (whatever scale, wherever the widget sits on the stage):
   - The normal comments sit INSET with a side "allowance" (--cf-inset). The pinned bubble drops that
     inset and expands to the widget's full content width — wider than the others, but a fixed max that
     never exceeds the widget edge.
   - It also grows its text + padding (--card-scale) so it reads proportionally bigger, and that real
     height makes the flex column reflow — the other comments slide away (no overlap).
   Speed = --cf-pin-speed. No transform/overflow tricks, so nothing can spill or clip.
   Used by the on-air comment-feed WIDGETS (.gfx-cfeed) AND the full-page audience WALL (.cf-wall). */
.gfx-cfeed .cf-card, .cf-wall .cf-card{
  transition:margin var(--cf-pin-speed,.38s) cubic-bezier(.2,1.15,.3,1),
             padding var(--cf-pin-speed,.38s) cubic-bezier(.2,1.15,.3,1),
             width var(--cf-pin-speed,.38s) cubic-bezier(.2,1.15,.3,1),
             gap var(--cf-pin-speed,.38s) ease, box-shadow .3s ease; }
.gfx-cfeed .cf-card{ margin-left:var(--cf-inset,0); margin-right:var(--cf-inset,0); }
.gfx-cfeed .cf-card .cf-name, .gfx-cfeed .cf-card .cf-body, .cf-wall .cf-card .cf-name, .cf-wall .cf-card .cf-body{ transition:font-size var(--cf-pin-speed,.38s) ease; }
.gfx-cfeed .cf-card .cf-av, .cf-wall .cf-card .cf-av{ transition:width var(--cf-pin-speed,.38s) ease, height var(--cf-pin-speed,.38s) ease; }
/* Feed UPSCALE % (--cf-zoom, 1 = 100%): scale the whole feed uniformly. transform scales the entire
   list (all templates, text, avatars, spacing) as one unit — anchored to the feed's reading edge so
   it grows the natural way (wall = from the top; widgets = from the bottom, newest kept in view). */
.cf-list.cf-wall{ transform:scale(var(--cf-zoom,1)); transform-origin:top center; }
.cf-list.gfx-cfeed{ transform:scale(var(--cf-zoom,1)); transform-origin:top center; }
/* Keep the SAME layout as a normal card (avatar left, name + message right) — do not re-align the
   content on enlarge. Sizes grow via --g and the whole bubble pops from centre. */
.gfx-cfeed .cf-card.cf-pinned, .cf-wall .cf-card.cf-pinned{ --g:var(--card-scale,1.4); z-index:5; position:relative;
  padding:calc(17px*var(--g)) calc(28px*var(--g)) calc(17px*var(--g)) calc(20px*var(--g)); gap:calc(22px*var(--g));
  border-color:var(--plat,#ffc21a); transform-origin:center;
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 0 2px var(--plat,#ffc21a), 0 0 46px color-mix(in srgb, var(--plat,#ffc21a) 45%, transparent); }
.gfx-cfeed .cf-card.cf-pinned{ margin-left:0; margin-right:0; }     /* widget: fill to the full width */
.cf-wall .cf-card.cf-pinned{ width:92%; }                           /* wall: wider than the 70% normal card */
.gfx-cfeed .cf-card.cf-pinned .cf-name, .cf-wall .cf-card.cf-pinned .cf-name{ font-size:calc(24px*var(--g)); white-space:normal; }
.gfx-cfeed .cf-card.cf-pinned .cf-body, .cf-wall .cf-card.cf-pinned .cf-body{ font-size:calc(30px*var(--g)); }
.gfx-cfeed .cf-card.cf-pinned .cf-av, .cf-wall .cf-card.cf-pinned .cf-av{ width:calc(80px*var(--g)); height:calc(80px*var(--g)); }

/* ---- COMMENT-FEED ENTRANCE ANIMATION (operator-selectable — plays as each new comment arrives) ----
   default (.cfa-slideup) is cfIn above; the rest swap the keyframe on the card. */
@keyframes cfaFade { from{ opacity:0; } to{ opacity:1; } }
@keyframes cfaPop  { 0%{ opacity:0; transform:scale(.4); } 100%{ opacity:1; transform:none; } }
@keyframes cfaDrop { 0%{ opacity:0; transform:translateY(-46px); } 72%{ opacity:1; } 100%{ opacity:1; transform:none; } }
@keyframes cfaLeft { from{ opacity:0; transform:translateX(-52px); } to{ opacity:1; transform:none; } }
@keyframes cfaZoom { from{ opacity:0; transform:scale(1.14); } to{ opacity:1; transform:none; } }
.cf-list.cfa-fade .cf-card{ animation:cfaFade .5s ease both; }
.cf-list.cfa-pop  .cf-card{ animation:cfaPop  .5s cubic-bezier(.34,1.56,.55,1) both; }
.cf-list.cfa-drop .cf-card{ animation:cfaDrop .55s cubic-bezier(.3,1.3,.4,1) both; }
.cf-list.cfa-left .cf-card{ animation:cfaLeft .5s cubic-bezier(.2,.85,.25,1) both; }
.cf-list.cfa-zoom .cf-card{ animation:cfaZoom .5s ease both; }

/* ---- COMMENT-FEED TEMPLATE STYLES (operator-selectable — mirror the comment pop-up variants) ----
   default (.cfs-glass) is the frosted pill above; the rest restyle the same card markup. */
/* LOWER-THIRD — solid dark panel, thick platform edge, no blur */
.cf-list.cfs-lower .cf-card{ border-radius:12px; border:2px solid var(--plat,#ffc21a); border-left:10px solid var(--plat,#ffc21a);
  background:linear-gradient(180deg,rgba(14,23,48,.96),rgba(8,12,30,.96)); -webkit-backdrop-filter:none; backdrop-filter:none; }
/* CARD (ribbon) — solid panel, name sits on a platform-colour chip */
.cf-list.cfs-card .cf-card{ border-radius:16px; border:none; padding:0; align-items:center;
  background:linear-gradient(180deg,#0e1730,#080c1e); box-shadow:0 16px 42px rgba(0,0,0,.5), 0 0 0 3px var(--plat,#ffc21a);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.cf-list.cfs-card .cf-avwrap{ padding:14px 0 14px 18px; }
.cf-list.cfs-card .cf-txt{ padding:14px 26px 16px 20px; }
.cf-list.cfs-card .cf-name{ display:inline-block; background:var(--plat,#ffc21a); color:#0a1020; padding:2px 12px; border-radius:6px; white-space:normal; }
/* CHAT BUBBLE — white rounded bubble, dark body text */
.cf-list.cfs-bubble .cf-card{ border-radius:26px; border:none; background:#fff; box-shadow:0 16px 44px rgba(0,0,0,.5);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.cf-list.cfs-bubble .cf-name{ color:var(--plat,#ffc21a); }
.cf-list.cfs-bubble .cf-body{ color:#15202b; }
.cf-list.cfs-bubble .cf-badge{ border-color:#fff; }
/* MINIMAL BAR — slim line, small avatar, name + body inline, no badge */
.cf-list.cfs-bar .cf-card{ border-radius:10px; border:none; border-left:8px solid var(--plat,#ffc21a); padding:12px 24px; gap:16px;
  background:linear-gradient(90deg,rgba(8,12,30,.97),rgba(8,12,30,.8)); -webkit-backdrop-filter:none; backdrop-filter:none; }
.cf-list.cfs-bar .cf-av{ width:52px; height:52px; }
.cf-list.cfs-bar .cf-badge{ display:none; }
.cf-list.cfs-bar .cf-txt{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.cf-list.cfs-bar .cf-name{ font-size:24px; margin-bottom:0; }
.cf-list.cfs-bar .cf-body{ font-size:28px; }
/* NEON GLASS — frosted with a platform-coloured glow */
.cf-list.cfs-neon .cf-card{ border:2px solid var(--plat,#ffc21a); background:rgba(6,10,26,.6);
  box-shadow:0 0 30px var(--plat,#ffc21a), inset 0 0 22px rgba(255,255,255,.06); }
.cf-list.cfs-neon .cf-name{ text-shadow:0 0 14px var(--plat,#ffc21a); }
.cf-list.cfs-neon .cf-av{ box-shadow:0 0 18px var(--plat,#ffc21a); }
/* continuous auto-scroll comment widget (news-feed loop): the list is duplicated (.cf-clone) and
   scrolled via scrollTop for a seamless wrap. Clones must not replay the card entrance animation. */
.gfx-cfeed.cf-autoscroll{ overflow:hidden; }
.gfx-cfeed .cf-clone{ animation:none !important; }
/* header pill */
/* GENERAL synced comment typography (Settings → Feed → Advanced font) — applies to EVERY comment feed
   (full-page wall, studio widgets, Live-Chat drawer) and the pop-up. Font SIZE is applied inline by the
   renderers (a Chromium quirk blocks a var-driven font-size on these cards). */
.cf-card .cf-body, .gfx-comment .cc-body{ font-weight:var(--cf-weight,500); font-style:var(--cf-style,normal); letter-spacing:var(--cf-ls,normal); line-height:var(--cf-lh,1.26); }
.cf-card .cf-name, .gfx-comment .cc-name{ font-style:var(--cf-style,normal); letter-spacing:var(--cf-ls,normal); }
.cf-head{ position:absolute; top:40px; left:56px; z-index:3; display:flex; align-items:center; gap:15px;
  padding:11px 22px 11px 14px; border-radius:999px; background:rgba(9,13,28,.68);
  border:1px solid rgba(255,255,255,.09); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cf-head img{ height:44px; } .cf-head h1{ font-family:var(--font-display); font-size:30px; color:#fff; letter-spacing:.02em; }
.cf-head h1 .red{ color:var(--fbm-red); }
.cf-head::before{ content:""; width:11px; height:11px; border-radius:50%; background:var(--fbm-red);
  box-shadow:0 0 12px var(--fbm-red); animation:cfLive 1.2s ease-in-out infinite; }
@keyframes cfLive{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.8);} }

/* ============================================================
   IDLE-SCREEN LOGO — animated logo over the default background,
   shown only while nothing is on air (LED wall + live feed).
   IN/OUT play on .idle-logo-layer; LOOP plays on the inner <img>.
   ============================================================ */
.idle-logo-layer{ position:absolute; inset:0; z-index:12; pointer-events:none; }
/* positionable box: centered on (--idle-x,--idle-y), sized to --idle-size of the stage width */
.idle-logo-pos{ position:absolute; left:var(--idle-x,50%); top:var(--idle-y,50%); transform:translate(-50%,-50%);
  width:var(--idle-size,46%); max-width:100%; display:flex; align-items:center; justify-content:center; }
.idle-logo-pos img{ width:100%; height:auto; max-height:none; object-fit:contain;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55)); }
/* entrance */
.idle-in-fade  { animation:idleInFade  .7s ease both; }
.idle-in-pop   { animation:idleInPop   .7s cubic-bezier(.34,1.56,.55,1) both; }
.idle-in-zoom  { animation:idleInZoom  .8s cubic-bezier(.2,.75,.25,1) both; }
.idle-in-drop  { animation:idleInDrop  .75s cubic-bezier(.3,1.3,.4,1) both; }
.idle-in-slide { animation:idleInSlide .7s cubic-bezier(.2,.8,.25,1) both; }
@keyframes idleInFade { from{opacity:0} to{opacity:1} }
@keyframes idleInPop  { from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)} }
@keyframes idleInZoom { from{opacity:0; transform:scale(1.6)} to{opacity:1; transform:scale(1)} }
@keyframes idleInDrop { from{opacity:0; transform:translateY(-90px)} to{opacity:1; transform:translateY(0)} }
@keyframes idleInSlide{ from{opacity:0; transform:translateX(-140px)} to{opacity:1; transform:translateX(0)} }
/* exit */
.idle-out-fade  { animation:idleOutFade  .55s ease both; }
.idle-out-pop   { animation:idleOutPop   .55s ease-in both; }
.idle-out-zoom  { animation:idleOutZoom  .6s ease-in both; }
.idle-out-drop  { animation:idleOutDrop  .6s ease-in both; }
.idle-out-slide { animation:idleOutSlide .55s ease-in both; }
@keyframes idleOutFade { from{opacity:1} to{opacity:0} }
@keyframes idleOutPop  { from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(.6)} }
@keyframes idleOutZoom { from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(1.5)} }
@keyframes idleOutDrop { from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(90px)} }
@keyframes idleOutSlide{ from{opacity:1; transform:translateX(0)} to{opacity:0; transform:translateX(140px)} }
/* loop (starts after the entrance) */
.idle-lp-float{ animation:idleLpFloat 3.4s ease-in-out .7s infinite; }
.idle-lp-pulse{ animation:idleLpPulse 2.2s ease-in-out .7s infinite; }
.idle-lp-glow { animation:idleLpGlow  2.4s ease-in-out .7s infinite; }
.idle-lp-shine{ animation:idleLpShine 2.6s ease-in-out .7s infinite; }
.idle-lp-sway { animation:idleLpSway  4.5s ease-in-out .7s infinite; }
@keyframes idleLpFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes idleLpPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes idleLpGlow { 0%,100%{filter:drop-shadow(0 10px 34px rgba(0,0,0,.55))} 50%{filter:drop-shadow(0 0 34px rgba(255,210,26,.75))} }
@keyframes idleLpShine{ 0%,100%{filter:drop-shadow(0 10px 34px rgba(0,0,0,.55)) brightness(1)} 50%{filter:drop-shadow(0 10px 34px rgba(0,0,0,.55)) brightness(1.28)} }
@keyframes idleLpSway { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }

/* ============================================================
   WINNERS BOARD — TEMPLATE SKINS (el.tpl → .wt-<tpl>)
   Restyle the board without touching structure, so auto-fit still works.
   Applies to both Tiles (.wb-tile-in) and List (.wb-item).
   ============================================================ */
/* —— GOLD: bright gradient boxes, dark ink —— */
.gfx-winboard.wt-gold .wb-tile-in{ background:linear-gradient(180deg,#ffe488,#f3b829); border-color:#8a5a12;
  box-shadow:0 7px 20px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.5); }
.gfx-winboard.wt-gold .wb-name{ color:#241500; text-shadow:none; }
.gfx-winboard.wt-gold .wb-n{ background:#241500; color:#ffd766; }
.gfx-winboard.wt-gold .wb-prize{ color:#3a2400; text-shadow:none; }
.gfx-winboard.wt-gold .wb-item .wb-name{ color:#ffe488; }
.gfx-winboard.wt-gold .wb-item .wb-n{ color:#ffcf4a; }
.gfx-winboard.wt-gold .wb-item{ border-bottom-color:rgba(255,210,60,.28); }

/* —— NEON: dark glass + electric-blue glow —— */
.gfx-winboard.wt-neon .wb-tile-in{ background:rgba(6,12,32,.82); border:2px solid var(--neon-blue,#28d7ff);
  box-shadow:0 0 16px rgba(40,200,255,.55), inset 0 0 14px rgba(40,200,255,.14); }
.gfx-winboard.wt-neon .wb-name{ color:#eaffff; text-shadow:0 0 8px rgba(40,200,255,.5); }
.gfx-winboard.wt-neon .wb-n{ background:linear-gradient(180deg,#28d7ff,#1478b0); color:#00121c; box-shadow:0 0 10px rgba(40,200,255,.7); }
.gfx-winboard.wt-neon .wb-item .wb-name{ color:#eaffff; }
.gfx-winboard.wt-neon .wb-item .wb-n{ color:#28d7ff; }
.gfx-winboard.wt-neon .wb-item{ border-bottom-color:rgba(40,200,255,.32); }

/* —— MINIMAL: no boxes, thin rules, clean —— */
.gfx-winboard.wt-minimal .wb-tile-in{ background:transparent; border:0; border-radius:0; box-shadow:none;
  border-bottom:2px solid rgba(255,255,255,.16); padding:.28em .2em; }
.gfx-winboard.wt-minimal .wb-n{ background:transparent; color:var(--gold,#ffd21a); box-shadow:none;
  min-width:1.5em; height:auto; justify-content:flex-start; }
.gfx-winboard.wt-minimal .wb-name{ color:#fff; }
.gfx-winboard.wt-minimal .wb-item{ border-bottom-style:solid; }

/* —— RIBBON: rounded pill bars —— */
.gfx-winboard.wt-ribbon .wb-tile-in{ border-radius:999px; background:linear-gradient(180deg,#1a2a5e,#0c1533);
  border:2px solid var(--gold,#ffd21a); padding-left:.3em; }
.gfx-winboard.wt-ribbon .wb-n{ border-radius:50%; width:1.7em; height:1.7em; min-width:1.7em; }
.gfx-winboard.wt-ribbon .wb-item{ background:linear-gradient(180deg,#1a2a5e,#0c1533); border:2px solid var(--gold,#ffd21a);
  border-radius:999px; margin-bottom:.28em; padding:.24em .8em; }

/* —— GLASS: frosted translucent —— */
.gfx-winboard.wt-glass .wb-tile-in{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.24);
  box-shadow:0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:.55em; }
.gfx-winboard.wt-glass .wb-name{ color:#fff; }
.gfx-winboard.wt-glass .wb-n{ background:rgba(255,255,255,.9); color:#0a1020; }
.gfx-winboard.wt-glass .wb-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:9px; margin-bottom:5px; padding:.24em .7em; }

/* —— PODIUM: top-3 get gold / silver / bronze treatment —— */
.gfx-winboard.wt-podium .wb-tile[data-rank="1"] .wb-tile-in{ border-color:#ffd23a; background:linear-gradient(180deg,#3a2f0a,#181205);
  box-shadow:0 0 20px rgba(255,210,58,.7), inset 0 2px 0 rgba(255,255,255,.3); }
.gfx-winboard.wt-podium .wb-tile[data-rank="1"] .wb-n{ background:linear-gradient(180deg,#ffe071,#e8b21a); color:#241500; }
.gfx-winboard.wt-podium .wb-tile[data-rank="2"] .wb-tile-in{ border-color:#cfd8e8; box-shadow:0 0 14px rgba(207,216,232,.5); }
.gfx-winboard.wt-podium .wb-tile[data-rank="2"] .wb-n{ background:linear-gradient(180deg,#f2f6ff,#b9c4d8); color:#12203a; }
.gfx-winboard.wt-podium .wb-tile[data-rank="3"] .wb-tile-in{ border-color:#e2954e; box-shadow:0 0 14px rgba(226,149,78,.5); }
.gfx-winboard.wt-podium .wb-tile[data-rank="3"] .wb-n{ background:linear-gradient(180deg,#f2b878,#cf7a2f); color:#2a1400; }
.gfx-winboard.wt-podium .wb-item[data-rank="1"] .wb-name{ color:#ffd23a; }
.gfx-winboard.wt-podium .wb-item[data-rank="2"] .wb-name{ color:#dfe6f0; }
.gfx-winboard.wt-podium .wb-item[data-rank="3"] .wb-name{ color:#e2954e; }

/* ============================================================
   PER-LAYER (studio element) ENTRANCE / EXIT animations.
   .st-elw carries position + IN/OUT; the inner .st-el keeps the LOOP.
   ============================================================ */
.st-elw{ position:absolute; box-sizing:border-box; }
/* ENTRANCE (plays once when the card shows) */
.st-elw.elin-fade { animation:elInFade  .55s ease both; }
.st-elw.elin-zoom { animation:elInZoom  .6s cubic-bezier(.2,.8,.25,1) both; }
.st-elw.elin-pop  { animation:elInPop   .6s cubic-bezier(.34,1.56,.55,1) both; }
.st-elw.elin-drop { animation:elInDrop  .6s cubic-bezier(.3,1.3,.4,1) both; }
.st-elw.elin-rise { animation:elInRise  .55s cubic-bezier(.2,.8,.25,1) both; }
.st-elw.elin-left { animation:elInLeft  .55s cubic-bezier(.2,.8,.25,1) both; }
.st-elw.elin-right{ animation:elInRight .55s cubic-bezier(.2,.8,.25,1) both; }
.st-elw.elin-flip { animation:elInFlip  .6s ease both; }
@keyframes elInFade { from{opacity:0} to{opacity:1} }
@keyframes elInZoom { from{opacity:0;transform:scale(1.35)} to{opacity:1;transform:scale(1)} }
@keyframes elInPop  { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }
@keyframes elInDrop { from{opacity:0;transform:translateY(-70px)} to{opacity:1;transform:translateY(0)} }
@keyframes elInRise { from{opacity:0;transform:translateY(70px)} to{opacity:1;transform:translateY(0)} }
@keyframes elInLeft { from{opacity:0;transform:translateX(-90px)} to{opacity:1;transform:translateX(0)} }
@keyframes elInRight{ from{opacity:0;transform:translateX(90px)} to{opacity:1;transform:translateX(0)} }
@keyframes elInFlip { from{opacity:0;transform:perspective(700px) rotateX(90deg)} to{opacity:1;transform:perspective(700px) rotateX(0)} }
/* EXIT (added on play-out, held with both) */
.st-elw.elout-fade { animation:elOutFade  .5s ease both; }
.st-elw.elout-zoom { animation:elOutZoom  .5s ease-in both; }
.st-elw.elout-pop  { animation:elOutPop   .5s ease-in both; }
.st-elw.elout-drop { animation:elOutDrop  .55s ease-in both; }
.st-elw.elout-rise { animation:elOutRise  .55s ease-in both; }
.st-elw.elout-left { animation:elOutLeft  .5s ease-in both; }
.st-elw.elout-right{ animation:elOutRight .5s ease-in both; }
.st-elw.elout-flip { animation:elOutFlip  .5s ease both; }
@keyframes elOutFade { from{opacity:1} to{opacity:0} }
@keyframes elOutZoom { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.35)} }
@keyframes elOutPop  { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.5)} }
@keyframes elOutDrop { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(70px)} }
@keyframes elOutRise { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-70px)} }
@keyframes elOutLeft { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(-90px)} }
@keyframes elOutRight{ from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(90px)} }
@keyframes elOutFlip { from{opacity:1;transform:perspective(700px) rotateX(0)} to{opacity:0;transform:perspective(700px) rotateX(90deg)} }

/* ---- comment-feed WIDGET (a positionable studio layer) — reuses the .cf-card styles, sized to its box ---- */
.gfx-cfeed{ padding:16px; gap:12px; justify-content:flex-start; }   /* newest comment on top */
.st-el.st-comments{ overflow:hidden; }

/* ── RAFFLE RECAP widget (Studio element type 'recap') — comment-hashtag winners photo+name grid.
   Everything scales with --rc-s (set by GFX._fitRecap so the whole round fits the element box). ── */
.gfx-recap{ display:flex; flex-direction:column; gap:calc(22px*var(--rc-s,1)); overflow:hidden; --rc-s:1;
  width:100%; height:100%; box-sizing:border-box; padding:calc(16px*var(--rc-s,1)) calc(18px*var(--rc-s,1));
  font-family:'Chakra Petch',Montserrat,system-ui,sans-serif; }
/* placeholder / loading state — centred both ways in the widget box */
.gfx-recap .rc-empty{ margin:auto; color:#eaf0ff; font:800 30px system-ui; text-align:center; padding:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.gfx-recap .rc-loadtx{ letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.gfx-recap .rc-spin{ width:64px; height:64px; border-radius:50%; flex:0 0 auto; display:block;
  border:7px solid rgba(255,255,255,.16); border-top-color:var(--rc-acc,#f4c430); animation:rcSpin .8s linear infinite; }
@keyframes rcSpin{ to{ transform:rotate(360deg); } }
.gfx-recap .rc-round{ display:flex; flex-direction:column; gap:calc(14px*var(--rc-s,1)); }
.gfx-recap .rc-head{ display:flex; align-items:baseline; gap:calc(14px*var(--rc-s,1)); flex-wrap:wrap; }
.gfx-recap[data-align="center"] .rc-head{ justify-content:center; }
.gfx-recap[data-align="right"]  .rc-head{ justify-content:flex-end; }
.gfx-recap .rc-r{ font-weight:900; color:var(--rc-acc,#f4c430); font-size:calc(48px*var(--rc-s,1)); letter-spacing:.02em; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.75); }
.gfx-recap .rc-p{ font-weight:900; color:#fff; font-size:calc(42px*var(--rc-s,1)); line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.75); }
.gfx-recap .rc-t{ font-weight:800; color:var(--rc-acc,#f4c430); font-size:calc(26px*var(--rc-s,1)); opacity:.95; text-shadow:0 2px 8px rgba(0,0,0,.75); }
.gfx-recap .rc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(calc(360px*var(--rc-s,1)),1fr)); gap:calc(14px*var(--rc-s,1)); }
/* SOLID tiles so winner names stay readable over any (busy) background */
.gfx-recap .rc-tile{ display:flex; align-items:center; gap:calc(16px*var(--rc-s,1));
  background:linear-gradient(180deg,rgba(13,19,42,.94),rgba(7,11,26,.94));
  border:1px solid color-mix(in srgb,var(--rc-acc,#f4c430) 48%,transparent); border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.45); padding:calc(9px*var(--rc-s,1)) calc(32px*var(--rc-s,1)) calc(9px*var(--rc-s,1)) calc(9px*var(--rc-s,1));
  animation:rcTileIn .5s cubic-bezier(.3,1,.4,1) both; animation-delay:calc(var(--i,0)*.06s); }
@keyframes rcTileIn{ from{ transform:translateX(48px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.gfx-recap .rc-av{ width:calc(84px*var(--rc-s,1)); height:calc(84px*var(--rc-s,1)); border-radius:50%; object-fit:cover;
  border:3px solid var(--rc-acc,#f4c430); background:#0a1226; flex:0 0 auto; }
.gfx-recap .rc-ini{ display:flex; align-items:center; justify-content:center; font-weight:900;
  font-size:calc(36px*var(--rc-s,1)); color:#241500; background:var(--rc-acc,#f4c430); }
.gfx-recap .rc-nm{ font-size:calc(40px*var(--rc-nsz,1)*var(--rc-s,1)); font-weight:800; color:var(--rc-nm,#fff);
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:clip; }