/* Starward — retro space-age × realistic.
   Extracted from the mockups so the Blazor app can start from the exact look.
   Planets are pure CSS (layered radial gradients + a terminator overlay). */



:root {
  --sw-paper: #F2E6CF;
  --sw-paper-light: #F8EFDC;
  --sw-ink: #1B2A41;
  --sw-orange: #E2572B;
  --sw-orange-text: #B8401A;
  --sw-teal: #2E8C8A;
  --sw-teal-light: #8FE3DE;
  --sw-mustard: #E8B23A;
  --sw-space: #070B14;
  --sw-locked: #6B6A66;
  --sw-font-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --sw-font-body: 'Space Mono', ui-monospace, monospace;
}

.sw-screen {
  background-color: var(--sw-paper);
  background-image: radial-gradient(rgba(27,42,65,.07) 1px, rgba(0,0,0,0) 1.4px);
  background-size: 6px 6px;
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
}
.sw-display { font-family: var(--sw-font-display); letter-spacing: 1px; }
.sw-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.sw-window { position: relative; overflow: hidden; background: var(--sw-space); border: 4px solid var(--sw-ink); }
.sw-card { border: 4px solid var(--sw-ink); background: var(--sw-paper-light); box-shadow: 8px 8px 0 var(--sw-ink); }
.sw-stamp { border: 3px solid var(--sw-orange); color: var(--sw-orange); border-radius: 50%; transform: rotate(-14deg); font-family: var(--sw-font-display); }
.sw-locked { filter: grayscale(1); opacity: .55; }
.sw-star { position: absolute; border-radius: 50%; background: #fff; }

/* ---------- Planets ---------- */
.pl { position: absolute; border-radius: 50%; overflow: hidden; }
/* Terminator: light from upper-left. Override the gradient centre to move the sun. */
.pl::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(0,0,8,0) 40%, rgba(0,0,8,.55) 63%, rgba(0,0,8,.96) 82%); }
.pl.lit-left::after { background: radial-gradient(circle at 18% 50%, rgba(0,0,8,0) 38%, rgba(0,0,8,.55) 62%, rgba(0,0,8,.95) 82%); }

