/* ==========================================================================
   Lotufo.Racing — public site styles
   Built on Bootstrap 5.3. Accent colours and --lr-glow (0–1) are injected
   from the admin "Appearance" settings in layouts/site.php.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Russo One"; src: url("../fonts/russo-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/titillium-web-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/titillium-web-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/titillium-web-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    --lr-primary: #ff1e3c;       --lr-primary-rgb: 255, 30, 60;
    --lr-secondary: #7b2ff7;     --lr-secondary-rgb: 123, 47, 247;
    --lr-tertiary: #ff7a00;      --lr-tertiary-rgb: 255, 122, 0;
    --lr-highlight: #ffd400;     --lr-highlight-rgb: 255, 212, 0;
    --lr-twitch: #9146ff;        --lr-twitch-rgb: 145, 70, 255;
    --lr-glow: .6;               /* 0 = off, 1 = maximum */
    --lr-glow-k: 1;              /* theme multiplier (dimmer in light mode) */
    --g: calc(var(--lr-glow) * var(--lr-glow-k));

    --lr-font-display: "Russo One", "Titillium Web", system-ui, sans-serif;
    --lr-font-body: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lr-radius: 14px;
    --lr-nav-h: 76px;
    --lr-skew: -12deg;

    --bs-body-font-family: var(--lr-font-body);
    --bs-primary: var(--lr-primary);
    --bs-primary-rgb: var(--lr-primary-rgb);
    --bs-link-color: var(--lr-primary);
    --bs-link-color-rgb: var(--lr-primary-rgb);
    --bs-link-hover-color: var(--lr-tertiary);
    --bs-link-hover-color-rgb: var(--lr-tertiary-rgb);
    --bs-border-radius: 10px;
    --bs-focus-ring-color: rgba(var(--lr-primary-rgb), .35);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #07070b;
    --bs-body-bg-rgb: 7, 7, 11;
    --bs-body-color: #e9e9f1;
    --bs-secondary-color: rgba(233, 233, 241, .66);
    --bs-emphasis-color: #fff;
    --bs-border-color: rgba(255, 255, 255, .1);
    --lr-surface: rgba(20, 18, 30, .72);
    --lr-surface-solid: #14121e;
    --lr-surface-2: rgba(255, 255, 255, .04);
    --lr-border: rgba(255, 255, 255, .09);
    --lr-nav-bg: rgba(8, 8, 13, .72);
    --lr-text-strong: #fff;
    --lr-glow-k: 1;
}

