/* GRAPHICS — Space Station: starfield, HUD panels, orbiting planet */
.theme-space {
  --theme-bg: #03030c;
  --theme-ink: #dff9ff;
  --theme-panel: rgba(6, 18, 40, .82);
  --theme-panel-ink: #dff9ff;
  --theme-accent: #00e5ff;
  --theme-accent-2: #ff3df2;
  --theme-border: #00e5ff;
  --theme-heading-font: 'Orbitron', sans-serif;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255,61,242,.18), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,229,255,.15), transparent 50%),
    #03030c;
  background-attachment: fixed;
}
.theme-space .page-hero h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 6.5vw, 4.2rem); color: #fff; text-shadow: 0 0 18px #00e5ff, 0 0 40px #00e5ff; }
.theme-space .page-hero__kicker { font-family: 'Orbitron', sans-serif; }

/* HUD panels with corner brackets */
.theme-space .panel,
.theme-space .card {
  border-width: 2px; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,229,255,.3), 0 0 22px rgba(0,229,255,.25), inset 0 0 30px rgba(0,229,255,.08);
  backdrop-filter: blur(4px);
  position: relative;
}
.theme-space .panel h2 { font-size: clamp(1.2rem, 3vw, 1.7rem); text-transform: uppercase; letter-spacing: .08em; color: #00e5ff; }
.theme-space .card__title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; }
.theme-space .price-list em { color: #ff3df2; }
.theme-space .card__art--soon { --soon-bg: radial-gradient(circle at 50% 50%, #3b1a6b, #03030c); }
.theme-space .card__art--soon span { font-family: 'Orbitron', sans-serif; }
.theme-space .steps li { border-color: rgba(0,229,255,.6); border-width: 2px; }
.theme-space .btn-pop { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: .1em; }

/* Starfield layers */
.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stars i { position: absolute; inset: -100% 0 0; background-repeat: repeat; animation: star-scroll linear infinite; }
.stars i:nth-child(1) { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #fff, transparent), radial-gradient(1px 1px at 70px 150px, #cff, transparent); background-size: 180px 180px; animation-duration: 120s; opacity: .6; }
.stars i:nth-child(2) { background-image: radial-gradient(2px 2px at 40px 60px, #fff, transparent), radial-gradient(2px 2px at 210px 170px, #ffd6fb, transparent); background-size: 260px 260px; animation-duration: 70s; }
.stars i:nth-child(3) { background-image: radial-gradient(3px 3px at 100px 120px, #aef, transparent); background-size: 400px 400px; animation-duration: 40s; }
@keyframes star-scroll { to { transform: translateY(50%); } }

.planet {
  position: fixed; right: -80px; bottom: -80px; width: 320px; height: 320px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffb36b, #ff3df2 45%, #3b0a5c 75%);
  box-shadow: 0 0 80px rgba(255,61,242,.5);
}
.planet::after {
  content: ''; position: absolute; left: -30%; top: 42%; width: 160%; height: 16%;
  border: 6px solid rgba(0,229,255,.6); border-radius: 50%; transform: rotate(-18deg);
}
.radar {
  position: fixed; left: 18px; bottom: 18px; width: 110px; height: 110px; z-index: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(0,229,255,.6);
  background: conic-gradient(from 0deg, rgba(0,229,255,.5), transparent 25%), repeating-radial-gradient(circle, transparent 0 18px, rgba(0,229,255,.25) 19px 20px);
  animation: gear-spin-space 4s linear infinite;
}
@keyframes gear-spin-space { to { transform: rotate(360deg); } }

.theme-space .floaty { position: absolute; animation: space-drift linear infinite; opacity: .7; }
@keyframes space-drift { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(-60px, 40px) rotate(360deg); } }

/* --- Collage layer: chrome + holographic Y2K stationery --- */
.theme-space {
  --paper-1: #e8f4ff; --paper-2: #f3e4ff; --paper-3: #dcfff4;
  --ink: #0a0a2a; --tape-1: rgba(0, 229, 255, .55); --tape-2: rgba(255, 61, 242, .5);
  --theme-accent-strong: #5b2a86;
}
.theme-space .panel.torn h2 { color: #5b2a86; text-shadow: 2px 2px 0 #00e5ff; }
.theme-space .price-list li { --tag-bg: #0a0a2a; color: #dff9ff; }
.theme-space .price-list li em { border-color: rgba(0,229,255,.6); }
.theme-space .steps li { border: 0; }