/* ============================================
   SYNTHWAVE TYPER — Layout & Structure
   Page-level layout, background layers,
   and structural containers
   ============================================ */

/* ── Base Body ── */
body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  position: relative;
}

/* ── Synthwave Background Layers ── */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-bg);
}

/* Sunset gradient sky */
.bg-sky {
  background: linear-gradient(
    180deg,
    var(--sunset-top) 0%,
    var(--sunset-mid) 25%,
    #6b1d7a 40%,
    var(--sunset-pink) 55%,
    var(--sunset-orange) 70%,
    var(--sunset-yellow) 85%,
    #ffe156 100%
  );
  opacity: 0.7;
}

/* Sun circle */
.bg-sun {
  position: fixed;
  bottom: 12%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    var(--sunset-yellow) 0%,
    var(--sunset-orange) 40%,
    var(--sunset-pink) 100%
  );
  animation: sunPulse 4s ease-in-out infinite;
  z-index: var(--z-bg);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hide sun on drill & learn screens so target letter stays readable */
body[data-screen="drill"] .bg-sun,
body[data-screen="learn"] .bg-sun,
body[data-screen="wordfall"] .bg-sun {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Sun horizontal lines (CRT style) */
.bg-sun::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 8px,
    rgba(10, 10, 26, 0.3) 8px,
    rgba(10, 10, 26, 0.3) 12px
  );
}

/* Perspective grid floor */
.bg-grid {
  position: fixed;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 55%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--grid-color) 0px,
      var(--grid-color) var(--grid-line-width),
      transparent var(--grid-line-width),
      transparent 50px
    ),
    repeating-linear-gradient(
      0deg,
      var(--grid-color) 0px,
      var(--grid-color) var(--grid-line-width),
      transparent var(--grid-line-width),
      transparent 50px
    );
  animation: gridScroll 2s linear infinite;
  z-index: var(--z-bg);
  pointer-events: none;
}

/* Scanline overlay */
.bg-scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: var(--z-overlay);
  animation: flicker 8s infinite;
}

/* Stars */
.bg-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-bg);
}

/* Dark overlay for readability */
.bg-darkness {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 0%,
    rgba(10, 10, 26, 0.4) 50%,
    rgba(10, 10, 26, 0.7) 100%
  );
  pointer-events: none;
  z-index: var(--z-bg);
}

/* ── App Container ── */
#app {
  position: relative;
  z-index: var(--z-base);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Particle Canvas ── */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-particles);
}

/* ── Screen Containers ── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Header Bar ── */
.header-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xl);
  height: var(--hud-height);
  background: rgba(10, 10, 26, 0.8);
  border-bottom: 1px solid var(--grid-color);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: var(--z-overlay);
  flex-shrink: 0;
}

.header-bar .logo-small {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--neon-cyan);
  text-shadow: var(--glow-text-cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Content Area ── */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  overflow-y: auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Section Layout ── */
.section-row {
  display: flex;
  gap: var(--space-xl);
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.section-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
  min-width: 280px;
  max-width: 500px;
}

/* ── Modal Overlay ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 16, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 500px;
  width: 90%;
  animation: fadeInScale var(--transition-slow) ease;
  box-shadow: var(--glow-cyan);
  text-align: center;
}

/* ── Footer ── */
.footer-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  background: rgba(10, 10, 26, 0.6);
  border-top: 1px solid rgba(0, 240, 255, 0.1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}