/* ============================================
   Look Into My Realm - Dark Mode / Base Styles
   Black + Fluorescent Green (#00FF41)
   All structural styles + dark theme defaults
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-mono: 'Courier New', 'Lucida Console', monospace;
  --font-display: 'Segoe UI', system-ui, sans-serif;
  --void: #000000;
  --deep: #050a05;
  --panel: #0a0f0a;
  --border: #0d1a0d;
  --green: #00FF41;
  --green-dim: #00cc33;
  --green-glow: rgba(0, 255, 65, 0.4);
  --green-subtle: rgba(0, 255, 65, 0.08);
  --cyan: #00e5ff;
  --magenta: #ff00ff;
  --text: #b0ffb0;
  --text-dim: #4a7a4a;
  --header-bg: rgba(0, 0, 0, 0.85);
  --mobile-nav-bg: rgba(0, 0, 0, 0.95);
}

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: var(--green); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--text); text-shadow: 0 0 10px var(--green-glow); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.05em;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--green); color: var(--void); }

/* --- Black Hole Background --- */
.black-hole-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  overflow: hidden;
  background: var(--void);
}

.black-hole {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
}

.black-hole-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  background: radial-gradient(circle, #000 60%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 60px 20px rgba(0, 0, 0, 0.9),
    0 0 120px 60px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.accretion-disk {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  width: 500px; height: 500px;
  border-radius: 50%;
  z-index: 1;
}

.accretion-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 2px solid transparent;
  transform: translate(-50%, -50%);
  animation: accretion-spin linear infinite;
}

.accretion-ring:nth-child(1) {
  width: 200px; height: 200px;
  border-top-color: var(--green);
  border-right-color: rgba(0, 255, 65, 0.3);
  animation-duration: 4s;
  box-shadow: 0 0 15px var(--green-glow), inset 0 0 15px var(--green-glow);
}
.accretion-ring:nth-child(2) {
  width: 280px; height: 280px;
  border-top-color: rgba(0, 255, 65, 0.7);
  border-left-color: rgba(0, 229, 255, 0.3);
  animation-duration: 6s;
  animation-direction: reverse;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
}
.accretion-ring:nth-child(3) {
  width: 360px; height: 360px;
  border-top-color: rgba(0, 229, 255, 0.5);
  border-right-color: rgba(0, 255, 65, 0.2);
  animation-duration: 8s;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}
.accretion-ring:nth-child(4) {
  width: 440px; height: 440px;
  border-bottom-color: rgba(0, 255, 65, 0.3);
  border-left-color: rgba(0, 229, 255, 0.1);
  animation-duration: 12s;
  animation-direction: reverse;
}
.accretion-ring:nth-child(5) {
  width: 500px; height: 500px;
  border-top-color: rgba(0, 255, 65, 0.15);
  animation-duration: 16s;
}

@keyframes accretion-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.lensing-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, rgba(0, 255, 65, 0.05) 50%, transparent 70%);
  animation: lensing-pulse 4s ease-in-out infinite;
  z-index: 2;
}

@keyframes lensing-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* --- Theme-based background visibility --- */
.sun-container { display: none; }
.black-hole-container { display: block; }

/* --- Sun Container (light mode background, hidden in dark) --- */
.sun-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1510 0%, #0d0a07 40%, #050302 100%);
}

.sun {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
}

/* --- Corona Streamers --- */
.corona-streamers {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  animation: corona-slow-rotate 120s linear infinite;
}

.streamer {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px;
  height: 250px;
  background: linear-gradient(to top,
    rgba(255, 245, 230, 0.4) 0%,
    rgba(255, 220, 180, 0.25) 20%,
    rgba(255, 200, 150, 0.12) 50%,
    rgba(255, 180, 120, 0.05) 75%,
    transparent 100%
  );
  transform-origin: bottom center;
  filter: blur(3px);
  opacity: 0.7;
}

.streamer::before {
  content: '';
  position: absolute;
  top: 0; left: -8px;
  width: 20px; height: 100%;
  background: linear-gradient(to top,
    rgba(255, 240, 220, 0.15) 0%,
    rgba(255, 210, 160, 0.08) 40%,
    transparent 100%
  );
  filter: blur(6px);
}

