/*
 * Shared theme for all race overlays (cup/gt3/gt4, normal + desglose).
 * Division colors, fonts and base resets live here so a look change is a
 * one-file edit instead of six. Template-specific layout (row structure,
 * card structure) stays in each template's own <style> block.
 */

@font-face {
    font-family: 'Race Sport';
    src: url('/Race Sport.ttf') format('truetype');
    font-display: swap;
}

:root {
    --div-primera: #f5a623;
    --div-primera-glow: rgba(245, 166, 35, 0.45);
    --div-segunda: #3a9be0;
    --div-segunda-glow: rgba(58, 155, 224, 0.45);
    --div-tercera: #f0d43a;
    --div-tercera-glow: rgba(240, 212, 58, 0.45);

    --relegation: #ff5c5c;
    --relegation-glow: rgba(255, 92, 92, 0.6);
    --promotion: #4ade80;
    --promotion-glow: rgba(74, 222, 128, 0.6);

    --panel-bg: rgba(24, 24, 28, 0.86);
    --panel-bg-alt: rgba(17, 17, 20, 0.86);
    --panel-border: rgba(255, 255, 255, 0.06);
    --text-primary: #f5f6f7;
    --text-muted: #9aa3ad;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Race Sport', Arial, sans-serif;
    color: var(--text-primary);
}

/* Division accent — text */
.primera {
    color: var(--div-primera);
    text-shadow: 0 0 8px var(--div-primera-glow);
}

.segunda {
    color: var(--div-segunda);
    text-shadow: 0 0 8px var(--div-segunda-glow);
}

.tercera {
    color: var(--div-tercera);
    text-shadow: 0 0 8px var(--div-tercera-glow);
}

.negative {
    color: #ef4444;
}

/* Promotion / relegation accent bars, shared across every row/card style */
.relegation-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--relegation);
    box-shadow: 0 0 10px var(--relegation-glow);
    z-index: 10;
}

.promotion-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--promotion);
    box-shadow: 0 0 10px var(--promotion-glow);
    z-index: 10;
}

/* Modern glass footer, shared by overlays that use it */
.footer {
    margin-top: auto;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: rgba(15, 15, 18, 0.9);
    backdrop-filter: blur(6px);
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    z-index: 10;
    border-top: 2px solid rgba(255, 255, 255, 0.08);
}

.footer.primera { border-top-color: var(--div-primera); }
.footer.segunda { border-top-color: var(--div-segunda); }
.footer.tercera { border-top-color: var(--div-tercera); }

/* ==========================================================================
   Telemetry component kit ("tlm-*") — angular broadcast look used by
   Masters Road. Reusable for any future championship that wants the same
   look: link this stylesheet, use these classes, done.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap');

.tlm-root {
    font-family: 'Barlow', system-ui, sans-serif;
}

/* Simple, self-contained dark backdrop — no per-championship fondo.png
   needed. Dark enough to keep rows legible over any game footage in OBS
   without competing with it. */
.tlm-bg {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(180deg, #0a0c11 0%, #0d1017 100%);
}

/* Contained "widget" version of the same look, for embedding on a page
   that is NOT dark (e.g. a WordPress post) — a floating dark card with a
   shadow reads as deliberate; a full-bleed dark viewport against a white
   page just looks like a rendering error. */
.tlm-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Staggered row entrance — meant for standings that appear once (pre-race
   grid, post-race results), not a live-refreshing HUD, so a cascade reveal
   reads as a moment rather than as flicker. Set `--delay` per row in JS. */
@keyframes tlm-reveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tlm-row {
    animation: tlm-reveal 0.9s ease both;
    animation-delay: var(--delay, 0ms);
}

.tlm-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
}

.tlm-stripes {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, 0.02) 0px,
        rgba(255, 255, 255, 0.02) 2px,
        transparent 2px,
        transparent 64px
    );
    pointer-events: none;
    z-index: -1;
}

.tlm-live-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
}

.tlm-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--relegation);
    box-shadow: 0 0 8px var(--relegation-glow);
}

.tlm-division-tab {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 3px;
    padding: 10px 22px;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    color: #0a0c11;
}

.tlm-division-tab.primera { background: var(--div-primera); text-shadow: none; }
.tlm-division-tab.segunda { background: var(--div-segunda); text-shadow: none; }
.tlm-division-tab.tercera { background: var(--div-tercera); text-shadow: none; }

/* Angular row panel — position/driver/points data row, split by division accent */
.tlm-row {
    position: relative;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.tlm-row:nth-child(even) {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
}

/* Status badge for promotion/relegation — an explicit icon badge, never just
   an edge line, so it stays legible next to the division accent color. */
.tlm-status {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tlm-status svg {
    width: 16px;
    height: 16px;
}

.tlm-status.promo {
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid var(--promotion);
}

.tlm-status.releg {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid var(--relegation);
}

.tlm-legend {
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.tlm-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}