:root {
  --bg: #05060a;
  --bg-panel: #10121a;
  --border-subtle: #262938;
  --accent: #0fd3b5;
  --accent-soft: rgba(15, 211, 181, 0.14);
  --text-main: #f7f7ff;
  --text-muted: #a6a8ba;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

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

body {
  margin: 0;
  background: radial-gradient(circle at top, #141824 0%, #05060a 55%, #020308 100%);
  color: var(--text-main);
  font-family: var(--font-sans);
}

/* ================================
   MAIN LAYOUT
   Desktop: 3 columns (stats | canvas | controls)
   ================================ */

#app {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
}

/* LEFT COLUMN: STATS */

#statsPanel {
  width: 260px;
  flex: 0 0 260px;
}

/* CENTER COLUMN: TITLE + CANVAS */

#leftPane {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 640px;
  min-width: 640px;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* RIGHT COLUMN: CONTROLS + ERROR */

#rightPane {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#controlsPanel {
  width: 260px;
  flex: 0 0 260px;
}

/* SHARED PANEL (stats + controls) */

.sidePanel {
  background: var(--bg-panel);
  border-radius: 0.9rem;
  border: 1px solid var(--border-subtle);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

#controlsPanel h2,
#statsPanel h2 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* SECTIONS + ROWS */

.stat-section {
  padding: 0.6rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(10, 12, 20, 0.9);
  border: 1px solid rgba(77, 82, 106, 0.45);
}

.stat-section + .stat-section {
  margin-top: 0.25rem;
}

.stat-section h3 {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.stat-label {
  color: var(--text-muted);
}

.stat-value {
  color: var(--text-main);
  text-align: right;
  white-space: nowrap;
}

/* Controls inputs (inside stat-value spans) */

#controlsPanel input,
#controlsPanel select {
  background: #050713;
  border-radius: 0.4rem;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 0.2rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

#controlsPanel input[type="range"] {
  width: 150px;
}

/* CANVAS */

#canvas {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto; /* JS uses canvas internal width/height for WebGL */
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at center, #ffffff 0%, #e4e7fb 70%);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
}

/* ERROR BANNER (under controls) */

.error-banner {
  background: #ffebee;
  color: #b00020;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-weight: 600;
}

/* FOOTER */

#footer {
  width: 100%;
  margin-top: 2rem;
  padding: 1rem 0;
  text-align: center;

  background: linear-gradient(
    to top,
    rgba(15, 15, 28, 0.35),
    transparent
  );
  color: var(--text-muted);

  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  
  border-top: 1px solid var(--border-subtle);
}

#footer span {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#footer span:hover {
  opacity: 1;
}

/* =================================
   RESPONSIVE: MOBILE / SMALL SCREENS
   Canvas, stats, controls become vertical
   ================================= */

@media (max-width: 900px) {
  #app {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: 1rem;
  }

  /* Order: Canvas first, then Stats, then Controls */
  #leftPane {
    order: 1;
    min-width: 0;
    max-width: 100%;
  }

  #statsPanel {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
  }

  #rightPane {
    order: 3;
    width: 100%;
  }

  #controlsPanel {
    width: 100%;
    flex: 0 0 auto;
  }

  #canvas {
    max-width: 100%;
  }

  .sidePanel {
    max-width: 100%;
  }

  .stat-row {
    font-size: 0.84rem;
    gap: 0.5rem;
  }

  .stat-value {
    min-width: 0;
    white-space: normal; /* allow wrap on very small screens */
  }

  #controlsPanel input[type="range"] {
    width: 100%;
  }
}

/* Very small phones */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  #app {
    padding: 0.75rem;
  }

  h1 {
    font-size: 1.15rem;
  }

  .stat-section {
    padding: 0.55rem 0.6rem;
  }

  .stat-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .stat-value {
    text-align: left;
  }
}