/**
 * GapScore Public Sports Portal CSS
 * Matches exact mockup design from docs/konsep-gapscore-2.png
 * Dark Navy Hero (#091A2F) + Clean White/Light Body Canvas
 */

:root {
    --gs-control-navy: #071827;
    --gs-match-navy: #0C2238;
    --gs-panel-navy: #15334D;
    --gs-signal-blue: #0B6FD3;
    --gs-signal-blue-dark: #075DB8;
    --gs-signal-blue-bright: #2589E8;
    --gs-ice: #F6F9FC;
    --gs-mist: #EAF0F5;
    --gs-line: #D5DEE7;
    --gs-slate: #526579;
    --gs-ink: #142333;
    --gs-navy-dark: #091A2F;
    --gs-navy-card: #0F2540;
    --gs-navy-border: #1E3A5F;
    --gs-red-accent: #E11D48;
    --gs-red-hover: #BE123C;
    --gs-green-accent: #10B981;
    --gs-green-hover: #059669;
    --gs-body-bg: #F8FAFC;
    --gs-card-bg: #FFFFFF;
    --gs-card-border: #E2E8F0;
    --gs-text-main: #0F172A;
    --gs-text-muted: #64748B;
}

/* Global No Horizontal Scrollbar Rule & Modern Sports Canvas */
html:not(:has(.gs-admin-body)),
body:not(.gs-admin-body) {
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
    background-color: #f1f5f9;
    color: var(--gs-text-main);
}

/* ============================================================
   1. NAVBAR & HEADER (Dark Navy matching Mockup)
   ============================================================ */
.gs-public-header-dark {
    background-color: var(--gs-navy-dark);
    border-bottom: 1px solid var(--gs-navy-border);
    width: 100%;
    overflow-x: clip;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Hamburger — modern morph */
.gs-mobile-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.gs-mobile-toggle:active {
    transform: scale(0.96);
}

.gs-mobile-toggle-box {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gs-mobile-toggle-line {
    height: 2px;
    border-radius: 9999px;
    background: #fff;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-mobile-toggle-line:nth-child(1) {
    width: 100%
}

.gs-mobile-toggle-line:nth-child(2) {
    width: 100%
}

.gs-mobile-toggle-line:nth-child(3) {
    width: 68%
}

.gs-mobile-toggle[aria-expanded="true"] .gs-mobile-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.gs-mobile-toggle[aria-expanded="true"] .gs-mobile-toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.gs-mobile-toggle[aria-expanded="true"] .gs-mobile-toggle-line:nth-child(3) {
    width: 100%;
    transform: translateY(-6px) rotate(-45deg);
}

/* Overlay + Drawer — premium dark glass */
.gs-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(3, 7, 18, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.gs-mobile-overlay:not([hidden]) {
    opacity: 1;
}

.gs-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: min(86vw, 340px);
    max-width: 340px;
    background: linear-gradient(180deg, #0B1A2E 0%, #09152A 55%, #070F1E 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -18px 0 56px rgba(0, 0, 0, 0.55), -6px 0 18px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.gs-mobile-drawer.is-open {
    transform: translateX(0);
}

.gs-mobile-drawer[aria-hidden="true"] {
    visibility: hidden;
}

.gs-mobile-drawer.is-open[aria-hidden="true"] {
    visibility: visible;
}

.gs-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
}

.gs-mobile-close {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gs-mobile-close:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(90deg);
}

.gs-mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    -webkit-overflow-scrolling: touch;
}

.gs-mobile-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.gs-mobile-search svg {
    color: #94A3B8;
    flex-shrink: 0;
}

.gs-mobile-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.88rem;
}

.gs-mobile-search input::placeholder {
    color: #94A3B8;
}

.gs-mobile-search:focus-within {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.gs-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gs-mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    color: #CBD5E1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-mobile-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}

.gs-mobile-link.is-active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(56, 189, 248, 0.14));
    color: #fff;
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
}

.gs-mn-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.gs-mobile-link.is-active .gs-mn-icon {
    background: #10B981;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

.gs-mn-arrow {
    margin-left: auto;
    opacity: 0.45;
    font-size: 1.1rem;
}

.gs-mobile-link.is-active .gs-mn-arrow {
    opacity: 1;
}

.gs-mobile-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
}

.gs-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gs-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 44px;
}

.gs-mobile-btn--warning {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #1F1300;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.32);
}

.gs-mobile-btn--emerald {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.32);
}

.gs-mobile-btn--primary {
    background: #fff;
    color: #091A2F;
    border-color: rgba(255, 255, 255, 0.9);
}

.gs-mobile-btn--ghost {
    background: rgba(255, 255, 255, 0.07);
    color: #CBD5E1;
    border-color: rgba(255, 255, 255, 0.12);
}

.gs-mobile-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.gs-mobile-btn:active {
    transform: scale(0.985);
}

.gs-mobile-footnote {
    margin: 18px 2px 0;
    font-size: 0.70rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {

    .gs-mobile-drawer,
    .gs-mobile-overlay,
    .gs-mobile-link,
    .gs-mobile-toggle-line {
        transition: none !important;
    }
}

body.gs-mobile-lock {
    overflow: hidden !important;
}

/* ============================================================
   1.1 BRAND LOGO & WORDMARK
   ============================================================ */
.gs-header-brand {
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.gs-header-brand:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.gs-brand-wordmark {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    line-height: 1;
}

/* ============================================================
   1.2 SEGMENTED NAVIGATION DOCK & LINKS
   ============================================================ */
.gs-nav-pill-dock {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(7, 24, 39, 0.5); /* brand.navy.950 Control Navy */
    padding: 3px 5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gs-nav-link-dark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94A3B8; /* neutral.600 Slate */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.84rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.gs-nav-link-dark:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.05);
}

.gs-nav-link-dark.active {
    color: #FFFFFF;
    font-weight: 600;
    background: rgba(11, 111, 211, 0.22); /* brand.blue.600 Signal Blue tint */
    border: 1px solid rgba(124, 197, 232, 0.35); /* accent.sky */
    box-shadow: 0 2px 8px rgba(11, 111, 211, 0.2);
}

/* Live Broadcast Pill */
.gs-nav-link-live {
    color: #FF5B87 !important;
    background: rgba(197, 22, 69, 0.14) !important;
    border: 1px solid rgba(255, 91, 135, 0.3) !important;
    font-weight: 600 !important;
    padding: 6px 11px;
}

.gs-nav-link-live:hover,
.gs-nav-link-live.active {
    color: #FFFFFF !important;
    background: rgba(197, 22, 69, 0.25) !important;
    border-color: rgba(255, 91, 135, 0.55) !important;
    box-shadow: 0 0 12px rgba(197, 22, 69, 0.35) !important;
}

.gs-live-pulse-dot {
    width: 7px;
    height: 7px;
    background-color: #FF5B87;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.gs-live-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(255, 91, 135, 0.5);
    animation: gsLiveRadarPulse 1.8s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes gsLiveRadarPulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Dropdown More Chevron */
.gs-dropdown-chevron {
    color: #94A3B8;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-nav-more-toggle[aria-expanded="true"] .gs-dropdown-chevron {
    transform: rotate(180deg);
    color: #FFFFFF;
}

/* ============================================================
   1.3 DARK GLASS DROPDOWNS
   ============================================================ */
.gs-dropdown-dark {
    background: #0C2238; /* brand.navy.900 */
    border: 1px solid #15334D; /* brand.navy.800 */
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    min-width: 220px;
    margin-top: 8px !important;
}

.gs-dropdown-dark-item {
    color: #CBD5E1 !important;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
}

.gs-dropdown-dark-item:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(2px);
}

.gs-dropdown-dark-item.text-danger:hover {
    color: #FF8178 !important;
    background-color: rgba(180, 35, 24, 0.15) !important;
}

.gs-dd-icon {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

/* ============================================================
   1.4 EXECUTIVE USER PROFILE PILL & GUEST ACTIONS
   ============================================================ */
.gs-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 9999px;
    padding: 4px 12px 4px 5px;
    color: #F8FAFC;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-user-pill:hover,
.gs-user-pill[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(124, 197, 232, 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.gs-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B6FD3 0%, #159BB8 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(11, 111, 211, 0.35);
}

.gs-user-meta {
    line-height: 1.15;
}

.gs-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #F8FAFC;
}

.gs-user-role-badge {
    font-size: 0.65rem;
    font-weight: 500;
    color: #7CC5E8;
    letter-spacing: 0.02em;
}

.gs-user-chevron {
    color: #94A3B8;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-user-pill[aria-expanded="true"] .gs-user-chevron {
    transform: rotate(180deg);
    color: #FFFFFF;
}

/* Guest Navigation Buttons */
.gs-btn-ghost-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #F8FAFC;
    font-size: 0.84rem;
    font-weight: 600;
    background: transparent;
    transition: all 0.18s ease;
}

.gs-btn-ghost-nav:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.gs-btn-primary-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 18px;
    border-radius: 9999px;
    border: 1px solid #0B6FD3;
    background: #0B6FD3; /* brand.blue.600 */
    color: #FFFFFF;
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(11, 111, 211, 0.35);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-btn-primary-nav:hover {
    background: #075DB8; /* brand.blue.700 */
    border-color: #075DB8;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(11, 111, 211, 0.45);
}

.gs-btn-accent-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1px solid rgba(233, 120, 23, 0.4);
    background: rgba(233, 120, 23, 0.15); /* accent.orange */
    color: #FFAA5A;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.18s ease;
}

.gs-btn-accent-nav:hover {
    background: #E97817;
    border-color: #E97817;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(233, 120, 23, 0.35);
}

.gs-nav-search-dark {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    border-radius: 9999px;
    font-size: 0.82rem;
    padding: 0.38rem 0.85rem 0.38rem 2.1rem;
    width: 140px;
    transition: all 0.2s ease;
}

