/* ================================================================
   HIDDEN ROOM — Global Stylesheet
   hiddenroom.mx | Una Marca de Grupo Mysauth
   ================================================================
   TABLE OF CONTENTS
   -----------------
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Grain Overlay
   4.  Custom Cursor
   5.  Navigation
   6.  Button System
   7.  Section Shared / Labels
   8.  Reveal Animation
   9.  Hero Section
   10. Marquee Strip
   11. Pillars / Gallery
   12. Events
   13. Studio
   14. Demonz
   15. Manifesto
   16. Footer
   17. Keyframe Animations
   18. Responsive Overrides
   ──────────────────────────────────────────────────────────────
   MINIGAME EXTENSIONS (additive, page-scoped)
   19. Page Shell (cursor reset, wrapper)
   20. Canvas & Scanlines
   21. HUD
   22. Overlay Screens
   23. Minigame Button (.btn)
   24. Coupon Toast
   25. Tap Hint
   26. Minigame Responsive
================================================================ */


/* ================================================================
   1. CSS CUSTOM PROPERTIES — DESIGN TOKENS
================================================================ */
:root {

  /* — Color Palette — */

  /*
   * PRIMARY ACCENT — Red
   * Current dominant brand color. Used everywhere.
   */
  --red:          #db0100;
  --red-hover:    #ff0200;
  --red-dim:      rgba(219,   1,   0, 0.3);
  --red-ghost:    rgba(219,   1,   0, 0.04);

  /*
   * BRAND PALETTE — registered tokens, not yet applied to UI.
   * Use var(--magenta), var(--teal), var(--green), var(--maroon)
   * when assigning roles in future sections or themed pages.
   *
   *  --magenta  →  high-energy neon; candidate for Dem00nz / drop events
   *  --teal     →  cool contrast; candidate for Media / Live Sessions
   *  --green    →  fresh accent; candidate for Car Culture / success states
   *  --maroon   →  muted warm; candidate for backgrounds, borders, overlays
   */
  --magenta:        #db00db;
  --magenta-hover:  #ff00ff;
  --magenta-dim:    rgba(219,   0, 219, 0.3);
  --magenta-ghost:  rgba(219,   0, 219, 0.04);

  --teal:           #00dbba;
  --teal-hover:     #00ffda;
  --teal-dim:       rgba(  0, 219, 186, 0.3);
  --teal-ghost:     rgba(  0, 219, 186, 0.04);

  --green:          #00db3e;
  --green-hover:    #00ff48;
  --green-dim:      rgba(  0, 219,  62, 0.3);
  --green-ghost:    rgba(  0, 219,  62, 0.04);

  --maroon:         #862d2d;
  --maroon-hover:   #a03535;
  --maroon-dim:     rgba(134,  45,  45, 0.3);
  --maroon-ghost:   rgba(134,  45,  45, 0.04);

  --black:        #060606;
  --near-black:   #0e0e0e;
  --surface:      #111111;

  --white:        #f0ece4;
  --white-dim:    rgba(240, 236, 228, 0.5);
  --white-faint:  rgba(240, 236, 228, 0.2);
  --white-ghost:  rgba(240, 236, 228, 0.08);
  --white-trace:  rgba(240, 236, 228, 0.06);
  --white-mark:   rgba(240, 236, 228, 0.15);

  /* Minigame accent (scoped to minigame pages only) */
  --coupon:       #c8ff00;
  --muted:        rgba(240, 236, 228, 0.25);

  /* — Typography — */
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Unbounded', sans-serif;

  --text-xs:      9px;
  --text-sm:      10px;
  --text-base:    11px;
  --text-md:      13px;
  --text-body:    14px;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0.1em;
  --tracking-wide:     0.2em;
  --tracking-wider:    0.25em;
  --tracking-widest:   0.35em;

  /* — Spacing — */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-2xl:   48px;
  --space-3xl:   64px;
  --space-4xl:   80px;
  --space-5xl:   120px;

  --padding-page:    48px;   /* standard horizontal page padding */
  --padding-section: 120px;  /* standard vertical section padding */

  /* — Transitions — */
  --ease-standard: cubic-bezier(.25, .46, .45, .94);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.8s;

  --transition-color:     color var(--duration-fast) ease,
                          background var(--duration-fast) ease,
                          border-color var(--duration-fast) ease;
  --transition-opacity:   opacity var(--duration-fast) ease;
  --transition-reveal:    opacity var(--duration-slow) var(--ease-standard),
                          transform var(--duration-slow) var(--ease-standard);
  --transition-gallery:   transform 0.6s var(--ease-standard);

  /* — Z-Index Scale — */
  --z-base:       0;
  --z-above:      1;
  --z-nav:        100;
  --z-overlay:    30;
  --z-hud:        20;
  --z-scanlines:  10;
  --z-toast:      40;
  --z-grain:      9000;
  --z-cursor-ring:9998;
  --z-cursor-dot: 9999;

  /* — Borders — */
  --border-subtle:  1px solid var(--white-trace);
  --border-faint:   1px solid var(--white-ghost);
  --border-dim:     1px solid var(--white-faint);
  --border-red:     1px solid var(--red-dim);
  --border-accent:  2px solid var(--red);
}


