/* =======================================================================
   OKÚNKÚN — CORE STYLESHEET (fluid, scalable, readable)
   -----------------------------------------------------------------------
   HOW TO TUNE (look for “EDIT THIS VALUE”):
     1) Global scale & timing:       :root → --mobile-scale, --tablet-scale, --bg-transition
     2) Hero vertical position:      --hero-shift-desktop, --hero-shift-mobile
     3) Logo ↔ text spacing:         --logo-gap-outside, --logo-gap-inside
     4) Tagline sizes:               --tag-size-outside, --tag-size-inside
     5) Button size:                 --btn-font-size, --btn-pad-y, --btn-pad-x
     6) Glow line width:             --line-width-desktop, --line-width-mobile
     7) Kerosene warning size:       --warning-size-desktop, --warning-size-mobile
     8) Base text scale:             --step-* (fluid type steps) + global element clamps
   ======================================================================= */


/* =========================================================================
   1) ROOT TOKENS (EDIT HERE)
   ========================================================================= */
:root{
  /* ---------- Typography families ---------- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-display: "Creepster", var(--font-sans);

  /* ---------- Global scalers ---------- */
  --mobile-scale: 0.78;   /* EDIT THIS VALUE: scales gaps/fonts on phones */
  --tablet-scale: 0.90;   /* EDIT THIS VALUE: scales gaps/fonts on tablets */

  /* ---------- Animation timing ---------- */
  --bg-transition: 160ms;

  /* ---------- Color tokens ---------- */
  --warm-1: 255,200,120;   /* light warm core */
  --warm-2: 255,150,60;    /* medium warm */
  --warm-3: 150,90,45;     /* dark warm */
  --blackness: 0.98;

  /* ---------- Edge padding ---------- */
  --safe-pad: 18px;

  /* ---------- HERO placement & spacing ---------- */
  --hero-shift-desktop: -3vh; /* EDIT THIS VALUE: raise/lower entire hero (desktop) */
  --hero-shift-mobile:  -3vh; /* EDIT THIS VALUE: raise/lower entire hero (mobile)  */

  /* Spacing between LOGO and tagline (outside/inside) */
  --logo-gap-outside: -90px;   /* EDIT THIS VALUE: logo-bottom gap before entering */
  --logo-gap-inside:  -60px;   /* EDIT THIS VALUE: logo-bottom gap after entering  */

  /* Tagline sizes (use steps below or direct rem) */
  --tag-size-outside: var(--step-2); /* EDIT THIS VALUE: before entering */
  --tag-size-inside:  var(--step-3); /* EDIT THIS VALUE: after entering  */

  /* Button size (desktop baseline) */
  --btn-font-size: 1.05rem;   /* EDIT THIS VALUE */
  --btn-pad-y:     14px;      /* EDIT THIS VALUE */
  --btn-pad-x:     28px;      /* EDIT THIS VALUE */

  /* Glow line width (below logo) */
  --line-width-desktop: 64%;  /* EDIT THIS VALUE */
  --line-width-mobile:  74%;  /* EDIT THIS VALUE */

  /* Kerosene warning size */
  --warning-size-desktop: 0.98rem; /* EDIT THIS VALUE */
  --warning-size-mobile:  0.88rem; /* EDIT THIS VALUE */
}

/* Fluid type base for whole document (keeps things consistent across displays) */
html{ font-size: clamp(14px, 0.85vw + 10px, 18px); }  /* global scaler */
body{ font-size: var(--step-0); }                     /* fluid step (see scale below) */


/* =========================================================================
   2) GLOBAL RESET / BASE + GLOBAL FLUID TYPOGRAPHY
   ========================================================================= */