.gs-nav-search-dark:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: #0B6FD3;
    outline: none;
    color: #FFFFFF;
    width: 180px;
    box-shadow: 0 0 0 3px rgba(11, 111, 211, 0.25);
}

.gs-nav-search-dark::placeholder {
    color: #94A3B8;
}

/* ============================================================
   2. HERO SECTION (Dark Navy with Red/White CTAs & Live Card)
   ============================================================ */
.gs-hero-section {
    background-color: var(--gs-navy-dark);
    color: #FFFFFF;
    padding: 3rem 0 3.5rem 0;
    position: relative;
    border-bottom: 1px solid var(--gs-navy-border);
}

.gs-hero-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 0.85rem;
}

.gs-hero-sub {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    color: #94A3B8;
    max-width: 520px;
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.gs-btn-hero-red {
    background-color: var(--gs-red-accent);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    transition: background-color 0.15s ease;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

.gs-btn-hero-red:hover {
    background-color: var(--gs-red-hover);
    color: #FFFFFF;
}

.gs-btn-hero-white {
    background-color: #FFFFFF;
    color: var(--gs-navy-dark);
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    transition: background-color 0.15s ease;
}

.gs-btn-hero-white:hover {
    background-color: #E2E8F0;
    color: var(--gs-navy-dark);
}

/* ============================================================
    3. LIVE SEKARANG CARD — Modern Distinct + Blur + Smooth Border
   ============================================================ */
.gs-mockup-live-card {
    background: linear-gradient(135deg, rgba(19, 45, 78, 0.78) 0%, rgba(10, 27, 48, 0.88) 52%, rgba(7, 18, 34, 0.94) 100%);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border: 1.5px solid rgba(125, 211, 252, 0.18);
    border-radius: 18px;
    padding: 1.5rem 1.35rem 1.35rem;
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.55), 0 8px 18px -10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 20px;
    transition: border-color 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.gs-mockup-live-card::before {
    content: '';
    position: absolute;
    inset: -40% -30% auto -30%;
    height: 280px;
    background:
        radial-gradient(380px 160px at 22% 40%, rgba(56, 189, 248, 0.16), transparent 62%),
        radial-gradient(420px 180px at 78% 30%, rgba(16, 185, 129, 0.13), transparent 64%),
        radial-gradient(360px 200px at 50% 90%, rgba(245, 158, 11, 0.09), transparent 68%);
    pointer-events: none;
    z-index: 0;
    filter: blur(0.5px);
    animation: gsLiveAurora 16s ease-in-out infinite alternate;
}

.gs-mockup-live-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 48%);
    pointer-events: none;
    z-index: 0;
}

.gs-mockup-live-card>* {
    position: relative;
    z-index: 1;
}

.gs-mockup-live-card:hover {
    border-color: rgba(56, 189, 248, 0.38);
    transform: translateY(-2px);
    box-shadow: 0 26px 52px -18px rgba(0, 0, 0, 0.60), 0 12px 22px -12px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@keyframes gsLiveAurora {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(10px, -6px, 0) scale(1.04);
    }
}

/* Live per-card slider — animasi BERBEDA dari Merchant (horizontal slide + scale, smooth color border) */
.gs-live-card-swap {
    will-change: transform, opacity, filter;
    transition: transform 620ms cubic-bezier(0.32, 0.72, 0, 1), opacity 480ms ease, filter 620ms ease;
}

.gs-live-card-swap.is-in {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
}

.gs-live-card-swap.is-out {
    opacity: 0;
    transform: translateX(-18px) scale(0.97);
    filter: blur(3px);
}

/* dots untuk live */
.gs-live-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}

.gs-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-live-dot.is-active {
    width: 22px;
    background: #fff;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.28), 0 0 12px rgba(56, 189, 248, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .gs-mockup-live-card::before {
        animation: none;
    }

    .gs-mockup-live-card,
    .gs-live-card-swap {
        transition: none !important;
    }

    .gs-live-card-swap.is-out {
        filter: none;
    }
}

.gs-badge-live-red {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.18), rgba(225, 29, 72, 0.10));
    border: 1px solid rgba(251, 113, 133, 0.38);
    color: #FECDD3;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.30rem 0.70rem;
    border-radius: 9999px;
    margin-bottom: 0.85rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.gs-live-pulse-red {
    width: 7px;
    height: 7px;
    background-color: #FB7185;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.28), 0 0 10px rgba(225, 29, 72, 0.55);
    animation: gsPulseRed 1.6s infinite ease-in-out;
}

@keyframes gsPulseRed {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.28), 0 0 10px rgba(225, 29, 72, 0.45);
    }

    50% {
        opacity: 0.92;
        transform: scale(0.92);
        box-shadow: 0 0 0 6px rgba(251, 113, 133, 0.16), 0 0 14px rgba(225, 29, 72, 0.35);
    }
}

.gs-live-event-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
    opacity: 0.92;
}

.gs-mockup-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gs-mockup-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.55rem auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.gs-mockup-live-card:hover .gs-mockup-team-avatar {
    transform: translateY(-1px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.20);
}

.gs-mockup-team-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}

.gs-mockup-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gs-mockup-score-nums {
    font-size: 2.35rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gs-mockup-clock {
    color: #FECDD3;
    background: rgba(225, 29, 72, 0.14);
    border: 1px solid rgba(251, 113, 133, 0.28);
    padding: 0.18rem 0.52rem;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-top: 0.55rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gs-btn-lihat-live {
    background: linear-gradient(135deg, #10B981 0%, #059669 55%, #047857 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    padding: 0.62rem 1.5rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, filter 0.22s ease;
}

.gs-btn-lihat-live::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.20) 38%, transparent 56%);
    transform: translateX(-120%);
    transition: transform 0.70s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-btn-lihat-live:hover::before {
    transform: translateX(120%);
}

.gs-btn-lihat-live:hover {
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    filter: saturate(1.05);
}

.gs-btn-lihat-live:active {
    transform: scale(0.985);
}

/* ============================================================
   4. SCHEDULE & ONGOING EVENT SECTION (White/Light Canvas)
   ============================================================ */
.gs-portal-content-section {
    background-color: #FFFFFF;
    padding: 2.5rem 0 3rem 0;
}

.gs-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #F1F5F9;
}

.gs-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gs-text-main);
    margin-bottom: 0;
}

.gs-section-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2563EB;
    text-decoration: none;
}

.gs-section-link:hover {
    text-decoration: underline;
}

/* Match Row List */
.gs-match-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.gs-match-schedule-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s ease;
}

.gs-match-schedule-item:hover {
    background-color: #F1F5F9;
}

.gs-match-time-col {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--gs-text-main);
    min-width: 50px;
}

.gs-match-teams-col {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gs-text-main);
}

.gs-match-vs {
    font-size: 0.75rem;
    color: #94A3B8;
    font-weight: 700;
}

/* Hasil Terbaru (Cards Grid) */
.gs-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gs-result-mini-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.75rem;
}

.gs-result-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gs-text-main);
    margin-bottom: 0.35rem;
}

.gs-result-team-row:last-child {
    margin-bottom: 0;
}

.gs-result-score {
    font-weight: 800;
    color: #0F172A;
}

/* Featured Ongoing Event Card (Flutter Minimalist Theme System) */
.gs-featured-event-banner {
    background: linear-gradient(145deg, #0F2540 0%, #091A2F 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.5rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    box-shadow: 0 10px 25px -5px rgba(9, 26, 47, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.gs-featured-event-banner:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35);
}

.gs-featured-event-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.gs-featured-event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.gs-featured-event-date,
.gs-featured-event-stats {
    color: #94A3B8;
    font-size: 0.82rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gs-badge-ongoing-pill {
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34D399;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}


/* ============================================================
   5. QUICK FEATURE ICONS GRID (Bottom 8 Icons)
   ============================================================ */
.gs-feature-grid-section {
    background-color: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 2.25rem 0 2.5rem;
}

.gs-icon-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 1.25rem 0.65rem 1.15rem;
    text-align: center;
    text-decoration: none;
    color: #1E293B;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 108px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 2px 6px rgba(15, 23, 42, 0.02);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                color 0.2s ease;
    position: relative;
    overflow: visible;
}

.gs-icon-card:hover {
    border-color: #93C5FD;
    box-shadow: 0 10px 24px -4px rgba(11, 111, 211, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
    transform: translateY(-3px);
    color: #0B6FD3;
}

.gs-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #0B6FD3;
    border: 1px solid rgba(11, 111, 211, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease,
                background-color 0.2s ease;
}

.gs-icon-card:hover .gs-icon-circle {
    transform: scale(1.06);
}

.gs-quick-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    transition: stroke 0.2s ease;
}

/* Category specific brand token colorways */
.gs-icon-circle.gs-icon-event {
    background: #EFF6FF;
    color: #0B6FD3;
    border-color: rgba(11, 111, 211, 0.15);
}

.gs-icon-circle.gs-icon-pertandingan {
    background: #F0F7FF;
    color: #0284C7;
    border-color: rgba(2, 132, 199, 0.15);
}

.gs-icon-circle.gs-icon-live {
    background: #FDE8EE;
    color: #C51645;
    border-color: rgba(197, 22, 69, 0.2);
}
.gs-icon-card:hover .gs-icon-circle.gs-icon-live {
    box-shadow: 0 0 0 3px rgba(197, 22, 69, 0.12);
}

.gs-icon-circle.gs-icon-jadwal {
    background: #E6F6F9;
    color: #159BB8;
    border-color: rgba(21, 155, 184, 0.2);
}

.gs-icon-circle.gs-icon-klasemen {
    background: #EEF2FF;
    color: #4F46E5;
    border-color: rgba(79, 70, 229, 0.15);
}

.gs-icon-circle.gs-icon-tim {
    background: #F1F5F9;
    color: #0F172A;
    border-color: rgba(15, 23, 42, 0.12);
}

.gs-icon-circle.gs-icon-pemain {
    background: #F0F9FF;
    color: #0369A1;
    border-color: rgba(3, 105, 161, 0.15);
}

.gs-icon-circle.gs-icon-download {
    background: #ECFDF5;
    color: #059669;
    border-color: rgba(5, 150, 105, 0.2);
}

.gs-icon-label {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: inherit;
    line-height: 1.2;
}

/* Subtle live pulsing dot for Live Score badge */
.gs-live-pulse-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C51645;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px rgba(197, 22, 69, 0.2);
    animation: gsLiveDotPulse 1.8s infinite;
}

