/* EC Casual Identity - Authentic Sapphire & Ruby Crystal esports styling */
@font-face { font-family: Rajdhani; src: url('/fonts/rajdhani-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
    /* Ruby Red Metallic / Gemstone (Swiss Series) */
    --ecc-ruby: #dc2626;
    --ecc-ruby-bright: #f87171;
    --ecc-ruby-dark: #991b1b;
    --ecc-ruby-metal: linear-gradient(135deg, #ffffff 0%, #fca5a5 25%, #ef4444 60%, #991b1b 100%);
    
    /* Sapphire / Ice Blue Crystal (Chaos Cups - Hellblau) */
    --ecc-sapphire: #38bdf8;
    --ecc-sapphire-bright: #7dd3fc;
    --ecc-sapphire-dark: #0284c7;
    --ecc-sapphire-metal: linear-gradient(135deg, #ffffff 0%, #bae6fd 25%, #38bdf8 60%, #0284c7 100%);
    
    /* Polished Chrome / Platinum Steel */
    --ecc-silver-metal: linear-gradient(135deg, #ffffff 0%, #e2e8f0 30%, #94a3b8 70%, #475569 100%);
    
    /* Dual-Tone Crystal Fusion (EC Casual Brand) - Left Red, Right Hellblau */
    --ecc-dual-metal: linear-gradient(135deg, #f87171 0%, #e2e8f0 50%, #7dd3fc 100%);
    --ecc-dual-border: linear-gradient(90deg, #dc2626 0%, #cbd5e1 50%, #38bdf8 100%);
    
    /* Dark Obsidian Surfaces */
    --ecc-surface: #0a0c13;
    --ecc-surface-card: linear-gradient(180deg, #10121a 0%, #08090e 100%);
    --ecc-border: rgba(255, 255, 255, 0.08);
}


/* ─────────────────────────────────────────────────────────────
   AMBIENT TWO-COLOR BACKGROUND GLOW (LEFT RED, RIGHT HELLBLAU)
   ───────────────────────────────────────────────────────────── */
body.ecc-home,
body.ecc-about,
body.ecc-page,
body.ecc-tournament {
    background-color: #030306 !important;
    background-image: 
        radial-gradient(ellipse 65% 55% at 0% 15%, rgba(220, 38, 38, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 65% 55% at 100% 15%, rgba(56, 189, 248, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 0% 80%, rgba(185, 28, 28, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 100% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
/* ─────────────────────────────────────────────────────────────
   SCOPED STATS & PLAYER PAGES (.ecc-page)
   ───────────────────────────────────────────────────────────── */
.ecc-page {
    --primary: #ef4444;
    --accent: #60a5fa;
}

/* Player names remain crisp, readable and pristine */
.ecc-page .profile-name {
    color: #ffffff;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Center headings and typography across scoped ECC pages */
.ecc-page .page-header {
    text-align: center;
}
.ecc-page .page-eyebrow {
    justify-content: center;
}
.ecc-page .page-title {
    color: #ffffff;
    text-align: center;
}
.ecc-page .page-sub {
    text-align: center;
    margin: 0 auto;
}
.ecc-page .section-label {
    text-align: center;
}
.ecc-page .filter-pills,
.ecc-filter-pills {
    justify-content: center;
}

/* Title gradients */
.ecc-title-blue {
    background: var(--ecc-sapphire-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ecc-title-red {
    background: var(--ecc-ruby-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Section divider with subtle dual-tone crystal accent */
.ecc-page .section-label span {
    position: relative;
}
.ecc-page .section-label span::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ecc-dual-border);
    border-radius: 1px;
}

/* Filter pills on player and stats pages */
.filter-pill.ecc-pill {
    position: relative;
    border-color: rgba(226, 232, 240, 0.2);
}
.filter-pill.ecc-pill .material-symbols-outlined {
    color: #38bdf8;
    transition: color 0.2s, transform 0.2s;
}
.filter-pill.ecc-pill:hover {
    border-color: rgba(226, 232, 240, 0.45);
    color: #ffffff;
}
.filter-pill.ecc-pill:hover .material-symbols-outlined {
    color: #7dd3fc;
    transform: scale(1.1);
}
.filter-pill.ecc-pill.active,
.ecc-page .filter-pill.active {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18) 0%, rgba(56, 189, 248, 0.18) 100%) !important;
    border-color: rgba(226, 232, 240, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.2), 0 0 16px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.filter-pill.ecc-pill.active .material-symbols-outlined,
.ecc-page .filter-pill.active .material-symbols-outlined {
    color: #bae6fd !important;
}

/* Stat boxes in ecc-page */
.ecc-page .stat-box {
    background: linear-gradient(180deg, #0e1017 0%, #08090d 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s, transform 0.2s;
}
.ecc-page .stat-box:hover {
    border-color: rgba(226, 232, 240, 0.25);
    transform: translateY(-1px);
}
.ecc-page .stat-box-val.gold {
    background: var(--ecc-silver-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Collab badges across player profile & stats - Left Red, Right Blue */
.collab-badge.ecc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.14) 0%, rgba(56, 189, 248, 0.14) 100%);
    border: 1px solid rgba(226, 232, 240, 0.25);
    color: #f1f5f9;
}
.collab-badge.ecc.ecss {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}
.collab-badge.ecc.eccc {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #bae6fd;
}
.collab-badge.ecc::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f87171;
}
.collab-badge.ecc.ecss::before {
    background: #f87171;
}
.collab-badge.ecc.eccc::before {
    background: #38bdf8;
}

/* ─────────────────────────────────────────────────────────────
   SERIES ROW ACCENTS (ECSS = Ruby Red, ECCC = Sapphire Blue)
   Replaces tags with clean vertical color bars on the left
   ───────────────────────────────────────────────────────────── */
.t-table th:first-child,
.t-table td:first-child,
.champs-table th:first-child,
.champs-table td:first-child {
    border-left: 4px solid transparent;
    transition: border-color 0.15s, background-color 0.15s;
}

.t-table tr.row-ecss td:first-child,
.champs-table tr.row-ecss td:first-child {
    border-left: 4px solid var(--ecc-ruby-bright, #f87171);
    box-shadow: inset 2px 0 8px rgba(220, 38, 38, 0.2);
}
.t-table tr.row-ecss:hover td,
.champs-table tr.row-ecss:hover td {
    background: rgba(220, 38, 38, 0.04);
}

.t-table tr.row-eccc td:first-child,
.champs-table tr.row-eccc td:first-child {
    border-left: 4px solid var(--ecc-sapphire, #38bdf8);
    box-shadow: inset 2px 0 8px rgba(56, 189, 248, 0.2);
}
.t-table tr.row-eccc:hover td,
.champs-table tr.row-eccc:hover td {
    background: rgba(56, 189, 248, 0.04);
}

.t-table tr.row-ecc td:first-child,
.champs-table tr.row-ecc td:first-child {
    border-left: 4px solid #cbd5e1;
}

.match-row {
    border-left: 4px solid var(--border);
    transition: all 0.18s;
}
.match-row.row-ecss {
    border-left: 4px solid var(--ecc-ruby-bright, #f87171);
    box-shadow: inset 2px 0 8px rgba(220, 38, 38, 0.15);
}
.match-row.row-ecss:hover {
    border-left-color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
.match-row.row-eccc {
    border-left: 4px solid var(--ecc-sapphire, #38bdf8);
    box-shadow: inset 2px 0 8px rgba(56, 189, 248, 0.15);
}
.match-row.row-eccc:hover {
    border-left-color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.4);
}
.match-row.row-ecc {
    border-left: 4px solid #cbd5e1;
}

/* ID badge on player profile header */
.id-badge.ecc {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(56, 189, 248, 0.15) 100%);
    border: 1px solid rgba(226, 232, 240, 0.25);
    color: #f1f5f9;
}

/* ECC Reward Points Status Card (.ecc-info) - Centered & Left Red, Right Blue */
.ecc-info {
    position: relative;
    padding: 22px 28px;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(26, 11, 15, 0.95) 0%, rgba(9, 10, 15, 0.98) 55%, rgba(14, 18, 30, 0.95) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
    text-align: center;
}
.ecc-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ecc-dual-border);
}
.ecc-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(56, 189, 248, 0.2) 100%);
    border: 1px solid rgba(226, 232, 240, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bae6fd;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.2), 0 0 16px rgba(56, 189, 248, 0.2);
}
.ecc-info-body {
    flex: 1;
}
.ecc-info-body h2 {
    font-family: Rajdhani, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 4px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ecc-info-body p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}
.ecc-pill {
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 100px;
    background: rgba(226, 232, 240, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.2);
    color: #cbd5e1;
    text-transform: uppercase;
}

/* Leaderboard tabs when active on ecc-page */
.ecc-page .lb-tab.active {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(56, 189, 248, 0.2) 100%);
    border-color: rgba(226, 232, 240, 0.4);
    color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL NAVIGATION BUTTON
   ───────────────────────────────────────────────────────────── */
.gh-topnav a.ecc-nav-button {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.22);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(56, 189, 248, 0.08) 100%);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gh-topnav a.ecc-nav-button:hover {
    border-color: rgba(226, 232, 240, 0.5);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.2), 0 0 14px rgba(239, 68, 68, 0.2);
}
.gh-topnav a.ecc-nav-button span {
    position: relative;
    z-index: 1;
    color: #f1f5f9;
}
.gh-topnav a.ecc-nav-button.ecss {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(183, 8, 21, 0.1);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.2);
}
.ecc-nav-button.ecss span {
    background: var(--ecc-ruby-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.gh-topnav a.ecc-nav-button.eccc {
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(37, 99, 235, 0.1);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}
.ecc-nav-button.eccc span {
    background: var(--ecc-sapphire-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   EC CASUAL HOMEPAGE (.ecc-home)
   ───────────────────────────────────────────────────────────── */
.ecc-home .hero {
    position: relative;
    border-bottom: 1px solid #202433;
}
.ecc-home .hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #991b1b 20%, #ef4444 45%, #38bdf8 55%, #0284c7 80%, transparent);
}
.ecc-home-eyebrow {
    margin: -4px 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #94a3b8;
}
.ecc-crystal-type {
    display: inline-block;
    background: var(--ecc-sapphire-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ecc-red-type {
    display: inline-block;
    background: var(--ecc-ruby-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ecc-home .hero-actions a[href="/ec-casual/about"] {
    border-color: #82222d;
    background: linear-gradient(180deg, #2c1017, #14090e);
    color: #fca5a5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.ecc-home .hero-actions a[href="/ec-casual/about"]:hover {
    border-color: #f87171;
    color: #ffffff;
}

/* Homepage series filter buttons */
.ecc-home .filter-bar {
    padding-top: 24px;
}
.ecc-home .filter-pill.active {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(56, 189, 248, 0.2) 100%);
    border-color: rgba(226, 232, 240, 0.4);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.25);
}
.ecc-home .filter-pill[onclick*="ecss"] {
    border-color: rgba(239, 68, 68, 0.3);
}
.ecc-home .filter-pill[onclick*="ecss"]:hover {
    border-color: #f87171;
    color: #fca5a5;
}
.ecc-home .filter-pill[onclick*="ecss"].active {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #dc2626 100%) !important;
    border-color: #fca5a5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.4) !important;
}
.ecc-home .filter-pill[onclick*="eccc"] {
    border-color: rgba(56, 189, 248, 0.35);
}
.ecc-home .filter-pill[onclick*="eccc"]:hover {
    border-color: #38bdf8;
    color: #bae6fd;
}
.ecc-home .filter-pill[onclick*="eccc"].active {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%) !important;
    border-color: #bae6fd !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

/* Filter dot indicator */
.ecc-filter-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.ecc-filter-dot.red { background: #f87171; }
.ecc-filter-dot.blue { background: #38bdf8; }

/* Banners on Casual homepage */
.ecc-banner-series {
    margin: 5px 0 8px;
    font: 700 10px/1.3 Inter, system-ui, sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.ecc-home .t-banner[data-casual-series="ecss"] {
    border-left: 3px solid #dc2626;
    border-right: none;
}
.ecc-home [data-casual-series="ecss"] .banner-title {
    background: var(--ecc-ruby-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ecc-home [data-casual-series="ecss"] .ecc-banner-series {
    color: #f87171;
}

.ecc-home .t-banner[data-casual-series="eccc"] {
    border-left: none;
    border-right: 3px solid var(--ecc-sapphire);
}
.ecc-home [data-casual-series="eccc"] .banner-title {
    background: var(--ecc-sapphire-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ecc-home [data-casual-series="eccc"] .ecc-banner-series {
    color: #bae6fd;
}

/* Typography across EC Casual tournament banners: ECSS linksbündig, ECCC rechtsbündig */
.ecc-home .t-banner[data-casual-series="ecss"] .banner-text,
.ecc-home [data-casual-series="ecss"] .banner-title,
.ecc-home [data-casual-series="ecss"] .ecc-banner-series {
    text-align: left;
}
.ecc-home [data-casual-series="ecss"] .banner-badges,
.ecc-home [data-casual-series="ecss"] .banner-meta-line {
    justify-content: flex-start;
}
.ecc-home .t-banner[data-casual-series="ecss"] .banner-left {
    justify-content: flex-start;
}

.ecc-home .t-banner[data-casual-series="eccc"] .banner-text,
.ecc-home [data-casual-series="eccc"] .banner-title,
.ecc-home [data-casual-series="eccc"] .ecc-banner-series {
    text-align: right;
}
.ecc-home .t-banner[data-casual-series="eccc"] .banner-text {
    align-items: flex-end;
}
.ecc-home [data-casual-series="eccc"] .banner-badges,
.ecc-home [data-casual-series="eccc"] .banner-meta-line {
    justify-content: flex-end;
}
.ecc-home .t-banner[data-casual-series="eccc"] .banner-left {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.ecc-home .t-banner[data-casual-series="eccc"] .banner-right {
    justify-content: flex-start;
}

@media (min-width: 901px) {
    .ecc-home .t-banner[data-casual-series="eccc"]:not(.has-countdown),
    .ecc-home .t-banner[data-casual-series="eccc"] .banner-main-row {
        flex-direction: row-reverse;
    }
}
@media (max-width: 900px) {
    .ecc-home .t-banner[data-casual-series="ecss"] .banner-left {
        justify-content: flex-start;
    }
    .ecc-home .t-banner[data-casual-series="eccc"] .banner-left {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
    .ecc-home .t-banner[data-casual-series="eccc"] .banner-right {
        justify-content: flex-end;
    }
}

.ecc-home .section-line {
    background: linear-gradient(90deg, #dc2626 0%, #cbd5e1 50%, #38bdf8 100%);
}

/* ─────────────────────────────────────────────────────────────
   ABOUT EC CASUAL PAGE (.ecc-about)
   ───────────────────────────────────────────────────────────── */
.ecc-about {
    overflow-x: hidden;
    background: #030306;
    color: #f1f5f9;
    font-family: Inter, system-ui, sans-serif;
}
.ecc-about-content {
    padding: 0 clamp(16px, 3.5vw, 56px);
}
.ecc-about-content h1, .ecc-about-content h2 {
    margin: 0;
    font-family: Rajdhani, sans-serif;
    font-weight: 700;
}
.ecc-kicker {
    color: #94a3b8;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 20px;
}
.ecc-about-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    padding: 70px 3% 64px;
    border-bottom: 1px solid #202433;
    position: relative;
}
.ecc-about-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ecc-dual-border);
}
.ecc-about-intro h1 {
    font-size: clamp(72px, 9vw, 138px);
    line-height: 0.83;
    letter-spacing: 1px;
    margin: 26px 0 30px;
}
.ecc-about-tagline {
    font: 700 clamp(18px, 2vw, 26px)/1.3 Rajdhani, sans-serif;
    letter-spacing: 2px;
    color: #e2e8f0;
    margin: 0 0 12px;
}
.ecc-about-description {
    font-size: 15px;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 28px;
}
.ecc-about-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ecc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 13px 22px;
    border: 1px solid #4a4c59;
    border-radius: 6px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(180deg, #16171f, #09090e);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s, color 0.2s;
}
.ecc-action-red {
    border-color: #8c202a;
    background: linear-gradient(180deg, #2f1015, #14090c);
}
.ecc-action:hover {
    border-color: #cbd5e1;
    color: #ffffff;
}

.ecc-about-art {
    max-width: 480px;
    justify-self: center;
    width: 100%;
    position: relative;
}
.ecc-about-art img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
}

/* Series plates with official logos */
.ecc-about-series {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 48px 0;
}
.ecc-series-plate {
    position: relative;
    overflow: hidden;
    border: 1px solid #2a2e3d;
    border-radius: 6px;
    padding: 36px 36px 0;
    background: linear-gradient(180deg, #11131c, #090a0f 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ecc-plate-emblem-wrap {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ecc-plate-emblem {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}
.ecc-series-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 10px;
    letter-spacing: 2px;
    color: #94a3b8;
}
.ecc-series-code {
    font: 700 44px/1 Rajdhani, sans-serif;
    letter-spacing: 1px;
    color: transparent;
    -webkit-text-stroke: 1px #40434f;
}
.ecss .ecc-series-code {
    -webkit-text-stroke-color: #8c202a;
}
.eccc .ecc-series-code {
    -webkit-text-stroke-color: var(--ecc-sapphire-dark);
}
.ecc-series-plate h2 {
    font-size: clamp(36px, 4.2vw, 66px);
    line-height: 0.95;
    margin: 20px 0;
    letter-spacing: 1px;
}
.ecc-series-plate p {
    font-size: 14px;
    line-height: 1.8;
    color: #a3aebe;
    max-width: 510px;
    min-height: 76px;
    margin: 0 auto;
}
.ecc-series-plate.ecss {
    border-top: 3px solid #dc2626;
    text-align: left;
}
.ecc-series-plate.ecss h2,
.ecc-series-plate.ecss p {
    text-align: left;
}
.ecc-series-plate.ecss p {
    margin-left: 0;
    margin-right: auto;
}
.ecc-series-plate.ecss .ecc-plate-emblem-wrap,
.ecc-series-plate.ecss .ecc-series-rules {
    justify-content: flex-start;
}

.ecc-series-plate.eccc {
    border-top: 3px solid var(--ecc-sapphire);
    text-align: right;
}
.ecc-series-plate.eccc h2,
.ecc-series-plate.eccc p {
    text-align: right;
}
.ecc-series-plate.eccc p {
    margin-left: auto;
    margin-right: 0;
}
.ecc-series-plate.eccc .ecc-plate-emblem-wrap,
.ecc-series-plate.eccc .ecc-series-rules {
    justify-content: flex-end;
}
.ecc-series-rules {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 24px 0 28px;
    font-size: 11px;
    color: #cbd5e1;
}
.ecc-series-rules span {
    border-left: 1px solid #373a48;
    padding-left: 20px;
}
.ecc-plate-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: #dce2ec;
    border-top: 1px solid #282b37;
    padding: 20px 0;
    transition: color 0.2s;
}
.ecc-plate-link:hover {
    color: #ffffff;
}

.ecc-saturday-band, .ecc-about-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 48px 36px;
    border-top: 1px solid #232734;
    border-bottom: 1px solid #232734;
}
.ecc-saturday-band h2 {
    font-size: clamp(44px, 5.5vw, 80px);
    line-height: 0.9;
    letter-spacing: 1px;
}
.ecc-saturday-band p:not(.ecc-kicker), .ecc-about-media p:not(.ecc-kicker), .ecc-rewards-band > p {
    font-size: 14px;
    color: #a3aebe;
    line-height: 1.8;
    max-width: 580px;
}
.ecc-band-note {
    margin-top: 24px;
    border-left: 3px solid #dc2626;
    padding-left: 14px;
    font: 700 16px/1.4 Rajdhani, sans-serif;
    letter-spacing: 1px;
    color: #e2e8f0;
}
.ecc-about-media {
    border-top: 0;
}
.ecc-about-media h2 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
}
.ecc-media-links {
    display: flex;
    gap: 30px;
    margin-top: 24px;
}
.ecc-media-links a {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
}
.ecc-media-links a:hover {
    color: #ffffff;
}
.ecc-rewards-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 36px;
    margin-top: 32px;
    border-left: 3px solid #8c202a;
    background: linear-gradient(180deg, #101118, #09090e);
}
.ecc-rewards-band h2 {
    font-size: 30px;
}
.ecc-rewards-band h2 span {
    color: #758097;
}
.ecc-about-footer {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px 0;
    color: #94a3b8;
    font-size: 11px;
    letter-spacing: 1px;
}
.ecc-about-footer a {
    color: #cbd5e1;
    text-decoration: none;
}
.ecc-about-footer a:hover {
    color: #ffffff;
}

/* Responsive queries */
@media (max-width: 768px) {
    .ecc-about-hero {
        gap: 16px;
        padding: 42px 0;
        grid-template-columns: 1fr 0.6fr;
    }
    .ecc-about-intro h1 {
        font-size: clamp(64px, 12vw, 92px);
    }
    .ecc-about-art {
        opacity: 0.85;
    }
    .ecc-about-series {
        grid-template-columns: 1fr;
        margin: 28px 0;
    }
    .ecc-series-plate {
        padding: 24px 24px 0;
    }
    .ecc-series-plate h2 {
        font-size: 50px;
    }
    .ecc-series-plate p {
        min-height: 0;
    }
    .ecc-saturday-band, .ecc-about-media, .ecc-rewards-band {
        gap: 24px;
        padding: 32px 24px;
    }
    .ecc-rewards-band h2 span {
        display: block;
    }
    .ecc-info {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .ecc-home-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }
    .ecc-about-hero {
        grid-template-columns: 1fr;
    }
    .ecc-about-art {
        position: absolute;
        width: 155px;
        right: 0;
        top: 60px;
        opacity: 0.25;
        pointer-events: none;
    }
    .ecc-about-intro {
        position: relative;
        z-index: 1;
    }
    .ecc-about-intro h1 {
        font-size: 88px;
    }
    .ecc-about-tagline {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .ecc-kicker {
        font-size: 9px;
        letter-spacing: 2px;
    }
    .ecc-saturday-band, .ecc-about-media, .ecc-rewards-band {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }
    .ecc-action {
        padding: 12px 16px;
        gap: 12px;
    }
    .ecc-series-top {
        letter-spacing: 1px;
    }
    .ecc-series-code {
        font-size: 36px;
    }
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL NAVIGATION DROPDOWN ON HOVER FOR EC CASUAL
   ───────────────────────────────────────────────────────────── */
.ecc-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ecc-nav-caret {
    margin-left: 6px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.ecc-nav-dropdown:hover .ecc-nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.ecc-nav-dropdown .ecc-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 8px;
    min-width: 190px;
    z-index: 200;
}
.ecc-nav-dropdown:hover .ecc-nav-dropdown-menu,
.ecc-nav-dropdown:focus-within .ecc-nav-dropdown-menu {
    display: block;
}
.ecc-nav-menu-inner {
    overflow: hidden;
    background: #090a10;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.1);
    position: relative;
}
.ecc-nav-menu-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--ecc-dual-border);
    border-radius: 10px 10px 0 0;
}
.ecc-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.ecc-sublink:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

/* ─────────────────────────────────────────────────────────────
   PLAYER PROFILE CARD ACTION BUTTON (BOTTOM RIGHT)
   ───────────────────────────────────────────────────────────── */
.profile-action-corner {
    align-self: flex-end;
    margin-left: auto;
    display: flex;
    align-items: center;
}
.profile-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.profile-switch-btn.to-ecc {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18) 0%, rgba(56, 189, 248, 0.18) 100%);
    border: 1px solid rgba(226, 232, 240, 0.28);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.profile-switch-btn.to-ecc:hover {
    border-color: rgba(226, 232, 240, 0.65);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.3), 0 0 18px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
}
.profile-switch-btn.to-ec {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.profile-switch-btn.to-ec:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .profile-action-corner {
        align-self: center;
        margin: 16px auto 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   SCOPED FILTER PILLS (ECSS LEFT, ALL CENTER, ECCC RIGHT)
   ───────────────────────────────────────────────────────────── */
.filter-pill.ecc-pill.ecss {
    border-color: rgba(239, 68, 68, 0.35);
}
.filter-pill.ecc-pill.ecss:hover {
    border-color: #f87171;
    color: #fca5a5;
}
.filter-pill.ecc-pill.ecss.active {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    border-color: #fca5a5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.4) !important;
}

.filter-pill.ecc-pill.eccc {
    border-color: rgba(56, 189, 248, 0.35);
}
.filter-pill.ecc-pill.eccc:hover {
    border-color: #38bdf8;
    color: #bae6fd;
}
.filter-pill.ecc-pill.eccc.active {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: #bae6fd !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   ECCC TOURNAMENT TABLE ROWS & RIGHT BORDER
   ───────────────────────────────────────────────────────────── */
.ecc-page .row-eccc {
    border-right: 3px solid var(--ecc-sapphire);
}
.match-row-eccc {
    border-right: 3px solid var(--ecc-sapphire);
}