/* Starfall space theme — palette lifted straight from the game */
:root {
  --bg: #05060f;
  --panel: #10142a;
  --panel2: #1a2040;
  --text: #e8ecff;
  --dim: #8a93c4;
  --gold: #ffd76a;
  --cyan: #7ee0ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background:
    /* foreground stars: bigger, brighter, a few with a soft halo */
    radial-gradient(2.5px 2.5px at 12% 22%, #ffffff 50%, transparent),
    radial-gradient(6px 6px at 12% 22%, #cdd6ff55 40%, transparent),
    radial-gradient(2px 2px at 41% 12%, #fff3d8 50%, transparent),
    radial-gradient(2.5px 2.5px at 84% 58%, #ffffff 50%, transparent),
    radial-gradient(7px 7px at 84% 58%, #7ee0ff4d 40%, transparent),
    radial-gradient(2px 2px at 63% 82%, #ffd76aff 50%, transparent),
    radial-gradient(2px 2px at 8% 88%, #cdd6ff 50%, transparent),
    radial-gradient(2.5px 2.5px at 92% 15%, #cdd6ff 50%, transparent),
    /* mid stars */
    radial-gradient(1.5px 1.5px at 28% 68%, #cdd6ffee 60%, transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, #cdd6ffdd 60%, transparent),
    radial-gradient(1.5px 1.5px at 72% 28%, #ffe9c4dd 60%, transparent),
    radial-gradient(1.5px 1.5px at 47% 93%, #cdd6ffcc 60%, transparent),
    radial-gradient(1.5px 1.5px at 19% 45%, #cdd6ffdd 60%, transparent),
    radial-gradient(1.5px 1.5px at 66% 8%, #cdd6ffee 60%, transparent),
    radial-gradient(1.5px 1.5px at 90% 84%, #ffd76acc 60%, transparent),
    /* faint background dust */
    radial-gradient(1px 1px at 5% 35%, #cdd6ff99 60%, transparent),
    radial-gradient(1px 1px at 23% 8%, #cdd6ff88 60%, transparent),
    radial-gradient(1px 1px at 35% 52%, #cdd6ff99 60%, transparent),
    radial-gradient(1px 1px at 44% 30%, #cdd6ff77 60%, transparent),
    radial-gradient(1px 1px at 52% 71%, #cdd6ff8c 60%, transparent),
    radial-gradient(1px 1px at 60% 26%, #cdd6ff80 60%, transparent),
    radial-gradient(1px 1px at 76% 46%, #cdd6ff8a 60%, transparent),
    radial-gradient(1px 1px at 81% 5%, #cdd6ff7d 60%, transparent),
    radial-gradient(1px 1px at 88% 33%, #cdd6ff90 60%, transparent),
    radial-gradient(1px 1px at 96% 66%, #cdd6ff82 60%, transparent),
    radial-gradient(1px 1px at 15% 62%, #cdd6ff88 60%, transparent),
    radial-gradient(1px 1px at 31% 84%, #cdd6ff7d 60%, transparent),
    radial-gradient(1px 1px at 69% 60%, #cdd6ff8a 60%, transparent),
    radial-gradient(1px 1px at 40% 76%, #cdd6ff73 60%, transparent),
    /* cross-glint bright stars */
    radial-gradient(16px 1.2px at 8% 16%, #ffffffcc, transparent 70%),
    radial-gradient(1.2px 16px at 8% 16%, #ffffff99, transparent 70%),
    radial-gradient(14px 1px at 91% 34%, #cdefffbb, transparent 70%),
    radial-gradient(1px 14px at 91% 34%, #cdefff88, transparent 70%),
    radial-gradient(12px 1px at 14% 72%, #ffffffaa, transparent 70%),
    radial-gradient(1px 12px at 14% 72%, #ffffff77, transparent 70%),
    /* a distant galaxy, edge-on */
    radial-gradient(3px 3px at 78% 79%, #fff6e8ee 40%, transparent),
    radial-gradient(30px 9px at 78% 79%, rgba(220, 190, 255, 0.35), rgba(140, 100, 220, 0.14) 55%, transparent 75%),
    /* a small star cluster */
    radial-gradient(1.5px 1.5px at 88% 62%, #ffffffdd 60%, transparent),
    radial-gradient(1px 1px at 89.5% 60.5%, #cdd6ffcc 60%, transparent),
    radial-gradient(1px 1px at 87% 59.5%, #cdd6ffbb 60%, transparent),
    radial-gradient(1.2px 1.2px at 90% 63%, #cdd6ffcc 60%, transparent),
    radial-gradient(1px 1px at 86.5% 63.5%, #cdd6ff99 60%, transparent),
    radial-gradient(18px 14px at 88% 61.5%, rgba(205, 214, 255, 0.12), transparent 70%),
    /* extra field stars */
    radial-gradient(1.5px 1.5px at 3% 12%, #cdd6ffcc 60%, transparent),
    radial-gradient(1px 1px at 10% 52%, #cdd6ff88 60%, transparent),
    radial-gradient(1.5px 1.5px at 17% 78%, #ffe9c4bb 60%, transparent),
    radial-gradient(1px 1px at 27% 47%, #cdd6ff7d 60%, transparent),
    radial-gradient(1.2px 1.2px at 33% 20%, #cdd6ffbb 60%, transparent),
    radial-gradient(1px 1px at 38% 64%, #cdd6ff8a 60%, transparent),
    radial-gradient(1.5px 1.5px at 45% 8%, #ffffffcc 60%, transparent),
    radial-gradient(1px 1px at 50% 38%, #cdd6ff90 60%, transparent),
    radial-gradient(1.2px 1.2px at 57% 60%, #ffd76aaa 60%, transparent),
    radial-gradient(1px 1px at 62% 90%, #cdd6ff82 60%, transparent),
    radial-gradient(1.5px 1.5px at 68% 40%, #cdd6ffcc 60%, transparent),
    radial-gradient(1px 1px at 74% 12%, #cdd6ff8c 60%, transparent),
    radial-gradient(1.2px 1.2px at 79% 52%, #cdefffbb 60%, transparent),
    radial-gradient(1px 1px at 86% 74%, #cdd6ff85 60%, transparent),
    radial-gradient(1.5px 1.5px at 94% 42%, #ffe9c4cc 60%, transparent),
    radial-gradient(1px 1px at 98% 88%, #cdd6ff7a 60%, transparent),
    radial-gradient(1px 1px at 7% 68%, #cdd6ff80 60%, transparent),
    radial-gradient(1.2px 1.2px at 49% 55%, #cdd6ffaa 60%, transparent),
    radial-gradient(1px 1px at 58% 18%, #cdd6ff8f 60%, transparent),
    radial-gradient(1px 1px at 91% 5%, #cdd6ff99 60%, transparent),
    /* nebula washes */
    radial-gradient(ellipse 55% 38% at 82% 12%, rgba(130, 75, 235, 0.30), transparent 70%),
    radial-gradient(ellipse 60% 42% at 10% 75%, rgba(45, 125, 230, 0.28), transparent 70%),
    radial-gradient(ellipse 45% 32% at 55% 40%, rgba(255, 110, 200, 0.12), transparent 70%),
    radial-gradient(ellipse 35% 26% at 30% 18%, rgba(80, 220, 200, 0.10), transparent 70%),
    /* milky way: a soft diagonal band of light */
    linear-gradient(115deg, transparent 34%, rgba(150, 160, 230, 0.10) 46%, rgba(205, 214, 255, 0.16) 50%, rgba(150, 160, 230, 0.10) 54%, transparent 66%),
    radial-gradient(ellipse at 30% 10%, #131b3d 0%, var(--bg) 60%);
  background-attachment: fixed;
  line-height: 1.65;
}

main, .page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

h1 {
  font-size: 1.7rem;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 215, 106, 0.35);
  letter-spacing: 0.02em;
}

h2 {
  font-size: 1.1rem;
  color: var(--cyan);
  margin-top: 2.2rem;
  letter-spacing: 0.03em;
}

a { color: var(--cyan); text-decoration-color: rgba(126, 224, 255, 0.4); }
a:hover { text-shadow: 0 0 12px rgba(126, 224, 255, 0.5); }

.meta { color: var(--dim); font-size: 0.9rem; }
p strong { color: var(--gold); font-weight: 600; }

.card {
  background: rgba(16, 20, 42, 0.75);
  border: 1px solid rgba(126, 224, 255, 0.12);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.grid a img, .wide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(126, 224, 255, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.grid a img:hover, .wide a img:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(255, 215, 106, 0.18);
}

.hero {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  text-align: center;
  padding: 1.25rem;
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}

.hero p { color: var(--dim); }