/* =============================================================
   GLOBAL — resets, tokens, shared utilities
============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Monochrome city palette */
  --clr-bg:        #0a0a0a;
  --clr-surface:   #111111;
  --clr-border:    #2a2a2a;
  --clr-muted:     #555555;
  --clr-text:      #cccccc;
  --clr-text-hi:   #ffffff;

  /* Warm Noir (Crib + Coffee Shop) */
  --clr-amber:     #f5a623;
  --clr-orange:    #e8642c;
  --clr-warm-glow: rgba(245, 166, 35, 0.15);

  /* Cyberpunk (Tech Quarter) */
  --clr-blue:      #00cfff;
  --clr-cyan:      #0ff;
  --clr-tech-glow: rgba(0, 207, 255, 0.15);

  /* Neon Noir (Club / Dark Room / Billboard) */
  --clr-purple:    #b44fff;
  --clr-pink:      #ff4fa3;
  --clr-magenta:   #ff00cc;
  --clr-neon-glow: rgba(180, 79, 255, 0.15);

  /* Typography */
  --font-mono: 'Courier New', Courier, monospace;
  --font-sans: 'Segoe UI', system-ui, sans-serif;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 32px;
  --sp-xl: 64px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-mid:  300ms ease;
  --transition-slow: 600ms ease;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-mono);
}

/* Utility */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Scrollable district interiors */
.district {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.district.active {
  opacity: 1;
  pointer-events: all;
}

.district-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg);
}

/* Back button (shared) */
.btn-back-city {
  position: fixed;
  top: var(--sp-md);
  left: var(--sp-md);
  z-index: 200;
  background: transparent;
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.btn-back-city:hover {
  border-color: var(--clr-text-hi);
  color: var(--clr-text-hi);
}

/* Shared section heading */
.section-title {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--sp-md);
}

/* Scanline overlay (optional, applied per district) */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}