/* ================================================================
   2. RESET & BASE
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

/* Prevent images from overflowing their containers on any host/CDN */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  overflow-x: hidden;
  cursor: none;
}

html.home-page-root,
body.home-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.home-page {
  position: relative;
}


/* ================================================================
   3. GRAIN OVERLAY
================================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px;
  animation: grain 0.4s steps(1) infinite;
}


/* ================================================================
   4. CUSTOM CURSOR
================================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor-dot);
  transition: transform 0.15s ease, opacity var(--duration-fast);
  mix-blend-mode: difference;
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(219, 1, 0, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor-ring);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast);
}

/* Pages without custom cursor JS get the default pointer back */
body:not(:has(.cursor)) { cursor: default; }


/* ================================================================
   5. NAVIGATION
================================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--padding-page);
}

nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0.9), transparent);
  pointer-events: none;
  z-index: -1;
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white-dim);
  text-decoration: none;
  transition: var(--transition-color);
}
.nav-links a:hover { color: var(--red); }

.nav-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.nav-cta {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border: none;
  padding: 10px 22px;
  cursor: none;
  text-decoration: none;
  transition: background var(--duration-fast);
}
.nav-cta:hover { background: var(--red-hover); }

/* ================================================================
   6. BUTTON SYSTEM
   Base shared properties, then per-variant overrides.
================================================================ */

/* — Shared button foundation — */
.btn-primary,
.btn-outline {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--md, 16px) 36px;
  cursor: none;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition-color);
  position: relative;
  overflow: hidden;
}

/* — Primary: solid red — */
.btn-primary {
  color: var(--white);
  background: var(--red);
  border: none;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: var(--transition-opacity);
}
.btn-primary:hover::after { opacity: 1; }

/* — Outline: ghost with dim border — */
.btn-outline {
  color: var(--white-dim);
  background: transparent;
  border: var(--border-dim);
}
.btn-outline:hover {
  color: var(--magenta);
  border-color: var(--magenta-dim);
  background: var(--magenta-ghost);
}


/* ================================================================
   7. SECTION SHARED / LABELS
================================================================ */
section { position: relative; }

/* Red eyebrow label with leading rule line */
.section-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide + 0.1em); /* 0.3em */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-2xl);
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--red);
}

/* Muted number/text inside a label — magenta touch */
.section-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--white-dim);
  letter-spacing: 0.1em;
}


/* ================================================================
   8. REVEAL ANIMATION
================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-reveal);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   9. HERO SECTION
================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--padding-page) var(--space-4xl);
  overflow: hidden;
}

/* Background layers */
.hero-bg { position: absolute; inset: 0; z-index: var(--z-base); }

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(100, 0, 0, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 60%, rgba(219, 1, 0, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, #0e0808 0%, #060606 40%, #0a0000 100%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
}

.hero-accent {
  position: absolute;
  right: 18%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--red) 30%, var(--red) 70%, transparent 100%);
  opacity: 0.2;
}

