/* SpaceEx — the learning layer: names pinned to stars on the sky, the planet
   list in a star's panel, and the quiz. */

/* ── Star names on the sky ───────────────────────────────────────────────── */
.star-tags{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.star-tag{
  position:absolute;left:0;top:0;translate:-8px -8px;
  padding-left:22px;line-height:16px;white-space:nowrap;
  font-size:11.5px;font-weight:500;color:rgba(236,232,222,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.star-tag::before{
  content:'';position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc,#f2c67c) 55%,transparent);
}
.star-tag.is-focus{color:var(--ink);font-size:13px;font-weight:600;padding-left:30px}
.star-tag.is-focus::before{
  left:-6px;top:-6px;width:28px;height:28px;
  box-shadow:inset 0 0 0 1.5px var(--accent),0 0 18px -2px var(--accent);
  animation:tag-pulse 2.4s ease-in-out infinite;
}
@keyframes tag-pulse{50%{transform:scale(1.18);opacity:.7}}

/* ── Planets round another star ──────────────────────────────────────────── */
.planets{margin-top:14px}
.planets h3{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:10px;
}
.planets h3 small{font-size:inherit;letter-spacing:.06em;text-transform:none}
.planets ol{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:1px;border-radius:12px;overflow:hidden;background:var(--line-soft)}
.planets li{
  display:grid;grid-template-columns:auto 1fr;gap:1px 10px;align-items:baseline;
  padding:9px 11px;background:rgba(8,10,15,.55);font-size:12.5px;line-height:1.4;
}
.planets b{font-weight:600;color:var(--ink)}
.planets span{justify-self:end;color:var(--accent);font-family:var(--mono);font-size:11.5px}
.planets em{grid-column:1 / -1;font-style:normal;color:var(--muted);font-size:11.8px}

/* ── Quiz ────────────────────────────────────────────────────────────────── */
.quiz{margin-top:16px}
.quiz-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.quiz-q{font-family:var(--display);font-size:24px !important;line-height:1.18 !important;color:var(--ink) !important;
  margin-top:12px !important}
.quiz-opts{display:grid;gap:7px;margin-top:16px}
.quiz-opt{
  text-align:left;padding:13px 15px;border-radius:13px;font-size:14px;font-weight:500;
  color:var(--ink);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .18s ease,box-shadow .18s ease,transform .2s var(--ease);
}
.quiz-opt:not(:disabled):hover{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);transform:translateX(2px)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.is-right{background:rgba(122,217,164,.14);box-shadow:inset 0 0 0 1px rgba(122,217,164,.6)}
.quiz-opt.is-wrong{background:rgba(255,138,128,.12);box-shadow:inset 0 0 0 1px rgba(255,138,128,.55)}
.quiz-why{padding:12px 14px;border-radius:13px;background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent-line);font-size:13px !important}
.quiz-why b{color:var(--ink)}
.quiz-go{margin-top:14px}
.quiz-score{font-family:var(--display);font-size:56px !important;line-height:1 !important;
  color:var(--accent) !important}