@keyframes gsLiveDotPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(197, 22, 69, 0.5);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 5px rgba(197, 22, 69, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(197, 22, 69, 0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gs-mockup-matchup {
        gap: 0.4rem;
    }

    .gs-mockup-score-nums {
        font-size: 1.75rem;
    }

    .gs-hero-section {
        padding: 2rem 0;
    }

    .gs-nav-search-dark {
        width: 100%;
    }
}

/* ============================================================
   6. LEADERBOARD & RACE TO THE TROPHY (Animations & Styles)
   ============================================================ */
.gs-race-podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    padding: 2rem 0 1rem 0;
}

.gs-podium-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: gsPodiumRise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.gs-podium-step:hover {
    transform: translateY(-8px);
}

.gs-podium-step-1 {
    order: 2;
    animation-delay: 0.1s;
}

.gs-podium-step-2 {
    order: 1;
    animation-delay: 0.25s;
}

.gs-podium-step-3 {
    order: 3;
    animation-delay: 0.4s;
}

@keyframes gsPodiumRise {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gs-podium-pillar {
    width: 100%;
    min-width: 110px;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 800;
    padding: 1.5rem 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.gs-podium-pillar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: rotate(25deg);
    animation: gsShine 3s infinite linear;
}

@keyframes gsShine {
    0% {
        transform: translateX(-100%) rotate(25deg);
    }

    100% {
        transform: translateX(100%) rotate(25deg);
    }
}

.gs-pillar-gold {
    height: 190px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border: 2px solid #FDE68A;
}

.gs-pillar-silver {
    height: 150px;
    background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%);
    border: 2px solid #E2E8F0;
}

.gs-pillar-bronze {
    height: 120px;
    background: linear-gradient(135deg, #D97706 0%, #92400E 100%);
    border: 2px solid #FCD34D;
}

.gs-trophy-glow {
    font-size: 2.2rem;
    animation: gsTrophyGlow 2s infinite ease-in-out;
    display: inline-block;
}

@keyframes gsTrophyGlow {

    0%,
    100% {
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6));
    }

    50% {
        transform: scale(1.1) translateY(-4px);
        filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.9));
    }
}

/* Magic Number Championship Progress Bar */
.gs-magic-number-card {
    background: #0F2540;
    border: 1px solid #1E3A5F;
    border-radius: 16px;
    padding: 1.5rem;
    color: #FFFFFF;
}

.gs-progress-champion {
    height: 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.gs-progress-bar-glow {
    background: linear-gradient(90deg, #10B981, #38BDF8, #F59E0B);
    animation: gsBarFill 1.5s ease-out forwards;
}

@keyframes gsBarFill {
    0% {
        width: 0%;
    }
}

/* Standings Ladder Rows & Zones */
.gs-ladder-row {
    transition: all 0.2s ease;
}

.gs-ladder-row:hover {
    background-color: #F8FAFC !important;
    transform: scale(1.005);
}

.gs-zone-championship {
    border-left: 4px solid #10B981 !important;
}

.gs-zone-playoff {
    border-left: 4px solid #3B82F6 !important;
}

.gs-zone-regular {
    border-left: 4px solid #E2E8F0 !important;
}

.gs-form-pill {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #FFFFFF;
    transition: transform 0.15s ease;
}

.gs-form-pill:hover {
    transform: scale(1.25);
}

.gs-form-w {
    background-color: #10B981;
}

.gs-form-d {
    background-color: #3B82F6;
}

.gs-form-l {
    background-color: #EF4444;
}

/* ============================================================
   7. SPONSOR MEDIA & MULTI-SPONSOR RIBBON MARQUEE
   ============================================================ */
.gs-sponsor-media-box {
    max-width: 220px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-sponsor-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.gs-sponsor-img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

/* Infinite Smooth Logo Marquee Ribbon */
.gs-marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 0.75rem 0;
}

.gs-marquee-wrapper::before,
.gs-marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.gs-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #FFFFFF, transparent);
}

.gs-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #FFFFFF, transparent);
}

.gs-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    animation: gsMarqueeScroll 25s linear infinite;
}

.gs-marquee-wrapper:hover .gs-marquee-track {
    animation-play-state: paused;
}

@keyframes gsMarqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.gs-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.85rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gs-marquee-item:hover {
    background: #091A2F;
    color: #FFFFFF;
    border-color: #091A2F;
    transform: translateY(-2px);
}

/* ============================================================
    8. ULTRA-MODERN GLASSMORPHISM SPONSOR BANNER v2 (Premium)
   ============================================================ */
.gs-sponsor-glass-wrapper {
    background: #070F1E;
    padding: 1.35rem 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.gs-sponsor-aurora {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 520px;
    background:
        radial-gradient(600px 280px at 18% 30%, rgba(56, 189, 248, 0.18), transparent 60%),
        radial-gradient(520px 320px at 86% 45%, rgba(16, 185, 129, 0.14), transparent 62%),
        radial-gradient(700px 260px at 52% 90%, rgba(245, 158, 11, 0.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(0.5px);
    animation: gsAuroraFloat 18s ease-in-out infinite alternate;
}

.gs-sponsor-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(800px 300px at 50% 50%, black 45%, transparent 75%);
    -webkit-mask-image: radial-gradient(800px 300px at 50% 50%, black 45%, transparent 75%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

@keyframes gsAuroraFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(12px, -8px, 0) scale(1.03);
    }
}

.gs-sponsor-glass-card {
    background: linear-gradient(135deg, rgba(16, 38, 66, 0.72) 0%, rgba(8, 22, 40, 0.92) 100%);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    padding: 1.25rem 1.5rem 1.15rem;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.55), 0 8px 18px -10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 1;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    overflow: hidden;
}

.gs-sponsor-glass-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 21px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 42%);
    pointer-events: none;
}

.gs-sponsor-card-border {
    position: absolute;
    inset: -1px;
    border-radius: 22px;
    padding: 1px;
    background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(56, 189, 248, 0.0) 70deg, rgba(56, 189, 248, 0.55) 140deg, rgba(16, 185, 129, 0.45) 190deg, rgba(245, 158, 11, 0.45) 250deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.gs-sponsor-glass-card:hover .gs-sponsor-card-border {
    opacity: 0.65;
}

.gs-sponsor-glass-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
    box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.60), 0 10px 22px -12px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* top meta */
.gs-badge-offline-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #1F1300;
    font-weight: 800;
    font-size: 0.70rem;
    letter-spacing: 0.06em;
    padding: 0.42rem 0.78rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.gs-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
    animation: gsDotPulse 1.8s ease-in-out infinite;
}

@keyframes gsDotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(0.85);
        opacity: 0.9
    }
}

.gs-badge-live {
    display: inline-flex;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #7DD3FC;
    background: rgba(125, 211, 252, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.28);
    padding: 0.32rem 0.62rem;
    border-radius: 9999px;
}

.gs-badge-live--sm {
    font-size: 0.62rem;
    padding: 0.24rem 0.52rem;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.gs-sponsor-counter {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.28rem 0.58rem;
    border-radius: 9999px;
}

.gs-sponsor-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.62);
}

.gs-hint-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #34D399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.75);
    animation: gsHintBlink 2.2s ease-in-out infinite;
}

@keyframes gsHintBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.55
    }
}

.gs-verified-badge {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #38BDF8, #0EA5E9);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.45);
}

/* media */
.gs-media-ring {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.gs-avatar-glow {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: radial-gradient(120% 120% at 30% 20%, #1E3A5F 0%, #0B1C33 55%, #071122 100%);
    color: #FCD34D;
    border: 1px solid rgba(252, 211, 77, 0.38) !important;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.38rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(252, 211, 77, 0.22), 0 0 18px rgba(252, 211, 77, 0.18);
}

/* CTA premium */
.gs-btn-sponsor-cta {
    background: linear-gradient(135deg, #10B981 0%, #059669 55%, #047857 100%);
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    border-radius: 9999px;
    padding: 0.62rem 1.28rem 0.62rem 1.35rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, filter 0.22s ease;
}

.gs-btn-sponsor-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.22) 36%, transparent 54%);
    transform: translateX(-120%);
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-btn-sponsor-cta:hover::before {
    transform: translateX(120%);
}

.gs-btn-sponsor-cta:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    filter: saturate(1.06);
}

.gs-btn-sponsor-cta:active {
    transform: translateY(0) scale(0.985);
}

.gs-cta-arrow {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.22s ease, background 0.22s ease;
}

.gs-btn-sponsor-cta:hover .gs-cta-arrow {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.24);
}

/* slides smooth */
.gs-sponsor-slides-wrapper {
    transition: min-height 0.3s ease;
}

.gs-sponsor-slide {
    transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 520ms ease;
    transform: translateY(10px) scale(0.985);
    filter: blur(4px);
    will-change: opacity, transform, filter;
}

.gs-sponsor-slide.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* progress + dots */
.gs-sponsor-progress-glow {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gs-sponsor-progress-bar-neon {
    background: linear-gradient(90deg, #38BDF8 0%, #34D399 55%, #F59E0B 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.75), 0 0 18px rgba(52, 211, 153, 0.35);
    position: relative;
    overflow: hidden;
}

.gs-sponsor-progress-bar-neon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-100%);
    animation: gsShimmer 1.8s ease-in-out infinite;
}

@keyframes gsShimmer {
    100% {
        transform: translateX(100%)
    }
}