[data-bs-theme="light"] {
    --bs-body-bg: #f3f3f7;
    --bs-body-bg-rgb: 243, 243, 247;
    --bs-body-color: #16151d;
    --bs-secondary-color: rgba(22, 21, 29, .65);
    --bs-border-color: rgba(10, 10, 20, .12);
    --lr-surface: rgba(255, 255, 255, .82);
    --lr-surface-solid: #fff;
    --lr-surface-2: rgba(10, 10, 20, .035);
    --lr-border: rgba(10, 10, 20, .09);
    --lr-nav-bg: rgba(255, 255, 255, .78);
    --lr-text-strong: #0b0b10;
    --lr-glow-k: .55;
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--lr-nav-h) + 16px); }
body {
    font-family: var(--lr-font-body);
    background: var(--bs-body-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
body.has-site-bg { background: transparent; }
.site-main { flex: 1 0 auto; position: relative; z-index: 1; }
.page-home .site-main { padding-top: 0; }
body:not(.page-home) .site-main { padding-top: var(--lr-nav-h); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h5, .section-title, .navbar-nav .nav-link, .btn-lr, .footer-heading {
    font-family: var(--lr-font-display);
    font-weight: 400;
    letter-spacing: .02em;
}
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 2000; background: var(--lr-primary); color: #fff; padding: .5rem 1rem; border-radius: 6px; }
::selection { background: rgba(var(--lr-primary-rgb), .85); color: #fff; }
.text-lr-primary { color: var(--lr-primary) !important; }
.link-lr { color: var(--lr-primary); text-decoration: none; font-weight: 600; }
.link-lr:hover { color: var(--lr-tertiary); text-shadow: 0 0 calc(12px * var(--g)) rgba(var(--lr-tertiary-rgb), calc(.7 * var(--g))); }

/* Glow helpers — all scale with --g so the admin slider controls the whole site */
.glow-text {
    color: var(--lr-text-strong);
    text-shadow:
        0 0 calc(6px * var(--g)) rgba(var(--lr-primary-rgb), calc(.9 * var(--g))),
        0 0 calc(22px * var(--g)) rgba(var(--lr-primary-rgb), calc(.6 * var(--g))),
        0 0 calc(48px * var(--g)) rgba(var(--lr-secondary-rgb), calc(.55 * var(--g)));
}

/* ---------- Site background layer ---------- */
.site-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bs-body-bg); }
.site-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-bg-image { background-size: cover; background-position: center; }
video.site-bg-media { object-fit: cover; }
.site-bg-embed iframe, .hero-embed iframe {
    position: absolute; top: 50%; left: 50%; border: 0;
    width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
    transform: translate(-50%, -50%);
}
.hero-embed iframe { width: max(100%, calc(var(--hero-height) * 1.7778)); height: max(56.25vw, 100%); }
.site-bg-overlay { position: absolute; inset: 0; background: rgba(var(--bs-body-bg-rgb), var(--bg-overlay, .4)); }
#site-bg-anim canvas { display: block; }
@media (prefers-reduced-motion: reduce) { .site-bg video, .site-bg iframe, #site-bg-anim { display: none; } }

/* ---------- Header / navbar ---------- */
.site-header { z-index: 1030; }
.site-header .navbar {
    min-height: var(--lr-nav-h);
    background: var(--lr-nav-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: background .3s, box-shadow .3s;
    border-bottom: 1px solid var(--lr-border);
}
.site-header .navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--lr-primary) 20%, var(--lr-secondary) 55%, var(--lr-tertiary) 85%, transparent);
    box-shadow: 0 0 calc(14px * var(--g)) rgba(var(--lr-primary-rgb), calc(.9 * var(--g)));
    opacity: .9;
}
.page-home .site-header:not(.is-scrolled) .navbar { background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0)); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-home .site-header:not(.is-scrolled) .navbar::after { opacity: 0; }
.page-home .site-header:not(.is-scrolled) .nav-link,
.page-home .site-header:not(.is-scrolled) .theme-toggle,
.page-home .site-header:not(.is-scrolled) .navbar-toggler { color: #fff; }
.site-header.is-scrolled .navbar { box-shadow: 0 8px 30px rgba(0,0,0,.25); }

.navbar-brand { padding: 0; margin-right: 0; }
.brand-logo {
    height: 56px; width: auto; display: block;
    filter: drop-shadow(0 0 calc(10px * var(--g)) rgba(var(--lr-primary-rgb), calc(.55 * var(--g))));
    transition: transform .25s ease, filter .25s ease;
}
.navbar-brand:hover .brand-logo { transform: scale(1.03) rotate(-1deg); filter: drop-shadow(0 0 calc(16px * var(--g)) rgba(var(--lr-primary-rgb), calc(.9 * var(--g)))); }

.navbar-nav .nav-link {
    text-transform: uppercase; font-size: .92rem; letter-spacing: .08em;
    padding: .6rem .95rem !important; position: relative; color: var(--bs-body-color);
    transition: color .2s, text-shadow .2s;
}
.navbar-nav .nav-link::after {
    content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .3rem; height: 3px;
    background: linear-gradient(90deg, var(--lr-primary), var(--lr-tertiary));
    transform: scaleX(0) skewX(var(--lr-skew)); transform-origin: left; transition: transform .25s ease;
    box-shadow: 0 0 calc(12px * var(--g)) rgba(var(--lr-primary-rgb), var(--g));
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--lr-text-strong); }
.page-home .site-header:not(.is-scrolled) .navbar-nav .nav-link:hover { color: #fff; }
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1) skewX(var(--lr-skew)); }
.navbar-nav .nav-link.active { text-shadow: 0 0 calc(12px * var(--g)) rgba(var(--lr-primary-rgb), calc(.8 * var(--g))); }
.navbar-toggler { border: 0; font-size: 1.8rem; padding: .1rem .3rem; color: var(--bs-body-color); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--lr-primary-rgb), .4); }
.btn-icon { border: 1px solid var(--lr-border); border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--bs-body-color); background: transparent; }
.btn-icon:hover { border-color: rgba(var(--lr-primary-rgb), .6); color: var(--lr-primary); box-shadow: 0 0 calc(14px * var(--g)) rgba(var(--lr-primary-rgb), calc(.5 * var(--g))); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--lr-primary); background: var(--lr-surface-solid); border-color: var(--lr-border); }
.dropdown-item.active i { color: #fff; }

@media (max-width: 991.98px) {
    .navbar-collapse { background: var(--lr-surface-solid); margin: .5rem -12px 0; padding: .5rem 1rem 1rem; border-top: 1px solid var(--lr-border); border-radius: 0 0 var(--lr-radius) var(--lr-radius); }
    .page-home .site-header:not(.is-scrolled) .navbar-collapse .nav-link { color: var(--bs-body-color); }
    .brand-logo { height: 46px; }
}
@media (max-width: 575.98px) {
    .brand-logo { height: 40px; }
    .live-btn .live-label { display: none; }
    .live-btn.is-live .live-label { display: inline; }
}

/* ---------- Twitch live button ---------- */
.live-btn {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    font-family: var(--lr-font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
    padding: .55rem 1rem; border-radius: 999px; text-decoration: none; position: relative;
    transition: all .25s ease; border: 2px solid rgba(var(--lr-twitch-rgb), .8);
}
.live-btn.is-offline { color: var(--bs-body-color); background: rgba(var(--lr-twitch-rgb), .12); }
.page-home .site-header:not(.is-scrolled) .live-btn.is-offline { color: #fff; }
.live-btn.is-offline:hover { background: var(--lr-twitch); color: #fff; box-shadow: 0 0 calc(20px * var(--g)) rgba(var(--lr-twitch-rgb), calc(.8 * var(--g))); }
.live-btn .live-dot { display: none; }
.live-btn.is-live {
    color: #fff; border-color: var(--lr-primary);
    background: linear-gradient(135deg, var(--lr-primary), #b3001b);
    box-shadow: 0 0 calc(10px * var(--g)) rgba(var(--lr-primary-rgb), var(--g)), 0 0 calc(34px * var(--g)) rgba(var(--lr-primary-rgb), calc(.6 * var(--g)));
    animation: livePulse 2s ease-in-out infinite;
}
.live-btn.is-live .live-dot { display: inline-block; }
.live-btn.is-live .live-icon { display: none; }
.live-btn.is-live:hover { color: #fff; transform: translateY(-1px); }
.live-viewers { font-family: var(--lr-font-body); font-weight: 700; font-size: .8rem; padding: .05rem .45rem; border-radius: 999px; background: rgba(0,0,0,.28); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: dotPulse 1.4s infinite; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes livePulse { 50% { box-shadow: 0 0 calc(18px * var(--g)) rgba(var(--lr-primary-rgb), var(--g)), 0 0 calc(56px * var(--g)) rgba(var(--lr-primary-rgb), calc(.75 * var(--g))); } }
@media (prefers-reduced-motion: reduce) { .live-btn.is-live, .live-dot { animation: none; } }

/* ---------- Buttons ---------- */
.btn-lr {
    --lr-btn-rgb: var(--lr-primary-rgb);
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    text-transform: uppercase; letter-spacing: .07em; border-radius: 8px; border: 2px solid transparent;
    padding: .7rem 1.4rem; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .2s;
}
.btn-lr.btn-sm { padding: .4rem .9rem; font-size: .8rem; }
.btn-lr.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }
.btn-lr::before { /* shine sweep */
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .5s ease;
}
.btn-lr:hover::before { left: 130%; }
.btn-lr:hover { transform: translateY(-2px); }
.btn-lr-primary { color: #fff; background: linear-gradient(120deg, var(--lr-primary), var(--lr-tertiary)); box-shadow: 0 0 calc(18px * var(--g)) rgba(var(--lr-primary-rgb), calc(.7 * var(--g))); }
.btn-lr-primary:hover, .btn-lr-primary:focus-visible { color: #fff; box-shadow: 0 0 calc(28px * var(--g)) rgba(var(--lr-primary-rgb), var(--g)), 0 0 calc(60px * var(--g)) rgba(var(--lr-tertiary-rgb), calc(.5 * var(--g))); }
.btn-lr-secondary { --lr-btn-rgb: var(--lr-secondary-rgb); color: #fff; background: linear-gradient(120deg, var(--lr-secondary), #4a10b8); box-shadow: 0 0 calc(18px * var(--g)) rgba(var(--lr-secondary-rgb), calc(.7 * var(--g))); }
.btn-lr-secondary:hover { color: #fff; box-shadow: 0 0 calc(30px * var(--g)) rgba(var(--lr-secondary-rgb), var(--g)); }
.btn-lr-twitch { color: #fff; background: var(--lr-twitch); box-shadow: 0 0 calc(18px * var(--g)) rgba(var(--lr-twitch-rgb), calc(.7 * var(--g))); }
.btn-lr-twitch:hover { color: #fff; background: #a970ff; box-shadow: 0 0 calc(30px * var(--g)) rgba(var(--lr-twitch-rgb), var(--g)); }
.btn-lr-outline { color: var(--lr-text-strong); border-color: var(--lr-primary); background: rgba(var(--lr-primary-rgb), .08); }
.btn-lr-outline:hover { color: #fff; background: var(--lr-primary); box-shadow: 0 0 calc(24px * var(--g)) rgba(var(--lr-primary-rgb), var(--g)); }
.btn-lr-light { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.btn-lr-light:hover { color: #0b0b10; background: #fff; box-shadow: 0 0 calc(24px * var(--g)) rgba(255,255,255, calc(.7 * var(--g))); }
.hero .btn-lr-outline { color: #fff; }

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: max(var(--hero-height, 78vh), 520px);
    display: flex; align-items: center; overflow: hidden; color: #fff; isolation: isolate;
    padding: calc(var(--lr-nav-h) + 3rem) 0 5rem;
}
.hero-media { position: absolute; inset: 0; z-index: -3; background: #07070b; }
.hero-image { position: absolute; inset: -2%; background-size: cover; background-position: center; transform: scale(1.04); animation: heroDrift 24s ease-in-out infinite alternate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-embed { position: absolute; inset: 0; overflow: hidden; }
.hero.is-streaming .hero-image { opacity: 0; transition: opacity .8s; }
@keyframes heroDrift { to { transform: scale(1.1) translate(-1%, -1%); } }
.hero-overlay {
    position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(90deg, rgba(5,5,8, calc(var(--hero-overlay) + .25)) 0%, rgba(5,5,8, var(--hero-overlay)) 55%, rgba(5,5,8, calc(var(--hero-overlay) - .15)) 100%),
        linear-gradient(0deg, var(--bs-body-bg) 0%, transparent 28%);
}
body.has-site-bg .hero-overlay { background: linear-gradient(0deg, rgba(var(--bs-body-bg-rgb), .75) 0%, transparent 22%), linear-gradient(90deg, rgba(5,5,8, calc(var(--hero-overlay) + .25)) 0%, rgba(5,5,8, var(--hero-overlay)) 55%, rgba(5,5,8, calc(var(--hero-overlay) - .15)) 100%); }
.hero-speedlines {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.25 + .5 * var(--lr-glow));
    background:
        linear-gradient(100deg, transparent 0 62%, rgba(var(--lr-primary-rgb), .0) 62%, rgba(var(--lr-primary-rgb), .55) 62.3%, transparent 62.8%),
        linear-gradient(100deg, transparent 0 66%, rgba(var(--lr-secondary-rgb), .5) 66.2%, transparent 66.6%),
        linear-gradient(100deg, transparent 0 69%, rgba(var(--lr-tertiary-rgb), .45) 69.1%, transparent 69.35%);
    filter: blur(.4px) drop-shadow(0 0 calc(8px * var(--lr-glow)) rgba(var(--lr-primary-rgb), .8));
}
.hero-content { position: relative; max-width: 1320px; }
.hero-kicker {
    display: inline-block; font-family: var(--lr-font-display); text-transform: uppercase; letter-spacing: .22em; font-size: .85rem;
    color: var(--lr-highlight); padding: .35rem .9rem; margin-bottom: 1.25rem;
    border-left: 4px solid var(--lr-primary); background: rgba(0,0,0,.35);
    text-shadow: 0 0 calc(12px * var(--lr-glow)) rgba(var(--lr-highlight-rgb), calc(.7 * var(--lr-glow)));
}
.hero-title {
    font-size: clamp(2.8rem, 8.5vw, 6.8rem); line-height: .95; margin-bottom: 1.25rem; font-style: italic;
    color: #fff; transform: skewX(-4deg); transform-origin: left;
    text-shadow:
        0 0 calc(8px * var(--lr-glow)) rgba(var(--lr-primary-rgb), calc(.9 * var(--lr-glow))),
        0 0 calc(30px * var(--lr-glow)) rgba(var(--lr-primary-rgb), calc(.7 * var(--lr-glow))),
        0 0 calc(70px * var(--lr-glow)) rgba(var(--lr-secondary-rgb), calc(.6 * var(--lr-glow))),
        0 4px 0 rgba(0,0,0,.45);
}
.hero-subtitle { font-size: clamp(1.05rem, 1.7vw, 1.35rem); max-width: 42rem; color: rgba(255,255,255,.86); margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-live-badge {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; margin-bottom: 1rem; border-radius: 6px;
    font-family: var(--lr-font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: #fff;
    background: var(--lr-primary); box-shadow: 0 0 calc(20px * var(--g)) rgba(var(--lr-primary-rgb), var(--g));
}
.hero-live-badge [data-hero-live-title]:not(:empty)::before { content: " · "; }
.hero-live-badge [data-hero-live-title] { font-family: var(--lr-font-body); text-transform: none; letter-spacing: 0; font-weight: 600; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-scroll { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 1.6rem; animation: bob 2s ease-in-out infinite; }
.hero-scroll:hover { color: #fff; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hero-image, .hero-scroll { animation: none; } }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; position: relative; }
.section-tight { padding: 1rem 0; }
.section-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); text-transform: uppercase; margin-bottom: 1.25rem; }
.section-title span { position: relative; display: inline-block; padding-bottom: .5rem; }
.section-title span::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; transform: skewX(var(--lr-skew));
    background: linear-gradient(90deg, var(--lr-primary), var(--lr-tertiary));
    box-shadow: 0 0 calc(14px * var(--g)) rgba(var(--lr-primary-rgb), var(--g));
}
.text-center .section-title span::after { left: 50%; margin-left: -32px; }
.section-title-sm { font-size: 1.35rem; margin-bottom: 1.5rem; }

.page-header { padding: 4rem 0 2.5rem; position: relative; }
.page-title { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; font-style: italic; margin-bottom: .75rem; }
.page-intro { max-width: 46rem; color: var(--bs-secondary-color); }
.page-content { font-size: 1.08rem; line-height: 1.7; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--lr-radius); }

/* ---------- Cards ---------- */
.lr-card {
    background: var(--lr-surface); border: 1px solid var(--lr-border); border-radius: var(--lr-radius);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 1.5rem; position: relative; transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card-heading { text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }

/* Welcome + socials */
.welcome-intro { max-width: 46rem; margin-bottom: 2.5rem; }
.social-card {
    --brand-rgb: var(--lr-primary-rgb);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center;
    padding: 1.6rem 1rem; border-radius: var(--lr-radius); text-decoration: none; color: var(--bs-body-color);
    background: var(--lr-surface); border: 1px solid var(--lr-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s;
    height: 100%;
}
.social-card i { font-size: 2.3rem; color: rgb(var(--brand-rgb)); transition: text-shadow .25s; }
.social-card-label { font-family: var(--lr-font-display); text-transform: uppercase; letter-spacing: .06em; }
.social-card-handle { font-size: .9rem; color: var(--bs-secondary-color); }
.social-card:hover {
    transform: translateY(-4px); color: var(--lr-text-strong); border-color: rgba(var(--brand-rgb), .7);
    box-shadow: 0 0 calc(24px * var(--g)) rgba(var(--brand-rgb), calc(.55 * var(--g))), inset 0 0 calc(30px * var(--g)) rgba(var(--brand-rgb), calc(.15 * var(--g)));
}
.social-card:hover i { text-shadow: 0 0 calc(18px * var(--g)) rgba(var(--brand-rgb), var(--g)); }
.social-twitch { --brand-rgb: 145, 70, 255; }
.social-youtube { --brand-rgb: 255, 0, 0; }
.social-x, .social-threads { --brand-rgb: 160, 160, 170; }
[data-bs-theme="light"] .social-x, [data-bs-theme="light"] .social-threads { --brand-rgb: 20, 20, 25; }
.social-instagram { --brand-rgb: 225, 48, 108; }
.social-tiktok { --brand-rgb: 37, 244, 238; }
.social-discord { --brand-rgb: 88, 101, 242; }
.social-facebook { --brand-rgb: 24, 119, 242; }
.social-bluesky { --brand-rgb: 0, 133, 255; }
.social-kick { --brand-rgb: 83, 252, 24; }
.social-reddit { --brand-rgb: 255, 69, 0; }
.social-steam { --brand-rgb: 102, 192, 244; }
.social-iracing { --brand-rgb: 0, 111, 207; }

.social-icons .social-icon {
    --brand-rgb: var(--lr-primary-rgb);
    width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--bs-body-color); border: 1px solid var(--lr-border); background: var(--lr-surface-2); font-size: 1.15rem; margin-bottom: .4rem;
    transition: all .2s;
}
.social-icons .social-icon:hover { color: #fff; background: rgb(var(--brand-rgb)); border-color: transparent; box-shadow: 0 0 calc(18px * var(--g)) rgba(var(--brand-rgb), var(--g)); }
.social-icons .list-inline-item:not(:last-child) { margin-right: .35rem; }

/* Next stream strip */
.next-stream { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; border-left: 4px solid var(--lr-primary); }
.next-stream-icon { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--lr-primary), var(--lr-secondary)); box-shadow: 0 0 calc(20px * var(--g)) rgba(var(--lr-primary-rgb), calc(.7 * var(--g))); }
.next-stream-label { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--bs-secondary-color); }
.next-stream-time { font-family: var(--lr-font-display); font-size: 1.35rem; }
.next-stream-countdown { font-family: var(--lr-font-display); font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--lr-highlight); text-shadow: 0 0 calc(12px * var(--g)) rgba(var(--lr-highlight-rgb), calc(.7 * var(--g))); }
[data-bs-theme="light"] .next-stream-countdown { color: var(--lr-tertiary); }

/* ---------- Schedule ---------- */
.schedule-table { --bs-table-bg: transparent; margin: 0; }
.schedule-table th { font-family: var(--lr-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.schedule-table tr.is-off th { color: var(--bs-secondary-color); }
.time-pill {
    display: inline-block; margin: .15rem 0 .15rem .35rem; padding: .3rem .7rem; border-radius: 6px; font-weight: 700; white-space: nowrap;
    color: #fff; background: linear-gradient(120deg, var(--lr-primary), var(--lr-tertiary));
    box-shadow: 0 0 calc(12px * var(--g)) rgba(var(--lr-primary-rgb), calc(.6 * var(--g)));
}
.schedule-grid { --bs-table-bg: transparent; table-layout: fixed; min-width: 520px; font-size: .78rem; border-collapse: separate; border-spacing: 3px; }
.schedule-grid th { font-weight: 600; text-align: center; color: var(--bs-secondary-color); border: 0; padding: .1rem; white-space: nowrap; }
.schedule-grid tbody th { text-align: right; padding-right: .5rem; width: 58px; }
.schedule-grid td { height: 16px; border: 0; border-radius: 3px; background: var(--lr-surface-2); padding: 0; }
.schedule-grid td.on { background: linear-gradient(90deg, var(--lr-primary), var(--lr-tertiary)); box-shadow: 0 0 calc(10px * var(--g)) rgba(var(--lr-primary-rgb), calc(.8 * var(--g))); }

/* ---------- Gear ---------- */
.gear-jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.gear-jump-link { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--lr-border); background: var(--lr-surface); color: var(--bs-body-color); text-decoration: none; font-weight: 600; font-size: .92rem; transition: all .2s; }
.gear-jump-link:hover { border-color: var(--lr-primary); color: var(--lr-text-strong); box-shadow: 0 0 calc(14px * var(--g)) rgba(var(--lr-primary-rgb), calc(.5 * var(--g))); }
.gear-section { margin-bottom: 3.5rem; }
.gear-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.gear-card:hover { transform: translateY(-4px); border-color: rgba(var(--lr-primary-rgb), .6); box-shadow: 0 0 calc(26px * var(--g)) rgba(var(--lr-primary-rgb), calc(.45 * var(--g))); }
.gear-media { aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(var(--lr-secondary-rgb), .35), transparent 60%), radial-gradient(circle at 80% 90%, rgba(var(--lr-primary-rgb), .3), transparent 55%), var(--lr-surface-2); overflow: hidden; }
.gear-media img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: transform .4s ease; }
.gear-card:hover .gear-media img { transform: scale(1.05); }
.gear-media > i { font-size: 3.5rem; color: rgba(var(--lr-primary-rgb), .85); text-shadow: 0 0 calc(24px * var(--g)) rgba(var(--lr-primary-rgb), var(--g)); }
.gear-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.gear-title { font-size: 1.12rem; margin-bottom: .45rem; }
.gear-desc { color: var(--bs-secondary-color); flex: 1; }

/* ---------- Streams / VODs ---------- */
.lr-pills .nav-link { color: var(--bs-body-color); border: 1px solid var(--lr-border); margin-right: .5rem; border-radius: 999px; font-weight: 600; background: var(--lr-surface); }
.lr-pills .nav-link.active { background: linear-gradient(120deg, var(--lr-primary), var(--lr-tertiary)); border-color: transparent; color: #fff; box-shadow: 0 0 calc(16px * var(--g)) rgba(var(--lr-primary-rgb), calc(.7 * var(--g))); }
.vod-card { background: var(--lr-surface); border: 1px solid var(--lr-border); border-radius: var(--lr-radius); overflow: hidden; height: 100%; transition: transform .25s, box-shadow .25s, border-color .25s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vod-card:hover { transform: translateY(-4px); border-color: rgba(var(--lr-twitch-rgb), .7); box-shadow: 0 0 calc(26px * var(--g)) rgba(var(--lr-twitch-rgb), calc(.5 * var(--g))); }
.vod-open { all: unset; display: block; width: 100%; cursor: pointer; }
.vod-open:focus-visible { outline: 3px solid var(--lr-primary); outline-offset: -3px; border-radius: var(--lr-radius); }
.vod-thumb { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.vod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vod-card:hover .vod-thumb img { transform: scale(1.06); }
.vod-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; color: rgba(255,255,255,.4); background: linear-gradient(135deg, #1b1030, #2a0a14); }
.vod-duration { position: absolute; left: .6rem; bottom: .6rem; background: rgba(0,0,0,.78); color: #fff; font-size: .8rem; font-weight: 700; padding: .1rem .45rem; border-radius: 4px; font-variant-numeric: tabular-nums; }
.vod-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; color: #fff; opacity: 0; background: rgba(var(--lr-twitch-rgb), .25); transition: opacity .25s; }
.vod-card:hover .vod-play { opacity: 1; }
.vod-body { padding: 1rem 1.15rem 1.15rem; }
.vod-title { font-family: var(--lr-font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: 0; margin-bottom: .45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.vod-meta { display: flex; gap: 1rem; font-size: .86rem; color: var(--bs-secondary-color); }
.vod-meta i { margin-right: .2rem; }
.vod-thumb.placeholder { display: block; width: 100%; min-height: 0; }
.vod-body .placeholder { display: block; margin-bottom: .5rem; }
.lr-modal { background: var(--lr-surface-solid); border: 1px solid var(--lr-border); }
.live-now-card { padding: 0; overflow: hidden; border-color: rgba(var(--lr-primary-rgb), .6); box-shadow: 0 0 calc(30px * var(--g)) rgba(var(--lr-primary-rgb), calc(.4 * var(--g))); }
.live-now-card iframe { border: 0; }

/* ---------- Forms ---------- */
.form-control, .form-select { background-color: var(--lr-surface-2); border-color: var(--lr-border); }
.form-control:focus, .form-select:focus { border-color: var(--lr-primary); box-shadow: 0 0 0 .2rem rgba(var(--lr-primary-rgb), .25), 0 0 calc(18px * var(--g)) rgba(var(--lr-primary-rgb), calc(.35 * var(--g))); background-color: var(--lr-surface-2); }
.form-check-input:checked { background-color: var(--lr-primary); border-color: var(--lr-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--lr-primary-rgb), .25); border-color: var(--lr-primary); }

/* ---------- Footer ---------- */
.site-footer {
    position: relative; z-index: 1; padding: 3.5rem 0 1.5rem; margin-top: 3rem;
    background: var(--lr-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--lr-border);
}
.site-footer::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--lr-primary), var(--lr-secondary), var(--lr-tertiary), transparent);
    box-shadow: 0 0 calc(14px * var(--g)) rgba(var(--lr-primary-rgb), var(--g));
}
.footer-logo { height: 46px; width: auto; filter: drop-shadow(0 0 calc(8px * var(--g)) rgba(var(--lr-primary-rgb), calc(.5 * var(--g)))); }
.footer-heading { font-size: .85rem; text-transform: uppercase; letter-spacing: .15em; color: var(--bs-secondary-color); margin-bottom: 1rem; }
.footer-nav li { margin-bottom: .45rem; }
.footer-nav a { color: var(--bs-body-color); text-decoration: none; text-transform: uppercase; font-weight: 600; letter-spacing: .05em; font-size: .92rem; transition: color .2s, padding .2s; }
.footer-nav a:hover { color: var(--lr-primary); padding-left: .35rem; }
.footer-copy { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lr-border); text-align: center; opacity: .8; }

/* ---------- 404 ---------- */
.error-page { padding: 7rem 0; }
.error-code { font-family: var(--lr-font-display); font-size: clamp(6rem, 18vw, 11rem); line-height: 1; font-style: italic; }