*{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  padding:0;
  background:#000;
  color:#f4f1e6;
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

button{ font-family: inherit; }

/* ---------- Global fluid typography (applies everywhere) ---------- */
h1{ font-size: clamp(1.8rem, 2.6vw + 1rem, 3.2rem); line-height: 1.1; }
h2{ font-size: clamp(1.6rem, 2.2vw + 0.9rem, 2.6rem); line-height: 1.15; }
h3{ font-size: clamp(1.35rem, 1.8vw + 0.8rem, 2.0rem); line-height: 1.2; }
h4{ font-size: clamp(1.1rem, 1.2vw + 0.7rem, 1.4rem); line-height: 1.25; }
h5,h6{ font-size: clamp(1.0rem, 1.0vw + 0.6rem, 1.2rem); line-height: 1.25; }
p, li, span, small{ font-size: clamp(0.95rem, 1.0vw + 0.6rem, 1.15rem); line-height: 1.4; }
a{ font-size: clamp(0.95rem, 1.0vw + 0.6rem, 1.15rem); }
button, .btn, .enter-btn{ font-size: clamp(1.0rem, 1.2vw + 0.7rem, 1.25rem); }
.floating-msg{ font-size: clamp(0.95rem, 1.1vw + 0.55rem, 1.15rem); }


/* =========================================================================
   3) FONT-FACES (local files)
   ========================================================================= */
@font-face {
  font-family: "CaveatBrush";
  src: url("fonts/CaveatBrush-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CaesarDressing";
  src: url("fonts/CaesarDressing-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Font helpers (usable from JS) */
.font-caveat { font-family: "CaveatBrush", "Creepster", var(--font-sans); }
.font-caesar { font-family: "CaesarDressing", var(--font-sans); }


/* =========================================================================
   4) BACKGROUND IMAGE
   ========================================================================= */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform-origin:center center;
  transform:scale(1.02);
  transition:transform var(--bg-transition) ease-out;
  will-change:transform;
  -webkit-user-drag: none;
  user-select: none;
}


/* =========================================================================
   5) CANVAS LAYERS
   ========================================================================= */
#collectCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;   /* below overlay (2) but above image (0) */
  pointer-events: auto;
  cursor: default;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#overlay{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;    /* IMPORTANT — below .hero which is z-index:3 */
  pointer-events:none;
  display:block;
}


/* =========================================================================
   6) DARKNESS SPOTLIGHT (CSS fallback for warmth)
   ========================================================================= */
#darkness{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  --mx:50%;
  --my:50%;
  --spot-r:160px;
  --spot-int:0.072;
  --blackness:0.98;
  will-change:background, opacity;
}
#darkness::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(255,190,120, calc(var(--spot-int) * 0.85)) 0px,
      rgba(255,160,95,  calc(var(--spot-int) * 0.55)) calc(var(--spot-r) * 0.20),
      rgba(140,90,45,   calc(var(--spot-int) * 0.18)) calc(var(--spot-r) * 0.48),
      rgba(0,0,0,0)     calc(var(--spot-r) * 1.05)
    );
  background-repeat:no-repeat;
  background-blend-mode:normal;
  filter: blur(7px) contrast(1.01) saturate(1.03);
}
#darkness::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(255,165,90,  calc(var(--spot-int) * 0.55)) 0px,
      rgba(255,155,80,  calc(var(--spot-int) * 0.28)) calc(var(--spot-r) * 0.35),
      rgba(140,90,45,   0.06)                           calc(var(--spot-r) * 0.75),
      rgba(0,0,0,0)     calc(var(--spot-r) * 1.6)
    );
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  filter: blur(16px) saturate(1.02);
  opacity:0.9;
}


/* =========================================================================
   7) GHOST TEXT OVERLAY
   ========================================================================= */
.ghost-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10005;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}
.ghost-overlay .ghost{
  position: absolute;
  transform-origin: 50% 50%;
  color: var(--ghost-default-color, #dcd6c9);
  font-family: "CaveatBrush", cursive;
  /* Fallback size if JS doesn't override */
  font-size: clamp(0.95rem, 1.0vw + 0.55rem, 1.2rem);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity, filter;
  filter: blur(var(--start-blur, 8px));
  opacity: 0;
  padding: 2px 6px;
  letter-spacing: 0.4px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .ghost-overlay .ghost{ animation: none !important; transition: opacity 200ms ease; }
}
@keyframes ghost-in{
  from{ opacity:0; filter:blur(var(--start-blur,10px)); transform:translate(-50%,-50%) scale(var(--min-scale,0.95)); }
  60%{ opacity:calc(var(--max-opacity,.8)*.9); filter:blur(calc(var(--min-blur,0px)+.2px)); transform:translate(-50%,-50%) scale(calc(var(--scale,1)*1.06)); }
  to{ opacity:var(--max-opacity,.8); filter:blur(var(--min-blur,0px)); transform:translate(-50%,-50%) scale(var(--scale,1)); }
}
@keyframes ghost-vibe{
  0%{   transform: translate(calc(-50% + var(--vibe-x, 0px)), calc(-50% + var(--vibe-y, 0px))) scale(calc(var(--scale,1) * 0.998)); opacity: calc(var(--max-opacity,0.8) * 0.96); }
  25%{  transform: translate(calc(-50% - var(--vibe-x, 0px)), calc(-50% + var(--vibe-y, 0px))) scale(calc(var(--scale,1) * 1.007)); }
  50%{  transform: translate(calc(-50% + var(--vibe-x, 0px)), calc(-50% - var(--vibe-y, 0px))) scale(calc(var(--scale,1) * 0.999)); }
  75%{  transform: translate(calc(-50% - var(--vibe-x, 0px)), calc(-50% - var(--vibe-y, 0px))) scale(calc(var(--scale,1) * 1.01)); }
  100%{ transform: translate(calc(-50% + var(--vibe-x, 0px)), calc(-50% + var(--vibe-y, 0px)))  scale(calc(var(--scale,1) * 0.998)); opacity: calc(var(--max-opacity,0.8) * 0.95); }
}
@keyframes ghost-out{
  from{ opacity: var(--max-opacity, 0.85); filter: blur(var(--min-blur, 0px)); transform: translate(-50%, -50%) scale(var(--scale,1)); }
  to{   opacity: 0; filter: blur(var(--end-blur, 10px)); transform: translate(-50%, -50%) scale(calc(var(--min-scale,0.95) * 0.98)); }
}


/* =========================================================================
   8) HERO (logo, line, tagline, button)
   ========================================================================= */
.hero{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:18px;
  padding:24px;
  z-index:99998;
  pointer-events:auto;
  transform: translateY(var(--hero-shift-desktop));
  transition: transform 450ms cubic-bezier(.2,.9,.2,1);
}

/* Independent logo spacing control */
.logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom: var(--logo-gap-outside); /* default before entering */
}
body.inside .logo-wrap{
  margin-bottom: var(--logo-gap-inside);
}