/* Ghost display number */
.hero-number {
  position: absolute;
  top: 50%; right: var(--padding-page);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(120px, 18vw, 280px);
  font-weight: 900;
  color: var(--red-ghost);
  line-height: 1;
  letter-spacing: -0.05em;
  user-select: none;
  z-index: var(--z-base);
}

/* Eyebrow label */
.hero-eyebrow {
  position: relative;
  z-index: var(--z-above);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--md, 16px);
  gap: 16px;
  animation: fadeUp 0.8s 0.2s both;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--red);
}

/* Main title */
.hero-title {
  position: relative;
  z-index: var(--z-above);
  font-family: var(--font-display);
  font-size: clamp(72px, 13vw, 210px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-xl);
  animation: fadeUp 0.8s 0.4s both;
}
.hero-title span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 236, 228, 0.25);
}

/* Subtitle row */
.hero-subtitle {
  position: relative;
  z-index: var(--z-above);
  font-size: 13px;
  letter-spacing: var(--tracking-wider);
  color: var(--white-dim);
  text-transform: uppercase;
  margin-bottom: var(--space-2xl);
  animation: fadeUp 0.8s 0.6s both;
}
.hero-subtitle strong { color: var(--red); font-weight: 400; }

/* Bottom row: CTAs + coords */
.hero-bottom {
  position: relative;
  z-index: var(--z-above);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  animation: fadeUp 0.8s 0.8s both;
}

.hero-cta { display: flex; gap: var(--space-md); flex-wrap: wrap; }

.hero-coords {
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  color: rgba(240, 236, 228, 0.2);
  text-align: right;
  line-height: 1.8;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-4xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--red), var(--white-dim));
  animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-text {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--white-faint);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  margin-top: var(--space-sm);
}


/* ================================================================
   10. MARQUEE STRIP
================================================================ */
.marquee-strip {
  background: var(--red);
  overflow: hidden;
  padding: 12px 0;
  position: relative;
  z-index: 2;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.marquee-item::after { content: '✦'; font-size: 8px; color: rgba(255, 255, 255, 0.5); }
.marquee-item:nth-child(even)::after { color: var(--magenta); }


/* ================================================================
   11. PILLARS / GALLERY
================================================================ */
.pillars {
  padding: var(--padding-section) var(--padding-page);
  background: var(--near-black);
}

.pillars-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-4xl);
  align-items: end;
}

.pillars-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase; /* previously inline on element */
}

.pillars-desc {
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--white-dim);
  max-width: 380px;
}

/* Gallery slider */
.gallery-slider {
  position: relative;
  overflow: hidden;
  height: 600px;
}

.gallery-track {
  display: flex;
  height: 100%;
  transition: var(--transition-gallery);
}

.gallery-track img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
}

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(219, 1, 0, 0.8);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 44px; height: 44px;
  cursor: pointer;
  z-index: 10;
  transition: background var(--duration-fast);
}
.gallery-btn:hover { background: var(--red); }
.gallery-btn.prev { left: 16px; }
.gallery-btn.next { right: 16px; }


/* ================================================================
   12. EVENTS
================================================================ */
.events {
  padding: var(--padding-section) var(--padding-page);
  background: var(--black);
}

.events-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-3xl);
}

.events-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.events-list { display: flex; flex-direction: column; }

.event-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  align-items: center;
  gap: var(--space-2xl);
  padding: 28px 0;
  border-bottom: var(--border-subtle);
  cursor: none;
  transition: all var(--duration-fast);
  position: relative;
}
.event-row::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--padding-page));
  right: calc(-1 * var(--padding-page));
  top: 0; bottom: 0;
  background: var(--magenta-ghost);
  opacity: 0;
  transition: var(--transition-opacity);
}
.event-row:hover::after { opacity: 1; }

.event-date {
  font-size: var(--text-base);
  letter-spacing: 0.15em;
  color: var(--red);
  text-transform: uppercase;
}

.event-name {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--white);
}

