/* ══════════════════════════════════════════════════════════════════════
   Spark Games — shared game skin
   ----------------------------------------------------------------------
   The 7 imported games share one menu + HUD template but each shipped with
   its own arcade accent (tank gold, raiden cyan, commando green, …). This
   sheet re-themes every game's BRAND SURFACES — start menu, HUD cards,
   banner, buttons, difficulty/mode pills — to a single Spark terracotta
   dark theme, so the whole collection feels like one app.

   Linked into each game AFTER its inline <style>, so these win on source
   order (equal specificity) without needing !important everywhere — but
   palette-critical props that the games set with compound selectors do use
   !important to guarantee the override.

   The 3D game scene (canvas) + core gameplay controls are left alone —
   this is a chrome reskin, not a gameplay change.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --sg-accent:      #e89671;   /* Spark terracotta, lighter */
  --sg-accent-2:    #c87850;   /* Spark terracotta, base */
  --sg-accent-deep: #b06040;   /* Spark terracotta, deep */
  --sg-card-a:      rgba(44, 34, 30, 0.96);   /* warm dark card top */
  --sg-card-b:      rgba(22, 18, 16, 0.96);   /* warm dark card bottom */
  --sg-glass:       rgba(30, 22, 18, 0.72);   /* HUD glass */
  --sg-line:        rgba(232, 150, 113, 0.20);
  --sg-line-soft:   rgba(232, 150, 113, 0.14);
  --sg-muted:       #b9aaa0;
  --sg-text:        #f2e9e3;
}

/* ── Start-menu overlay + card ──────────────────────────────────────── */
.overlay {
  background: rgba(16, 10, 8, 0.60) !important;
  -webkit-backdrop-filter: blur(6px) saturate(130%);
          backdrop-filter: blur(6px) saturate(130%);
}
.menu-card {
  background: linear-gradient(165deg, var(--sg-card-a), var(--sg-card-b)) !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: 26px !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.menu-eyebrow {
  color: var(--sg-accent) !important;
  letter-spacing: 0.34em !important;
}
.menu-eyebrow::before { content: "\2726\00a0"; }   /* ✦ + nbsp */
.menu-title {
  background: linear-gradient(92deg, #f2a884, var(--sg-accent-2)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
}
.menu-sub, .menu-tag, .stats-row { color: var(--sg-muted) !important; }
.best-row { color: var(--sg-muted) !important; }
.best-row b, .cg b, #endStars { color: var(--sg-accent) !important; }
.cg { color: var(--sg-muted) !important; }
.menu-foot { color: #8a7a70 !important; }

/* ── Primary CTA (start) ────────────────────────────────────────────── */
.start-btn {
  background: linear-gradient(180deg, var(--sg-accent), var(--sg-accent-2)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 22px rgba(200, 120, 80, 0.45) !important;
}
/* Retune the pulse glow to terracotta (games define btnPulse in warm-gold). */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(200, 120, 80, 0.40); }
  50%      { box-shadow: 0 6px 38px rgba(200, 120, 80, 0.80); }
}

/* ── Difficulty / mode / toggle pills ───────────────────────────────── */
.pillbtn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--sg-line-soft) !important;
  color: #d3c4ba !important;
}
.pillbtn.sel, .pillbtn.on {
  color: #fff !important;
  background: linear-gradient(180deg, var(--sg-accent), var(--sg-accent-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(200, 120, 80, 0.40) !important;
}
.ghost-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--sg-line) !important;
  color: var(--sg-text) !important;
}

/* ── In-play HUD ────────────────────────────────────────────────────── */
.hud-card {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-line-soft) !important;
}
.hc-label { color: #c9ad9f !important; }
.hc-value { color: var(--sg-accent) !important; }
.icon-btn {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-line-soft) !important;
  color: var(--sg-text) !important;
}

/* ── Center banner (round start / boss / clear messages) ────────────── */
#banner {
  color: var(--sg-accent) !important;
  text-shadow: 0 3px 24px rgba(200, 120, 80, 0.50), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}
#banner .bn-sub { color: #f2d3c4 !important; }

/* ── The auto-injected "← Games" back pill already matches Spark; nudge
     it clear of the game's own top-right icon buttons is unnecessary (it's
     top-LEFT in the reserved gutter). Nothing to do here. ─────────────── */