/* ============================================================
   CPW Tracker — Modern Broadcast Design Language
   Inspired by Next.js reference: Oswald + Barlow, dark theme
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────── */
:root {
    --bg-primary: #0a0a0a;
    --bg-surface: #111111;
    --bg-elevated: #1a1a1a;
    --bg-card: #161616;
    --bg-hover: #222222;
    --border: #2a2a2a;
    --border-light: #333333;

    --text-primary: #F5F5F5;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;

    --accent: #E57200;
    --accent-light: #FF8C1A;
    --accent-dark: #CC6600;
    --accent-glow: rgba(229, 114, 0, 0.08);

    --gold: #D4AF37;
    --gold-light: #E8C84A;
    --gold-glow: rgba(212, 175, 55, 0.12);

    --font-display: 'Oswald', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;

    --radius: 10px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --shadow: 0 4px 24px rgba(0,0,0,0.5);
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-light); }

img { max-width: 100%; height: auto; }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.font-display { font-family: var(--font-display); }
.font-condensed { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.gold-text { background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Navigation ────────────────────────────────────────── */
.main-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
}
.nav-inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; gap: 1rem;
    height: 80px;
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.nav-logo-text {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.08em; color: var(--text-primary);
}
.nav-logo-text .logo-accent { color: var(--accent); }
.nav-logo-img { height: 64px; width: auto; }

.nav-links {
    display: flex; align-items: center; justify-content: center; gap: 0.25rem;
    flex: 1; overflow: visible;
}
.nav-link {
    font-family: var(--font-condensed); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); padding: 0.4rem 0.6rem; border-radius: var(--radius-xs);
    white-space: nowrap; transition: all 0.2s;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-link-accent { color: var(--accent); }
.nav-link-accent:hover { color: var(--accent-light); }
.nav-separator { width: 1px; height: 20px; background: var(--border); margin: 0 0.25rem; flex-shrink: 0; }

/* ── Nav Submenu Groups ───────────────────────────────── */
.nav-group { position: relative; display: inline-flex; align-self: stretch; align-items: center; }
.nav-group-trigger {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-condensed); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); padding: 0.4rem 0.6rem; border-radius: var(--radius-xs);
    white-space: nowrap; transition: all 0.2s;
}
.nav-group-trigger:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-group.open .nav-group-trigger { color: var(--accent); }
.icon-chevron {
    width: 10px; height: 10px; opacity: 0.5; flex-shrink: 0;
    transition: transform 0.2s;
}
.nav-group.open .icon-chevron { transform: rotate(180deg); opacity: 1; }

.nav-submenu {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); min-width: 180px;
    box-shadow: var(--shadow); overflow: hidden; z-index: 200;
    padding: 0.25rem 0;
}
.nav-group:hover .nav-submenu,
.nav-group.open .nav-submenu { display: block; }
.nav-submenu .nav-link {
    display: flex; width: 100%; padding: 0.55rem 1rem;
    font-size: 0.75rem; border-radius: 0;
}
.nav-submenu .nav-link:hover { background: var(--bg-hover); }

/* ── News Mega Menu ─────────────────────────────────── */
.nav-mega {
    left: 0; transform: none;
    min-width: 620px; padding: 0;
    border-radius: var(--radius);
    overflow: visible;
}
.nav-mega-inner {
    display: flex; gap: 0; padding: 0;
}
.nav-mega-col {
    padding: 0.75rem 0; min-width: 150px;
}
.nav-mega-col:not(:last-child) {
    border-right: 1px solid var(--border);
}
.nav-mega-heading {
    font-family: var(--font-condensed); font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted);
    padding: 0.25rem 1rem 0.5rem; opacity: 0.7;
}
.nav-mega-col-articles {
    flex: 1; min-width: 200px;
}
.nav-mega-article {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.75rem; text-decoration: none; color: var(--text-primary);
    transition: background 0.15s;
}
.nav-mega-article:hover { background: var(--bg-hover); }
.nav-mega-article-img {
    width: 40px; height: 40px; border-radius: var(--radius-xs);
    object-fit: cover; flex-shrink: 0;
}
.nav-mega-article-text {
    display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
}
.nav-mega-article-cat {
    font-family: var(--font-condensed); font-size: 0.55rem; font-weight: 600;
    letter-spacing: 0.1em; color: var(--accent); opacity: 0.8;
}
.nav-mega-article-title {
    font-size: 0.72rem; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-mega-col-ppv {
    padding: 0.5rem; width: 180px; flex-shrink: 0;
}
.nav-mega-ppv {
    display: block; position: relative; border-radius: var(--radius-sm);
    overflow: hidden; text-decoration: none; height: 100%;
}
.nav-mega-ppv-img {
    width: 100%; height: 100%; object-fit: cover;
}
.nav-mega-ppv-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 0.6rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
}
.nav-mega-ppv-badge {
    font-family: var(--font-condensed); font-size: 0.5rem; font-weight: 700;
    letter-spacing: 0.15em; color: var(--accent);
    background: rgba(0,0,0,0.6); padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs); align-self: flex-start; margin-bottom: 0.25rem;
}
.nav-mega-ppv-name {
    font-family: var(--font-display); font-size: 0.85rem; font-weight: 700;
    color: #fff; line-height: 1.1;
}
.nav-mega-ppv-date {
    font-size: 0.6rem; color: rgba(255,255,255,0.7); margin-top: 0.15rem;
}

.nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.nav-notification { position: relative; padding: 0.4rem; border-radius: var(--radius-xs); color: var(--text-muted); }
.nav-notification:hover { color: var(--accent); background: var(--bg-hover); }
.notification-dot {
    position: absolute; top: 0; right: 0;
    background: var(--accent); color: #000; font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.nav-user-menu { position: relative; }
.nav-user-btn {
    display: flex; align-items: center; gap: 0.5rem;
    background: none; border: none; cursor: pointer; padding: 0.3rem;
    border-radius: var(--radius-sm); color: var(--text-primary);
}
.nav-user-btn:hover { background: var(--bg-hover); }
.nav-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-glow); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
}
.nav-username { font-size: 0.8rem; font-weight: 500; display: none; }
@media (min-width: 768px) { .nav-username { display: inline; } }

.nav-dropdown {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
    min-width: 200px; box-shadow: var(--shadow); overflow: hidden; z-index: 200;
}
.nav-dropdown.show { display: block; }
.nav-dropdown-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.nav-dropdown-name { font-weight: 600; font-size: 0.85rem; }
.nav-dropdown-role { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.nav-dropdown-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem; font-size: 0.8rem; color: var(--text-secondary); transition: all 0.15s;
}
.nav-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-dropdown-danger { color: #EF4444; }
.nav-dropdown-danger:hover { color: #FCA5A5; }
.nav-dropdown-divider { height: 1px; background: var(--border); }

.nav-hamburger {
    display: none; background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 0.4rem; border-radius: var(--radius-xs);
}
.nav-hamburger:hover { color: var(--text-primary); background: var(--bg-hover); }

@media (max-width: 768px) {
    .main-nav { padding: 0 0.75rem; }
    .nav-inner { height: 56px; gap: 0.5rem; }
    .nav-logo-img { height: 40px; }
    .nav-links { display: none !important; }
    .nav-hamburger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
    .nav-notification-desktop { display: none !important; }
    .nav-separator { display: none; }
    .nav-username { display: none; }
}

/* ── Mobile Drawer ────────────────────────────────────── */
.mobile-drawer-overlay {
    display: none; position: fixed; inset: 0; z-index: 900;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}
.mobile-drawer-overlay.open {
    display: block;
    background: rgba(0, 0, 0, 0.6);
}

.mobile-drawer {
    display: none; position: fixed;
    top: 0; right: -100%; bottom: 0; z-index: 901;
    width: 300px; max-width: 85vw;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
@media (max-width: 768px) {
    .mobile-drawer { display: flex; }
}
.mobile-drawer.open { right: 0; }

.mobile-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem; gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    min-height: 56px;
    background: var(--bg-surface);
}
.mobile-drawer-user {
    display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0;
}
.mobile-drawer-avatar {
    width: 36px; height: 36px; font-size: 0.85rem; flex-shrink: 0;
}
.mobile-drawer-user-info { min-width: 0; flex: 1; }
.mobile-drawer-user-name {
    font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-drawer-user-role {
    font-family: var(--font-condensed); font-size: 0.6rem;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--accent);
}
.mobile-drawer-notif {
    position: relative; padding: 0.3rem; color: var(--text-muted); flex-shrink: 0;
}
.mobile-drawer-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 0.3rem;
    border-radius: var(--radius-xs); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    transition: all 0.15s;
}
.mobile-drawer-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.mobile-drawer-close i, .mobile-drawer-close svg { width: 20px; height: 20px; }

.mobile-drawer-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-drawer-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 1.25rem; text-decoration: none;
    font-family: var(--font-condensed); font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
    background: none; border: none; cursor: pointer; width: 100%;
    transition: all 0.15s;
}
.mobile-drawer-link:hover, .mobile-drawer-link:active {
    color: var(--text-primary); background: var(--bg-hover);
}
.mobile-drawer-link i, .mobile-drawer-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }
.mobile-drawer-link-accent { color: var(--accent); }
.mobile-drawer-link-accent i, .mobile-drawer-link-accent svg { opacity: 0.8; }