.streamer-1 { transform: translate(-50%, -100%) rotate(0deg); height: 280px; animation: streamer-wave 8s ease-in-out infinite; }
.streamer-2 { transform: translate(-50%, -100%) rotate(45deg); height: 220px; animation: streamer-wave 10s ease-in-out infinite 1s; }
.streamer-3 { transform: translate(-50%, -100%) rotate(90deg); height: 260px; animation: streamer-wave 7s ease-in-out infinite 0.5s; }
.streamer-4 { transform: translate(-50%, -100%) rotate(135deg); height: 200px; animation: streamer-wave 9s ease-in-out infinite 2s; }
.streamer-5 { transform: translate(-50%, -100%) rotate(180deg); height: 270px; animation: streamer-wave 11s ease-in-out infinite 1.5s; }
.streamer-6 { transform: translate(-50%, -100%) rotate(225deg); height: 230px; animation: streamer-wave 8.5s ease-in-out infinite 0.8s; }
.streamer-7 { transform: translate(-50%, -100%) rotate(270deg); height: 240px; animation: streamer-wave 9.5s ease-in-out infinite 2.2s; }
.streamer-8 { transform: translate(-50%, -100%) rotate(315deg); height: 210px; animation: streamer-wave 7.5s ease-in-out infinite 1.2s; }

@keyframes streamer-wave {
  0%, 100% { opacity: 0.5; height: var(--h, 250px); }
  50% { opacity: 0.8; height: calc(var(--h, 250px) + 30px); }
}

.streamer-1 { --h: 280px; }
.streamer-2 { --h: 220px; }
.streamer-3 { --h: 260px; }
.streamer-4 { --h: 200px; }
.streamer-5 { --h: 270px; }
.streamer-6 { --h: 230px; }
.streamer-7 { --h: 240px; }
.streamer-8 { --h: 210px; }

@keyframes corona-slow-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Outer Corona (diffuse glow) --- */
.sun-corona-outer {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 250, 240, 0.15) 0%,
    rgba(255, 230, 200, 0.08) 30%,
    rgba(255, 200, 150, 0.03) 60%,
    transparent 100%
  );
  filter: blur(20px);
  animation: corona-pulse 6s ease-in-out infinite;
}

.sun-corona-inner {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px; height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 250, 0.4) 0%,
    rgba(255, 240, 220, 0.2) 50%,
    transparent 100%
  );
  filter: blur(15px);
  animation: corona-pulse 4s ease-in-out infinite 1s;
}

@keyframes corona-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* --- Chromosphere --- */
.sun-chromosphere {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px; height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(255, 80, 50, 0.5);
  box-shadow:
    0 0 8px 2px rgba(255, 100, 70, 0.4),
    inset 0 0 15px 5px rgba(255, 60, 40, 0.2);
  filter: blur(1px);
  z-index: 5;
}

/* --- Photosphere --- */
.sun-photosphere {
  position: absolute;
  top: 50%; left: 50%;
  width: 170px; height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    #fffef8 0%,
    #fff8e8 15%,
    #ffe8b0 35%,
    #ffd070 55%,
    #ffb830 75%,
    #ff9500 100%
  );
  box-shadow:
    0 0 60px 20px rgba(255, 230, 150, 0.9),
    0 0 120px 60px rgba(255, 180, 80, 0.5),
    0 0 200px 100px rgba(255, 130, 30, 0.3),
    0 0 300px 150px rgba(255, 100, 0, 0.15);
  z-index: 6;
  overflow: hidden;
}

