:root {
  --bg-base:        #040608;
  --bg-surface:     #080c14;
  --bg-card:        rgba(10, 16, 28, 0.72);
  --bg-card-hover:  rgba(16, 24, 40, 0.85);

  --accent-gold:    #ffd700;
  --accent-blue:    #82aaff;
  --text-primary:   #f0f4ff;
  --text-secondary: #8a9bca;
  --text-muted:     #4a5580;

  --border:         rgba(255, 255, 255, 0.08);
  --grad-hero:      linear-gradient(135deg, #0a0e1c 0%, #05070a 100%);
  --grad-primary:   linear-gradient(135deg, #82aaff 0%, #a282ff 100%);

  --sp-xs:  0.25rem; --sp-sm:  0.5rem; --sp-md:  1rem;
  --sp-lg:  1.5rem; --sp-xl:  2rem; --sp-2xl: 3rem;
  --r-sm:   6px; --r-md:   12px; --r-lg:   20px;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.45);
  --font-sans: 'InterVariable', 'Inter', system-ui, sans-serif;
  --font-mono: 'InterVariable', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Form controls do not inherit the page font: without this, buttons and inputs fall
   back to the browser's own control font instead of Inter. A class rule that names
   a font still wins. */
button, input, select, textarea { font-family: var(--font-sans); }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh; display: flex; flex-direction: column;
  background-image: 
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
    var(--grad-hero);
  background-attachment: fixed;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

.main-container {
  max-width: 680px; margin: 0 auto;
  padding: var(--sp-md) var(--sp-md) var(--sp-2xl);
  display: flex; flex-direction: column; gap: var(--sp-lg);
  flex: 1;
}

/* Header */
.site-header { position: relative; text-align: center; padding: var(--sp-2xl) var(--sp-md) var(--sp-xl); }
.header-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(130,170,255,0.08) 0%, transparent 70%); pointer-events: none; }
.header-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); }
.star-icon { width: 80px; height: 80px; filter: drop-shadow(0 0 18px rgba(130,170,255,0.3)); color: #fff; }
.header-text h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tagline { color: var(--text-secondary); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--sp-xs); }

/* Card */
.card {
  background: var(--bg-card); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-xl); box-shadow: var(--shadow-card); position: relative;
}
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }

/* Forms */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.field-group { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.text-input { width: 100%; padding: 0.65rem 1rem; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-primary); outline: none; }
.text-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(130,170,255,0.12); }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) hue-rotate(180deg); cursor: pointer; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); padding: 0.75rem 1.5rem; border: none; border-radius: var(--r-md); font-weight: 600; cursor: pointer; transition: transform 0.15s; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.97); }
.btn-primary { width: 100%; background: var(--grad-primary); color: #111; box-shadow: 0 4px 16px rgba(130,170,255,0.2); }
.btn-secondary { background: rgba(255,255,255,0.05); color: var(--text-primary); border: 1px solid var(--border); transition: background 0.2s; }
.btn-secondary:hover { background: rgba(255,255,255,0.15); }
.btn-live { background: rgba(130,170,255,0.1); color: var(--accent-blue); border: 1px solid rgba(130,170,255,0.3); transition: all 0.2s; }
.btn-live.active { background: rgba(130,170,255,0.25); box-shadow: 0 0 12px rgba(130,170,255,0.4); text-shadow: 0 0 8px rgba(130,170,255,0.8); }

.tools-group { align-items: flex-start; justify-content: flex-end; }
.tools-group .btn { width: 100%; padding: 0.65rem 1rem; }

.action-row { display: grid; grid-template-columns: 2fr 1.2fr; gap: var(--sp-md); margin-top: var(--sp-sm); }
@media (max-width: 480px) {
  .action-row { grid-template-columns: 1fr; }
}

/* Map */
.map-wrapper { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; max-width: 600px; display: flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at center, #010408 0%, #060a12 100%); border: 1px solid rgba(255,255,255,0.05); }
.card-title { position: absolute; top: var(--sp-sm); left: var(--sp-sm); font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); z-index: 10; pointer-events: none; }
.card-title span { display: block; font-size: 0.7rem; font-weight: 400; color: var(--text-muted); text-transform: uppercase; }

.compass-marker { position: absolute; font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.5); z-index: 5; pointer-events: none; }
.marker-n { top: 10px; left: 50%; transform: translateX(-50%); }
.marker-s { bottom: 10px; left: 50%; transform: translateX(-50%); }
.marker-e { right: 10px; top: 50%; transform: translateY(-50%); }
.marker-w { left: 10px; top: 50%; transform: translateY(-50%); }