.mobile-drawer-trigger { position: relative; }
.mobile-drawer-chevron {
    width: 14px !important; height: 14px !important;
    margin-left: auto; opacity: 0.4 !important;
    transition: transform 0.25s ease;
}
.mobile-drawer-group.open .mobile-drawer-chevron {
    transform: rotate(180deg); opacity: 0.8 !important;
}
.mobile-drawer-group.open > .mobile-drawer-trigger {
    color: var(--accent);
}

.mobile-drawer-sub {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(255,255,255,0.02);
}
.mobile-drawer-group.open .mobile-drawer-sub {
    max-height: 400px;
}
.mobile-drawer-sublink {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 1.25rem 0.55rem 3rem; text-decoration: none;
    font-family: var(--font-condensed); font-size: 0.75rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    transition: all 0.15s;
}
.mobile-drawer-sublink:hover, .mobile-drawer-sublink:active {
    color: var(--text-primary); background: var(--bg-hover);
}
.mobile-drawer-sublink i, .mobile-drawer-sublink svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }

.mobile-drawer-divider {
    height: 1px; background: var(--border); margin: 0.4rem 1rem;
}

.mobile-drawer-footer {
    border-top: 1px solid var(--border);
    padding: 0.5rem; display: flex; gap: 0;
    background: var(--bg-surface);
}
.mobile-drawer-footer-link {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    flex: 1; padding: 0.6rem 0.25rem; text-decoration: none;
    font-family: var(--font-condensed); font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); border-radius: var(--radius-xs);
    transition: all 0.15s;
}
.mobile-drawer-footer-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.mobile-drawer-footer-link i, .mobile-drawer-footer-link svg { width: 14px; height: 14px; opacity: 0.5; }
.mobile-drawer-footer-danger { color: #EF4444; }
.mobile-drawer-footer-danger:hover { color: #FCA5A5; }

/* ── Main Content ──────────────────────────────────────── */
.main-content {
    max-width: 1400px; margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    min-height: calc(100vh - 56px - 200px);
}

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1rem; }
.footer-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.footer-brand-name .logo-accent { color: var(--accent); }
.footer-desc { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.footer-heading {
    font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.75rem;
}
.footer-link-list { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-link-list a { font-size: 0.85rem; color: var(--text-muted); transition: color 0.2s; }
.footer-link-list a:hover { color: var(--text-primary); }
.footer-bottom {
    border-top: 1px solid var(--border); padding-top: 1.5rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-copy {
    font-family: var(--font-condensed); font-size: 0.75rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em;
}
.footer-live {
    display: flex; align-items: center; gap: 0.4rem;
}
.footer-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite;
}
.footer-live-text {
    font-family: var(--font-condensed); font-size: 0.75rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); transition: all 0.2s;
    display: block;
}
.card:hover { border-color: var(--border-light); transform: translateY(-1px); }
.card-static { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }

.editorial-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.editorial-card:hover { border-color: var(--accent); }
.editorial-card-accent {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--accent), transparent);
}

.vs-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.vs-card::before {
    content: 'VS'; position: absolute; right: -10px; top: -10px;
    font-family: var(--font-display); font-size: 4rem; font-weight: 900;
    opacity: 0.04; pointer-events: none;
}

.superstar-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.superstar-card:hover { border-color: var(--accent); }
.superstar-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-glow); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}

/* Title card (championship gold border glow) */
.title-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.title-card:hover { border-color: var(--gold); }
.title-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at top right, rgba(212,175,55,0.06), transparent 70%);
}

/* Show card with top color stripe */
.show-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.show-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.show-card-stripe { height: 3px; width: 100%; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: var(--radius-xs); border: none;
    font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.btn-primary {
    background: var(--accent); color: #000;
}
.btn-primary:hover { background: var(--accent-light); color: #000; }
.btn-ghost {
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-success { background: rgba(34,197,94,0.15); color: #22C55E; }
.btn-success:hover { background: rgba(34,197,94,0.25); }
.btn-danger { background: rgba(239,68,68,0.15); color: #EF4444; }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.btn-full { width: 100%; }

/* Filter tabs (show page type filter) */
.filter-tab {
    padding: 0.5rem 1rem;
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.2s; cursor: pointer; border: none; background: none;
    text-decoration: none; display: inline-block;
}
.filter-tab-active {
    color: #000; background: var(--accent); border-radius: var(--radius-xs);
}
.filter-tab-inactive {
    color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.filter-tab-inactive:hover { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Pill filters (rankings divisions) */
.pill-filter {
    padding: 0.4rem 0.85rem; border-radius: var(--radius-xs);
    font-size: 0.8rem; font-weight: 600; transition: all 0.2s;
    cursor: pointer; border: 1px solid var(--border);
    text-decoration: none; display: inline-block;
}
.pill-filter-active { background: var(--accent); color: #000; border-color: var(--accent); }
.pill-filter-inactive {
    background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border);
}
.pill-filter-inactive:hover { border-color: var(--accent); color: var(--accent); }

/* ── Form Inputs ───────────────────────────────────────── */
.input-field, .select-field, .textarea-field {
    width: 100%; padding: 0.6rem 0.8rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-xs); color: var(--text-primary);
    font-family: var(--font-body); font-size: 0.85rem;
    transition: border-color 0.2s;
}
.input-field:focus, .select-field:focus, .textarea-field:focus {
    outline: none; border-color: var(--accent);
}
.input-field::placeholder, .textarea-field::placeholder { color: var(--text-muted); }
.select-field { cursor: pointer; appearance: auto; }
.textarea-field { resize: vertical; min-height: 80px; }

label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }

/* ── Badges ────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: var(--font-condensed); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem; border-radius: 4px;
}
.badge-accent { background: var(--accent-glow); color: var(--accent); }
.badge-muted { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.badge-success { background: rgba(34,197,94,0.15); color: #22C55E; }
.badge-warning { background: rgba(245,158,11,0.15); color: #F59E0B; }
.badge-danger { background: rgba(239,68,68,0.15); color: #EF4444; }
.badge-info { background: rgba(59,130,246,0.15); color: #3B82F6; }
.badge-sm { font-size: 0.65rem; padding: 0.2rem 0.5rem; }

.news-label {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: var(--font-condensed); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0.25rem 0.6rem; border-radius: 3px;
}
.news-label-breaking { background: rgba(239,68,68,0.15); color: #EF4444; }
.news-label-developing { background: rgba(245,158,11,0.15); color: #F59E0B; }
.news-label-exclusive { background: var(--accent-glow); color: var(--accent); }
.news-label-results { background: rgba(59,130,246,0.15); color: #3B82F6; }
.news-label-gold { background: var(--gold-glow); color: var(--gold-light); }

/* ── Momentum Bar ──────────────────────────────────────── */
.momentum-bar {
    height: 6px; border-radius: 3px; overflow: hidden;
    background: var(--bg-hover); flex: 1;
}
.momentum-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
    transition: width 0.3s;
}
.momentum-label {
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--accent);
    margin-left: 0.5rem;
}

/* ── Record Display ────────────────────────────────────── */
.record-compact { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; }
.record-w { color: #22C55E; }
.record-l { color: #EF4444; }
.record-d { color: var(--text-muted); }

/* ── Page Header ───────────────────────────────────────── */
.page-header { margin-bottom: 2rem; }
.page-header h1 {
    font-family: var(--font-display); font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 700;
    letter-spacing: 0.04em; line-height: 1.1;
}
.page-header .subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem; }
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.section-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem;
}

/* ── Page Banner Image ─────────────────────────────────── */
.page-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: var(--radius-sm);
}
.page-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--bg-primary) 100%);
    pointer-events: none;
}
@media (max-width: 768px) {
    .page-banner { margin-bottom: 1.25rem; }
    .page-banner[style*="height"] { max-height: 160px !important; }
}

/* ── Hero Section ──────────────────────────────────────── */
.hero-section {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-surface) 50%, var(--accent-glow) 100%);
    padding: 3rem 1rem 3.5rem; margin: -1.5rem -1rem 2rem;
}
.hero-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(229,114,0,0.06) 0%, transparent 60%);
}
.hero-section h1 {
    font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900;
    letter-spacing: 0.06em; line-height: 1;
}
.hero-section .vs-divider {
    font-family: var(--font-display); font-weight: 900; color: var(--accent);
}

/* ── VS Divider ────────────────────────────────────────── */
.vs-divider {
    font-family: var(--font-display); font-weight: 900; color: var(--accent);
    font-size: 0.85rem;
}

/* ── Grid Layouts ──────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1024px) { .grid-2-1 { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }

/* ── Spacing ───────────────────────────────────────────── */
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