/* Granulation layers */
.granulation-layer {
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  background-image:
    radial-gradient(ellipse 8px 8px at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 70%),
    radial-gradient(ellipse 6px 6px at 50% 20%, rgba(255,255,255,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 10px 8px at 70% 60%, rgba(255,255,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 7px 9px at 30% 70%, rgba(255,255,255,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 9px 7px at 80% 25%, rgba(255,255,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 5px 6px at 15% 55%, rgba(255,255,255,0.3) 0%, transparent 70%),
    radial-gradient(ellipse 8px 10px at 60% 80%, rgba(255,255,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 6px 5px at 45% 45%, rgba(255,255,255,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 7px 8px at 85% 75%, rgba(255,255,255,0.2) 0%, transparent 70%);
  animation: granulation-move 15s linear infinite;
  opacity: 0.9;
}

.granulation-layer-2 {
  animation: granulation-move-reverse 20s linear infinite;
  opacity: 0.7;
  background-image:
    radial-gradient(ellipse 9px 7px at 25% 25%, rgba(255,255,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 7px 8px at 55% 35%, rgba(255,255,255,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 6px 9px at 75% 55%, rgba(255,255,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 8px 6px at 35% 65%, rgba(255,255,255,0.3) 0%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 65% 20%, rgba(255,255,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 10px 8px at 20% 80%, rgba(255,255,255,0.25) 0%, transparent 70%);
}

@keyframes granulation-move {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(10px, 10px) rotate(360deg); }
}

@keyframes granulation-move-reverse {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-8px, 8px) rotate(-360deg); }
}

/* --- Limb Darkening --- */
.sun-limb-darkening {
  position: absolute;
  top: 50%; left: 50%;
  width: 170px; height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    transparent 0%,
    transparent 50%,
    rgba(200, 100, 30, 0.15) 70%,
    rgba(180, 80, 20, 0.3) 85%,
    rgba(150, 60, 10, 0.45) 100%
  );
  z-index: 7;
  pointer-events: none;
}

/* --- Surface Turbulence --- */
.surface-turbulence {
  position: absolute;
  top: 50%; left: 50%;
  width: 170px; height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg at 30% 30%, transparent 0deg, rgba(255,255,255,0.1) 30deg, transparent 60deg),
    conic-gradient(from 120deg at 70% 40%, transparent 0deg, rgba(255,255,255,0.08) 40deg, transparent 80deg),
    conic-gradient(from 240deg at 50% 70%, transparent 0deg, rgba(255,255,255,0.12) 25deg, transparent 50deg);
  animation: turbulence-swirl 25s linear infinite;
  z-index: 8;
  overflow: hidden;
  opacity: 0.6;
}

@keyframes turbulence-swirl {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Sunspots --- */
.sunspot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(80, 40, 10, 0.7) 0%,
    rgba(120, 70, 30, 0.5) 40%,
    rgba(180, 100, 40, 0.2) 70%,
    transparent 100%
  );
  z-index: 9;
  animation: sunspot-drift 60s linear infinite;
}

.sunspot-1 {
  top: 46%; left: 42%;
  width: 18px; height: 16px;
  transform: translate(-50%, -50%);
}

.sunspot-2 {
  top: 55%; left: 58%;
  width: 12px; height: 10px;
  transform: translate(-50%, -50%);
  animation-delay: -20s;
}

@keyframes sunspot-drift {
  0% { transform: translate(-50%, -50%) translateX(0); opacity: 0.7; }
  25% { opacity: 0.9; }
  50% { transform: translate(-50%, -50%) translateX(15px); opacity: 0.8; }
  75% { opacity: 0.6; }
  100% { transform: translate(-50%, -50%) translateX(0); opacity: 0.7; }
}

/* --- Prominences --- */
.prominence {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  z-index: 4;
}

.prominence-arc {
  width: 50px;
  height: 80px;
  border: 3px solid transparent;
  border-top-color: rgba(255, 120, 60, 0.8);
  border-left-color: rgba(255, 80, 40, 0.6);
  border-right-color: rgba(255, 100, 50, 0.4);
  border-radius: 50%;
  filter: blur(2px);
  box-shadow:
    0 0 10px 2px rgba(255, 100, 50, 0.4),
    inset 0 0 8px rgba(255, 80, 40, 0.3);
}

.prominence-1 {
  transform: translate(-120%, -60%) rotate(-30deg);
  animation: prominence-loop-1 12s ease-in-out infinite;
}
.prominence-1 .prominence-arc { width: 60px; height: 90px; }

.prominence-2 {
  transform: translate(80%, -70%) rotate(20deg);
  animation: prominence-loop-2 15s ease-in-out infinite 4s;
}
.prominence-2 .prominence-arc { width: 45px; height: 70px; }

.prominence-3 {
  transform: translate(-30%, 80%) rotate(160deg);
  animation: prominence-loop-3 10s ease-in-out infinite 2s;
}
.prominence-3 .prominence-arc { width: 55px; height: 85px; }

@keyframes prominence-loop-1 {
  0%, 100% { opacity: 0; transform: translate(-120%, -60%) rotate(-30deg) scale(0.3); }
  10% { opacity: 0.9; }
  30% { transform: translate(-110%, -90%) rotate(-25deg) scale(1); opacity: 1; }
  60% { transform: translate(-105%, -100%) rotate(-20deg) scale(1.1); opacity: 0.8; }
  80% { opacity: 0.4; }
}

@keyframes prominence-loop-2 {
  0%, 100% { opacity: 0; transform: translate(80%, -70%) rotate(20deg) scale(0.3); }
  15% { opacity: 0.8; }
  35% { transform: translate(70%, -95%) rotate(15deg) scale(1); opacity: 1; }
  55% { transform: translate(65%, -105%) rotate(10deg) scale(1.05); opacity: 0.7; }
  75% { opacity: 0.3; }
}

@keyframes prominence-loop-3 {
  0%, 100% { opacity: 0; transform: translate(-30%, 80%) rotate(160deg) scale(0.4); }
  20% { opacity: 0.85; }
  40% { transform: translate(-35%, 100%) rotate(155deg) scale(1); opacity: 1; }
  65% { transform: translate(-40%, 110%) rotate(150deg) scale(1.08); opacity: 0.6; }
  85% { opacity: 0.2; }
}

/* --- Spicules Ring --- */
.spicules-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 185px; height: 185px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  z-index: 4;
  overflow: visible;
}

.spicules-ring::before,
.spicules-ring::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(255, 100, 60, 0.4) 2deg, transparent 4deg,
      transparent 10deg, rgba(255, 120, 70, 0.3) 12deg, transparent 14deg,
      transparent 25deg, rgba(255, 90, 50, 0.35) 27deg, transparent 29deg,
      transparent 40deg, rgba(255, 110, 65, 0.3) 42deg, transparent 44deg,
      transparent 55deg, rgba(255, 95, 55, 0.4) 57deg, transparent 59deg,
      transparent 70deg, rgba(255, 105, 60, 0.3) 72deg, transparent 74deg,
      transparent 85deg, rgba(255, 115, 70, 0.35) 87deg, transparent 89deg,
      transparent 100deg, rgba(255, 100, 55, 0.3) 102deg, transparent 104deg,
      transparent 115deg, rgba(255, 90, 50, 0.4) 117deg, transparent 119deg,
      transparent 130deg, rgba(255, 110, 65, 0.35) 132deg, transparent 134deg,
      transparent 145deg, rgba(255, 100, 60, 0.3) 147deg, transparent 149deg,
      transparent 160deg, rgba(255, 120, 70, 0.4) 162deg, transparent 164deg,
      transparent 175deg, rgba(255, 95, 55, 0.3) 177deg, transparent 179deg,
      transparent 190deg, rgba(255, 105, 60, 0.35) 192deg, transparent 194deg,
      transparent 205deg, rgba(255, 115, 68, 0.3) 207deg, transparent 209deg,
      transparent 220deg, rgba(255, 98, 58, 0.4) 222deg, transparent 224deg,
      transparent 235deg, rgba(255, 108, 62, 0.3) 237deg, transparent 239deg,
      transparent 250deg, rgba(255, 118, 72, 0.35) 252deg, transparent 254deg,
      transparent 265deg, rgba(255, 92, 52, 0.3) 267deg, transparent 269deg,
      transparent 280deg, rgba(255, 102, 58, 0.4) 282deg, transparent 284deg,
      transparent 295deg, rgba(255, 112, 66, 0.35) 297deg, transparent 299deg,
      transparent 310deg, rgba(255, 96, 56, 0.3) 312deg, transparent 314deg,
      transparent 325deg, rgba(255, 106, 62, 0.4) 327deg, transparent 329deg,
      transparent 340deg, rgba(255, 116, 70, 0.3) 342deg, transparent 344deg,
      transparent 355deg, rgba(255, 100, 58, 0.35) 357deg, transparent 360deg
    );
  filter: blur(1px);
  animation: spicules-flicker 3s ease-in-out infinite;
}

.spicules-ring::after {
  animation: spicules-flicker 3.5s ease-in-out infinite 1.5s;
  transform: rotate(5deg) scale(1.02);
}

@keyframes spicules-flicker {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  25% { opacity: 0.9; transform: scale(1.015); }
  50% { opacity: 0.7; transform: scale(1.01); }
  75% { opacity: 0.85; transform: scale(1.02); }
}

/* --- Solar Eruptions --- */
.solar-eruption {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 120px;
  background: linear-gradient(to top,
    rgba(255, 200, 100, 0.9) 0%,
    rgba(255, 150, 60, 0.7) 20%,
    rgba(255, 100, 40, 0.5) 50%,
    rgba(255, 80, 30, 0.2) 80%,
    transparent 100%
  );
  transform-origin: bottom center;
  border-radius: 40% 40% 0 0;
  filter: blur(4px);
  z-index: 3;
  opacity: 0;
}

.eruption-1 {
  transform: translate(-50%, -100%) rotate(-15deg) translateY(-85px);
  animation: eruption-burst 8s ease-out infinite;
}

.eruption-2 {
  transform: translate(-50%, -100%) rotate(140deg) translateY(-85px);
  animation: eruption-burst 10s ease-out infinite 5s;
}

@keyframes eruption-burst {
  0% { opacity: 0; height: 30px; filter: blur(2px); }
  5% { opacity: 0.9; height: 80px; }
  15% { opacity: 1; height: 150px; filter: blur(5px); }
  30% { opacity: 0.8; height: 200px; filter: blur(8px); }
  50% { opacity: 0.4; height: 180px; filter: blur(12px); }
  100% { opacity: 0; height: 100px; filter: blur(15px); }
}

.sun-prominence-1 { --rot: 15deg; }
.sun-prominence-2 { --rot: 135deg; }
.sun-prominence-3 { --rot: 255deg; }

/* --- Star Field --- */
.star-field {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: star-twinkle ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* --- Scanlines Overlay --- */
.scanlines {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.015) 2px,
    rgba(0, 255, 65, 0.015) 4px
  );
}

