/* ==========================================================================
   LUMEN — shared fan (mobile) chrome
   Loaded by every lumen-*.html fan page, before each page's own <style>.
   Every value themes from the per-game JSON through the custom properties set
   by lumen-theme.js; the rem/hex fallbacks only apply when a field is unset.
   Page-specific rules (the show/game stage) stay inline in each page.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;line-height:1}
html,body{height:100%;background:var(--brand-bg,#0B0E16);color:var(--brand-1,#fff);
          font-family:var(--brand-font,system-ui,sans-serif);
          overflow:hidden;user-select:none;-webkit-user-select:none}

/* --- join / form screen (the only scrollable surface) --------------------- */
#join,.screen{position:fixed;inset:0;background:var(--brand-bg,#0B0E16);
              background-image:var(--brand-bg-image,none);background-size:cover;background-position:center;
              display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
              justify-content:flex-start;padding:28px 28px 120px;gap:16px;z-index:10;text-align:center;
              font-family:var(--brand-font,system-ui,sans-serif)}

h1{text-align:center;text-transform:uppercase;
   font-size:var(--font-size,1.375rem);font-family:var(--font-family,inherit)}
h1 b{color:var(--brand-1,#FFB454)}
/* body copy is the one place the line-height:1 reset must not win — these are
   the only multi-line paragraphs on the fan pages */
p{color:var(--brand-2,#8B93A7);
  font-size:var(--secondary-font-size,0.875rem);font-family:var(--secondary-font-family,inherit)}
label{color:var(--brand-2,#8B93A7);font-size:var(--secondary-font-size,0.875rem)}

/* --- form controls -------------------------------------------------------- */
#join input[type=text],#join input[type=tel],#join input[type=email],#join input:not([type]){
  padding:13px;font-size:var(--secondary-font-size,1rem);background:var(--brand-bg-2,#121623);
  border:1px solid var(--brand-bg-3,#232A3D);border-radius:8px;color:var(--brand-1,#fff);width:100%}
input[type=range]{width:100%}

/* section picker */
.secs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.secs button{padding:13px 0;font-family:var(--font-family,inherit);font-size:var(--secondary-font-size,1rem);
             background:var(--brand-bg-2,#121623);border:1px solid var(--brand-bg-3,#232A3D);
             border-radius:8px;color:var(--brand-1,#fff)}
.secs button.on{background:var(--brand-1,#FFB454);color:var(--brand-bg,#1A1204);
                border-color:var(--brand-1,#FFB454);font-weight:700}

/* primary call to action */
#go,button.cta{padding:16px;font-size:var(--secondary-font-size,1.125rem);font-weight:700;
               background:var(--brand-1,#FFB454);color:var(--brand-bg,#1A1204);border:0;border-radius:10px;
               font-family:var(--secondary-font-family,inherit)}
#go:disabled,button.cta:disabled{opacity:.4}

/* --- branding ------------------------------------------------------------- */
/* form_logo — the "Logo mobile", above the title on the join screen */
/* header_logo — on top during the show/animation (same box as the other
   modules' #header_logo, see main.css) */
#animLogo{position:fixed;top:0;left:0;right:0;z-index:6;text-align:center;margin:0 auto!important;
          max-width:300px!important;max-height:300px!important;padding:50px;
          object-fit:contain;pointer-events:none}

/* --- status / waiting room ------------------------------------------------ */
#small{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:100%;text-align:center;
       font-size:var(--secondary-font-size,0.75rem);font-family:var(--secondary-font-family,inherit);
       color:var(--brand-2,#8B93A7)}
#status{font-family:var(--secondary-font-family,inherit);font-size:var(--secondary-font-size,0.875rem);
        color:var(--brand-2,#8B93A7)}
#gate{font-size:var(--secondary-font-size,0.75rem);color:var(--brand-2,#8B93A7)}

/* Between JOIN and the first cue the stage is black — this keeps the fan
   informed instead of handing them a dead screen. */
#wait{position:fixed;inset:0;display:none;flex-direction:column;justify-content:center;align-items:center;
      gap:16px;text-align:center;padding:30px;z-index:3;pointer-events:none;background:var(--brand-bg,#0B0E16)}
#waitTitle{font-size:var(--font-size,1.375rem);font-family:var(--font-family,inherit);font-weight:800;
           color:var(--brand-1,#FFB454);text-transform:uppercase}
#waitMsg{font-size:var(--secondary-font-size,0.875rem);font-family:var(--secondary-font-family,inherit);
         color:var(--brand-2,#8B93A7)}
#waitDots{display:flex;gap:8px}
#waitDots i{width:8px;height:8px;border-radius:50%;background:var(--brand-1,#FFB454);opacity:.25;
            animation:waitPulse 1.2s infinite}
#waitDots i:nth-child(2){animation-delay:.2s}
#waitDots i:nth-child(3){animation-delay:.4s}
@keyframes waitPulse{0%,100%{opacity:.25}50%{opacity:1}}

/* --- desktop preview ------------------------------------------------------ */
/* mobile-frame: make body the containing block so the position:fixed show
   overlays are constrained inside the phone frame on desktop preview */
@media(min-width:769px){body.mobile-frame{transform:translateZ(0)}}