/* ── Text Utils ────────────────────────────────────────── */
.text-xs { font-size: 0.8rem; } .text-sm { font-size: 0.9rem; }
.text-lg { font-size: 1.1rem; } .text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; } .font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Stat Box ──────────────────────────────────────────── */
.stat-box {
    background: var(--bg-elevated); border-radius: var(--radius-xs);
    text-align: center; padding: 0.75rem;
}
.stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.stat-label { font-family: var(--font-condensed); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Table Rows ────────────────────────────────────────── */
.table-row { border-bottom: 1px solid var(--border); transition: background 0.15s; }
.table-row:hover { background: var(--bg-hover); }
.table-row:last-child { border-bottom: none; }

/* ── Flash Messages ────────────────────────────────────── */
.flash {
    padding: 0.75rem 1rem; border-radius: var(--radius-xs);
    font-size: 0.85rem; margin-bottom: 1.5rem;
}
.flash-success { background: rgba(34,197,94,0.1); color: #22C55E; border: 1px solid rgba(34,197,94,0.3); }
.flash-error { background: rgba(239,68,68,0.1); color: #EF4444; border: 1px solid rgba(239,68,68,0.3); }
.flash-info { background: rgba(59,130,246,0.1); color: #3B82F6; border: 1px solid rgba(59,130,246,0.3); }

/* ── Auth Page ─────────────────────────────────────────── */
.auth-container { max-width: 420px; margin: 2rem auto; }
.auth-container .card-static { padding: 1.5rem; }
.auth-container h1 { text-align: center; margin-bottom: 0.25rem; }
.auth-container .subtitle { text-align: center; margin-bottom: 1.5rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-toggle { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; }
.auth-toggle a { color: var(--accent); }

/* ── Pulse Glow Animation ──────────────────────────────── */
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite alternate; }
@keyframes pulseGlow {
    from { box-shadow: 0 0 8px rgba(229,114,0,0.2); }
    to { box-shadow: 0 0 20px rgba(229,114,0,0.4); }
}

/* ── Fade In Animation ─────────────────────────────────── */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Divider Lines ─────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 1rem 0; }

/* ── Icon sizing helpers ───────────────────────────────── */
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Empty State ───────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 3rem 1rem; color: var(--text-muted);
}
.empty-state p { font-size: 0.85rem; }

/* ── W/L indicators ────────────────────────────────────── */
.result-w { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-xs); background: rgba(34,197,94,0.2); color: #22C55E; font-size: 0.7rem; font-weight: 700; }
.result-l { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-xs); background: rgba(239,68,68,0.2); color: #EF4444; font-size: 0.7rem; font-weight: 700; }

/* ── Hidden utility ────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Championship banner ───────────────────────────────── */
.champion-banner {
    background: linear-gradient(135deg, var(--bg-surface), rgba(212,175,55,0.08));
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.5rem; position: relative; overflow: hidden;
}
.champion-banner::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.08), transparent);
}

/* ── Desktop-only helper ───────────────────────────────── */
.desktop-only { display: none; }
@media(min-width:768px) { .desktop-only { display: block !important; } }

/* ============================================================
   UNIVERSE MODE TRACKER — Enhanced Styles
   Premium dark theme with orange (#E57200) accent
   ============================================================ */

/* ── Enhanced Navigation ──────────────────────────────── */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nav-link .icon-nav {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    flex-shrink: 0;
}
.nav-link:hover .icon-nav { opacity: 1; }

.nav-federation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: default;
    flex-shrink: 0;
}
.nav-federation .fed-icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

/* ── Dashboard Layout ─────────────────────────────────── */
.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dashboard-title-icon {
    width: 36px;
    height: 36px;
    color: var(--accent);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}
.dashboard-title h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.1;
}
.dashboard-subtitle {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dashboard-subtitle::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--accent);
}

.network-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}
.network-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    animation: pulse 1.5s infinite;
}

/* ── Stat Cards (Dashboard) ───────────────────────────── */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(229, 114, 0, 0.08);
}
.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.stat-card-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}
.stat-card-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s;
}
.stat-card:hover .stat-card-arrow { opacity: 1; }
.stat-card-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stat-card-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

/* ── Show Preview Cards ───────────────────────────────── */
.show-preview {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.show-preview:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.show-preview-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-primary));
}
.show-preview-placeholder {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(229,114,0,0.05) 100%);
}
.show-preview-placeholder .placeholder-logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.08);
    letter-spacing: 0.1em;
}
.show-preview-body {
    padding: 1rem 1.25rem;
}
.show-preview-brand {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-condensed);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.show-preview-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.show-preview-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.show-preview-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Universe News Panel ──────────────────────────────── */
.news-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.news-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.news-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.news-panel-title i, .news-panel-title svg { color: var(--text-muted); }
.news-live {
    font-family: var(--font-condensed);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #EF4444;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.news-live::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EF4444;
    animation: pulse 1.5s infinite;
}
.news-panel-body {
    padding: 1.25rem;
    min-height: 200px;
}
.news-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}
.news-empty-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    opacity: 0.3;
    margin: 0 auto 0.75rem;
}
.news-empty-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--bg-hover); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }

/* ── Quick Actions Grid ───────────────────────────────── */
.quick-actions {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.quick-actions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--accent);
}
.quick-actions-icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
}
.quick-actions-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.quick-actions-subtitle {
    font-family: var(--font-condensed);
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1px;
    background: var(--border);
    padding: 0;
}
.quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: var(--bg-surface);
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s;
    position: relative;
}
.quick-action-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.quick-action-item:hover .quick-action-icon { color: var(--accent); }
.quick-action-icon {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    transition: color 0.2s;
}
.quick-action-corner {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
}
.quick-action-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Section Divider ──────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.section-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.section-divider-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}
.section-divider-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Enhanced Roster Page ─────────────────────────────── */
.roster-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.roster-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.roster-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.roster-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.brand-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.brand-tab:hover { border-color: var(--accent); color: var(--text-primary); }
.brand-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}
.gender-tab {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.gender-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Enhanced superstar card for grid */
.superstar-card-grid {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.superstar-card-grid:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.superstar-card-grid .card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: var(--bg-elevated);
}
.superstar-card-grid .card-avatar-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-primary));
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255,255,255,0.06);
}
.superstar-card-grid .card-body {
    padding: 1rem;
}
.superstar-card-grid .card-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.superstar-card-grid .card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Rankings Podium ──────────────────────────────────── */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
}
.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}
.podium-place:hover { transform: translateY(-4px); }
.podium-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid;
    margin-bottom: 0.75rem;
    background: var(--bg-elevated);
}
.podium-portrait-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
.podium-1st .podium-portrait,
.podium-1st .podium-portrait-placeholder {
    width: 100px;
    height: 100px;
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--gold);
}
.podium-2nd .podium-portrait,
.podium-2nd .podium-portrait-placeholder {
    border-color: #C0C0C0;
    background: rgba(192,192,192,0.1);
    color: #C0C0C0;
}
.podium-3rd .podium-portrait,
.podium-3rd .podium-portrait-placeholder {
    border-color: #CD7F32;
    background: rgba(205,127,50,0.1);
    color: #CD7F32;
}
.podium-crown {
    width: 28px;
    height: 28px;
    color: var(--gold);
    margin-bottom: -8px;
    z-index: 1;
}
.podium-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
}
.podium-score {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.podium-pedestal {
    width: 100%;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    margin-top: 0.5rem;
}
.podium-1st .podium-pedestal {
    height: 80px;
    background: linear-gradient(180deg, var(--gold-glow), transparent);
    border-top: 2px solid var(--gold);
    color: var(--gold);
    font-size: 1.5rem;
}
.podium-2nd .podium-pedestal {
    height: 60px;
    background: linear-gradient(180deg, rgba(192,192,192,0.08), transparent);
    border-top: 2px solid #C0C0C0;
    color: #C0C0C0;
    font-size: 1.25rem;
}
.podium-3rd .podium-pedestal {
    height: 44px;
    background: linear-gradient(180deg, rgba(205,127,50,0.08), transparent);
    border-top: 2px solid #CD7F32;
    color: #CD7F32;
    font-size: 1.1rem;
}

/* Rankings table row */
.rank-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.rank-row:hover { background: var(--bg-hover); }
.rank-number {
    width: 32px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.rank-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.rank-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--accent-glow);
    color: var(--accent);
    flex-shrink: 0;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
}
.rank-brand {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.rank-momentum {
    width: 100px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rank-trend {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.trend-up { color: #22C55E; }
.trend-down { color: #EF4444; }
.trend-flat { color: var(--text-muted); }

/* ── Calendar Styles ──────────────────────────────────── */
.calendar-container {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.calendar-nav-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s;
}
.calendar-nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.calendar-month {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar-day-header {
    padding: 0.5rem;
    text-align: center;
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.calendar-day {
    min-height: 80px;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-top: none;
    border-left: none;
    transition: background 0.15s;
    cursor: pointer;
}
.calendar-day:hover { background: var(--bg-hover); }
.calendar-day.today {
    background: var(--accent-glow);
    border-color: var(--accent);
}
.calendar-day-label {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.calendar-event {
    display: block;
    padding: 0.15rem 0.3rem;
    margin-top: 0.25rem;
    border-radius: 2px;
    font-size: 0.55rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Welcome Banner ───────────────────────────────────── */
.welcome-banner {
    background: linear-gradient(135deg, var(--bg-surface), rgba(59,130,246,0.04));
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 2rem;
}
.welcome-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.welcome-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.welcome-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(59,130,246,0.06);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-xs);
    border-left: 2px solid rgba(59,130,246,0.3);
}

/* ── Progress Steps (Character Creation) ──────────────── */
.step-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.step-progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
}
.step-progress-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.2s;
}
.step-progress-item.active {
    color: var(--accent);
}
.step-progress-item.active::after {
    background: var(--accent);
}
.step-progress-item:hover {
    color: var(--text-primary);
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    font-size: 0.6rem;
    flex-shrink: 0;
    transition: all 0.2s;
}
.step-progress-item.active .step-number {
    border-color: var(--accent);
    background: var(--accent);
    color: #000;
}

/* ── Tracker-style Footer ─────────────────────────────── */
.tracker-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 1.5rem 1rem;
    text-align: center;
}
.tracker-footer-text {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ── Setup Complete Banner ────────────────────────────── */
.setup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(229,114,0,0.08), transparent);
    border: 1px solid rgba(229,114,0,0.2);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}
.setup-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.setup-banner-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
}
.setup-banner-title {
    font-weight: 700;
    font-size: 0.85rem;
}
.setup-banner-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.setup-banner-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
}

/* ── Target Event Card ────────────────────────────────── */
.target-event {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.25s;
}
.target-event:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.target-event-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--bg-elevated), rgba(229,114,0,0.05));
}
.target-event-body {
    padding: 1rem 1.25rem;
}
.target-event-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Responsive tweaks for dashboard ──────────────────── */
@media (max-width: 768px) {
    .podium { flex-direction: column; align-items: center; gap: 1.5rem; }
    .podium-1st { order: -1; }
    .podium-pedestal { display: none; }
    .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-card-value { font-size: 2rem; }
}

