/* ==========================================================================
   Fan Cam AI — fan mobile page (/aicam.html)
   Extracted from the page's former inline <style> block.
   Edit this file AND regenerate css/aicam.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 JSON config, same as fxcam.html) — the current
   dark design is the fallback when no game config exists. */
body {
  line-height:1;
  --ink: var(--background-color, #0d1017);
  --panel: var(--background-third-color, #151a24);
  --panel-2: var(--background-secondary-color, #1c2230);
  --line: #2a3245;
  --text: var(--primary-color, #e8e9ec);
  --dim: var(--fifth-color, #8b93a5);
  --amber: var(--secondary-color, #ffb02e);
  --cta-ink: var(--primary-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). Every rule below derives from these two
     sizes, so the whole page follows the config. */
  --font-size: 1rem;
  --secondary-font-size: .75rem;
  --font-family: 'Archivo';
  --secondary-font-family: 'IBM Plex Mono';
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

/* min-height (not height): lets the body grow so ext-slider.css's
   body:has(.ext-slider) padding-bottom actually clears the fixed
   slider instead of content overflowing underneath it (fxcam does
   the same via main.css min-height:100vh). */
html { height:100%; }
body { min-height:100vh; }
body {
  color:var(--text);
  /* Background image exactly like fxcam.html (css/main.css body rule) */
  background-image:
    linear-gradient(rgba(0,0,0,var(--bg-darken,0)),rgba(0,0,0,var(--bg-darken,0))),
    var(--background-image, none);
  background-color:var(--secondary-color);
  background-size:cover; background-position:top; background-repeat:no-repeat; background-attachment:fixed;
  font-family:var(--font-family),system-ui,sans-serif;
  display:flex; flex-direction:column; padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}

#headerLogo { display:none; max-height:30vh; max-width:80vw; margin:0 auto 10px; }
.brand { text-align:center; font-variation-settings:'wdth' 118,'wght' 780; text-transform:uppercase; letter-spacing:.04em; font-size:var(--font-size); margin-bottom:12px; }
.brand small { display:block; font-variation-settings:'wdth' 100,'wght' 500; color:var(--dim); font-size:calc(var(--secondary-font-size)); letter-spacing:.22em; margin-top:2px; }

.cam {
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#000; flex:0 0 auto;
}
.cam video { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transform:scaleX(-1); }
.cam.live { border-color:var(--tally); box-shadow:0 0 0 2px var(--tally), 0 0 30px rgba(255,46,63,.35); }
.cam .badge {
  position:absolute; top:12px; left:12px; font-family:var(--secondary-font-family),monospace;
  font-size:calc(var(--secondary-font-size)); letter-spacing:.16em; padding:5px 10px; border-radius:6px;
  background:rgba(13,16,23,.8); border:1px solid var(--line); color:var(--dim);
}
.cam.live .badge { border-color:var(--tally); color:var(--tally); animation:blink 1.1s infinite; }
@keyframes blink { 50% { opacity:.4; } }

.stage { margin-top:14px; }
h1{ font-family: var(--secondary-font-family) !important; line-height:1; font-variation-settings:'wght' 750; font-size:calc(var(--secondary-font-size)); }
p.sub { display:none; color:var(--dim); font-size:calc(var(--secondary-font-size)/2); margin-top:6px; }

input[type=text] {
  width:100%; margin-top:14px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; color:var(--text); padding:14px; font-size:var(--secondary-font-size); font-family:inherit;
}
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:calc(var(--secondary-font-size)/2); color:var(--dim); font-family: var(--secondary-font-family) !important; }
.consent input { width:20px; height:20px; margin-top:1px; accent-color:var(--amber); }

/* privacy notice (details/summary under the consent checkbox) */
.privacy { margin-top:10px; display:none; }
.privacy summary { font-size:calc(var(--secondary-font-size)/2); color:var(--dim); cursor:pointer; }
.privacy p { font-size:calc(var(--secondary-font-size)/2); color:var(--dim); margin-top:6px; }
.privacy a { color:var(--amber); }

button.cta {
  line-height: 1;
  width:100%; margin-top:14px; padding:16px; border-radius:12px; border:none;
  background:var(--amber); color:var(--cta-ink,#16130a); font-family:inherit;
  font-variation-settings:'wght' 780; font-size:calc(var(--secondary-font-size)); cursor:pointer;
}
button.cta:disabled { opacity:.45; }
button.leave {
  line-height: 1;
  width:100%; margin-top:10px; padding:12px; border-radius:12px;
  background:none; border:1px solid var(--line); color:var(--dim);
  font-family:inherit; font-size:calc(var(--secondary-font-size)/2); cursor:pointer;
}

/* state screens */
.state { display:none; }
.state.active { display:block; }
.queue-card, .live-card {
  margin-top:14px; text-align:center; padding:22px 16px; border-radius:16px;
  border:1px solid var(--line); background:var(--panel);
}
.queue-card .sub { margin-top:10px; }
.live-card { border-color:var(--tally); background:linear-gradient(180deg, rgba(255,46,63,.12), var(--panel)); }
.big { font-variation-settings:'wght' 800; font-size:calc(var(--secondary-font-size)); font-family: var(--secondary-font-family) !important; }
.live-card .big { color:var(--tally); }
.mono { font-family:var(--secondary-font-family),monospace; font-size:calc(var(--secondary-font-size)/2); letter-spacing:.14em; color:var(--dim); margin-top:8px; }
.pulse-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--ok); margin-right:8px; animation:blink 1.4s infinite; }

/* video-ready state */
.queue-card.ready { border-color:var(--ok); }
.queue-card.ready .big { color:var(--ok); }
#myVideo { width:100%; border-radius:12px; margin-top:14px; background:#000; }
#shareBtn { margin-top:12px; }
.text-link { display:block; color:var(--dim); font-size:calc(var(--secondary-font-size)/2); text-decoration:underline; }
#downloadLink { margin-top:10px; }
#forgetLink { margin-top:8px; }