/* Temas "Moderno" do overlay (placar OBS).
   Só valem quando #overlay-root tem data-style (setado por applyTheme() para
   temas da categoria "modern"). Os temas "Clássico" não têm data-style e
   continuam exatamente como antes. Cada tema define no JS: --ov-radius,
   --ov-edge (espessura da faixa de acento), --ov-shadow, --ov-on-accent (cor
   do texto sobre o acento) e as três fontes --ov-font-*. Carregado tanto pelo
   painel/overlay (index.html) quanto pela prévia "Exemplo" (preview-example). */

/* ---- Base comum a todos os modernos ---- */
#overlay-root[data-style] .bar,
#overlay-root[data-style] .upcoming-bar,
#overlay-root[data-style] .corner-bar,
#overlay-root[data-style] .kickoff-reveal{
  border-radius:var(--ov-radius);
  border:1px solid var(--ov-line);
  border-top:var(--ov-edge) solid var(--accent);
  box-shadow:var(--ov-shadow);
}
#overlay-root[data-style] .bar,
#overlay-root[data-style] .upcoming-bar,
#overlay-root[data-style] .corner-bar{background:var(--ov-bg)}
#overlay-root[data-style] .center-block{background:var(--ov-bg-2);border-color:var(--ov-line)}
#overlay-root[data-style] .team-name,
#overlay-root[data-style] .upcoming-bar-team span,
#overlay-root[data-style] .corner-name{letter-spacing:.02em}
#overlay-root[data-style] .score-row,
#overlay-root[data-style] .clock-time,
#overlay-root[data-style] .corner-score,
#overlay-root[data-style] .corner-clock{font-variant-numeric:tabular-nums}
#overlay-root[data-style] .clock-half{letter-spacing:.14em}
#overlay-root[data-style] .competition-strip{
  background:var(--ov-bg-2);color:var(--text-dim);border:1px solid var(--ov-line);border-top:0;
  border-radius:0 0 calc(var(--ov-radius) * .6) calc(var(--ov-radius) * .6);
}
#overlay-root[data-style] .upcoming-bar-tag{color:var(--ov-on-accent);border-radius:calc(var(--ov-radius) * .5)}
#overlay-root[data-style] .upcoming-bar-time{border-color:var(--ov-line);border-radius:calc(var(--ov-radius) * .5)}
#overlay-root[data-style] .upcoming-bar-comp{background:color-mix(in srgb, var(--ov-text) 8%, transparent);color:var(--text-dim)}
#overlay-root[data-style] .corner-clock{color:var(--ov-on-accent)}
#overlay-root[data-style] #popup{
  background:var(--ov-bg);border:1px solid var(--ov-line);border-left:max(var(--ov-edge), 3px) solid var(--accent);
  border-radius:var(--ov-radius);box-shadow:var(--ov-shadow);
}
#overlay-root[data-style] #popup-players img{border-color:var(--accent)}
#overlay-root[data-style] #stats-panel{
  background:var(--ov-bg);border:1px solid var(--ov-line);border-right:max(var(--ov-edge), 3px) solid var(--accent);
  border-radius:var(--ov-radius);box-shadow:var(--ov-shadow);
}
#overlay-root[data-style] #stats-panel h3{font-family:var(--ov-font-heading)}
#overlay-root[data-style] .stat-row{font-family:var(--ov-font-body)}

/* ---- Grafite: monocromático, cantos suaves, um único acento vermelhão ---- */
#overlay-root[data-style="grafite"] .clock-half,
#overlay-root[data-style="grafite"] .clock-time .added{color:var(--accent)}
#overlay-root[data-style="grafite"] .team-name{font-weight:600;text-transform:none;letter-spacing:-.01em}
#overlay-root[data-style="grafite"] .score-row{font-weight:600}
#overlay-root[data-style="grafite"] .score-sep{color:var(--accent)}

/* ---- Vidro Fosco: painel translúcido com borda de luz interna. Aproximação
   web de vidro (não é o Liquid Glass da Apple): o blur só aparece quando há
   conteúdo atrás dentro da própria página, então a leitura depende do
   preenchimento translúcido, não do desfoque. ---- */
