/* ===== HYPERWIRED — base shared pixel-art styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Major+Mono+Display&display=swap');

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

/* every pixel-art element opts in */
.pixelated, .pixelated * {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* ===================== C1 — DEEP SPACE ===================== */
.c1-root {
  --c1-bg: #060214;
  --c1-bg-2: #0d0428;
  --c1-cyan: #5ef0ff;
  --c1-magenta: #ff3df0;
  --c1-yellow: #ffd23f;
  --c1-violet: #8a4dff;
  --c1-ink: #e8e2ff;
  font-family: 'Press Start 2P', monospace;
  color: var(--c1-ink);
  background: var(--c1-bg);
  position: relative;
  overflow: hidden;
}
.c1-root .mono { font-family: 'VT323', monospace; }

/* twinkling starfield via radial dots */
.c1-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 14%, #aef 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 72%, #fbe 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 85%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 35%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 78%, #aef 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 50%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 90%, #fff 50%, transparent 51%);
  background-size: 400px 400px;
  background-repeat: repeat;
  animation: c1-twinkle 4s steps(8) infinite;
}
@keyframes c1-twinkle {
  0%,100% { opacity: 0.85; }
  50% { opacity: 0.55; }
}

/* nebula clouds */
.c1-nebula {
  position: absolute; inset: -10%;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(138,77,255,0.55), transparent 70%),
    radial-gradient(50% 50% at 70% 60%, rgba(255,61,240,0.35), transparent 70%),
    radial-gradient(40% 30% at 50% 80%, rgba(94,240,255,0.25), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* ===================== C2 — CRT TERMINAL ===================== */
.c2-root {
  --c2-bg: #0a0f08;
  --c2-bg-2: #0f1a0c;
  --c2-green: #62ff7a;
  --c2-green-2: #2bbb3a;
  --c2-amber: #ffb53d;
  --c2-red: #ff3d3d;
  --c2-ink: #c8ffd0;
  font-family: 'VT323', monospace;
  color: var(--c2-ink);
  background: var(--c2-bg);
  position: relative;
  overflow: hidden;
}
.c2-root .display { font-family: 'Press Start 2P', monospace; }

/* CRT scanlines */
.c2-scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.35) 3px,
    rgba(0,0,0,0.35) 4px
  );
  mix-blend-mode: multiply;
  z-index: 50;
}
.c2-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(98,255,122,0.04), rgba(98,255,122,0));
  animation: c2-roll 6s linear infinite;
}
@keyframes c2-roll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
/* CRT vignette */
.c2-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.85) 100%);
  z-index: 40;
}
.c2-flicker {
  animation: c2-flick 3.2s steps(2) infinite;
}
@keyframes c2-flick {
  0%,97%,100% { opacity: 1; }
  98% { opacity: 0.85; }
  99% { opacity: 0.95; }
}

/* ===================== C3 — BOSS ENCOUNTER ===================== */
.c3-root {
  --c3-bg: #08050c;
  --c3-cyan: #00e7ff;
  --c3-magenta: #ff2bd6;
  --c3-yellow: #ffe23a;
  --c3-red: #ff3a3a;
  --c3-ink: #f4f4ff;
  font-family: 'Press Start 2P', monospace;
  color: var(--c3-ink);
  background: var(--c3-bg);
  position: relative;
  overflow: hidden;
}
.c3-root .mono { font-family: 'VT323', monospace; }

/* shared utility */
.no-select { user-select: none; -webkit-user-select: none; }

/* keyframes shared */
@keyframes hover-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse-glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
@keyframes scan-x { 0% { background-position-x: 0; } 100% { background-position-x: 16px; } }