:root{
  --void:        #05070c;
  --void-warm:   #10131c;
  --amber:       #ffc978;
  --amber-hot:   #ffe4b0;
  --amber-mid:   #d59a3f;
  --amber-dim:   #a8722a;
  --amber-deep:  #7a4f16;
  --glow:        rgba(255,176,74,.14);
  --glow-soft:   rgba(255,150,60,.075);
  --scan:        rgba(0,0,0,.20);

  /* planet horizontal placement */
  --planet-x:    60%;
}

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

html,body{ height:100%; }

body{
  background:
    radial-gradient(ellipse 90% 70% at 50% 118%, var(--void-warm) 0%, #070a11 46%, var(--void) 100%);
  color: var(--amber);
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  overflow: hidden;
  min-height: 100vh;
  position: relative;
}

/* ---- fixed decorative layers ---- */
.layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* starfield container */
#stars{
  z-index: 2;
  contain: strict;
}
.star{
  position: absolute;
  width: 2px; height: 2px;
  background: var(--amber-dim);
  /* square pixels — no border-radius on purpose */
}
.star.big{ width: 3px; height: 3px; background: var(--amber-mid); }
.star.hot{
  background: var(--amber-hot);
  box-shadow: 0 0 4px var(--glow), 0 0 8px var(--glow-soft);
}
.star.twinkle{ animation: twinkle var(--d,3s) steps(3, jump-none) var(--delay,0s) infinite alternate; }
@keyframes twinkle{ from{ opacity:1; } to{ opacity:.22; } }

/* pixel-art planet */
#planet{
  z-index: 3;
  position: fixed;
  left: var(--planet-x);
  bottom: max(4rem, 7vmin);   /* keep the whole disc + halo on-screen so it never clips flat */
  width: min(68vmin, 648px);  /* wider box compensates for the disc's new transparent margin */
  height: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter:
    drop-shadow(0 0 26px var(--glow))
    drop-shadow(0 0 60px var(--glow-soft));
}

/* ---- content ---- */
main{
  position: relative;
  z-index: 4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(9vh, 13vh, 16vh) 6vw 0;
  text-align: center;
}

h1{
  font-family: "VT323", ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(4rem, 17.6vw, 15.2rem);
  line-height: .82;
  letter-spacing: clamp(.15rem, 1.6vw, 1.2rem);
  color: var(--amber-hot);
  text-shadow:
    0 0 6px var(--amber),
    0 0 22px var(--glow),
    0 0 58px var(--glow-soft);
}

/* ---- 404 page ---- */
main.error{ gap: clamp(1rem, 3vh, 1.6rem); }

.sub{
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: clamp(.7rem, 1.7vw, .95rem);
  letter-spacing: .1em;
  color: var(--amber-hot);
  text-transform: uppercase;
  max-width: 32ch;
  text-shadow:
    1px 0 0 var(--void), -1px 0 0 var(--void),
    0 1px 0 var(--void), 0 -1px 0 var(--void),
    0 0 10px rgba(5,7,12,.8);
}

/* ---- CRT overlays ---- */
.grain{
  z-index: 5;
  opacity: .05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.scanlines{
  z-index: 6;
  background: repeating-linear-gradient(
    0deg,
    var(--scan) 0px,
    var(--scan) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: flicker 5.2s steps(2, jump-none) infinite;
}
@keyframes flicker{ 0%,96%{ opacity:1; } 97%,99%{ opacity:.82; } 100%{ opacity:1; } }
.vignette{
  z-index: 7;
  background: radial-gradient(ellipse 80% 80% at 50% 46%, transparent 52%, rgba(0,0,0,.55) 100%);
}

/* ---- mobile: stack planet + wordmark at the optical centre ---- */
@media (max-width: 640px){
  :root{ --planet-x: 50%; }          /* horizontally centred */

  #planet{
    top: 30%;                        /* true centre (50%) nudged up 20% of viewport */
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  main{
    justify-content: center;         /* wordmark vertically centred... */
    padding: 0 6vw;
    transform: translateY(-20%);     /* ...then nudged up to match the planet centre */
  }

  h1{                                /* shrink so the whole word fits the viewport */
    font-size: clamp(1.9rem, 11.5vw, 6rem);
    letter-spacing: .02em;
  }
}

@media (prefers-reduced-motion: reduce){
  .star.twinkle,
  .scanlines{ animation: none !important; }
}