#overlay-root[data-style="vidro"] .bar,
#overlay-root[data-style="vidro"] .upcoming-bar,
#overlay-root[data-style="vidro"] .corner-bar,
#overlay-root[data-style="vidro"] #popup,
#overlay-root[data-style="vidro"] #stats-panel{
  background:linear-gradient(135deg, rgb(255 255 255 / .10), rgb(255 255 255 / .02)), var(--ov-bg);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-color:rgb(255 255 255 / .16);
}
#overlay-root[data-style="vidro"] .center-block{background:rgb(255 255 255 / .06)}
#overlay-root[data-style="vidro"] .team-name{text-transform:none;font-weight:600}
#overlay-root[data-style="vidro"] #popup{border-left-color:rgb(255 255 255 / .16)}
#overlay-root[data-style="vidro"] #stats-panel{border-right-color:rgb(255 255 255 / .16)}
#overlay-root[data-style="vidro"] .clock-half{color:var(--accent)}

/* ---- Cobalto: claro, placar central em bloco de cor sólida ---- */
#overlay-root[data-style="cobalto"] .center-block{background:var(--accent);border-color:var(--accent)}
#overlay-root[data-style="cobalto"] .center-block .score-num,
#overlay-root[data-style="cobalto"] .center-block .score-sep,
#overlay-root[data-style="cobalto"] .center-block .clock-time,
#overlay-root[data-style="cobalto"] .center-block .clock-half,
#overlay-root[data-style="cobalto"] .center-block .clock-time .added{color:var(--ov-on-accent)}
#overlay-root[data-style="cobalto"] .team-name,
#overlay-root[data-style="cobalto"] .upcoming-bar-team span,
#overlay-root[data-style="cobalto"] .corner-name{font-stretch:75%;font-weight:800}
#overlay-root[data-style="cobalto"] .clock-time.paused{color:#ffd9c2}

/* ---- Floresta: verde profundo, faixa âmbar, títulos condensados ---- */
#overlay-root[data-style="floresta"] .team-name,
#overlay-root[data-style="floresta"] .upcoming-bar-team span,
#overlay-root[data-style="floresta"] .corner-name,
#overlay-root[data-style="floresta"] .popup-title{font-stretch:68%;font-weight:800;letter-spacing:.03em}
#overlay-root[data-style="floresta"] .clock-half{color:var(--accent)}

/* ---- Terracota: ardósia fria com acento ferrugem, faixas dos times largas ---- */
#overlay-root[data-style="terracota"] .team-block.home{border-left-width:7px}
#overlay-root[data-style="terracota"] .team-block.away{border-right-width:7px}
#overlay-root[data-style="terracota"] .team-name{text-transform:none;font-weight:700;letter-spacing:-.01em}
#overlay-root[data-style="terracota"] .score-sep{color:var(--accent)}

/* ---- Tinta: bruto, cantos retos, contorno grosso, placar em bloco amarelo ---- */
#overlay-root[data-style="tinta"] .bar,
#overlay-root[data-style="tinta"] .upcoming-bar,
#overlay-root[data-style="tinta"] .corner-bar,
#overlay-root[data-style="tinta"] #popup,
#overlay-root[data-style="tinta"] #stats-panel{border:2px solid var(--ov-text)}
#overlay-root[data-style="tinta"] .center-block{background:var(--accent);border-color:var(--ov-text);border-width:0 2px}
#overlay-root[data-style="tinta"] .center-block .score-num,
#overlay-root[data-style="tinta"] .center-block .score-sep,
#overlay-root[data-style="tinta"] .center-block .clock-time,
#overlay-root[data-style="tinta"] .center-block .clock-half,
#overlay-root[data-style="tinta"] .center-block .clock-time .added{color:var(--ov-on-accent)}
#overlay-root[data-style="tinta"] .clock-half{font-family:var(--ov-font-clock);letter-spacing:.06em}
#overlay-root[data-style="tinta"] .competition-strip{border:2px solid var(--ov-text);border-top:0}
#overlay-root[data-style="tinta"] .corner-row{border-bottom:2px solid var(--ov-text)}

/* Canto: chip do placar derivado da cor do texto do tema, para funcionar
   igual em temas claros (Cobalto) e escuros. */
#overlay-root[data-style] .corner-score{background:color-mix(in srgb, var(--ov-text) 10%, transparent)}