:root {
  /* ─ Colors ─ */
  --color-bg:            #050508;
  --color-bg-rgb:        5, 5, 8;
  --color-surface:       #0c0c12;
  --color-surface-2:     #121219;
  --color-surface-3:     #18181f;
  --color-accent:        #FF1744;
  --color-accent-rgb:    255, 23, 68;
  --color-accent-2:      #FFB300;
  --color-accent-2-rgb:  255, 179, 0;
  --color-accent-3:      #00E5FF;
  --color-accent-3-rgb:  0, 229, 255;
  --color-accent-hover:  #E50030;
  --color-accent-active: #C4002A;
  --color-text:          #F0F0F5;
  --color-text-muted:    #7A7A95;
  --color-text-faint:    #3A3A55;
  --color-border:        rgba(255,255,255,0.07);
  --color-border-strong: rgba(255,255,255,0.14);
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-error:         #EF4444;
  --color-overlay:       rgba(0,0,0,0.82);

  /* ─ Typography ─ */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Syne', sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* ─ Type Scale ─ */
  --text-hero:    clamp(3.5rem,  10vw,  9rem);
  --text-h1:      clamp(2.4rem,  5vw,   4.8rem);
  --text-h2:      clamp(2rem,    4vw,   3.2rem);
  --text-h3:      clamp(1.4rem,  2.5vw, 2rem);
  --text-h4:      clamp(1.1rem,  1.8vw, 1.4rem);
  --text-body:    clamp(1rem,    1.5vw, 1.0625rem);
  --text-sm:      clamp(0.825rem,1.2vw, 0.9375rem);
  --text-xs:      clamp(0.7rem,  1vw,   0.8125rem);
  --text-mono:    clamp(0.75rem, 1vw,   0.875rem);
  --text-anchor:  clamp(4rem,    10vw,  9rem);
  --text-eyebrow: clamp(0.65rem, 0.9vw, 0.75rem);

  /* ─ Spacing ─ */
  --section-pad-y:  clamp(80px,  11vw, 140px);
  --section-pad-x:  clamp(20px,  6vw,  88px);
  --section-gap:    clamp(48px,  7vw,  96px);
  --card-pad:       clamp(24px,  3vw,  40px);
  --card-gap:       clamp(16px,  2vw,  24px);

  /* ─ Easing ─ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.77, 0, 0.18, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ─ Transitions ─ */
  --duration-fast:   0.15s;
  --duration-ui:     0.22s;
  --duration-reveal: 0.72s;
  --duration-slow:   1.1s;

  /* ─ Border Radius ─ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* ─ Z-Index Scale ─ */
  --z-base:     0;
  --z-content:  10;
  --z-raised:   20;
  --z-sticky:   100;
  --z-nav:      200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-intro:    700;

  /* ─ Image Aspect Ratios ─ */
  --ratio-hero:       16 / 9;
  --ratio-hero-tall:  4 / 3;
  --ratio-scene:      4 / 3;
  --ratio-scene-wide: 3 / 2;
  --ratio-square:     1 / 1;
  --ratio-story:      3 / 2;

  /* ─ Dashboard Tokens ─ */
  --dash-card-bg:      var(--color-surface);
  --dash-card-border:  var(--color-border);
  --dash-loading-color:var(--color-text-muted);
  --dash-success:      var(--color-success);
  --dash-error:        var(--color-error);

  /* ─ Shadow System ─ */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.24), 0 2px 6px rgba(0,0,0,0.16);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.20);
  --shadow-glow: 0 0 32px rgba(255,23,68,0.4);
}

/* ─ GLOBAL RESET ─ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip instead of hidden — prevents iOS Safari from breaking position:fixed overlays */
}

/* ─ IMAGES ─ */
img { display: block; max-width: 100%; height: auto; object-fit: cover; }
img.contain { object-fit: contain; }
.img-wrap { position: relative; width: 100%; overflow: hidden; }
.img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-hero   { aspect-ratio: var(--ratio-hero); }
.ratio-scene  { aspect-ratio: var(--ratio-scene); }
.ratio-wide   { aspect-ratio: var(--ratio-scene-wide); }
.ratio-square { aspect-ratio: var(--ratio-square); }
.ratio-story  { aspect-ratio: var(--ratio-story); }
.mascot-img { display: block; width: 100%; max-width: 420px; height: auto; object-fit: contain; object-position: center; }
.scene-img  { display: block; width: 100%; height: auto; object-fit: contain; }
.story-scene-img { display: block; width: 100%; height: auto; object-fit: cover; border: 5px solid var(--color-accent); border-radius: var(--radius-md); }

/* ─ SCROLLBAR ─ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

/* ─ REDUCED MOTION ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal        { opacity: 1 !important; transform: none !important; }
  .story-chapter { opacity: 1 !important; transform: none !important; }
  canvas         { display: none !important; }
}

/* ─ STORY BASE STATE (content always visible without JS) ─ */
.story-chapter,
.story-chapter .chapter-bg,
.story-chapter .chapter-content,
.story-chapter img,
.story-chapter h2,
.story-chapter p {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* ─ REVEAL ANIMATION ─ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.reveal.revealed { opacity: 1; transform: none; }

/* ─ SKELETON SHIMMER ─ */
.skel {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-text  { height: 1.1em; margin-bottom: 8px; }
.skel-value { height: 1.8em; margin-bottom: 0; }

/* ─ MOBILE RULES ─ */
@media (max-width: 480px) {
  :root {
    --section-pad-x: 18px;
    --section-pad-y: 64px;
  }
}

/* ─ MOBILE IMAGE SCALE ─ */
/* Story chapters: trim from 90vh to 65vh on tablet, 55vh on phone so text is always visible */
@media (max-width: 768px) {
  .story-chapter { min-height: 65vh; }
}
@media (max-width: 480px) {
  .story-chapter { min-height: 52vh; }

  /* Ensure standard image helpers don't blow out their containers */
  .mascot-img { max-width: 260px; }
  .scene-img  { max-width: 100%; height: auto; }

  /* HTB panels: switch to 4:3 ratio instead of 1:1 — less wasted vertical space */
  .htb-scene-wrap { aspect-ratio: 4 / 3 !important; }
}


#intro-screen[data-dismissed] {
  display: none !important;
}
/* Reduced-motion: skip the fade entirely, go straight to hidden */
@media (prefers-reduced-motion: reduce) {
  #intro-screen.dismissed {
    transition: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}