/* --- Header / Navigation --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-left: auto;
  flex: 1;
}

.site-logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 0 20px var(--green-glow);
  white-space: nowrap;
}

.site-logo .logo-sub {
  font-size: 0.55em;
  color: var(--text-dim);
  display: block;
  letter-spacing: 0.3em;
  text-shadow: none;
}

.site-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.site-nav a {
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-nav a:hover, .site-nav a.active {
  color: var(--green);
  border-color: var(--border);
  background: var(--green-subtle);
  text-shadow: 0 0 8px var(--green-glow);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--green);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 15px var(--green-glow);
}

.theme-icon {
  width: 18px;
  height: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}

.theme-icon-sun { display: block; }

[data-theme='dark'] .theme-icon-sun { display: block; }
[data-theme='dark'] .theme-icon-moon { display: none; }

/* --- Main Content --- */
.site-content {
  padding-top: 96px;
  padding-bottom: 4rem;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Hero Section --- */
.hero {
  text-align: center;
  padding: 6rem 1rem 4rem;
}

.hero-title {
  font-size: 3.5rem;
  color: var(--green);
  text-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(0, 255, 65, 0.2);
  margin-bottom: 0.5rem;
  animation: hero-glow 3s ease-in-out infinite;
}

.hero-tagline {
  font-size: 1.1rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gaming-mission-text {
  font-size: 1.6rem;
  color: var(--green);
  text-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(0, 255, 65, 0.2);
  text-align: center;
  letter-spacing: 0.08em;
  margin: 1rem 0 2rem;
  animation: gaming-mission-fade 5s ease-in-out infinite;
}

@keyframes gaming-mission-fade {
  0%, 100% { opacity: 1; text-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(0,255,65,0.2); }
  50%       { opacity: 0.15; text-shadow: none; }
}

@keyframes hero-glow {
  0%, 100% { text-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(0, 255, 65, 0.2); }
  50% { text-shadow: 0 0 60px var(--green-glow), 0 0 120px rgba(0, 255, 65, 0.3), 0 0 160px rgba(0, 255, 65, 0.1); }
}

/* --- Glitch Text --- */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}

.glitch::before {
  color: var(--cyan);
  z-index: -1;
  animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch::after {
  color: var(--magenta);
  z-index: -2;
  animation: glitch-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
  0%, 95% { clip-path: inset(0); transform: translate(0); }
  96% { clip-path: inset(40% 0 20% 0); transform: translate(-3px, 1px); }
  97% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
  98% { clip-path: inset(70% 0 5% 0); transform: translate(-1px, 2px); }
  99% { clip-path: inset(20% 0 40% 0); transform: translate(3px, -2px); }
}

@keyframes glitch-2 {
  0%, 95% { clip-path: inset(0); transform: translate(0); }
  96% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
  97% { clip-path: inset(5% 0 70% 0); transform: translate(-3px, 2px); }
  98% { clip-path: inset(30% 0 30% 0); transform: translate(1px, -2px); }
  99% { clip-path: inset(50% 0 20% 0); transform: translate(-2px, 1px); }
}

/* --- Cards & Panels --- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: rgba(0, 255, 65, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.card-header svg {
  width: 24px; height: 24px;
  fill: var(--green);
  flex-shrink: 0;
}

.card-title {
  font-size: 1.2rem;
  color: var(--green);
}

/* --- Post List --- */
.post-list { list-style: none; }

.post-item {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.post-item:hover { padding-left: 0.5rem; }

.post-date {
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
  padding-top: 0.2rem;
  min-width: 90px;
}

.post-info { flex: 1; }

.post-item-title {
  font-size: 1.15rem;
  color: var(--green);
  margin-bottom: 0.3rem;
}

.post-item-title a { color: inherit; }
.post-item-title a:hover { color: #fff; }

.post-excerpt {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.post-categories {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.category-tag {
  font-size: 0.7rem;
  color: var(--green-dim);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Single Post --- */
.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.post-title {
  font-size: 2.5rem;
  color: var(--green);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.post-meta {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* --- Steam Review Info Block --- */
.steam-review-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  background: var(--green-subtle);
  border-radius: 4px;
  font-size: 0.85rem;
}

.steam-review-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.steam-review-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.steam-review-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.steam-rating-recommended { color: var(--green); }
.steam-rating-not-recommended { color: var(--magenta); }

.steam-review-link {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--green-dim);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  transition: color 0.2s, border-color 0.2s;
}

.steam-review-link:hover {
  color: var(--green);
  border-color: var(--green-dim);
}

/* --- Post Body --- */
.post-body {
  font-size: 1rem;
  line-height: 1.8;
}

.post-body h2 {
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.post-body h3 {
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
}

.post-body p { margin-bottom: 1.2rem; }

.post-body ul, .post-body ol {
  margin: 1rem 0 1.2rem 1.5rem;
}

.post-body li { margin-bottom: 0.4rem; }

.post-body blockquote {
  border-left: 3px solid var(--green);
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: var(--green-subtle);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--text);
}

.post-body code {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--green);
}

.post-body pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.2rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.post-body pre code {
  border: none;
  padding: 0;
  background: none;
}

.post-body img {
  border-radius: 6px;
  border: 1px solid var(--border);
  margin: 1rem 0;
}

.post-body a { border-bottom: 1px solid var(--green-dim); }
.post-body a:hover { border-bottom-color: var(--green); }

/* --- Post Navigation --- */
.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  gap: 1rem;
}

/* --- Read Next Post --- */
.read-next-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.read-next-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.4rem;
  background: var(--green-subtle);
  border: 1px solid var(--green-dim);
  border-radius: 8px;
  color: var(--green);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: all 0.25s ease;
  max-width: 60%;
}

.read-next-btn:hover {
  background: rgba(0, 255, 65, 0.14);
  border-color: var(--green);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.18);
  color: var(--green);
  transform: translateX(3px);
}

.read-next-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.read-next-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.read-next-arrow {
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.read-next-btn:hover .read-next-arrow { transform: translateX(4px); }

.post-nav a {
  color: var(--text-dim);
  font-size: 0.85rem;
  max-width: 45%;
}

.post-nav a:hover { color: var(--green); }

.post-nav .nav-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-dim);
}

/* --- Grid Layouts --- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Stats Panel --- */
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0, 255, 65, 0.05);
}