.gs-sponsor-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gs-sponsor-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.28);
    padding: 0;
    cursor: pointer;
    transition: all 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-sponsor-dot.is-active {
    width: 26px;
    background: #fff;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.35), 0 0 14px rgba(56, 189, 248, 0.45);
}

.gs-sponsor-dot:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .gs-sponsor-glass-card {
        padding: 1rem 1.05rem 0.95rem;
        border-radius: 18px;
    }

    .gs-sponsor-counter {
        display: none;
    }
}

/* ============================================================
   10. ULTIMATE MODERN SPORTS UI: TEAMS, PLAYERS & MATCH CENTER
   ============================================================ */

/* Hero Header with Dynamic Stadium Lighting */
.gs-catalog-hero {
    background: radial-gradient(circle at 50% 0%, #162E4D 0%, #091A2F 65%, #050D18 100%);
    color: #FFFFFF;
    padding: 2.75rem 0 2.25rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gs-catalog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse at top, rgba(56, 189, 248, 0.15), transparent 70%);
    pointer-events: none;
}

.gs-catalog-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), rgba(16, 185, 129, 0.3), transparent);
}

/* Glass Badge Chip with high contrast */
.gs-glass-badge {
    background: rgba(9, 26, 47, 0.85);
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    backdrop-filter: blur(8px);
}

/* Control & Search Bar */
.gs-catalog-search-box {
    position: relative;
    min-width: 260px;
}

.gs-catalog-search-input {
    width: 100%;
    background: rgba(15, 37, 64, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    padding: 0.65rem 1.25rem 0.65rem 2.65rem;
    color: #FFFFFF;
    font-size: 0.88rem;
    backdrop-filter: blur(12px);
    transition: all 0.2s ease;
}

.gs-catalog-search-input:focus {
    outline: none;
    background: rgba(15, 37, 64, 0.9);
    border-color: #38BDF8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.gs-catalog-search-input::placeholder {
    color: #94A3B8;
}

.gs-catalog-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
}

/* Modern Pill Segmented Filter */
.gs-filter-pill-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.3rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gs-filter-pill-btn {
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.gs-filter-pill-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.gs-filter-pill-btn.active {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

/* ============================================================
   CLUB & TEAM CARDS (Pro Athletic Shield Style)
   ============================================================ */
.gs-club-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.gs-club-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

.gs-club-card-banner {
    background: linear-gradient(135deg, #091A2F 0%, #1E3A5F 100%);
    height: 80px;
    position: relative;
    padding: 0.75rem 1rem;
}

.gs-club-card-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
}

.gs-club-emblem-wrap {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0F2540 0%, #1E3A5F 100%);
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    margin: -36px auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38BDF8;
    font-size: 1.8rem;
    font-weight: 900;
    position: relative;
    z-index: 2;
}

.gs-form-pill-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #FFFFFF;
}

.gs-form-pill-w {
    background: #10B981;
}

.gs-form-pill-d {
    background: #0284C7;
}

.gs-form-pill-l {
    background: #EF4444;
}

/* ============================================================
   PLAYER CARDS (Pro Trading / FUT Card Aesthetics)
   ============================================================ */
.gs-player-fut-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.gs-player-fut-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

.gs-player-fut-header {
    background: linear-gradient(135deg, #091A2F 0%, #162E4D 100%);
    padding: 1rem 1rem 0.5rem;
    position: relative;
    overflow: hidden;
}

.gs-player-fut-bg-number {
    position: absolute;
    right: 5px;
    top: -5px;
    font-size: 4.5rem;
    font-weight: 900;
    font-family: Consolas, Monaco, monospace;
    color: rgba(255, 255, 255, 0.06);
    line-height: 1;
    pointer-events: none;
}

.gs-player-ovr-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 0.35rem 0.6rem;
    text-align: center;
    color: #FFFFFF;
    display: inline-block;
}

.gs-player-ovr-val {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    display: block;
    color: #FBBF24;
}

.gs-player-ovr-pos {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    display: block;
}

.gs-player-hero-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EEF2FF, #C7D2FE);
    border: 3px solid #38BDF8;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4338CA;
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.gs-player-avatar-aura {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EEF2FF, #C7D2FE);
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4338CA;
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0.5rem auto;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Athlete Mini Stat Attribute Meters */
.gs-player-attr-grid {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 0.65rem 0.85rem;
    margin: 0.75rem 0;
}

.gs-player-attr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
}

.gs-player-attr-item:last-child {
    margin-bottom: 0;
}

.gs-player-attr-name {
    font-weight: 700;
    color: #64748B;
}

.gs-player-attr-val {
    font-weight: 800;
    color: #0F172A;
}

/* ============================================================
   MATCH CENTER (Stadium Broadcast Scoreboard & 2D Pitch)
   ============================================================ */
.gs-scoreboard-card {
    background: radial-gradient(circle at 50% 30%, #162E4D 0%, #091A2F 75%, #050D18 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2rem 1.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.gs-scoreboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.015' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.gs-score-num-display {
    font-size: clamp(1.85rem, 4.2vw, 2.75rem);
    font-weight: 900;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', Consolas, Monaco, monospace;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

@media (max-width: 768px) {
    .gs-score-num-display {
        font-size: clamp(1.5rem, 5vw, 2.1rem) !important;
        letter-spacing: 0.01em;
    }
}

@media (max-width: 480px) {
    .gs-score-num-display {
        font-size: 1.45rem !important;
        letter-spacing: 0;
    }
}

/* 2D Futsal & Football Pitch Tactical Graphic */
.gs-futsal-pitch {
    background: repeating-linear-gradient(180deg,
            #15803D 0px,
            #15803D 45px,
            #166534 45px,
            #166534 90px);
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 1.75rem 1rem;
    position: relative;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.12);
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Halfway Line */
.gs-futsal-pitch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-50%);
    z-index: 1;
}

/* Center Circle & Center Spot */
.gs-pitch-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.gs-pitch-center-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Top Goal & Keeper Box (Home Team Goal Area) */
.gs-pitch-goal-top {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-top: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0 0 4px 4px;
    z-index: 1;
    pointer-events: none;
}

.gs-pitch-penalty-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 75px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-top: none;
    border-radius: 0 0 40px 40px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
}

.gs-pitch-spot-top {
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Bottom Goal & Keeper Box (Away Team Goal Area) */
.gs-pitch-goal-bottom {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px 4px 0 0;
    z-index: 1;
    pointer-events: none;
}

.gs-pitch-penalty-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 75px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
}

.gs-pitch-spot-bottom {
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Corner Arcs */
.gs-pitch-corner-tl {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom-right-radius: 100%;
    pointer-events: none;
    z-index: 1;
}

.gs-pitch-corner-tr {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom-left-radius: 100%;
    pointer-events: none;
    z-index: 1;
}

.gs-pitch-corner-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-top: 2px solid rgba(255, 255, 255, 0.6);
    border-top-right-radius: 100%;
    pointer-events: none;
    z-index: 1;
}

.gs-pitch-corner-br {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    border-top: 2px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   2D BASKETBALL COURT (HARDWOOD MAPLE PARQUET & COURT MARKINGS)
   ========================================================================== */
.gs-court-basketball {
    background: 
        repeating-linear-gradient(90deg, 
            #c88b48 0px, #c88b48 30px, 
            #bf813e 30px, #bf813e 60px, 
            #b77734 60px, #b77734 90px
        ) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.18) !important;
    position: relative;
    overflow: hidden;
}

.gs-court-basketball::after {
    display: none !important;
}

.gs-court-basketball .gs-bb-center-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.gs-court-basketball .gs-bb-center-circle-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-center-circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-3pt-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    max-width: 440px;
    height: 195px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-top: none;
    border-radius: 0 0 220px 220px;
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-3pt-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    max-width: 440px;
    height: 195px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-bottom: none;
    border-radius: 220px 220px 0 0;
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-key-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 115px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-top: none;
    background: rgba(30, 58, 138, 0.18);
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-key-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 115px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-bottom: none;
    background: rgba(220, 38, 38, 0.18);
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-freethrow-circle-top {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-freethrow-circle-bottom {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-backboard-top {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 4px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 2;
    pointer-events: none;
}

.gs-court-basketball .gs-bb-hoop-top {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 2.5px solid #f97316;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(249, 115, 22, 0.6);
    z-index: 2;
    pointer-events: none;
}

.gs-court-basketball .gs-bb-restricted-top {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 28px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-top: none;
    border-radius: 0 0 22px 22px;
    pointer-events: none;
    z-index: 1;
}

.gs-court-basketball .gs-bb-backboard-bottom {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 4px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 2;
    pointer-events: none;
}

.gs-court-basketball .gs-bb-hoop-bottom {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 2.5px solid #f97316;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(249, 115, 22, 0.6);
    z-index: 2;
    pointer-events: none;
}

.gs-court-basketball .gs-bb-restricted-bottom {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 28px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   2D VOLLEYBALL COURT
   ========================================================================== */
.gs-court-volleyball {
    background: #f97316 !important;
    border: 6px solid #0284c7 !important;
    border-radius: 14px !important;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
.gs-court-volleyball::after {
    display: none !important;
}
.gs-court-volleyball .gs-vb-net-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, #ffffff 0px, #ffffff 8px, #334155 8px, #334155 16px);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gs-court-volleyball .gs-vb-net-tag {
    background: #0f172a;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.4);
}
.gs-court-volleyball .gs-vb-attack-top {
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}
.gs-court-volleyball .gs-vb-attack-bottom {
    position: absolute;
    bottom: 33%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

.gs-pitch-player-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 3;
    transition: transform 0.2s ease;
}

.gs-pitch-player-node:hover {
    transform: scale(1.1);
}

.gs-pitch-player-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gs-pitch-player-dot.home {
    background: linear-gradient(135deg, #0284C7, #0369A1);
}

.gs-pitch-player-dot.away {
    background: linear-gradient(135deg, #E11D48, #BE123C);
}

.gs-pitch-player-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.65);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    margin-top: 0.25rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

/* Connected Match Timeline Feed */
.gs-match-timeline {
    position: relative;
    padding-left: 2rem;
}

.gs-match-timeline::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background: #CBD5E1;
}

.gs-timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
}

.gs-timeline-item:last-child {
    margin-bottom: 0;
}

.gs-timeline-item-bullet {
    position: absolute;
    left: -2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0F172A;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.gs-timeline-item-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 0.85rem 1.15rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.gs-timeline-item-card:hover {
    border-color: #CBD5E1;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}



/* ============================================================
   9. COMMUNITY MERCHANT SHOWCASE (Distinct from Premium Hero Slider)
   ============================================================ */
.gs-community-merchant-section {
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 2.25rem 0;
}

.gs-merchant-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gs-merchant-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -6px rgba(15, 23, 42, 0.08);
    border-color: #CBD5E1;
}

.gs-merchant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #F1F5F9;
    color: #0F2540;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.gs-btn-merchant {
    background: #F8FAFC;
    color: #0F172A !important;
    border: 1px solid #E2E8F0;
    font-weight: 600;
    font-size: 0.78rem;
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
}

.gs-merchant-card:hover .gs-btn-merchant {
    background: #0F172A;
    color: #FFFFFF !important;
    border-color: #0F172A;
}

/* ============================================================
    10. MERCHANT & PARTNER — 3 FIXED CARDS, PER-CARD CONTENT ROTATOR
    - posisi 3 card tetap (row g-3 tidak diubah)
    - card tidak slide, isi (inner) yang cross-fade + lift per-card
    - border color berbeda per-iklan + transisi ultra-smooth
   ============================================================ */
.gs-merchant-card--rotator {
    overflow: hidden;
    border-width: 1.5px !important;
    border-color: var(--gs-mc-border, #E2E8F0) !important;
    /* ultra-smooth border + shadow morph */
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.45s ease;
    will-change: border-color, box-shadow;
}

.gs-merchant-card--rotator:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px var(--gs-mc-shadow, rgba(15, 23, 42, 0.08)), 0 4px 10px -4px var(--gs-mc-shadow, rgba(15, 23, 42, 0.06));
}

.gs-merchant-card-swap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    will-change: transform, opacity, filter;
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-merchant-card-swap.gs-swap-out {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    filter: blur(2px);
}

.gs-merchant-card-swap.gs-swap-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* avatar border sync dengan card border */
.gs-merchant-card--rotator .gs-merchant-avatar {
    transition: background-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.45s ease,
        border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .gs-merchant-card-swap,
    .gs-merchant-card--rotator {
        transition: none !important;
    }

    .gs-merchant-card-swap.gs-swap-out {
        filter: none;
    }
}

/* ============================================================
   11. MATCH DETAIL SEGMENTED TABS NAV (Modern Floating Segmented Control)
   ============================================================ */
.gs-match-sticky-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05) !important;
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: all 0.25s ease;
}

.gs-tab-segmented-bar {
    display: inline-flex;
    align-items: center;
    background: #F1F5F9;
    padding: 3px;
    border-radius: 9999px;
    border: 1px solid #E2E8F0;
    gap: 2pt;
    /* Jarak 2pt antar tombol sesuai permintaan user */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
    max-width: 100%;
}

.gs-tab-segmented-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.45rem 1.15rem;
    margin: 0;
    border: none;
    background: transparent;
    color: #64748B;
    font-weight: 600;
    font-size: 0.84rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-decoration: none;
}