/* ============================================================
   TOURNAMENT SYSTEM — Orange & White Theme
   ============================================================ */

/* ── Tournament Cards (List Page) ────────────────────── */
.tournament-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
    color: var(--text-primary);
    text-decoration: none;
}
.tournament-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(229, 114, 0, 0.08);
    transform: translateY(-2px);
    color: var(--text-primary);
}
.tournament-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tournament-card-type {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.tournament-card-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: #fff;
}
.tournament-card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.tournament-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.tournament-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.tournament-card-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tournament-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.tournament-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s;
}
.tournament-card-winner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* Tournament Badges */
.tournament-badge {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.tournament-badge-completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}
.tournament-badge-live {
    background: rgba(229, 114, 0, 0.2);
    color: var(--accent-light);
    animation: pulse-glow 2s ease-in-out infinite;
}
.tournament-badge-setup {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(229, 114, 0, 0); }
    50% { box-shadow: 0 0 8px rgba(229, 114, 0, 0.3); }
}

/* ── Tournament Create Page ──────────────────────────── */
.tournament-create-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tournament-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
}
.tournament-create-title {
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: 0.03em;
}
.tournament-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    transition: all 0.2s;
    cursor: pointer;
    background: none;
    border: none;
}
.tournament-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Tabs */
.tournament-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
}
.tournament-tab {
    flex: 1;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.tournament-tab:hover { color: var(--text-secondary); }
.tournament-tab.active {
    color: #fff;
    border-bottom-color: var(--accent);
    background: rgba(229, 114, 0, 0.05);
}

/* Tab Content */
.tournament-tab-content {
    display: none;
    padding: 1.5rem;
}
.tournament-tab-content.active { display: block; }

/* Form Elements */
.tournament-form-group {
    margin-bottom: 1rem;
}
.tournament-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 0.4rem;
}
.tournament-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    outline: none;
    transition: border-color 0.2s;
}
.tournament-input:focus { border-color: var(--accent); }
.tournament-input::placeholder { color: var(--text-muted); }
.tournament-textarea {
    min-height: 100px;
    resize: vertical;
}
.tournament-select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
.tournament-select:focus { border-color: var(--accent); }
.tournament-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(229, 114, 0, 0.08);
    border: 1px solid rgba(229, 114, 0, 0.2);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    color: var(--accent);
}

/* Competitor Selection Grid */
.competitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.competitor-grid::-webkit-scrollbar { width: 4px; }
.competitor-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.competitor-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s;
}
.competitor-option:hover { border-color: var(--accent); }
.competitor-option.disabled { opacity: 0.3; pointer-events: none; }
.competitor-checkbox { display: none; }
.competitor-checkbox:checked + .competitor-avatar {
    box-shadow: 0 0 0 2px var(--accent);
}
.competitor-checkbox:checked ~ .competitor-check {
    opacity: 1;
    background: var(--accent);
}
.competitor-option:has(.competitor-checkbox:checked) {
    border-color: var(--accent);
    background: rgba(229, 114, 0, 0.05);
}
.competitor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
    transition: box-shadow 0.15s;
}
.competitor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.competitor-info { flex: 1; min-width: 0; }
.competitor-name {
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.competitor-brand {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.competitor-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: var(--border);
    transition: all 0.15s;
    flex-shrink: 0;
    color: #000;
}

/* ── Tournament Bracket — Horizontal with Connector Lines ── */
.bracket-scroll {
    overflow-x: auto;
    padding-bottom: 1rem;
}

/* Round header labels row */
.bk-header {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
}
.bk-header-spacer {
    width: 40px;
    flex-shrink: 0;
}
.bk-header-label {
    min-width: 260px;
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    color: #fff;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    letter-spacing: 0.05em;
    margin: 0 20px;
}

/* The bracket itself: rounds side-by-side */
.bk-bracket {
    display: flex;
    align-items: stretch;
    min-height: 300px;
}

/* Each round column */
.bk-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 260px;
    flex: 1;
    gap: 0;
    padding: 1rem 0;
}

/* Each game slot (match + its connector area) */
.bk-game {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.5rem 0;
}

/* The match card itself */
.bk-match {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
    margin: 0 20px;
}
.bk-match--finals {
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(229, 114, 0, 0.1);
}
.bk-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}

/* Competitor slot row */
.bk-slot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}
.bk-slot + .bk-slot {
    border-top: 1px solid rgba(255,255,255,0.03);
}
.bk-slot--winner {
    background: rgba(229, 114, 0, 0.08);
    border-left-color: var(--accent);
}
.bk-slot--loser {
    opacity: 0.4;
}

/* Avatar */
.bk-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
    position: relative;
}
.bk-slot--winner .bk-avatar { border-color: var(--accent); }
.bk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bk-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

/* Name + brand */
.bk-info { flex: 1; min-width: 0; }
.bk-name {
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bk-slot--winner .bk-name { color: var(--accent); }
.bk-brand {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bk-crown {
    color: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Bracket Action Button */
.bracket-action {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    background: rgba(229, 114, 0, 0.03);
}
.bracket-action .btn {
    width: 100%;
    font-size: 0.75rem;
}

/* ── Connector Lines (HTML div-based wires between rounds) ── */
.bracket-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    flex-shrink: 0;
}
.bracket-line-pair {
    flex: 1;
    position: relative;
}
/* Vertical bar connecting the two feeder matches */
.bracket-line-pair::before {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 0;
    width: 2px;
    background: var(--accent);
    opacity: 0.4;
}
/* Horizontal stub from vertical bar toward next round */
.bracket-line-pair::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    opacity: 0.4;
}

/* ── Tournament Winner Banner ────────────────────────── */
.tournament-winner-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(229, 114, 0, 0.12) 0%, rgba(10, 10, 10, 0.95) 60%);
    border: 1px solid rgba(229, 114, 0, 0.25);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.tournament-winner-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
}
.tournament-winner-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 30px rgba(229, 114, 0, 0.2);
}
.tournament-winner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tournament-winner-crown {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border-radius: 50%;
    padding: 2px;
}
.tournament-winner-info { flex: 1; }

/* ── Result Modal ────────────────────────────────────── */
.result-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.result-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 90%;
    max-width: 440px;
    overflow: hidden;
}
.result-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0.75rem;
}
.result-modal-header h3 {
    font-size: 1.1rem;
    color: var(--accent);
}
.result-modal-body {
    padding: 0 1.25rem 1rem;
}
.result-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

.result-option {
    display: block;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.result-option input[type="radio"] { display: none; }
.result-option-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.result-option input[type="radio"]:checked + .result-option-content {
    border-color: var(--accent);
    background: rgba(229, 114, 0, 0.1);
    color: var(--accent);
    box-shadow: 0 0 12px rgba(229, 114, 0, 0.1);
}
.result-option:hover .result-option-content {
    border-color: rgba(229, 114, 0, 0.4);
}

/* ── Watch / YouTube Pages ────────────────────────────── */
.watch-live-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 1rem; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    font-family: var(--font-condensed); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.1em; color: var(--text-muted);
}
.watch-live-badge--on {
    background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}
.watch-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #EF4444;
    animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