.earth { background:
  radial-gradient(ellipse 20% 9% at 58% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 28% 8% at 34% 60%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 14% 6% at 70% 52%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 17% 24% at 38% 38%, #5b7d3c 0%, #7a6a40 55%, rgba(0,0,0,0) 60%),
  radial-gradient(ellipse 12% 20% at 66% 66%, #4f7a38 0%, #8b7a4c 50%, rgba(0,0,0,0) 56%),
  radial-gradient(ellipse 22% 6% at 50% 4%, #f4f8fb 0%, rgba(0,0,0,0) 70%),
  radial-gradient(circle at 35% 30%, #5bb2f0 0%, #1d63b3 42%, #0a2a5c 75%, #04122b 100%);
  box-shadow: 0 0 0 2px rgba(120,190,255,.25), 0 0 50px rgba(80,160,255,.45); }
.moon { background:
  radial-gradient(circle at 62% 38%, #7e7d79 0 7%, rgba(0,0,0,0) 8%),
  radial-gradient(circle at 38% 62%, #85837e 0 11%, rgba(0,0,0,0) 12%),
  radial-gradient(circle at 70% 68%, #8c8a85 0 5%, rgba(0,0,0,0) 6%),
  radial-gradient(ellipse 22% 16% at 30% 36%, #9a9893, rgba(0,0,0,0) 70%),
  radial-gradient(circle at 35% 30%, #e2e0da, #a8a69f 50%, #66645f 85%); }
.mars { background:
  radial-gradient(ellipse 18% 6% at 50% 5%, #fbeee6, rgba(0,0,0,0) 70%),
  radial-gradient(ellipse 34% 8% at 55% 48%, #6e2c14, rgba(0,0,0,0) 70%),
  radial-gradient(ellipse 14% 18% at 32% 62%, #8a3c1c, rgba(0,0,0,0) 70%),
  radial-gradient(circle at 62% 30%, #8a3c1c 0 4%, rgba(0,0,0,0) 5%),
  radial-gradient(ellipse 22% 12% at 40% 30%, #e9a978, rgba(0,0,0,0) 70%),
  radial-gradient(circle at 35% 30%, #f29a64, #c4552a 45%, #6a2410 80%);
  box-shadow: 0 0 30px rgba(255,120,60,.35); }
.mercury { background: radial-gradient(circle at 60% 40%, #6e6560 0 8%, rgba(0,0,0,0) 9%), radial-gradient(circle at 35% 30%, #c8bdb2, #8a7d70 50%, #3e3630 85%); }
.venus { background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(0,0,0,0) 40%), radial-gradient(circle at 35% 30%, #fff1c8, #e3c27c 45%, #9c7434 85%); }
.jupiter { background:
  radial-gradient(ellipse 12% 7% at 62% 64%, #c2562f 0%, #c2562f 40%, rgba(0,0,0,0) 75%),
  linear-gradient(178deg, #e9d8bc 0%, #e9d8bc 12%, #b88a5e 14%, #d9b88e 20%, #f3e6cf 26%, #a87048 33%, #e2c49c 38%, #f0e0c4 46%, #b27d55 52%, #e7d1ad 58%, #c79a6c 66%, #efdfc4 72%, #a9764c 80%, #d8bb92 88%, #bfa07c 100%); }
.saturn { background: linear-gradient(178deg, #f1e3c2 0%, #e3c98f 20%, #f4e7c8 35%, #d6b878 50%, #efdcb2 65%, #c9a868 80%, #e6d2a2 100%); }
.saturn-ring { position: absolute; border-radius: 50%; border: 5px solid rgba(225,203,150,.85); border-top-color: rgba(225,203,150,.25); transform: rotate(-14deg); }
.uranus { background: radial-gradient(circle at 35% 30%, #d8fbfb, #8fd8de 45%, #3f8ea0 85%); }
.neptune { background: radial-gradient(ellipse 10% 6% at 58% 45%, #1a2d7a, rgba(0,0,0,0) 70%), radial-gradient(circle at 35% 30%, #7ea8ff, #2f5fd8 45%, #12266e 85%); }
.pluto { background: radial-gradient(ellipse 20% 18% at 58% 58%, #f6ece0, rgba(0,0,0,0) 70%), radial-gradient(circle at 35% 30%, #e6cdb0, #a98663 50%, #4e3a28 85%); }
.europa { background:
  repeating-linear-gradient(60deg, rgba(150,90,60,.35) 0 1px, rgba(0,0,0,0) 1px 9px),
  repeating-linear-gradient(-30deg, rgba(150,90,60,.25) 0 1px, rgba(0,0,0,0) 1px 13px),
  radial-gradient(circle at 35% 30%, #fbf4e6, #d9c7a8 50%, #8a7458 85%); }
.sun { position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0%, #ffe08a 30%, #ffab3d 62%, #e8641c 100%);
  box-shadow: 0 0 60px 20px rgba(255,170,60,.45), 0 0 160px 60px rgba(255,120,30,.18); }

/* Generic world types for the 40 invented planets: pass three stops (light, mid, dark). */
.world { background: radial-gradient(circle at 35% 30%, var(--a) 0%, var(--b) 50%, var(--c) 88%); }

/* ---------- Galaxies (rotate + scaleY on the element for tilt) ---------- */
.gal { position: absolute; border-radius: 50%; }
.g-spiral { background: radial-gradient(circle, #fff7e6 0%, #ffd9a0 6%, rgba(255,200,140,.6) 14%, rgba(0,0,0,0) 40%), conic-gradient(from 20deg, rgba(140,170,255,0) 0deg, rgba(170,195,255,.65) 40deg, rgba(140,170,255,0) 110deg, rgba(140,170,255,0) 180deg, rgba(170,195,255,.65) 220deg, rgba(140,170,255,0) 290deg);
  -webkit-mask-image: radial-gradient(circle, #000 28%, rgba(0,0,0,0) 70%); mask-image: radial-gradient(circle, #000 28%, rgba(0,0,0,0) 70%); }
.g-gold { background: radial-gradient(circle, #fffaf0 0%, #ffe2a8 7%, rgba(255,190,110,.65) 16%, rgba(0,0,0,0) 42%), conic-gradient(from 80deg, rgba(255,190,120,0) 0deg, rgba(255,205,140,.6) 45deg, rgba(255,190,120,0) 120deg, rgba(255,190,120,0) 180deg, rgba(255,205,140,.6) 225deg, rgba(255,190,120,0) 300deg);
  -webkit-mask-image: radial-gradient(circle, #000 28%, rgba(0,0,0,0) 70%); mask-image: radial-gradient(circle, #000 28%, rgba(0,0,0,0) 70%); }
.g-veil { background: radial-gradient(circle at 52% 50%, #fff0f6 0 4%, rgba(0,0,0,0) 12%), radial-gradient(ellipse at 40% 45%, rgba(255,120,190,.6), rgba(120,80,220,.32) 42%, rgba(0,0,0,0) 70%); }
.g-ring { background: radial-gradient(circle, #ffe8c0 0 5%, rgba(255,232,192,0) 13%, rgba(0,0,0,0) 42%, rgba(120,180,255,.8) 52%, rgba(160,140,255,.45) 60%, rgba(0,0,0,0) 70%); }
.g-crown { background: radial-gradient(circle, #000000 0 22%, #ffb05c 25%, rgba(255,120,40,.65) 31%, rgba(180,60,20,.25) 44%, rgba(0,0,0,0) 64%); }