/* =============================================================
   theme-fractions.css — Fraction Adventure (navy / pink / amber)
   Prompt 2C — pairs with shared/core.css + shared/components.css
   ============================================================= */

/* Google Fonts CDN removed — fonts self-hosted via shared/fonts.css */

/* ── Theme tokens ───────────────────────────────────────────── */
:root {
  --theme-bg:             #0d0a3d;
  --theme-card-bg:        rgba(13, 10, 61, 0.88);
  --theme-panel-bg:       rgba(13, 10, 61, 0.75);
  --theme-text:           #f0e6ff;
  --theme-text-dim:       #b8a9d9;
  --theme-accent:         #ec4899;
  --theme-accent-dark:    #be185d;
  --theme-accent-light:   #f9a8d4;
  --theme-highlight:      #fbbf24;
  --theme-border:         rgba(236, 72, 153, 0.25);
  --theme-border-active:  rgba(236, 72, 153, 0.7);
  --theme-correct:        #4ade80;
  --theme-wrong:          #f87171;
  --theme-font-display:   'Fredoka One', cursive;
  --theme-font-body:      'Nunito', sans-serif;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family:      var(--theme-font-body);
  background-color: var(--theme-bg);
  background-image: linear-gradient(160deg, #0d0a3d 0%, #1a0e5c 50%, #0d1558 100%);
  background-attachment: fixed;
  color:            var(--theme-text);
  min-height:       100vh;
}

/* ── Twinkling dot starfield ────────────────────────────────── */
/* .space-dot avoids conflict with .star (end screen) and .bg-star (spelling) */
#stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.space-dot {
  position:      absolute;
  background:    white;
  border-radius: 50%;
  opacity:       0.6;
  animation:     dotTwinkle var(--dur, 2s) var(--delay, 0s) ease-in-out infinite alternate;
}

@keyframes dotTwinkle {
  from { opacity: 0.15; transform: scale(0.8); }
  to   { opacity: 0.85; transform: scale(1.2); }
}

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3,
.game-title,
.stage-name,
.rank-title {
  font-family: var(--theme-font-display);
}