.stat-label { color: var(--text-dim); }
.stat-value { color: var(--green); font-weight: bold; }

/* --- Gaming Hub --- */
.game-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 255, 65, 0.4);
  box-shadow: 0 8px 30px rgba(0, 255, 65, 0.08);
}

.game-card--perfect {
  border-color: rgba(255, 204, 0, 0.45);
  box-shadow: 0 0 18px rgba(255, 204, 0, 0.12);
}

.game-card--perfect:hover {
  border-color: rgba(255, 204, 0, 0.75);
  box-shadow: 0 8px 30px rgba(255, 204, 0, 0.22);
}

/* --- Library Page --- */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.lib-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lib-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 255, 65, 0.1);
  border-color: rgba(0, 255, 65, 0.35);
}

.lib-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: #111;
}

.lib-info {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.lib-title {
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--green);
  margin: 0;
  line-height: 1.3;
}

.lib-stat {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0;
}

.lib-nodata {
  opacity: 0.5;
  font-style: italic;
}

.lib-link {
  font-size: 0.72rem;
  color: var(--cyan);
  margin-top: auto;
  padding-top: 0.5rem;
  text-decoration: none;
}

.lib-link:hover { text-decoration: underline; }

.game-card-title {
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 0.3rem;
}

.game-card-genre {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.game-card-hours {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--cyan);
}