.gs-tab-segmented-btn:hover {
    color: #0F172A;
    background: rgba(255, 255, 255, 0.6);
}

.gs-tab-segmented-btn.active {
    background: #FFFFFF !important;
    color: #2563EB !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(-0.5px);
}

/* ============================================================
   Landing Page Modern Broadcast UI (Matches & Results)
   ============================================================ */
.gs-heading-accent-bar {
    width: 4px;
    height: 22px;
    border-radius: 99px;
    flex-shrink: 0;
    margin-right: 2px;
}
.gs-bar-sky {
    background: linear-gradient(180deg, #0284c7, #38bdf8);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
.gs-bar-emerald {
    background: linear-gradient(180deg, #059669, #34d399);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}
.gs-bar-indigo {
    background: linear-gradient(180deg, #2563eb, #818cf8);
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
}
.gs-bar-amber {
    background: linear-gradient(180deg, #d97706, #fbbf24);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
/* ============================================================
   PRO TOURNAMENT BRACKET SHOWCASE (Senior UI/UX Web Standard)
   Inspired by UEFA, Sofascore, HLTV & VCT Tournament Hubs
   ============================================================ */

.gs-editorial-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.32rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--bs-font-monospace, monospace);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.gs-bracket-sport-filter {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.gs-bracket-sport-filter:hover {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
.gs-bracket-sport-filter.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}
.gs-bracket-sport-filter.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.gs-bracket-tab-btn {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    border-radius: 12px !important;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.gs-bracket-tab-btn:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.gs-bracket-tab-btn.active {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15) !important;
}

.gs-bracket-arena {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    overflow: hidden;
}

.gs-bracket-stage-pill {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border-radius: 9999px;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.gs-stage-pill-gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}

.gs-trophy-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.4rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdf8 0%, #fef8eb 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    width: 100%;
}
.gs-trophy-showcase::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}
.gs-trophy-icon-glow {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.3rem;
    filter: drop-shadow(0 3px 8px rgba(245, 158, 11, 0.35));
    animation: gsTrophyFloat 3s ease-in-out infinite;
}
@keyframes gsTrophyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.gs-trophy-title {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}
.gs-trophy-subtitle {
    font-size: 0.67rem;
    color: #92400e;
    opacity: 0.85;
    font-weight: 500;
}

.gs-bracket-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.gs-bracket-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.gs-bracket-card-header {
    background: #f8fafc;
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.70rem;
}
.gs-bracket-match-code {
    font-family: var(--bs-font-monospace, monospace);
    font-weight: 700;
    color: #64748b;
}

.gs-team-row {
    padding: 0.52rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease;
}
.gs-team-row:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}
.gs-team-row.is-winner {
    background: #f0fdf4;
}
.gs-team-row.is-winner .gs-team-name {
    font-weight: 700;
    color: #15803d;
}
.gs-team-row.is-loser .gs-team-name {
    color: #64748b;
}
.gs-team-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.gs-team-score {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    min-width: 28px;
    text-align: center;
}
.gs-team-row.is-winner .gs-team-score {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.22);
}

.gs-grand-final-card {
    border: 1.5px solid #f59e0b !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.gs-grand-final-header {
    background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding: 0.5rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gs-grand-final-btn {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 9999px;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.gs-grand-final-btn:hover {
    background: #0f172a;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

/* Architectural Tournament Branch Connectors */
.gs-bracket-branch-left,
.gs-bracket-branch-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    position: relative;
}
.gs-bracket-connector-line {
    width: 100%;
    height: 2px;
    background: #cbd5e1;
    position: relative;
}
.gs-bracket-connector-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}
.gs-bracket-arena:hover .gs-bracket-connector-arrow {
    border-color: #94a3b8;
    color: #0f172a;
    transform: scale(1.05);
}
.gs-event-sport-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(56, 189, 248, 0.18) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 9999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--bs-font-monospace, monospace);
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}
.gs-section-accent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0284c7;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
    flex-shrink: 0;
    margin-right: 4px;
}
.gs-accent-success {
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.gs-modern-match-strip {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
}
.gs-modern-match-strip:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.gs-modern-match-strip.is-live-strip {
    border-color: #fecdd3;
    border-left: 3.5px solid #ef4444 !important;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.05);
}
.gs-modern-match-strip.is-live-strip:hover {
    border-color: #fda4af;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.09);
}
.gs-pulse-dot-red {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: gsPulseRed 1.5s infinite;
}
.gs-pulse-white-sm {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    animation: gsPulseWhite 1.2s infinite;
}
@keyframes gsPulseRed {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes gsPulseWhite {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

.gs-result-broadcast-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.gs-result-broadcast-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
/* Elevated Header Badges (Pop-out Sport & FT Chips) */
.gs-result-card-header {
    background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid #f1f5f9;
}
.gs-result-sport-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.22rem 0.65rem;
    border-radius: 99px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.70rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07), inset 0 1px 0 #ffffff;
    transition: all 0.2s ease;
}
.gs-result-sport-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
}
.gs-sport-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.gs-result-ft-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.62rem;
    border-radius: 7px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
    transition: all 0.2s ease;
}
.gs-result-ft-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}
/* Modern Tinted Accent Strip for Hasil Terbaru Cards */
.gs-result-card-footer {
    padding: 0.55rem 0.95rem;
    background: linear-gradient(90deg, #f0f9ff 0%, #f8fafc 50%, #eff6ff 100%);
    border-top: 1px solid #e0f2fe;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    transition: all 0.22s ease;
}
.gs-result-broadcast-card:hover .gs-result-card-footer {
    background: linear-gradient(90deg, #e0f2fe 0%, #f1f5f9 50%, #dbeafe 100%);
    border-top-color: #bae6fd;
}
.gs-result-footer-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.42rem;
    border-radius: 6px;
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.22);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gs-result-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    background: #0284c7;
    color: #ffffff !important;
    font-size: 0.70rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.25);
    transition: all 0.18s ease;
}
.gs-result-detail-btn:hover {
    background: #0369a1;
    transform: translateX(1px);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

/* Ongoing Event In-Place Content Rotator & Multi-Card Stack */
.gs-featured-event-banner {
    background: linear-gradient(135deg, #091A2F 0%, #0F2540 50%, #081627 100%);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(9, 26, 47, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}
.gs-featured-event-banner:hover {
    border-color: rgba(56, 189, 248, 0.45);
}
/* Modern Atmospheric Ambient Mesh for Main Portal Section */
.gs-portal-content-section {
    background-color: #f1f5f9;
    background-image: 
        radial-gradient(ellipse at 5% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 95% 15%, rgba(99, 102, 241, 0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(14, 165, 233, 0.06) 0%, transparent 55%);
    position: relative;
    padding: 2.5rem 0 3.75rem 0;
}

.gs-event-card-compact {
    background: linear-gradient(135deg, #091A2F 0%, #0F2540 50%, #081627 100%);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.35rem 1.25rem;
    box-shadow: 0 6px 20px rgba(9, 26, 47, 0.18);
    position: relative;
    overflow: hidden;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.gs-event-card-compact:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 10px 26px rgba(9, 26, 47, 0.25);
}
.gs-event-page-slide {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.gs-event-page-slide.is-active {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    opacity: 1;
    transform: translateY(0);
}
.gs-event-page-dot {
    width: 18px;
    height: 6px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.22s ease;
}
.gs-event-page-dot.is-active {
    width: 28px;
    background: #0284c7;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
}
.gs-event-page-dot:hover:not(.is-active) {
    background: rgba(15, 23, 42, 0.35);
}
.gs-event-glow-orb {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(16, 185, 129, 0.08) 60%, transparent 80%);
    filter: blur(40px);
    pointer-events: none;
}
.gs-event-card-swap {
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.gs-event-card-swap.is-out {
    opacity: 0;
    transform: translateY(-8px);
}
.gs-event-card-swap.is-in {
    opacity: 1;
    transform: translateY(0);
}
.gs-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.22s ease;
}
.gs-event-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}
.gs-event-dot.is-active {
    background: #38bdf8;
    width: 22px;
    border-radius: 9999px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

/* Modern High-End Glassmorphic CTA Button for Ongoing Events (Compact) */
.gs-event-btn-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.22rem 0.35rem 0.22rem 0.72rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    border: 1px solid rgba(56, 189, 248, 0.32);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.gs-event-btn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: left 0.6s ease;
}
.gs-event-btn-cta:hover::before {
    left: 100%;
}
.gs-event-btn-cta:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    border-color: rgba(56, 189, 248, 0.75);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
}
.gs-cta-arrow-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.gs-event-btn-cta:hover .gs-cta-arrow-circle {
    background: #ffffff;
    color: #0284c7;
    transform: translateX(2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Unified Fixture Ledger (Modern Non-Card Broadcast Schedule Composition) */
.gs-fixture-ledger {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.gs-fixture-ledger-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.6rem 1.15rem;
}
.gs-fixture-row {
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    transition: all 0.18s ease;
    position: relative;
}
.gs-fixture-row:last-child {
    border-bottom: none;
}
.gs-fixture-row:hover {
    background: #f8fafc;
}
.gs-fixture-row.is-live-row {
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.45) 0%, #ffffff 40%);
    border-left: 3.5px solid #ef4444;
}
.gs-fixture-row.is-live-row:hover {
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.75) 0%, #f8fafc 40%);
}
.gs-fixture-status {
    width: 68px;
    padding-right: 12px;
    border-right: 1px solid #f1f5f9;
}
.gs-badge-live-pulse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.12rem 0.48rem;
    border-radius: 99px;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    font-size: 0.62rem;
    font-weight: 700;
}
.gs-fixture-sport-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.08rem 0.42rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.64rem;
    font-weight: 600;
    font-family: var(--bs-font-monospace);
}
.gs-fixture-live-score {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 99px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.gs-fixture-vs-tag {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 99px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    font-size: 0.68rem;
    font-weight: 700;
}

/* ---------------------------------------------------------
 * Tournament Bracket Showcase: Dynamic Switcher & Cabor Filter
 * --------------------------------------------------------- */
.gs-bracket-sport-filter {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.gs-bracket-sport-filter:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-1px);
}
.gs-bracket-sport-filter.active {
    background: #091A2F !important;
    color: #ffffff !important;
    border-color: #091A2F !important;
    box-shadow: 0 3px 10px rgba(9, 26, 47, 0.25);
    transform: translateY(-1px);
}
.gs-bracket-sport-filter.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.gs-bracket-ctrl-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.gs-bracket-ctrl-btn:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}
.gs-bracket-tab-btn {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}
.gs-bracket-tab-btn:hover {
    border-color: #cbd5e1;
    color: #0f172a;
}
.gs-bracket-tab-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
}
.gs-bracket-dot {
    width: 18px;
    height: 6px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.22s ease;
}
.gs-bracket-dot.is-active {
    width: 28px;
    background: #0284c7;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
}
.gs-bracket-dot:hover:not(.is-active) {
    background: rgba(15, 23, 42, 0.35);
}

