/* ═══════════════════════════════════════════════════════════
   FISSY KIDS THEME — El Camino del Dinero · Niños 7-14
   Palette: Purple / Teal / Gold / Pink on light cream
   Font: Nunito (bold, rounded, readable for kids)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900;1000&display=swap');

/* ── Token overrides ── */
:root {
  --g-primary:     #7c3aed;          /* Vibrant purple */
  --g-primary-d:   #6d28d9;
  --g-secondary:   #06b6d4;          /* Cyan/teal */
  --g-accent:      #f59e0b;          /* Gold */
  --g-pink:        #ec4899;          /* Pink for rewards */
  --g-bg:          #f0f2ff;          /* Soft lavender-white */
  --g-surface:     #ffffff;
  --g-card:        #ffffff;
  --g-border:      #dde3ff;
  --g-text:        #1a1040;
  --g-muted:       #6b7280;
  --g-danger:      #f43f5e;
  --g-warn:        #f59e0b;
  --g-success:     #10b981;
  --g-info:        #7c3aed;
  --g-gold:        #f59e0b;
  --radius:        22px;
  --radius-sm:     14px;
}

/* ── Font ── */
#game-root,
#game-root * {
  font-family: 'Nunito', system-ui, sans-serif;
}

/* ── Background ── */
#game-root {
  background: var(--g-bg);
  color: var(--g-text);
}

