/* theme_mundial.css — Tema dourado Mundial 2026
 *
 * Override TOTAL de CSS variables sem partir o tema actual.
 * Aplica-se quando body.theme-mundial está presente. Toggle via ThemeSwitch.
 *
 * Estratégia: re-mapear o sistema "purple" existente para "gold" — assim TODO
 * o código que usava var(--purple-*) ganha tom dourado automaticamente sem
 * tocar em centenas de selectores.
 */

body.theme-mundial {
  /* ── Backgrounds ────────────────────────────────────────────── */
  --bg-base:        #0a0805;                                          /* preto quente */
  --bg-mid:         #14110a;                                          /* dark warm */
  --bg-card:        rgba(255, 215, 0, 0.04);
  --bg-card-hover:  rgba(255, 215, 0, 0.085);
  --bg-sidebar:     linear-gradient(180deg, #1a1408 0%, #0a0705 100%);

  /* ── Borders ────────────────────────────────────────────────── */
  --border:         rgba(218, 165, 32, 0.15);
  --border-bright:  rgba(218, 165, 32, 0.32);
  --border-purple:  rgba(218, 165, 32, 0.4);   /* re-uso como golden border */

  /* ── Cores principais (purple → gold) ───────────────────────── */
  --purple:         #daa520;                   /* gold base */
  --purple-bright:  #ffd700;                   /* gold brilhante */
  --purple-dim:     #8b6914;                   /* gold dim */
  --purple-glow:    rgba(255, 215, 0, 0.32);

  /* ── Greens / Reds — ajustar para combinar com fundo dourado ── */
  --green:          #10b981;                   /* mantém — funciona OK */
  --green-bright:   #4ade80;
  --green-glow:     rgba(74, 222, 128, 0.3);
  --red:            #ef4444;
  --red-glow:       rgba(239, 68, 68, 0.25);
  --yellow:         #fbbf24;                   /* mantém */

  /* ── Textos — mais quentes ──────────────────────────────────── */
  --text-primary:   #f8f4e8;                   /* off-white ligeiramente quente */
  --text-secondary: #c9b88a;                   /* gold dim */
  --text-dim:       #6b5d3c;                   /* gold muito dim */
}

/* ── Background do body com padrão subtil ────────────────────── */
body.theme-mundial {
  background:
    radial-gradient(ellipse at top, rgba(218, 165, 32, .06) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(184, 134, 11, .04) 0%, transparent 50%),
    var(--bg-base);
}

/* ── WATERMARK: mapa-mundo + taça stylized fixos no viewport ──
   pointer-events none — não interfere com clicks. opacity baixa para ser
   ambiente. Cresce com o ecrã (background-size: contain), sempre à direita. */
body.theme-mundial::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/mundial_watermark.svg');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

/* Mobile: watermark mais pequeno e centrado */
@media (max-width: 720px) {
  body.theme-mundial::after {
    background-size: 200% auto;
    background-position: bottom right;
    opacity: 0.05;
  }
}

/* Garantir que conteúdo fica acima do watermark */
body.theme-mundial #app,
body.theme-mundial #mob-shell,
body.theme-mundial .main-content,
body.theme-mundial .sidebar,
body.theme-mundial #mob-content,
body.theme-mundial #mob-topbar,
body.theme-mundial #mob-nav,
body.theme-mundial .topbar {
  position: relative;
  z-index: 1;
}

/* ── EMBLEMA da sidebar (taça + MUNDIAL 26 vertical) ──────────
   Position absolute dentro da sidebar — abaixo do header.
   O emblema tem opacity baixa, não compete com nav items. */
body.theme-mundial .sidebar {
  position: relative;
}
body.theme-mundial .sidebar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 580px;
  transform: translate(-50%, -50%);
  background-image: url('/assets/mundial_emblem.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

/* Garantir que os nav items ficam acima do emblema */
body.theme-mundial .sidebar > * {
  position: relative;
  z-index: 1;
}

/* ── Reforçar topbar / sidebar com glow dourado ─────────────── */
body.theme-mundial .topbar,
body.theme-mundial #mob-topbar {
  border-bottom-color: rgba(218, 165, 32, .2);
  box-shadow: 0 1px 0 rgba(255, 215, 0, .08), 0 4px 20px -10px rgba(218, 165, 32, .25);
}

body.theme-mundial .sidebar {
  border-right-color: rgba(218, 165, 32, .15);
}

/* ── Cards e sinais herdam --bg-card já actualizado, mas reforço subtil ── */
body.theme-mundial .live-card:not(.is-women),
body.theme-mundial .mob-live-card:not(.is-women) {
  border-color: rgba(218, 165, 32, .1);
}

body.theme-mundial .live-card:hover,
body.theme-mundial .mob-live-card:hover {
  border-color: rgba(255, 215, 0, .3);
  box-shadow: 0 4px 16px -8px rgba(255, 215, 0, .25);
}

/* ── Title brand: ScorePulse com gradient dourado ───────────── */
body.theme-mundial .brand-name,
body.theme-mundial .mob-brand-name {
  background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 215, 0, .25);
}

