/* ═══════════════════════════════════════════════════════════════
   theme-spelling.css — Magical purple / starry-night theme
   for Emma's Spelling Quest.

   Depends on: core.css, components.css (loaded before this file
   in spelling/index.html).

   Follows the same --theme-* variable contract as theme-stone-age.css.
   rgba pairs are defined as complete strings because CSS cannot
   evaluate rgba(var(--hex), 0.9) — the hex is treated as a string.

   Stage card borders / button gradients:
     s1 — orange (#fb923c)
     s2 — teal   (#06b6d4)
     s3 — pink   (#f472b6)
═══════════════════════════════════════════════════════════════ */

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

/* ── THEME TOKENS ──────────────────────────────────────────────── */
:root {
  /* Fonts */
  --theme-font-display: 'Bangers', cursive;
  --theme-font-body:    'Nunito', sans-serif;

  /* Backgrounds */
  --theme-bg:        #0d0620;
  --theme-card-bg:   rgba(26, 10, 61, 0.88);
  --theme-panel-bg:  rgba(26, 10, 61, 0.75);

  /* Borders */
  --theme-border:        rgba(167, 139, 250, 0.25);
  --theme-border-active: rgba(167, 139, 250, 0.6);

  /* Accent palette — purple / gold */
  --theme-accent:       #7c3aed;
  --theme-accent-dark:  #5b21b6;
  --theme-accent-light: #a78bfa;
  --theme-highlight:    #ffd700;

  /* Text */
  --theme-text:     #faf5ff;
  --theme-text-dim: rgba(250, 245, 255, 0.65);

  /* Shadow colours */
  --theme-title-shadow: #5b21b6;
  --theme-btn-shadow:   #3b0764;
}