.game-card .badge-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.badge {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-gold { background: rgba(255, 215, 0, 0.15); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.3); }
.badge-green { background: var(--green-subtle); color: var(--green); border: 1px solid var(--border); }

/* --- Profile Banner --- */
.profile-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 2rem;
}

.profile-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid var(--green);
  box-shadow: 0 0 20px var(--green-glow);
  flex-shrink: 0;
  background: #000000;
}

.profile-info h2 {
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
}

.profile-status {
  color: var(--green);
  font-size: 0.85rem;
}

.profile-status::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 0.5rem;
  box-shadow: 0 0 6px var(--green-glow);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Category Filter --- */
.category-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.category-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.category-btn:hover, .category-btn.active {
  color: var(--green);
  border-color: var(--green-dim);
  background: var(--green-subtle);
}

/* --- AI Games --- */
.game-embed {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--void);
}

.game-canvas-wrapper {
  position: relative;
  width: 100%;
  background: var(--void);
}

.game-canvas-wrapper canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

.game-controls {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--panel);
  border-top: 1px solid var(--border);
  justify-content: center;
  flex-wrap: wrap;
}

.game-btn {
  background: var(--green-subtle);
  border: 1px solid var(--green-dim);
  color: var(--green);
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.game-btn:hover {
  background: rgba(0, 255, 65, 0.15);
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.footer-links a {
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-links a:hover { color: var(--green); }

.footer-links svg {
  width: 18px; height: 18px;
  fill: currentColor;
}

/* --- Matrix Rain Easter Egg --- */
.matrix-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.matrix-canvas.active {
  opacity: 1;
  pointer-events: all;
}

/* --- Section Headers --- */
.section-header { margin-bottom: 2rem; }

.section-title {
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
}

.section-subtitle {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.section-divider {
  width: 60px;
  height: 2px;
  background: var(--green);
  margin-top: 0.75rem;
  box-shadow: 0 0 10px var(--green-glow);
}

/* --- SVG Icons --- */
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }

/* --- About Page --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.about-links {
  list-style: none;
  padding: 0;
}

.about-links li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 255, 65, 0.05);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.about-links li svg {
  width: 18px; height: 18px;
  fill: var(--green);
  flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .site-header { padding: 0 1rem; }

  .site-nav {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--mobile-nav-bg);
    flex-direction: column;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .site-nav.open { display: flex; }

  .nav-toggle { display: block; }

  .hero-title { font-size: 2rem; }

  .post-item { flex-direction: column; gap: 0.5rem; }
  .post-date { min-width: auto; }

  .profile-banner { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }

  .post-title { font-size: 1.8rem; }

  .black-hole { width: 300px; height: 300px; }
  .accretion-ring:nth-child(1) { width: 100px; height: 100px; }
  .accretion-ring:nth-child(2) { width: 140px; height: 140px; }
  .accretion-ring:nth-child(3) { width: 180px; height: 180px; }
  .accretion-ring:nth-child(4) { width: 220px; height: 220px; }
  .accretion-ring:nth-child(5) { width: 260px; height: 260px; }
  .lensing-glow { width: 100px; height: 100px; }

  .sun { width: 350px; height: 350px; }
  .sun-photosphere { width: 85px; height: 85px; }
  .sun-limb-darkening { width: 85px; height: 85px; }
  .surface-turbulence { width: 85px; height: 85px; }
  .sun-chromosphere { width: 92px; height: 92px; }
  .spicules-ring { width: 95px; height: 95px; }
  .sun-corona-inner { width: 150px; height: 150px; }
  .sun-corona-outer { width: 250px; height: 250px; }
  .streamer { height: 120px; }
  .streamer-1, .streamer-3, .streamer-5, .streamer-7 { height: 140px; }
  .prominence-arc { width: 25px; height: 40px; }
  .prominence-1 .prominence-arc { width: 30px; height: 45px; }
  .prominence-2 .prominence-arc { width: 22px; height: 35px; }
  .prominence-3 .prominence-arc { width: 28px; height: 42px; }
  .solar-eruption { height: 60px; }
  .sunspot-1 { width: 9px; height: 8px; }
  .sunspot-2 { width: 6px; height: 5px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.6rem; }
  .hero-tagline { font-size: 0.85rem; }
  .site-logo { font-size: 1.1rem; }
  .container { padding: 0 1rem; }
}

@media (max-width: 600px) {
  .read-next-btn { max-width: 100%; }
}

/* --- Parallax Page Styles --- */
.parallax-page {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 300%;
  z-index: -2;
  background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1920&q=80');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  animation: parallax-scroll 60s linear infinite;
}

@keyframes parallax-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-66.67%); }
}

