/* ═══════════════════════════════════════════════════════════════
   theme-plants.css — Plant Quest colour theme.
   Part of Emma's Learning World — shared/theme-*.css pattern.

   Import order in emma/plants/index.html:
     1. shared/core.css
     2. shared/theme-plants.css   ← this file
     3. shared/components.css
═══════════════════════════════════════════════════════════════ */

/* ── THEME VARIABLES ──────────────────────────────────────────
   All --theme-* variables must be set.
   components.css uses only these names — never raw hex values.
────────────────────────────────────────────────────────────── */
:root {
  /* ── Backgrounds ── */
  --theme-bg-dark:  #071a0e;   /* Deep forest green — body base colour */
  --theme-bg-mid:   #0f2d18;   /* Card faces, panel interiors */
  --theme-bg-warm:  #1a4a28;   /* HUD blocks, progress bar tracks */

  /* ── Card / panel backgrounds with opacity ── */
  --theme-card-bg:  rgba(15,45,24,0.88);
  --theme-panel-bg: rgba(26,74,40,0.65);

  /* ── Accent (foliage bright green) ── */
  --theme-accent:       #4ade80;   /* Buttons, borders, primary highlights */
  --theme-accent-dark:  #16a34a;   /* Darker end of accent gradients */
  --theme-accent-light: #86efac;   /* Subtitles, labels, home btn text */

  /* ── Emphasis (petal yellow — scores, stars, HUD values) ── */
  --theme-highlight: #fbbf24;

  /* ── Text ── */
  --theme-text:     #f0fdf4;              /* Near-white with green tint */
  --theme-text-dim: rgba(240,253,244,0.55);

  /* ── Borders ── */
  --theme-border:        rgba(74,222,128,0.20);
  --theme-border-active: rgba(74,222,128,0.50);

  /* ── Shadows ── */
  --theme-title-shadow: #14532d;
  --theme-btn-shadow:   #166534;

  /* ── Typography ── */
  --theme-font-display: 'Fredoka One', cursive;
  --theme-font-body:    'Nunito', sans-serif;
}

/* ── BODY BASE ── */
body {
  background: linear-gradient(135deg, #071a0e 0%, #0f3020 45%, #071a0e 100%);
}

/* ── BOTANICAL ATMOSPHERIC OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 320px 420px at  5% 30%, rgba(74,222,128,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 260px 360px at 95% 20%, rgba(74,222,128,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 50% 100%,rgba(15,45,24,0.60)   0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* ── FLOATING PLANT EMOJIS (populated by JS in index.html) ── */
.floater {
  position:   fixed;
  font-size:  1.8rem;
  pointer-events: none;
  z-index:    0;
  opacity:    0.12;
  animation:  plantFloat var(--fd, 5s) ease-in-out infinite alternate;
}
@keyframes plantFloat {
  from { transform: translateY(0)    rotate(-5deg); }
  to   { transform: translateY(-18px) rotate( 5deg); }
}

/* ══════════════════════════════════════════════════════════════
   STAGE CARD BORDER COLOURS (s1 / s2 / s3)
   components.css renders cards with class="stage-card s1" etc.
══════════════════════════════════════════════════════════════ */
.stage-card.s1 {
  border-color: rgba(74,222,128,0.45);
  animation: s1plantpulse 2.5s ease-in-out infinite alternate;
}
.stage-card.s1:hover {
  border-color: #4ade80;
  box-shadow:   0 15px 40px rgba(74,222,128,0.28);
  animation:    none;
}
@keyframes s1plantpulse {
  from { border-color: rgba(74,222,128,0.28); box-shadow: 0 0 0    rgba(74,222,128,0);    }
  to   { border-color: rgba(74,222,128,0.65); box-shadow: 0 0 18px rgba(74,222,128,0.18); }
}

.stage-card.s2 { border-color: rgba(251,191,36,0.38); }
.stage-card.s2:hover {
  border-color: #fbbf24;
  box-shadow:   0 15px 40px rgba(251,191,36,0.22);
}

.stage-card.s3 { border-color: rgba(245,158,11,0.45); }
.stage-card.s3:hover {
  border-color: #f59e0b;
  box-shadow:   0 15px 40px rgba(245,158,11,0.28);
}

/* ── STAGE PLAY BUTTON COLOURS ── */
/* Stage 1: bright lime — dark text for contrast on light background */
.btn-stage.s1 {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  box-shadow: 0 4px 0 #166534;
  color: #052e16;
}
/* Stage 2: pollen yellow — dark text for contrast */
.btn-stage.s2 {
  background: linear-gradient(135deg, #fbbf24, #ca8a04);
  box-shadow: 0 4px 0 #854d0e;
  color: #451a03;
}
/* Stage 3: amber/crown */
.btn-stage.s3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 0 #92400e;
  color: #451a03;
}

/* ── TITLE SHADOW ── */
.game-title {
  text-shadow: 3px 3px 0 var(--theme-title-shadow),
               0 0 30px rgba(74,222,128,0.28);
}

/* ── QUESTION CATEGORY PILL ── */
.question-category {
  background: rgba(74,222,128,0.12);
  border:     1px solid rgba(74,222,128,0.28);
  color:      var(--theme-accent-light);
}

/* ── SVG PLANT DIAGRAM WRAPPER (Stage 1 labelling questions) ── */
.plant-svg-wrap {
  display:         flex;
  justify-content: center;
  margin-bottom:   0.75rem;
}
.plant-svg-wrap svg {
  max-height: 220px;
  width:      auto;
}