:root {
  color-scheme: dark;
  --electric: #30baff;
  --electric-soft: rgba(48, 186, 255, .55);
  --deep: #020817;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #01040d; }
body { user-select: none; -webkit-user-select: none; }
button { font: inherit; }
.app { width: 100vw; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.stage {
  position: relative;
  width: min(100vw, 177.7778svh);
  height: min(100svh, 56.25vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #020a1b;
  box-shadow: 0 0 80px rgba(0, 83, 180, .18);
}
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen[hidden] { display: none !important; }
.screen-art { width: 100%; height: 100%; display: block; object-fit: fill; }

/* Intro */
.intro-screen {
  display: grid;
  place-items: center;
  background: #02091b url("assets/cosmos.webp") center / cover no-repeat;
  color: #f4faff;
  isolation: isolate;
}
.intro-screen::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 79, 173, .15), transparent 50%),
    linear-gradient(180deg, rgba(0, 5, 18, .26), rgba(0, 6, 21, .72));
}
.intro-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.36) 100%); }
.intro-content { position: relative; z-index: 2; display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; padding:4% 5%; }
.brand-lockup { display:flex; flex-direction:column; align-items:center; gap:.15em; filter:drop-shadow(0 0 15px rgba(0,158,255,.45)); }
.brand-mark { width:clamp(55px, 8vw, 124px); height:auto; color:#f8fbff; }
.brand-lockup span { font-size:clamp(17px, 2vw, 31px); letter-spacing:.27em; font-weight:300; padding-left:.27em; }
.intro-kicker { margin:clamp(15px,2.2vw,28px) 0 clamp(38px,5.5vw,75px); font-size:clamp(8px, .92vw, 14px); letter-spacing:.36em; color:rgba(229,244,255,.78); }
.explore-button {
  position:relative; min-width:clamp(260px, 34vw, 530px); padding:clamp(18px,2vw,30px) clamp(24px,4vw,60px);
  border:1px solid rgba(110,211,255,.92); border-radius:2px; color:#f6fcff;
  background:linear-gradient(180deg, rgba(20,88,150,.56), rgba(2,23,56,.86));
  text-transform:lowercase; font-size:clamp(17px,2.1vw,31px); font-weight:300; letter-spacing:.2em;
  box-shadow:0 0 14px rgba(0,154,255,.44), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -12px 28px rgba(0,0,0,.38);
  cursor:pointer; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  text-shadow:0 0 12px rgba(115,216,255,.68); overflow:hidden;
}
.explore-button::before { content:""; position:absolute; left:-30%; top:0; width:25%; height:100%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent); animation:buttonSweep 4.5s ease-in-out infinite; }
.explore-button::after { content:""; position:absolute; inset:-2px; border:1px solid rgba(255,255,255,.16); pointer-events:none; }
.explore-button i { position:absolute; left:50%; bottom:-1px; width:42%; height:2px; transform:translateX(-50%); background:#53caff; box-shadow:0 0 9px 3px rgba(31,175,255,.68); }
.explore-button:hover, .explore-button:focus-visible { transform:translateY(-8px) scale(1.025); border-color:#d3f4ff; background:linear-gradient(180deg, rgba(27,123,195,.72), rgba(3,34,76,.95)); box-shadow:0 16px 32px rgba(0,0,0,.42), 0 0 34px rgba(0,164,255,.72), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -12px 24px rgba(0,0,0,.28); outline:none; }
.explore-button:active { transform:translateY(-2px) scale(.995); }
.intro-footnote { margin:clamp(26px,3vw,42px) 0 0; color:rgba(198,224,245,.62); font-size:clamp(7px,.72vw,11px); letter-spacing:.42em; }
.orbit { position:absolute; z-index:1; border:1px solid rgba(62,171,255,.24); border-radius:50%; pointer-events:none; }
.orbit-one { width:92%; height:78%; transform:rotate(-12deg); box-shadow:0 0 18px rgba(0,139,255,.1); }
.orbit-two { width:110%; height:64%; transform:rotate(17deg); border-color:rgba(177,223,255,.12); }
.intro-corner { position:absolute; z-index:1; width:20%; height:15%; pointer-events:none; border-color:#22aaff; opacity:.8; filter:drop-shadow(0 0 6px #008cff); }
.intro-corner-left { left:0; top:0; border-top:2px solid; border-left:2px solid; clip-path:polygon(0 0,100% 0,45% 100%,0 100%); }
.intro-corner-right { right:0; bottom:0; border-right:2px solid; border-bottom:2px solid; clip-path:polygon(55% 0,100% 0,100% 100%,0 100%); }
@keyframes buttonSweep { 0%,55% { left:-30%; opacity:0; } 65% { opacity:1; } 85%,100% { left:115%; opacity:0; } }

/* Home map */
.home-screen { background:#020817; }
.hotspot-layer { position:absolute; inset:0; }
.constellation-hit {
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border:1px solid transparent; border-radius:5px; padding:0; background:transparent; cursor:pointer;
  transform:translateY(0) scale(1); transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.constellation-hit::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse at center, rgba(0,151,255,.12), rgba(0,151,255,.025) 62%, transparent 78%); opacity:0; transition:opacity .2s ease; }
.constellation-hit:hover, .constellation-hit:focus-visible { transform:translateY(-7px) scale(1.025); border-color:rgba(74,190,255,.45); background:rgba(3,75,142,.08); box-shadow:0 0 23px rgba(0,151,255,.28), inset 0 0 18px rgba(0,151,255,.12); outline:none; }
.constellation-hit:hover::before, .constellation-hit:focus-visible::before { opacity:1; }
.constellation-hit:active { transform:translateY(-2px) scale(1.01); }

/* Detail screen: the back control is placed over the BACK artwork embedded in each reference image. */
.detail-screen { background:#020817; animation:detailReveal .55s ease both; }
.detail-screen .screen-art { object-fit:fill; }
.back-hit { position:absolute; left:1.5%; top:88.5%; width:13%; height:10%; border:1px solid transparent; background:transparent; cursor:pointer; border-radius:5px; transition:background .2s ease, box-shadow .2s ease, transform .2s ease; }
.back-hit:hover, .back-hit:focus-visible { background:rgba(0,157,255,.12); box-shadow:0 0 22px rgba(0,166,255,.35), inset 0 0 14px rgba(0,166,255,.13); transform:translateY(-3px); outline:1px solid rgba(91,205,255,.55); }
.back-hit:active { transform:translateY(0); }
@keyframes detailReveal { from { opacity:.55; filter:brightness(1.55) blur(3px); } to { opacity:1; filter:brightness(1) blur(0); } }

.rotate-tip { display:none; position:fixed; left:50%; bottom:max(12px, env(safe-area-inset-bottom)); transform:translateX(-50%); padding:8px 13px; border:1px solid rgba(77,190,255,.34); background:rgba(1,12,31,.82); color:#d8efff; font-size:11px; letter-spacing:.03em; border-radius:30px; white-space:nowrap; z-index:10; }
.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; }

@media (max-aspect-ratio: 3/4) {
  .rotate-tip { display:block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}