.event-venue {
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  color: var(--white-dim);
  text-align: right;
}

.event-tag {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--magenta-dim);
  color: var(--magenta);
}


/* ================================================================
   13. STUDIO
================================================================ */
.studio {
  padding: var(--padding-section) var(--padding-page);
  background: color-mix(in srgb, var(--maroon) 8%, var(--surface));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.studio-visual {
  position: relative;
  height: 500px;
}

.studio-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.studio-title em { font-style: normal; color: var(--red); }

.studio-body {
  font-size: var(--text-md);
  line-height: 1.9;
  color: var(--white-dim);
  margin-bottom: 40px;
}

.studio-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

/* Spec card — reusable for pricing / stat items */
.spec-item {
  border-left: 2px solid var(--magenta);
  padding-left: var(--space-md);
}

.spec-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(240, 236, 228, 0.3);
  margin-bottom: var(--space-xs);
}

.spec-value {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}


/* ================================================================
   14. DEMONZ
================================================================ */
.demonz {
  padding: var(--padding-section) var(--padding-page);
  background: var(--black);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Ghost watermark */
.demonz::before {
  content: 'DEM00NZ';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 240px);
  font-weight: 900;
  color: var(--red-ghost);
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
}

.demonz-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-lg);
  position: relative;
}

.demonz-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 140px);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.85;
  position: relative;
  z-index: var(--z-above);
  margin-bottom: var(--space-2xl);
}

.demonz-members {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  position: relative;
  z-index: var(--z-above);
  margin-bottom: var(--space-2xl);
}

/* Reusable pill/tag for ecosystem items, categories, etc. */
.member-tag {
  font-size: var(--text-base);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-faint);
  transition: var(--transition-color);
  text-decoration: none;
}
.member-tag:hover {
  color: var(--magenta);
  border-color: var(--magenta-dim);
  background: var(--magenta-ghost);
}

.demonz-desc {
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--white-dim);
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
  position: relative;
  z-index: var(--z-above);
}


/* ================================================================
   15. MANIFESTO
================================================================ */
.manifesto {
  padding: 140px var(--padding-page);
  background: var(--black);
  position: relative;
  overflow: hidden;
}

/* Left red bar accent */
.manifesto::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--red);
}

.manifesto-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--white-dim);
}
.manifesto-text strong { font-weight: 900; color: var(--white); }
.manifesto-text em     { font-style: normal; color: var(--red); }


/* ================================================================
   UTILITY: Reusable helper classes
   These replace the most common inline style patterns found in the HTML.
================================================================ */

/* Logo images in nav and footer — height controlled here, not inline */
.img-logo {
  height: 44px;
  width: auto;
  max-width: none;
  display: block;
}

/* Studio section: full-bleed image fill inside .studio-visual */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ================================================================
   16. FOOTER