.parallax-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.parallax-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 90%;
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1rem;
}

.parallax-container {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 255, 65, 0.2);
  max-width: 900px;
  margin: 0 auto;
}

.parallax-post {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 255, 65, 0.15);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.parallax-post:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 255, 65, 0.4);
  transform: translateX(8px);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
}

/* Hide default backgrounds on parallax page */
.parallax-page ~ .black-hole-container,
body:has(.parallax-page) .black-hole-container,
body:has(.parallax-page) .sun-container {
  display: none;
}

@media (max-width: 768px) {
  .parallax-content { width: 95%; max-height: 75vh; padding: 0.5rem; }
  .parallax-container { margin: 0; padding: 1rem; }
  .parallax-post { padding: 1rem; }
}

/* ============================================
   Random Read Page
   Full-screen parallax reading experience
   ============================================ */

.rr-page {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  z-index: 999;
  --rr-green:       #00FF41;
  --rr-green-dim:   #00cc33;
  --rr-green-glow:  rgba(0, 255, 65, 0.45);
  --rr-text:        #b0ffb0;
  --rr-text-dim:    #4a7a4a;
  --rr-panel:       rgba(0, 0, 0, 0.72);
  --rr-border:      rgba(0, 255, 65, 0.30);
}

.rr-bg {
  position: absolute;
  inset: 0;
  height: 250%;
  width: 100%;
  background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1920&q=80');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: brightness(0.85) saturate(1.1);
  z-index: 0;
  animation: rr-bg-drift 90s linear infinite;
  transform-origin: top center;
}

