/* ==========================================================================
   Fan Cam AI — jumbotron display (/aicam-jumbotron.html)
   Extracted from the page's former inline <style> block.
   Edit this file AND regenerate css/aicam-jumbotron.min.css (the page
   loads the .min).
   ========================================================================== */

:root { --tally: #ff2e3f; --ok: #3ddc84; }

/* Local palette derived from the ScreenUp standard config vars (set on
   body by the game JSON config, same as aicam.html) — the current dark
   design is the fallback when no game config exists. */
body {
  --ink: var(--background-color, #000);
  --panel: var(--background-third-color, #151a24);
  --line: #2a3245;
  --text: var(--primary-color, #e8e9ec);
  --dim: var(--fifth-color, #8b93a5);
  --amber: var(--secondary-color, #ffb02e);
  --cta-ink: var(--fourth-color, #16130a);
  /* Font system - initialized here, overridden by the game JSON config
     (Font / Taille Font fields, applied on body by JS: inline style wins
     over these declarations). All sizes below derive from the two bases. */
  --font-size: 1rem;
  --secondary-font-size: .75rem;
  --font-family: 'Archivo';
  --secondary-font-family: 'IBM Plex Mono';
  /* --qr-base comes from the back-office "Taille QR Code" slider (rem);
     12vw default when unset. Final size = base x 4. */
  --qr-size: calc(var(--qr-base, 12vw) * 4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; cursor: none; }
body { background: var(--secondary-color); }
body.show-ui { cursor: default; }

/* Program output: WebGL canvas upscales 1280x704 -> screen */
#glCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
video { display: none; } /* raw elements are hidden; canvas is the program out */

/* HUD (operator-facing, hidden on air by default) */
#hud {
  position: fixed; top: 16px; left: 16px; z-index: 10;
  font-family: var(--secondary-font-family), ui-monospace, monospace; font-size: calc(var(--secondary-font-size));
  color: var(--text); background: rgba(10,12,18,.82); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; line-height: 1.7; min-width: 280px;
  display: none;
}
body.show-ui #hud { display: block; }
#hud .k { color: var(--dim); }
#hud .live { color: var(--tally); }
#hud .ok { color: var(--ok); }
#hud .cost { color: var(--amber); }
#hud .keys { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--secondary-font-size); }

/* Standby card shown when off air */
#standby {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; z-index: 5;
  font-family: var(--secondary-font-family), ui-monospace, monospace; color: var(--secondary-color);
  letter-spacing: .3em; font-size: var(--font-size); text-transform: uppercase;
  /* Branded backdrop from the game JSON config (form_image), like fxcam-jumbotron */
  background-image: var(--background-image, none);
  background-size: cover; background-position: center;
}
#standby.hidden { display: none; }
/* Header/banner partner logo (config header_logo) above the standby title */
#standby img.logo { max-height: 14vh; max-width: 40vw; margin-bottom: 12px; }
#standby img.qr { width: var(--qr-size); border-radius: 14px; margin-top: 14px; }
/* Click targets to enter fullscreen without a keyboard (title + QR) —
   pointer shows even though the page hides the cursor elsewhere */
#standbyTitle, #standby img.qr { cursor: pointer; }
#standby .cfg-title { color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* Sizes driven by the back-office Font fields (game JSON config) */
#standbyTitle { font-size: var(--font-size); }
#standbySub { font-size: var(--secondary-font-size); letter-spacing: .2em; }

/* vMix live feed (config live_feed) taken to program as a raw fullscreen
   iframe — above the canvas and standby, below dual labels/prompt/HUD.
   Created on demand by setVmix() so the vMix call only connects on TAKE. */
#vmixFrame { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; z-index: 7; background: #000; }

/* Dual view labels (left raw | right AI) */
#dualLabels { display: none; }
body.dual #dualLabels { display: block; }
#dualLabels .lbl {
  position: fixed; bottom: 26px; z-index: 8;
  font-family: var(--secondary-font-family), ui-monospace, monospace;
  font-size: calc(var(--font-size)); letter-spacing: .22em; padding: 8px 16px; border-radius: 8px;
  background: rgba(10,12,18,.78); border: 1px solid var(--line); color: var(--text);
}
#dualLabels .lbl.left  { left: 26px; }
#dualLabels .lbl.right { right: 26px; border-color: var(--amber); color: var(--amber); }
body.fallback #dualLabels { display: none; }

/* On-screen AI prompt bar (the active Lucy prompt, styled as an AI input) */
#promptBar {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  z-index: 9; display: flex; align-items: center; gap: 12px;
  max-width: min(76vw, 980px);
  padding: 14px 22px; border-radius: 999px;
  background: rgba(13, 16, 23, .82);
  border: 1px solid rgba(255, 176, 46, .55);
  box-shadow: 0 8px 40px rgba(0,0,0,.55), inset 0 0 24px rgba(255,176,46,.05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
body.show-prompt #promptBar { opacity: 1; transform: translateX(-50%) translateY(0); }
#promptBar .spark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber); color: var(--cta-ink); font-size: calc(var(--font-size)); font-weight: 700;
}
#promptBar .txt {
  text-transform: uppercase;
  text-indent: 1rem; font-family: var(--font-family), ui-monospace, monospace; font-size: var(--font-size);
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#promptBar .caret {
  flex: 0 0 auto; width: 2px; height: 20px; background: var(--amber);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #promptBar .caret { animation: none; } }
body.dual #promptBar { bottom: 84px; } /* clear the DIRECT / AI LIVE labels */