.watch-player { margin-bottom: 1rem; }
.watch-player-embed {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #000; border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--border);
}
.watch-player-embed iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.watch-player-info { padding: 1rem 0; }
.watch-player-title {
    font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}
.watch-player-meta {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; margin-bottom: 0.5rem;
}
.watch-player-desc {
    font-size: 0.8rem; line-height: 1.5; max-width: 700px;
}

/* Legacy watch grid (used on watch-live.php) */
.watch-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}
.watch-grid--gallery {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.watch-card {
    display: block; text-decoration: none; color: inherit;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border);
    transition: all 0.2s;
}
.watch-card:hover {
    border-color: var(--accent); transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(229, 114, 0, 0.1);
}
.watch-card-thumb {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #111; overflow: hidden;
}
.watch-card-thumb img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.3s;
}
.watch-card:hover .watch-card-thumb img { transform: scale(1.05); }
.watch-card-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,0.7); border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: 0; transition: opacity 0.2s;
}
.watch-card:hover .watch-card-play { opacity: 1; }
.watch-card-info { padding: 0.75rem; }
.watch-card-title {
    font-size: 0.85rem; font-weight: 600; line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.watch-card-meta {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.watch-card-date { font-size: 0.7rem; }
.watch-card-desc {
    font-size: 0.7rem; line-height: 1.4; margin-top: 0.35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Enhanced Video Gallery (vg-*) ───────────────────── */

/* Hero Featured Video */
.vg-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(229,114,0,0.06) 0%, rgba(0,0,0,0) 60%);
    border: 1px solid rgba(229,114,0,0.15);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.vg-hero-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
}
.vg-hero-thumb {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s;
}
.vg-hero-player:hover .vg-hero-thumb {
    transform: scale(1.03);
    filter: brightness(0.7);
}
.vg-hero-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    cursor: pointer; z-index: 2;
    transition: transform 0.2s;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.vg-hero-player:hover .vg-hero-play-btn { transform: translate(-50%,-50%) scale(1.1); }
.vg-hero-iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.vg-hero-info {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.5rem 0;
}
.vg-hero-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-condensed); font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.75rem;
}
.vg-hero-title {
    font-size: 1.5rem; font-weight: 700; line-height: 1.25;
    letter-spacing: 0.02em; margin-bottom: 0.75rem;
}
.vg-hero-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 1rem;
}
.vg-meta-sep { color: var(--text-muted); opacity: 0.5; }
.vg-hero-desc {
    font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary);
    margin-bottom: 1.5rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vg-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vg-hero-watch-btn {
    padding: 0.65rem 1.5rem !important; font-size: 0.85rem !important;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.vg-btn-outline {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    padding: 0.55rem 1.25rem !important; font-size: 0.8rem !important;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
}
.vg-btn-outline:hover {
    border-color: var(--accent) !important; color: var(--text-primary) !important;
    background: rgba(229,114,0,0.05) !important;
}

/* Toolbar */
.vg-toolbar {
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
}
.vg-toolbar-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.vg-toolbar-left {
    display: flex; align-items: baseline; gap: 0.75rem;
}
.vg-section-title {
    font-size: 1.25rem; font-weight: 700; letter-spacing: 0.03em;
    display: flex; align-items: center; gap: 0.5rem;
}
.vg-video-count {
    font-family: var(--font-condensed); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 0.25rem 0.65rem; border-radius: var(--radius-xs);
}
.vg-toolbar-right {
    display: flex; align-items: center; gap: 0.5rem;
}

/* Search */
.vg-search {
    position: relative; display: flex; align-items: center;
}
.vg-search-icon {
    position: absolute; left: 0.75rem;
    color: var(--text-muted); pointer-events: none;
}
.vg-search-input {
    width: 220px;
    padding: 0.5rem 2rem 0.5rem 2.25rem;
    font-size: 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    transition: all 0.2s;
}
.vg-search-input::placeholder { color: var(--text-muted); }
.vg-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(229,114,0,0.1);
    width: 280px;
}
.vg-search-clear {
    position: absolute; right: 0.5rem;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 0.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
}
.vg-search-clear:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }

/* Sort Dropdown */
.vg-sort-dropdown { position: relative; }
.vg-sort-btn {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem; font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.vg-sort-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.vg-sort-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 170px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    z-index: 100;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s;
}
.vg-sort-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.vg-sort-option {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; padding: 0.6rem 0.85rem;
    font-size: 0.78rem; font-weight: 500;
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; text-align: left;
    transition: all 0.1s;
}
.vg-sort-option:hover { background: rgba(229,114,0,0.08); color: var(--text-primary); }
.vg-sort-option.active { color: var(--accent); }

/* View Toggle */
.vg-view-toggle {
    display: flex; border: 1px solid var(--border);
    border-radius: var(--radius-xs); overflow: hidden;
}
.vg-view-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-elevated); border: none;
    color: var(--text-muted); cursor: pointer;
    transition: all 0.15s;
}
.vg-view-btn:hover { color: var(--text-primary); }
.vg-view-btn.active {
    background: var(--accent); color: #000;
}
.vg-view-btn + .vg-view-btn { border-left: 1px solid var(--border); }

/* Playlist Tabs */
.vg-playlist-tabs {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.vg-playlist-tabs::-webkit-scrollbar { display: none; }
.vg-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 1rem;
    font-family: var(--font-condensed); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none;
    color: var(--text-muted);
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    border-radius: 100px;
    white-space: nowrap;
    transition: all 0.2s;
}
.vg-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
    border-color: var(--border);
}
.vg-tab.active {
    color: #000; background: var(--accent);
    border-color: var(--accent);
}
.vg-tab-count {
    font-size: 0.6rem; font-weight: 600;
    opacity: 0.6;
}
.vg-tab.active .vg-tab-count { opacity: 0.8; }

/* Video Grid */
.vg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}
.vg-grid--list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Video Card */
.vg-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s, box-shadow 0.2s;
}
.vg-card--visible {
    opacity: 1; transform: translateY(0);
}
.vg-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 30px rgba(229,114,0,0.12), 0 0 0 1px rgba(229,114,0,0.08);
    transform: translateY(-3px);
}
.vg-card--visible:hover {
    transform: translateY(-3px);
}

/* Card Thumbnail */
.vg-card-thumb {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #0a0a0a; overflow: hidden;
    flex-shrink: 0;
}
.vg-card-thumb img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.vg-card:hover .vg-card-thumb img {
    transform: scale(1.06);
}

/* Card Hover Overlay */
.vg-card-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s;
}
.vg-card:hover .vg-card-overlay {
    background: rgba(0,0,0,0.35);
}
.vg-card-play-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(229,114,0,0.9);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    opacity: 0; transform: scale(0.7);
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(229,114,0,0.3);
}
.vg-card:hover .vg-card-play-icon {
    opacity: 1; transform: scale(1);
}

/* Duration Badge */
.vg-duration-badge {
    position: absolute; bottom: 8px; right: 8px;
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem; font-weight: 700;
    font-family: var(--font-condensed); letter-spacing: 0.03em;
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 3px;
    z-index: 2;
    backdrop-filter: blur(4px);
}
.vg-duration-badge--hero {
    bottom: 12px; right: 12px;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
}

/* Card Body */
.vg-card-body {
    padding: 0.85rem; flex: 1;
    display: flex; flex-direction: column;
}
.vg-card-title {
    font-size: 0.88rem; font-weight: 600; line-height: 1.35;
    margin-bottom: 0.5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.vg-card:hover .vg-card-title { color: var(--accent); }
.vg-card-meta {
    display: flex; flex-direction: column; gap: 0.2rem;
    margin-top: auto;
}
.vg-card-channel {
    font-size: 0.72rem; font-weight: 600; color: var(--accent);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vg-card-stats {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.68rem; color: var(--text-muted);
}
.vg-card-views { white-space: nowrap; }
.vg-card-date { white-space: nowrap; }
.vg-card-desc {
    font-size: 0.72rem; line-height: 1.45; color: var(--text-secondary);
    margin-top: 0.5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* List View Card */
.vg-card--list {
    flex-direction: row;
    max-height: 160px;
}
.vg-card--list .vg-card-thumb {
    width: 280px; min-width: 280px;
    padding-bottom: 0; height: 158px;
}
.vg-card--list .vg-card-body {
    padding: 1rem 1.25rem;
}
.vg-card--list .vg-card-title {
    font-size: 0.95rem; -webkit-line-clamp: 2;
    margin-bottom: 0.35rem;
}
.vg-card--list .vg-card-meta {
    flex-direction: row; align-items: center; gap: 0.6rem;
    margin-top: 0;
}
.vg-card--list .vg-card-stats { margin-top: 0; }

/* Load More */
.vg-load-more-wrapper {
    flex-direction: column;
    align-items: center; gap: 0.75rem;
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.vg-load-more-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 2rem;
    font-size: 0.82rem; font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.vg-load-more-btn:hover {
    border-color: var(--accent); color: var(--accent);
    box-shadow: 0 4px 15px rgba(229,114,0,0.1);
    transform: translateY(-1px);
}
.vg-load-more-progress {
    font-size: 0.7rem; color: var(--text-muted);
    font-family: var(--font-condensed); letter-spacing: 0.05em;
}

/* Empty State */
.vg-empty {
    flex-direction: column; align-items: center;
    padding: 4rem 2rem; text-align: center;
}
.vg-empty h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }

/* ── Lightbox Modal ────────────────────────────────────── */
.vg-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all 0.25s ease;
}
.vg-lightbox.open { opacity: 1; visibility: visible; }
.vg-lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
}
.vg-lightbox-container {
    position: relative; z-index: 1;
    width: 92vw; max-width: 1100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}
.vg-lightbox.open .vg-lightbox-container {
    transform: scale(1) translateY(0);
}
.vg-lightbox-close {
    position: absolute; top: -44px; right: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1); border: none;
    border-radius: 50%;
    color: #fff; cursor: pointer;
    transition: all 0.15s;
    z-index: 10;
}
.vg-lightbox-close:hover { background: rgba(229,114,0,0.8); transform: scale(1.1); }
.vg-lightbox-embed {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #000;
}
.vg-lightbox-embed iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.vg-lightbox-info {
    padding: 1.25rem 1.5rem;
}
.vg-lightbox-title {
    font-size: 1.15rem; font-weight: 700;
    margin-bottom: 0.5rem; line-height: 1.3;
}
.vg-lightbox-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.vg-lightbox-desc {
    font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary);
    margin-bottom: 1rem; max-width: 700px;
}
.vg-lightbox-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.vg-lightbox-yt-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem;
}