@keyframes rr-bg-drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-60%); }
}

.rr-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  pointer-events: none;
}

.rr-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 70vw;
  height: 70vh;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 5, 0, 0.80);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--rr-border);
  border-radius: 10px;
  transition: background 0.6s ease;
  box-shadow:
    0 0 0 1px rgba(0, 255, 65, 0.08),
    0 0 40px rgba(0, 255, 65, 0.12),
    0 0 80px rgba(0, 255, 65, 0.06),
    inset 0 0 60px rgba(0, 0, 0, 0.40);
}

.rr-window-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rr-border);
  background: rgba(0, 20, 0, 0.50);
  border-radius: 10px 10px 0 0;
}

.rr-header-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid rgba(0, 255, 65, 0.10);
}

.rr-header-title-bar {
  padding: 0.6rem 1.25rem 0.75rem;
}

.rr-header-title {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    0 0  6px rgba(0, 255, 65, 0.90),
    0 0 14px rgba(0, 255, 65, 0.60),
    0 0 28px rgba(0, 255, 65, 0.25);
  letter-spacing: 0.03em;
  line-height: 1.3;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: text-shadow 0.6s ease, color 0.6s ease;
}

.rr-header-title.glowing {
  color: #ffffff;
  text-shadow:
    0 0  4px #ffffff,
    0 0  8px rgba(0, 255, 65, 1.00),
    0 0 18px rgba(0, 255, 65, 0.90),
    0 0 35px rgba(0, 255, 65, 0.65),
    0 0 60px rgba(0, 255, 65, 0.35);
}

.rr-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--rr-green);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--rr-green-glow);
  white-space: nowrap;
}

.rr-meta {
  flex: 1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  overflow: hidden;
}

.rr-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--rr-text-dim);
  white-space: nowrap;
}

.rr-categories {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--rr-green-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-full-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--rr-green);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(0, 255, 65, 0.25);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  transition: all 0.25s ease;
}

.rr-full-link:hover {
  background: rgba(0, 255, 65, 0.12);
  border-color: var(--rr-green);
  box-shadow: 0 0 12px var(--rr-green-glow);
}

.rr-content-mask {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.rr-content {
  height: 100%;
  overflow-y: scroll;
  padding: 1.5rem 1.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rr-content::-webkit-scrollbar { display: none; }

.rr-title {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--rr-green);
  text-shadow: 0 0 18px var(--rr-green-glow), 0 0 35px rgba(0, 255, 65, 0.20);
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(0, 255, 65, 0.18);
  line-height: 1.3;
}

.rr-body {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--rr-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.rr-end-spacer { height: 60%; }

.rr-window-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  border-top: 1px solid var(--rr-border);
  background: rgba(0, 20, 0, 0.50);
  border-radius: 0 0 10px 10px;
}

.rr-scroll-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--rr-text-dim);
  animation: rr-pulse 2.5s ease-in-out infinite;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.rr-scroll-hint.counting {
  color: #ffffff;
  animation: none;
  opacity: 1;
  text-shadow:
    0 0  6px rgba(0, 255, 65, 0.90),
    0 0 14px rgba(0, 255, 65, 0.60),
    0 0 28px rgba(0, 255, 65, 0.25);
}

@keyframes rr-pulse {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1.00; }
}

.rr-shuffle {
  font-family: var(--font-mono);
  font-size: 0.80rem;
  color: var(--rr-green);
  background: rgba(0, 255, 65, 0.08);
  border: 1px solid rgba(0, 255, 65, 0.28);
  border-radius: 5px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.rr-shuffle:hover {
  background: rgba(0, 255, 65, 0.18);
  border-color: var(--rr-green);
  box-shadow: 0 0 14px var(--rr-green-glow);
}

/* Hide default site backgrounds on Random Read page */
body:has(.rr-page) .black-hole-container,
body:has(.rr-page) .sun-container,
body:has(.rr-page) .scanlines {
  display: none;
}

@media (max-width: 900px) {
  .rr-window { width: 90vw; height: 78vh; }
}

@media (max-width: 600px) {
  .rr-window { width: 96vw; height: 80vh; }
  .rr-title { font-size: 1.1rem; }
  .rr-body  { font-size: 0.84rem; }
  .rr-header-top { flex-wrap: wrap; gap: 0.5rem; }
  .rr-header-title { font-size: 1.05rem; }
  .rr-full-link { display: none; }
}