/* ============================================================
   MATCHES CATALOG & LIVE CENTER UI/UX PRO MAX UPGRADES
   ============================================================ */

/* 1. Global HTMX Match Detail Loading Overlay */
.gs-htmx-match-loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Reveal when HTMX request is in progress */
.htmx-request.gs-htmx-match-loader,
.htmx-request .gs-htmx-match-loader,
#globalHtmxMatchLoader.htmx-request,
body.htmx-request #globalHtmxMatchLoader {
    display: flex !important;
    opacity: 1 !important;
}

.gs-htmx-match-loader-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 26, 47, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gs-htmx-match-loader-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2.5rem;
    background: rgba(15, 37, 64, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 25px rgba(2, 132, 199, 0.2);
    animation: gsPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-loader-spinner-wrap {
    position: relative;
    width: 52px;
    height: 52px;
}

.gs-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(56, 189, 248, 0.15);
    border-top-color: #38BDF8;
    border-right-color: #0284C7;
    animation: gsSpin 0.75s linear infinite;
}

.gs-spinner-pulse {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, transparent 70%);
    animation: gsPulseGlow 1.2s ease-in-out infinite alternate;
}

@keyframes gsSpin {
    to { transform: rotate(360deg); }
}

@keyframes gsPulseGlow {
    from { transform: scale(0.85); opacity: 0.5; }
    to { transform: scale(1.15); opacity: 1; }
}

@keyframes gsPopIn {
    from { opacity: 0; transform: scale(0.95) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 2. Matches Catalog Grid HTMX Loading State */
.gs-grid-loader-overlay {
    display: none;
    padding: 2.5rem 1rem;
    text-align: center;
}

.htmx-request.gs-grid-loader-overlay,
.htmx-request#matchesGridLoader,
#matchesListGrid.htmx-request + #matchesGridLoader {
    display: block !important;
}

.htmx-request#matchesListGrid {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* 3. Modern Match Catalog Card (gs-match-card-pro) */
.gs-match-card-pro {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.02);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.gs-match-card-pro:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.03);
    border-color: #CBD5E1;
}

.gs-match-card-pro.is-live-card {
    border-color: rgba(197, 22, 69, 0.28) !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9FA 100%);
}

.gs-match-card-pro.is-live-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3.5px;
    background: linear-gradient(180deg, #C51645 0%, #E97817 100%);
    border-radius: 16px 0 0 16px;
    z-index: 2;
}

.gs-match-card-pro.is-live-card:hover {
    box-shadow: 0 14px 28px -6px rgba(197, 22, 69, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
    border-color: rgba(197, 22, 69, 0.45) !important;
}

/* 4. High-Contrast Team Monogram & Logo Box */
.gs-team-avatar-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(12, 34, 56, 0.08);
    position: relative;
    overflow: hidden;
    border: 2px solid #FFFFFF;
}

.gs-team-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: #FFFFFF;
}

.gs-team-avatar-initial {
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* 5. Match Score Numbers & Box */
.gs-score-badge-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.gs-score-badge-box.is-live-score {
    background: #FDE8EE;
    border-color: rgba(197, 22, 69, 0.22);
}

.gs-score-num {
    font-family: 'Barlow Condensed', 'Inter', -apple-system, sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.gs-score-num.text-danger {
    color: #C51645 !important;
}

.gs-live-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #C51645;
    box-shadow: 0 0 0 0 rgba(197, 22, 69, 0.6);
    animation: gsLiveDotPulse 1.6s infinite;
    display: inline-block;
}

.gs-live-pulse-white {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: gsLiveWhitePulse 1.6s infinite;
    display: inline-block;
}

@keyframes gsLiveWhitePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* 6. Filter Controls & Tab Pills */
.gs-filter-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    font-size: 0.78rem;
    font-weight: 600;
    min-height: 38px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.gs-filter-pill-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}

.gs-filter-pill-btn.active {
    background: #FFFFFF !important;
    color: #091A2F !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Sport Category Pill */
.gs-sport-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.05rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    min-height: 38px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #475569;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.gs-sport-nav-pill:hover {
    border-color: #B9D5F3;
    color: #0B6FD3;
    background: #F8FAFC;
    transform: translateY(-1px);
}

.gs-sport-nav-pill.active {
    background: #0B6FD3 !important;
    color: #FFFFFF !important;
    border-color: #0B6FD3 !important;
    box-shadow: 0 4px 14px rgba(11, 111, 211, 0.28);
}

.gs-sport-nav-pill .gs-sport-svg {
    stroke-width: 2;
    transition: transform 0.2s ease;
}

.gs-sport-nav-pill:hover .gs-sport-svg {
    transform: scale(1.1);
}

/* Smooth fade in for HTMX swapped content */
.gs-match-detail-fadein {
    animation: gsFadeIn 0.25s ease-out;
}

@keyframes gsFadeIn {
    from { opacity: 0.7; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LANDING BRAND ALIGNMENT — Match Control Signal
   ============================================================ */
.gs-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1100;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--gs-signal-blue-dark);
    font-weight: 700;
    transform: translateY(-160%);
}

.gs-skip-link:focus {
    transform: translateY(0);
}

.landing-page .gs-public-header-dark {
    background: var(--gs-control-navy);
    border-bottom-color: rgba(213, 222, 231, 0.2);
}

.landing-page .gs-nav-more-toggle {
    border: 0;
    background: transparent;
}

