/* overlay-stats.css — shared look for the broadcast stats overlays.
 *
 * These pages are OBS browser sources composited over the broadcast backdrop,
 * so the page itself stays transparent and every panel carries its own fill.
 *
 * Tokens only: each page keeps its own layout/structure CSS and just consumes
 * these values, so there is no specificity war with page rules and a change to
 * the shared look is one edit here rather than one per page.
 *
 * Everything derives from the theme (theme.json -> loadTheme()); the only fixed
 * colours are neutral black/white scrims, never brand colour.
 */

:root {
    /* Panel fill: theme secondary, darkened by a neutral scrim so it reads as a
       solid dark card on a bright backdrop, then warmed by a trace of the
       theme's own accent so it belongs to the scene rather than sitting on it.
       NOTE: the black scrim means a light-secondary theme still renders dark.

       Every var() below carries a fallback ON PURPOSE. Not all pages define
       --secondary-color-rgb / --primary-color-rgb (some only set the plain hex
       in loadTheme), and a var() that resolves to nothing invalidates the WHOLE
       declaration — the panel would then render with no fill at all. */
    --ovl-panel-bg:
        linear-gradient(rgba(var(--primary-color-rgb, 215, 162, 79), 0.05), rgba(var(--primary-color-rgb, 215, 162, 79), 0.05)),
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        rgba(var(--secondary-color-rgb, 26, 26, 26), 0.62);

    /* For overlays composited over LIVE GAMEPLAY rather than the dark broadcast
       backdrop: bright footage bleeding through ~20% muddies small text, so this
       variant is near-opaque. */
    --ovl-panel-bg-solid:
        linear-gradient(rgba(var(--primary-color-rgb, 215, 162, 79), 0.05), rgba(var(--primary-color-rgb, 215, 162, 79), 0.05)),
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        rgba(var(--secondary-color-rgb, 26, 26, 26), 0.92);

    --ovl-panel-border: 1px solid rgba(var(--primary-color-rgb, 215, 162, 79), 0.22);
    --ovl-hairline:     1px solid rgba(var(--primary-color-rgb, 215, 162, 79), 0.22);
    --ovl-radius: 4px;
    /* Functional, not decorative: keeps small type legible over a busy backdrop
       without needing a fully opaque slab. */
    --ovl-blur: blur(7px);

    /* Row treatment */
    --ovl-row-alt: rgba(255, 255, 255, 0.03);
    --ovl-row-top: rgba(var(--primary-color-rgb, 215, 162, 79), 0.09);

    /* Type roles — headings/values carry the eye, labels stay quiet */
    --ovl-heading: var(--accent-gold, #f4c430);
    --ovl-value:   var(--accent-gold, #f4c430);
    --ovl-label:   var(--text-accent, #ffd380);
}

/* Utility for pages that want the panel recipe wholesale. */
.ovl-panel {
    background: var(--ovl-panel-bg);
    backdrop-filter: var(--ovl-blur);
    border: var(--ovl-panel-border);
    border-radius: var(--ovl-radius);
}