/* ═══════════════════════════════════════════════════════════════
   core.css — Shared foundation for all Emma's Learning World games

   Import order (in each game's index.html):
     1. core.css          ← this file
     2. theme-*.css       ← game-specific palette and font
     3. components.css    ← shared UI components (uses --theme-* vars)

   This file defines:
     • Universal correct / wrong colours (same across all games)
     • CSS reset
     • Body defaults (font and colour pulled from theme vars)
     • Screen management (.screen / .screen.active)
     • All shared @keyframes animations
     • Base button classes (.btn, .btn-primary, .btn-secondary)
     • .divider utility

   Nothing in this file is game-specific. No hex values except
   --correct and --wrong, which never vary by game.
═══════════════════════════════════════════════════════════════ */

/* ── UNIVERSAL SEMANTIC COLOURS ── */
:root {
  --correct: #4caf50;   /* correct-answer feedback — same across all games */
  --wrong:   #e53935;   /* wrong-answer feedback — same across all games */
}

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

/* ── BASE ── */
body {
  font-family: var(--theme-font-body, 'Nunito', sans-serif);
  background:  var(--theme-bg-dark, #111);
  color:       var(--theme-text, #fff);
  min-height:  100vh;
  overflow-x:  hidden;
}

/* ── SCREEN MANAGEMENT ─────────────────────────────────────────
   game-shell.js toggles .active to route between screens.
   display:none  → display:flex with a short entrance animation.
────────────────────────────────────────────────────────────── */
.screen {
  position:        relative;
  z-index:         2;
  display:         none;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         1rem;
  text-align:      center;
}
.screen.active {
  display:   flex;
  animation: screenIn 0.4s ease-out;
}

/* ── SHARED @keyframes ─────────────────────────────────────────
   Referenced by components.css and game-shell.js DOM injections.
   No Stone Age–specific animations here; those live in
   theme-stone-age.css alongside the elements that use them.
────────────────────────────────────────────────────────────── */

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

/* Welcome screen character emoji */
@keyframes characterBounce {
  0%, 100% { transform: translateY(0)   rotate(-3deg); }
  50%       { transform: translateY(-15px) rotate(3deg); }
}

/* Answer button states */
@keyframes correctPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}
@keyframes revealCorrect {
  from { filter: brightness(0.75); }
  to   { filter: brightness(1.1); }
}

/* Feedback overlay entrance */
@keyframes feedbackBounce {
  from { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
@keyframes pointsPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes factSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Floating score popup */
@keyframes scoreFloat {
  0%   { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.3); }
}

/* Streak bonus badge */
@keyframes bonusPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); }
}

/* End screen */
@keyframes starPop {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes medalSpin {
  from { transform: rotateY(90deg) scale(0); opacity: 0; }
  to   { transform: rotateY(0deg)  scale(1); opacity: 1; }
}
@keyframes recordPulse {
  from { box-shadow: 0 0 0    rgba(255,140,0,0.5); }
  to   { box-shadow: 0 0 20px rgba(255,140,0,0.8); }
}

/* Generic pulse for "tap to continue" cue */
@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

/* Game-over sad emoji */
@keyframes sadBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── UTILITY ── */
.divider {
  width:      60%;
  height:     1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--theme-border, rgba(255,255,255,0.2)),
    transparent
  );
  margin: 0.8rem auto;
}

/* ── BASE BUTTONS ──────────────────────────────────────────────
   Colour values come from theme vars.
   min-height: 44px on all interactive elements for tablet tap targets.
────────────────────────────────────────────────────────────── */
.btn {
  font-family:   var(--theme-font-body, 'Nunito', sans-serif);
  font-weight:   800;
  font-size:     1.1rem;
  padding:       0.9rem 2rem;
  min-height:    44px;
  border:        none;
  border-radius: 50px;
  cursor:        pointer;
  transition:    transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.5px;
}
.btn-primary {
  background:  linear-gradient(135deg, var(--theme-accent, #ff8c00), var(--theme-accent-dark, #e65c00));
  color:       #fff;
  box-shadow:  0 6px 0 var(--theme-btn-shadow, #8b3a00), 0 8px 15px rgba(0,0,0,0.3);
  font-size:   1.3rem;
  padding:     1rem 2.5rem;
}
.btn-primary:hover {
  box-shadow: 0 8px 0 var(--theme-btn-shadow, #8b3a00), 0 12px 20px rgba(0,0,0,0.4);
  transform:  translateY(-2px) scale(1.03);
}
.btn-secondary {
  background:  linear-gradient(135deg, var(--theme-bg-mid, #222), var(--theme-bg-dark, #111));
  color:       var(--theme-text, #fff);
  border:      2px solid var(--theme-accent, #ff8c00);
  box-shadow:  0 4px 0 var(--theme-bg-dark, #111);
}
.btn-secondary:hover { transform: translateY(-2px); }