/*
Copyright (c) 2026 Terry Packer.

This file is part of Terry Packer's Work.
See www.terrypacker.com for further info.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/* =============================================================
   ALIFE_STYLES.CSS  —  Artificial Life page
   Load order:  base.css  →  theme-neon.css  →  alife-styles.css
   ============================================================= */

:root {
  --text-dim: #97a1bb;
}
body {
  height: 100vh;
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 280px 1fr;
  overflow: hidden;
}

/* ── HEADER ── */
header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  z-index: 10;
}
header h1 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--accent1);
  text-shadow: var(--glow1);
}
header .tag {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 2px;
}

.header-stats {
  margin-left: auto;
  display: flex;
  gap: 24px;
  font-size: 10px;
  color: var(--text);
}
.header-stats span { color: var(--accent1); }
#stat-gen, #stat-pop, #stat-fps { color: var(--accent3); }

/* ── LEFT PANEL ── */
#panel {
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#panel::-webkit-scrollbar       { width: 4px; }
#panel::-webkit-scrollbar-track { background: var(--bg); }
#panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.section {
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
}
.section-title {
  font-family: var(--font-head);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── ALGORITHM SELECTOR ── */
.algo-list { display: flex; flex-direction: column; gap: 6px; }

.algo-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 9px 12px;
  border-radius: var(--panel-radius);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.algo-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.algo-btn:hover { border-color: var(--dim); color: var(--text); }
.algo-btn.active {
  border-color: var(--accent1);
  color: var(--accent1);
  text-shadow: var(--glow1);
  box-shadow: inset 0 0 20px #00ffe708, var(--glow1);
}
.algo-btn.active::before { background: #00ffe70a; opacity: 1; }

.algo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
  transition: all 0.15s;
}
.algo-btn.active .algo-dot {
  background: var(--accent1);
  box-shadow: 0 0 8px var(--accent1);
}
.algo-label { flex: 1; }
.algo-key {
  font-size: 9px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ── TRANSPORT CONTROLS ── */
.transport { display: flex; gap: 8px; }

.btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 8px 4px;
  border-radius: var(--panel-radius);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
}
.btn:hover { border-color: var(--dim); color: var(--text); }
.btn.primary {
  border-color: var(--accent1);
  color: var(--accent1);
  box-shadow: var(--glow1);
}
.btn.primary:hover { background: #00ffe710; }
.btn.danger       { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover  { background: #ff4f4f10; }

/* ── SPEED / SLIDERS ── */
.param-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.param-row:last-child { margin-bottom: 0; }

.param-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-dim);
}
.param-label .val { color: var(--accent3); }

/* Override base thumb colour for neon theme */
input[type=range] { background: var(--border); }

/* ── DYNAMIC PARAMS ── */
#algo-params { display: flex; flex-direction: column; gap: 0; }

/* ── CANVAS AREA ── */
#canvas-wrap {
  position: relative;
  background: #020408;
  overflow: hidden;
}
#canvas-wrap canvas { position: absolute; top: 0; left: 0; }
#bg-canvas    { z-index: 0; opacity: 0.4; }
#main-canvas  { z-index: 1; }

/* Scanline overlay on canvas */
#canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,       transparent 2px,
    #00000018 2px, #00000018 4px
  );
  pointer-events: none;
  z-index: 5;
}

/* ── CANVAS OVERLAYS ── */
#algo-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 10;
  background: #090d1acc;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--accent1);
  text-shadow: var(--glow1);
  backdrop-filter: blur(4px);
}

#paused-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: #05081088;
  backdrop-filter: blur(2px);
}
#paused-overlay.visible { display: flex; }
#paused-overlay span {
  font-family: var(--font-head);
  font-size: 32px;
  letter-spacing: 12px;
  color: var(--accent2);
  text-shadow: var(--glow2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ── LEGEND ── */
#legend {
  position: absolute;
  bottom: 16px; right: 16px;
  z-index: 10;
  background: #090d1acc;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 10px;
  color: var(--text);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── CLICK HINT ── */
#click-hint {
  position: absolute;
  bottom: 16px; left: 16px;
  z-index: 10;
  font-size: 9px;
  color: var(--text);
  letter-spacing: 1px;
  background: #090d1acc;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  backdrop-filter: blur(4px);
}

/* ── PARAM GROUP WRAPPER ── */
.param-group {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}