.landing-page .gs-nav-more .dropdown-menu {
    min-width: 190px;
    padding: 8px;
    border: 1px solid var(--gs-line);
    border-radius: 12px;
}

.landing-page .gs-nav-more .dropdown-item {
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--gs-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.landing-page .gs-nav-more .dropdown-item:hover,
.landing-page .gs-nav-more .dropdown-item:focus {
    background: var(--gs-mist);
    color: var(--gs-signal-blue-dark);
}

.gs-header-primary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--gs-signal-blue);
    border-radius: 12px;
    background: var(--gs-signal-blue);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
}

.gs-header-primary:hover {
    border-color: var(--gs-signal-blue-dark);
    background: var(--gs-signal-blue-dark);
    color: #FFFFFF;
}

.landing-page .gs-hero-section {
    position: relative;
    padding: 76px 0 80px 0;
    overflow: hidden;
    color: #FFFFFF;
    background-color: #071827; /* Fallback brand.navy.950 */
    background-image: 
        radial-gradient(110% 85% at 50% -15%, rgba(11, 111, 211, 0.32) 0%, rgba(11, 111, 211, 0.08) 45%, transparent 75%),
        radial-gradient(75% 65% at 85% 35%, rgba(21, 155, 184, 0.22) 0%, rgba(11, 111, 211, 0.05) 50%, transparent 80%),
        radial-gradient(60% 50% at 10% 85%, rgba(11, 111, 211, 0.14) 0%, transparent 70%),
        linear-gradient(180deg, #0A1E34 0%, #071827 50%, #05121F 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-page .gs-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 92%);
    pointer-events: none;
    z-index: 1;
}

.landing-page .gs-hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 197, 232, 0.5), rgba(37, 137, 232, 0.6), transparent);
    pointer-events: none;
    z-index: 2;
}

.landing-page .gs-hero-section .container {
    position: relative;
    z-index: 3;
}

.gs-hero-eyebrow-wrapper {
    margin-bottom: 18px;
}

.gs-hero-eyebrow-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(11, 111, 211, 0.16); /* brand.blue.600 soft */
    border: 1px solid rgba(124, 197, 232, 0.32); /* accent.sky */
    color: #7CC5E8;
    border-radius: 9999px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 12px rgba(11, 111, 211, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 575.98px) {
    .gs-hero-eyebrow-tag {
        font-size: 0.68rem;
        padding: 4px 10px;
        letter-spacing: 0.03em;
        line-height: 1.3;
    }
}

.gs-tag-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2589E8;
    box-shadow: 0 0 8px #2589E8;
    position: relative;
    display: inline-block;
}

.gs-tag-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: rgba(37, 137, 232, 0.5);
    animation: gsLiveRadarPulse 2s infinite ease-out;
}

.gs-hero-eyebrow,
.gs-section-eyebrow {
    margin: 0 0 12px;
    color: var(--gs-signal-blue-bright);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-page .gs-hero-headline {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 680px;
    margin-bottom: 20px;
    font-size: clamp(2.35rem, 4.4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.landing-page .gs-hero-sub {
    max-width: 600px;
    margin-bottom: 30px;
    color: #CBD5E1;
    font-size: 1.05rem;
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.gs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.gs-btn-hero-primary,
.gs-btn-hero-secondary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
}

.gs-btn-hero-primary {
    border: 1px solid var(--gs-signal-blue);
    background: var(--gs-signal-blue);
    color: #FFFFFF;
}

.gs-btn-hero-primary:hover {
    border-color: var(--gs-signal-blue-dark);
    background: var(--gs-signal-blue-dark);
    color: #FFFFFF;
}

.gs-btn-hero-secondary {
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: transparent;
    color: #FFFFFF;
}

.gs-btn-hero-secondary:hover {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.gs-btn-hero-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    color: #C7D7E7;
    font-size: 0.875rem;
    font-weight: 650;
}

.gs-btn-hero-link:hover {
    color: #FFFFFF;
}

.landing-page .gs-mockup-live-card {
    max-width: 100%;
    margin-bottom: 0;
    padding: 24px;
    border: 1px solid rgba(124, 197, 232, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 37, 64, 0.88) 0%, rgba(7, 24, 39, 0.96) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 32px rgba(11, 111, 211, 0.12);
    transition: all 0.25s ease;
}

.landing-page .gs-mockup-live-card::before,
.landing-page .gs-mockup-live-card::after {
    display: none;
}

.landing-page .gs-mockup-live-card:hover {
    border-color: rgba(124, 197, 232, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.52), 0 0 40px rgba(11, 111, 211, 0.18);
}

.landing-page .gs-mockup-team-avatar {
    border-color: #3B5872;
    background: var(--gs-panel-navy);
    backdrop-filter: none;
    box-shadow: none;
}

.landing-page .gs-mockup-score-nums,
.landing-page .gs-mockup-clock {
    font-family: 'Barlow Condensed', 'Arial Narrow', Inter, sans-serif;
    font-variant-numeric: tabular-nums;
}

.landing-page .gs-btn-lihat-live {
    min-height: 44px;
    border: 1px solid var(--gs-signal-blue);
    border-radius: 12px;
    background: var(--gs-signal-blue);
    box-shadow: none;
}

.landing-page .gs-btn-lihat-live:hover {
    border-color: var(--gs-signal-blue-dark);
    background: var(--gs-signal-blue-dark);
    box-shadow: none;
    transform: none;
}

.landing-page .gs-live-dot {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.landing-page .gs-live-dot::after {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #6F8396;
    content: '';
}

.landing-page .gs-live-dot.is-active::after {
    width: 20px;
    background: #FFFFFF;
}

.landing-page .gs-live-dot:focus-visible,
.landing-page .gs-btn-hero-primary:focus-visible,
.landing-page .gs-btn-hero-secondary:focus-visible,
.landing-page .gs-btn-hero-link:focus-visible,
.landing-page .gs-btn-lihat-live:focus-visible,
.landing-page .gs-mobile-toggle:focus-visible,
.landing-page .gs-header-primary:focus-visible {
    outline: 3px solid var(--gs-signal-blue-bright);
    outline-offset: 3px;
}

.gs-workflow-section {
    padding: 56px 0;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
    position: relative;
}

.gs-workflow-header-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

@media (min-width: 992px) {
    .gs-workflow-header-group {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 32px;
    }
}

.gs-workflow-header-left {
    max-width: 600px;
}

.gs-workflow-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: rgba(11, 111, 211, 0.08);
    border: 1px solid rgba(11, 111, 211, 0.2);
    color: #0B6FD3;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'Inter', monospace;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.gs-workflow-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #0B6FD3;
    box-shadow: 0 0 0 0 rgba(11, 111, 211, 0.6);
    animation: gsLiveDotPulse 1.8s infinite;
}

.gs-workflow-title {
    margin: 0;
    color: #0C2238;
    font-size: clamp(1.6rem, 2.5vw, 2.15rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.gs-workflow-desc {
    max-width: 440px;
    margin: 0;
    color: #526579;
    font-size: 0.88rem;
    line-height: 1.6;
}

.gs-workflow-grid-wrapper {
    position: relative;
}

/* Subtle connecting rail track on desktop */
.gs-workflow-rail-track {
    position: absolute;
    top: 40px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(11, 111, 211, 0.2) 0%, 
        rgba(21, 155, 184, 0.25) 35%, 
        rgba(41, 78, 120, 0.25) 70%, 
        rgba(12, 34, 56, 0.3) 100%
    );
    z-index: 0;
}

/* Modern Step Card */
.gs-workflow-step-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem 1.35rem 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.02);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease;
    overflow: hidden;
}

.gs-workflow-step-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.75;
    transition: opacity 0.2s ease, height 0.2s ease;
}

.gs-workflow-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
}

.gs-workflow-step-card:hover::before {
    opacity: 1;
    height: 4px;
}

