/* AVERY LAKE AESTHETIC: NOIR / CYBER / MINIMAL */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --void: #000000;
  --starlight: #e0e0e0;
  --accent: #ff3333;
  --font-stack: 'Space Mono', monospace;
}

/* === THE APP-FEEL UPGRADE === */
/* This block prevents text selection and the "Google Search" popup on mobile taps */
* {
  -webkit-user-select: none; /* Safari / Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Edge */
  user-select: none;         /* Standard */
  -webkit-tap-highlight-color: transparent; /* Removes blue tap box */
}

body, html {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--void);
  color: var(--starlight);
  font-family: var(--font-stack);
  overflow: hidden;
  
  /* Disable native gestures like pull-to-refresh to keep the app immersive */
  overscroll-behavior: none;
  touch-action: none; 
}

/* === UI LAYER === */
.ui-layer {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 100; pointer-events: none; 
}

/* HEADER */
.header {
  position: absolute; top: 2rem; left: 2rem;
  opacity: 0.5; font-size: 0.7rem; letter-spacing: 0.2rem;
  max-width: 60%; 
}

/* AUDIO TOGGLE (ICON) */
.audio-toggle {
  position: absolute; top: 2rem; right: 2rem;
  font-size: 1.2rem; 
  border: none; background: transparent;
  padding: 0; z-index: 200; 
  opacity: 0.6;
}
.audio-toggle:hover { opacity: 1; transform: scale(1.1); }

/* NAV ARROWS */
.nav-top { position: absolute; top: 0; width: 100%; text-align: center; padding-top: 2rem; }
.nav-bottom { position: absolute; bottom: 0; width: 100%; text-align: center; padding-bottom: 2rem; }

/* READOUT */
.readout {
  position: absolute; top: 50%; right: 2rem;
  transform: translateY(-50%); text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
}

/* === INTERACTIVE LEGEND === */
.legend-container {
  position: absolute; bottom: 5rem; right: 2rem;
  text-align: right; font-size: 0.6rem; opacity: 0.8;
  pointer-events: auto; 
}

.legend-title {
  margin-bottom: 0.5rem; opacity: 0.5; letter-spacing: 0.1em; 
  border-bottom: 1px solid #333; padding-bottom: 2px; display: inline-block;
}

.legend-graph { display: flex; flex-direction: column; align-items: flex-end; }

.legend-item {
  display: flex; align-items: center; justify-content: flex-end; 
  margin: 0.1rem 0; transition: transform 0.2s;
  padding: 5px 0; /* Easier to tap on mobile */
}
.legend-item:hover { transform: translateX(-5px); }

.legend-label { margin-right: 10px; line-height: 1.1; opacity: 0.3; transition: opacity 0.3s, color 0.3s; }
.legend-label.active { opacity: 1; color: var(--accent); }

.legend-dot {
  width: 6px; height: 6px; background: var(--starlight);
  border-radius: 50%; opacity: 0.2; transition: all 0.3s;
}
.legend-dot.active { background: var(--accent); opacity: 1; box-shadow: 0 0 8px var(--accent); }

.legend-connector {
  width: 1px; background: rgba(255,255,255,0.1);
  margin-right: 2.5px; height: 15px; 
}

/* === GENERAL INTERACTION === */
.clickable {
  pointer-events: auto; cursor: pointer; opacity: 0.5; transition: all 0.3s;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1rem;
}
.clickable:hover { opacity: 1; letter-spacing: 0.2rem; color: var(--accent); border-color: var(--accent); }

.nav-center {
  margin-top: 1rem; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.2);
  padding: 0.5rem; display: inline-block; opacity: 0; pointer-events: none; transition: opacity 0.5s;
}

#scale-label { font-size: 1.5rem; font-weight: bold; }
#context-label { font-size: 0.8rem; opacity: 0.6; margin-bottom: 0.5rem; color: var(--accent); text-transform: uppercase; }

/* === PROMPTS === */
.prompt-container {
  position: absolute; top: 25%; left: 50%; transform: translateX(-50%);
  width: 80%; text-align: center; pointer-events: none;
}
#dynamic-prompt {
  font-size: 1.1rem; line-height: 1.4; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-shadow: 0 0 10px black; opacity: 0; transition: opacity 1s ease;
}

/* === VIEWPORT === */
.viewport {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  perspective: 1000px; overflow: hidden;
}
.singularity-container { position: relative; width: 200px; height: 200px; z-index: 50; }
.event-horizon {
  width: 100%; height: 100%; background: black; border-radius: 50%;
  position: absolute; box-shadow: 0 0 50px rgba(255,255,255,0.05); z-index: 2;
}
.accretion-disk {
  position: absolute; top: -10%; left: -10%; width: 120%; height: 120%;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  z-index: 1; opacity: 0.5; transition: all 0.1s;
}
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, opacity; }
.iris-texture {
  background: repeating-conic-gradient(var(--void) 0deg, #1a1a1a 10deg, var(--void) 20deg);
  mask-image: radial-gradient(circle, transparent 15%, black 60%);
  -webkit-mask-image: radial-gradient(circle, transparent 15%, black 60%); opacity: 0.8;
}
.star-field {
  background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px);
  background-size: 550px 550px, 250px 250px;
}
.atom-field {
  background-image: radial-gradient(var(--accent) 1px, transparent 2px), radial-gradient(rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 60px 60px, 30px 30px;
}
.noise {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.08; pointer-events: none; background: url("https://assets.codepen.io/13471/noise.png"); z-index: 200;
}

/* === MOBILE OPTIMIZATIONS (CALIBRATED) === */
@media (max-width: 600px) {
  
  /* 1. Fix Header Overlap */
  .header { 
    font-size: 0.5rem; 
    top: 1rem;       /* Move closer to top edge */
    left: 1rem; 
    max-width: 40%;  /* Force it to stay in the corner */
    line-height: 1.2;
  }
  
  .nav-top { 
    padding-top: 3.5rem; /* Push the 'Drift' arrow DOWN so it clears the logo */
    font-size: 0.6rem; 
    z-index: 10;
  } 

  .audio-toggle {
    top: 1rem;
    right: 1rem;
  }

  /* 2. Fix Prompt vs Scale Collision */
  .prompt-container {
    top: 15%;        /* Move the text UP significantly */
    width: 90%;      /* Make it wider so text wraps less */
  }
  
  #dynamic-prompt {
    font-size: 0.9rem; /* Slightly smaller font */
  }

  /* 3. Adjust Readout/Scale Position */
  .readout { 
    top: 60%;        /* Move Scale DOWN (below the singularity center) */
    right: 1rem; 
  }
  
  #scale-label { font-size: 1rem; }

  /* 4. Layout Adjustments */
  .singularity-container { width: 140px; height: 140px; }
  
  .nav-bottom { 
    padding-bottom: 2rem; 
    font-size: 0.6rem; 
  }
  
  /* Legend Position */
  .legend-container { 
    display: block; 
    bottom: 5rem;    /* Lifted slightly to clear bottom nav */
    right: 1rem; 
    font-size: 0.5rem;
  }
  .legend-connector { height: 10px; }
}