/* ============================================================
   Terminal-Editorial Base Styles
   Shared by level detail pages (levels/1-5.html)
   ============================================================ */

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

:root {
  --bg:            #070810;
  --bg2:           #0d0f1e;
  --bg3:           #111425;
  --surface:       rgba(255,255,255,0.04);
  --border:        rgba(255,255,255,0.08);
  --border-bright: rgba(255,255,255,0.16);
  --text:          #f0f0f8;
  --text-muted:    rgba(240,240,248,0.5);
  --text-dim:      rgba(240,240,248,0.28);
  --accent:        #4BFFD4;
  --accent-dim:    rgba(75,255,212,0.12);
  --c-l1: #4BFFD4; --c-l2: #5B8DEF; --c-l3: #F59E0B; --c-l4: #F97316; --c-l5: #A78BFA;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'DM Mono', monospace; font-size: 14px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }

/* ── NAV ───────────────────────────────────────────────────── */
nav { position: sticky; top: 0; z-index: 100; background: rgba(7,8,16,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0 2rem; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.nav-brand span { color: var(--accent); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active { position: relative; }
.nav-links a.active::after { content: ''; position: absolute; bottom: -19px; left: 0; right: 0; height: 1px; background: var(--accent); }
.nav-right a { color: var(--text-muted); text-decoration: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--border); padding: 6px 14px; border-radius: 4px; transition: all 0.2s; }
.nav-right a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 768px) { .nav-links { display: none; } }

/* ── FOOTER ────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 2rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-brand { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.footer-brand span { color: var(--accent); }
.footer-links { display: flex; gap: 1.5rem; list-style: none; }
.footer-links a { font-size: 12px; color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--text-muted); }
.footer-version { font-size: 11px; color: var(--text-dim); }