/* Center logo sizing + enter zoom */
.center-logo{
  width:min(420px, 48vw);
  max-width:520px;
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.8));
  transform-origin:center;
  transition:transform 1.5s cubic-bezier(.2,.9,.2,1);
  z-index:99999;
  position:relative;
}
.center-logo.zoom-enter{ transform: scale(1.45); }

/* Glow line (sits under logo, above text) */
.glow-line{
  display:block; /* ensure visible on mobile */
  width: 0;
  height: clamp(2px, 0.35vw, 4px);
  background: radial-gradient(closest-side, rgba(255,200,110,.9), rgba(255,140,40,.35), transparent 70%);
  filter: drop-shadow(0 0 12px rgba(255,140,40,.35));
  margin: 8px 0 4px 0;
  opacity: 0;
  transform-origin: center center;
}
.glow-line.animate{
  opacity: 1;
  animation: line-grow 900ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes line-grow{
  0%   { width: 0; box-shadow: 0 0 0 rgba(255,160,60,0.0); }
  50%  { width: calc(var(--line-width-desktop) * 0.5); }
  100% { width: var(--line-width-desktop); box-shadow: 0 0 28px rgba(255,160,60,0.18); }
}

/* Tagline */
.hero .tag{
  margin:0;
  max-width:720px;
  color:rgba(244,241,230,0.98);
  font-weight:400;
  text-shadow:0 6px 18px rgba(0,0,0,0.7);
  z-index:99999;
  font-family: "CaveatBrush", "Creepster", var(--font-sans);
  font-size: var(--tag-size-outside);
  line-height: 1.25;
}
body.inside .hero .tag{ font-size: var(--tag-size-inside); }

/* Button */
.enter-btn{
  z-index:99999;
  appearance:none;
  border:0;
  cursor:pointer;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight:700;
  letter-spacing:0.02em;
  font-size: var(--btn-font-size); /* also controlled by global clamp above */
  color:#fff;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,200,110,1), rgba(204,102,0,1));
  box-shadow: 0 10px 30px rgba(204,102,0,0.18), 0 2px 6px rgba(0,0,0,0.6), inset 0 -2px 6px rgba(0,0,0,0.12);
  transform:translateZ(0);
  transition: background 300ms ease, color 180ms ease, transform 180ms ease, box-shadow 300ms ease;
  pointer-events:auto;
}
.enter-btn:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 16px 48px rgba(255,140,20,0.22) }
.enter-btn.enter-default{ background: linear-gradient(180deg, rgba(255,200,110,1), rgba(204,102,0,1)); }
.enter-btn.enter-arming{  background: linear-gradient(180deg, #3a3a3a, #151515); box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 -2px 6px rgba(0,0,0,0.18); }
.enter-btn.enter-exit{    background: linear-gradient(180deg, #0b0b0b, #000); box-shadow: 0 14px 48px rgba(0,0,0,0.75), inset 0 -3px 8px rgba(0,0,0,0.24); }
.enter-btn.enter-ready{   transform: translateY(-2px); }

/* Progress overlay inside button (JS controlled) */
.enter-progress{
  position:absolute; inset:0; pointer-events:none;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 4100ms linear;
  background: linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0.98));
  border-radius: 12px;
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0.95;
}
.enter-btn > *{ position: relative; z-index: 3; } /* keep text above progress */


/* =========================================================================
   9) LANTERN TIMER / INFO PANEL / AUDIO TOGGLE
   ========================================================================= */
#gaugeInner{ padding: 8px; }

.info-panel{
  position:fixed;
  left:4vw;
  bottom:4vh;
  z-index:100000;
  isolation:isolate;
  pointer-events:auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border:1px solid rgba(255,200,110,0.06);
  color: #f7ecd9;
  padding:12px 14px;
  border-radius:12px;
  min-width:220px;
  max-width:420px;
  box-shadow:0 10px 40px rgba(0,0,0,0.7), 0 4px 12px rgba(255,140,20,0.04);
  backdrop-filter: blur(8px) saturate(0.9);
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s ease;
  transform: translateY(0) scale(1);
  font-weight:600;
  line-height:1.25;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1vw + 0.6rem, 1.15rem); /* fluid panel text */
}
.info-panel h4{
  margin:0 0 6px 0;
  font-family:var(--font-display);
  font-size: clamp(1.05rem, 1.2vw + 0.7rem, 1.35rem);
  letter-spacing:0.02em;
  color:#fff;
}

.audio-toggle{
  position:fixed;
  right:var(--safe-pad);
  top:var(--safe-pad);
  z-index:100001;
  width:48px; height:48px;
  border-radius:10px; border:0;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  pointer-events:auto;
}
.audio-toggle.muted::after{
  content:''; position:absolute; left:6px; right:6px; top:22px; height:3px;
  background: linear-gradient(90deg, rgba(255,0,0,0.95), rgba(160,0,0,0.9));
  transform: rotate(-18deg);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,0,0,0.12);
}