/* ── Watch Live Theater Layout ─────────────────────────── */
.wl-theater {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
}
.wl-main { min-width: 0; }
.wl-info {
    padding: 1rem 0;
}
.wl-title {
    font-size: 1.3rem; font-weight: 700; line-height: 1.3;
    margin-bottom: 0.65rem; letter-spacing: 0.01em;
}
.wl-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    font-size: 0.8rem; margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.wl-meta-left {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.wl-meta-actions { display: flex; gap: 0.5rem; }
.wl-description {
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    position: relative;
}
.wl-desc-text {
    font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary);
    position: relative;
}
.wl-desc-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(transparent, rgba(20,20,20,0.95));
    pointer-events: none;
}
.wl-desc-toggle {
    background: none; border: none; color: var(--accent);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    padding: 0.35rem 0 0; display: block;
}
.wl-desc-toggle:hover { text-decoration: underline; }

/* Sidebar */
.wl-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    position: sticky; top: 80px;
}
.wl-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}
.wl-sidebar-header h3 {
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 0.4rem;
}
.wl-sidebar-list {
    overflow-y: auto; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.wl-sidebar-card {
    display: flex; gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: all 0.15s;
}
.wl-sidebar-card:hover { background: rgba(229,114,0,0.05); }
.wl-sidebar-card.active { background: rgba(229,114,0,0.08); border-left: 2px solid var(--accent); }
.wl-sidebar-thumb {
    position: relative; width: 140px; min-width: 140px; height: 78px;
    border-radius: 4px; overflow: hidden;
    background: #0a0a0a;
}
.wl-sidebar-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.wl-sidebar-info { flex: 1; min-width: 0; }
.wl-sidebar-title {
    font-size: 0.75rem; font-weight: 600; line-height: 1.3;
    margin-bottom: 0.3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.wl-sidebar-card:hover .wl-sidebar-title { color: var(--accent); }
.wl-sidebar-meta {
    font-size: 0.65rem; color: var(--text-muted);
    display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.wl-sidebar-viewall {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.75rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--accent); text-decoration: none;
    border-top: 1px solid var(--border);
    transition: all 0.15s;
}
.wl-sidebar-viewall:hover { background: rgba(229,114,0,0.05); }

/* ── Video Gallery Responsive ──────────────────────────── */
@media (max-width: 1024px) {
    .wl-theater { grid-template-columns: 1fr; }
    .wl-sidebar { max-height: none; position: static; }
    .wl-sidebar-list { max-height: 400px; }
}
@media (max-width: 900px) {
    .vg-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem; padding: 1rem;
    }
    .vg-hero-title { font-size: 1.2rem; }
    .vg-toolbar-top { flex-direction: column; align-items: flex-start; }
    .vg-toolbar-right { width: 100%; flex-wrap: wrap; }
    .vg-search-input { width: 100% !important; flex: 1; }
    .vg-search { flex: 1; }
    .vg-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .vg-card--list { flex-direction: column; max-height: none; }
    .vg-card--list .vg-card-thumb { width: 100%; min-width: 0; padding-bottom: 56.25%; height: auto; }
    .vg-lightbox-container { width: 96vw; }
}
@media (max-width: 600px) {
    .vg-grid { grid-template-columns: 1fr; gap: 1rem; }
    .vg-hero { padding: 0.75rem; margin-bottom: 1.5rem; }
    .vg-hero-title { font-size: 1.05rem; }
    .vg-hero-desc { display: none; }
    .vg-lightbox-info { padding: 1rem; }
    .vg-lightbox-title { font-size: 1rem; }
}

/* ── Responsive Tournament ───────────────────────────── */
@media (max-width: 900px) {
    .bk-bracket {
        flex-direction: column;
        align-items: stretch;
    }
    .bk-round { min-width: unset; flex-direction: column; gap: 0.75rem; }
    .bk-header { flex-direction: column; gap: 0.5rem; }
    .bk-header-label { margin: 0; min-width: unset; }
    .bracket-lines, .bk-header-spacer { display: none; }
    .bk-match { margin: 0; }
    .tournament-winner-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }
    .competitor-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile Bottom Nav ──────────────────────────────── */
.bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
        background: rgba(10, 10, 10, 0.96);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        justify-content: space-around; align-items: flex-end;
        padding: 0.4rem 0; padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
        height: auto;
    }
    body { padding-bottom: 68px; }
    .tracker-footer { margin-bottom: 0; }
}
.bottom-nav-item, .bottom-nav-action {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    text-decoration: none; color: var(--text-muted);
    font-family: var(--font-condensed); font-size: 0.55rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: none; border: none; cursor: pointer;
    padding: 0.35rem 0.75rem; transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item i, .bottom-nav-action > i { width: 20px; height: 20px; }
.bottom-nav-item.active, .bottom-nav-item:active { color: var(--accent); }
.bottom-nav-action { color: var(--accent); position: relative; }
.bottom-nav-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(229, 114, 0, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}
.bottom-nav-action-btn i, .bottom-nav-action-btn svg { width: 24px; height: 24px; color: #000 !important; }
.bottom-nav-action:active .bottom-nav-action-btn {
    transform: translateY(-10px) scale(0.94);
}
.bottom-nav-action span:last-child {
    margin-top: -6px;
}

/* Bottom nav popup */
.bottom-nav-overlay {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(0, 0, 0, 0.55);
}
.bottom-nav-overlay.show { display: block; }
.bottom-nav-popup {
    display: none; position: fixed;
    bottom: 80px; left: 1rem; right: 1rem; z-index: 1001;
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    padding: 1rem;
}
.bottom-nav-popup.show { display: block; }
.bottom-nav-popup-title {
    font-family: var(--font-condensed); font-size: 0.65rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.75rem;
}
.bottom-nav-popup-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.bottom-nav-popup-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.75rem; border-radius: var(--radius-sm);
    background: var(--bg-hover); text-decoration: none; color: var(--text-primary);
    font-size: 0.75rem; font-weight: 600;
    transition: background 0.15s;
}
.bottom-nav-popup-link:active { background: var(--bg-surface); }
.bottom-nav-popup-link i { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ── Chat Monitor ───────────────────────────────────── */
.chat-monitor-status {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
    font-family: var(--font-condensed); font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.chat-monitor-status--active {
    background: rgba(34, 197, 94, 0.15); color: #22c55e;
}
.chat-monitor-status--inactive {
    background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
}
.chat-monitor-status .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; animation: pulse-live 1.5s infinite;
}
.chat-monitor-status--inactive .status-dot { animation: none; }
.chat-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin-bottom: 1.5rem;
}
.chat-log {
    max-height: 400px; overflow-y: auto; border-radius: var(--radius-sm);
    background: var(--bg-primary); border: 1px solid var(--border);
}
.chat-log-entry {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
}
.chat-log-entry:last-child { border-bottom: none; }
.chat-log-cmd {
    font-family: var(--font-condensed); font-size: 0.65rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.15rem 0.4rem; border-radius: 3px;
    font-weight: 700; min-width: 48px; text-align: center;
}
.chat-log-cmd--cheer { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.chat-log-cmd--boo { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.chat-log-cmd--rate { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.chat-log-user { color: var(--text-muted); min-width: 100px; }
.chat-log-target { color: var(--text-primary); font-weight: 600; flex: 1; }
.chat-log-change { font-weight: 700; min-width: 40px; text-align: right; }
.chat-log-change.positive { color: #22c55e; }
.chat-log-change.negative { color: #ef4444; }

/* ============================================================
   MEMBER PORTAL — Bold Modern Design
   ============================================================ */

.portal {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Hero Header ─────────────────────────────────────── */
.portal-hero {
    position: relative;
    padding: 3rem 0 2rem;
    overflow: hidden;
}
.portal-hero-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(229,114,0,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.portal-hero-content {
    position: relative;
    z-index: 1;
}
.portal-label {
    display: inline-block;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(229,114,0,0.3);
    border-radius: 4px;
    background: rgba(229,114,0,0.06);
}
.portal-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.portal-title-accent {
    background: linear-gradient(135deg, var(--accent) 0%, #FF9F40 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.portal-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.6;
}

/* ── Stat Cards ──────────────────────────────────────── */
.portal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.portal-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.portal-stat:hover {
    border-color: rgba(229,114,0,0.25);
    box-shadow: 0 0 20px rgba(229,114,0,0.06);
}
.portal-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-stat-icon--orange {
    background: rgba(229,114,0,0.12);
    color: var(--accent);
    box-shadow: 0 0 16px rgba(229,114,0,0.1);
}
.portal-stat-icon--yellow {
    background: rgba(234,179,8,0.12);
    color: #eab308;
    box-shadow: 0 0 16px rgba(234,179,8,0.1);
}
.portal-stat-icon--green {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    box-shadow: 0 0 16px rgba(34,197,94,0.1);
}
.portal-stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
.portal-stat-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ── Action Cards Grid ───────────────────────────────── */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.portal-card {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.portal-card:hover {
    border-color: rgba(229,114,0,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 24px rgba(229,114,0,0.05);
}
.portal-card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,114,0,0.06) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0;
}
.portal-card:hover .portal-card-glow {
    opacity: 1;
}
.portal-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.portal-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-card-icon--orange {
    background: rgba(229,114,0,0.12);
    color: var(--accent);
}
.portal-card-icon--blue {
    background: rgba(59,130,246,0.12);
    color: #3b82f6;
}
.portal-card-icon--green {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
}
.portal-card-icon--purple {
    background: rgba(168,85,247,0.12);
    color: #a855f7;
}
.portal-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.portal-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.portal-card-notice {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    background: rgba(229,114,0,0.06);
    border: 1px solid rgba(229,114,0,0.15);
    border-radius: var(--radius-sm);
}

/* ── Portal Buttons ──────────────────────────────────── */
.portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
    border: none;
}
.portal-btn--primary {
    background: linear-gradient(135deg, var(--accent) 0%, #FF9F40 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(229,114,0,0.25);
}
.portal-btn--primary:hover {
    color: #fff;
    box-shadow: 0 6px 24px rgba(229,114,0,0.35);
    transform: translateY(-1px);
}
.portal-btn--ghost {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.portal-btn--ghost:hover {
    color: var(--text-primary);
    border-color: rgba(229,114,0,0.3);
    background: var(--bg-hover);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .portal-stats {
        grid-template-columns: 1fr;
    }
    .portal-grid {
        grid-template-columns: 1fr;
    }
    .portal-title {
        font-size: 1.8rem;
    }
}

/* ── Upload Widget Styles ─────────────────────────────── */
.cpw-upload-widget {
    min-height: 0;
}

/* ── Form Input Missing States ────────────────────────── */
.input-field:disabled, .select-field:disabled, .textarea-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-elevated);
}
.input-field:focus-visible, .select-field:focus-visible, .textarea-field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Accessibility: Reduced Motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Homepage Hero Slider ─────────────────────────────── */
.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}
.hero-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide {
    min-width: 100%;
    position: relative;
    aspect-ratio: 21/9;
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    overflow: hidden;
}
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 50%, transparent 100%);
}
.hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
    z-index: 1;
}
.hero-slide-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hero-slide-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    max-width: 500px;
}
.hero-slide-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 420px;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.hero-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--accent);
    color: #000;
    border-radius: var(--radius-xs);
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.2s;
    width: fit-content;
}
.hero-slide-cta:hover {
    background: var(--accent-light);
    color: #000;
    transform: translateY(-1px);
}
.hero-slider-dots {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    display: flex;
    gap: 0.4rem;
    z-index: 2;
}
.hero-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.hero-slider-dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
}
.hero-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10,10,10,0.7);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s;
    padding: 0;
}
.hero-slider-nav:hover {
    background: rgba(10,10,10,0.9);
    color: var(--accent);
    border-color: var(--accent);
}
.hero-slider-prev { left: 0.75rem; }
.hero-slider-next { right: 0.75rem; }

