/* =========================================
       GLOBAL COLOURS + FONTS
       ========================================= */
    :root {
      --bg-colour: #050016;
      --text-colour: #f7e9ff;

      /* Ultra-retro “Win95 silver” palette (no gradients) */
      --silver-face: #c0c0c0;   /* classic window face */
      --silver-lite: #ffffff;   /* highlight edge */
      --silver-mid:  #dfdfdf;   /* inner highlight */
      --silver-dark: #808080;   /* shadow edge */
      --silver-deep: #404040;   /* deep shadow */
      --ink: #000000;

      /* Accent colours for maximalist text bits */
      --acid-green: #39ff14;

      --font: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
      --mono: "Courier New", Courier, monospace;
    }

    html, body {
      height: 100%;
      margin: 0;
      background: var(--bg-colour);
      color: var(--text-colour);
      font-family: var(--font);
      overflow-x: hidden;
    }

    /* =========================================
       WIN95-STYLE BEVELLED “SILVER” FRAMES
       (NO gradients — pure old-school bevels)
       ========================================= */

    /*
      Classic raised Win95 window border:
      - white top/left highlight
      - dark bottom/right shadow
      - plus an inner bevel

      CHANGE:
      - win95-raised is now transparent so stars show through
    */
    .win95-raised {
      background: transparent; /* ✅ transparent instead of grey */
      border: 2px solid var(--ink);
      box-shadow:
        inset 2px 2px 0 var(--silver-lite),
        inset -2px -2px 0 var(--silver-deep),
        inset 4px 4px 0 var(--silver-mid),
        inset -4px -4px 0 var(--silver-dark);
    }

    /* Chunkier panel variant (kept dark so the space canvas reads) */
    .win95-panel {
      background: rgba(0,0,0,0.50);
      border: 2px solid var(--ink);
      box-shadow:
        inset 2px 2px 0 var(--silver-lite),
        inset -2px -2px 0 var(--silver-deep),
        inset 5px 5px 0 var(--silver-mid),
        inset -5px -5px 0 var(--silver-dark);
    }

    /* Win95 titlebar: flat colour, no gradient */
    .win95-titlebar {
      background: #000080;          /* classic deep blue titlebar */
      border-bottom: 2px solid var(--ink);
      padding: 6px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      user-select: none;
    }

    .win95-icon {
      width: 14px;
      height: 14px;
      display: inline-block;
      background: var(--silver-face);
      border: 1px solid var(--ink);
      box-shadow:
        inset 1px 1px 0 var(--silver-lite),
        inset -1px -1px 0 var(--silver-dark);
    }

    .win95-title {
      font-family: var(--mono);
      font-size: 13px;
      color: #ffffff;
      text-shadow: 1px 1px 0 #000000;
      letter-spacing: 0.2px;
    }

    /*
      Inner header content panel:
      CHANGE:
      - This is now transparent too (so no grey block behind THE COSMOS)
      - We keep a tiny text-shadow on the title so it stays readable
    */
    .win95-inner-panel {
      margin: 10px;
      padding: 10px 12px;
      background: transparent; /* ✅ transparent */
      border: 0;               /* ✅ remove inner border */
      box-shadow: none;        /* ✅ remove inner bevel */
    }

    /* =========================================
       INDIVIDUAL TWINKLING STARS (NO JS)
       ========================================= */
    .pixel-stars {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: var(--bg-colour);
      overflow: hidden;
    }

    .star {
      position: absolute;
      left: calc(var(--x) * 1%);
      top:  calc(var(--y) * 1%);

      width: 2px;
      height: 2px;

      background: var(--c, rgba(240,245,255,0.9));
      opacity: var(--a, 0.8);

      box-shadow: 0 0 6px rgba(255,255,255,0.25);

      animation: starTwinkle var(--t, 3.5s) infinite;
      animation-delay: var(--d, 0s);

      image-rendering: pixelated;
    }

    .star.tiny {
      width: 1px;
      height: 1px;
      box-shadow: 0 0 4px rgba(255,255,255,0.2);
    }

    @keyframes starTwinkle {
      0%   { opacity: 0.25; transform: scale(1);   filter: blur(0px); }
      10%  { opacity: 0.55; }
      12%  { opacity: 1.00; transform: scale(1.7); filter: blur(0.2px); } /* flash */
      16%  { opacity: 0.40; transform: scale(1);   filter: blur(0px); }
      55%  { opacity: 0.35; }
      58%  { opacity: 0.95; transform: scale(1.5); filter: blur(0.2px); } /* flash */
      62%  { opacity: 0.40; transform: scale(1);   filter: blur(0px); }
      100% { opacity: 0.25; }
    }

    /* Site content sits above stars */
    .overlay {
      position: relative;
      z-index: 1;
      min-height: 100%;
      background: radial-gradient(circle at 50% 20%,
                 rgba(255,255,255,0.10),
                 rgba(0,0,0,0.35) 55%,
                 rgba(0,0,0,0.75));
    }

    /* =========================================
       PAGE + HEADER
       ========================================= */
    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 14px 60px;
    }

    .masthead {
      padding: 0;
      position: static;
      z-index: 50;
    }

    .masthead-inner {
      padding: 0;
    }

    .title {
      margin: 0;
      font-size: clamp(28px, 4vw, 44px);
      letter-spacing: 1px;
      /* Slightly stronger shadow now that background is transparent */
      text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,0.55);
    }

    .subtitle {
      margin: 6px 0 0;
      font-family: var(--mono);
      color: rgba(235,235,255,0.95);
      font-size: 13px;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
    }

    .marquee {
      margin-top: 10px;
      border-top: 1px dotted rgba(255,255,255,0.35);
      padding-top: 8px;
      overflow: hidden;
      white-space: nowrap;
    }

    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 16s linear infinite;
      color: var(--acid-green);
      text-shadow: 1px 1px 0 #000;
      font-family: var(--mono);
      font-size: 13px;
    }

    @keyframes scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-100%); }
    }

    /* =========================================
       TITLE WITH GIFS FLANKING IT
       ========================================= */
    .title-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
    }

    .title-gif-left {
      width: 140px;
      height: auto;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
    }
	.title-gif-right {
		width:340px;
		height: auto:
		image-rendering: pixelated;
		filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
	}

    /* =========================================
       SPACE CANVAS
       ========================================= */
    .space-canvas {
      margin-top: 18px;
      position: relative;
      height: 620px;
      overflow: hidden;
    }

    .sparkles {
      pointer-events: none;
      position: absolute;
      inset: 0;
      background-image: url("assets/sparkles-overlay.gif");
      background-repeat: repeat;
      opacity: 0.25;
      mix-blend-mode: screen;
    }

    .floaty-link {
      position: absolute;
      display: inline-block;
      text-decoration: none;
      transform-origin: center;
    }


    .floaty-link img {
      max-width: 170px;
      height: auto;
      display: block;
    }

    .sm img { max-width: 95px; }
    .md img { max-width: 140px; }
    .lg img { max-width: 210px; }

    .float { animation: float 4.8s ease-in-out infinite; }
    .float.slow { animation-duration: 7s; }
    .float.fast { animation-duration: 3.6s; }

    @keyframes float {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-10px); }
    }

    .badges {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    .badges img { height: 31px; width: auto; }

    .footer {
      margin-top: 18px;
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(255,255,255,0.75);
      text-align: center;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
    }

    @media (max-width: 720px) {
      .space-canvas { height: 760px; }
      .floaty-link img { max-width: 140px; }
      .title-gif { width: 52px; }
      .title-row { gap: 10px; }
    }
	
	/* =========================================
   WIN95 PLAQUES UNDER PLANETS
   ========================================= */
	.planet-plaque {
		display: inline-block;
		margin-top: 6px;
		padding: 3px 8px;

		font-family: var(--mono);
		font-size: 12px;
		color: #000;

		background: var(--silver-face);
		border: 2px solid var(--ink);

		/* Win95 bevel */
		box-shadow:
			inset 2px 2px 0 var(--silver-lite),
			inset -2px -2px 0 var(--silver-dark);

		image-rendering: pixelated;
		pointer-events: auto;
}

/* Bigger Win95 info plaque panel */
.info-plaque {
  display: block;
  margin: 18px auto 0;
  max-width: 300px;
  padding: 12px 14px;

  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: #000;

  background: var(--silver-face);
  border: 2px solid var(--ink);

  box-shadow:
    inset 2px 2px 0 var(--silver-lite),
    inset -2px -2px 0 var(--silver-dark);
}

/* Optional little title strip inside the plaque */
.info-plaque .plaque-title {
  display: inline-block;
  padding: 2px 6px;
  margin-bottom: 8px;

  background: #000080;
  color: #fff;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.35),
    inset -1px -1px 0 rgba(0,0,0,0.5);
}

	.floating-info {
  position: absolute;
  top: 20%;               /* center vertically */
  left: 50%;              /* center horizontally */
  transform: translate(-50%, -50%);  /* true centering */
  z-index: 10;            /* above planets but under sparkles */
  width: 340px;           /* adjust size to your liking */
  text-align: left;
}