================================================================ */
footer {
  background: var(--black);
  padding: var(--space-2xl) var(--padding-page);
  border-top: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo { display: flex; align-items: center; }

.footer-copy {
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  color: var(--white-mark);
  text-transform: uppercase;
}

.footer-right {
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  color: rgba(219, 1, 0, 0.4);
  text-transform: uppercase;
}


/* ================================================================
   17. KEYFRAME ANIMATIONS
================================================================ */
@keyframes grain {
  0%,100%{ transform: translate(0, 0); }
  10%    { transform: translate(-2%, -3%); }
  20%    { transform: translate(3%, 2%); }
  30%    { transform: translate(-1%, 4%); }
  40%    { transform: translate(2%, -1%); }
  50%    { transform: translate(-3%, 1%); }
  60%    { transform: translate(1%, 3%); }
  70%    { transform: translate(-2%, -2%); }
  80%    { transform: translate(4%, 1%); }
  90%    { transform: translate(-1%, -4%); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; transform: scaleY(1); }
  50%       { opacity: 0.8; transform: scaleY(1.1); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ================================================================
   18. RESPONSIVE OVERRIDES
================================================================ */
@media (max-width: 900px) {
  .gallery-slider { height: 260px; }

  nav { padding: 20px 24px; }
  .nav-links { display: none; }

  .hero { padding: 0 24px 60px; }
  .hero-number  { display: none; }
  .hero-accent  { display: none; }
  .hero-bottom  { flex-direction: column; align-items: flex-start; }

  .pillars { padding: 80px 24px; }
  .pillars-header { grid-template-columns: 1fr; gap: 24px; }

  .events { padding: 80px 24px; }
  .events-header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .event-row { grid-template-columns: 80px 1fr; gap: 20px; }
  .event-venue, .event-tag { display: none; }

  .studio { padding: 80px 24px; grid-template-columns: 1fr; }
  .studio-visual { height: 300px; order: -1; }

  .demonz    { padding: 80px 24px; }
  .manifesto { padding: 80px 24px; }

  footer { flex-direction: column; gap: 16px; text-align: center; padding: 32px 24px; }
}


/* ================================================================
   MINIGAME EXTENSIONS
   Strictly additive — only affects minigame pages.
   Shares tokens from :root above; adds no new visual direction.
================================================================ */

/* ================================================================
   19. PAGE SHELL — Full-viewport wrapper (minigame pages)
================================================================ */
#wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ================================================================
   20. CANVAS & SCANLINES
================================================================ */
#gameCanvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* CRT scanlines — mirrors grain overlay aesthetic */
#scanlines {
  position: absolute;
  inset: 0;
  z-index: var(--z-scanlines);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
}


/* ================================================================
   21. HUD — Score / Lives bar
================================================================ */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: var(--z-hud);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 24px 0;
  pointer-events: none;
}

#score-display,
#lives-display {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white-dim);
  line-height: 1.8;
}

#score-display span,
#lives-display span {
  color: var(--white);
  font-weight: 400;
}


/* ================================================================
   22. OVERLAY SCREENS — Start / Game Over
================================================================ */
.screen {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: rgba(6, 6, 6, 0.88);
  text-align: center;
  padding: var(--space-lg);
}
.screen.hidden { display: none; }

/* Red eyebrow with flanking rules — mirrors .hero-eyebrow pattern */
.screen-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
}
.screen-label::before,
.screen-label::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--red);
}

.screen-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 88px);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.9;
}

.screen-sub {
  font-size: var(--text-base);
  letter-spacing: 0.12em;
  color: var(--white-dim);
  max-width: 340px;
  line-height: 1.9;
}

.screen-stat {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white-dim);
}
.screen-stat strong { color: var(--white); font-weight: 400; }


/* ================================================================
   23. MINIGAME BUTTON (.btn)
   Shares all visuals with .btn-primary;
   uses cursor:pointer because there is no custom cursor on minigame pages.
================================================================ */
.btn {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border: none;
  padding: 16px 36px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast);
  margin-top: var(--space-sm);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: var(--transition-opacity);
}
.btn:hover { background: var(--red-hover); }
.btn:hover::after { opacity: 1; }


/* ================================================================
   24. COUPON TOAST
   Accent banner; consistent with marquee strip aesthetic.
================================================================ */
#coupon-toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: var(--z-toast);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 12px 28px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base), transform var(--duration-base);
}
#coupon-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ================================================================
   25. TAP HINT
================================================================ */
#tap-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-hud);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  animation: fadeUp 1s 1s both;
}


/* ================================================================
   26. MINIGAME RESPONSIVE
================================================================ */
@media (max-width: 600px) {
  #hud { padding: 12px 16px 0; }

  #score-display,
  #lives-display { font-size: var(--text-xs); }

  .screen-title { font-size: clamp(28px, 12vw, 60px); }
  .screen-sub   { font-size: var(--text-sm); max-width: 260px; }

  .btn { padding: 14px 28px; font-size: var(--text-sm); }

  #coupon-toast { font-size: var(--text-xs); padding: 10px 20px; bottom: 60px; }
}

@media (max-height: 500px) {
  /* Landscape / very short screens — compact the overlays */
  .screen       { gap: var(--space-sm); }
  .screen-title { font-size: clamp(24px, 8vw, 48px); }
  .screen-sub   { display: none; }
}