/* =========================================================================
   10) FLOATING MESSAGES (fuel warnings, hints)
   ========================================================================= */
.floating-msg{
  position:fixed; left:50%;
  transform:translateX(-50%) translateY(14vh) scale(0.98);
  padding:10px 16px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.32));
  color:#fff; font-weight:700; letter-spacing:0.02em;
  z-index:10000; opacity:0; pointer-events:none;
  transition:opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
  box-shadow:0 10px 40px rgba(0,0,0,0.7);
}
.msg-warning{ background: linear-gradient(180deg, rgba(40,10,0,0.75), rgba(0,0,0,0.55)); color:#ffecda; }
.msg-a{       background: linear-gradient(180deg, rgba(20,30,40,0.7), rgba(0,0,0,0.45)); color:#fff2df; }
.msg-b{       background: linear-gradient(180deg, rgba(14,18,24,0.75), rgba(0,0,0,0.45)); color:#eaeef2; }
.floating-msg.visible{ opacity:1; transform:translateX(-50%) translateY(8vh) scale(1); }


/* =========================================================================
   11) ACCESSIBILITY FOCUS
   ========================================================================= */
.enter-btn:focus{
  outline:3px solid rgba(255,170,60,0.25);
  outline-offset:3px;
  box-shadow:0 0 30px rgba(255,140,40,0.12);
}
.audio-toggle:focus{
  outline:2px solid rgba(255,170,60,0.18);
  outline-offset:2px;
}


/* =========================================================================
   12) PERFORMANCE / DEBUG
   ========================================================================= */
.reduced-motion *{ transition:none !important; animation:none !important; filter:none !important; }


/* =========================================================================
   13) EXIT MODAL (JS-created) — typefaces + fluid sizes
   ========================================================================= */
.okunkun-modal{ font-family: var(--font-sans); color: #efe8de; }
#exitModal a:hover{
  transform: translateY(-3px);
  transition: transform 220ms ease, box-shadow 220ms ease;
  box-shadow: 0 22px 60px rgba(0,0,0,0.6);
}
/* Caesar for title, Caveat for body */
#exitModalWrap .okunkun-modal h3{
  font-family: "CaesarDressing", var(--font-sans) !important;
  letter-spacing: .5px;
  font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.8rem);
}
/* Replace this block */
#exitModalWrap .okunkun-modal,
#exitModalWrap .okunkun-modal p,
#exitModalWrap .okunkun-modal a,
#exitModalWrap .okunkun-modal div{
  font-family: var(--font-sans) !important; /* Montserrat */
  font-size: clamp(0.95rem, 1.0vw + 0.6rem, 1.15rem);
}