@media (max-width: 768px) {
    .hero-slide { aspect-ratio: 16/9; }
    .hero-slide-content { padding: 1.25rem 1.5rem; }
    .hero-slider-nav { display: none; }
    .hero-slide-title { font-size: 1.1rem; }
    .hero-slide-desc { font-size: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── News Grid (Homepage) ─────────────────────────────── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.news-grid-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.news-grid-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    color: inherit;
}
.news-grid-img {
    aspect-ratio: 16/9;
    background: var(--bg-elevated);
    overflow: hidden;
    position: relative;
}
.news-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-grid-card:hover .news-grid-img img {
    transform: scale(1.03);
}
.news-grid-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(229,114,0,0.05) 100%);
}
.news-grid-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-grid-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.news-grid-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.news-grid-excerpt {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.news-grid-footer {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

/* ── Section Headers (Modern) ─────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.section-header-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-header-title i {
    color: var(--accent);
    width: 20px;
    height: 20px;
}
.section-header-link {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.section-header-link:hover {
    color: var(--accent-light);
}

/* ── Homepage Responsive Fix ──────────────────────────── */
.homepage-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .homepage-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Stat Cards Responsive ────────────────────────────── */
.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 640px) {
    .stat-cards-row {
        grid-template-columns: 1fr;
    }
}

/* ── Preview Cards Row ────────────────────────────────── */
.preview-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .preview-cards-row {
        grid-template-columns: 1fr;
    }
}

/* ── Admin Dashboard Cards ────────────────────────────── */
.admin-card-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}
.admin-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ══════════════════════════════════════════════════════════
   PAGE BACKGROUNDS SYSTEM
   ══════════════════════════════════════════════════════════ */

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.page-bg-image {
    position: absolute;
    inset: 0;
    background: var(--bg-url) no-repeat;
    background-position: var(--bg-position, center center);
    background-size: var(--bg-size, cover);
    opacity: var(--bg-opacity, 0.15);
    filter: blur(var(--bg-blur, 0px));
}
.page-bg-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-color, #000);
    opacity: var(--overlay-opacity, 0.85);
}
/* Section-specific backgrounds */
.page-bg-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 500px;
    pointer-events: none;
    overflow: hidden;
}
.page-bg-header .page-bg-image,
.page-bg-header .page-bg-overlay {
    position: absolute; inset: 0;
}
.page-bg-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--bg-primary), transparent);
}
.page-bg-content {
    position: fixed;
    top: 400px; left: 0; right: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
@supports (-webkit-touch-callout: none) {
    .page-bg { position: absolute; min-height: 100vh; }
    .page-bg-image { background-attachment: scroll !important; }
}

/* ── Phoenix Ember Particles ──────────────────────────── */
.ember-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ember {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: ember-rise var(--ember-dur, 12s) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
@keyframes ember-rise {
    0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
    8%   { opacity: 0.6; }
    30%  { opacity: 0.5; transform: translateY(-25vh) translateX(calc(var(--ember-drift, 20px) * 0.4)) scale(0.9); }
    60%  { opacity: 0.35; transform: translateY(-55vh) translateX(calc(var(--ember-drift, 20px) * 1.1)) scale(0.7); }
    85%  { opacity: 0.12; }
    100% { opacity: 0; transform: translateY(-105vh) translateX(calc(var(--ember-drift, 20px) * 1.6)) scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
    .ember-container { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ENHANCED FOOTER
   ══════════════════════════════════════════════════════════ */

.footer-stats-bar {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.footer-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text-muted);
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}
.footer-stat-item:hover {
    color: var(--text-primary);
}
.footer-stat-icon {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    opacity: 0.6;
}
.footer-stat-icon i { width: 14px; height: 14px; }
.footer-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.footer-stat-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

.tracker-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0 0;
    margin-top: 3rem;
}
.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    flex-wrap: wrap;
}
.footer-links a {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--text-primary); }
.footer-links .footer-sep { color: var(--border); }
.tracker-footer-text {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════
   NEWS PAGE — FEATURED LAYOUT
   ══════════════════════════════════════════════════════════ */

.news-featured-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.news-featured-main {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.news-featured-main:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    color: inherit;
}
.news-featured-main .nf-img {
    position: relative;
    height: 320px;
    overflow: hidden;
}
.news-featured-main .nf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-featured-main:hover .nf-img img {
    transform: scale(1.03);
}
.news-featured-main .nf-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-featured-main .nf-category {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
}
.news-featured-main .nf-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.news-featured-main .nf-excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-featured-main .nf-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.news-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.news-card-sm {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.news-card-sm:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    color: inherit;
}
.news-card-sm .nc-img {
    position: relative;
    height: 140px;
    overflow: hidden;
}
.news-card-sm .nc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-card-sm:hover .nc-img img {
    transform: scale(1.03);
}
.news-card-sm .nc-category {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
}
.news-card-sm .nc-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card-sm .nc-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-sm .nc-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: auto;
}
.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-top: 0.75rem;
    transition: color 0.2s;
}
.news-read-more:hover { color: var(--accent-light); }