/* Step specific colors */
.gs-step-card--setup::before { background: #0B6FD3; }
.gs-step-card--setup:hover { border-color: #93C5FD; }

.gs-step-card--ops::before { background: #159BB8; }
.gs-step-card--ops:hover { border-color: #A5F3FC; }

.gs-step-card--verify::before { background: #294E78; }
.gs-step-card--verify:hover { border-color: #BFDBFE; }

.gs-step-card--official::before { background: #0C2238; }
.gs-step-card--official:hover { border-color: #94A3B8; }

.gs-step-card--broadcast::before { background: #C51645; }
.gs-step-card--broadcast:hover { border-color: #FCA5A5; }

/* Card Top Row */
.gs-workflow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.gs-workflow-step-num {
    font-family: 'Barlow Condensed', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.gs-step-card--setup .gs-workflow-step-num { color: #0B6FD3; }
.gs-step-card--ops .gs-workflow-step-num { color: #159BB8; }
.gs-step-card--verify .gs-workflow-step-num { color: #294E78; }
.gs-step-card--official .gs-workflow-step-num { color: #0C2238; }
.gs-step-card--broadcast .gs-workflow-step-num { color: #C51645; }

.gs-workflow-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.gs-workflow-step-card:hover .gs-workflow-icon-badge {
    transform: scale(1.08);
}

.gs-badge--setup {
    background: #EFF6FF;
    color: #0B6FD3;
    border: 1px solid rgba(11, 111, 211, 0.15);
}

.gs-badge--ops {
    background: #E6F6F9;
    color: #159BB8;
    border: 1px solid rgba(21, 155, 184, 0.2);
}

.gs-badge--verify {
    background: #EAF0F6;
    color: #1D3B5C;
    border: 1px solid rgba(29, 59, 92, 0.18);
}

.gs-badge--official {
    background: #F1F5F9;
    color: #0C2238;
    border: 1px solid rgba(12, 34, 56, 0.2);
}

.gs-badge--broadcast {
    background: #FDE8EE;
    color: #C51645;
    border: 1px solid rgba(197, 22, 69, 0.2);
}

/* Card Body */
.gs-workflow-card-body {
    flex-grow: 1;
    margin-bottom: 1.1rem;
}

.gs-workflow-phase-tag {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #64748B;
    margin-bottom: 0.35rem;
}

.gs-workflow-step-title {
    font-size: 1.05rem;
    font-weight: 750;
    color: #0C2238;
    line-height: 1.25;
    margin: 0 0 0.45rem 0;
    letter-spacing: -0.015em;
}

.gs-workflow-step-text {
    font-size: 0.835rem;
    color: #526579;
    line-height: 1.55;
    margin: 0;
}

/* Card Footer with deliverable tag */
.gs-workflow-card-footer {
    padding-top: 0.85rem;
    border-top: 1px solid #F1F5F9;
    margin-top: auto;
}

.gs-workflow-feat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #334155;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.gs-workflow-feat-pill.is-live {
    background: #FFF5F7;
    border-color: rgba(197, 22, 69, 0.2);
    color: #981035;
}

.gs-workflow-feat-pill.is-official {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0C2238;
    font-weight: 700;
}

.landing-page .gs-sponsor-glass-wrapper {
    padding: 24px 0;
    background: var(--gs-mist);
}

.landing-page .gs-sponsor-aurora,
.landing-page .gs-sponsor-grid,
.landing-page .gs-sponsor-card-border,
.landing-page .gs-sponsor-progress-glow {
    display: none;
}

.landing-page .gs-sponsor-glass-card {
    padding: 20px;
    border: 1px solid var(--gs-line);
    border-radius: 16px;
    background: #FFFFFF;
    backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(7, 24, 39, 0.08);
}

.landing-page .gs-sponsor-glass-card::after {
    display: none;
}

.landing-page .gs-sponsor-glass-card:hover {
    border-color: var(--gs-line);
    transform: none;
    box-shadow: 0 2px 8px rgba(7, 24, 39, 0.08);
}

.landing-page .gs-sponsor-glass-card .text-white {
    color: var(--gs-ink) !important;
}

.landing-page .gs-sponsor-glass-card .text-white-50 {
    color: var(--gs-slate) !important;
}

.landing-page .gs-badge-offline-pill {
    border: 1px solid var(--gs-line);
    background: var(--gs-ice);
    color: var(--gs-ink);
    box-shadow: none;
}

.landing-page .gs-badge-dot {
    background: var(--gs-signal-blue);
    box-shadow: none;
    animation: none;
}

.landing-page .gs-badge-live {
    border-color: #A9D8E3;
    background: #EAF7FA;
    color: #09677C;
}

.landing-page .gs-media-ring {
    border-color: var(--gs-line) !important;
    box-shadow: none;
}

.landing-page .gs-verified-badge {
    border: 0;
    background: var(--gs-signal-blue);
    box-shadow: none;
}

.landing-page .gs-btn-sponsor-cta {
    min-height: 44px;
    border: 1px solid var(--gs-signal-blue);
    border-radius: 12px;
    background: var(--gs-signal-blue);
    box-shadow: none;
}

.landing-page .gs-btn-sponsor-cta::before {
    display: none;
}

.landing-page .gs-btn-sponsor-cta:hover {
    border-color: var(--gs-signal-blue-dark);
    background: var(--gs-signal-blue-dark);
    box-shadow: none;
    filter: none;
    transform: none;
}

.landing-page .gs-sponsor-dot {
    border-color: var(--gs-line);
    background: #A8B6C4;
}

.landing-page .gs-sponsor-dot.is-active {
    background: var(--gs-signal-blue);
    border-color: var(--gs-signal-blue);
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .landing-page .gs-public-header-dark .container,
    .landing-page .gs-hero-section .container,
    .landing-page .gs-hero-section .row,
    .landing-page .gs-hero-section [class*='col-'],
    .landing-page main {
        min-width: 0;
        max-width: 100%;
    }

    .landing-page .gs-mobile-toggle {
        display: inline-flex;
        flex: 0 0 44px;
    }

    .gs-workflow-heading {
        display: block;
    }

    .gs-workflow-heading .gs-section-eyebrow {
        margin-bottom: 8px;
    }

    .gs-workflow-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.landing-page {
        overflow-x: hidden;
    }

    .landing-page .gs-public-header-dark .container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .landing-page .gs-public-header-dark .fs-5 {
        font-size: 1.05rem !important;
    }

    .landing-page .gs-hero-section {
        padding: 40px 0;
    }

    .landing-page .gs-hero-headline {
        font-size: 1.8rem;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .landing-page .gs-hero-sub {
        font-size: 1rem;
        line-height: 1.55;
    }

    .gs-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .gs-btn-hero-primary,
    .gs-btn-hero-secondary {
        width: 100%;
    }

    .gs-btn-hero-link {
        justify-content: center;
    }

    .landing-page .gs-mockup-live-card {
        width: 100%;
        padding: 20px 16px;
    }

    .landing-page .gs-mockup-matchup {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 6px;
    }

    .landing-page .gs-mockup-matchup > * {
        min-width: 0;
    }

    .landing-page .gs-mockup-team-avatar {
        width: 44px;
        height: 44px;
    }

    .landing-page .gs-mockup-team-name {
        max-width: 100% !important;
        font-size: 0.75rem;
    }

    .landing-page .gs-mockup-score-nums {
        font-size: 1.75rem;
    }

    .gs-workflow-section {
        padding: 32px 0;
    }

    .gs-workflow-list {
        grid-template-columns: 1fr;
    }

    .landing-page .gs-sponsor-glass-card {
        padding: 16px;
    }

    .landing-page .gs-sponsor-media-box {
        width: 88px;
        max-width: 28vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   HORIZONTAL MATCHDAY SWITCHER STRIP (Public Match Detail)
   ============================================================ */
.gs-matchday-strip-wrapper {
    position: relative;
}

.gs-matchday-strip-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.gs-matchday-strip-scroll::-webkit-scrollbar {
    height: 5px;
}

.gs-matchday-strip-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.gs-matchday-strip-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
}

.gs-matchday-strip-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.4);
}

.gs-strip-view-all {
    transition: color 0.18s ease, transform 0.18s ease;
}

.gs-strip-view-all:hover {
    color: #38BDF8 !important;
    transform: translateX(2px);
}

.gs-strip-card {
    min-width: 260px;
    max-width: 275px;
    padding: 11px 13px 10px;
    border-radius: 12px;
    background: rgba(12, 34, 56, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-strip-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35) !important;
    background: rgba(15, 42, 70, 0.88) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.gs-strip-card.is-active-strip {
    background: linear-gradient(135deg, rgba(11, 111, 211, 0.28) 0%, rgba(12, 34, 56, 0.96) 100%) !important;
    border: 1.5px solid #2589E8 !important;
    box-shadow: 0 4px 18px rgba(11, 111, 211, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.gs-strip-sport-tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gs-strip-sport-tag svg {
    color: #7CC5E8;
    flex-shrink: 0;
}

.gs-strip-badge-selected {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.06em;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 9999px;
    padding: 1px 6px;
    line-height: 1.3;
    text-transform: uppercase;
}

.gs-strip-badge-live {
    background: #C51645 !important;
    color: #FFFFFF !important;
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    letter-spacing: 0.04em !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(197, 22, 69, 0.35);
}

.gs-strip-badge-ft {
    background: rgba(51, 65, 85, 0.65) !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    letter-spacing: 0.04em !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
}

.gs-strip-badge-sched {
    background: rgba(15, 23, 42, 0.65) !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.60rem !important;
    font-weight: 600 !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    padding: 2px 6px !important;
    border-radius: 9999px !important;
}

.gs-strip-team-name {
    font-size: 0.81rem;
    font-weight: 500;
    color: #CBD5E1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 185px;
    line-height: 1.35;
    transition: color 0.18s ease;
}

.gs-strip-team-name.is-current-team {
    color: #FFFFFF;
    font-weight: 600;
}

.gs-strip-score-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.10rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #F8FAFC;
    min-width: 26px;
    text-align: right;
    line-height: 1;
}

.gs-strip-score-num.is-live {
    color: #FF5B87 !important;
    text-shadow: 0 0 8px rgba(255, 91, 135, 0.35);
}

/* ============================================================
   PUBLIC FOOTER & ADVERTISING STRIP (Flush Bottom Layout)
   ============================================================ */
.gs-public-footer {
    position: relative;
    width: 100%;
    margin-top: auto;
    background-color: #FFFFFF;
    padding-bottom: 0 !important;
}

.gs-public-ad-strip {
    position: relative;
    width: 100%;
    margin-bottom: 0 !important;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}

@media (max-width: 991.98px) {
    /* Accommodate fixed-bottom mobile navigation bar without white gap */
    .gs-public-ad-strip {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================================
   ELEGANT MODERN BACK TO TOP (UI/UX Pro Max)
   ============================================================ */
.gs-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12, 34, 56, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38BDF8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1030;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    outline: none;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.9);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s,
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
}

.gs-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.gs-back-to-top:hover {
    background: #0B6FD3;
    border-color: #7CC5E8;
    color: #FFFFFF;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 22px rgba(11, 111, 211, 0.45), 
                0 0 12px rgba(56, 189, 248, 0.35);
}

.gs-back-to-top:active {
    transform: translateY(-1px) scale(0.96);
    box-shadow: 0 3px 10px rgba(11, 111, 211, 0.35);
}

.gs-back-to-top:focus-visible {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5), 
                0 4px 16px rgba(0, 0, 0, 0.3);
}

.gs-back-to-top-icon {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-back-to-top:hover .gs-back-to-top-icon {
    transform: translateY(-1.5px);
}

/* Responsive clearance for mobile navigation dock */
@media (max-width: 991.98px) {
    .gs-back-to-top {
        bottom: calc(68px + env(safe-area-inset-bottom, 12px));
        right: 18px;
        width: 36px;
        height: 36px;
    }
}