/* ============================================================
   chem-y11-m3-theme.css — Chemistry Year 11 Module 3
   Palette: Sky blue / indigo / cyan (Phase F)
   ============================================================ */
:root {
  --primary:       #38bdf8;
  --primary-mid:   #0ea5e9;
  --primary-light: rgba(56, 189, 248, 0.12);
  --accent:        #818cf8;
  --accent-dark:   #6366f1;
  --accent-light:  rgba(129, 140, 248, 0.12);
  --accent-bg:     rgba(255, 255, 255, 0.88);
  --surface:       rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --mesh-1: #e0f2fe;
  --mesh-2: #e0e7ff;
  --mesh-3: #f0f9ff;
  --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%),
                   radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%),
                   radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%),
                   #f8fafc;
  --h2-color:      var(--heading-color);
  --shadow-accent: 0 4px 20px var(--accent-light);
}

body {
  background: radial-gradient(ellipse at 10% 20%, rgba(186,230,255,0.9) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 10%, rgba(186,210,255,0.85) 0%, transparent 50%),
              radial-gradient(ellipse at 60% 80%, rgba(186,230,255,0.8) 0%, transparent 50%),
              linear-gradient(155deg, #e0f2fe 0%, #dbeafe 40%, #e0e7ff 75%, #f0f9ff 100%);
  min-height: 100vh;
}

.reveal-btn,
.we-reveal-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 18px;
  background: #534ab7;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.reveal-btn:hover,
.we-reveal-btn:hover {
  background: #3c3489;
}

.reveal-btn:disabled,
.we-reveal-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  opacity: 0.7;
}

.ex-step.revealed,
.we-step.is-visible {
  animation: revealStep 0.35s ease both;
}

@keyframes revealStep {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.indicators-diagram {
  max-width: 680px;
  width: 100%;
  display: block;
  margin: 20px auto;
}

.interactive-embed iframe {
  height: 420px !important;
}

.interactive-embed[data-section="Game"] iframe {
  height: 460px !important;
}

@media (max-width: 640px) {
  .interactive-embed iframe,
  .interactive-embed[data-section="Game"] iframe {
    height: 380px !important;
  }
}