/* ============================================================
   ASTRO — base layer: reset, cosmic backdrop, starfield, root
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg-0); color:var(--ink); font-family:var(--font-sans);
  font-weight:400; -webkit-font-smoothing:antialiased; overflow:hidden;
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgba(146,84,210,.22), transparent 55%),
    radial-gradient(120% 100% at 92% 96%, rgba(74,96,210,.20), transparent 55%),
    radial-gradient(90% 80% at 70% 20%, rgba(228,118,200,.10), transparent 50%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 60%, var(--bg-2));
}
/* starfield — bright/medium scattered stars (one full-viewport layer) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.7; z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff9, transparent),
    radial-gradient(1.2px 1.2px at 28% 64%, #fff7, transparent),
    radial-gradient(1.7px 1.7px at 44% 14%, #ffeaffcc, transparent),
    radial-gradient(1px 1px at 62% 48%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 76% 28%, #fff8, transparent),
    radial-gradient(1.2px 1.2px at 84% 74%, #e9d4ffbb, transparent),
    radial-gradient(1.3px 1.3px at 36% 88%, #fff7, transparent),
    radial-gradient(1px 1px at 8% 80%, #fff7, transparent),
    radial-gradient(1.2px 1.2px at 92% 44%, #fff7, transparent),
    radial-gradient(1px 1px at 54% 80%, #fff6, transparent),
    radial-gradient(1.4px 1.4px at 18% 46%, #fff7, transparent),
    radial-gradient(1.1px 1.1px at 22% 12%, #fff6, transparent),
    radial-gradient(1.6px 1.6px at 6% 38%, #f3e6ffbb, transparent),
    radial-gradient(1px 1px at 34% 36%, #fff6, transparent),
    radial-gradient(1.3px 1.3px at 48% 60%, #fff7, transparent),
    radial-gradient(1px 1px at 58% 8%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 66% 70%, #ffe7fbbb, transparent),
    radial-gradient(1.1px 1.1px at 72% 52%, #fff6, transparent),
    radial-gradient(1.4px 1.4px at 88% 18%, #fff8, transparent),
    radial-gradient(1px 1px at 96% 64%, #fff6, transparent),
    radial-gradient(1.2px 1.2px at 14% 92%, #fff6, transparent),
    radial-gradient(1.3px 1.3px at 46% 96%, #fff6, transparent),
    radial-gradient(1px 1px at 70% 92%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 82% 88%, #efe0ffaa, transparent),
    radial-gradient(1.1px 1.1px at 2% 60%, #fff6, transparent),
    radial-gradient(1.2px 1.2px at 40% 4%, #fff7, transparent);
}
/* fine star-dust — a tiled layer that repeats across the viewport for density */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-repeat:repeat; background-size:260px 220px;
  background-image:
    radial-gradient(0.8px 0.8px at 20% 30%, #fff7, transparent),
    radial-gradient(0.7px 0.7px at 70% 18%, #fff6, transparent),
    radial-gradient(0.9px 0.9px at 44% 64%, #f4e9ff99, transparent),
    radial-gradient(0.6px 0.6px at 88% 52%, #fff6, transparent),
    radial-gradient(0.8px 0.8px at 12% 80%, #fff6, transparent),
    radial-gradient(0.7px 0.7px at 58% 88%, #fff5, transparent),
    radial-gradient(0.6px 0.6px at 32% 6%, #fff5, transparent),
    radial-gradient(0.9px 0.9px at 80% 78%, #fff6, transparent),
    radial-gradient(0.7px 0.7px at 96% 34%, #fff5, transparent),
    radial-gradient(0.6px 0.6px at 6% 50%, #fff5, transparent);
}
/* ambiance variants (driven by Tweaks → body[data-amb]) */
body[data-amb="subtle"]{background-image:
  radial-gradient(120% 90% at 18% 8%, rgba(146,84,210,.12), transparent 55%),
  radial-gradient(120% 100% at 92% 96%, rgba(74,96,210,.10), transparent 55%),
  linear-gradient(160deg, var(--bg-1), var(--bg-0) 62%, var(--bg-2))}
body[data-amb="subtle"]::before{opacity:.4}
body[data-amb="subtle"]::after{opacity:.26}
body[data-amb="off"]{background-image:linear-gradient(160deg, var(--bg-1), var(--bg-0) 70%, var(--bg-2))}
body[data-amb="off"]::before{display:none}
body[data-amb="off"]::after{display:none}

#root{position:relative; z-index:1; height:100dvh; overflow:hidden}

/* shared text rhythm */
::selection{background:color-mix(in oklch,var(--accent) 40%,transparent); color:#fff}

/* thin scrollbars everywhere */
*{scrollbar-width:thin; scrollbar-color:var(--accent-deep) transparent}
*::-webkit-scrollbar{width:7px; height:7px}
*::-webkit-scrollbar-thumb{background:var(--accent-deep); border-radius:9px}
*::-webkit-scrollbar-track{background:transparent}

/* utility: visually hidden but accessible */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* screen transition — each routed screen fades/rises in */
.screen{position:absolute; inset:0; overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  @keyframes screenIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .screen-anim{animation:screenIn .5s var(--ease-out) both}
}