:root{
  --font-pixel: 'Press Start 2P', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --fg: #cfe9ff;
  --fg-dim:#a4b3c7;
  --bg: #030311;
  --accent:#00f0ff;
  --accent-2:#a000ff;
  --card:#0b0e1a;
  --glass: rgba(10,14,28,0.6);
}
body.theme-neon[data-scene="space"]{--accent:#00f0ff; --accent-2:#a000ff}
body.theme-neon[data-scene="city"]{--accent:#ff2bd6; --accent-2:#00ffd5}

*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-mono);}

/* Background layers */
#bg{position:fixed;inset:0;overflow:hidden;z-index:-1}
#starfield{position:absolute;inset:0;width:100%;height:100%}
.bg-tiles{position:absolute;inset:0;background-size:cover;opacity:.9;filter:contrast(120%) saturate(120%)}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px);mix-blend-mode:overlay;opacity:.08}
.vignette{position:absolute;inset:0;box-shadow:inset 0 0 220px 60px #000}

/* Top bar */
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.3));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{font-family:var(--font-pixel);text-decoration:none;color:var(--fg);font-size:1rem;letter-spacing:.5px}
.brand span{color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:.8rem}
.nav a{color:var(--fg);text-decoration:none;padding:.4rem .6rem;border:1px solid transparent;border-radius:8px}
.nav a:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.menu-toggle{display:none;margin-right:.25rem;background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.4rem .6rem}
.toggles{display:flex;gap:.5rem;margin-left:.5rem}
.toggles button{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:2rem;height:2rem}

/* Layout */
.container{max-width:900px;margin:8vh auto 8vh;padding:1.2rem;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 15px 60px rgba(0,0,0,.4)}

h1,h2,h3{font-family:var(--font-pixel);line-height:1.3;color:var(--fg)}
h1{font-size:1.4rem}
h2{font-size:1.1rem;color:var(--accent)}
p{line-height:1.7;color:var(--fg)}

.code, pre, code{font-family:var(--font-mono);background:rgba(255,255,255,.03);padding:.2rem .35rem;border-radius:6px}
article img{max-width:100%;display:block;margin:1rem auto;border-radius:12px;border:1px solid rgba(255,255,255,.08)}

/* Cards / lists */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:1rem 0}
.card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.card .meta{font-size:.8rem;color:var(--fg-dim)}
.card a{color:var(--accent);text-decoration:none}
.card a:hover{text-decoration:underline}

/* Footer */
.foot{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap;padding:2rem;color:var(--fg-dim)}
.foot a{color:var(--fg-dim)}
.sep{opacity:.5}

/* Responsive nav */
@media (max-width: 780px){
  .menu-toggle{display:inline-block}
  .nav{display:none;position:absolute;z-index: 9999;top:3.2rem;right:1rem;flex-direction:column;background:rgba(0,0,0,.7);backdrop-filter: blur(10px);padding:.5rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
  .nav.show{display:flex; z-index: 9999;}
}

/* Scene backgrounds */
body[data-scene="space"] .bg-tiles{background-image:url('/assets/bg/wizvoid2.png');}
body[data-scene="city"] .bg-tiles{background-image:url('/assets/bg/wizvoid3.png');}
body[data-scene="blog"] .bg-tiles{background-image:url('/assets/bg/wizvoid4.png');}
body[data-scene="stories"] .bg-tiles{background-image:url('/assets/bg/wizvoid5.png');}

/* Utility */
hr{border:none;border-top:1px dashed rgba(255,255,255,.2);margin:1.2rem 0}
.time{opacity:.7}

/* Link glow */
a{color:var(--accent)}
a:focus{outline:2px dotted var(--accent-2);outline-offset:2px}

/* Tiny CRT flicker */
@keyframes pulse {0%{opacity:.96} 50%{opacity:1} 100%{opacity:.96}}
.container{animation:pulse 3.5s infinite ease-in-out}

/* Tag pills */
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-size:.7rem;border:1px solid rgba(255,255,255,.2);padding:.2rem .45rem;border-radius:999px;color:var(--fg-dim)}

/* Home hero */
.hero{display:grid;gap:1rem}
.hero p{color:var(--fg-dim)}

/* Markdown rendering tweaks */
article h1{margin-top:.2rem}
article h2, article h3{margin-top:1.2rem}
article pre{padding:.8rem;overflow:auto}

/* Story title style */
.story-title{font-family:var(--font-pixel);font-size:1.2rem}
/* Chapter navigation styling */
.chapter-header {
  margin: 1rem 0 2rem 0;
  text-align: left;
}

.chapter-header a {
  color: #0ff; /* neon cyan */
  text-decoration: none;
  font-weight: bold;
  font-family: 'Share Tech Mono', monospace; /* or your cyberpunk font */
  text-shadow: 0 0 6px #0ff, 0 0 12px #0ff;
  transition: color 0.2s, text-shadow 0.2s;
}

.chapter-header a:hover {
  color: #fff;
  text-shadow: 0 0 10px #f0f, 0 0 20px #0ff;
}

.chapter-nav {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  font-family: 'Share Tech Mono', monospace;
}

.chapter-nav a {
  color: #f0f; /* neon magenta */
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border: 1px solid #f0f;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 6px #f0f, 0 0 12px #f0f;
  transition: background 0.2s, text-shadow 0.2s, color 0.2s;
}

.chapter-nav a:hover {
  background: rgba(255, 0, 255, 0.1);
  color: #fff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #f0f;
}