/* Milky Way Atlas — stage, HUD, labels, learning panel. Mobile-first responsive. */

@font-face {
  font-family: "Michroma";
  src: url("/learn/space/milky-way/vendor/michroma-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF;
}

.mw-wrap { max-width: 1200px; }

.mw-hero { margin: 18px 0 14px; }
.mw-hero h1 {
  font-family: "Michroma", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  font-size: clamp(1.5rem, 4.2vw, 2.4rem); letter-spacing: .06em; line-height: 1.2; margin: 0 0 10px;
}
.mw-hero h1 .glow { color: #8fb3ff; text-shadow: 0 0 22px rgba(110, 150, 255, .55); }
.mw-hero p { max-width: 62em; opacity: .92; margin: 0; }

/* ————— the stage ————— */
.mw-stage {
  position: relative; margin-top: 16px; border-radius: 16px; overflow: hidden;
  height: clamp(480px, calc(100svh - 210px), 860px);
  background: radial-gradient(120% 100% at 50% 30%, #0a1126 0%, #060a18 55%, #02040b 100%);
  border: 1px solid rgba(110, 140, 220, .22);
  /* pan-y lets a vertical swipe scroll the PAGE past the canvas (no scroll-trap);
     horizontal drag still orbits, pinch still zooms. Fullscreen re-traps everything. */
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.mw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 720px) { .mw-stage { height: clamp(440px, 74svh, 640px); border-radius: 12px; } }

/* fullscreen / immersive mode (Fullscreen API adds the class; iOS uses the fixed
   overlay via the same class). Everything is trapped here — that's the point. */
.mw-stage.fs {
  position: fixed; inset: 0; z-index: 9999; margin: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  border-radius: 0; border: 0; touch-action: none;
}
body.mw-fs-lock { overflow: hidden; } /* lock page scroll behind the iOS overlay */

/* labels */
.mw-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mw-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -130%);
  font-family: "Michroma", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 10.5px; letter-spacing: .1em; white-space: nowrap;
  color: rgba(200, 216, 255, .92); text-shadow: 0 0 6px rgba(0, 0, 10, .9), 0 1px 2px #000;
  pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .35s ease;
  padding: 3px 5px; /* fatter touch target */
}
.mw-label.on { opacity: 1; }
.mw-label:hover { color: #fff; }
.mw-label.dim { color: rgba(160, 176, 215, .7); font-size: 9.5px; }
.mw-label.big { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(150, 178, 240, .8); }
.mw-label.you { color: #ff8fb3; font-size: 11.5px; }
.mw-label.you::before { content: "▾ "; }
.mw-label.sel { color: #ffe9a8; }

/* HUD chrome */
.mw-hud-tl { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 5; }
.mw-btn {
  font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  color: #dbe6ff; background: rgba(14, 22, 48, .72); border: 1px solid rgba(120, 150, 255, .3);
  border-radius: 999px; padding: 9px 14px; cursor: pointer; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); transition: background .2s, border-color .2s;
}
.mw-btn:hover { background: rgba(30, 44, 88, .85); border-color: rgba(150, 180, 255, .55); }
.mw-btn.primary { background: rgba(70, 100, 220, .38); border-color: rgba(150, 180, 255, .6); }
.mw-btn:disabled { opacity: .4; cursor: default; }

/* light-year ruler */
.mw-ruler {
  position: absolute; left: 14px; bottom: 14px; z-index: 5; pointer-events: none;
  font-family: "Michroma", sans-serif; font-size: 10px; letter-spacing: .12em; color: rgba(190, 208, 250, .85);
  text-shadow: 0 1px 3px #000;
}
.mw-ruler .bar { height: 2px; background: linear-gradient(90deg, rgba(160,190,255,.9), rgba(160,190,255,.35)); position: relative; margin-bottom: 5px; border-radius: 1px; }
.mw-ruler .bar::before, .mw-ruler .bar::after { content: ""; position: absolute; top: -3px; width: 2px; height: 8px; background: rgba(160,190,255,.9); }
.mw-ruler .bar::after { right: 0; }

/* zoom hint (mobile) */
.mw-hint {
  position: absolute; right: 14px; bottom: 14px; z-index: 5; pointer-events: none;
  font-size: 11px; color: rgba(170, 190, 235, .65); text-shadow: 0 1px 3px #000;
  transition: opacity .6s; max-width: 46%; text-align: right;
}
.mw-hint.off { opacity: 0; }

/* scroll cue — "the guide continues below ↓" (tap scrolls the page; fades on first scroll) */
.mw-more {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  color: #d3deff; background: rgba(12, 18, 40, .66); border: 1px solid rgba(120, 150, 255, .28);
  border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: mw-bob 1.9s ease-in-out infinite; transition: opacity .45s ease;
}
.mw-more:hover { background: rgba(28, 40, 82, .8); }
.mw-more.gone { opacity: 0; pointer-events: none; }
.mw-stage.fs .mw-more { display: none; } /* no page to scroll to in fullscreen */
@keyframes mw-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
@media (prefers-reduced-motion: reduce) { .mw-more { animation: none; } }
@media (max-width: 720px) { .mw-more { bottom: 108px; } } /* clear the bottom HUD on phones */

/* ————— learning panel ————— */
.mw-panel {
  position: absolute; top: 12px; right: 12px; width: min(360px, calc(100% - 24px));
  max-height: calc(100% - 24px); overflow-y: auto; z-index: 8;
  background: rgba(9, 14, 32, .88); border: 1px solid rgba(120, 150, 255, .32); border-radius: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 16px 18px 14px; color: #e8eeff;
  transform: translateX(16px); opacity: 0; pointer-events: none; transition: transform .28s ease, opacity .28s ease;
}
.mw-panel.on { transform: none; opacity: 1; pointer-events: auto; }
.mw-panel .chip {
  display: inline-block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-family: "Michroma", "PingFang SC", sans-serif; color: #9db8f5;
  border: 1px solid rgba(130, 160, 255, .4); border-radius: 999px; padding: 4px 9px; margin-bottom: 9px;
}
.mw-panel h2 {
  margin: 0 0 4px; font-family: "Michroma", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1.15rem; letter-spacing: .04em; line-height: 1.35; color: #fff;
}
.mw-panel .dist { font-size: .84rem; color: #9fb4e8; margin: 0 0 10px; }
.mw-panel .dist b { color: #cfe0ff; font-family: "Michroma", sans-serif; font-size: .8rem; letter-spacing: .05em; }
.mw-panel p.body { font-size: .92rem; line-height: 1.6; margin: 0 0 10px; color: #dfe7fb; }
.mw-panel p.wow { font-size: .92rem; line-height: 1.6; margin: 0 0 12px; color: #ffe9b0; }
.mw-panel p.wow::before { content: "✦ "; color: #ffd166; }
.mw-panel .row { display: flex; gap: 8px; align-items: center; }
.mw-panel .x {
  position: absolute; top: 8px; right: 10px; border: 0; background: none; color: #93a7d8;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 6px;
}
.mw-panel .x:hover { color: #fff; }
@media (max-width: 720px) {
  .mw-panel {
    top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 58%;
    border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    transform: translateY(20px); padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .mw-panel.on { transform: none; }
  .mw-panel.tour { max-height: 44%; } /* tour: keep more sky visible above the card */
}

/* ————— tour bar ————— */
.mw-tour {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9;
  display: none; align-items: center; gap: 10px;
  background: rgba(9, 14, 32, .88); border: 1px solid rgba(120, 150, 255, .35); border-radius: 999px;
  padding: 8px 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mw-tour.on { display: flex; }
.mw-tour .cap { font-size: 12.5px; color: #dfe8ff; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-tour .n { font-family: "Michroma", sans-serif; font-size: 10px; letter-spacing: .1em; color: #93a9e0; }
@media (max-width: 720px) {
  .mw-tour { bottom: auto; top: 12px; left: 50%; max-width: calc(100% - 24px); }
  .mw-tour .cap { max-width: 34vw; }
  /* keep the three controls on ONE row so they don't collide with the ruler/hint */
  .mw-hud-tl { top: auto; bottom: 12px; right: 12px; flex-wrap: nowrap; gap: 6px; }
  .mw-hud-tl .mw-btn { padding: 8px 11px; font-size: 11.5px; white-space: nowrap; }
  .mw-hud-tl #mw-fsbtn { font-size: 0; padding: 8px 12px; } /* icon-only on phones */
  .mw-hud-tl #mw-fsbtn::before { content: "⤢"; font-size: 15px; }
  .mw-stage.fs .mw-hud-tl #mw-fsbtn::before { content: "✕"; } /* clear exit affordance */
  .mw-ruler { bottom: 58px; }
  .mw-hint { bottom: 58px; max-width: 52%; }
  .mw-more { bottom: 92px; }
}

/* toast */
.mw-toast {
  position: absolute; left: 50%; top: 18px; transform: translate(-50%, -8px); z-index: 20;
  background: rgba(20, 30, 60, .95); color: #eaf0ff; border: 1px solid rgba(140, 170, 255, .4);
  padding: 8px 16px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.mw-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* WebGL fallback */
.mw-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: #c9d6f5; font-size: .95rem; line-height: 1.7;
}

/* prose below the stage */
.mw-prose { margin-top: 30px; }
.mw-prose h2 { font-family: "Michroma", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.05rem; letter-spacing: .08em; margin: 26px 0 10px; }
.mw-prose p, .mw-prose li { line-height: 1.7; }
.mw-keys { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 10px 0 0; list-style: none; font-size: .92rem; }
.mw-keys li { opacity: .9; }
.mw-cred { margin-top: 26px; font-size: .84rem; opacity: .75; line-height: 1.7; }
.mw-note {
  margin-top: 18px; padding: 12px 16px; border: 1px solid rgba(120, 150, 255, .25);
  border-radius: 12px; background: rgba(90, 120, 220, .07); font-size: .92rem; line-height: 1.65;
}