/* ── Cards / Panels ─────────────────────────────────────────── */
.card, .stage-card, .panel {
  background:    var(--theme-card-bg);
  border:        1.5px solid var(--theme-border);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

/* ── Stage card accent colours ──────────────────────────────── */
.stage-card[data-stage="1"] { border-color: #4ade80; }
.stage-card[data-stage="2"] { border-color: #fbbf24; }
.stage-card[data-stage="3"] { border-color: #f87171; }

.stage-card[data-stage="1"] .stage-emoji { color: #4ade80; }
.stage-card[data-stage="2"] .stage-emoji { color: #fbbf24; }
.stage-card[data-stage="3"] .stage-emoji { color: #f87171; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background:    var(--theme-accent);
  color:         #fff;
  font-family:   var(--theme-font-display);
  border:        none;
  border-radius: 50px;
  padding:       0.7rem 2rem;
  font-size:     1.1rem;
  cursor:        pointer;
  transition:    background 0.2s, transform 0.1s;
}
.btn-primary:hover { background: var(--theme-accent-dark); transform: translateY(-1px); }

/* ── Stage "Play" buttons — solid coloured, one per stage ───── */
.btn-stage {
  display:       inline-block;
  font-family:   var(--theme-font-display);
  font-size:     1rem;
  color:         #fff;
  border:        none;
  border-radius: 50px;
  padding:       0.55rem 1.4rem;
  cursor:        pointer;
  transition:    filter 0.15s, transform 0.1s;
}
.btn-stage:hover { filter: brightness(1.12); transform: translateY(-2px); }

/* s1 = green  (matches stage card border #4ade80) */
.btn-stage.s1 {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  box-shadow: 0 4px 0 #166534;
}
/* s2 = amber  (matches stage card border #fbbf24) */
.btn-stage.s2 {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 4px 0 #92400e;
}
/* s3 = coral/red (matches stage card border #f87171) */
.btn-stage.s3 {
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 4px 0 #991b1b;
}

/* ── Answer buttons (override core.css — uniform dark card + pink hover) ── */
.option-btn {
  background:    rgba(255, 255, 255, 0.06) !important;
  border:        1.5px solid var(--theme-border) !important;
  color:         var(--theme-text) !important;
  border-radius: 14px !important;
  transition:    background 0.18s, border-color 0.18s, transform 0.1s;
}
.option-btn:hover:not(:disabled) {
  background:   rgba(236, 72, 153, 0.18) !important;
  border-color: var(--theme-accent) !important;
  transform:    translateY(-2px);
}
.option-btn.correct-answer {
  background:   rgba(74, 222, 128, 0.18) !important;
  border-color: var(--theme-correct) !important;
}
.option-btn.wrong-answer {
  background:   rgba(248, 113, 113, 0.18) !important;
  border-color: var(--theme-wrong) !important;
}

/* ── HUD ────────────────────────────────────────────────────── */
.hud-block {
  background:    var(--theme-panel-bg);
  border:        1px solid var(--theme-border);
  border-radius: 12px;
}
.hud-label { color: var(--theme-text-dim); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.hud-value { color: var(--theme-highlight); font-family: var(--theme-font-display); font-size: 1.05rem; }

/* ── Timer bar ──────────────────────────────────────────────── */
.timer-fill { background: var(--theme-accent); }
.timer-fill.warning { background: #f87171; }

/* ── Feedback overlay ───────────────────────────────────────── */
.feedback-overlay.correct { background: rgba(74, 222, 128, 0.15); }
.feedback-overlay.wrong   { background: rgba(248, 113, 113, 0.12); }

/* ── Question category pill — hidden for fractions ─────────── */
.question-category { display: none; }

/* ── Question display area ──────────────────────────────────── */
.q-text {
  font-size:     1.15rem;
  font-weight:   700;
  text-align:    center;
  color:         var(--theme-text);
  margin:        0 0 1rem;
  line-height:   1.4;
}

/* ── Fraction visuals ───────────────────────────────────────── */
.fraction-visual {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             18px;
  flex-wrap:       wrap;
  margin:          0.5rem 0 0.75rem;
}

/* Large stacked fraction (used in visuals) */
.big-frac {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  font-family:     var(--theme-font-display);
  line-height:     1;
}
.big-frac-n {
  font-size:      2.2rem;
  color:          var(--theme-highlight);
  border-bottom:  3px solid var(--theme-accent-light);
  padding-bottom: 0.15rem;
  min-width:      1.8rem;
  text-align:     center;
}
.big-frac-d {
  font-size:  2.2rem;
  color:      var(--theme-text);
  padding-top: 0.15rem;
  min-width:  1.8rem;
  text-align: center;
}

/* Inline stacked fraction (used in answer buttons via formatAnswerText / S8) */
.frac {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  font-family:    var(--theme-font-display);
  line-height:    1;
  vertical-align: middle;
  margin:         0 0.1em;
}
.frac-n {
  font-size:      1rem;
  color:          var(--theme-highlight);
  border-bottom:  2px solid var(--theme-accent-light);
  padding-bottom: 0.05rem;
  min-width:      1.1rem;
  text-align:     center;
}
.frac-d {
  font-size:  1rem;
  color:      var(--theme-text);
  padding-top: 0.05rem;
  min-width:  1.1rem;
  text-align: center;
}

/* Arithmetic sum expression */
.sum-expr {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  flex-wrap:   wrap;
  justify-content: center;
}
.sum-op {
  font-family: var(--theme-font-display);
  font-size:   1.8rem;
  color:       var(--theme-accent-light);
  line-height: 1;
}

/* Compare (side-by-side) visual */
.compare-row {
  display:     flex;
  align-items: center;
  gap:         2rem;
  justify-content: center;
}

/* Row of fractions */
.frac-row {
  display:     flex;
  align-items: flex-end;
  gap:         1.2rem;
  justify-content: center;
  flex-wrap:   wrap;
}

/* Object grid (emoji fractions) */
.objs-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.35rem;
  max-width: 240px;
  justify-content: center;
}
.obj-item {
  font-size: 1.5rem;
  line-height: 1;
  transition: opacity 0.2s;
}
.obj-item.shaded  { opacity: 1; }
.obj-item.unshaded { opacity: 0.2; }

/* ── End screen ─────────────────────────────────────────────── */
.end-screen {
  background:    var(--theme-card-bg);
  border:        1.5px solid var(--theme-border);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
.rank-title  { color: var(--theme-highlight); font-family: var(--theme-font-display); }
.rank-desc   { color: var(--theme-text-dim); font-size: 0.88rem; }

/* Badge chips inherit --theme-border-active from components.css */
.badge-info strong { color: var(--theme-highlight); }
.badge-info span   { color: var(--theme-text-dim); }

/* ── Welcome / Game-over screens ────────────────────────────── */
.welcome-screen,
.game-over-screen {
  background:    var(--theme-card-bg);
  border:        1.5px solid var(--theme-border);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}

/* ── Scrollbar tint ─────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--theme-accent); border-radius: 4px; }
::-webkit-scrollbar        { width: 6px; background: transparent; }