/* ─── pinock.io/space cosmic theme ───────────────────────────────────
   Loaded after style.css on space.html. Overrides palette + adds starfield.
*/

:root {
  --space-bg-deep:    #0a0c1f;
  --space-bg-mid:     #131638;
  --space-accent:     #5b86e5;     /* mid blue */
  --space-accent-2:   #b56dff;     /* violet */
  --space-glow:       #ffd56a;     /* warm star highlight */
  --space-text:       #e8ecf7;
  --space-text-dim:   #94a3c2;
  --space-card:       rgba(20, 24, 56, 0.72);
  --space-border:     rgba(91, 134, 229, 0.25);
  --space-border-hot: rgba(181, 109, 255, 0.55);
}

body.space-theme {
  background: radial-gradient(ellipse at top, var(--space-bg-mid) 0%, var(--space-bg-deep) 60%, #050714 100%);
  color: var(--space-text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Animated starfield ─── */
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.stars {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  opacity: 0.85;
}
/* Three layers, each is a noise-like radial-gradient pattern of "stars". */
.stars-1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px,  #fff 0, transparent 1px),
    radial-gradient(1px 1px at 40px 70px,  #fff 0, transparent 1px),
    radial-gradient(1px 1px at 90px 40px,  #d3e1ff 0, transparent 1px),
    radial-gradient(2px 2px at 130px 80px, #fff 0, transparent 1.5px),
    radial-gradient(1px 1px at 160px 120px,#a5c4ff 0, transparent 1px),
    radial-gradient(1px 1px at 200px 30px, #fff 0, transparent 1px);
  background-size: 220px 220px;
  animation: drift1 220s linear infinite;
  opacity: 0.7;
}
.stars-2 {
  background-image:
    radial-gradient(1.5px 1.5px at 50px 50px,  #ffe5a8 0, transparent 1.2px),
    radial-gradient(2px 2px at 120px 100px,    #fff 0, transparent 1.5px),
    radial-gradient(1px 1px at 180px 30px,     #d3a5ff 0, transparent 1px),
    radial-gradient(1px 1px at 250px 200px,    #fff 0, transparent 1px),
    radial-gradient(1.5px 1.5px at 300px 50px, #fff 0, transparent 1.2px);
  background-size: 360px 280px;
  animation: drift2 320s linear infinite;
  opacity: 0.5;
}
.stars-3 {
  /* Larger faint stars + the occasional big glow */
  background-image:
    radial-gradient(3px 3px at 100px 200px, rgba(255, 230, 170, 0.35) 0, transparent 3px),
    radial-gradient(2px 2px at 380px 80px,  rgba(170, 200, 255, 0.45) 0, transparent 2px),
    radial-gradient(2px 2px at 600px 300px, rgba(220, 180, 255, 0.45) 0, transparent 2px);
  background-size: 700px 500px;
  animation: drift3 480s linear infinite;
  opacity: 0.6;
}
@keyframes drift1 { from { background-position: 0 0; } to { background-position: -440px -440px; } }
@keyframes drift2 { from { background-position: 0 0; } to { background-position: 720px -560px; } }
@keyframes drift3 { from { background-position: 0 0; } to { background-position: -1400px 1000px; } }

/* Ensure content sits above starfield */
body.space-theme > header,
body.space-theme > main,
body.space-theme > section,
body.space-theme > footer {
  position: relative;
  z-index: 1;
}
/* Modals must keep position:fixed (from style.css) — explicitly preserve it
   because earlier we accidentally caught them with body > div selector. */
body.space-theme > .modal {
  position: fixed;
  z-index: 100;
}

/* ─── Topbar override ─── */
body.space-theme .topbar {
  background: linear-gradient(180deg,
    rgba(10, 12, 31, 0.95) 0%,
    rgba(10, 12, 31, 0.75) 100%);
  border-bottom: 1px solid var(--space-border);
  backdrop-filter: blur(12px);
}
body.space-theme .logo {
  color: var(--space-text);
}
body.space-theme .logo .dim {
  color: var(--space-accent);
  font-weight: 400;
  margin-left: 2px;
}

/* ─── Tab nav (icon-only) — space theme just adds glow under active ─── */
/* Base rules live in style.css; here we override the active-state shadow
   so the cosmic theme gets a violet glow underneath the pressed icon. */
body.space-theme .tab-link.active img {
  filter: drop-shadow(0 0 10px rgba(181, 109, 255, 0.55))
          drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4))
          brightness(0.96) saturate(1.05);
}
body.space-theme .tab-link:hover img {
  filter: drop-shadow(0 0 8px rgba(91, 134, 229, 0.5))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* ─── Search bar override ─── */
body.space-theme .search input {
  background: rgba(10, 12, 31, 0.75);
  border: 1px solid var(--space-border);
  color: var(--space-text);
}
body.space-theme .search input::placeholder { color: var(--space-text-dim); }
body.space-theme .search input:focus {
  border-color: var(--space-accent-2);
  box-shadow: 0 0 0 3px rgba(181, 109, 255, 0.18);
  outline: none;
}
body.space-theme .search button {
  background: linear-gradient(135deg, var(--space-accent), var(--space-accent-2));
  color: white;
}

/* ─── Sort tabs ─── */
body.space-theme .sort-tab {
  color: var(--space-text-dim);
  background: transparent;
}
body.space-theme .sort-tab.active {
  color: var(--space-text);
  background: rgba(91, 134, 229, 0.18);
}

/* ─── Action buttons override ─── */
body.space-theme .ghost {
  color: var(--space-text-dim);
  border: 1px solid var(--space-border);
  background: transparent;
}
body.space-theme .ghost:hover {
  color: var(--space-text);
  background: rgba(91, 134, 229, 0.08);
}

/* ─── Grid cards ─── */
body.space-theme .grid > * {
  background: var(--space-card);
  border: 1px solid var(--space-border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  backdrop-filter: blur(2px);
}
body.space-theme .grid > *:hover {
  transform: translateY(-2px);
  border-color: var(--space-border-hot);
  box-shadow: 0 12px 36px rgba(181, 109, 255, 0.18);
}

/* ─── Modal override ─── */
body.space-theme .modal-content {
  background: var(--space-bg-deep);
  border: 1px solid var(--space-border);
  color: var(--space-text);
}
body.space-theme .modal-content h2 { color: var(--space-text); }
body.space-theme .caption { color: var(--space-text-dim); }
body.space-theme .action {
  background: rgba(91, 134, 229, 0.16);
  border: 1px solid var(--space-border);
  color: var(--space-text);
}
body.space-theme .action:hover {
  background: rgba(91, 134, 229, 0.28);
  border-color: var(--space-border-hot);
}
body.space-theme .action.primary {
  background: linear-gradient(135deg, var(--space-accent), var(--space-accent-2));
  border: 0;
  color: white;
  box-shadow: 0 4px 18px rgba(181, 109, 255, 0.35);
}

/* ─── Footer ─── */
body.space-theme .foot {
  color: var(--space-text-dim);
  border-top: 1px solid var(--space-border);
}
body.space-theme .foot a {
  color: var(--space-accent);
}

/* ─── Top-strip Hall of Fame ─── */
body.space-theme .top-strip {
  background: linear-gradient(90deg,
    rgba(10, 12, 31, 0) 0%,
    rgba(91, 134, 229, 0.06) 50%,
    rgba(10, 12, 31, 0) 100%);
  border-bottom: 1px solid var(--space-border);
}
body.space-theme .top-arrow {
  background: rgba(10, 12, 31, 0.85);
  color: var(--space-text);
  border: 1px solid var(--space-border);
}

/* ─── Status / load more ─── */
body.space-theme .status { color: var(--space-text-dim); }
body.space-theme .load-more-btn {
  background: rgba(91, 134, 229, 0.14);
  border: 1px solid var(--space-border);
  color: var(--space-text);
}
body.space-theme .load-more-btn:hover {
  background: rgba(91, 134, 229, 0.24);
  border-color: var(--space-border-hot);
}

/* Cross-strip uses same layout as first top-strip in cosmic theme — no extra styles needed. */