/* ── Hero title: gradient purple→teal ── */
.g-hero__title {
  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards: white with colored border ── */
.g-card {
  background: var(--g-card);
  border: 2px solid var(--g-border);
  box-shadow: 0 4px 20px rgba(124,58,237,.08);
}
.g-card--glow {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 2px rgba(124,58,237,.15), 0 8px 32px rgba(124,58,237,.12);
}

/* ── Buttons: solid purple, fun hover ── */
.g-btn--primary {
  background: var(--g-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
  letter-spacing: .02em;
}
.g-btn--primary:hover {
  background: #8b5cf6;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(124,58,237,.45);
}

/* ── Decision buttons: bright colorful cards ── */
.decision-btn {
  background: #fff;
  border: 3px solid #dde3ff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  color: var(--g-text);
}
.decision-btn:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.decision-btn.selected {
  border-color: var(--g-primary);
  background: rgba(124,58,237,.08);
  box-shadow: 0 0 0 3px rgba(124,58,237,.2), 0 8px 24px rgba(124,58,237,.15);
}
.decision-btn--save    { border-color: rgba(16,185,129,.4);  background: rgba(16,185,129,.05); }
.decision-btn--invest  { border-color: rgba(6,182,212,.4);   background: rgba(6,182,212,.05); }
.decision-btn--spend   { border-color: rgba(245,158,11,.4);  background: rgba(245,158,11,.05); }
.decision-btn--save.selected    { border-color:#10b981; background:rgba(16,185,129,.12); box-shadow:0 0 0 3px rgba(16,185,129,.2); }
.decision-btn--invest.selected  { border-color:#06b6d4; background:rgba(6,182,212,.12);  box-shadow:0 0 0 3px rgba(6,182,212,.2); }
.decision-btn--spend.selected   { border-color:#f59e0b; background:rgba(245,158,11,.12); box-shadow:0 0 0 3px rgba(245,158,11,.2); }

/* ── Inputs: light with purple focus ── */
.g-input,
.g-select {
  background: #fff;
  border-color: #dde3ff;
  color: var(--g-text);
  border-radius: var(--radius-sm);
}
.g-input:focus,
.g-select:focus {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

/* ── Labels: bold purple ── */
.g-label { color: var(--g-primary); font-size: 14px; }

/* ── Role cards ── */
.g-role-card {
  background: #fff;
  border-color: #dde3ff;
  color: var(--g-text);
}
.g-role-card:hover   { border-color: var(--g-primary); background: rgba(124,58,237,.04); }
.g-role-card.selected { border-color: var(--g-primary); background: rgba(124,58,237,.08); }

/* ── Player chips ── */
.g-player-chip {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.3);
  color: var(--g-primary);
  font-weight: 800;
}

/* ── Code badge ── */
.g-code-badge {
  background: rgba(124,58,237,.1);
  border-color: var(--g-primary);
}
.g-code-badge__code { color: var(--g-primary); }

/* ── Stats / meters ── */
.g-meter-fill { background: linear-gradient(90deg, var(--g-primary), var(--g-secondary)); }

/* ── Spend buttons ── */
.spend-btn {
  background: #fff;
  border-color: #dde3ff;
  color: var(--g-text);
  border-radius: 16px;
}
.spend-btn:hover  { border-color: var(--g-primary); background: rgba(124,58,237,.05); }
.spend-btn.selected { border-color: var(--g-primary); background: rgba(124,58,237,.1); }

/* ── Progress bar: purple gradient ── */
.progress-bar-fill,
.g-progress__fill {
  background: linear-gradient(90deg, var(--g-primary), var(--g-secondary));
}

/* ── Fun decorations: subtle confetti dots ── */
#game-root::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #f59e0b, #ec4899, #10b981);
  z-index: 999;
}

/* ── Level badge: vibrant ── */
.level-badge,
.g-level-badge {
  background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
}

/* ── Outline button ── */
.g-btn--outline {
  color: var(--g-primary);
  border-color: var(--g-primary);
}
.g-btn--outline:hover { background: rgba(124,58,237,.08); }

/* ── Ghost button ── */
.g-btn--ghost {
  background: #fff;
  border-color: #dde3ff;
  color: var(--g-text);
}
.g-btn--ghost:hover { background: rgba(124,58,237,.05); border-color: var(--g-primary); }

/* ── Animations ── */
@keyframes kids-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes kids-bounce-in {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes kids-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes kids-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(124,58,237,.4); }
  70%  { box-shadow: 0 0 0 14px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0   rgba(124,58,237,0); }
}

/* Hero icon floats gently */
.g-hero__emoji {
  animation: kids-float 3s ease-in-out infinite;
}

/* Cards animate in */
.g-screen.active .g-card {
  animation: kids-bounce-in 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.g-screen.active .g-card:nth-child(2) { animation-delay: .06s; }
.g-screen.active .g-card:nth-child(3) { animation-delay: .12s; }

/* Primary CTA pulses subtly */
.g-btn--primary {
  animation: kids-pulse-ring 2.4s ease-out infinite;
}
.g-btn--primary:hover {
  animation: none;
}

/* Solo card: shimmer border */
.g-solo-card {
  background: linear-gradient(135deg, #fff 0%, rgba(124,58,237,.04) 100%);
  border: 2px solid var(--g-primary);
  position: relative;
  overflow: hidden;
}
.g-solo-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124,58,237,.08) 40%,
    rgba(6,182,212,.08) 60%,
    transparent 100%);
  background-size: 200% 100%;
  animation: kids-shimmer 2.4s linear infinite;
  pointer-events: none;
}

/* Role cards: pop on hover */
.g-role-card:hover {
  transform: translateY(-4px) scale(1.03);
}

/* Body background: kids photo with light overlay */
#game-root {
  background-color: #f0f2ff;
  background-image:
    /* Light frosted overlay — keeps forms readable */
    linear-gradient(
      160deg,
      rgba(240,242,255,.92) 0%,
      rgba(245,240,255,.94) 50%,
      rgba(237,249,255,.92) 100%
    ),
    /* Game photo */
    url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=768,fit=crop/d95Zbxjkg1CZkKrV/generated/generated-sCwNHh59Y4KUKVBX.png');
  background-size: 100% 100%, cover;
  background-position: 0 0, center top;
  background-attachment: fixed, fixed;
  min-height: 100vh;
}

/* SVG role icons inherit color and scale nicely */
.g-role-card__icon,
.g-card-icon {
  transition: transform .2s;
}
.g-role-card:hover .g-role-card__icon {
  transform: scale(1.15);
}

/* Top rainbow bar (decorative) */
#game-root::before {
  animation: kids-shimmer 3s linear infinite;
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #f59e0b, #ec4899, #10b981, #7c3aed);
  background-size: 200% 100%;
}