/*
 * Classroom visual polish layer for the offline "Cosmos Explore" module.
 * Loaded after the original production bundle so the vendor build remains intact.
 * 2026-09-01: Robin local teaching edition.
 */

:root {
  --classroom-cyan: #67e8f9;
  --classroom-blue: #60a5fa;
  --classroom-violet: #a78bfa;
  --classroom-amber: #fbbf24;
  --classroom-panel: rgba(7, 15, 31, 0.78);
  --classroom-panel-strong: rgba(8, 18, 38, 0.92);
  --classroom-border: rgba(148, 210, 255, 0.22);
  --classroom-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html,
body,
#root {
  background: #020713;
}

body {
  color: #eef7ff;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(14, 116, 144, 0.16), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(124, 58, 237, 0.12), transparent 30%),
    radial-gradient(circle at 55% 90%, rgba(30, 64, 175, 0.14), transparent 38%),
    linear-gradient(180deg, #030817 0%, #020511 55%, #01030a 100%);
}

.navbar {
  min-height: 62px;
  padding-inline: clamp(18px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(3, 9, 22, 0.94), rgba(3, 9, 22, 0.76));
  border-bottom: 1px solid var(--classroom-border);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.nav-brand {
  letter-spacing: 0.05em;
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.22);
}

.nav-brand-orb {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 26px rgba(251, 191, 36, 0.42);
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.48rem 0.78rem;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nav-link:hover {
  color: #fff;
  border-color: rgba(103, 232, 249, 0.18);
  background: rgba(103, 232, 249, 0.08);
  transform: translateY(-1px);
}

.nav-link.active {
  color: #fff;
  border-color: rgba(103, 232, 249, 0.3);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(124, 58, 237, 0.17));
  box-shadow: inset 0 0 22px rgba(103, 232, 249, 0.06), 0 8px 26px rgba(0, 0, 0, 0.18);
}

.cosmos-stage,
.galaxy-stage,
.solar-stage,
.earth-moon-canvas {
  filter: saturate(1.1) contrast(1.04) brightness(1.05);
}

.cosmos-body-label,
.galaxy-body-label,
.solar-body-label {
  padding: 0.38rem 0.66rem;
  border: 1px solid rgba(173, 224, 255, 0.3);
  border-radius: 999px;
  background: rgba(3, 10, 24, 0.76);
  color: #f6fbff;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 0 18px rgba(103, 232, 249, 0.05);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.earth-moon-hud,
.solar-hud,
.cosmos-hud,
.galaxy-hud {
  border: 1px solid var(--classroom-border);
  background: linear-gradient(135deg, rgba(5, 14, 31, 0.9), rgba(9, 22, 43, 0.72));
  box-shadow: var(--classroom-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.earth-moon-hud-facts li,
.solar-hud-facts li,
.cosmos-hud-facts li,
.galaxy-hud-facts li {
  border-color: rgba(148, 210, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
}

.hud-play-btn,
.btn,
.continue-explore-btn {
  border-color: rgba(148, 210, 255, 0.26);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.btn-primary,
.continue-explore-btn.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 68%, #0891b2 100%);
  box-shadow: 0 12px 34px rgba(79, 70, 229, 0.28), inset 0 1px rgba(255, 255, 255, 0.18);
}

.btn-primary:hover,
.continue-explore-btn.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.drawer {
  width: min(420px, 92vw);
  border-left: 1px solid rgba(148, 210, 255, 0.24);
  background:
    radial-gradient(circle at 85% 8%, rgba(124, 58, 237, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(7, 16, 34, 0.96), rgba(3, 9, 23, 0.98));
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
}

.drawer-photo,
.globe-preview-3d,
.sphere-media {
  border: 1px solid rgba(148, 210, 255, 0.2);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
}

.fact-list li,
.fun-box,
.drawer-analysis,
.knowledge-body {
  border-color: rgba(148, 210, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
}

.explorer-workspace {
  gap: clamp(14px, 2vw, 26px);
}

.explorer-hierarchy,
.explorer-detail,
.body-types-rail,
.body-types-detail,
.glossary-card {
  border: 1px solid var(--classroom-border);
  background:
    linear-gradient(145deg, rgba(9, 22, 43, 0.88), rgba(4, 11, 27, 0.82));
  box-shadow: var(--classroom-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

.explorer-col {
  border-color: rgba(148, 210, 255, 0.18);
  background: linear-gradient(180deg, rgba(13, 29, 54, 0.8), rgba(6, 15, 34, 0.88));
}

.explorer-node {
  border: 1px solid rgba(148, 210, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.explorer-node:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, 0.38);
  background: rgba(103, 232, 249, 0.075);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.explorer-node.is-active,
.explorer-node.is-focus {
  border-color: rgba(103, 232, 249, 0.46);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(124, 58, 237, 0.13));
}

.explorer-node-orb {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: #10223e;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.045), 0 0 28px rgba(96, 165, 250, 0.22);
}

.explorer-detail-visual img {
  filter: saturate(1.08) contrast(1.04);
}

.body-types-tab {
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.body-types-tab:hover,
.body-types-tab.is-active {
  border-color: rgba(103, 232, 249, 0.26);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.11), rgba(124, 58, 237, 0.1));
  transform: translateX(3px);
}

.quiz-option {
  border: 1px solid rgba(148, 210, 255, 0.18);
  background: rgba(8, 20, 41, 0.78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.quiz-option:hover:not(:disabled) {
  border-color: rgba(103, 232, 249, 0.42);
  background: rgba(14, 116, 144, 0.16);
  transform: translateY(-2px);
}

.page-title,
.earth-moon-hud-title {
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(96, 165, 250, 0.16);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--classroom-cyan);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .navbar {
    min-height: 56px;
    padding-inline: 14px;
  }

  .earth-moon-hud,
  .solar-hud,
  .cosmos-hud,
  .galaxy-hud {
    max-width: calc(100vw - 28px);
  }

  .explorer-hierarchy,
  .explorer-detail,
  .body-types-rail,
  .body-types-detail {
    border-radius: 18px;
  }
}

@media (max-width: 1360px) and (min-width: 901px) {
  .navbar {
    gap: 10px;
    padding-inline: 18px;
  }

  .nav-links {
    gap: 2px;
  }

  .nav-link {
    padding: 0.42rem 0.5rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .nav-fullscreen-btn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .btn,
  .explorer-node,
  .body-types-tab,
  .quiz-option {
    transition: none !important;
  }
}