:root {
  --bg: #05090d;
  --surface: #0a1218;
  --surface-2: #101c24;
  --surface-3: #14232c;
  --line: #2b4249;
  --ink: #edf8f4;
  --muted: #a7bbb9;
  --cyan: #8de0d8;
  --violet: #9eb4ce;
  --gold: #d7eee0;
  --green: #83c9aa;
  --ember: #d18a7b;
}

html { background: var(--bg); }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -12%, rgba(98, 178, 175, .15), transparent 37rem),
    radial-gradient(circle at 12% 58%, rgba(68, 104, 117, .11), transparent 28rem),
    linear-gradient(180deg, #071018 0%, #05090d 45%, #081117 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .16;
  background-image:
    linear-gradient(rgba(179, 229, 222, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 229, 222, .025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}

.ambient {
  background:
    radial-gradient(circle at 50% 18%, rgba(132, 222, 215, .12), transparent 16rem),
    radial-gradient(circle at 10% 44%, rgba(89, 142, 152, .10), transparent 19rem),
    radial-gradient(circle at 86% 70%, rgba(89, 142, 152, .09), transparent 23rem);
}

.ambient::before,
.ambient::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
}

.ambient::before {
  top: 0;
  height: 88px;
  background: #020508;
  opacity: .7;
  clip-path: polygon(0 0,100% 0,100% 23%,94% 31%,90% 59%,86% 25%,80% 42%,75% 31%,69% 74%,65% 28%,57% 45%,52% 23%,46% 63%,41% 30%,35% 47%,29% 24%,23% 70%,18% 32%,12% 51%,7% 25%,0 41%);
}

.ambient::after {
  bottom: 0;
  height: 36vh;
  background: linear-gradient(to top, rgba(32, 69, 75, .18), transparent);
}

h1, h2, h3, .brand b, .mission-number, .result-symbol {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: .012em;
}

.app-header {
  background: rgba(5, 10, 14, .76);
  border-bottom-color: rgba(140, 211, 205, .12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.brand-orb {
  background: radial-gradient(circle at 40% 36%, #e8fffa 0 10%, #9fe7df 12% 31%, #315d68 33% 58%, #081118 61%);
  box-shadow: 0 0 0 1px rgba(180, 239, 232, .36), 0 0 22px rgba(126, 223, 213, .38);
}

.brand-orb::after {
  border-color: rgba(179, 232, 225, .55);
}

.eyebrow {
  color: var(--cyan);
  letter-spacing: .19em;
}

.hero {
  position: relative;
  border: 1px solid rgba(140, 208, 202, .13);
  border-radius: 6px 26px 6px 26px;
  background:
    linear-gradient(135deg, rgba(140, 224, 216, .065), transparent 34%),
    rgba(7, 15, 21, .46);
  box-shadow: inset 0 0 42px rgba(0, 0, 0, .28), 0 24px 70px rgba(0, 0, 0, .24);
}

.hero::before,
.hero::after {
  content: "✧";
  position: absolute;
  color: rgba(157, 224, 217, .42);
  font-size: 20px;
}

.hero::before { top: 12px; left: 14px; }
.hero::after { right: 14px; bottom: 10px; transform: rotate(180deg); }
.hero h1 span { color: #a2e4dd; text-shadow: 0 0 24px rgba(109, 217, 207, .22); }
.hero-copy, .page-head p, .question-context { color: var(--muted); }

.hero-orbit {
  filter: saturate(.65) hue-rotate(124deg);
  opacity: .86;
}

.hero-orbit::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(219, 247, 240, .28);
  transform: rotate(45deg);
  box-shadow: 0 0 36px rgba(127, 220, 210, .15);
}

.hero-sun {
  background: radial-gradient(circle, #f2fffb 0 10%, #9be2dc 12% 35%, #294d59 38% 58%, transparent 61%);
  box-shadow: 0 0 38px rgba(137, 228, 218, .4);
}

.mission-grid { counter-reset: zone; }

.mission-card {
  counter-increment: zone;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(132, 196, 191, .19);
  border-radius: 4px 20px 4px 20px;
  background:
    radial-gradient(circle at 82% 2%, rgba(129, 217, 208, .08), transparent 10rem),
    linear-gradient(145deg, rgba(16, 31, 40, .98), rgba(7, 14, 19, .98));
  box-shadow: inset 0 0 0 1px rgba(230, 255, 250, .025), 0 16px 30px rgba(0, 0, 0, .22);
}

.mission-card::after {
  content: counter(zone, upper-roman);
  position: absolute;
  top: 10px;
  right: 14px;
  color: rgba(180, 225, 219, .22);
  font: 600 28px/1 Georgia, serif;
}

.mission-card:hover,
.mission-card:focus-within {
  border-color: rgba(142, 226, 216, .46);
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, .31), 0 0 28px rgba(104, 197, 190, .08);
}

.mission-icon {
  color: #d8f5ef;
  background: radial-gradient(circle, rgba(131, 221, 212, .23), rgba(22, 45, 55, .6));
  border: 1px solid rgba(160, 225, 219, .27);
  box-shadow: inset 0 0 18px rgba(138, 225, 216, .14), 0 0 18px rgba(102, 194, 188, .1);
}

.mission-card.complete .mission-icon {
  background: radial-gradient(circle, rgba(155, 226, 198, .28), rgba(29, 66, 57, .7));
}

.mission-card p, .mission-meta, .calm-mode p, .progress-row p { color: var(--muted); }

.button {
  border-radius: 999px;
  letter-spacing: .025em;
}

.button.primary {
  color: #071113;
  background: linear-gradient(180deg, #cef2eb, #86cfc7);
  border-color: #dffbf6;
  box-shadow: inset 0 -2px 0 rgba(21, 69, 69, .2), 0 0 22px rgba(113, 211, 201, .13);
}

.button.primary:hover { background: linear-gradient(180deg, #e8fff9, #9de0d8); }

.button.secondary, .button.subtle, .back-button {
  color: var(--ink);
  border-color: rgba(149, 211, 205, .28);
  background: rgba(11, 23, 30, .78);
}

.calm-mode {
  border: 1px solid rgba(137, 204, 198, .18);
  border-radius: 4px 18px 4px 18px;
  background: linear-gradient(90deg, rgba(16, 35, 42, .82), rgba(8, 17, 23, .78));
}

.calm-mode > span {
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(135, 223, 214, .35));
}

.module-hero, .concept-card, .lab-card, .question-card, .result-panel,
.progress-card, .progress-row, .danger-zone, dialog {
  border-color: rgba(135, 202, 197, .2);
  background: linear-gradient(145deg, rgba(15, 29, 37, .97), rgba(7, 14, 19, .98));
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .16), 0 18px 44px rgba(0, 0, 0, .21);
}

.module-hero, .question-card, .result-panel { border-radius: 5px 25px 5px 25px; }
.concept-card, .lab-card, .progress-row { border-radius: 4px 17px 4px 17px; }
.module-number, .fragment-counter, .tag { color: var(--cyan); }
.fragment-counter { border-color: rgba(138, 217, 210, .24); background: rgba(7, 17, 22, .72); }
.progress-track { background: #101c22; border: 1px solid rgba(145, 208, 202, .13); }
.progress-track > div { background: linear-gradient(90deg, #5b9e9b, #b4eee5); }

.answer-button {
  background: rgba(11, 23, 30, .86);
  border-color: rgba(138, 198, 193, .18);
  border-radius: 4px 14px 4px 14px;
}

.answer-button:hover, .answer-button:focus-visible {
  border-color: rgba(141, 224, 216, .55);
  background: rgba(18, 39, 47, .95);
}

.bottom-nav {
  background: rgba(4, 9, 13, .94);
  border-top-color: rgba(137, 202, 197, .16);
  box-shadow: 0 -15px 38px rgba(0, 0, 0, .31);
}

.bottom-nav button.active { color: #a7e9e1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-sun { animation: cavern-pulse 4.5s ease-in-out infinite; }
  @keyframes cavern-pulse {
    0%, 100% { filter: brightness(.88); transform: scale(.96); }
    50% { filter: brightness(1.16); transform: scale(1.04); }
  }
}

@media (max-width: 640px) {
  .ambient::before { height: 60px; opacity: .55; }
  .hero { border-radius: 4px 19px 4px 19px; }
  .hero::before, .hero::after { font-size: 15px; }
  .mission-card::after { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-card { transition: none; }
}