@media (max-width: 1024px) {
    .news-featured-layout { grid-template-columns: 1fr; }
    .news-featured-main { grid-row: auto; }
    .news-featured-main .nf-img { height: 220px; }
}
@media (max-width: 640px) {
    .news-featured-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   ROSTER PAGE — SUPERSTAR CARD V2
   ══════════════════════════════════════════════════════════ */

.superstar-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 340px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.superstar-card-v2:hover {
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(229, 114, 0, 0.12);
    color: inherit;
}
.sc-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: top center;
    transition: transform 0.4s;
}
.superstar-card-v2:hover .sc-bg {
    transform: scale(1.05);
}
.sc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 20%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0.92) 100%
    );
}
.sc-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.35rem;
    z-index: 2;
}
.sc-info {
    position: relative;
    z-index: 2;
    padding: 1rem;
}
.sc-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sc-record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.sc-record {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.sc-momentum-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(229,114,0,0.3);
}
.sc-momentum-bar {
    margin-top: 0.35rem;
}
.sc-titles {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
/* Placeholder when no image */
.sc-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-elevated));
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: rgba(229,114,0,0.08);
}

/* Alpha section dividers */
.roster-alpha-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    grid-column: 1 / -1;
}
.roster-alpha-letter {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--accent);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-xs);
}
.roster-alpha-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

@media (max-width: 1024px) {
    .superstar-card-v2 { height: 300px; }
}
@media (max-width: 640px) {
    .superstar-card-v2 { height: 280px; }
    .sc-momentum-num { font-size: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — COMMANDER LINEUP
   ══════════════════════════════════════════════════════════ */

.commander-lineup {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.commander-lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.commander-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.commander-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    color: inherit;
}
.commander-card-img {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.commander-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.commander-card-img .cc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}
.commander-card-type {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background: var(--accent-glow);
    color: var(--accent);
}
.commander-card-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.commander-card-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.commander-card-body {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    gap: 0.75rem;
}
.commander-card-date {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.commander-card-btn {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
@media (max-width: 1024px) {
    .commander-lineup-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .commander-lineup-grid { grid-template-columns: 1fr; }
    .commander-card-img { height: 140px; }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — NEXT SHOW / LATEST RESULTS WIDGETS
   ══════════════════════════════════════════════════════════ */

.next-show-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.next-show-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.next-show-title {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.next-show-title i { width: 14px; height: 14px; color: var(--accent); }
.next-show-show-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
}
.next-show-body {
    padding: 1.25rem;
}
.next-show-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    border: 1px dashed var(--border-light);
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.next-show-match {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.next-show-match:last-child { border-bottom: none; }
.next-show-match-names {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    flex: 1;
}
.next-show-match-vs {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--accent);
    padding: 0 0.25rem;
}
.next-show-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.next-show-date {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.next-show-date i { width: 12px; height: 12px; }

.latest-results-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.latest-results-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.latest-results-header i { width: 14px; height: 14px; color: var(--accent); }
.result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--bg-hover); }
.result-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}
.result-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.result-item-info {
    flex: 1;
    min-width: 0;
}
.result-item-names {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.result-item-outcome {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
}
.result-win { background: rgba(34,197,94,0.15); color: #22C55E; }
.result-loss { background: rgba(239,68,68,0.15); color: #EF4444; }

/* ══════════════════════════════════════════════════════════
   FILTER TAB POLISH
   ══════════════════════════════════════════════════════════ */

.filter-tab {
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid transparent;
}
.filter-tab-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.filter-tab-inactive {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-color: var(--border);
}
.filter-tab-inactive:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.brand-tab {
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.brand-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.brand-tab:hover:not(.active) {
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Show logo inline images */
.show-logo-inline {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    flex-shrink: 0;
}

.gender-tab {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
}
.gender-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.gender-tab:hover:not(.active) {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.roster-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.roster-count {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    display: inline-block;
}
.roster-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ── Large & Ultrawide Screen Scaling ────────────────── */
@media (min-width: 1600px) {
    html { font-size: 17px; }
}
@media (min-width: 2000px) {
    html { font-size: 18px; }
}
@media (min-width: 2560px) {
    html { font-size: 19px; }
    .main-content { max-width: 1600px; }
}
@media (min-width: 3440px) {
    html { font-size: 20px; }
    .main-content { max-width: 1800px; }
}

/* ── Settings Sections ───────────────────────────────── */
.settings-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}
.settings-section > summary {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::before {
    content: '\25B6';
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.settings-section[open] > summary::before {
    transform: rotate(90deg);
}
.settings-section[open] > summary {
    border-bottom: 1px solid var(--border);
}
.settings-section-body {
    padding: 1.25rem;
}
.settings-section-body h4 {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.settings-section-body h4:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.settings-logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) {
    .settings-logo-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Predictions ─────────────────────────────────────── */
.prediction-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.prediction-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.prediction-match-type {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: rgba(229, 114, 0, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
}
.prediction-options {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    flex-wrap: wrap;
}
.prediction-pick {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
}
.prediction-pick input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.prediction-pick:hover {
    border-color: var(--accent);
    background: rgba(229, 114, 0, 0.04);
}
.prediction-pick-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.prediction-pick-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}
.prediction-pick-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.prediction-selected {
    border-color: var(--accent);
    background: rgba(229, 114, 0, 0.08);
    box-shadow: 0 0 0 1px var(--accent);
}
.prediction-selected .prediction-pick-img {
    border-color: var(--accent);
}
.prediction-correct {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 1px #22c55e;
}
.prediction-wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    opacity: 0.7;
}
.prediction-actual-winner {
    border-color: #22c55e;
    border-style: dashed;
}
.prediction-locked {
    opacity: 0.85;
}
.prediction-locked .prediction-pick {
    cursor: default;
}

/* Leaderboard Table */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.leaderboard-table th {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.leaderboard-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.leaderboard-table tbody tr:hover {
    background: var(--bg-hover);
}
.leaderboard-table .leaderboard-me {
    background: rgba(229, 114, 0, 0.06);
}
.leaderboard-table .leaderboard-top td {
    font-weight: 600;
}

/* ── Bounties ────────────────────────────────────────── */
.bounty-type-badge {
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
}
.bounty-type-open {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.bounty-type-direct {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}
.bounty-status-badge {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
}
.bounty-status-open {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.bounty-status-accepted {
    color: var(--accent);
    background: rgba(229, 114, 0, 0.1);
}
.bounty-status-scheduled {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
.bounty-status-completed {
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.bounty-status-declined {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.bounty-status-expired {
    color: var(--text-muted);
    background: var(--bg-elevated);
    opacity: 0.7;
}

/* Bounty Card */
.bounty-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.bounty-card:hover {
    border-color: var(--accent);
}
.bounty-card-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.bounty-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Bounty Detail */
.bounty-detail-sides {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.bounty-detail-side {
    flex: 1;
    min-width: 0;
}
.bounty-detail-vs {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    align-self: center;
    flex-shrink: 0;
}
.bounty-detail-character {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.bounty-detail-character:hover {
    border-color: var(--accent);
}
.bounty-detail-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

/* Filter Tabs */
.filter-tab {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.15s;
}
.filter-tab-active {
    background: var(--accent);
    color: #000;
}
.filter-tab-inactive {
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.filter-tab-inactive:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Bounty Board Grid */
.bounty-board-section {
    margin-bottom: 2rem;
}
.bounty-board-section-title {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
    .prediction-options {
        flex-direction: column;
    }
    .prediction-pick {
        flex-direction: row;
        min-width: 0;
        padding: 0.75rem;
    }
    .prediction-pick-img {
        width: 36px;
        height: 36px;
    }
    .bounty-detail-sides {
        flex-direction: column;
        gap: 0.75rem;
    }
    .bounty-detail-vs {
        align-self: center;
        font-size: 1rem;
    }
}

/* ── Trading Card Component ──────────────────────────── */
.cpw-trading-card {
    --card-color: #9CA3AF;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cpw-trading-card-inner {
    position: relative;
    border-radius: 12px;
    border: 3px solid var(--card-color);
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    overflow: hidden;
    aspect-ratio: 5 / 7;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 12px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cpw-trading-card:hover .cpw-trading-card-inner {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 16px color-mix(in srgb, var(--card-color) 30%, transparent);
}
.cpw-trading-card-rarity {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}
.cpw-trading-card-image {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.cpw-trading-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpw-trading-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a, #111);
}
.cpw-trading-card-footer {
    padding: 8px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.cpw-trading-card-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.2;
}
.cpw-trading-card-desc {
    font-size: 0.65rem;
    color: #999;
    margin-top: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cpw-trading-card-flavor {
    font-size: 0.6rem;
    color: #777;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cpw-trading-card-badge-inactive {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(239,68,68,0.2);
    color: #EF4444;
    font-weight: 700;
    z-index: 2;
}
.cpw-trading-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}