/* ==========================================================================
   LUMEN — shared board / jumbotron chrome
   Loaded by every lumen-*-board.html + lumen-jumbotron.html, before each
   page's own <style>. Every value themes from the per-game JSON through the
   custom properties set by lumen-theme.js.

   Sizing: the root font-size is 1vh, so every rem below tracks the screen
   height; lumen-theme.js rescales that root from the JSON font_size (in vh).
   Layout stays vh/vw. Page-specific rules (the game itself) stay inline.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
/* #0B0E16 is the LUMEN default backdrop — only used when a game's JSON leaves
   background_color empty. Pages needing a different fallback override inline. */
/* home_image ("Background") is the big-screen backdrop; mobile_image is the
   phone's — lumen-theme.js picks the right one per page type. */
html,body{height:100%;background-color:var(--brand-bg,#0B0E16);
          background-image:var(--brand-bg-image,none);background-size:cover;background-position:center;
          color:var(--brand-1,#EDEFF6);
          font-family:var(--brand-font,system-ui,sans-serif);overflow:hidden;font-size:1vh}

/* board title — centred across the screen */
h1{text-align:center;font-family:var(--font-family,inherit)}
h1 b{color:var(--brand-1,#FFB454)}

/* header_logo — top right during the board animation */
#animLogo{position:fixed;top:0;right:0;left:auto;z-index:10;margin:0!important;
          max-width:300px!important;max-height:300px!important;padding:50px;
          object-fit:contain;pointer-events:none}

/* connection / debug status, bottom-left on every board */
#st{position:fixed;left:16px;bottom:16px;font-family:monospace;
    font-size:var(--secondary-font-size,0.75rem);color:var(--brand-2,#8B93A7)}