/* FICHER TV - "Indique e libere temas": botão, tela de indicar, convite e os temas (só cores e um fundo leve,
   desenhado por CSS, sem imagem nem animação: não pesa em aparelho fraco). Os temas mudam as variáveis do style.css. */

/* ---------- temas ---------- */
html[data-tema="futebol"] {
  --bg: #06120b; --surface: #0d1f14; --surface2: #153222; --line: #1f4630;
  --a1: #22c55e; --a2: #eab308; --text: #f0fdf4; --muted: #8aa996;
}
html[data-tema="heroi"] {
  --bg: #0b0a16; --surface: #15132a; --surface2: #201d3d; --line: #2e2a55;
  --a1: #ef4444; --a2: #3b82f6; --text: #f5f3ff; --muted: #9d97c6;
}
html[data-tema="infantil"] {
  --bg: #120a1c; --surface: #1d1230; --surface2: #2a1b45; --line: #3a2860;
  --a1: #f472b6; --a2: #facc15; --text: #fdf4ff; --muted: #b9a5cd;
}
html[data-tema="futebol"] body { background: radial-gradient(900px 500px at 50% -10%, #0f3a22 0%, var(--bg) 60%) no-repeat var(--bg); }
html[data-tema="heroi"] body { background: radial-gradient(900px 500px at 50% -10%, #2a1640 0%, var(--bg) 60%) no-repeat var(--bg); }
html[data-tema="infantil"] body { background: radial-gradient(900px 500px at 50% -10%, #3a1640 0%, var(--bg) 60%) no-repeat var(--bg); }
html[data-tema="futebol"] .pbar { background: rgba(6, 18, 11, .92); }
html[data-tema="heroi"] .pbar { background: rgba(11, 10, 22, .92); }
html[data-tema="infantil"] .pbar { background: rgba(18, 10, 28, .92); }
/* botão cheio: texto escuro onde o degradê é claro, branco no vermelho/azul */
html[data-tema="futebol"] .btn:not(.ghost), html[data-tema="futebol"] .pboost.on { color: #04140a; }
html[data-tema="heroi"] .btn:not(.ghost), html[data-tema="heroi"] .pboost.on { color: #fff; }
html[data-tema="infantil"] .btn:not(.ghost), html[data-tema="infantil"] .pboost.on { color: #1a0b14; }

/* fundo decorativo: camada fixa atrás de tudo (compõe uma vez; não repinta ao rolar) */
html[data-tema] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
html[data-tema="futebol"] body::before {
  background:
    radial-gradient(circle at 50% 55%, transparent 109px, rgba(255, 255, 255, .055) 110px, rgba(255, 255, 255, .055) 112px, transparent 113px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .055) calc(50% - 1px), rgba(255, 255, 255, .055) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 90px, transparent 90px 180px);
}
html[data-tema="heroi"] body::before {
  background:
    repeating-conic-gradient(from 0deg at 100% 0%, rgba(255, 255, 255, .03) 0 4deg, transparent 4deg 10deg),
    radial-gradient(rgba(239, 68, 68, .10) 1.4px, transparent 1.8px) 0 0 / 16px 16px;
}
html[data-tema="infantil"] body::before {
  background:
    radial-gradient(circle, rgba(250, 204, 21, .10) 3px, transparent 4px) 0 0 / 70px 70px,
    radial-gradient(circle, rgba(244, 114, 182, .10) 4px, transparent 5px) 35px 35px / 110px 110px,
    radial-gradient(circle, rgba(56, 189, 248, .10) 2.5px, transparent 3.5px) 18px 52px / 56px 56px;
}
/* ---------- botão do topo ---------- */
.pindica {
  border: 1px solid var(--line); background: var(--surface); color: var(--a1); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 12px; font-weight: 900; letter-spacing: .5px; cursor: pointer; white-space: nowrap;
}
.pindica:hover, .pindica:focus-visible { border-color: var(--a1); outline: none; }

/* ---------- convite na biblioteca (aparece no máximo 2 vezes) ---------- */
.indica-card {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.indica-card[hidden] { display: none !important; }
.indica-card img { width: 44px; height: 44px; flex: none; }
.indica-card p { margin: 0; flex: 1; font-size: 14px; line-height: 1.4; color: var(--text); }
.indica-card p span { color: var(--muted); }
.indica-card .btn { width: auto; margin: 0; padding: 9px 14px; font-size: 14px; }

/* ---------- tela de indicar ---------- */
.in-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 6px 0 14px; }
.in-passos { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.in-share { display: flex; gap: 8px; flex-wrap: wrap; }
.in-share .btn { flex: 1 1 140px; width: auto; margin: 0; text-align: center; text-decoration: none; font-size: 15px; padding: 12px; }
.in-share .btn[hidden] { display: none; }
.in-link { display: flex; gap: 8px; margin: 10px 0 0; }
.in-link input { flex: 1; min-width: 0; font-size: 13px; }
.in-link .btn { width: auto; margin: 0; padding: 10px 14px; font-size: 14px; }
.in-qr { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.in-qr > div { width: 116px; height: 116px; flex: none; border-radius: 10px; overflow: hidden; background: #fff; }
.in-qr svg { width: 100%; height: 100%; display: block; }
.in-h { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.in-n { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.in-temas { display: grid; gap: 8px; }
.in-tema { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); }
.in-tema.on { border-color: var(--a1); }
.in-tema.fechado img { filter: grayscale(1); opacity: .45; }
.in-tema img { width: 48px; height: 48px; flex: none; }
.in-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.in-tx b { font-size: 15px; color: var(--text); }
.in-tx span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.in-tema .btn { width: auto; margin: 0; padding: 8px 12px; font-size: 13px; }
.in-nota { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 14px 0 0; }
.in-aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px);
  padding: 11px 16px; border-radius: 12px; background: var(--surface2); color: var(--text); border: 1px solid var(--a1);
  font-size: 14px; font-weight: 700; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.in-aviso[hidden] { display: none; }
@media (max-width: 820px) {
  .pindica { padding: 8px 11px; }
  .indica-card { flex-wrap: wrap; }
  .indica-card p { flex-basis: calc(100% - 60px); }
}