/* ── BODY ──────────────────────────────────────────────────────── */
body {
  background: linear-gradient(160deg, #0d0620 0%, #1a0a3d 50%, #0d1a3d 100%);
  background-attachment: fixed;
}

/* ── TITLE TEXT SHADOW ─────────────────────────────────────────── */
.game-title {
  text-shadow: 3px 3px 0 #5b21b6, 0 0 30px rgba(255, 215, 0, 0.5);
}

/* ── STAGE CARDS ───────────────────────────────────────────────── */
.stage-card.s1 {
  border-color: rgba(251, 146, 60, 0.5);
  animation:    cardPulseS1 2.5s ease-in-out infinite alternate;
}
.stage-card.s1:hover {
  border-color: #fb923c;
  box-shadow:   0 15px 40px rgba(251, 146, 60, 0.3);
  animation:    none;
}
@keyframes cardPulseS1 {
  from { border-color: rgba(251, 146, 60, 0.3); }
  to   { border-color: rgba(251, 146, 60, 0.7); }
}
.stage-card.s2 { border-color: rgba(6, 182, 212, 0.4); }
.stage-card.s2:hover {
  border-color: #06b6d4;
  box-shadow:   0 15px 40px rgba(6, 182, 212, 0.3);
}
.stage-card.s3 { border-color: rgba(244, 114, 182, 0.4); }
.stage-card.s3:hover {
  border-color: #f472b6;
  box-shadow:   0 15px 40px rgba(244, 114, 182, 0.3);
}

/* Stage card "Play!" button gradients */
.btn-stage.s1 { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 4px 0 #9a3412; }
.btn-stage.s2 { background: linear-gradient(135deg, #0891b2, #0e7490); box-shadow: 0 4px 0 #164e63; }
.btn-stage.s3 { background: linear-gradient(135deg, #db2777, #be185d); box-shadow: 0 4px 0 #831843; }

/* ── QUESTION CATEGORY BADGE ───────────────────────────────────── */
/* Spelling has no category field — we use a format badge inside the
   question display instead, so the shell-injected category badge is hidden. */
.question-category { display: none; }

/* ── ANSWER BUTTONS (Spelling override) ────────────────────────── */
/* Spelling uses a uniform dark card + purple hover instead of the
   four-colour gradient palette used by Stone Age. CSS-only override. */
.answer-btn[data-idx="0"],
.answer-btn[data-idx="1"],
.answer-btn[data-idx="2"],
.answer-btn[data-idx="3"] {
  background:    rgba(26, 10, 61, 0.88);
  border:        2px solid rgba(167, 139, 250, 0.25);
  border-bottom: 2px solid rgba(167, 139, 250, 0.25);
  box-shadow:    none;
  color:         #faf5ff;
}
.answer-btn:hover:not(:disabled) {
  transform:    translateY(-3px);
  filter:       none;
  border-color: #a78bfa;
  background:   rgba(124, 58, 237, 0.2);
}

/* Answer letter badge — Bangers style matching original Spelling game */
.answer-letter {
  font-family:    'Bangers', cursive;
  font-size:      1.1rem;
  letter-spacing: 1px;
  background:     rgba(167, 139, 250, 0.2);
  border:         1px solid rgba(167, 139, 250, 0.4);
  border-radius:  8px;
  padding:        0.15rem 0.5rem;
  min-width:      28px;
  width:          auto;
  height:         auto;
  text-align:     center;
  color:          #a78bfa;
}

/* ── FORMAT BADGE (injected by renderQuestion callback) ─────────── */
.format-badge {
  display:        inline-block;
  font-family:    'Bangers', cursive;
  font-size:      0.85rem;
  letter-spacing: 1.5px;
  padding:        0.25rem 1rem;
  border-radius:  20px;
  margin-bottom:  0.9rem;
}
.fmt-hear { background: rgba(124,  58, 237, 0.3);  border: 1px solid rgba(124,  58, 237, 0.6);  color: #a78bfa; }
.fmt-see  { background: rgba(  6, 182, 212, 0.25); border: 1px solid rgba(  6, 182, 212, 0.5);  color: #06b6d4; }
.fmt-gap  { background: rgba(251, 146,  60, 0.25); border: 1px solid rgba(251, 146,  60, 0.5);  color: #fb923c; }
.fmt-both { background: rgba(244, 114, 182, 0.25); border: 1px solid rgba(244, 114, 182, 0.5);  color: #f472b6; }

/* ── QUESTION DISPLAY CONTENT ───────────────────────────────────── */
.q-instruction {
  font-size:     1rem;
  font-weight:   700;
  color:         rgba(250, 245, 255, 0.75);
  margin-bottom: 0.7rem;
}

.q-cue-label {
  font-size:     0.9rem;
  font-weight:   700;
  color:         #a78bfa;
  margin-top:    0.9rem;
}

/* Emoji bouncing above word description */
.word-emoji {
  font-size:     clamp(3rem, 10vw, 5rem);
  display:       block;
  margin-bottom: 0.3rem;
  filter:        drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
  animation:     emojiBounce 1.8s ease-in-out infinite;
}
@keyframes emojiBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Word description line (shown in see / both formats) */
.word-desc {
  font-size:     1.15rem;
  font-weight:   800;
  color:         #faf5ff;
  font-style:    italic;
  margin-bottom: 0.4rem;
}

/* Gap-fill sentence */
.gap-sentence {
  font-size:     clamp(1rem, 3.5vw, 1.3rem);
  font-weight:   700;
  line-height:   1.6;
  color:         #faf5ff;
  margin-bottom: 0.3rem;
}
/* Animated blank line inside gap sentence */
.blank {
  display:        inline-block;
  border-bottom:  3px solid #ffd700;
  min-width:      80px;
  color:          #ffd700;
  font-weight:    900;
  padding:        0 0.3rem;
  animation:      blinkBlank 1.5s ease-in-out infinite alternate;
}
@keyframes blinkBlank {
  from { opacity: 0.6; }
  to   { opacity: 1;   }
}

/* "🔊 Say the word!" button */
.btn-speak {
  background:  linear-gradient(135deg, #7c3aed, #5b21b6);
  border:      none;
  border-radius: 50px;
  color:       #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size:   1.1rem;
  padding:     0.75rem 2rem;
  cursor:      pointer;
  box-shadow:  0 4px 0 #3b0764;
  margin:      0.4rem 0;
  transition:  transform 0.15s, filter 0.15s;
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  min-height:  44px;
}
.btn-speak:hover  { transform: scale(1.05); filter: brightness(1.1); }
.btn-speak:active { transform: scale(0.97) translateY(2px); box-shadow: 0 2px 0 #3b0764; }

/* ── BACKGROUND STARS ───────────────────────────────────────────── */
/* Uses .bg-star (not .star) to avoid conflict with end-screen star elements. */
.bg-star {
  position:       fixed;
  pointer-events: none;
  z-index:        0;
  font-size:      1rem;
  opacity:        0;
  animation:      twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.1; transform: scale(0.8); }
  100% { opacity: 0.7; transform: scale(1.2); }
}