/* ███████╗████████╗██╗   ██╗██╗     ███████╗███████╗ */
/* ██╔════╝╚══██╔══╝╚██╗ ██╔╝██║     ██╔════╝██╔════╝ */
/* ███████╗   ██║    ╚████╔╝ ██║     █████╗  ███████╗ */
/* ╚════██║   ██║     ╚██╔╝  ██║     ██╔══╝  ╚════██║ */
/* ███████║   ██║      ██║   ███████╗███████╗███████║ */
/* ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚══════╝╚══════╝ */
/*  ██████╗███████╗███████╗                           */
/* ██╔════╝██╔════╝██╔════╝                           */
/* ██║     ███████╗███████╗                           */
/* ██║     ╚════██║╚════██║                           */
/* ╚██████╗███████║███████║                           */
/*  ╚═════╝╚══════╝╚══════╝                           */
/**************************************************************
 *  GLOBAL THEME TOKENS (Default / Light)
 **************************************************************/
:root {
  --dark-pink: #4a2160;
  --neon-blue: #00d0ff;
  --neon-pink: #ff3cc8;
  --black: #000000;
  --white: #86738f;
  --red-muted: #ab4646;
  --neon-red: #ef4444;
  --text: #ffffff;
  --input: #000000;
  --shadow: 3px 3px 0 var(--black);
  --btn-nav-h: 36px;
}
/**************************************************************
 *  GLOBAL THEME TOKENS (Dark Theme Overrides)
 **************************************************************/
.dark-theme {
  --dark-pink: #88610c;
  --neon-blue: #ded00e;
  --neon-pink: #ff7700;
  --black: #000000;
  --white: #b9b9b9;
  --red: #ef4444;
  --text: #000000;
  --shadow: 3px 3px 0 var(--black);
  --btn-nav-h: 36px;
}
/**************************************************************
 *  RESET & BASE
 **************************************************************/
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: block;
  background: transparent;
  font-family: 'Press Start 2P', cursive;
  font-size: large;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
/**************************************************************
 *  PARALLAX SCENE (structure shared by all themes)
 **************************************************************/
#scene {
  position: fixed;
  inset: 0;
  z-index: 0;           /* sits behind UI */
  pointer-events: none; /* clicks pass through */
}
.layer {
  position: absolute;
  inset: 0;
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto 100%;
  image-rendering: pixelated;
  will-change: background-position;
}
/**************************************************************
 *  THEME ARTWORK — DEFAULT/LIGHT (scoped to :root)
 *  Using `:root .foo` increases specificity so these win.
 **************************************************************/
:root .sky {
  z-index: 1;
  background-image: url("/assets/themes/cityOne/sky.png");
  background-repeat: repeat;
}
:root .sunBG {
  z-index: 2;
  background-image: url("/assets/themes/cityOne/sun.png");
  background-repeat: no-repeat;
}
:root .clouds {
  z-index: 3;
  background-image: url("/assets/themes/cityOne/clouds1.png");
}
:root #city1 { z-index: 4; background-image: url("/assets/themes/cityOne/city1.png"); }
:root #city2 { z-index: 5; background-image: url("/assets/themes/cityOne/city2.png"); }
:root #city2Clouds { z-index: 6; background-image: url("/assets/themes/cityOne/city2Clouds.png"); }
:root #city3 { z-index: 7; background-image: url("/assets/themes/cityOne/city3.png"); }
:root #city3Clouds { z-index: 8; background-image: url("/assets/themes/cityOne/city3Clouds.png"); }
:root #city4 { z-index: 9; background-image: url("/assets/themes/cityOne/city4.png"); }
/**************************************************************
 *  THEME ARTWORK — DARK (scoped to .dark-theme)
 **************************************************************/
.dark-theme .sky {
  z-index: 1;
  background-image: url("/assets/themes/cityTwo/sky.png");
  background-repeat: repeat;
}
.dark-theme .sunBG {
  z-index: 2;
  background-image: url("/assets/themes/cityTwo/sun.png");
  background-repeat: no-repeat;
}
.dark-theme .clouds {
  z-index: 3;
  background-image: url("/assets/themes/cityTwo/clouds1.png");
}
.dark-theme #city1 { z-index: 4; background-image: url("/assets/themes/cityTwo/city1.png"); }
.dark-theme #city2 { z-index: 5; background-image: url("/assets/themes/cityTwo/city2.png"); }
.dark-theme #city2Clouds { z-index: 6; background-image: url("/assets/themes/cityTwo/clouds2.png"); }
.dark-theme #city3 { z-index: 7; background-image: url("/assets/themes/cityTwo/city3.png"); }
.dark-theme #city3Clouds { z-index: 8; background-image: url("/assets/themes/cityTwo/clouds3.png"); }
.dark-theme #city4 { z-index: 9; background-image: url("/assets/themes/cityTwo/city4.png"); }
/**************************************************************
 *  CLOUD AUTO-LOOP (keyframes shared by both themes)
 **************************************************************/
@keyframes cloudMove {
  from { background-position: 0 bottom; }
  to   { background-position: -2000px bottom; }
}
/* default theme speeds */
:root .clouds      { animation: cloudMove 40s linear infinite; }
:root #city2Clouds { animation: cloudMove 30s linear infinite; }
:root #city3Clouds { animation: cloudMove 20s linear infinite; }
/* dark theme speeds (same durations) */
.dark-theme .clouds      { animation: cloudMove 40s linear infinite; }
.dark-theme #city2Clouds { animation: cloudMove 30s linear infinite; }
.dark-theme #city3Clouds { animation: cloudMove 20s linear infinite; }
/**************************************************************
 *  HORIZONTAL SCROLL STRIP (CARD RAIL)
 **************************************************************/
.scrollmenu {
  position: fixed;
  z-index: 10;   /* above scene */
  top: 60px;     /* adjust if you have a fixed header */
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 50vh;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
}
.scrollmenu .card {
  flex: 0 0 50vw;
  margin: 20px;
}
@media (max-width: 768px) {
  .scrollmenu .card { flex: 0 0 85vw; height: auto; }
}
@media (max-height: 700px) {
  .scrollmenu .card { flex: 0 0 85vw; height: 70vh; overflow: auto; }
}
/**************************************************************
 *  CRT / PIXEL SCREEN EFFECTS
 **************************************************************/
.window.pixel-screen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 100vh;
}
/* RGB sub-pixel mask */
.window.pixel-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, .08) 0 1px,
      rgba(0, 255, 0, .08) 1px 2px,
      rgba(0, 0, 255, .08) 2px 3px
    );
  mix-blend-mode: overlay;
  opacity: .8;
}
/* scanlines + glow + vignette */
.window.pixel-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, .12), transparent 40%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .25) 80%);
  mix-blend-mode: multiply;
}
.window.pixel-screen .window__body {
  filter: contrast(110%) saturate(120%);
  text-shadow: 0 0 1px rgba(0, 0, 0, .25);
}
/**************************************************************
 *  UTIL: GLOBAL SCAN OVERLAY
 **************************************************************/
.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 4px);
  mix-blend-mode: soft-light;
}