/* ── Live pulse: vermelho mantém-se, mas com tinta dourada ──── */
body.theme-mundial .mob-top-pill,
body.theme-mundial .live-pill {
  border-color: rgba(218, 165, 32, .3);
}

/* ── Nav items activos: dourados em vez de roxo ─────────────── */
body.theme-mundial .nav-item.active,
body.theme-mundial .mob-nav-item.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, .14), rgba(218, 165, 32, .06));
  border-color: rgba(255, 215, 0, .35);
}

body.theme-mundial .mob-nav-item.active .mob-nav-label,
body.theme-mundial .mob-nav-item.active .mob-nav-icon {
  color: #ffd700;
}

/* ── Botões CTA (registar, login, planos) ───────────────────── */
body.theme-mundial .btn-primary,
body.theme-mundial .mob-cta-btn,
body.theme-mundial button[type="submit"]:not(.danger) {
  background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
  color: #1a1408;
  border-color: rgba(184, 134, 11, .6);
  box-shadow: 0 0 16px -6px rgba(255, 215, 0, .5);
}

body.theme-mundial .btn-primary:hover,
body.theme-mundial .mob-cta-btn:hover {
  box-shadow: 0 0 24px -4px rgba(255, 215, 0, .7);
  transform: translateY(-1px);
}

/* ── Badge tier strong fica ainda mais notável ──────────────── */
body.theme-mundial .alert-tier-strong,
body.theme-mundial .mob-alert-action.enter {
  background: linear-gradient(135deg, rgba(255, 215, 0, .22), rgba(218, 165, 32, .12));
  border-color: rgba(255, 215, 0, .5);
  color: #ffd700;
  box-shadow: 0 0 12px -3px rgba(255, 215, 0, .5);
}

/* ── Trophy decoration no header (ghost) ────────────────────── */
body.theme-mundial .topbar::before {
  content: '🏆';
  position: absolute;
  top: 50%;
  right: 24px;
  font-size: 18px;
  opacity: 0.35;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, .4));
}

/* ── Animação subtil: shimmer dourado no topo ───────────────── */
body.theme-mundial {
  position: relative;
}
body.theme-mundial::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 0, .35) 25%,
    rgba(255, 215, 0, .7) 50%,
    rgba(255, 215, 0, .35) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: mundial-shimmer 6s ease-in-out infinite;
  z-index: 99999;
  pointer-events: none;
}
@keyframes mundial-shimmer {
  0%, 100% { background-position: -100% 0; }
  50%      { background-position: 100% 0;  }
}

/* ── Botão toggle do tema (dentro do topbar) ────────────────── */
.sp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  transition: all .15s ease;
  flex: 0 0 auto;
}
.sp-theme-toggle:hover {
  background: rgba(255, 215, 0, .12);
  border-color: rgba(255, 215, 0, .4);
  color: #ffd700;
}
body.theme-mundial .sp-theme-toggle {
  background: rgba(255, 215, 0, .14);
  border-color: rgba(255, 215, 0, .45);
  color: #ffd700;
  box-shadow: 0 0 12px -4px rgba(255, 215, 0, .5);
}

/* Variante desktop — colocado no status-strip pequeno */
.status-strip .sp-theme-toggle {
  width: 22px;
  height: 22px;
  font-size: 12px;
  margin-left: 6px;
}

/* ── Animação de transição entre temas ──────────────────────── */
body, body * {
  transition: background-color .35s ease, border-color .35s ease, color .25s ease;
}