/* =========================================================================
   14) WARNING BANNER (kerosene empty)
   ========================================================================= */
#warning{
  font-family: "CaesarDressing", var(--font-sans) !important;
  white-space: nowrap;
  max-width: 92vw;
  font-size: var(--warning-size-desktop);
  transition: opacity 220ms ease;
}


/* =========================================================================
   15) FLUID TYPE SCALE (used by --tag-size-* and body size)
   ========================================================================= */
:root{
  --step--1: clamp(0.80rem, 0.75rem + 0.2vw, 0.95rem);
  --step-0:  clamp(0.95rem, 0.88rem + 0.4vw, 1.05rem);
  --step-1:  clamp(1.05rem, 0.98rem + 0.6vw, 1.20rem);
  --step-2:  clamp(1.20rem, 1.10rem + 1.0vw, 1.45rem);
  --step-3:  clamp(1.40rem, 1.26rem + 1.4vw, 1.80rem);
  --step-4:  clamp(1.70rem, 1.45rem + 2.0vw, 2.25rem);
  --step-5:  clamp(2.10rem, 1.70rem + 3.0vw, 3.00rem);
}


/* =========================================================================
   16) RESPONSIVE TUNING (TABLET / MOBILE) — auto scales from desktop tokens
   ========================================================================= */

/* ---------- Tablet (≤ 900px) ---------- */
@media (max-width: 900px){
  /* hero vertical placement */
  .hero{ transform: translateY(calc(var(--hero-shift-desktop) * var(--tablet-scale))); }

  /* logo size */
  .center-logo{ width:min(360px, 58vw); }

  /* logo ↔ text gap scales down */
  .logo-wrap{ margin-bottom: calc(var(--logo-gap-outside) * var(--tablet-scale)); }
  body.inside .logo-wrap{ margin-bottom: calc(var(--logo-gap-inside) * var(--tablet-scale)); }

  /* button scales */
  .enter-btn{
    font-size: calc(var(--btn-font-size) * var(--tablet-scale));
    padding: calc(var(--btn-pad-y) * var(--tablet-scale)) calc(var(--btn-pad-x) * var(--tablet-scale));
  }

  /* info panel */
  .info-panel{ left:3.5vw; bottom:3.5vh; min-width:190px; }

  /* glow line keeps good width */
  .glow-line.animate{ width: calc(var(--line-width-desktop) * 0.85); }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px){
  /* hero vertical placement */
  .hero{ transform: translateY(var(--hero-shift-mobile)); }

  /* logo gap scales more */
  .logo-wrap{ margin-bottom: calc(var(--logo-gap-outside) * var(--mobile-scale)); }
  body.inside .logo-wrap{ margin-bottom: calc(var(--logo-gap-inside) * var(--mobile-scale)); }

  /* tagline sizes — slightly reduce vs desktop token */
  .hero .tag{ font-size: clamp(0.95rem, 3.2vw, 1.15rem); }
  body.inside .hero .tag{ font-size: clamp(1.05rem, 3.6vw, 1.30rem); }

  /* button scales */
  .enter-btn{
    font-size: calc(var(--btn-font-size) * var(--mobile-scale));
    padding: calc(var(--btn-pad-y) * var(--mobile-scale)) calc(var(--btn-pad-x) * var(--mobile-scale));
  }

  /* glow line target width for phones */
  .glow-line.animate{ width: var(--line-width-mobile); }

  /* gauge placement fallback (JS positions it too) */
  .lantern-timer{ left:14px; bottom:14px; }

  /* info panel font */
  .info-panel{ left:3vw; bottom:3vh; font-size: clamp(0.9rem, 3.3vw, 1.05rem); }
}

/* ---------- Small phones (≤ 480px) ---------- */
@media (max-width: 480px){
  .floating-msg { left:50%; transform:translateX(-50%) translateY(20vh); width:88%; padding:12px; }
  .center-logo.zoom-enter { transform: scale(1.2); }

  /* warning banner size */
  #warning{ font-size: var(--warning-size-mobile) !important; }
}


/* =========================================================================
   17) MISC SMALL POLISH
   ========================================================================= */
@media (max-width:720px){
  .enter-progress { border-radius: 10px; }
}

/* Keep glow line visible on mobile (override any old rules) */
.glow-line{ display:block; }



/* Boot cover to prevent first-frame flash */
#bootCover{
  position: fixed; inset: 0;
  background: #000;
  z-index: 2147483646; /* below your exit modal wrapper at 999999 if it ever appears */
  opacity: 1; transition: opacity .28s ease;
  pointer-events: none;
}