#starmap-canvas { width: 100%; height: 100%; display: block; z-index: 2; cursor: crosshair; }

.star-tooltip { position: absolute; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 8px; font-size: 0.75rem; color: #fff; pointer-events: none; transform: translate(-50%, -100%); margin-top: -8px; z-index: 20; transition: opacity 0.1s; }

/* ---- App switcher carousel ---------------------------------------- */
/* Stormberry chrome, the MetadataScrubber design (2026-10). The track
   holds 10 identical sets of cards and slides by exactly one set
   (-10%), so the loop is seamless. Change the number of sets and the
   shift together. The page's own app is the last card of each set. */
.app-switcher-container {
  padding: 3rem 0;
  margin-top: 2rem;
  text-align: center;
  border-top: 1px solid var(--border);
  line-height: 1.6;
  color-scheme: dark;
}

.switcher-title {
  margin: 0 0 1.5rem;
  padding: 0 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
}

.app-switcher-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 1rem 1.5rem;
}

.app-switcher-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.app-switcher-marquee:hover .app-switcher-track,
.app-switcher-marquee:focus-within .app-switcher-track { animation-play-state: paused; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-10%); }
}

.switcher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.switcher-card:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
}

.switcher-card img {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

/* A visible focus ring on the dark chrome, whatever the page does elsewhere */
.app-switcher-container a:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ---- Carousel and footer access (2026-10-10) ---------------------- */
/* The page's own app, the last card of every set, is marked for screen
   readers (aria-current) and for the eye (an accent border). */
.switcher-card[aria-current="page"] { border-color: var(--accent-blue); }

/* Rounded focus ring, whatever corner radius the page's own ring uses */
.switcher-card:focus-visible { border-radius: 12px; }

/* Keyboard focus stops the slide and the row scrolls to the focused card,
   so it is never off-screen. :focus-visible and not :focus-within, so a
   mouse click does not move the card from under the pointer. */
.app-switcher-marquee:has(.switcher-card:focus-visible) { overflow-x: auto; }
.app-switcher-marquee:has(.switcher-card:focus-visible) .app-switcher-track { animation: none; }

/* The pause tick box (WCAG 2.2.2): ticked, the slide stops and the row
   scrolls by hand. Plain CSS, no script. `all: revert` keeps the page's
   own form styles off it. `all: revert` also resets the font to the browser's control
   font, so the Inter stack is set again after it (the tick box draws no text, but its
   computed font is Inter like every other element). */
.app-switcher-container input.switcher-pause {
  all: revert;
  font-family: var(--font-sans);
  margin: 0 0.5rem 0.75rem 0;
  vertical-align: middle;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.app-switcher-container label.switcher-pause-label {
  all: revert;
  display: inline-block;
  margin-bottom: 0.75rem;
  vertical-align: middle;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
}

.app-switcher-container input.switcher-pause:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.switcher-pause:checked ~ .app-switcher-marquee { overflow-x: auto; }
.switcher-pause:checked ~ .app-switcher-marquee .app-switcher-track { animation: none; }

/* A footer link never breaks inside itself (the org.nr. did at 320 px) */
.footer-bottom p a { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  /* Nothing slides, so there is nothing to pause. */
  .app-switcher-container input.switcher-pause,
  .app-switcher-container label.switcher-pause-label { display: none; }
}

/* ---- Footer -------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  padding: 4rem 1.5rem 2rem;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  line-height: 1.6;
}

.site-footer p { margin: 0; }

.footer-inner {
  max-width: 680px;
  margin: 0 auto 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer-brand { max-width: 320px; }

.footer-logo {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.footer-logo:hover { color: var(--text-primary); }
.footer-dot { background: linear-gradient(135deg, #E21E26, #FF4D54); -webkit-background-clip: text; background-clip: text; color: transparent; }

.footer-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-powered p {
  max-width: 250px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Credit links read as links, as the legal links do */
.footer-powered a,
.footer-bottom p a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}

.footer-powered a:hover,
.footer-bottom p a:hover { color: var(--text-primary); }

.footer-bottom {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.footer-social a { color: var(--text-secondary); transition: color 150ms ease, transform 150ms ease; }
.footer-social a:hover { color: var(--text-primary); transform: translateY(-2px); }
.footer-social svg { display: block; }

.footer-bottom p { color: var(--text-secondary); font-size: 0.85rem; }

/* The public test of an app's privacy claim, where it makes one */
.footer-bottom .footer-offline {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

.footer-privacy, .footer-ai { opacity: 0.85; }

@media (min-width: 720px) {
  .switcher-title { padding: 0 2rem; }
  .app-switcher-marquee { padding: 0.5rem 2rem 1.5rem; }
  .footer-powered p { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  /* No sliding: the carousel becomes a row the reader scrolls. */
  .app-switcher-track { animation: none; }
  .app-switcher-marquee { overflow-x: auto; }
  .switcher-card,
  .footer-social a { transition: none; }
  .switcher-card:hover,
  .footer-social a:hover { transform: none; }
}

/* ASTROQUIZ SPECIFIC CSS */
.quiz-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
}
.difficulty-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.difficulty-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.1rem 0.75rem;
  min-height: 80px;
  background: rgba(240, 244, 255, 0.96);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: #1a1f33;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.difficulty-btn:hover {
  background: #ffffff;
  border-color: rgba(162, 130, 255, 0.55);
  color: #0a0e1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.difficulty-btn.active {
  background: linear-gradient(135deg, #a282ff 0%, #7c5fe5 100%);
  border-color: rgba(162, 130, 255, 0.9);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(162, 130, 255, 0.35),
    0 12px 28px rgba(124, 95, 229, 0.55);
}
.difficulty-btn.active:hover {
  background: linear-gradient(135deg, #b094ff 0%, #8b6ff0 100%);
  border-color: rgba(162, 130, 255, 1);
  color: #ffffff;
  transform: translateY(-3px);
}
.difficulty-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.difficulty-count {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.65;
  letter-spacing: 0.04em;
}
.difficulty-btn.active .difficulty-count {
  opacity: 0.92;
}
@media (max-width: 480px) {
  .difficulty-selector { grid-template-columns: repeat(2, 1fr); }
  .difficulty-btn { min-height: 72px; padding: 0.9rem 0.5rem; }
}
.score-board {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 600;
  color: var(--accent-blue);
}
.question-header {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
#question-text {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 2rem;
  color: var(--text-primary);
}
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.option-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.option-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
.options-grid.disabled {
  pointer-events: none;
}
.option-btn.correct {
  background: rgba(160, 192, 255, 0.15);
  border-color: var(--accent-blue);
  color: #fff;
}
.option-btn.wrong {
  background: rgba(255, 107, 107, 0.15);
  border-color: #ff6b6b;
  color: #fff;
}
.feedback-hidden {
  display: none;
}
.feedback-visible {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: fadeIn 0.4s ease-out forwards;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
#feedback-text {
  font-size: 1.4rem;
  margin: 0;
}
#feedback-explanation {
  color: var(--text-secondary);
  line-height: 1.6;
}
#next-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}