/* ═══════════════════════════════════════════════════════════
   FISSY ADULT THEME — El Camino del Dinero · Adultos
   Palette: Fissy teal #00c9a7 on deep navy
   Font: Inter (clean, readable, professional)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --g-primary:   #00c9a7;
  --g-primary-d: #009e84;
  --g-bg:        #020617;
  --g-surface:   #0d1526;
  --g-card:      #111d35;
  --g-border:    #1e3058;
  --g-text:      #e2e8f0;
  --g-muted:     #64748b;
  --g-danger:    #ef4444;
  --g-warn:      #f59e0b;
  --g-success:   #22c55e;
  --g-info:      #818cf8;
  --g-gold:      #fbbf24;
  --radius:      14px;
  --radius-sm:   9px;
}

#game-root,
#game-root * {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Background: adults-with-phones photo with dark overlay ── */
#game-root {
  background-color: #020617;
  background-image:
    /* Dark navy overlay — preserves readability + teal mood */
    linear-gradient(
      160deg,
      rgba(2,6,23,.60) 0%,
      rgba(13,21,38,.55) 50%,
      rgba(2,6,23,.62) 100%
    ),
    /* Diagonal grid lines — barely visible over image */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(0,201,167,.04) 40px,
      rgba(0,201,167,.04) 41px
    ),
    /* Game photo */
    url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=768,fit=crop/d95Zbxjkg1CZkKrV/generated/generated-MVzoiAPFS7UWG4wT.png');
  background-size: 100% 100%, auto, cover;
  background-position: 0 0, 0 0, center top;
  background-attachment: fixed, fixed, fixed;
}

/* ── Hero: Fissy gradient ── */
.g-hero__title {
  background: linear-gradient(135deg, #fff 0%, var(--g-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Primary button: teal ── */
.g-btn--primary {
  background: var(--g-primary);
  color: #022;
  box-shadow: 0 0 18px rgba(0,201,167,.3);
}
.g-btn--primary:hover {
  background: #00e8c0;
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(0,201,167,.4);
}

/* ── Card glow: teal ── */
.g-card--glow {
  box-shadow: 0 0 0 1px rgba(0,201,167,.25), 0 8px 32px rgba(0,201,167,.08);
}

/* ── Meter: teal ── */
.g-meter-fill,
.progress-bar-fill,
.g-progress__fill {
  background: linear-gradient(90deg, var(--g-primary-d), var(--g-primary));
}