/* ================================================================
   UNEARTHLY UNRAVELED — Shared Stylesheet
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Special+Elite&family=VT323&display=swap');

:root {
  --neon-green:  #39ff14;
  --neon-purple: #bf00ff;
  --neon-yellow: #ffee00;
  --neon-red:    #ff0044;
  --neon-cyan:   #00eeff;
  --dark-bg:     #050510;
  --panel-bg:    #0a0a1a;
  --border:      #1a1a3a;
  --text:        #c8c8e8;
}

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

.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  pointer-events: none;
  border: 0;
}

body {
  background-color: var(--dark-bg);
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(63,0,100,.1) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(0,80,0,.07) 0%, transparent 50%);
  color: var(--text);
  font-family: 'Special Elite', 'Courier New', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── STAR LAYER 1 — dense small white stars, 9s twinkle ── */
body::before {
  content: '';
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at  7% 12%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 38%  7%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 58%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 22%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 72%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 83%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 42%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 62%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 92%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 55%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 33%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 87%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 61%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 19%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 35%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%  3%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 41%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 89%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 14%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 52%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 77%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 66%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85%  5%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 96%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 81%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 47%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 69%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 55%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 30%, rgba(255,255,255,.5) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-a 9s ease-in-out infinite alternate;
}

/* ── STAR LAYER 2 — tinted stars, 5s twinkle (offset phase) ── */
body::after {
  content: '';
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at 31% 67%, rgba(200,200,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  4%, rgba(200,255,200,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 46% 47%, rgba(255,255,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 30%, rgba(255,200,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 75%, rgba(200,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 28%, rgba(200,200,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 88%, rgba(255,200,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 96%, rgba(200,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 51%, rgba(255,255,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 14%, rgba(200,255,200,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 39%, rgba(255,220,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 10%, rgba(200,200,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 50%, rgba(200,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 95%, rgba(255,200,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 72%, rgba(200,255,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 25%, rgba(255,255,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 60%, rgba(200,200,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 43%, rgba(255,200,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 82%, rgba(200,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 18%, rgba(255,200,255,.3) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-b 5s ease-in-out infinite alternate;
}

/* ── STAR LAYER 3 — bright accent stars, 12s twinkle ── */
/* ── STAR LAYER 1 — dense small white stars, 9s twinkle ── */
body::before {
  content: '';
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at  7% 12%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 38%  7%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 58%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 22%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 72%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 83%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 42%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 62%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 92%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 55%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 33%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 87%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 61%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 19%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 35%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%  3%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 41%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 89%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 14%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 52%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 77%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 66%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85%  5%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 96%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 81%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 47%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 69%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 55%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 30%, rgba(255,255,255,.5) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-a 9s ease-in-out infinite alternate;
}

/* ── STAR LAYER 2 — tinted stars, 5s twinkle ── */
body::after {
  content: '';
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at 31% 67%, rgba(200,200,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  4%, rgba(200,255,200,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 46% 47%, rgba(255,255,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 30%, rgba(255,200,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 75%, rgba(200,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 28%, rgba(200,200,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 88%, rgba(255,200,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 96%, rgba(200,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 51%, rgba(255,255,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 14%, rgba(200,255,200,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 39%, rgba(255,220,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 10%, rgba(200,200,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 50%, rgba(200,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 95%, rgba(255,200,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 72%, rgba(200,255,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 25%, rgba(255,255,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 60%, rgba(200,200,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 43%, rgba(255,200,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 82%, rgba(200,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 18%, rgba(255,200,255,.3) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-b 5s ease-in-out infinite alternate;
}

/* ── STAR LAYERS 3 & 4 — bright accents + fill, injected as divs by ambient.js ── */
.star-layer-3 {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(2px 2px at 11% 44%, rgba(255,255,255,1)   0%, transparent 100%),
    radial-gradient(2px 2px at 89%  9%, rgba(255,255,255,.9)  0%, transparent 100%),
    radial-gradient(2px 2px at 55% 78%, rgba(255,255,255,.8)  0%, transparent 100%),
    radial-gradient(2px 2px at 33% 22%, rgba(200,220,255,1)   0%, transparent 100%),
    radial-gradient(2px 2px at 71% 55%, rgba(255,255,200,.9)  0%, transparent 100%),
    radial-gradient(2px 2px at 17% 90%, rgba(255,255,255,.8)  0%, transparent 100%),
    radial-gradient(2px 2px at 96% 70%, rgba(200,255,200,.7)  0%, transparent 100%),
    radial-gradient(2px 2px at 43% 35%, rgba(255,200,255,.8)  0%, transparent 100%),
    radial-gradient(2px 2px at 78% 15%, rgba(200,220,255,.9)  0%, transparent 100%),
    radial-gradient(3px 3px at 25% 90%, rgba(255,255,255,.7)  0%, rgba(255,255,255,.1) 40%, transparent 100%),
    radial-gradient(3px 3px at 78% 76%, rgba(200,200,255,.8)  0%, rgba(200,200,255,.1) 40%, transparent 100%),
    radial-gradient(3px 3px at 60% 20%, rgba(255,255,200,.7)  0%, rgba(255,255,200,.1) 40%, transparent 100%),
    radial-gradient(3px 3px at  5% 80%, rgba(200,255,255,.6)  0%, rgba(200,255,255,.1) 40%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-c 12s ease-in-out infinite alternate;
}
.star-layer-4 {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at 20% 25%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  5%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 80%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 48%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 32%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 97%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 63%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 84%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 50%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 10%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  2%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 97%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 35%, rgba(255,255,255,.3) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-d 7s ease-in-out 2s infinite alternate;
}

@keyframes twinkle-a { 0%{opacity:.35;} 50%{opacity:.85;} 100%{opacity:.5;}  }
@keyframes twinkle-b { 0%{opacity:.6;}  40%{opacity:.25;} 100%{opacity:.75;} }
@keyframes twinkle-c { 0%{opacity:.4;}  60%{opacity:1;}   100%{opacity:.55;} }
@keyframes twinkle-d { 0%{opacity:.7;}  35%{opacity:.2;}  100%{opacity:.6;}  }
@keyframes twinkle-e { 0%{opacity:.2;}  55%{opacity:.8;}  100%{opacity:.35;} }
@keyframes twinkle-f { 0%{opacity:.5;}  30%{opacity:.1;}  100%{opacity:.65;} }

/* ── STAR LAYER 5 — dense faint fill, 11s slow burn ── */
.star-layer-5 {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at  5% 17%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 42%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 24% 61%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 32%  9%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 74%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 28%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 86%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 53%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 11%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 67%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 79%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 94%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 33%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 57%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 47%  4%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 49%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 72%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 28%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 91%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 96%  8%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 56%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 20%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 44%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 68%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 66%  2%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 37%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 82%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 31%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 88%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 16%, rgba(255,255,255,.6) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-e 11s ease-in-out 1.5s infinite alternate;
}

/* ── STAR LAYER 6 — tiny tinted sparkle layer, 6s quick twinkle ── */
.star-layer-6 {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    radial-gradient(1px 1px at  6% 23%, rgba(220,220,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 71%, rgba(255,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 48%, rgba(220,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 15%, rgba(255,220,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 83%, rgba(220,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 37%, rgba(255,220,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 61%  6%, rgba(220,220,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 59%, rgba(255,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 94%, rgba(220,255,220,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 43%, rgba(255,220,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 77%, rgba(220,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 90%, rgba(255,220,220,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 55%, rgba(220,220,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 27%  3%, rgba(255,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 67%, rgba(220,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 22%, rgba(255,220,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 79%, rgba(220,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 33%, rgba(255,220,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 12%, rgba(220,220,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 62%, rgba(255,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 28%, rgba(220,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 46%, rgba(255,220,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 85%, rgba(220,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 38%, rgba(255,220,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 44%  1%, rgba(220,220,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 92%, rgba(255,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 47%, rgba(220,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 19%, rgba(255,220,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 53%, rgba(220,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 40%, rgba(255,220,220,.4) 0%, transparent 100%);
  pointer-events: none; z-index: -2;
  animation: twinkle-f 6s ease-in-out 3s infinite alternate;
}

/* ── CRT SCANLINES — above stars, below all content ── */
.crt-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.22) 2px,
    rgba(0,0,0,.22) 4px
  );
  pointer-events: none;
  z-index: -1;
  animation: scanline-drift 8s linear infinite;
}
@keyframes scanline-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 40px; }
}

.page-wrapper {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 8px;
  background: var(--dark-bg);
}

/* ---- HEADER ---- */
.site-header {
  text-align: center;
  padding: 18px 10px 12px;
  border-bottom: 3px double var(--neon-purple);
}
.header-eyebrow {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--neon-green);
  letter-spacing: 5px;
  margin-bottom: 8px;
  animation: flicker 5s infinite;
}
@keyframes flicker {
  0%,93%,95.5%,100%{opacity:1;}
  94%{opacity:.05;}
  95%{opacity:.8;}
}
.site-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(16px,3.5vw,28px);
  color: var(--neon-green);
  text-shadow: 0 0 8px var(--neon-green), 0 0 20px rgba(57,255,20,.4), 3px 3px 0 #002200;
  line-height: 1.45;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-decoration: none;
  display: block;
}
.site-subtitle {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--neon-purple);
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.header-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 4px;
}
.badge {
  font-family: 'VT323', monospace;
  font-size: 17px;
  padding: 0 10px;
  border: none;
  background: transparent;
  letter-spacing: 2px;
  opacity: 0.75;
}
/* Divider dots between badges */
.badge + .badge::before {
  content: '·';
  color: #222;
  margin-right: 10px;
  font-size: 18px;
  vertical-align: middle;
}
.badge-green  { color:var(--neon-green); }
.badge-purple { color:var(--neon-purple); }
.badge-yellow { color:var(--neon-yellow); }
.badge-cyan   { color:var(--neon-cyan); }

/* ---- MARQUEE ---- */
.marquee-bar {
  background: linear-gradient(90deg,#0a0a1a,#0d0d24,#0a0a1a);
  border-top: 1px solid var(--neon-purple);
  border-bottom: 1px solid var(--neon-purple);
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--neon-yellow);
  letter-spacing: 2px;
}
.marquee-inner { display:inline-block; animation:marquee 32s linear infinite; }
@keyframes marquee { from{transform:translateX(100vw);} to{transform:translateX(-100%);} }

/* ---- NAV ---- */
nav {
  background: linear-gradient(180deg,#100020,#08001a);
  border: 2px solid var(--neon-purple);
  border-top: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--neon-green);
  text-decoration: none;
  padding: 9px 10px;
  border-right: 1px solid rgba(191,0,255,.2);
  transition: all .15s;
  letter-spacing: .5px;
  white-space: nowrap;
}
nav a:hover, nav a.active {
  background: rgba(57,255,20,.1);
  color: #fff;
  text-shadow: 0 0 8px var(--neon-green);
}
nav a:last-child { border-right: none; }

/* ---- LAYOUT ---- */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 192px;
  gap: 14px;
  align-items: start;
}


/* ---- PANELS ---- */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--neon-purple);
  margin-bottom: 14px;
}
.panel.green  { border-top-color: var(--neon-green); }
.panel.yellow { border-top-color: var(--neon-yellow); }
.panel.cyan   { border-top-color: var(--neon-cyan); }
.panel.red    { border-top-color: var(--neon-red); }
.panel.gold   { border-top-color: #ffd700; }
.panel.orange { border-top-color: #ff9966; }

.panel-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--neon-purple);
  background: rgba(191,0,255,.07);
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.panel.green  .panel-title { color:var(--neon-green);  background:rgba(57,255,20,.05); }
.panel.yellow .panel-title { color:var(--neon-yellow); background:rgba(255,238,0,.05); }
.panel.cyan   .panel-title { color:var(--neon-cyan);   background:rgba(0,238,255,.05); }
.panel.red    .panel-title { color:var(--neon-red);    background:rgba(255,0,68,.05); }
.panel.gold   .panel-title { color:#ffd700;            background:rgba(255,215,0,.05); }
.panel.orange .panel-title { color:#ff9966;            background:rgba(255,153,102,.05); }

.panel-meta {
  font-size: 6px;
  color: #334;
  font-weight: normal;
  margin-left: auto;
}
.panel-body { padding: 14px; }

/* ---- CALLOUT BANNER (read latest comic) ---- */
.latest-callout {
  background: linear-gradient(90deg, rgba(57,255,20,.08), rgba(57,255,20,.04), rgba(57,255,20,.08));
  border: 1px solid rgba(57,255,20,.3);
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.callout-text {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--neon-green);
  letter-spacing: 1px;
  line-height: 1.3;
}
.callout-text strong { color: #fff; }

/* ---- COMIC VIEWER ---- */
.comic-display { text-align: center; }
.comic-title-strip {
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 2px;
  min-height: 28px;
}
.comic-frame {
  border: 3px solid var(--neon-green);
  box-shadow: 0 0 18px rgba(57,255,20,.2), 0 0 45px rgba(57,255,20,.06);
  display: inline-block;
  width: 100%;
  max-width: 580px;
  background: #0a0a0a;
  transition: opacity .25s;
}
.comic-frame img { width:100%; display:block; }
.comic-loading { width:100%; padding:36px 20px; text-align:center; }
.loading-icon { font-size:38px; display:block; margin-bottom:8px; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.comic-counter { font-family:'VT323',monospace; font-size:15px; color:#333; margin-top:8px; }
.comic-nav-buttons { display:flex; justify-content:center; gap:6px; margin-top:12px; flex-wrap:wrap; }

/* ---- TAGGED COMICS ROW ---- */
.tagged-comics-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.tagged-comics-row::-webkit-scrollbar { height: 4px; }
.tagged-comics-row::-webkit-scrollbar-track { background: #0a0a1a; }
.tagged-comics-row::-webkit-scrollbar-thumb { background: var(--neon-green); }
.tagged-thumb {
  flex: 0 0 160px;
  border: 1px solid var(--border);
  background: #060610;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
  text-decoration: none;
}
.tagged-thumb:hover { border-color:var(--neon-green); box-shadow:0 0 8px rgba(57,255,20,.2); }
.tagged-thumb img { width:100%; display:block; }
.tagged-thumb-placeholder { width:100%; padding-bottom:50%; background:#0a0a18; }
.tagged-thumb-label {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: #666;
  padding: 4px 6px;
  display: block;
  line-height: 1.3;
}
.no-tagged-comics {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: #333;
  padding: 12px 0;
  text-align: center;
  letter-spacing: 1px;
}

/* ---- ARCHIVE GRID ---- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
  gap: 10px;
}
.archive-thumb {
  border: 1px solid var(--border);
  background: #060610;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.archive-thumb:hover { border-color:var(--neon-green); box-shadow:0 0 8px rgba(57,255,20,.2); }
.archive-thumb img { width:100%; display:block; }
.archive-thumb-placeholder { width:100%; padding-bottom:50%; background:#0a0a18; }
.archive-label { font-family:'VT323',monospace; font-size:13px; color:#555; padding:2px 6px 4px; display:block; }
.archive-num { font-family:'Press Start 2P',monospace; font-size:5px; color:#2a2a3a; padding:4px 6px 2px; display:block; letter-spacing:1px; }
.archive-tags { padding: 0 6px 5px; display:flex; flex-wrap:wrap; gap:3px; }
.tag-chip {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  padding: 2px 4px;
  border: 1px solid;
  display: inline-block;
}

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.filter-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 5px 8px;
  border: 1px solid #333;
  color: #555;
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .5px;
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--neon-green);
  color: var(--neon-green);
  background: rgba(57,255,20,.08);
}

/* ---- BTNS ---- */
.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 7px 11px;
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all .15s;
  letter-spacing: .5px;
  background: transparent;
}
.btn:disabled { opacity:.2; cursor:default; pointer-events:none; }
.btn.green  { color:var(--neon-green);  border-color:var(--neon-green); }
.btn.green:hover  { background:rgba(57,255,20,.12);  box-shadow:0 0 10px rgba(57,255,20,.25); }
.btn.purple { color:var(--neon-purple); border-color:var(--neon-purple); }
.btn.purple:hover { background:rgba(191,0,255,.12); box-shadow:0 0 10px rgba(191,0,255,.25); }
.btn.cyan   { color:var(--neon-cyan);   border-color:var(--neon-cyan); }
.btn.cyan:hover   { background:rgba(0,238,255,.12);  box-shadow:0 0 10px rgba(0,238,255,.25); }
.btn.yellow { color:var(--neon-yellow); border-color:var(--neon-yellow); }
.btn.yellow:hover { background:rgba(255,238,0,.12);  box-shadow:0 0 10px rgba(255,238,0,.25); }

/* ---- NEWS FEED ---- */
.news-feed { list-style: none; }
.news-item { border-bottom:1px solid var(--border); padding:10px 0; }
.news-item:last-child { border-bottom:none; }
.news-item a {
  font-family: 'VT323', monospace;
  font-size: 19px;
  color: #ddd;
  text-decoration: none;
  display: block;
  line-height: 1.35;
  margin-bottom: 4px;
  transition: color .15s;
}
.news-item a:hover { color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,238,255,.4); }
.news-meta { font-family:'Press Start 2P',monospace; font-size:6px; color:#3a3a4a; letter-spacing:.5px; line-height:2; }
.news-source {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  padding: 2px 5px;
  border: 1px solid #1e1e2a;
  color: #444;
  margin-right: 5px;
}
.source-link {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--neon-cyan);
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
  letter-spacing: .5px;
}
.source-link:hover { text-decoration: underline; }

/* ---- CAST ---- */
.cast-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.cast-card {
  border: 1px solid var(--border);
  padding: 13px;
  text-align: center;
  background: rgba(255,255,255,.015);
  transition: border-color .2s;
}
.cast-card:hover { border-color:var(--neon-purple); }
.cast-card.soon { opacity:.35; border-style:dashed; }
.char-icon { font-size:36px; display:block; margin-bottom:9px; }
.char-name { font-family:'Press Start 2P',monospace; font-size:7px; color:var(--neon-green); display:block; margin-bottom:5px; line-height:1.6; }
.char-role { font-family:'VT323',monospace; font-size:14px; color:#555; display:block; margin-bottom:8px; letter-spacing:1px; text-transform:uppercase; }
.char-desc { font-family:'VT323',monospace; font-size:14px; color:#999; line-height:1.65; }

/* ---- SIDEBAR ---- */
.sidebar-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--neon-green);
  margin-bottom: 12px;
}
.sidebar-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--neon-green);
  background: rgba(57,255,20,.05);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 1px;
}
.sidebar-body { padding:10px; font-family:'VT323',monospace; font-size:15px; line-height:1.7; color:#777; }

.hit-counter { text-align:center; padding:10px; }
.counter-label { font-family:'Press Start 2P',monospace; font-size:5px; color:#2a2a3a; display:block; margin-bottom:7px; }
.counter-digits { display:inline-flex; gap:2px; }
.digit {
  font-family:'VT323',monospace; font-size:26px;
  background:#000; color:var(--neon-green);
  border:1px solid #1a1a1a; padding:2px 4px;
  text-shadow:0 0 5px var(--neon-green);
  min-width:20px; text-align:center;
}

.sidebar-links { list-style:none; padding:8px; }
.sidebar-links li { border-bottom:1px solid var(--border); padding:6px 0; }
.sidebar-links li:last-child { border-bottom:none; }
.sidebar-links a { font-family:'VT323',monospace; font-size:16px; color:var(--neon-cyan); text-decoration:none; display:block; line-height:1.3; transition:color .15s; }
.sidebar-links a:hover { color:#fff; text-shadow:0 0 6px var(--neon-cyan); }
.link-desc { font-size:12px; color:#2a2a3a; display:block; }

.blink { animation:blinker 1s step-end infinite; }
@keyframes blinker { 0%,100%{opacity:1;} 50%{opacity:0;} }
.new-badge {
  display:inline-block; font-family:'Press Start 2P',monospace; font-size:5px;
  color:#000; background:var(--neon-red); padding:2px 4px; margin-left:5px;
  vertical-align:middle; animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.under-construction { text-align:center; padding:10px; }
.construction-icon { font-size:26px; display:block; animation:wobble 2s ease-in-out infinite; }
@keyframes wobble { 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);} }
.construction-text { font-family:'Press Start 2P',monospace; font-size:6px; color:var(--neon-yellow); line-height:2; margin-top:6px; }

.webring { padding:10px; text-align:center; }
.webring-label { font-family:'Press Start 2P',monospace; font-size:6px; color:#333; display:block; margin-bottom:7px; }
.webring-box { border:1px dashed #1a1a2a; padding:7px; font-family:'VT323',monospace; font-size:13px; color:#333; line-height:1.6; }
.webring-links { display:flex; justify-content:space-between; margin-top:7px; }
.webring-links a { font-family:'Press Start 2P',monospace; font-size:6px; color:var(--neon-purple); text-decoration:none; }
.webring-links a:hover { text-decoration:underline; }

.topics-cloud { padding:10px; display:flex; flex-wrap:wrap; gap:5px; }

/* ---- FOOTER ---- */
footer {
  text-align: center;
  padding: 18px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.footer-badges { display:flex; justify-content:center; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.footer-badge {
  font-family:'Press Start 2P',monospace; font-size:5px;
  padding:4px 7px; border:1px solid #101020; color:#2a2a3a; background:#060610;
}
.footer-badge span { display:block; font-size:10px; margin-bottom:2px; }
.footer-links { display:flex; justify-content:center; gap:12px; margin:8px 0; flex-wrap:wrap; }
.footer-links a { font-family:'Press Start 2P',monospace; font-size:6px; color:#222; text-decoration:none; transition:color .15s; }
.footer-links a:hover { color:var(--neon-green); }
.copyright { font-family:'VT323',monospace; font-size:14px; color:#1a1a2a; letter-spacing:2px; margin-top:6px; }
.divider-fancy { text-align:center; font-family:'VT323',monospace; font-size:14px; color:var(--neon-green); letter-spacing:4px; margin:8px 0; opacity:.3; }

section { scroll-margin-top: 20px; }

/* ---- COMIC ZOOM LIGHTBOX ---- */
.comic-frame {
  cursor: zoom-in;
}
#zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
#zoom-overlay.open {
  display: flex;
}
#zoom-overlay img {
  max-width: 95vw;
  max-height: 93vh;
  object-fit: contain;
  box-shadow: 0 0 60px rgba(57,255,20,.15), 0 0 120px rgba(57,255,20,.05);
  border: 1px solid rgba(57,255,20,.2);
}
#zoom-close {
  position: fixed;
  top: 16px;
  right: 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--neon-green);
  background: rgba(0,0,0,.8);
  border: 1px solid var(--neon-green);
  padding: 7px 11px;
  cursor: pointer;
  letter-spacing: 1px;
  z-index: 10000;
}
#zoom-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #2a2a3a;
  letter-spacing: 2px;
  pointer-events: none;
}

/* ================================================================
   MOBILE — 640px and below
   ================================================================ */
@media (max-width: 640px) {

  /* ── Layout ── */
  .content-layout { grid-template-columns: 1fr; }
  .page-wrapper { padding: 0 6px; }
  aside { display: none; }

  /* ── Header ── */
  .header-eyebrow { font-size: 11px; letter-spacing: 2px; }
  .site-title { font-size: clamp(15px, 6vw, 22px); }
  .site-subtitle { font-size: 18px; }
  .badge { font-size: 11px; padding: 3px 7px; }
  .header-badges { gap: 5px; flex-wrap: wrap; justify-content: center; }

  /* ── Marquee ── */
  .marquee-inner { animation-duration: 18s; font-size: 11px; }

  /* ── Nav — bigger tap targets ── */
  nav a { font-size: 9px; padding: 12px 9px; }

  /* ── Panels ── */
  .panel-title { font-size: 10px; padding: 10px 12px; line-height: 1.9; }

  /* ── Buttons ── */
  .btn { font-size: 9px; padding: 11px 15px; }
  .comic-nav-buttons { gap: 8px; }

  /* ── Tag chips ── */
  .tag-chip { font-size: 8px; padding: 4px 7px; }

  /* ── Comic viewer ── */
  .comic-counter { font-size: 18px; }
  #comic-title { font-size: 13px; }
  #btn-permalink { font-size: 7px; padding: 7px 12px; }

  /* ── News feed ── */
  .news-item a { font-size: 16px; line-height: 1.5; }
  .news-meta { font-size: 8px; line-height: 2; }
  .news-source { font-size: 8px; }

  /* ── Archive grid — 2 col on mobile ── */
  .archive-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .archive-label { font-size: 13px; }
  .archive-num { font-size: 6px; }

  /* ── Cast ── */
  .cast-grid { grid-template-columns: 1fr; }
  .char-name { font-size: 9px; line-height: 1.8; }
  .char-role { font-size: 16px; }
  .char-desc { font-size: 16px; line-height: 1.7; }

  /* ── Sidebar (used in mobile panels below content) ── */
  .sidebar-body { font-size: 17px; }
  .sidebar-links a { font-size: 17px; }
  .sidebar-title { font-size: 9px; }

  /* ── Callout banner ── */
  .latest-callout { flex-direction: column; gap: 10px; text-align: center; padding: 12px; }
  .callout-text { font-size: 13px; }

  /* ── Footer ── */
  .footer-links a { font-size: 8px; }
  .copyright { font-size: 10px; }

  /* ── Visitor counter ── */
  .counter-label { font-size: 7px; }
  .digit { font-size: 28px; }

  /* ── Webring — too noisy at small size ── */
  .webring { display: none; }
}

/* ── Extra small phones (under 380px) ── */
@media (max-width: 380px) {
  nav a { font-size: 7px; padding: 11px 6px; }
  .archive-grid { grid-template-columns: 1fr; }
  .btn { font-size: 8px; padding: 10px 11px; }
  .badge { font-size: 9px; }
}