/* Firefox-specific font size normalization */
* {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* ================================================================
   FINAL OVERRIDE: keep Explore info panel same height in EN/HE
   ================================================================ */
#pageInfoPanel .page-info-panel {
    min-height: 92px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#pageInfoPanel .page-info-description {
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.45 !important;
    min-height: calc(1.45em * 2) !important;
    max-height: calc(1.45em * 2) !important;
}

/* ================================================================
   FINAL LAYOUT: align title block near language switcher and keep
   Upcoming CTA centered inside header frame (EN/HE stable)
   ================================================================ */
.header .header-content {
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 560px) !important;
    padding: 0 12px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 4px !important;
    z-index: 8 !important;
}

.header .header-content > * {
    pointer-events: auto;
}

/* My Upcoming Matches bar — absolutely positioned 4px above top-quick-nav */
#headerUpcomingBtn.header-upcoming-btn {
    display: none; /* toggled by JS state */
    position: absolute !important;
    bottom: 80px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.46) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    color: #f8fafc !important;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.55), 0 0 4px rgba(250, 204, 21, 0.3) !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(2, 6, 23, 0.32) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    direction: auto !important;
    unicode-bidi: plaintext !important;
    pointer-events: auto !important;
    z-index: 12 !important;
}
#headerUpcomingBtn.header-upcoming-btn:hover {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.45) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
    border-color: rgba(129, 140, 248, 0.6) !important;
}
#headerUpcomingBtn.header-upcoming-btn:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9) !important;
    outline-offset: -2px !important;
}
@media (max-width: 768px) {
    #headerUpcomingBtn.header-upcoming-btn {
        width: calc(100% - 20px) !important;
    }
}

@media (max-width: 767px) {
    .header .header-content {
        top: 12px !important;
        width: min(94vw, 520px) !important;
        padding: 0 12px 18px !important;
    }
}

/* ================================================================
   FINAL OVERRIDE: keep header Upcoming subtitle visible everywhere
   ================================================================ */
.header .header-content .sub-header,
.header .sub-header,
p.sub-header[data-i18n="nav.upcoming"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 6px !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.arg-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.arg-subtab {
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #334155;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.arg-subtab.active {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: inset 0 -2px 0 #3b82f6;
    color: #1d4ed8;
}

.arg-group-title {
    margin: 2px 0 8px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
}

@media (max-width: 768px) {
    .header .header-content .sub-header,
    .header .sub-header,
    p.sub-header[data-i18n="nav.upcoming"] {
        display: block !important;
        font-size: 0.9rem !important;
    }
}

/* Clickable Upcoming CTA under the main title */
.header .header-content .header-upcoming-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    color: #f8fafc !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(2, 6, 23, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.header .header-content .header-upcoming-btn:hover,
.header .header-content .header-upcoming-btn:focus-visible {
    border-color: rgba(250, 204, 21, 0.65) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(2, 6, 23, 0.38);
    transform: translateY(-1px);
    outline: none;
}

.header .header-content .header-upcoming-btn:active {
    transform: translateY(0);
}

/* Mobile auth CTA readability fix (keep labels clear, prevent overlap) */
@media (max-width: 768px) {
    .header .top-quick-nav .auth-controls,
    .header .top-quick-nav .auth-container {
        height: auto !important;
        min-height: 36px !important;
    }

    .header-top-date {
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        z-index: 82 !important;
        min-height: 28px !important;
        padding: 4px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        border: 1px solid rgba(148, 163, 184, 0.42) !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(2, 6, 23, 0.92) 100%) !important;
        color: #e2e8f0 !important;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        line-height: 1 !important;
        text-shadow: 0 1px 0 rgba(2, 6, 23, 0.9) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 10px rgba(2, 6, 23, 0.28) !important;
        pointer-events: none !important;
    }

    @media (max-width: 768px) {
        .header-top-date {
            top: 8px !important;
            right: 10px !important;
            min-height: 24px !important;
            padding: 3px 8px !important;
            font-size: 0.72rem !important;
        }
    }

    html[dir="rtl"] .header-top-date {
        right: auto !important;
        left: 12px !important;
    }

    @media (max-width: 768px) {
        html[dir="rtl"] .header-top-date {
            left: 10px !important;
        }
    }

    .header .top-quick-nav .auth-container {
        gap: 6px !important;
    }

    .header .top-quick-nav .auth-btn,
    .header .top-quick-nav .auth-btn-login,
    .header .top-quick-nav .auth-btn-logout {
        width: auto !important;
        min-width: 86px !important;
        height: 36px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .header .top-quick-nav .auth-btn .auth-icon,
    .header .top-quick-nav .auth-btn-login .auth-icon,
    .header .top-quick-nav .auth-btn-logout .auth-icon {
        font-size: 0.86rem !important;
        margin-right: 4px !important;
    }

    .header .top-quick-nav .auth-btn .auth-text-stack,
    .header .top-quick-nav .auth-btn-login .auth-text-stack,
    .header .top-quick-nav .auth-btn-logout .auth-text-stack {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        line-height: 1 !important;
    }

    .header .top-quick-nav .auth-btn .auth-text,
    .header .top-quick-nav .auth-btn-login .auth-text,
    .header .top-quick-nav .auth-btn-logout .auth-text {
        display: inline-flex !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .header .top-quick-nav .auth-btn .auth-subtext,
    .header .top-quick-nav .auth-btn-login .auth-subtext,
    .header .top-quick-nav .auth-btn-logout .auth-subtext {
        display: none !important;
    }

    /* Dedicated centered auth CTA between header title and quick nav */
    .mobile-auth-bridge {
        position: absolute;
        left: 50%;
        bottom: 58px;
        transform: translateX(-50%);
        z-index: 8;
        display: none;
        width: calc(100% - 28px);
        justify-content: center;
        pointer-events: none;
    }

    .mobile-auth-bridge.active {
        display: flex;
    }

    .mobile-auth-bridge-btn {
        pointer-events: auto;
        border: 1px solid rgba(250, 204, 21, 0.65);
        background: linear-gradient(180deg, rgba(37, 99, 235, 0.64) 0%, rgba(15, 23, 42, 0.96) 100%);
        color: #f8fafc;
        border-radius: 999px;
        min-height: 34px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-weight: 800;
        font-size: 0.76rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 14px rgba(2, 6, 23, 0.5);
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-auth-bridge-main {
        color: #fde68a;
        letter-spacing: 0.02em;
    }

    .mobile-auth-bridge-sub {
        color: #e2e8f0;
        opacity: 0.92;
        font-weight: 700;
    }

    /* Hide old auth controls in nav on mobile; bridge CTA replaces them */
    .header .top-quick-nav .auth-controls {
        display: none !important;
    }
}

html {
    font-size: 16px;
    overflow-x: hidden;
}

/* Global auth ribbon above header (single clear auth location) */
.global-auth-ribbon {
    display: none;
}

.global-auth-ribbon.active {
    display: flex;
    justify-content: center;
    margin: 6px 0 8px 0;
    padding: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.global-auth-ribbon-inner {
    width: min(100%, 520px);
    display: flex;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
}

.global-auth-ribbon-inner--single {
    width: min(100%, 260px);
}

.global-auth-ribbon-btn {
    flex: 1 1 0;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(2, 6, 23, 0.96) 100%);
    color: #f8fafc;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(2, 6, 23, 0.36);
    line-height: 1.08;
}

.global-auth-ribbon-btn-signup {
    border-color: rgba(250, 204, 21, 0.62);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.66) 0%, rgba(15, 23, 42, 0.96) 100%);
}

.global-auth-ribbon-btn-login {
    border-color: rgba(148, 163, 184, 0.58);
}

.global-auth-ribbon-btn-logout {
    border-color: rgba(148, 163, 184, 0.58);
}

.global-auth-ribbon-main {
    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.global-auth-ribbon-sub {
    font-size: 0.63rem;
    opacity: 0.92;
    font-weight: 700;
    white-space: nowrap;
}

.global-auth-ribbon-status {
    width: calc(100vw - 16px);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 0;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-left: none;
    border-right: none;
    background: linear-gradient(135deg, rgba(10, 18, 36, 0.95) 0%, rgba(15, 23, 42, 0.98) 46%, rgba(30, 64, 175, 0.32) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 20px rgba(2, 6, 23, 0.42);
}

.global-auth-ribbon-status-main {
    display: none !important;
}

.global-auth-ribbon-status-title {
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-auth-ribbon-status-sub {
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.92;
}

.global-auth-ribbon-highlight {
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    direction: auto;
    unicode-bidi: plaintext;
    text-align: center;
}

html[dir="rtl"] .global-auth-ribbon-status {
    direction: rtl;
}

html[dir="rtl"] .global-auth-ribbon-highlight {
    direction: rtl;
    unicode-bidi: plaintext;
}

.auth-ribbon-inline-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 6px;
    vertical-align: middle;
}

.auth-ribbon-inline-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: inline-block;
}

.global-auth-ribbon-status-metrics {
    display: none !important;
}

.global-auth-ribbon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    padding: 4px 10px;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.58);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.global-auth-ribbon-pill--ok {
    border-color: rgba(34, 197, 94, 0.58);
    color: #86efac;
    background: rgba(20, 83, 45, 0.35);
}

/* Header nav auth: hidden by default, shown only for logged-in state */
.header .top-quick-nav .auth-controls {
    display: none !important;
}

.header .top-quick-nav .auth-controls.active {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.header .top-quick-nav .auth-controls.active .auth-container {
    display: flex !important;
    align-items: center !important;
}

.header .top-quick-nav .auth-btn-logout-nav {
    min-height: 32px !important;
    height: 32px !important;
    min-width: 78px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.48) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(2, 6, 23, 0.95) 100%) !important;
    color: #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 12px rgba(2, 6, 23, 0.42) !important;
}

.header .top-quick-nav .auth-btn-logout-nav .auth-icon {
    font-size: 0.8rem !important;
    line-height: 1 !important;
}

.header .top-quick-nav .auth-btn-logout-nav .auth-text {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .global-auth-ribbon-inner {
        width: min(100%, 420px);
    }

    .global-auth-ribbon-status {
        width: calc(100vw - 16px);
        height: 34px;
        padding: 0 8px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        justify-content: center;
        text-align: center;
    }

    .global-auth-ribbon-status-main {
        display: none !important;
    }

    .global-auth-ribbon-status-title {
        font-size: 0.82rem;
        max-width: 100%;
    }

    .global-auth-ribbon-status-sub {
        font-size: 0.68rem;
    }

    .global-auth-ribbon-highlight {
        font-size: 0.9rem;
        text-align: center;
        direction: auto;
        unicode-bidi: plaintext;
    }

    .auth-ribbon-inline-icon {
        width: 14px;
        height: 14px;
    }

    .global-auth-ribbon-status-metrics {
        justify-content: center;
    }

    .global-auth-ribbon-pill {
        font-size: 0.68rem;
        padding: 4px 9px;
    }

    /* Remove duplicated auth entry points in header on mobile, but keep logged-in logout visible */
    .mobile-auth-bridge,
    .header .top-quick-nav .auth-controls {
        display: none !important;
    }

    .header .top-quick-nav .auth-controls.active {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    .header .top-quick-nav .auth-btn-logout-nav {
        min-width: 82px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
    }

    .header .top-quick-nav .auth-btn-logout-nav .auth-text {
        display: inline-flex !important;
        font-size: 0.68rem !important;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Vacation Card Style */
.vacation-card {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    cursor: default !important;
    box-shadow: none !important;
    pointer-events: none;
    position: relative;
}

.vacation-card .card-content {
    filter: grayscale(100%);
    opacity: 0.6;
}
.vacation-card .vacation-badge {
    padding: 12px 16px 10px;
    opacity: 1 !important;
}

/* ========== Custom Tooltip Styles ========== */
/* Tooltip container */
.has-tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
}

.has-tooltip .custom-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    width: auto;
    min-width: 0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

.has-tooltip .custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}

.has-tooltip:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}
.countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #166534;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid #bbf7d0;
}

.countdown-badge.soon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-color: #fcd34d;
}

/* League Status Row */
.league-status-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.league-status-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.next-match-countdown {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 0.7rem;
    white-space: normal;
    overflow: visible;
}

.next-match-countdown:empty {
    display: none;
}

.next-match-countdown .card-countdown-badge {
    margin-top: 0;
}

.card-countdown-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-top: 8px;
    padding: 6px 10px;
    min-width: 104px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08);
}

.card-countdown-badge.is-live {
    border-color: #86efac;
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.12);
}

.card-countdown-badge.is-soon {
    border-color: #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.14);
}

.card-countdown-badge.is-upcoming {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #f5f7ff 0%, #eef2ff 100%);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.1);
}

.card-countdown-kicker {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
}

.card-countdown-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    text-align: center;
}

/* Keep mixed EN/HE labels stable inside result/countdown chips. */
html[dir="rtl"] .card-countdown-badge,
html[dir="rtl"] .finished-card-winner-frame {
    direction: ltr;
    unicode-bidi: isolate;
}

.card-countdown-badge.is-live .card-countdown-value {
    color: #15803d;
}

.card-countdown-badge.is-soon .card-countdown-value {
    color: #b45309;
}

.card-countdown-badge.is-upcoming .card-countdown-value {
    color: #4338ca;
}

/* Card status badge component (replaces emoji for Live/Complete) */
.card-status-slot {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 11;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.status-badge-live {
    color: #7f1d1d;
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.92) 0%, rgba(254, 202, 202, 0.88) 100%);
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15) inset, 0 4px 10px rgba(239, 68, 68, 0.16);
}

.status-badge-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

.status-badge-complete {
    color: #065f46;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.9) 100%);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.12) inset, 0 4px 10px rgba(5, 150, 105, 0.14);
}

.status-badge-complete::before {
    content: '✓';
    font-size: 0.67rem;
    line-height: 1;
    font-weight: 900;
}

.status-badge-locked {
    min-width: 0;
    justify-content: center;
    padding: 0 4px;
    min-height: 16px;
    gap: 0;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 0.56rem;
    letter-spacing: 0.01em;
    line-height: 1;
}

.status-indicator-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.8);
}

.status-indicator-lock {
    font-size: 0.95rem;
    line-height: 1;
}

.status-indicator-active-dot {
    font-size: 0.95rem;
    line-height: 1;
    color: #16a34a;
    text-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
}

.status-indicator-active-dot--yellow {
    font-size: 0.95rem;
    line-height: 1;
    color: #ca8a04;
    text-shadow: 0 0 6px rgba(234, 179, 8, 0.35);
}

.status-indicator-upcoming {
    font-size: 0.9rem;
    line-height: 1;
    color: #60a5fa;
    text-shadow: 0 0 6px rgba(96, 165, 250, 0.35);
}

.countdown-badge .countdown-icon {
    font-size: 0.8rem;
}

/* Team Table Star Button */
.fav-star-btn {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    font-size: 1.55rem;
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1;
    transition: transform 0.2s, color 0.2s, box-shadow 0.2s, background-color 0.2s;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.fav-star-btn:hover {
    transform: scale(1.12);
    color: #fbbf24;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.34);
}

.fav-star-btn.favorited {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.28);
}

/* Subscribed but not relevant to current context (dimmed star) */
.fav-star-btn.subscribed-other {
    color: #94a3b8;
    opacity: 0.7;
}

.fav-star-btn.subscribed-other:hover {
    color: #fbbf24;
    opacity: 1;
}

/* Fixture View Star Buttons */
.fav-star {
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: transform 0.2s, color 0.2s, box-shadow 0.2s, background-color 0.2s;
    color: #cbd5e1;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.14);
}

.fav-star:hover {
    transform: scale(1.1);
    color: #fbbf24;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(234, 179, 8, 0.3);
}

.fav-star.active {
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
}

/* Subscribed but not relevant to current competition context */
.fav-star.subscribed-other {
    color: #94a3b8;
    opacity: 0.7;
}

.fav-star.subscribed-other:hover {
    color: #fbbf24;
    opacity: 1;
}

:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --background-color: #f8fafc;
    --text-color: #1e293b;
    --border-color: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

* {
    box-sizing: border-box;
}

body {
    /* min-width: 900px; Removed for mobile responsiveness */
    font-family: Monospace; /* Match IBM project */
    background-color: hsl(0, 0%, 100%);
    margin: 0;
    color: #333;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: hsl(0, 0%, 100%);
}

.container {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px #022a8e; /* Match IBM project shadow */
}

/* Header */
.header {
    text-align: center;
    position: relative;
    padding: 0;
    height: 300px;
    background: linear-gradient(140deg, #0b1220 0%, #111a2b 46%, #1a2740 100%);
    border: 1px solid rgba(148, 163, 184, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -24px 46px rgba(2, 6, 23, 0.58), 0 22px 44px -28px rgba(2, 6, 23, 0.85), 0 28px 50px -34px rgba(15, 23, 42, 0.92);
    overflow: hidden;
}

.header {
    margin-bottom: 30px;
    color: white;
    border-radius: 0 0 8px 8px;
}

.header::before,
.header::after {
    content: '';
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.header::before {
    top: -120px;
    left: -100px;
    width: 360px;
    height: 280px;
    background: radial-gradient(circle at 35% 40%, rgba(148, 163, 184, 0.24) 0%, rgba(71, 85, 105, 0.16) 40%, rgba(15, 23, 42, 0) 75%);
}

.header::after {
    left: 0;
    right: 0;
    bottom: -24px;
    height: 82px;
    background: linear-gradient(to bottom, rgba(11, 18, 32, 0) 0%, rgba(30, 41, 59, 0.5) 44%, rgba(15, 23, 42, 0.9) 100%);
    filter: blur(12px);
    opacity: 0.96;
    z-index: 2;
}

.header-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    bottom: auto;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    z-index: 3;
}

.header-content::before {
    display: none;
}

.header-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.header-graphic::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.12) 40%, rgba(2, 6, 23, 0.4) 100%);
    z-index: 2;
}

.header-goalkeeper {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    filter: blur(1.3px) saturate(0.92) brightness(0.9) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    opacity: 0.4;
}

@media (min-width: 769px) {
    .header-graphic {
        display: none !important;
    }

    .header-content {
        top: 78px;
        padding: 0 180px;
    }

    .header .desktop-nav {
        top: 12px !important;
        left: 50%;
        right: auto !important;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100% - 140px);
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px !important;
        z-index: 60;
    }

    .header .desktop-nav button {
        padding: 8px 12px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    .header .desktop-nav button span:first-child {
        font-size: 16px !important;
    }

    .header .desktop-nav button span:last-child {
        font-size: 0.82rem !important;
    }

    .auth-controls {
        bottom: 10px;
        left: max(16px, calc((100vw - 1200px) / 2 + 16px));
        width: auto;
        max-width: none;
        z-index: 60;
    }

    .auth-container {
        width: auto;
        max-width: max-content;
        align-items: flex-start;
    }
}

@media (min-width: 769px) and (max-width: 1366px) {
    .header {
        height: 196px;
    }

    .header-content {
        top: 74px;
        padding: 0 130px;
    }

    .header .desktop-nav {
        left: 50%;
        right: auto !important;
        transform: translateX(-50%);
        width: calc(100% - 80px);
        gap: 5px !important;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header .desktop-nav button {
        padding: 7px 9px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    .header .desktop-nav button span:first-child {
        font-size: 16px !important;
    }

    .header .desktop-nav button span:last-child {
        font-size: 0.78rem !important;
    }
}

@media (min-width: 1181px) {
    .header-content {
        padding: 0 220px;
    }
}

.header h1 {
    font-size: 1.5rem; /* Reduced from 2.5rem */
    color: white; /* Force white text */
    margin: 0 0 8px 0;
    letter-spacing: 0.3px;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.header p {
    color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    font-size: 1.1rem;
    margin: 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Auth Controls */
.auth-controls {
    position: absolute;
    top: auto;
    bottom: 12px;
    left: 16px;
    right: auto;
    transform: none;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 50;
}

/* Auth Buttons - Fixed Sizing */
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 132px;
    padding: 0 18px;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent on blue header */
    color: white;
    border-radius: 22px;
    cursor: pointer;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: Monospace;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Auth Container with separator */
.auth-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
}

.auth-separator {
    display: none;
}

.auth-btn-login,
.auth-btn-logout {
    height: 44px !important;
    min-width: 132px !important;
    padding: 0 18px !important;
    font-size: 0.95rem !important;
    gap: 6px;
}

.auth-btn-logout {
    background: rgba(239, 68, 68, 0.4) !important;
}

.auth-icon {
  font-size: 1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.auth-icon::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fbbf24; /* Yellow for login */
  border-radius: 50%;
  z-index: -1;
}

/* Green circle for logout */
.auth-btn-logout .auth-icon::before {
  background: #4ade80; /* Green */
}

/* Search Section */
.search-section {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); /* Match IBM item shadow */
    margin-bottom: 30px;
}

.navigation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    min-height: 40px;
    
    /* Sticky Positioning */
    position: sticky;
    top: 0;
    z-index: 900; /* High z-index to stay on top */
    background-color: rgba(255, 255, 255, 0.98);
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    will-change: transform;
    transform: translateZ(0);
}

/* Inputs */
input[type="text"],
input[type="number"], 
select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    font-family: inherit;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

/* Cards (Grid Items) - Matching .item from IBM */
.grid-card {
    justify-content: left;
    margin-bottom: 0;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    font-family: Monospace;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    min-height: 170px;
}

.grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.grid-card img {
    height: 60px;
    width: 60px;
    object-fit: contain;
    pointer-events: none;
}

.continent-grid-card {
    min-height: 210px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 18px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.30);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.continent-card-name-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 20px);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.38);
    color: #e2e8f0;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

html[dir="rtl"] .continent-card-name-badge {
    direction: rtl;
}

.continent-grid-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.95) 0%, rgba(250, 204, 21, 0.26) 52%, rgba(203, 213, 225, 0.9) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}



.continent-card-icon-wrap {
    width: 120px;
    height: 94px;
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.continent-card-icon {
    width: auto !important;
    height: auto !important;
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    object-position: center;
    display: block;
}

.continent-card-icon--wide {
    max-width: 112px;
    max-height: 72px;
}

.continent-card-icon[data-region-code='NA'] {
    max-width: 104px;
    max-height: 68px;
}

.continent-card-icon[data-region-code='OC'] {
    max-width: 96px;
    max-height: 72px;
}

.continent-card-fallback {
    font-size: 4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.continent-card-icon-source {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
    pointer-events: none;
}

html[dir="rtl"] .continent-card-icon-source {
    right: auto;
    left: 0;
}

.continent-card-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    gap: 8px;
}

.continent-card-title {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.2;
    color: #e2e8f0;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0;
    max-width: 100%;
    min-height: 2.5em;
    display: block;
    justify-content: center;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.55);
}

.continent-card-subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.continent-card-conf-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 20px);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.70);
    color: #1e3a8a;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(148, 163, 184, 0.45);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.page-info-panel-wrap {
    grid-column: 1 / -1;
    width: 100%;
}

.page-info-panel {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.page-info-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.page-info-description {
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #475569;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
    min-height: calc(1.45em * 2);
}

.continent-card-description {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #475569;
    max-width: 24ch;
}

.grid-card span,
.grid-card .league-name,
.grid-card .team-name-text {
    pointer-events: none;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
    max-height: none;
    overflow-y: visible;
    padding: 10px;
}

.grid-card[class*="card-"]:not(.root-explorer-card),
.grid-card.league-card,
.grid-card.league-active,
.grid-card.finished-card,
.grid-card.locked-card,
.grid-card.active-champion-card {
    min-height: 220px;
}

/* Home explorer grid: 2 columns on mobile, grow on larger screens */
.root-explorer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 480px) {
    .root-explorer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .root-explorer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 10px !important;
    }

    .root-explorer-grid .root-explorer-card {
        min-height: 168px !important;
        max-height: 168px !important;
        padding: 14px 10px !important;
    }
}

@media (max-width: 768px) {
    .root-explorer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 12px !important;
    }

    .root-explorer-grid .root-explorer-card {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        padding: 14px 10px !important;
        border-radius: 18px !important;
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.68) 0%, rgba(240, 248, 255, 0.55) 100%) !important;
        border: 1px solid rgba(147, 197, 253, 0.30) !important;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.09), 0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
    }

    .root-explorer-grid .root-explorer-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc(50% - 7px);
        justify-self: center;
    }
}

/* i18n: language switcher + RTL support */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lang-switcher {
    display: flex;
    align-items: center;
}

.lang-switcher-select {
    min-width: 68px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.45);
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0 10px;
    cursor: pointer;
}

.lang-switcher-select:focus {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 1px;
}

/* Always set base direction - ensures reset when switching languages */
html {
    direction: ltr;
}

html body {
    direction: inherit;
}

html[dir="rtl"] body {
    direction: rtl;
    font-family: "Assistant", "Rubik", "Heebo", "Segoe UI", Arial, sans-serif;
}

html[dir="rtl"] .header .header-content,
html[dir="rtl"] .sub-header,
html[dir="rtl"] .explorer-section,
html[dir="rtl"] .smart-search-content,
html[dir="rtl"] .modal-content {
    text-align: right;

}

/* Dedicated team match screen: same card language on all widths */
.team-match-showcase {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.team-match-showcase__hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "identity identity toolbar"
        "headernav headernav headernav";
    gap: 16px;
    align-items: center;
    padding: 18px 16px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-match-showcase__back,
.team-match-showcase__primary,
.team-match-card__action-btn {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    background: rgba(51, 65, 85, 0.78);
    color: #f8fafc;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-match-showcase__back {
    padding: 10px 14px;
    white-space: nowrap;
}

.team-match-showcase__back:hover,
.team-match-showcase__primary:hover,
.team-match-card__action-btn:hover {
    transform: translateY(-1px);
    background: rgba(71, 85, 105, 0.88);
    border-color: rgba(191, 219, 254, 0.45);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
}

.team-match-showcase__identity {
    grid-area: identity;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.team-match-showcase__logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 14px;
    padding: 8px;
    background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.98) 0%, rgba(226, 232, 240, 0.94) 45%, rgba(148, 163, 184, 0.78) 100%);
    border: 1px solid rgba(191, 219, 254, 0.42);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.24), 0 10px 22px rgba(2, 6, 23, 0.4), 0 0 24px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-match-showcase__hero:hover .team-match-showcase__logo {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.35), 0 12px 26px rgba(2, 6, 23, 0.45), 0 0 28px rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.team-match-showcase__copy h2 {
    margin: 0 0 4px;
    color: #f8fafc;
    font-size: 1.25rem;
    line-height: 1.2;
}

.team-match-showcase__copy p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.94rem;
    line-height: 1.45;
}

.team-match-showcase__toolbar {
    grid-area: toolbar;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.team-match-showcase__header-nav {
    grid-area: headernav;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.team-match-showcase__header-star {
    min-width: 64px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(125, 211, 252, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(2, 6, 23, 0.3);
}

.team-match-showcase__header-star:hover,
.team-match-showcase__header-star:focus-visible {
    transform: none;
    color: #fbbf24;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(2, 6, 23, 0.3);
}

.team-match-showcase__header-star.favorited { color: #fbbf24; }
.team-match-showcase__header-star.subscribed-other { color: #94a3b8; }

.team-match-showcase__header-star-note {
    color: #cbd5e1;
    font-size: 0.76rem;
    line-height: 1.25;
    font-weight: 600;
    max-width: 190px;
}

.team-match-showcase__header-info-btn {
    min-height: 38px;
    font-size: 0.8rem;
    color: #dbeafe;
    background: rgba(30, 41, 59, 0.82);
}

.favorites-panel-star-btn {
    min-width: 54px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-match-showcase__count {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(30, 58, 138, 0.28);
    border: 1px solid rgba(96, 165, 250, 0.34);
    color: #dbeafe;
    font-size: 0.8rem;
    font-weight: 700;
    max-width: min(100%, 100%);
}

.team-match-showcase__primary {
    padding: 10px 14px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(147, 197, 253, 0.4);
}

.team-match-showcase__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.team-match-showcase__selection-nav {
    margin: -4px 0 14px;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(2, 6, 23, 0.92) 100%);
    border: 1px solid rgba(71, 85, 105, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px rgba(2, 6, 23, 0.28);
}

/* In the team matches dialog, visually attach the nav strip to the header bottom */
#teamMatchesDialog .team-match-showcase__selection-nav {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -8px;
}

.team-match-showcase__selection-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.team-match-showcase__nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.45);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.9) 100%);
    color: #e2e8f0;
    font-weight: 700;
    padding: 6px 5px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.team-match-showcase__nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.55);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(15, 23, 42, 0.92) 100%);
    box-shadow: 0 8px 16px rgba(2, 6, 23, 0.26);
}

.team-match-showcase__nav-btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.team-match-showcase__nav-btn--add {
    border-color: rgba(59, 130, 246, 0.6);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.42) 0%, rgba(29, 78, 216, 0.3) 55%, rgba(15, 23, 42, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.2), 0 10px 22px rgba(2, 6, 23, 0.3);
}

.team-match-showcase__nav-btn--add:not(.is-ready) {
    border-color: rgba(100, 116, 139, 0.44);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.84) 0%, rgba(15, 23, 42, 0.9) 100%);
    box-shadow: none;
}

.team-match-showcase__nav-btn--add.is-ready {
    border-color: rgba(96, 165, 250, 0.85);
    box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.26), 0 12px 26px rgba(30, 64, 175, 0.36);
}

.team-match-showcase__nav-btn--select .team-match-showcase__nav-icon {
    color: #22c55e;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.team-match-showcase__nav-btn--select .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--clear .team-match-showcase__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: brightness(1.18);
}

.team-match-showcase__nav-btn--clear .team-match-showcase__nav-icon {
    color: #f59e0b;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.team-match-showcase__nav-btn--select .team-match-showcase__nav-label {
    opacity: 0.45;
    color: #cbd5e1;
    transform: translate(-50%, -50%) translateY(3px);
    text-shadow: 0 1px 0 rgba(2, 6, 23, 0.6);
    transition: opacity 0.22s ease, color 0.22s ease, font-weight 0.22s ease;
    font-weight: 600;
    top: 50%;
    bottom: auto;
}

.team-match-showcase__nav-btn--clear .team-match-showcase__nav-label {
    opacity: 0.42;
    color: #94a3b8;
    transform: translate(-50%, -50%) translateY(5px);
    text-shadow: 0 1px 0 rgba(2, 6, 23, 0.6);
    transition: opacity 0.22s ease, color 0.22s ease, font-weight 0.22s ease;
    font-weight: 600;
    top: 50%;
    bottom: auto;
}

.team-match-showcase__nav-btn--select:hover .team-match-showcase__nav-label,
.team-match-showcase__nav-btn--select:focus-visible .team-match-showcase__nav-label,
.team-match-showcase__nav-btn--select:active .team-match-showcase__nav-label {
    transform: translate(-50%, -50%) translateY(3px);
}

.team-match-showcase__nav-btn--clear:hover .team-match-showcase__nav-label,
.team-match-showcase__nav-btn--clear:focus-visible .team-match-showcase__nav-label,
.team-match-showcase__nav-btn--clear:active .team-match-showcase__nav-label {
    transform: translate(-50%, -50%) translateY(5px);
}

.team-match-showcase__nav-btn--select.is-emphasis .team-match-showcase__nav-label {
    opacity: 0.9;
    color: #ffffff;
    font-weight: 800;
}

.team-match-showcase__nav-btn--clear.is-emphasis .team-match-showcase__nav-label {
    opacity: 0.9;
    color: #f8fafc;
    font-weight: 800;
}

.team-match-showcase__nav-btn--select:hover .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--select:focus-visible .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--select:active .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--clear:hover .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--clear:focus-visible .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--clear:active .team-match-showcase__nav-icon {
    transform: translateY(-9px);
    filter: brightness(1.18);
}

.team-match-showcase__nav-btn--select .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--clear .team-match-showcase__nav-icon {
    transform: translateY(-9px);
}

.team-match-showcase__nav-btn--select:hover,
.team-match-showcase__nav-btn--select:focus-visible,
.team-match-showcase__nav-btn--clear:hover,
.team-match-showcase__nav-btn--clear:focus-visible {
    transform: none;
    border-color: rgba(100, 116, 139, 0.45);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.9) 100%);
    box-shadow: none;
}

.team-match-showcase__nav-icon {
    position: relative;
    z-index: 2;
    font-size: 1.02rem;
    line-height: 1;
    transform: translateY(-6px);
    transition: transform 0.28s ease, filter 0.28s ease;
}

.team-match-showcase__nav-label {
    position: absolute;
    left: 50%;
    bottom: 8px;
    z-index: 1;
    font-size: 0.66rem;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 8px);
    transform: translate(-50%, 8px);
    opacity: 0.82;
    transition: transform 0.28s ease, opacity 0.28s ease;
    pointer-events: none;
}

.team-match-showcase__nav-copy {
    position: absolute;
    left: 50%;
    bottom: 8px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: calc(100% - 10px);
    transform: translate(-50%, 8px);
    opacity: 0.82;
    transition: transform 0.28s ease, opacity 0.28s ease;
    pointer-events: none;
}

.team-match-showcase__nav-title {
    font-size: 0.96rem;
    line-height: 1.05;
    font-weight: 800;
    color: #f8fafc;
    text-align: center;
}

.team-match-showcase__nav-subtitle {
    font-size: 0.66rem;
    line-height: 1.2;
    color: #cbd5e1;
    text-align: center;
}

.team-match-showcase__nav-btn--add:hover .team-match-showcase__nav-icon,
.team-match-showcase__nav-btn--add:focus-visible .team-match-showcase__nav-icon {
    transform: translateY(-9px) scale(1.03);
    filter: brightness(1.08);
}

.team-match-showcase__nav-btn--add:hover .team-match-showcase__nav-label,
.team-match-showcase__nav-btn--add:focus-visible .team-match-showcase__nav-label,
.team-match-showcase__nav-btn:hover .team-match-showcase__nav-copy,
.team-match-showcase__nav-btn:focus-visible .team-match-showcase__nav-copy {
    transform: translate(-50%, 0);
    opacity: 1;
}

@media (hover: none) {
    .team-match-showcase__nav-icon {
        transform: translateY(-4px);
    }

    .team-match-showcase__nav-label,
    .team-match-showcase__nav-copy {
        transform: translate(-50%, 2px);
        opacity: 0.95;
    }
}

.team-match-showcase__selection-count {
    margin-top: 8px;
    text-align: center;
    color: #93c5fd;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.team-match-showcase__empty {
    padding: 28px 18px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px dashed rgba(148, 163, 184, 0.34);
    color: #cbd5e1;
}

.team-match-showcase__empty--error {
    border-color: rgba(248, 113, 113, 0.35);
}

.team-match-showcase__empty-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.team-match-showcase__empty-action {
    margin-top: 16px;
}

.team-match-showcase .team-match-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.team-match-showcase .team-match-card:hover {
    border-color: rgba(147, 197, 253, 0.34);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-match-card__header {
    background: rgba(15, 23, 42, 0.82);
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

.team-match-showcase .match-date {
    color: #f8fafc;
}

.team-match-showcase .match-time {
    color: #cbd5e1;
}

.team-match-card__header-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.team-match-card__league,
.team-match-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.team-match-card__league {
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.34);
    color: #dbeafe;
}

.team-match-card__status {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(52, 211, 153, 0.32);
    color: #d1fae5;
}

.team-match-card__body {
    padding: 18px 16px;
}

.team-match-card__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 14px;
}

.team-match-card__side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.team-match-card__side--home {
    align-items: flex-end;
}

.team-match-card__side--away {
    align-items: flex-start;
}

html[dir="ltr"] .team-match-card__side--home {
    align-items: flex-start;
}

html[dir="ltr"] .team-match-card__side--away {
    align-items: flex-end;
}

html[dir="rtl"] .team-match-card__side--home {
    align-items: flex-end;
}

html[dir="rtl"] .team-match-card__side--away {
    align-items: flex-start;
}

html[dir="ltr"] .team-match-card__side--home .team-match-card__name {
    text-align: left;
}

html[dir="ltr"] .team-match-card__side--away .team-match-card__name {
    text-align: right;
}

html[dir="rtl"] .team-match-card__side--home .team-match-card__name {
    text-align: right;
}

html[dir="rtl"] .team-match-card__side--away .team-match-card__name {
    text-align: left;
}

.team-match-card__role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.team-match-card__role--home {
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.34);
    color: #dbeafe;
}

.team-match-card__role--away {
    background: rgba(20, 184, 166, 0.18);
    border: 1px solid rgba(45, 212, 191, 0.34);
    color: #ccfbf1;
}

.team-match-card__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.team-match-card__identity img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 12px;
    background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.99) 0%, rgba(241, 245, 249, 0.95) 48%, rgba(203, 213, 225, 0.82) 100%);
    border: 1px solid rgba(226, 232, 240, 0.74);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2), 0 7px 16px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    padding: 6px;
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.team-match-card__side--home .team-match-card__identity img {
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.32), 0 8px 18px rgba(2, 6, 23, 0.35), 0 0 20px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.team-match-card__side--away .team-match-card__identity img {
    box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.32), 0 8px 18px rgba(2, 6, 23, 0.35), 0 0 20px rgba(45, 212, 191, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.team-match-showcase .team-match-card:hover .team-match-card__identity img {
    transform: translateY(-1px) scale(1.03);
}

.team-match-card__name {
    color: #f8fafc;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-match-card__versus {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.team-match-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.team-match-card__detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.team-match-card__detail--wide {
    grid-column: 1 / -1;
}

.team-match-card__detail-label {
    color: #93c5fd;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.team-match-card__detail-value {
    color: #e2e8f0;
    font-size: 0.92rem;
    line-height: 1.4;
}

.team-match-card__footer {
    background: rgba(15, 23, 42, 0.68);
    border-top-color: rgba(148, 163, 184, 0.14);
}

.team-match-card__action-btn {
    padding: 9px 14px;
}

html[dir="rtl"] .team-match-showcase__hero {
    direction: rtl;
}

html[dir="rtl"] .team-match-showcase__toolbar {
    align-items: flex-start;
}

html[dir="rtl"] .team-match-showcase__header-nav {
    justify-content: flex-start;
}

html[dir="rtl"] .team-match-showcase__header-star-note {
    text-align: right;
}

@media (max-width: 768px) {
    .team-match-showcase__hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "toolbar"
            "headernav";
        gap: 12px;
    }

    .team-match-showcase__toolbar {
        align-items: stretch;
    }

    .team-match-showcase__header-nav {
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .team-match-showcase__header-star-note {
        flex: 1 1 100%;
        max-width: 100%;
        margin-top: 2px;
    }

    .team-match-showcase__header-info-btn {
        flex: 1;
        justify-content: center;
    }

    .team-match-card__teams {
        grid-template-columns: 1fr;
    }

    .team-match-card__side--home,
    .team-match-card__side--away {
        align-items: stretch;
    }

    .team-match-card__identity {
        justify-content: flex-start;
    }

    .team-match-card__details {
        grid-template-columns: 1fr;
    }
}

html[dir="rtl"] .desktop-nav {
    right: auto !important;
    left: 72px !important;
}

html[dir="rtl"] .top-quick-nav {
    direction: rtl !important;
}

html[dir="rtl"] .mobile-bottom-nav {
    direction: rtl !important;
}

/* Reset to LTR when not in RTL mode */
html[dir="ltr"] .top-quick-nav {
    direction: ltr !important;
}

html[dir="ltr"] .mobile-bottom-nav {
    direction: ltr !important;
}

@media (max-width: 768px) {
    .lang-switcher-select {
        min-width: 60px;
        height: 32px;
        font-size: 0.76rem;
        padding: 0 8px;
    }

    html[dir="rtl"] .desktop-nav {
        left: 16px !important;
    }
}

/* Root explorer card: contains icon, never overflows */
.root-explorer-card {
    position: relative;
    overflow: hidden;
    padding: 12px 8px;
    min-height: 110px;
    justify-content: center;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.68) 0%, rgba(240, 248, 255, 0.55) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(147, 197, 253, 0.30);
    border-radius: 12px;
    box-shadow:
        0 10px 20px rgba(15, 23, 42, 0.09),
        0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.root-explorer-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.95) 0%, rgba(250, 204, 21, 0.26) 52%, rgba(203, 213, 225, 0.9) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.root-explorer-card .root-explorer-title {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Dual-action footer for bracket-capable tournament cards (e.g. World Cup):
   one tap for standings + subscribe, one for the knockout predictor. */
.card-dual-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding-top: 8px;
    box-sizing: border-box;
}
.card-dual-btn {
    width: 100%;
    border-radius: 9px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: clamp(0.74rem, 2.7vw, 0.88rem);
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.card-dual-btn--standings {
    background: #eef2ff;
    color: #1e3a8a;
    border: 1px solid #c7d2fe;
}
.card-dual-btn--knockout {
    background: linear-gradient(135deg, #0B0C10 0%, #1F2833 100%);
    color: #ffffff;
    border: 1px solid #45A29E;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 2px 3px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(102, 252, 241, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 3px 6px -2px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.3px;
}
.card-dual-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px -5px rgba(15, 23, 42, 0.5);
    filter: brightness(1.03);
}
.card-dual-btn:active {
    transform: translateY(0);
}

/* Reusable glass + subtle pattern mixins for dashboard cards */
:root {
    --card-pattern-world: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Cpath d='M10,10 Q20,0 30,10 T50,10 T70,10 T90,10' fill='none' stroke='white' stroke-width='0.5' opacity='0.16'/%3E%3C/svg%3E");
}

.card-glass-base {
    background-color: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.card-pattern-world {
    background-image: var(--card-pattern-world);
    background-repeat: repeat;
    background-size: 150px 75px;
    background-position: center;
    background-blend-mode: overlay;
}

.card-pattern-pitch {
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at center, transparent 30%, rgba(255, 255, 255, 0.04) 31%, rgba(255, 255, 255, 0.04) 32%, transparent 33%);
    background-size: 40px 40px, 40px 40px, 120px 120px;
    background-repeat: repeat, repeat, no-repeat;
    background-position: center;
    background-blend-mode: overlay;
}

@media (min-width: 480px) {
    .root-explorer-card img {
        max-width: 68px !important;
        max-height: 68px !important;
    }
}

@media (min-width: 768px) {
    .root-explorer-card img {
        max-width: 80px !important;
        max-height: 80px !important;
    }
}

.country-region-section {
    border: 1px solid #d6dee8;
    border-radius: 14px;
    background: #fbfdff;
    padding: 14px;
    margin-bottom: 12px;
}

.country-region-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

.country-region-description {
    margin: -2px 0 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #64748b;
    max-width: 72ch;
}

.country-region-section-other {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.45);
    background: linear-gradient(180deg, #fafafa 0%, #f4f6f8 100%);
}

.country-region-section-other .country-region-title {
    color: #64748b;
}

.country-region-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    padding-top: 10px;
    border-top: 1px solid rgba(214, 222, 232, 0.9);
}

.continent-competition-section {
    margin-top: 12px;
}

.continent-competition-section:first-child {
    margin-top: 0;
}

.continent-competition-label {
    display: inline-flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.72);
    color: #334155;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.continent-competition-grid {
    padding: 0;
}

#countriesGrid.country-mode {
    padding-top: 16px;
}

.country-grid-card {
    min-height: 118px;
    padding: 14px 12px;
    margin-bottom: 0;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow:
        0 0 0 1px rgba(191, 219, 254, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(96, 165, 250, 0.08),
        0 2px 6px rgba(15, 23, 42, 0.06),
        0 8px 18px rgba(15, 23, 42, 0.05);
}

.country-grid-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow:
        0 0 0 1px rgba(147, 197, 253, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(96, 165, 250, 0.12),
        0 4px 10px rgba(15, 23, 42, 0.08),
        0 12px 24px rgba(15, 23, 42, 0.08);
}

.country-grid-card img {
    width: 38px;
    height: 38px;
}

.country-grid-card-copy {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.country-grid-card-name {
    font-size: 1rem !important;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}

.country-grid-card-description {
    font-size: 0.74rem !important;
    line-height: 1.35;
    color: #64748b;
    max-width: 18ch;
}

.country-grid-card-other {
    border-color: rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(148, 163, 184, 0.06),
        0 1px 4px rgba(15, 23, 42, 0.04),
        0 6px 14px rgba(15, 23, 42, 0.035);
    opacity: 0.96;
}

.country-grid-card-other:hover {
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(148, 163, 184, 0.08),
        0 3px 8px rgba(15, 23, 42, 0.06),
        0 10px 18px rgba(15, 23, 42, 0.05);
}

/* Region hub cards: align with main-page card polish */
.region-hub-competition-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.60) inset;
}

.region-hub-competition-card[class*="card-"] {
    min-height: 206px;
}

/* Continent -> Countries tab: slightly smaller cards to avoid cramped layout */
#cont-country-grid.cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

#cont-country-grid .country-grid-card {
    min-height: 104px;
    padding: 10px 8px;
    border-radius: 14px;
}

/* Buttons */
.btn-primary, 
.btn-primary-lg,
.control-btn {
    font-family: Monospace;
    border: none;
    border-radius: 5px;
    background-color: #28a745; /* IBM Green */
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s ease-in-out, transform 0.2s;
}

.btn-primary:hover,
.btn-primary-lg:hover,
.control-btn:hover {
    background-color: #34c759;
    transform: translateY(-2px);
}

.btn-primary:disabled,
.btn-primary-lg:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.control-btn {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ddd;
}

.control-btn:hover {
    background-color: #eee;
}

/* Navigation Steps highlight */
.step-container {
    animation: fadeIn 0.3s ease-out;
}

.hidden {
    display: none;
}

/* Empty State Message */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-size: 1rem;
}

.empty-state p {
    margin: 0;
}

.welcome-screen {
    position: relative;
}

.welcome-exit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #334155;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transition: all 0.2s ease;
}

.welcome-exit-btn:hover {
    background: #ffffff;
    border-color: rgba(59, 130, 246, 0.45);
    color: #1e3a8a;
    transform: translateY(-1px);
}

.back-btn {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    font-family: Monospace;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.back-btn:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateX(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Tables - Matching table.css from IBM */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%; /* Adapt width */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Keep table font from IBM */
    margin: 20px auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    text-align: center; /* Center everything as requested */
}

th, td {
    padding: 10px 12px;
    text-align: center; /* Center all values */
    vertical-align: middle;
    /* responsive font size that scales with viewport, clamped between 12px and 18px */
    font-size: clamp(0.75rem, 1.5vw, 1.1rem);
    border-bottom: 1px solid #e8e8e8;
}

/* Clickable table rows */
.teams-table tbody tr {
    transition: background-color 0.15s ease;
}

.teams-table tbody tr:hover {
    background-color: #eff6ff !important;
}

.teams-table tbody tr:active {
    background-color: #dbeafe !important;
}

/* Explicitly target images inside tables (Team Logo / Flags) to be smaller */
.teams-table img,
.fixtures-table img {
    width: 24px;  /* Much smaller */
    height: 24px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* League logo: white pill so dark/blue logos (e.g. Champions League) stay visible */
.fixtures-table .league-col img {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 2px;
    box-sizing: border-box;
}

.league-logo-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.league-logo-btn:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
}

.tournament-logo-info-modal {
    max-width: 360px;
    width: calc(100vw - 22px);
    padding: 14px;
}

.tournament-logo-info-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 8px;
}

.tournament-logo-info-header img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.94) 100%);
    border: 2px solid rgba(203, 213, 225, 0.5);
    padding: 6px;
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.28);
}

.tournament-logo-info-header h3 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    text-align: center;
}

.tournament-logo-info-subtitle {
    margin: 10px 0 8px;
    color: #94a3b8;
    font-size: 0.84rem;
}

.tournament-logo-info-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.tournament-logo-info-row {
    font-size: 0.9rem;
    color: #e2e8f0;
}

.tournament-logo-info-row strong {
    color: #f8fafc;
}

.tournament-logo-info-close {
    width: 100%;
    justify-content: center;
}

html[dir="rtl"] .tournament-logo-info-modal {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .tournament-logo-info-header {
    flex-direction: column;
    padding-right: 0;
    padding-left: 0;
}

/* Specific adjustment for team name column if needed to be left aligned? 
   User said "all tables value should be centered", so keeping center.
*/

th {
    background: linear-gradient(135deg, #006994 0%, #0288d1 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

th:first-child {
    border-top-left-radius: 8px;
}

th:last-child {
    border-top-right-radius: 8px;
}

tbody tr {
    background-color: #ffffff;
    transition: all 0.3s ease;
}

tbody tr:nth-child(odd) {
    background: linear-gradient(to right, #f8f9ff 0%, #ffffff 100%);
}

tbody tr:nth-child(even) {
    background: linear-gradient(to right, #fff8f8 0%, #ffffff 100%);
}

tbody tr:hover {
    background: linear-gradient(to right, #e3f2fd 0%, #f5f5f5 100%);
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
}

/* Team Card Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 6px;
    font-family: -apple-system, sans-serif;
}

.badge-women {
    background-color: #fce7f3;
    color: #db2777;
    border: 1px solid #fbcfe8;
}

.badge-youth {
    background-color: #ffedd5;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.badge-senior {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-worldcup {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    border: 1px solid #1e40af;
    font-weight: 700;
    padding: 3px 10px;
    box-shadow: 0 2px 4px rgba(30, 58, 138, 0.2);
}

/* Status Messages */
.status-message {
    padding: 10px; 
    margin-top: 10px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.success { color: #28a745; background: #d4edda; }
.error { color: #dc3545; background: #f8d7da; }
.loading { color: #0a75ee; }

.transient-notice {
    position: fixed;
    left: 50%;
    top: max(18px, env(safe-area-inset-top, 0px) + 12px);
    transform: translateX(-50%) translateY(-14px);
    opacity: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    z-index: 10010;
    transition: opacity 0.22s ease, transform 0.22s ease;
    max-width: min(92vw, 420px);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.transient-notice.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.transient-notice--info {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%);
}

.transient-notice__icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}

.transient-notice__text {
    display: inline-block;
}
.warning { color: #856404; background: #fff3cd; }

/* Explorer skeletons for countries/leagues/teams loading */
.ux-skeleton-grid {
    display: grid;
    gap: 12px;
}

.ux-skeleton-grid--grid,
.ux-skeleton-grid--teams {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ux-skeleton-grid--hub {
    grid-template-columns: 1fr;
}

.ux-skeleton-card {
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.94) 100%);
    min-height: 98px;
}

.ux-skeleton-card--hub {
    min-height: 86px;
}

.ux-skeleton-line {
    border-radius: 8px;
    height: 11px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.12) 20%, rgba(148, 163, 184, 0.28) 50%, rgba(148, 163, 184, 0.12) 80%);
    background-size: 220% 100%;
    animation: ux-skeleton-shimmer 1.15s ease-in-out infinite;
}

.ux-skeleton-line--title {
    width: 72%;
    height: 14px;
}

.ux-skeleton-line--meta {
    width: 100%;
}

.ux-skeleton-line.short {
    width: 58%;
    margin-bottom: 0;
}

@keyframes ux-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* National Team Card Highlight */
.national-card {
    background-color: #eff6ff;
    border: 2px solid #0a75ee !important; /* Blue border */
}

/* Controls Bar */
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 20px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.94) 100%);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    gap: 10px;
    flex-wrap: wrap;
}

.selection-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.control-btn,
.btn-primary-lg {
    box-sizing: border-box;
    vertical-align: middle;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.control-btn {
    padding: 7px 11px !important;
    border-color: var(--border-color);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 12.8px !important;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px !important;
    line-height: 1 !important;
    min-width: auto;
}

.btn-primary-lg {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-color: transparent;
    font-weight: 600;
    padding: 7px 13px !important;
    font-size: 12.8px !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px !important;
    line-height: 1 !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: auto;
}

.btn-primary-lg:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.btn-primary-lg:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Quick Actions Bar - above match table */
.quick-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.quick-actions-left {
    display: flex;
    gap: 6px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

.subscription-actions-block {
    margin-bottom: 8px;
    width: 100%;
}

.subscription-actions-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.9);
    margin: 0 0 6px 2px;
}

.manual-actions-divider {
    height: 1px;
    margin: 4px 0 6px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.05) 0%, rgba(148, 163, 184, 0.45) 50%, rgba(148, 163, 184, 0.05) 100%);
}

.manual-actions-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.9);
    margin: 0 0 6px 2px;
}

.manual-actions-panel {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.76) 100%);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.subscription-help-note {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.34) 0%, rgba(15, 23, 42, 0.72) 100%);
    border-radius: 10px;
    color: rgba(219, 234, 254, 0.96);
    font-size: 0.82rem;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

.subscription-help-note-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.subscription-help-note-line {
    margin-top: 2px;
}

.quick-action-btn {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 10px;
    padding: 7px 6px;
    min-height: 66px;
    width: 100%;
    min-width: 0;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(226, 232, 240, 0.95);
}

.quick-action-btn:hover {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.92) 100%);
    border-color: rgba(148, 163, 184, 0.56);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.4);
}

.quick-action-icon {
    font-size: 18px;
    line-height: 1;
}

.quick-action-count {
    font-size: 13px;
    font-weight: 600;
}

.quick-action-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    max-width: 100%;
}

.quick-action-label--wide {
    font-size: 12px;
    letter-spacing: 0.02em;
}

.quick-action-btn.select-all-btn .quick-action-icon {
    filter: saturate(1.2);
}

.quick-action-btn.clear-all-btn .quick-action-icon {
    filter: saturate(1.1);
}

.quick-action-btn.add-selected-btn {
    border-color: rgba(148, 163, 184, 0.34);
}

.quick-action-btn.edit-subscription-btn {
    border-color: rgba(96, 165, 250, 0.62);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.36) 0%, rgba(37, 99, 235, 0.28) 100%);
    color: #dbeafe;
    min-height: 62px;
}

.quick-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.filter-toggle-text-btn {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-toggle-text-btn:hover {
    background: #dbeafe;
}

.filter-toggle-text-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quick-actions-message {
    font-size: 13px;
    color: #64748b;
}

.fixtures-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.fixtures-table th,
.fixtures-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px !important;
    line-height: 1.4;
}

.fixtures-table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #64748b;
    font-size: 12px !important;
    padding: 6px 8px;
}

.fixtures-table tr:hover {
    background-color: #f1f5f9;
}

.fixtures-table tr:active,
.fixtures-table tr:focus-within {
    background-color: #f1f5f9;
}

.fixtures-table .checkbox-col {
    width: 40px;
    text-align: center;
}

.fixtures-table .time-col {
    font-family: monospace;
    font-weight: 600;
}

.fixtures-table .team-col {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* team-stack: uniform layout on all screen sizes */
.fixtures-table .team-col .team-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.fixtures-table .team-col .team-stack .team-name-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.fixtures-table .team-col .team-stack .team-name-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.fixtures-table .team-col .team-stack .team-name-logo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Home team: text+logo align right */
.fixtures-table .home-team .team-stack {
    justify-content: flex-end;
}

.fixtures-table .home-team .team-stack .team-name-logo {
    flex-direction: row-reverse;
}

/* Away team: logo+text align left */
.fixtures-table .away-team .team-stack {
    justify-content: flex-start;
}

.fixtures-table .away-team .team-stack .team-name-logo {
    flex-direction: row;
}

.fixtures-table .team-col span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.fixtures-table .team-col .fav-star {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixtures-table .team-col img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.fixtures-table .vs-col {
    text-align: center;
    font-weight: bold;
    color: #9ca3af;
}

.fixtures-table .datetime-col {
    text-align: center;
    white-space: nowrap;
    padding: 6px 8px;
}

.fixtures-table .datetime-col .date-part {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.fixtures-table .datetime-col .time-part {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fixtures-table .datetime-col .score-part {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.fixtures-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #eab308; /* Yellow/Gold */
}

/* Favorites Circles */
.team-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 50px;
    align-items: center;
}

.team-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.team-circle:hover {
    transform: scale(1.1);
}

.team-circle img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Mobile Responsiveness - Legacy Block Removed */
/* combined into the block at the bottom */

/* Desktop Handling - Bigger Font */
@media (min-width: 1024px) {
    th, td {
        font-size: 1.1rem; /* Bigger font for desktop */
        padding: 14px 18px;
    }
    
    .teams-table img, .fixtures-table img {
       width: 28px; /* Slightly bigger on desktop to match font, but still small */
       height: 28px;
    }
}

.header .sub-header {
    margin-top: 4px;
    font-size: 0.75rem; /* Reduced from 0.9rem to be significantly smaller */
    opacity: 0.8;
    font-weight: normal;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .container {
        margin: 0;
        padding: 0 12px 12px;
        max-width: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .header h1 {
        font-size: 1.5rem; /* Reduced from 1.8rem */
    }

    /* Fix overlapping auth controls on small screens */
    .header {
        display: block;
        width: calc(100% + 24px);
        margin: 0 -12px 22px;
        padding: 0;
        height: 200px !important;
        min-height: 0;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        animation: none !important;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 14px 30px -18px rgba(2, 6, 23, 0.9), 0 22px 34px -22px rgba(15, 23, 42, 0.95);
        overflow: hidden !important;
    }

    .auth-controls {
        position: absolute;
        top: auto;
        bottom: 12px;
        right: auto;
        left: 16px !important;
        position: absolute !important;
        top: auto !important;
        bottom: 12px !important;
        right: auto !important;
        transform: none !important;
        margin-bottom: 0;
        order: initial;
        width: auto;
        width: auto !important;
        justify-content: flex-start;
        padding: 0;
        margin: 0 !important;
        z-index: 40;
    }

    .auth-container {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .auth-separator {
        display: none;
    }

    .auth-btn {
        width: auto !important;
        min-width: 128px !important;
        height: 44px !important;
        padding: 0 14px !important;
        border-radius: 22px !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .auth-btn .auth-text {
        display: inline-block;
        font-size: 0.9rem;
    }

    .auth-btn .auth-icon {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }

    .header-content {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 58px;
        bottom: auto;
        padding: 0 16px;
        text-align: center !important;
    }

    .header-content::before {
        bottom: -10px;
        height: 76px;
        width: min(94vw, 420px);
        filter: blur(10px);
    }

    .header-graphic {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .header-goalkeeper {
        height: 100%;
        max-height: none;
    }

    /* Mobile controls - 3 rows layout */
    .controls-bar.mobile-3-rows {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .controls-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Row 1: Message */
    .controls-row.message-row {
        padding-bottom: 4px !important;
    }
    
    .select-message {
        color: #2563eb !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        background: #eff6ff !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        border: 1px solid #bfdbfe !important;
        text-align: center !important;
    }
    
    /* Row 2: Select/Clear */
    .controls-row.selection-row {
        display: flex !important;
        gap: 8px !important;
    }
    
    .controls-row.selection-row .control-btn {
        flex: 1 !important;
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
    
    /* Row 3: Action buttons */
    .controls-row.action-row {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .controls-row.action-row .control-btn,
    .controls-row.action-row .btn-primary-lg {
        flex: 1 !important;
        min-width: 100px !important;
        max-width: 160px !important;
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Results banner */
    .controls-row.results-banner {
        text-align: center !important;
        font-weight: bold !important;
        color: #c2410c !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #fdba74 !important;
    }

    /* Hide VS, League, Venue columns on mobile */
    .fixtures-table th:nth-child(5),
    .fixtures-table th:nth-child(7),
    .fixtures-table th:nth-child(8),
    .fixtures-table td:nth-child(5),
    .fixtures-table td:nth-child(7),
    .fixtures-table td:nth-child(8) {
        display: none;
    }
    
    /* Hide desktop-only elements on mobile */
    .fixtures-table .team-col .fav-star.desktop-only,
    .fixtures-table .team-col span.desktop-only,
    .fixtures-table .team-col img.desktop-only {
        display: none !important;
    }
    
    /* Mobile team - horizontal layout: star + logo + name */
    .fixtures-table .team-col .team-stack {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 1px;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }
    
    .fixtures-table .team-col .team-stack .fav-star {
        font-size: 1.45rem;
        padding: 2px 5px;
        margin: 0;
        line-height: 1;
        flex-shrink: 0;
        min-width: 0;
    }
    
    .fixtures-table .team-col .team-stack .team-name-logo {
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    .fixtures-table .team-col .team-stack .team-name-logo img {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0;
    }
    
    .fixtures-table .team-col .team-stack .team-name-logo span {
        font-size: 0.7rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.15 !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* Home team: align right */
    .fixtures-table .home-team .team-stack {
        justify-content: flex-end;
    }
    
    .fixtures-table .home-team .team-stack .team-name-logo {
        flex-direction: row-reverse;
    }
    
    /* Away team: align left */
    .fixtures-table .away-team .team-stack {
        justify-content: flex-start;
    }
    
    .fixtures-table .away-team .team-stack .team-name-logo {
        flex-direction: row;
    }
    
    .fixtures-table {
        table-layout: fixed;
        width: 100%;
    }
    
    /* Mobile fixtures table - compact layout */
    .fixtures-table {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Make fixtures section same width as explorer section */
    .fixtures-section,
    #fixturesContainer,
    .fixtures-list-view {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .quick-actions-bar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .quick-actions-grid {
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .subscription-actions-title,
    .manual-actions-title {
        font-size: 0.66rem;
        margin-left: 1px;
    }

    .manual-actions-divider {
        margin: 3px 0 7px;
    }

    .manual-actions-panel {
        border-radius: 10px;
        padding: 7px;
    }

    .quick-action-btn {
        min-height: 56px;
        border-radius: 9px;
        padding: 6px 4px;
        width: 100%;
        min-width: 0;
    }

    .quick-action-icon {
        font-size: 15px;
    }

    .quick-action-count {
        font-size: 11px;
    }

    .quick-action-label {
        font-size: 10px;
        letter-spacing: 0;
        line-height: 1.12;
        white-space: normal;
        overflow: hidden;
    }

    .quick-action-label--wide {
        font-size: 10.6px;
    }

    .subscription-help-note {
        margin-bottom: 8px;
        padding: 10px;
        font-size: 0.78rem;
    }
    
    .table-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .controls-bar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .controls-bar.mobile-3-rows {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Match teams-table style */
    .fixtures-table thead th {
        background: #f8fafc !important;
        font-weight: 600 !important;
        color: #475569 !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 8px 4px !important;
        text-align: center !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .fixtures-table tbody tr:hover {
        background: #f1f5f9 !important;
    }
    
    .fixtures-table td {
        padding: 4px 2px !important;
        overflow: hidden;
        vertical-align: middle !important;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .fixtures-table .checkbox-col {
        width: 24px !important;
        text-align: center !important;
        padding: 4px 2px !important;
        vertical-align: middle !important;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
        transform: scale(1.05);
    }
    
    .fixtures-table input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Both teams - logo on left, name centered */
    .fixtures-table .team-cell {
        text-align: center !important;
    }
    
    .fixtures-table .team-col {
        min-width: unset !important;
        max-width: 100% !important;
        gap: 5px !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    /* Home team: name on left, logo on right (closer to checkbox) */
    .fixtures-table .team-col.home-layout {
        justify-content: flex-end !important;
        text-align: right;
    }
    
    .fixtures-table .team-col span {
        font-size: 0.7rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.15 !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    .fixtures-table .team-col img {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0;
        object-fit: contain;
    }
    
    /* Combined date/time column on mobile - FIXED SIZE, aligned with team logo */
    .fixtures-table .datetime-col {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        padding: 0 2px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    
    .fixtures-table .datetime-col .date-part {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        color: #64748b;
        margin-bottom: 1px;
        line-height: 1.1;
    }
    
    .fixtures-table .datetime-col .time-part {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        line-height: 1.1;
    }
    
    .fixtures-table .datetime-col .score-part {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        line-height: 1.1;
    }
    
    /* Checkbox column - FIXED SIZE */
    .fixtures-table .checkbox-col {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        padding: 0 !important;
    }
    
    /* League logo column on mobile - FIXED SIZE */
    .fixtures-table .league-col {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        padding: 2px 0 !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    
    .fixtures-table .league-col img {
        width: 32px !important;
        height: 32px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        background: rgba(255,255,255,0.92) !important;
        border-radius: 6px !important;
        padding: 2px !important;
        box-sizing: border-box !important;
    }
    
    /* Row - compact */
    .fixtures-table td {
        padding: 4px 2px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        vertical-align: middle !important;
    }
    
    /* Team columns - remove gaps */
    .fixtures-table .team-col {
        gap: 2px !important;
    }
    
    .fixtures-table .team-col img {
        margin: 0 !important;
    }
    
    .fixtures-table .team-col span {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide thead on mobile */
    .fixtures-table thead.desktop-only {
        display: none !important;
    }
    
    /* Ensure headers are visible */
    .fixtures-table th.col-home,
    .fixtures-table th.col-away {
        display: table-cell !important;
        font-size: 0.65rem !important;
        text-align: center !important;
        padding: 6px 2px !important;
    }
    
    /* Hide desktop-only columns on mobile */
    .fixtures-table .desktop-only {
        display: none !important;
    }
    
    /* Force show mobile-only columns */
    .fixtures-table .mobile-only {
        display: table-cell !important;
    }
    
    /* Team columns take remaining space */
    .fixtures-table .team-cell {
        width: auto !important;
        overflow: hidden !important;
    }

    /* Stack filter inputs */
    .search-section, .grid-card {
        padding: 15px;
    }

    /* Cards Grid - Ensure 2 columns on mobile if possible, or 1 nicely */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
        gap: 10px;
    }

    .grid-card img {
        height: 40px;
        width: 40px;
    }
    
    .grid-card:not(.root-explorer-card) {
        filter: none;
        transform: none;
        padding: 10px;
        min-height: 164px;
    }

    .continent-grid-card {
        min-height: 210px;
        gap: 6px;
        padding: 12px 10px;
    }

    .continent-grid-card .continent-card-icon-wrap {
        width: 108px;
        height: 92px;
        min-height: 92px;
    }

    .continent-grid-card .continent-card-icon {
        max-width: 84px;
        max-height: 84px;
    }

    .continent-grid-card .continent-card-icon--wide {
        max-width: 104px;
        max-height: 64px;
    }

    .continent-grid-card .continent-card-icon[data-region-code='NA'] {
        max-width: 96px;
        max-height: 62px;
    }

    .continent-grid-card .continent-card-icon[data-region-code='OC'] {
        max-width: 90px;
        max-height: 66px;
    }

    .continent-grid-card .continent-card-title {
        font-size: 1.28rem;
        line-height: 1.25;
        min-height: 2.6em;
    }

    .continent-grid-card .continent-card-subtitle {
        margin-top: 2px;
        min-height: 28px;
        padding: 3px 12px;
        font-size: 0.9rem;
    }

    #cont-country-grid.cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #cont-country-grid .country-grid-card {
        min-height: 96px;
        padding: 8px 7px;
    }

    #cont-country-grid .country-grid-card img {
        width: 26px;
        height: 26px;
    }

    #cont-country-grid .country-grid-card-name {
        font-size: 0.85rem !important;
    }
    
    /* Mobile info button */
    .mobile-only {
        display: table-cell !important;
    }
    
    .info-col {
        width: 30px;
        text-align: center;
    }
    
    .info-btn {
        background: none;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        padding: 2px;
    }
}

/* Desktop: hide mobile-only elements */
.mobile-only {
    display: none;
}

/* Fixture info popup (mobile) */
.fixture-info-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.fixture-info-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-height: 80vh;
    overflow-y: auto;
}

.fixture-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.fixture-info-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
}

.fixture-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.fixture-info-row span:first-child {
    font-size: 1.1rem;
}

.fixture-info-divider {
    height: 1px;
    background: var(--border-color);
    margin: 10px 0;
}

.fixture-info-teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fixture-info-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border-radius: 8px;
}

.fixture-info-team img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.fixture-info-team span {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.fixture-info-star {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}

.fixture-info-star:hover {
    background: #ffffff;
    transform: scale(1.1);
    color: #fbbf24;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.32);
}

.fixture-info-star.active {
    color: #eab308;
    text-shadow: 0 0 8px rgba(234, 179, 8, 0.65);
}

/* Composite Emoji Icon */
.emoji-stack {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: bottom;
}

.emoji-stack .overlay {
    position: absolute;
    font-size: 0.45em; /* Smaller to fit */
    top: 55%; /* Center vertically in the lower part (calendar body) */
    z-index: 2;
}

/* Header Help Button */
.header-help-btn,
.help-fab {
    position: absolute;
    top: 12px;
    right: 16px;
    bottom: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transform: scale(1.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    transition: all 0.3s ease;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.header-help-btn:hover,
.help-fab:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.header-help-btn:active,
.help-fab:active {
    transform: scale(0.95);
}

/* Mobile: keep top placement like desktop */
@media (max-width: 768px) {
    .header-help-btn,
    .help-fab {
        position: absolute !important;
        top: 12px;
        right: 16px;
        bottom: auto;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        display: flex !important;
        z-index: 60;
    }
}

/* Keep help button in header on all sizes. */

/* Favorites Corner Button (Bottom Left of Header) */
.fav-corner-btn-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

/* Favorites Bar (New) */
.quick-select {
    display: none; /* Managed by JS */
    background: white;
    padding: 15px 20px;
    margin: 10px 0 20px 0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-align: center;
    border: 1px solid #f1f5f9;
}

.quick-select.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.quick-select h3 {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.team-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fav-chip {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 14px; /* Reduced padding */
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.fav-chip:hover {
    background: #ffffff;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.fav-chip img {
    width: 20px; /* Smaller icon */
    height: 20px;
    object-fit: contain;
}

.fav-chip span {
    font-weight: 600;
    color: #334155;
    font-size: 0.85rem; /* Smaller text */
}

/* Sync Modal Buttons */
.btn-sync {
    display: flex; /* Ensure flex behavior */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
    border: 1px solid transparent;
}
.btn-sync:hover {
    transform: translateY(-2px);
}
.btn-sync.apple {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}
.btn-sync.google {
    background-color: #2563eb;
    color: white;
}

/* Manage Calendar Modal */
.manage-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 15px 0;
    background: #f8fafc;
}

.manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: white;
}

.manage-item:last-child {
    border-bottom: none;
}

.manage-info {
    text-align: left;
}

.manage-date {
    font-size: 0.85rem;
    color: #64748b;
    font-family: monospace;
}

.manage-match {
    font-weight: 600;
    color: #334155;
}

.btn-delete {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

/* Premium card icon/logo styling */
.calendar-sync-header-icon span,
.calendar-sync-tab-emoji,
.quick-action-icon,
.finished-card-winner-icon,
.tab-icon,
.auth-icon {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* Team logos on cards */
.team-logo,
.finished-card-logo,
.tournament-card-logo,
.tournament-card-logo--compact {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transform: scale(1.05);
}

/* Bold icon utility */
.icon-bold {
    font-size: 24px;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 210, 255, 0.3);
}

/* Soccer ball decoration utility */
.soccer-ball-header {
    font-size: 100px;
    opacity: 0.12;
    filter: blur(1px) drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.2));
}

/* Sports-app label style */
.card-countdown-kicker,
.team-info-grid .info-label,
.continent-competition-label,
.continent-hub-label,
.quick-action-label,
.calendar-sync-tab-label {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
}

@media (max-width: 768px) {
    .calendar-sync-header-icon span,
    .calendar-sync-tab-emoji,
    .quick-action-icon,
    .finished-card-winner-icon,
    .tab-icon,
    .auth-icon,
    .team-logo,
    .finished-card-logo,
    .tournament-card-logo,
    .tournament-card-logo--compact {
        filter: drop-shadow(0 0 6px rgba(255,255,255,0.22));
    }
}

.btn-clear-all {
    width: 100%;
    background: white;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}
.btn-clear-all:hover {
    background: #fef2f2;
}

/* Subscription Promo Modal - Improved Design */
.sub-promo-modal {
    background: white;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    animation: modalSlideIn 0.3s ease-out;
}

.sub-promo-header {
    background: white;
    padding: 32px 32px 24px 32px;
    color: #1e293b;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

.sub-promo-header h2 {
    margin: 0 0 8px 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
}

.sub-promo-content {
    padding: 32px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.sub-promo-content p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 32px;
}

.sub-promo-content p strong {
    color: #0f172a;
    font-weight: 700;
}

.sub-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.sub-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.sub-feature:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.sub-feature i {
    font-size: 2rem;
    color: #3b82f6;
    font-style: normal;
}

.sub-feature span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.sub-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.btn-sub-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    width: 100%;
}

.btn-sub-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.btn-sub-primary:active {
    transform: translateY(0);
}

.btn-sub-secondary {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-sub-secondary:hover {
    background: #f8fafc;
    color: #475569;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.btn-sub-secondary:active {
    transform: translateY(0);
}

/* Dialog headings: keep icon and title in one row (Hebrew + English) */
.dialog-title-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.dialog-title-inline-icon__icon {
    flex: 0 0 auto;
    line-height: 1;
}

.dialog-title-inline-icon__text {
    min-width: 0;
    line-height: 1.2;
}

html[dir="rtl"] .dialog-title-inline-icon {
    direction: rtl;
}

html[dir="ltr"] .dialog-title-inline-icon {
    direction: ltr;
}

/* Mobile adjustments for subscription modal */
@media (max-width: 480px) {
    .sub-promo-modal {
        max-width: 95%;
        margin: 0 10px;
    }
    
    .sub-promo-header {
        padding: 24px 20px 20px 20px;
    }
    
    .sub-promo-header h2 {
        font-size: 1.4rem;
    }
    
    .sub-promo-content {
        padding: 24px 20px;
    }
    
    .sub-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .sub-feature {
        padding: 16px;
    }
    
    .btn-sub-primary,
    .btn-sub-secondary {
        padding: 14px 24px;
        font-size: 0.95rem;
    }

    .dialog-title-inline-icon {
        gap: 6px;
    }
}

/* Upcoming modal iPhone fix: keep title/subtitle clear of close button */
@media (max-width: 640px) {
    #manageModal .manage-modal-close {
        top: 8px !important;
        right: 8px !important;
        inset-inline-end: 8px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 3 !important;
    }

    #manageModal .manage-modal-header {
        padding-inline: 60px !important;
        padding-top: 4px !important;
        min-height: auto !important;
        text-align: center !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: start !important;
        row-gap: 8px !important;
    }

    #manageModal .dialog-title-inline-icon {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    #manageModal .dialog-title-inline-icon__text {
        display: block !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    #manageModal .manage-modal-header p {
        max-width: 28ch !important;
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        text-align: center !important;
    }

    #manageModal[dir="rtl"] .manage-modal-header {
        text-align: center !important;
        padding-inline: 60px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: start !important;
    }

    #manageModal[dir="rtl"] .dialog-title-inline-icon {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
}

/* Manage Calendar List */
.manage-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #f8fafc;
}

.manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: white;
    transition: background 0.2s;
}

.manage-item:last-child {
    border-bottom: none;
}

.manage-item:hover {
    background: #f1f5f9;
}

.manage-info {
    text-align: left;
}

.manage-date {
    font-weight: 600;
    font-size: 0.9rem;
    color: #334155;
}

.manage-match {
    color: #0f172a;
    margin: 2px 0;
}

.btn-delete {
    background: #fee2e2;
    color: #ef4444;
    border: 1px solid #fecaca;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-delete:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

.btn-clear-all {
    width: 100%;
    padding: 12px;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fda4af;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.btn-clear-all:hover {
    background: #e11d48;
    color: white;
}

/* Generic Modal Content (Fix for Error/Confirm Modals) */
.modal-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90%;
    position: relative;
    margin: auto;
    animation: fadeIn 0.3s ease-out;
}

.sub-pref-modal-content {
    width: min(340px, calc(100vw - 28px));
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.sub-pref-modal-content.compact {
    padding: 12px;
}

.sub-pref-modal-header {
    flex-shrink: 0;
    padding-inline: 44px;
    min-height: 40px;
}

.sub-pref-modal-body {
    overflow-y: auto;
    padding-right: 2px;
    margin-right: -2px;
}

html[dir="rtl"] #subPrefModal .sub-pref-modal-content {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #subPrefModal .tabs-nav {
    direction: rtl;
}

html[dir="rtl"] #subPrefModal .pref-option {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] #subPrefModal .sub-pref-modal-footer {
    direction: rtl;
}

html[dir="rtl"] #subPrefModal .sub-pref-modal-body {
    padding-left: 2px;
    margin-left: -2px;
    padding-right: 0;
    margin-right: 0;
}

.sub-pref-modal-footer {
    flex-shrink: 0;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.sub-pref-info-box {
    font-size: 0.75rem !important;
}

.sub-pref-team-type {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd;
}

.sub-pref-sync-prompt {
    text-align: left;
}

html[dir="rtl"] #subPrefModal .sub-pref-sync-prompt,
#subPrefModal[dir="rtl"] .sub-pref-sync-prompt {
    text-align: right !important;
}

.sub-pref-preview-btn {
    min-height: 44px;
}

.modal-close {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    touch-action: manipulation;
    padding: 0;
}

.modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Subscription preference options - compact */
.pref-option {
    padding: 10px !important;
    gap: 10px !important;
}

.pref-option div {
    font-size: 0.9rem;
}

.pref-option div div {
    font-size: 0.75rem !important;
}

@media (max-width: 480px) {
    .sub-pref-modal-content {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        border-radius: 10px;
    }

    .sub-pref-modal-content.compact {
        padding: 10px;
    }

    .sub-pref-modal-footer {
        gap: 6px;
        padding-top: 8px;
    }

    .sub-pref-modal-footer .btn-primary-lg,
    .sub-pref-modal-footer .control-btn {
        padding: 9px 8px !important;
        font-size: 0.92rem;
    }

    .pref-option {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .pref-option div {
        font-size: 0.85rem;
    }
    
    .pref-option div div {
        font-size: 0.7rem !important;
    }
}

/* Tabs Navigation */
.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1px;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #1e40af;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 8px 8px 0 0; /* Tab shape */
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; /* Overlap border */
}

.tab-btn:hover {
    color: #1e3a8a;
    background: #f8fafc;
}

.tab-btn.active {
    color: var(--primary-color);
    background: white;
    border: 1px solid #e2e8f0;
    border-bottom: 2px solid var(--primary-color); /* Active line */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tabs Navigation - Applied */
.tabs-nav {
    display: flex;
    justify-content: flex-start; /* Left aligned */
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1px;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #1e40af;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    min-width: 140px; /* Wider for better click area */
}

.tab-btn:hover {
    color: #1e3a8a;
    background: #f8fafc;
}

.tab-btn.active {
    color: var(--primary-color);
    background: white;
    border: 1px solid #e2e8f0;
    border-bottom: 2px solid var(--primary-color);
    box-shadow: 0 -2px 3px rgba(0,0,0,0.02); /* Subtle lift */
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}

.tab-confed-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.continent-hub-label {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.86) 100%);
    border: 1px solid rgba(147, 197, 253, 0.45);
}

.continent-hub-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1d4ed8;
    line-height: 1.2;
    color: #0f172a;
}


.manage-empty-state {
    padding: 18px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    text-align: center;
    color: #475569;
}

.manage-empty-state--guided {
    display: grid;
    gap: 10px;
}

.manage-empty-state__icon {
    font-size: 2rem;
    line-height: 1;
}

.manage-empty-state__title {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}

.manage-empty-state__body {
    margin: 0;
    line-height: 1.55;
    color: #64748b;
}

.manage-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.manage-empty-state__chip {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.manage-empty-state__chip:hover {
    background: #dbeafe;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.16);
}
.continent-hub-subtitle {
    margin: 3px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e3a8a;
    opacity: 0.85;
}

.continent-hub-description {
    margin: 8px 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #334155;
}

.hub-guidance-panel {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.hub-guidance-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.hub-guidance-title {
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.hub-guidance-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hub-guidance-title-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.country-hub-guidance .hub-guidance-title {
    line-height: 1.25;
}

.country-hub-guidance .hub-guidance-title-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.country-hub-guidance .hub-guidance-description {
    margin-top: 10px;
}

.hub-guidance-description {
    margin: 6px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #475569;
}

.hub-guidance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.hub-guidance-chip {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    line-height: 1.25;
}

/* Hide tabs when not relevant (e.g. step 3) */
.tabs-nav.hidden {
    display: none;
}

/* Generic Empty Message */
.empty-msg {
    padding: 20px;
    color: #64748b;
    font-style: italic;
    text-align: center;
    width: 100%;
}

/* League Status Styling */
.league-active {
    transition: all 0.3s ease;
    cursor: pointer;
}

.league-active:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #3b82f6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD TYPE HIERARCHY - CSS Architecture
   ═══════════════════════════════════════════════════════════════════════════
   
   CSS class names MATCH card type names exactly (with 'card-' prefix)!
   
   Card Type                    → CSS Class (card- + type name)
   ─────────────────────────────────────────────────────────────
   upcoming_without_defender    → card-upcoming-without-defender
   upcoming_with_defender       → card-upcoming-with-defender
   active_without_defender      → card-active-without-defender
   active_with_defender         → card-active-with-defender
   active_finished_with_winner  → card-active-finished-with-winner
   finished_with_winner         → card-finished-with-winner
   finished_without_winner      → card-finished-without-winner
   
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   LEVEL 1: BASE CARD (all cards inherit from this)
   ───────────────────────────────────────────────────────────────────────────── */
[class^="card-upcoming"],
[class^="card-active"],
[class^="card-finished"],
[class^="card-unreliable"],
[class^="card-postponed"],
[class^="card-temporary"] {
    position: relative;
    border-radius: 12px;
    overflow: visible;
    transition: all 0.2s ease;
}

/* Top accent bar - all cards have this */
[class^="card-upcoming"]::before,
[class^="card-active"]::before,
[class^="card-finished"]::before,
[class^="card-unreliable"]::before,
[class^="card-postponed"]::before,
[class^="card-temporary"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UPCOMING CARDS - White/neutral, countdown focused
   ───────────────────────────────────────────────────────────────────────────── */
.card-upcoming-without-defender,
.card-upcoming-with-defender {
    border: 2px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer !important;
}

.card-upcoming-without-defender::before,
.card-upcoming-with-defender::before {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8);
}

.card-upcoming-without-defender:hover,
.card-upcoming-with-defender:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: #94a3b8 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTIVE CARDS - White with green indicator, clickable
   ───────────────────────────────────────────────────────────────────────────── */
.card-active-without-defender,
.card-active-with-defender {
    border: 2px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer !important;
}

.card-active-without-defender::before,
.card-active-with-defender::before {
    background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
}

.card-active-without-defender:hover,
.card-active-with-defender:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: #cbd5e1 !important;
}

/* ACTIVE FINISHED WITH WINNER - White card like active, tournament ongoing but winner decided */
.card-active-finished-with-winner {
    border: 2px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer !important;
}

.card-active-finished-with-winner::before {
    background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
}

.card-active-finished-with-winner:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FINISHED CARDS - Locked, not clickable
   ───────────────────────────────────────────────────────────────────────────── */

/* FINISHED WITH WINNER - Gold card */
.card-finished-with-winner {
    border: 2px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    cursor: default !important;
}

.card-finished-with-winner::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}

/* FINISHED WITHOUT WINNER - Silver card */
.card-finished-without-winner {
    border: 2px solid #94a3b8 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.25);
    cursor: default !important;
    min-height: 120px;
}

.card-finished-without-winner::before {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8);
}

.card-finished-without-winner .tournament-name {
    font-size: 0.75rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finished-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 10px 8px 6px 8px;
    box-sizing: border-box;
    gap: 6px;
}

.finished-card-body--with-winner {
    justify-content: flex-start;
    gap: 10px;
    padding-top: 16px;
}

.finished-card-logo {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
    margin: 0 auto;
}

.finished-card-body--with-winner .finished-card-logo {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 0;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.16));
}

.finished-card-tournament-name {
    text-align: center;
    line-height: 1.15 !important;
    font-size: 0.84rem !important;
    font-weight: 700;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finished-card-body--with-winner .finished-card-tournament-name {
    font-size: 0.76rem !important;
    font-weight: 800;
    max-width: 88%;
}


.finished-card-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    background: rgba(255, 255, 255, 0.7);
    color: #475569;
    font-size: 0.64rem;
    font-weight: 700;
}

.finished-card-winner-frame {
    width: 100%;
    max-width: 118px;
    margin-top: 6px;
    padding: 4px 6px;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.finished-card-winner-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.finished-card-winner-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: center;
    text-align: center;
}

.finished-card-winner-name {
    font-size: 0.66rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.finished-card-winner-meta {
    font-size: 0.56rem;
    font-weight: 700;
    color: #475569;
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.finished-card-winner-icon {
    font-size: 0.78rem;
    line-height: 1;
    vertical-align: baseline;
}

.finished-card-status-pill,
.card-countdown-badge,
.next-match-countdown {
    margin-top: 6px;
}

.tournament-card-meta {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    min-height: 24px;
    z-index: 10;
}

.tournament-card-meta-left {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
}

.tournament-card-meta-center {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 54px);
}

.tournament-card-meta-right {
    position: absolute;
    right: 0;
    top: -3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tournament-card-slot {
    font-size: 0.65rem;
    line-height: 1;
}

.tournament-card-year {
    font-size: 0.7rem !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
    max-width: 100%;
    white-space: nowrap;
}

.tournament-card-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 22px 8px 8px 8px;
    box-sizing: border-box;
}

.tournament-card-shell--compact {
    padding-top: 24px;
}

.tournament-card-info-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tournament-card-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 6px;
}

.tournament-card-logo--compact {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
}

.tournament-card-name {
    text-align: center;
    line-height: 1.08;
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-wrap: balance;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tournament-card-name--strong {
    font-weight: 600;
}

.tournament-card-title-line {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
    padding: 0 8px;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.12;
}

.tournament-card-title-line--strong {
    font-weight: 800;
}

.tournament-card-title-rail {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: auto !important;
    max-width: 94% !important;
    min-width: 0;
    padding: 3px 10px;
    margin-top: 2px;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.26);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.38), rgba(15, 23, 42, 0.22));
    color: #e2e8f0 !important;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.24);
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.06 !important;
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

.grid-card.card-finished-with-winner .tournament-card-title-rail,
.grid-card.card-active-finished-with-winner .tournament-card-title-rail,
.league-card.card-finished-with-winner .tournament-card-title-rail,
.league-card.card-active-finished-with-winner .tournament-card-title-rail {
    max-width: 92% !important;
    font-size: 0.68rem !important;
    padding: 2px 8px;
    top: 18px;
}

.tournament-card-info-wrap {
    display: inline-flex;
    align-items: center;
}

/* DATA UNRELIABLE - warning style */
.card-unreliable-data {
    border: 2px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    cursor: pointer !important;
}

.card-unreliable-data::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}

.card-unreliable-data:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.28);
}

/* POSTPONED LEAGUE - paused style */
.card-postponed-league {
    border: 2px solid #60a5fa !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
    cursor: pointer !important;
}

.card-postponed-league::before {
    background: linear-gradient(90deg, #60a5fa, #93c5fd, #60a5fa);
}

.card-postponed-league:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.28);
}

/* TEMPORARY IN HOLD - stage transition state */
.card-temporary-in-hold {
    border: 2px solid #fbbf24 !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
    cursor: pointer !important;
}

.card-temporary-in-hold::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}

.card-temporary-in-hold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEGACY SUPPORT - Old class names (will be removed after frontend update)
   ───────────────────────────────────────────────────────────────────────────── */
.finished-card { /* alias for card-finished-winner */
    border: 2px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    position: relative;
    cursor: default !important;
}
.finished-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    border-radius: 3px 3px 0 0;
}

.active-champion-card { /* alias for card-active-winner */
    border: 2px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer !important;
}
.active-champion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
    border-radius: 3px 3px 0 0;
}
.active-champion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.locked-card { /* alias for card-finished-no-winner */
    border: 2px solid #94a3b8 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.25);
    position: relative;
    cursor: default !important;
    overflow: visible;
    min-height: 120px;
}
.locked-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8);
    border-radius: 3px 3px 0 0;
}
.locked-card .tournament-name {
    font-size: 0.75rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* vacation-card styles moved to top of file */

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.league-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.league-name {
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.league-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    line-height: 1.2;
}

.status-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.status-badge.vacation {
    background: #e2e8f0;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.status-badge.active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* ========== Teams Table - Responsive ========== */
.teams-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.teams-table th,
.teams-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.teams-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.teams-table tbody tr:hover {
    background: #f1f5f9;
}

.teams-table img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Team badge (champion/leader indicator) */
.team-badge {
    margin-left: 6px;
    font-size: 0.9em;
    cursor: help;
}

/* Custom Tooltip for team info */
.team-name-cell {
    position: relative;
}

.team-name-text {
    font-weight: 600;
    cursor: help;
}

.team-name-text:hover {
    color: var(--primary-color);
}

/* Keep tournament/league names clean: one line only across all cards */
.tournament-name,
.league-name,
.continent-card-title,
.card-title-single-line {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-subtitle-single-line {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hard enforcement: never wrap league/tournament names inside cards */
.grid-card .tournament-name,
.grid-card .league-name,
.grid-card .card-title-single-line,
.grid-card .finished-card-tournament-name,
.grid-card .card-subtitle-single-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* JavaScript-controlled tooltip */
.custom-tooltip {
    position: fixed;
    background: #0f172a;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border: 1px solid #334155;
    display: none;
}

/* Context menu for star clicks */
.star-context-menu {
    position: fixed;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
    padding: 8px;
    z-index: 10001;
    min-width: 220px;
    display: none;
}

.star-context-menu.show {
    display: block;
    animation: menuFadeIn 0.15s ease;
}

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

.star-context-menu .menu-header {
    padding: 8px 12px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.star-context-menu .menu-item {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    font-size: 0.9rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.star-context-menu .menu-item:hover {
    background: #f1f5f9;
}

.star-context-menu .menu-item.danger {
    color: #dc2626;
}

.star-context-menu .menu-item.danger:hover {
    background: #fee2e2;
}

.pts-cell {
    cursor: help;
}

/* Info button - hidden on desktop, shown on mobile */
.info-btn {
    display: none;
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 6px;
    color: #64748b;
    vertical-align: middle;
}

.info-btn:hover {
    background: #cbd5e1;
}

/* Desktop: Show all columns, hide info button */
@media (min-width: 769px) {
    .teams-table .mobile-only {
        display: none;
    }
    
    .teams-table .desktop-only {
        display: table-cell;
    }
}

/* Mobile: Hide some columns, show info button */
@media (max-width: 768px) {
    .teams-table {
        font-size: 0.85rem;
    }
    
    .teams-table th,
    .teams-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    .teams-table img {
        width: 24px;
        height: 24px;
    }

    .teams-table .desktop-only {
        display: none;
    }
    
    /* Show info button */
    .info-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Smaller form circles */
    .teams-table td:last-child span[style*="border-radius"] {
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        font-size: 10px !important;
    }
}

/* Team Info Modal */
.team-info-modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2050; /* Above back button (2000) */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.team-info-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: slideUp 0.2s ease;
    position: relative;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    padding: 0;
}

.modal-close-btn:hover {
    background: #e2e8f0;
}

.team-info-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-info-grid .info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.team-info-grid .info-row:last-child {
    border-bottom: none;
}

.team-info-grid .info-row.full-width {
    flex-direction: column;
    gap: 4px;
}

.team-info-grid .info-label {
    color: #64748b;
}

.team-info-grid .info-value {
    font-weight: 600;
    color: #1e293b;
}

/* Competition Info Button in League Cards */
/* Explicitly re-enable pointer events: .grid-card span has pointer-events:none which
   can block the button when the browser treats it as affecting children. */
.grid-card .tournament-card-info-wrap {
    pointer-events: auto;
}

.grid-card .info-btn,
.card-content .info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.92) 0%, rgba(37, 99, 235, 0.88) 100%);
    border: 1px solid rgba(191, 219, 254, 0.38);
    width: 40px;
    height: 22px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.9;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: #eff6ff;
    pointer-events: auto;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Lock tournament-card info buttons to compact size; prevents mobile/table styles from enlarging them. */
.grid-card .info-btn {
    width: 40px !important;
    height: 22px !important;
    min-width: 40px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.92) 0%, rgba(37, 99, 235, 0.88) 100%) !important;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.grid-card .info-btn .info-pill-label {
    display: inline-block;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    color: #eff6ff !important;
    line-height: 1 !important;
}

.grid-card .info-btn svg,
.card-content .info-btn svg {
    width: 16px;
    height: 16px;
}

.grid-card:hover .info-btn,
.card-content:hover .info-btn {
    opacity: 1;
}

.grid-card .info-btn:hover,
.card-content .info-btn:hover {
    opacity: 1;
    border-color: rgba(219, 234, 254, 0.65);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.96) 0%, rgba(59, 130, 246, 0.9) 100%) !important;
    transform: translateY(-1px);
}

/* Legacy selector kept for compatibility with older injected markup */
.info-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #eff6ff;
    font-size: 0.62rem;
    pointer-events: auto;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.info-btn:hover .info-circle {
    transform: none;
}

@media (max-width: 768px) {
    .grid-card .info-btn {
        width: 42px !important;
        height: 24px !important;
        min-width: 42px !important;
        min-height: 24px !important;
    }

    .grid-card .info-btn .info-pill-label {
        font-size: 0.64rem !important;
    }
}

/* ========== Tournament View Styles ========== */
.view-data-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.view-data-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Groups Grid */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.groups-grid.groups-grid--fixed-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.group-card {
    background: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.group-header {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 13.6px !important;
    text-align: center;
}

.group-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px !important;
}

.group-table th,
.group-table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px !important;
    line-height: 1.4;
}

.group-table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #64748b;
    font-size: 10.4px !important;
    padding: 6px 8px;
}

.group-table .team-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    padding: 6px 8px;
}

.group-table .team-cell img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.group-table .team-cell span {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px;
    font-size: 12px !important;
}

.group-table .pts {
    font-weight: 700;
    color: #1e293b;
}

.group-table tr.qualify {
    background: rgba(34, 197, 94, 0.1);
}

.group-table tr.eliminate {
    background: rgba(239, 68, 68, 0.1);
}

.groups-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 16px;
    margin-top: 16px;
    background: #f8fafc;
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

.legend-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-item .dot.qualify {
    background: rgba(34, 197, 94, 0.5);
}

.legend-item .dot.eliminate {
    background: rgba(239, 68, 68, 0.5);
}

/* Bracket Styles */
.bracket-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0;
    min-height: 300px;
}

.bracket-round {
    flex-shrink: 0;
    min-width: 200px;
}

.round-header {
    text-align: center;
    font-weight: 700;
    color: #1e293b;
    padding: 12px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 8px 8px 0 0;
    font-size: 0.9rem;
}

.round-matches {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.bracket-match {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bracket-match:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.bracket-match.finished {
    border-color: #22c55e;
}

.match-team {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.match-team:last-of-type {
    border-bottom: none;
}

.match-team img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.match-team .team-name {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-team .score {
    font-weight: 700;
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
}

.match-team.winner {
    background: rgba(34, 197, 94, 0.1);
}

.match-team.winner .team-name {
    font-weight: 700;
    color: #166534;
}

.match-date {
    text-align: center;
    padding: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    background: #f8fafc;
}

/* Playoff Tables */
.playoff-tables {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.playoff-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.playoff-tab {
    padding: 10px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.playoff-tab-label {
    display: block;
    font-weight: 700;
}

.playoff-tab-phase {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.playoff-tab-phase.is-active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.playoff-tab-phase.is-finished {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}

.playoff-tab-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    line-height: 1.2;
    font-weight: 500;
    color: #64748b;
    white-space: normal;
}

.playoff-tab:hover {
    background: #f8fafc;
    border-color: #3b82f6;
}

.playoff-tab.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: transparent;
}

.playoff-tab.active .playoff-tab-meta {
    color: rgba(255, 255, 255, 0.92);
}

.playoff-tab.active .playoff-tab-phase.is-active {
    background: rgba(255, 255, 255, 0.2);
    color: #e8fff1;
    border-color: rgba(255, 255, 255, 0.4);
}

.playoff-tab.active .playoff-tab-phase.is-finished {
    background: rgba(255, 247, 237, 0.18);
    color: #fff4e6;
    border-color: rgba(255, 236, 204, 0.45);
}

.playoff-tabs.playoff-tabs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.playoff-tabs.playoff-tabs-grid.playoff-tabs-grid--many {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    padding-bottom: 10px;
}

.playoff-tabs.playoff-tabs-grid .playoff-tab {
    width: 100%;
    text-align: center;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.92) 100%);
    color: rgba(226, 232, 240, 0.94);
    font-weight: 700;
    transition: all 0.2s ease;
}

.playoff-tabs.playoff-tabs-grid .playoff-tab:hover {
    border-color: rgba(96, 165, 250, 0.65);
    transform: translateY(-1px);
}

.playoff-tabs.playoff-tabs-grid .playoff-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.92) 0%, rgba(37, 99, 235, 0.92) 100%);
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: inset 0 -2px 0 rgba(191, 219, 254, 0.75);
}

.playoff-tabs.playoff-tabs-grid .playoff-tab.active .playoff-tab-meta {
    color: rgba(255, 255, 255, 0.92);
}

.playoff-tabs.playoff-tabs-grid .playoff-tab.active .playoff-tab-phase.is-active {
    background: #dbeafe;
    color: #1e3a8a;
    border-color: #93c5fd;
}

.playoff-tabs.playoff-tabs-grid .playoff-tab.active .playoff-tab-phase.is-finished {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
}

.playoff-table-container {
    background: white;
    border-radius: 12px;
    overflow: visible;
    border: 1px solid #e2e8f0;
}

.playoff-table-container.hidden {
    display: none;
}

.table-title {
    font-weight: 700;
    font-size: 1rem;
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.playoff-standings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.playoff-standings-table th,
.playoff-standings-table td {
    padding: 14px 12px;
    text-align: center;
    border: none;
}

.playoff-standings-table th {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 50px;
    vertical-align: middle;
}

.playoff-standings-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.15s ease;
}

.playoff-standings-table tbody tr:hover {
    background: #f0f4f8;
}

.playoff-standings-table tbody tr:last-child {
    border-bottom: none;
}

.playoff-standings-table td:first-child {
    font-weight: 700;
    color: #64748b;
    width: 50px;
}

.playoff-standings-table .team-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    flex: 1;
}

.playoff-standings-table .team-cell img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.playoff-standings-table .team-cell span {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playoff-standings-table td:nth-child(n+3) {
    font-weight: 500;
    color: #475569;
    font-size: 0.9rem;
    width: 45px;
}

.playoff-standings-table .pts {
    font-weight: 800;
    color: #0f172a;
    font-size: 1.1rem;
    width: 50px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
}

.playoff-standings-table tr.champion {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
}

.playoff-standings-table tr.champion:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.15) 100%);
}

.playoff-standings-table tr.champion td:first-child::before {
    content: '🏆';
    margin-right: 6px;
    font-size: 1.2rem;
}

.playoff-standings-table tr.relegated {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.playoff-standings-table tr.relegated:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
}

/* Argentina Primera Division standings layout */
.arg-standings-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arg-standings-tabs {
    display: grid;
    grid-template-columns: repeat(var(--arg-tab-count, 3), minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.arg-standings-tabs-two-rows {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

.arg-standings-tabs-row {
    display: contents;
}

.arg-tab {
    width: 100%;
    text-align: center;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #475569;
    border-radius: 12px;
    padding: 12px 8px;
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.arg-tab.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: inset 0 -2px 0 #3b82f6;
}

.arg-panel {
    display: none;
}

.arg-panel.active {
    display: block;
}

.arg-panel-group h4 {
    margin: 0 0 8px 0;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 700;
}

.arg-table-wrap {
    margin-bottom: 10px;
}

.arg-table-wrap .teams-table {
    width: 100%;
    table-layout: fixed;
}

.arg-table-wrap .arg-table-promedios {
    table-layout: auto;
    width: 100%;
}

.arg-table-wrap {
    padding-right: 8px;
}

.arg-table td.col-subscribe,
.arg-table th:nth-child(2) {
    padding-right: 8px;
}

.arg-table td.col-team,
.arg-table th:nth-child(3) {
    padding-left: 10px;
}

.arg-table td.col-info,
.arg-table-regular th:nth-child(5),
.arg-table-promedios th:nth-child(6) {
    padding-right: 16px;
    min-width: 58px;
}

.arg-table th,
.arg-table td {
    padding: 10px 8px;
}

.arg-table td,
.arg-table th {
    vertical-align: middle;
}

.arg-team-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.arg-team-cell .team-name-text {
    display: block;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arg-team-cell .team-badge {
    flex-shrink: 0;
}

.arg-team-cell img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.arg-table .fav-star-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 1.5rem;
}

.arg-table .info-btn-mobile {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 1.15rem;
    margin-right: 0;
}

/* Prevent right-edge clipping in standings rows and keep action controls padded */
#teamsGrid .teams-table td.col-info,
#teamsGrid .teams-table th.col-info,
#teamsGrid .arg-table td.col-info {
    padding-right: 16px !important;
    padding-left: 10px !important;
    min-width: 58px;
    overflow: visible;
}

#teamsGrid .teams-table .info-btn-mobile,
#teamsGrid .arg-table .info-btn-mobile {
    margin-right: 2px;
    margin-left: 2px;
}

/* Requested spacing: star and team logo get 3px padding */
#teamsGrid .teams-table .fav-star-btn,
#teamsGrid .arg-table .fav-star-btn {
    padding: 3px !important;
    box-sizing: border-box;
}

#teamsGrid .teams-table .col-team img,
#teamsGrid .arg-table .arg-team-cell img,
#teamsGrid .teams-table .team-name-row img {
    padding: 3px;
    box-sizing: content-box;
}

.arg-top4 {
    background: rgba(22, 163, 74, 0.16);
}

.arg-continental {
    background: rgba(37, 99, 235, 0.16);
}

.arg-relegation {
    background: rgba(220, 38, 38, 0.16);
}

.arg-chip {
    margin-left: 6px;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 700;
}

.arg-chip-lib {
    background: #dbeafe;
    color: #1d4ed8;
}

.arg-chip-sud {
    background: #e0f2fe;
    color: #0369a1;
}

.arg-form-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
}

.arg-form-chip.arg-win {
    background: #16a34a;
}

.arg-form-chip.arg-draw {
    background: #d97706;
}

.arg-form-chip.arg-loss {
    background: #dc2626;
}

.arg-gd-pos {
    color: #22c55e;
}

.arg-gd-neg {
    color: #ef4444;
}

.arg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    padding: 10px 12px;
    color: #e2e8f0;
    font-size: 0.82rem;
}

.arg-table th:nth-child(1),
.arg-table td:nth-child(1) {
    width: 28px;
    text-align: center;
}

.arg-table th:nth-child(2),
.arg-table td:nth-child(2) {
    width: 36px;
    text-align: center;
}

.arg-table-regular th:nth-child(3),
.arg-table-regular td:nth-child(3) {
    width: auto;
    text-align: left;
}

.arg-table-regular th:nth-child(4),
.arg-table-regular td:nth-child(4) {
    width: 58px;
    text-align: center;
}

.arg-table-regular th:nth-child(5),
.arg-table-regular td:nth-child(5) {
    width: 42px;
    text-align: center;
}

.arg-table-promedios th:nth-child(3),
.arg-table-promedios td:nth-child(3) {
    width: auto;
    text-align: left;
}

.arg-table-promedios th:nth-child(4),
.arg-table-promedios td:nth-child(4) {
    width: 52px;
    text-align: center;
}

.arg-table-promedios th:nth-child(5),
.arg-table-promedios td:nth-child(5) {
    width: 48px;
    text-align: center;
}

.arg-table-promedios th:nth-child(6),
.arg-table-promedios td:nth-child(6) {
    width: 58px;
    text-align: center;
    /* Ensure info column doesn't clip; high specificity to override table-layout: fixed */
    min-width: 58px;
    overflow: visible;
}

/* Add clearer spacing between columns in dense standings rows */
#teamsGrid .arg-table td.col-team,
#teamsGrid .arg-table th:nth-child(3) {
    padding-left: 12px;
    padding-right: 10px;
}

#teamsGrid .arg-table-promedios td:nth-child(4),
#teamsGrid .arg-table-promedios th:nth-child(4),
#teamsGrid .arg-table-promedios td:nth-child(5),
#teamsGrid .arg-table-promedios th:nth-child(5) {
    padding-left: 8px;
    padding-right: 8px;
}

.arg-phase-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.6);
    color: #cbd5e1;
    font-size: 0.83rem;
}

/* Loader Ring */
.loader-ring {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

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

/* ========== Dynamic Zone System (all competition formats) ========== */
/* Legacy Swiss classes - kept for backwards compatibility */
.teams-table tr.swiss-direct-qualify {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
}

.teams-table tr.swiss-playoff {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
}

.teams-table tr.swiss-eliminated {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.03));
    opacity: 0.7;
}

/* Dynamic zone separator - uses CSS variable --zone-color */
.teams-table tr.zone-separator {
    background: transparent !important;
    cursor: default !important;
    pointer-events: none !important;
}

.teams-table tr.zone-separator td {
    padding: 10px 12px 8px !important;
    border: none !important;
    border-top: 2px solid var(--zone-color, #64748b) !important;
    text-align: center;
    vertical-align: middle !important;
    background: rgba(15, 23, 42, 0.92) !important;
    position: relative;
    z-index: 2;
}

.teams-table tr.zone-separator .zone-separator-markers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 2px;
}

.teams-table tr.zone-separator .zone-separator-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.teams-table tr.zone-separator .zone-separator-dot-current {
    background: var(--zone-color, #64748b);
}

.teams-table tr.zone-separator .zone-separator-dot-next {
    background: var(--next-zone-color, #94a3b8);
}

.teams-table tr.zone-separator .zone-separator-chevron {
    font-size: 0.75rem;
    color: rgba(203, 213, 225, 0.72);
    line-height: 1;
    letter-spacing: 0;
}

/* Option 1: zone marker directly on each row (left stripe) */
.teams-table tr.zone-row td:first-child {
    box-shadow: inset 3px 0 0 var(--zone-color, transparent);
}

/* Keep standings rows and separators in distinct visual layers on mobile and desktop */
.teams-table tbody tr {
    position: relative;
}

.teams-table tr.zone-separator + tr td {
    border-top: none !important;
}

/* Teams panel cards should follow login dialog look (dark panel + subtle frame) */
#teamsGrid .table-container {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.93) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.45) !important;
    overflow: visible;
}

/* Keep a clear visual gap between info/status cards and the standings table panel */
#teamsGrid .teams-table-container {
    margin-top: 12px;
}

#teamsGrid .teams-panels-gap {
    height: 10px;
}

#teamsGrid .standings-star-hint {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: linear-gradient(180deg, rgba(69, 39, 4, 0.45) 0%, rgba(30, 41, 59, 0.72) 100%);
    color: rgba(255, 237, 213, 0.96);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

html[dir="rtl"] #teamsGrid .standings-star-hint {
    text-align: right;
    font-size: 0.94rem;
    line-height: 1.5;
    letter-spacing: 0;
}

#teamsGrid [style*="background:#f8fafc"],
#teamsGrid [style*="background:#eff6ff"],
#teamsGrid [style*="background:#f1f5f9"] {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.72) 100%) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
    color: rgba(226, 232, 240, 0.92) !important;
}

#teamsGrid [style*="color:#94a3b8"],
#teamsGrid [style*="color:#64748b"],
#teamsGrid [style*="color:#475569"],
#teamsGrid [style*="color:#3b82f6"] {
    color: rgba(203, 213, 225, 0.92) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .arg-standings-tabs-two-rows {
        display: flex;
        flex-direction: column;
    }

    .arg-standings-tabs-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .groups-grid:not(.groups-grid--fixed-3) {
        grid-template-columns: 1fr;
    }

    .groups-grid.groups-grid--fixed-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #teamsGrid .teams-table-container {
        margin-top: 14px;
    }

    #teamsGrid .teams-panels-gap {
        height: 12px;
    }

    #teamsGrid .standings-star-hint {
        margin-bottom: 10px;
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    html[dir="rtl"] #teamsGrid .standings-star-hint {
        font-size: 0.89rem;
    }
    
    .group-table th,
    .group-table td {
        padding: 5px 4px;
        font-size: 0.7rem;
    }
    
    .group-table .team-cell {
        gap: 4px;
        padding: 5px 4px;
    }
    
    .group-table .team-cell span {
        max-width: 70px;
        font-size: 0.7rem;
    }
    
    .group-table .team-cell img {
        width: 14px;
        height: 14px;
    }
    
    /* Extra small: compact */
    .fixtures-table th,
    .fixtures-table td {
        padding: 4px 2px !important;
        font-size: 0.7rem;
        vertical-align: middle !important;
    }
    
    .fixtures-table .team-col {
        gap: 2px;
        min-width: unset;
    }
    
    .fixtures-table .team-col span {
        font-size: 0.65rem;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.15;
        text-align: center;
    }
    
    .fixtures-table .team-col img {
        width: 22px !important;
        height: 22px !important;
    }
    
    .fixtures-table .checkbox-col {
        width: 24px;
    }
    
    .fixtures-table input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    .arg-tab {
        font-size: 0.76rem;
        padding: 10px 6px;
    }

    .arg-subtab {
        font-size: 0.76rem;
        padding: 9px 6px;
    }

    .arg-table th,
    .arg-table td {
        padding: 8px 3px;
        font-size: 0.74rem;
    }

    .arg-table-wrap {
        padding-right: 12px;
    }

    .arg-table td.col-subscribe,
    .arg-table th:nth-child(2) {
        padding-right: 8px;
    }

    .arg-table td.col-team,
    .arg-table th:nth-child(3) {
        padding-left: 8px;
    }

    .arg-table td.col-info,
    .arg-table-regular th:nth-child(5),
    .arg-table-promedios th:nth-child(6) {
        padding-right: 12px;
        min-width: 50px;
    }

    .arg-team-cell {
        gap: 10px;
    }

    .arg-team-cell img {
        width: 20px;
        height: 20px;
    }

    .arg-table .fav-star-btn,
    .arg-table .info-btn-mobile {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    #teamsGrid .teams-table td.col-info,
    #teamsGrid .teams-table th.col-info,
    #teamsGrid .arg-table td.col-info {
        padding-right: 12px !important;
        padding-left: 6px !important;
        min-width: 50px;
    }

    .arg-chip {
        display: inline-block;
        margin-left: 4px;
        padding: 2px 4px;
        font-size: 0.62rem;
    }

    .arg-table th:nth-child(2),
    .arg-table td:nth-child(2) {
        width: 30px;
    }

    .arg-table-regular th:nth-child(4),
    .arg-table-regular td:nth-child(4),
    .arg-table-promedios th:nth-child(4),
    .arg-table-promedios td:nth-child(4) {
        width: 42px;
    }

    .arg-table-regular th:nth-child(5),
    .arg-table-regular td:nth-child(5),
    .arg-table-promedios th:nth-child(6),
    .arg-table-promedios td:nth-child(6) {
        width: 38px;
    }

    .arg-table-promedios th:nth-child(6),
    .arg-table-promedios td:nth-child(6) {
        width: 30px;
    }

    .arg-team-cell .team-name-text {
        max-width: 100%;
        font-size: 0.73rem;
    }

    .arg-table-promedios th:nth-child(5),
    .arg-table-promedios td:nth-child(5) {
        width: 42px;
    }

    .arg-team-cell .team-name-text {
        max-width: 100%;
    }
    

    /* Signup autocomplete suggestion menus */
    .register-autocomplete-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.98) 100%) !important;
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.5) !important;
        max-height: 230px;
        overflow-y: auto;
        z-index: 1200;
        padding: 6px;
    }

    .register-autocomplete-menu::-webkit-scrollbar {
        width: 8px;
    }

    .register-autocomplete-menu::-webkit-scrollbar-track {
        background: rgba(30, 41, 59, 0.55);
        border-radius: 8px;
    }

    .register-autocomplete-menu::-webkit-scrollbar-thumb {
        background: rgba(56, 189, 248, 0.45);
        border-radius: 8px;
    }

    .register-suggestion-item {
        width: 100%;
        border: none;
        background: transparent;
        text-align: left;
        padding: 9px 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: background 0.16s ease, border-color 0.16s ease;
        border: 1px solid transparent;
    }

    .register-suggestion-item:hover,
    .register-suggestion-item:focus {
        background: rgba(30, 58, 138, 0.32) !important;
        border-color: rgba(56, 189, 248, 0.38);
        outline: none;
    }

    .register-suggestion-logo {
        width: 20px;
        height: 20px;
        object-fit: contain;
        border-radius: 999px;
        flex: 0 0 20px;
        background: rgba(15, 23, 42, 0.55);
    }

    .register-suggestion-text {
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .register-suggestion-name {
        color: #e2e8f0 !important;
        font-weight: 600;
        font-size: 0.92rem;
    }

    .register-suggestion-meta {
        color: #94a3b8 !important;
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .register-suggestion-empty {
        padding: 10px 12px;
        color: #cbd5e1 !important;
        font-size: 0.86rem;
    }
    .fixtures-table .datetime-col .date-part {
        font-size: 0.6rem;
    }
    
    .fixtures-table .datetime-col .time-part,
    .fixtures-table .datetime-col .score-part {
        font-size: 0.7rem;
    }
    
    .bracket-container {
        padding: 10px;
    }
    
    .bracket-round {
        min-width: 180px;
    }
    
    .playoff-tabs {
        flex-wrap: wrap;
    }

    .playoff-tabs.playoff-tabs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* iOS-only safety override: keep Promedios info column/button from clipping without changing Android layout */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        #teamsGrid .teams-table td.col-info,
        #teamsGrid .teams-table th.col-info,
        #teamsGrid .arg-table td.col-info {
            padding-right: 14px !important;
            padding-left: 8px !important;
            min-width: 56px !important;
        }

        #teamsGrid .arg-table-regular th:nth-child(5),
        #teamsGrid .arg-table-regular td:nth-child(5),
        #teamsGrid .arg-table-promedios th:nth-child(6),
        #teamsGrid .arg-table-promedios td:nth-child(6) {
            width: 54px !important;
            min-width: 54px !important;
        }

        #teamsGrid .arg-table-promedios th:nth-child(6),
        #teamsGrid .arg-table-promedios td:nth-child(6) {
            overflow: visible !important;
        }

        #teamsGrid .arg-table .info-btn-mobile {
            margin-right: 2px !important;
            margin-left: 2px !important;
        }
    }
}

/* Promedios tab hardening: override legacy mobile button/col sizing for this specific table */
@media (max-width: 768px) {
     /* Keep column order stable only for Promedios in RTL languages (Hebrew):
         rank -> star -> team -> avg -> pts -> info */
     #stepTeam #teamsGrid .arg-table-promedios,
     #stepTeam #teamsGrid .arg-table-promedios thead,
     #stepTeam #teamsGrid .arg-table-promedios tbody,
     #stepTeam #teamsGrid .arg-table-promedios tr,
     #stepTeam #teamsGrid .arg-table-promedios th,
     #stepTeam #teamsGrid .arg-table-promedios td {
        direction: ltr !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios {
        table-layout: fixed !important;
        width: 100% !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios th:nth-child(1),
    #stepTeam #teamsGrid .arg-table-promedios td:nth-child(1) {
        width: 24px !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios th:nth-child(2),
    #stepTeam #teamsGrid .arg-table-promedios td:nth-child(2) {
        width: 34px !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios th:nth-child(4),
    #stepTeam #teamsGrid .arg-table-promedios td:nth-child(4) {
        width: 50px !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios th:nth-child(5),
    #stepTeam #teamsGrid .arg-table-promedios td:nth-child(5) {
        width: 38px !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios td.col-info,
    #stepTeam #teamsGrid .arg-table-promedios th:nth-child(6) {
        width: 46px !important;
        min-width: 46px !important;
        padding-right: 8px !important;
        padding-left: 6px !important;
        overflow: visible !important;
    }

    #stepTeam #teamsGrid .arg-table-promedios td.col-info .info-btn-mobile {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .groups-grid {
        gap: 8px;
    }
    
    .group-table th,
    .group-table td {
        padding: 4px 2px;
        font-size: 0.65rem;
    }
    
    .group-table .team-cell span {
        max-width: 60px;
    }
    
    /* Compact on all mobile sizes */
    .fixtures-table th,
    .fixtures-table td {
        padding: 4px 2px !important;
        vertical-align: middle !important;
    }
}

/* ========== Sync Modal (Add to Calendar) ========== */
.sync-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.sync-modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 340px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sync-modal-close {
    position: absolute;
    top: 12px;
    right: auto;
    inset-inline-end: 12px;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.sync-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.sync-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.sync-modal-header h2 {
    margin: 0 0 6px 0;
    font-size: 1.3rem;
    color: #1e293b;
}

.sync-modal-header p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.sync-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.sync-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
}

.sync-btn-apple {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}

.sync-btn-apple:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.sync-btn-google {
    background: #4285f4;
    border: none;
    color: white;
}

.sync-btn-google:hover {
    background: #3b78e7;
}

.sync-modal-copy {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
}

.sync-modal-copy > span {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 8px;
    text-align: center;
}

.sync-copy-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.sync-copy-row input {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    height: 40px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.sync-copy-row button {
    padding: 0 18px;
    height: 40px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    box-sizing: border-box;
}

.sync-copy-row button:hover {
    background: #1d4ed8;
}

.sync-modal-note {
    margin: 14px 0 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

/* Mobile adjustments for sync modal */
@media (max-width: 400px) {
    .sync-modal-content {
        padding: 20px;
    }
    
    .sync-modal-header h2 {
        font-size: 1.2rem;
    }
    
    .sync-btn {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
}

/* ========== Manage Calendar Modal ========== */
.manage-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 12px;
}

/* ========== Calendar Sync Modal (Tabbed) ========== */
.calendar-sync-modal-content {
    width: min(392px, calc(100vw - 10mm));
    max-height: calc(100dvh - 24px);
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#calendarSyncModal .calendar-sync-modal-content {
    position: relative;
}

#calendarSyncModal .modal-close {
    top: 8px;
    right: 8px;
    width: 42px;
    height: 42px;
    z-index: 20;
}

.calendar-sync-header {
    text-align: center;
    margin-bottom: 10px;
    padding-right: 52px;
    min-height: 44px;
}

.calendar-sync-header-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.calendar-sync-header-leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
    font-size: 18px;
    line-height: 1;
}

.calendar-sync-header-titles {
    min-width: 0;
}

.calendar-sync-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.calendar-sync-header-icon span {
    font-size: 23px;
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.3));
}

.calendar-sync-header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.18rem;
}

.calendar-sync-header p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.84rem;
}

.calendar-sync-tab-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 8px;
    flex-shrink: 0;
}

.calendar-sync-global-tip {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    font-size: 12px;
    color: #78350f;
    line-height: 1.35;
    flex-shrink: 0;
}

.calendar-sync-global-tip--footer {
    margin-top: 10px;
}

.calendar-sync-panel-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    margin-right: -2px;
}

.calendar-sync-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(191, 219, 254, 0.8);
    background: rgba(239, 246, 255, 0.7);
    color: #1e293b;
    border-radius: 10px;
    padding: 10px 6px;
    min-height: 38px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.calendar-sync-tab-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.3));
}

.calendar-sync-tab-label {
    display: inline-block;
    line-height: 1.15;
}

.calendar-sync-tab-btn.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92) 0%, rgba(29, 78, 216, 0.92) 100%);
    color: #fff;
    border-color: rgba(37, 99, 235, 0.95);
}

.calendar-sync-panel {
    display: none;
    gap: 10px;
}

.calendar-sync-panel.active {
    display: grid;
}

.calendar-sync-section {
    margin-bottom: 18px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.calendar-sync-section h3 {
    font-size: 16px;
    margin: 0 0 12px;
    color: #1e293b;
}

.calendar-sync-primary-btn,
.calendar-sync-action-btn {
    display: block;
    width: 100%;
    padding: 11px 12px;
    min-height: 44px;
    margin-bottom: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    text-wrap: balance;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.calendar-sync-primary-btn:active,
.calendar-sync-action-btn:active {
    transform: scale(0.98);
}

.calendar-sync-primary-apple {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.86) 0%, rgba(31, 41, 55, 0.86) 100%);
    color: #fff;
}

.calendar-sync-primary-apple:hover {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.94) 0%, rgba(55, 65, 81, 0.94) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.calendar-sync-primary-google {
    background: linear-gradient(135deg, rgba(25, 55, 120, 0.85) 0%, rgba(20, 45, 100, 0.85) 100%);
    color: #fff;
}

.calendar-sync-primary-google:hover {
    background: linear-gradient(135deg, rgba(35, 70, 145, 0.92) 0%, rgba(28, 55, 115, 0.92) 100%);
    box-shadow: 0 4px 12px rgba(25, 55, 120, 0.25);
}

.calendar-sync-copy-btn {
    background: linear-gradient(135deg, rgba(20, 90, 75, 0.85) 0%, rgba(15, 70, 60, 0.85) 100%);
    color: #fff;
}

.calendar-sync-copy-btn:hover {
    background: linear-gradient(135deg, rgba(30, 110, 95, 0.92) 0%, rgba(22, 85, 70, 0.92) 100%);
    box-shadow: 0 4px 12px rgba(20, 90, 75, 0.25);
}

.calendar-sync-download-btn {
    background: linear-gradient(135deg, rgba(120, 75, 15, 0.85) 0%, rgba(100, 60, 10, 0.85) 100%);
    color: #fff;
}

.calendar-sync-download-btn:hover {
    background: linear-gradient(135deg, rgba(140, 90, 20, 0.92) 0%, rgba(115, 70, 15, 0.92) 100%);
    box-shadow: 0 4px 12px rgba(120, 75, 15, 0.25);
}

.calendar-sync-button-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.calendar-sync-button-group-desktop {
    grid-template-columns: 1.2fr 0.8fr;
}

.calendar-sync-panel[data-panel="desktop"] .calendar-sync-section {
    margin-bottom: 10px;
    padding: 16px;
}

.calendar-sync-panel[data-panel="desktop"] .calendar-sync-button-group {
    margin-bottom: 10px;
}

.calendar-sync-button-group .calendar-sync-primary-btn,
.calendar-sync-button-group .calendar-sync-action-btn {
    margin-bottom: 0;
}

.calendar-sync-inline-btn {
    margin-top: 10px;
    margin-bottom: 0;
}

.calendar-sync-instructions {
    margin-top: 16px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

.calendar-sync-instructions-tight {
    margin-top: 10px;
}

.calendar-sync-disclosure {
    margin-top: 10px;
    border: 1px solid #dbe3f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.calendar-sync-disclosure summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
}

.calendar-sync-disclosure summary::-webkit-details-marker {
    display: none;
}

.calendar-sync-disclosure summary::after {
    content: '▾';
    float: right;
    color: #64748b;
}

.calendar-sync-disclosure[open] summary::after {
    content: '▴';
}

.calendar-sync-disclosure .calendar-sync-instructions,
.calendar-sync-disclosure .calendar-sync-url-box {
    margin-top: 0;
    border: 0;
    border-radius: 0;
}

.calendar-sync-disclosure-share .calendar-sync-url-box {
    border-top: 1px solid #e2e8f0;
}

.calendar-sync-steps {
    margin-top: 10px;
}

.calendar-sync-step-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1e3a8a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.calendar-sync-step-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    color: #374151;
    line-height: 1.55;
}

.calendar-sync-step-row-spaced {
    margin-top: 12px;
}

.calendar-sync-url-box {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    word-break: break-all;
    color: #0f172a;
    user-select: all;
    cursor: text;
}

.calendar-sync-tip {
    margin: 6px auto 0;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    font-size: 14px;
    color: #78350f;
    max-width: 92%;
}

.calendar-sync-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #9a3412;
    line-height: 1.6;
}

.calendar-sync-url-help {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
}

.calendar-sync-share-copy {
    font-size: 14px;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.6;
}

.calendar-sync-invite-form {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-sync-invite-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    padding: 10px 12px;
}

.calendar-sync-invite-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.calendar-sync-share-subtitle {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 2px 0 8px;
}

.calendar-sync-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.calendar-sync-share-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.calendar-sync-share-chip:hover {
    opacity: 0.88;
}

.calendar-sync-share-whatsapp {
    background: #25d366;
}

.calendar-sync-share-email {
    background: #6366f1;
}

.calendar-sync-share-copy-btn {
    background: #0f172a;
}

@media (max-width: 420px) {
    .calendar-sync-modal-content {
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        padding: 14px 10px 10px;
    }

    .calendar-sync-tab-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-top: 2px;
    }

    #calendarSyncModal .modal-close {
        top: 6px;
        right: 6px;
        width: 40px;
        height: 40px;
    }

    .calendar-sync-header {
        padding-right: 48px;
        min-height: 42px;
    }

    .calendar-sync-header-leading-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
        border-radius: 8px;
    }

    .calendar-sync-header h2 {
        font-size: 1.08rem;
    }

    .calendar-sync-tab-btn {
        font-size: 0.64rem;
        padding: 9px 4px;
        min-height: 36px;
        flex-direction: column;
        gap: 2px;
    }

    .calendar-sync-tab-emoji {
        font-size: 0.78rem;
    }

    .calendar-sync-tab-label {
        font-size: 0.58rem;
        letter-spacing: 0.01em;
    }

    .calendar-sync-button-group {
        grid-template-columns: 1fr;
    }

    .calendar-sync-global-tip {
        font-size: 11px;
        padding: 8px 10px;
        margin-bottom: 8px;
    }

    .calendar-sync-section {
        padding: 14px;
        margin-bottom: 14px;
    }

    .calendar-sync-primary-btn,
    .calendar-sync-action-btn {
        padding: 10px 9px;
        font-size: 11.5px;
        min-height: 42px;
    }

    .calendar-sync-panel[data-panel="desktop"] .calendar-sync-button-group-desktop {
        grid-template-columns: 1.25fr 0.75fr;
        gap: 6px;
    }

    .calendar-sync-panel[data-panel="desktop"] .calendar-sync-section {
        margin-bottom: 8px;
        padding: 12px;
    }

    .calendar-sync-step-row {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .calendar-sync-url-box {
        font-size: 11px;
        padding: 10px;
    }

    .calendar-sync-tip {
        margin-top: 2px;
        padding: 12px;
        font-size: 13px;
        max-width: 88%;
    }

    .calendar-sync-share-row {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.manage-modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: modalSlideIn 0.2s ease-out;
}

.manage-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    inset-inline-end: 10px;
    inset-inline-start: auto;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.manage-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.manage-modal-header {
    text-align: center;
    margin-bottom: 16px;
    padding-inline: 56px;
    min-height: 68px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    row-gap: 8px;
}

.manage-modal-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
    color: #1e293b;
}

.manage-modal-header p {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 34ch;
    text-align: center;
    text-wrap: pretty;
}

#manageModal .dialog-title-inline-icon {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

#manageModal .dialog-title-inline-icon__text {
    text-align: center;
    overflow-wrap: anywhere;
}

.manage-sync-card {
    flex: 1;
    padding: 12px 8px;
    border-radius: 10px;
    text-align: center;
}

.manage-sync-card .manage-sync-icon {
    display: block;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.manage-sync-card strong {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.manage-sync-card p {
    font-size: 0.7rem;
    margin: 0 0 8px 0;
}

.manage-sync-card button {
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.manage-sync-auto {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.manage-sync-auto strong { color: #166534; }
.manage-sync-auto p { color: #15803d; }
.manage-sync-auto button {
    background: #16a34a;
    color: white;
}

.manage-sync-download {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.manage-sync-download strong { color: #475569; }
.manage-sync-download p { color: #64748b; }
.manage-sync-download button {
    background: #e2e8f0;
    color: #475569;
}

.manage-sync-download button:not([disabled]) {
    background: #2563eb;
    color: white;
}

.manage-events-section {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
    overflow: hidden;
}

.manage-events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.manage-events-header span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.manage-events-header button {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
}

.manage-tabs-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.manage-tab-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.manage-empty-state {
    padding: 18px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    text-align: center;
    color: #475569;
}
.manage-empty-state--obsidian {
    border-style: solid;
    border-color: #1f2937;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: #cbd5e1;
    box-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.85);
}
.manage-empty-state--guided {
    display: grid;
    gap: 10px;
}
.manage-empty-state__icon {
    font-size: 2rem;
    line-height: 1;
}
.manage-empty-state__title {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}
.manage-empty-state--obsidian .manage-empty-state__title {
    color: #f8fafc;
}
.manage-empty-state__body {
    margin: 0;
    line-height: 1.55;
    color: #64748b;
}
.manage-empty-state--obsidian .manage-empty-state__body {
    color: #cbd5e1;
}
.manage-empty-state--obsidian .manage-empty-state__icon {
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.5));
}
.manage-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.manage-empty-state__chip {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.manage-empty-state__chip:hover {
    background: #dbeafe;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.16);
}

.btn-sync-now {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-sync-now:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.btn-sync-now:active {
    transform: translateY(0);
}

.btn-sync-now span {
    font-size: 1rem;
}

.manage-events-list {
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
    padding: 4px 0;
}

/* Improve visual separation between upcoming matches in the manage modal. */
#manageModal .manage-events-list .manage-match-card {
    margin-bottom: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(2, 6, 23, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

#manageModal .manage-events-list .manage-match-card.manage-match-card--h2h-open {
    overflow: visible;
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

#manageModal .manage-events-list .manage-match-card.manage-match-card--h2h-open .manage-h2h-details[open] {
    position: relative;
    z-index: 3;
}

#manageModal .manage-events-list .manage-match-card:last-child {
    margin-bottom: 0;
}

#manageModal .manage-match-card__header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

#manageModal .manage-match-card__body {
    padding: 12px;
}

#manageModal .manage-match-card__footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.42);
}

.manage-loading {
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.manage-loading .loader-ring {
    margin: 0 auto 8px auto;
}

.manage-loading p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.manage-clear-section {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.manage-clear-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: white;
    border: 2px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
}

.manage-clear-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.manage-clear-btn:active {
    transform: translateY(0);
}

.manage-clear-subs {
    border-color: #fde68a;
    color: #d97706;
}

.manage-clear-subs:hover {
    background: #fffbeb;
    border-color: #fcd34d;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}

/* ========== Match Card Styles (Improved Upcoming Matches) ========== */
.match-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.match-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.match-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.match-datetime {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.match-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.match-time {
    font-size: 0.75rem;
    color: #64748b;
}

.match-league {
    font-size: 0.7rem;
    color: #94a3b8;
    background: white;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-card-body {
    padding: 16px 14px;
}

.manage-competition-strip {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}

.manage-competition-title {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: #334155;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.manage-competition-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.manage-competition-chip--leg {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.manage-leg-details {
    margin-top: 8px;
}

.manage-leg-details summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.76rem;
    color: #1d4ed8;
    font-weight: 600;
}

.manage-h2h-details summary {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 6px 0;
}

.manage-leg-details summary::-webkit-details-marker {
    display: none;
}

.manage-leg-details summary::before {
    content: '▸';
    margin-right: 6px;
    display: inline-block;
    transition: transform 0.15s ease;
}

.manage-leg-details[open] summary::before {
    transform: rotate(90deg);
}

.manage-leg-details__body {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px dashed #bfdbfe;
    background: #f8fbff;
    color: #1e3a8a;
    font-size: 0.78rem;
    font-weight: 600;
}

.manage-leg-details__section + .manage-leg-details__section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(147, 197, 253, 0.6);
}

.manage-leg-details__label {
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1d4ed8;
}

.manage-leg-details__note {
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
}

/* Inline chip stacked variant (wraps sublines below icon+label) */
.manage-leg-details__inline-chip--stacked {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Subline rows inside a stacked inline chip */
.manage-leg-details__inline-subline {
    width: 100%;
    padding-inline-start: 28px;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 2px;
}

[dir="rtl"] .manage-leg-details__inline-subline {
    padding-inline-start: 0;
    padding-inline-end: 28px;
    text-align: right;
}

/* Base light inline-chip (outside dark dialogs) */
.manage-leg-details__inline-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.manage-leg-details__inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    min-width: 20px;
    flex-shrink: 0;
}

.manage-leg-details__inline-label {
    flex: 1;
    color: #1e3a8a;
    font-size: 0.78rem;
    font-weight: 600;
}

.manage-competition-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.match-team-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.3;
}

.match-vs {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    flex-shrink: 0;
}

.match-card-footer {
    padding: 10px 14px;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

.btn-remove-match {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-remove-match:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
}

.btn-remove-match:active {
    transform: translateY(0);
}

.btn-remove-match span {
    font-size: 1rem;
}

.match-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-match-card {
    border-color: rgba(0, 210, 255, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

.live-league-badge {
    background: #00d2ff !important;
    color: #001e3c !important;
    border: 1px solid rgba(0, 30, 60, 0.28) !important;
    font-weight: 800 !important;
}

.live-team-logo {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)) !important;
}

.btn-sync-match {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #00d2ff;
    color: #001e3c;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-sync-match:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 210, 255, 0.3);
    filter: brightness(1.03);
}

/* Smart Search modal */
#smartSearchModal.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.45);
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.smart-search-content {
    max-width: 480px;
    width: 100%;
    max-height: min(88vh, 88dvh);
    overflow: hidden;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.smart-search-close {
    top: 12px;
    right: 12px;
}

.smart-search-header {
    margin-bottom: 12px;
    padding-right: 36px;
}

.smart-search-title {
    margin: 0;
    font-size: 1.2rem;
    color: #1e293b;
}

.smart-search-subtitle {
    margin: 4px 0 0 0;
    color: #64748b;
    font-size: 0.85rem;
}

.smart-search-input {
    width: 100%;
    height: 46px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 1rem;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.smart-search-input:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.smart-search-results {
    margin-top: 12px;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    padding: 6px;
}

.smart-search-empty {
    color: #94a3b8;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    margin: 0;
}

.smart-search-intro {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.smart-search-intro-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.smart-search-intro-subtitle {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

.smart-search-intro-chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smart-search-intro-chip {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 5px 9px;
}

.smart-search-intro-hint {
    margin-top: 10px;
    font-size: 0.76rem;
    color: #475569;
}

html[dir="rtl"] #smartSearchModal .smart-search-content {
    direction: rtl;
}

html[dir="rtl"] #smartSearchModal .smart-search-close {
    right: auto;
    left: 12px;
}

html[dir="rtl"] #smartSearchModal .smart-search-header {
    padding-right: 0;
    padding-left: 36px;
    text-align: right;
}

html[dir="rtl"] #smartSearchModal .smart-search-input {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #smartSearchModal .smart-search-intro,
html[dir="rtl"] #smartSearchModal .smart-search-intro-title,
html[dir="rtl"] #smartSearchModal .smart-search-intro-subtitle,
html[dir="rtl"] #smartSearchModal .smart-search-intro-hint {
    text-align: right;
}

html[dir="rtl"] #smartSearchModal .smart-search-intro-chips {
    direction: rtl;
    justify-content: flex-end;
}

.search-target-card {
    position: relative;
    z-index: 10;
    animation: ocean-pulse 3s ease-in-out 1;
}

@keyframes ocean-pulse {
    0% {
        border-color: rgba(0, 210, 255, 0.15);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        transform: scale(1);
    }
    10% {
        border-color: #00d2ff;
        box-shadow: 0 0 34px rgba(0, 210, 255, 0.78);
        transform: scale(1.03);
    }
    90% {
        border-color: #00d2ff;
        box-shadow: 0 0 34px rgba(0, 210, 255, 0.78);
        transform: scale(1.03);
    }
    100% {
        border-color: rgba(0, 210, 255, 0.15);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        transform: scale(1);
    }
}

.search-target-card :is(img, svg, .tab-icon, .calendar-sync-tab-emoji, .quick-action-icon, .finished-card-winner-icon, .auth-icon, .continent-card-icon, .continent-card-fallback) {
    filter: brightness(1.2) !important;
    transition: filter 0.2s ease-in-out;
}

.search-jump-spotlight {
    position: relative;
    z-index: 11;
    animation: search-jump-spotlight-pulse 5s ease-in-out 1;
}

@keyframes search-jump-spotlight-pulse {
    0% {
        transform: scale(1);
        border-color: rgba(125, 211, 252, 0.28);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    8% {
        transform: scale(1.02);
        border-color: rgba(250, 204, 21, 0.95);
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.55), 0 0 34px rgba(125, 211, 252, 0.55), 0 18px 34px rgba(2, 6, 23, 0.52);
    }
    25% {
        transform: scale(1.025);
        border-color: rgba(125, 211, 252, 0.92);
        box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.4), 0 0 38px rgba(125, 211, 252, 0.45), 0 18px 34px rgba(2, 6, 23, 0.52);
    }
    85% {
        transform: scale(1.015);
        border-color: rgba(125, 211, 252, 0.88);
        box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.28), 0 0 28px rgba(125, 211, 252, 0.28), 0 16px 30px rgba(2, 6, 23, 0.48);
    }
    100% {
        transform: scale(1);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* Mobile adjustments for match cards */
@media (max-width: 480px) {
    .smart-search-content {
        padding: 16px;
        border-radius: 14px;
        max-height: calc(100vh - 14px);
        max-height: calc(100dvh - 14px);
    }

    .smart-search-title {
        font-size: 1.1rem;
    }

    .smart-search-subtitle {
        font-size: 0.8rem;
    }

    .smart-search-results {
        max-height: 52vh;
    }

    .match-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .match-league {
        align-self: flex-end;
    }
    
    .match-teams {
        flex-direction: column;
        gap: 8px;
    }
    
    .match-team-name {
        font-size: 0.9rem;
    }
    
    .match-vs {
        transform: rotate(90deg);
        margin: 4px 0;
    }
}


/* ==================================================================
   MIDNIGHT OBSIDIAN THEME
   Single consolidated override — replaces all previous stacked layers
   ================================================================== */

/* ---- CSS Variables: override for dark theme ---- */
:root {
    --bg-body: #030712;
    --card-bg: rgba(31, 41, 55, 0.45);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-primary: #f9fafb;
    --text-secondary: rgba(249, 250, 251, 0.7);
    --border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Body & HTML: dark obsidian background ---- */
html,
body {
    background: radial-gradient(ellipse at 50% 0%, #111827 0%, #030712 100%) !important;
    background-attachment: fixed !important;
    background-color: #030712 !important;
    color: #f9fafb !important;
    min-height: 100vh !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Kill all body pseudo-element overlays */
body::before,
body::after {
    content: none !important;
    display: none !important;
}

/* ---- Container / Layout: transparent wrappers ---- */
.container,
.main,
.main-content,
.page-wrapper,
.page-content,
.content-wrap,
.wrapper,
.explorer-section,
.explorer-step,
.cards-grid,
#countriesGrid,
#leaguesGrid,
#teamsGrid,
.fixtures-section,
#fixturesContainer,
.page-info-panel-wrap,
.country-region-grid,
.search-section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure grids don't gain pseudo overlays */
.cards-grid::before,
.cards-grid::after,
#countriesGrid::before,
#countriesGrid::after,
.explorer-step::before,
.explorer-step::after {
    content: none !important;
    display: none !important;
}

/* ---- Smoked Glass: all card types ---- */
.card,
.grid-card,
.root-explorer-card,
.country-grid-card,
.continent-grid-card,
.match-card,
.finished-card,
.league-card,
.card-glass-base {
    background: rgba(31, 41, 55, 0.72) !important;
    background-color: rgba(31, 41, 55, 0.72) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(110%) !important;
    backdrop-filter: blur(16px) saturate(110%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #f9fafb !important;
    isolation: isolate !important;
}

/* Midnight obsidian: force dark bg on root-explorer-cards at all viewport sizes
   (overrides the @media(max-width:768px) white-gradient rule which has higher specificity) */
.root-explorer-grid .root-explorer-card {
    background: rgba(31, 41, 55, 0.72) !important;
    background-color: rgba(31, 41, 55, 0.72) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(110%) !important;
    backdrop-filter: blur(16px) saturate(110%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Keep card internal elements transparent */
.grid-card > :not(img),
.root-explorer-card > :not(img),
.country-grid-card > :not(img),
.continent-grid-card > :not(img),
.match-card > :not(img),
.finished-card > :not(img),
.league-card > :not(img) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Kill card pseudo-element gradients */
.grid-card::before,
.root-explorer-card::before,
.country-grid-card::before,
.continent-grid-card::before,
.match-card::before,
.finished-card::before,
.league-card::before {
    background: transparent !important;
    background-image: none !important;
}

.grid-card::after,
.root-explorer-card::after,
.country-grid-card::after,
.continent-grid-card::after,
.match-card::after,
.finished-card::after,
.league-card::after {
    opacity: 0.04 !important;
    filter: blur(1.5px) !important;
}

/* ---- Domestic competition sections (country-region) ---- */
.country-region-section,
.country-region-section-other {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.82) 0%, rgba(30, 41, 59, 0.78) 100%) !important;
    background-color: rgba(45, 58, 80, 0.8) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
}

.country-region-section-other {
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.country-region-section::before,
.country-region-section-other::before {
    background: transparent !important;
    background-image: none !important;
}

.country-region-section > *,
.country-region-section-other > * {
    background-color: transparent !important;
    background-image: none !important;
}

.country-region-title {
    color: #f9fafb !important;
}

.country-region-description {
    color: rgba(249, 250, 251, 0.6) !important;
}

/* ---- Page info panel ---- */
.page-info-panel,
#pageInfoPanel .page-info-panel {
    background: rgba(31, 41, 55, 0.45) !important;
    background-color: rgba(31, 41, 55, 0.45) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

#pageInfoPanel .page-info-title {
    color: #f9fafb !important;
    -webkit-text-fill-color: #f9fafb !important;
}

#pageInfoPanel .page-info-description {
    color: rgba(249, 250, 251, 0.75) !important;
}

/* ---- Card borders: state-specific ---- */

/* Default: all cards — thin neutral */
.grid-card,
.root-explorer-card,
.country-grid-card,
.continent-grid-card,
.match-card,
.finished-card,
.league-card,
.card-glass-base {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Active / searched: soft white glow */
.card-active-highlight,
.search-target-card {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Keep tournament status cards visually consistent across screen widths */
.grid-card.card-upcoming-without-defender,
.grid-card.card-upcoming-with-defender,
.grid-card.card-active-without-defender,
.grid-card.card-active-with-defender,
.grid-card.card-active-finished-with-winner,
.grid-card.card-finished-with-winner,
.grid-card.card-finished-without-winner {
    background: rgba(31, 41, 55, 0.72) !important;
    background-color: rgba(31, 41, 55, 0.72) !important;
    background-image: none !important;
}

/* Active-with-defender */
.grid-card.card-active-with-defender {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Finished with winner: neutral obsidian accent */
.grid-card.card-finished-with-winner,
.grid-card.card-active-finished-with-winner,
.active-champion-card {
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Winner frame: dark-glass frame matching countdown badge style */
.finished-card-winner-frame {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    background-color: rgba(15, 23, 42, 0.88) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border-radius: 10px !important;
    padding: 5px 10px !important;
}

/* Keep winner frame neutral on finished-with-winner cards */
.grid-card.card-finished-with-winner .finished-card-winner-frame,
.grid-card.card-active-finished-with-winner .finished-card-winner-frame {
    border-color: rgba(148, 163, 184, 0.32) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.finished-card-winner-inner {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.finished-card-winner-name {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

.finished-card-winner-meta {
    color: rgba(203, 213, 225, 0.9) !important;
    -webkit-text-fill-color: rgba(203, 213, 225, 0.9) !important;
}

.finished-card-winner-frame--split {
    width: calc(100% + 14px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: -7px !important;
    margin-right: -7px !important;
    margin-top: 10px !important;
    padding: 8px 1px 4px !important;
    box-sizing: border-box !important;
}

.split-winner-badges {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    width: 100%;
    padding: 0 2px;
}

.split-winner-badge {
    min-width: 0;
    width: 100%;
    border-radius: 10px;
    padding: 6px 7px;
    border: 1px solid;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.split-winner-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Apertura Badge - Blue accent */
.split-winner-badge:first-child {
    border-color: #3b82f6;
}

.split-winner-badge--apertura .split-winner-header {
    color: #60a5fa;
}

/* Clausura Badge - Orange accent */
.split-winner-badge--clausura {
    border-color: #f97316;
}

.split-winner-badge--clausura .split-winner-header {
    color: #fb923c;
}

.split-winner-header {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.1;
    white-space: nowrap;
    text-transform: uppercase;
}

.split-winner-name {
    font-size: 0.64rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    width: 100%;
}

@media (max-width: 640px) {
    .split-winner-name {
        font-size: 0.60rem;
        letter-spacing: 0.01em;
    }
}

.split-winner-badge .split-winner-year {
    margin-top: 1px;
}

.grid-card.card-finished-with-winner,
.grid-card.card-active-finished-with-winner,
.league-card.card-finished-with-winner,
.league-card.card-active-finished-with-winner {
    overflow: hidden !important;
}

.split-winner-year {
    display: block;
    margin-top: 2px;
    text-align: center;
    font-size: 0.50rem;
    font-weight: 700;
    color: rgba(203, 213, 225, 0.78);
    line-height: 1.1;
}

/* ---- Lock badge ---- */
.status-badge-locked {
    min-width: 0 !important;
    min-height: 16px !important;
    padding: 0 4px !important;
    gap: 0 !important;
    color: #e2e8f0 !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
}

/* ---- Year badge ---- */
.year-badge .year-badge-prefix,
.tournament-card-year .year-badge-prefix {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    font-weight: 800 !important;
}

.year-badge .year-badge-suffix,
.tournament-card-year .year-badge-suffix {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    font-weight: 800 !important;
}

.year-badge .year-badge-suffix--current,
.tournament-card-year .year-badge-suffix--current {
    display: inline !important;
    margin-left: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* ---- Card text labels ---- */
.grid-card:not(.root-explorer-card) span,
.grid-card .league-name,
.grid-card .country-name,
.grid-card .tournament-card-name,
.grid-card .tournament-card-name--strong,
.country-grid-card-name,
.country-grid-card-description,
.continent-card-title,
.continent-card-subtitle,
.continent-card-description,
.page-info-title,
.page-info-description,
.finished-card-tournament-name,
.card-countdown-label {
    color: #f9fafb !important;
}

/* Keep countdown text readable on desktop and mobile card variants */
.grid-card .card-countdown-badge .card-countdown-kicker {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

.grid-card .card-countdown-badge .card-countdown-value {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

.grid-card .card-countdown-badge.is-live .card-countdown-value {
    color: #15803d !important;
    -webkit-text-fill-color: #15803d !important;
}

.grid-card .card-countdown-badge.is-soon .card-countdown-value {
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
}

.grid-card .card-countdown-badge.is-upcoming .card-countdown-value {
    color: #4338ca !important;
    -webkit-text-fill-color: #4338ca !important;
}

.league-card .card-countdown-badge .card-countdown-kicker {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* ---- Tournament cards: logo-first layout ---- */
.league-card .tournament-card-name,
.league-card .tournament-card-name--strong,
.grid-card.league-card .tournament-name {
    display: none !important;
}

.league-card .tournament-card-title-line,
.grid-card.league-card .tournament-card-title-line {
    display: block !important;
}

:root {
    --card-logo-size: 92px;
}

/* Authoritative tournament logo sizing (shared across grid + league cards) */
.grid-card .tournament-card-logo,
.league-card .tournament-card-logo {
    width: var(--card-logo-size) !important;
    height: var(--card-logo-size) !important;
    margin-bottom: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translate(-50%, -50%) scale(var(--logo-visual-scale, 1)) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 0 6px rgba(148, 197, 255, 0.45)) drop-shadow(0 0 14px rgba(96, 165, 250, 0.26)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42)) !important;
}

.grid-card .tournament-card-logo--compact,
.league-card .tournament-card-logo--compact {
    width: var(--card-logo-size) !important;
    height: var(--card-logo-size) !important;
    margin-bottom: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translate(-50%, -50%) scale(var(--logo-visual-scale, 1)) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 0 6px rgba(148, 197, 255, 0.45)) drop-shadow(0 0 14px rgba(96, 165, 250, 0.26)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42)) !important;
}

/* API-driven tournament logos: same frame, optional per-competition scale hint */
.grid-card .tournament-card-logo--api-normalized,
.league-card .tournament-card-logo--api-normalized {
    width: var(--card-logo-size) !important;
    height: var(--card-logo-size) !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translate(-50%, -50%) scale(var(--logo-visual-scale, 1)) !important;
    transform-origin: center center !important;
}

.grid-card .finished-card-logo,
.league-card .finished-card-logo {
    width: var(--card-logo-size) !important;
    height: var(--card-logo-size) !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translate(-50%, -50%) scale(var(--logo-visual-scale, 1)) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 0 6px rgba(148, 197, 255, 0.45)) drop-shadow(0 0 14px rgba(96, 165, 250, 0.26)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42)) !important;
}

/* Keep logo anchor centered in each card layout */
.grid-card .tournament-card-shell,
.grid-card .tournament-card-shell--compact,
.grid-card .finished-card-body,
.grid-card .finished-card-body--with-winner,
.league-card .tournament-card-shell,
.league-card .tournament-card-shell--compact,
.league-card .finished-card-body,
.league-card .finished-card-body--with-winner {
    position: relative !important;
    align-items: center !important;
}

.grid-card img.tournament-logo-contrast-strong,
.league-card img.tournament-logo-contrast-strong {
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 8px rgba(191, 219, 254, 0.62)) drop-shadow(0 0 18px rgba(96, 165, 250, 0.32)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.44)) !important;
}

@media (max-width: 768px) {
    .grid-card .tournament-card-logo,
    .league-card .tournament-card-logo,
    .grid-card .tournament-card-logo--compact,
    .league-card .tournament-card-logo--compact,
    .grid-card .finished-card-logo,
    .league-card .finished-card-logo {
        background: radial-gradient(circle at center, rgba(241, 245, 249, 0.24) 0%, rgba(241, 245, 249, 0.10) 58%, rgba(241, 245, 249, 0.00) 84%) !important;
        border-radius: 16px !important;
        filter: drop-shadow(0 0 10px rgba(191, 219, 254, 0.45)) drop-shadow(0 0 22px rgba(96, 165, 250, 0.24)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) !important;
    }
}

/* ---- Team logos: natural dark shadow, no glow ---- */
.team-logo,
.finished-card-logo,
.tournament-card-logo,
.tournament-card-logo--compact,
.grid-card img,
.root-explorer-card img,
.country-grid-card img,
.continent-grid-card img,
.finished-card-winner-icon {
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.65)) !important;
}

@media (max-width: 768px) {
    .grid-card .tournament-card-logo,
    .league-card .tournament-card-logo,
    .grid-card .tournament-card-logo--compact,
    .league-card .tournament-card-logo--compact,
    .grid-card .finished-card-logo,
    .league-card .finished-card-logo {
        filter: drop-shadow(0 0 10px rgba(191, 219, 254, 0.45)) drop-shadow(0 0 22px rgba(96, 165, 250, 0.24)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) !important;
    }
}

/* ---- Header: no border, no shadow ---- */
.header {
    background: linear-gradient(180deg, #07111f 0%, #0c1729 44%, #09111f 72%, #040913 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -42px 76px rgba(2, 6, 23, 0.82), 0 20px 42px -28px rgba(2, 6, 23, 0.88), 0 26px 44px -32px rgba(15, 23, 42, 0.92) !important;
    overflow: hidden !important;
}

.header::before {
    background: radial-gradient(circle at 33% 35%, rgba(148, 163, 184, 0.26) 0%, rgba(100, 116, 139, 0.14) 40%, rgba(15, 23, 42, 0) 76%) !important;
}

.header::after {
    left: 0 !important;
    right: 0 !important;
    bottom: -18px !important;
    height: 156px !important;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.34) 22%, rgba(8, 15, 29, 0.82) 58%, rgba(2, 6, 23, 1) 100%) !important;
    filter: blur(16px) !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

.header-graphic::after {
    background: linear-gradient(to bottom, rgba(2, 6, 23, 0.18) 0%, rgba(2, 6, 23, 0.08) 40%, rgba(2, 6, 23, 0.28) 100%) !important;
}

.header-graphic {
    display: block !important;
    overflow: hidden !important;
}

.header-logo-wrap {
    position: absolute !important;
    top: -6px !important;
    right: -34px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(55%, 280px) !important;
    max-height: none !important;
    transform: none !important;
    transform-origin: top right !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.header .sub-header {
    display: block !important;
    visibility: visible !important;
    opacity: 0.95 !important;
    margin-top: 6px !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

@media (max-width: 767px) {
    .header .sub-header {
        display: block !important;
        font-size: 0.9rem !important;
    }
}
.header-logo-wrap .header-goalkeeper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    object-position: top right !important;
}

.header-calendar-date-badge {
    position: absolute;
    top: calc(14% + 15px);
    right: calc(14% + 67px);
    min-width: 22px;
    height: 14px;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid rgba(250, 204, 21, 0.55);
    background: linear-gradient(180deg, rgba(22, 28, 36, 0.9) 0%, rgba(12, 18, 28, 0.93) 100%);
    color: rgba(250, 204, 21, 0.98);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 6px rgba(2, 6, 23, 0.45);
    pointer-events: none;
    transform: translateZ(0);
    z-index: 2;
}

.header-graphic::before {
    content: '' !important;
    position: absolute !important;
    top: -24px !important;
    right: -2px !important;
    bottom: auto !important;
    width: min(72vw, 320px) !important;
    height: 170px !important;
    background:
        radial-gradient(circle at 84% 30%, rgba(250, 204, 21, 0.44) 0%, rgba(250, 204, 21, 0.3) 20%, rgba(234, 179, 8, 0.1) 32%, rgba(234, 179, 8, 0.02) 44%, rgba(2, 6, 23, 0) 54%),
        radial-gradient(circle at 79% 33%, rgba(254, 240, 138, 0.14) 0%, rgba(250, 204, 21, 0) 8%),
        radial-gradient(circle at 76% 31%, rgba(250, 204, 21, 0.11) 0 0.9%, rgba(250, 204, 21, 0) 1.45%),
        radial-gradient(circle at 79% 25%, rgba(250, 204, 21, 0.09) 0 0.72%, rgba(250, 204, 21, 0) 1.18%),
        radial-gradient(circle at 82% 37%, rgba(250, 204, 21, 0.08) 0 0.7%, rgba(250, 204, 21, 0) 1.1%),
        radial-gradient(ellipse at 72% 42%, rgba(191, 219, 254, 0.2) 0%, rgba(148, 197, 255, 0.1) 24%, rgba(14, 165, 233, 0.06) 44%, rgba(2, 6, 23, 0) 72%) !important;
    filter: blur(11px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.header-goalkeeper {
    position: absolute !important;
    top: -92px !important;
    right: -28px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(118vw, 640px) !important;
    height: auto !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    filter: saturate(1.08) contrast(1.06) brightness(0.98) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42)) drop-shadow(-8px 2px 20px rgba(147, 197, 253, 0.24)) !important;
    opacity: 0.58 !important;
    transform: none !important;
    transform-origin: right bottom !important;
    z-index: 1 !important;
}

.header .header-content {
    position: absolute !important;
    left: 50% !important;
    top: 76px !important;
    transform: translateX(-50%) !important;
    width: min(94vw, 760px) !important;
    max-width: none !important;
    padding: 0 14px !important;
    text-align: center !important;
    z-index: 6 !important;
}

/* Secondary quick nav below header */
.top-quick-nav {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), 760px);
    margin: 0;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.46) 0%, rgba(2, 6, 23, 0.68) 100%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(2, 6, 23, 0.24);
    box-sizing: border-box;
}

.top-quick-nav-btn {
    border: 1px solid rgba(148, 163, 184, 0.38);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.86) 0%, rgba(2, 6, 23, 0.94) 100%);
    backdrop-filter: blur(8px) saturate(125%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(2, 6, 23, 0.5);
    color: #f1f5f9;
    border-radius: 12px;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.top-quick-nav-btn:hover {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(148, 163, 184, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 16px rgba(2, 6, 23, 0.56);
    transform: translateY(-1px);
    color: #f8fafc;
}

.top-quick-nav-btn:active {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.96) 100%);
    transform: translateY(0);
}

.top-quick-nav-icon {
    font-size: 1.42rem;
    line-height: 1;
    opacity: 1;
    filter: brightness(1.22) saturate(1.12);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.42), 0 0 14px rgba(148, 163, 184, 0.38), 0 2px 6px rgba(2, 6, 23, 0.55);
}

.top-quick-nav-label {
    display: none;
}
.top-quick-nav-btn--labeled {
    padding-inline: 14px 16px;
}
.top-quick-nav-btn--labeled .top-quick-nav-label {
    display: inline !important;
    font-size: 0.82rem;
    font-weight: 700;
}

.top-quick-nav .auth-controls {
    position: absolute !important;
    left: 10px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
}

html[dir="rtl"] .top-quick-nav .auth-controls {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.top-quick-nav .auth-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.top-quick-nav .auth-separator {
    display: none !important;
}

.top-quick-nav .auth-btn,
.top-quick-nav .auth-btn-login,
.top-quick-nav .auth-btn-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-width: 126px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(2, 6, 23, 0.95) 100%) !important;
    backdrop-filter: blur(8px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(2, 6, 23, 0.52) !important;
    line-height: 1 !important;
    color: #e2e8f0 !important;
}

.top-quick-nav .auth-btn .auth-icon,
.top-quick-nav .auth-btn-login .auth-icon,
.top-quick-nav .auth-btn-logout .auth-icon,
.top-quick-nav .auth-btn .auth-text,
.top-quick-nav .auth-btn-login .auth-text,
.top-quick-nav .auth-btn-logout .auth-text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.top-quick-nav .auth-btn .auth-icon,
.top-quick-nav .auth-btn-login .auth-icon,
.top-quick-nav .auth-btn-logout .auth-icon {
    filter: brightness(1.24) saturate(1.1) !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.42), 0 0 14px rgba(148, 163, 184, 0.36), 0 2px 6px rgba(2, 6, 23, 0.55) !important;
}

@media (max-width: 768px) {
    .top-quick-nav {
        width: min(calc(100% - 20px), 760px);
        left: 50%;
        right: auto;
        bottom: 8px;
        transform: translateX(-50%);
        justify-content: flex-start;
        overflow-x: auto;
        padding: 10px 10px;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .top-quick-nav .auth-controls {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    .top-quick-nav::-webkit-scrollbar {
        height: 0;
    }

    .top-quick-nav-btn {
        flex: 0 0 auto;
        padding: 10px 14px;
        opacity: 1;
    }
}

.header .header-kicker {
    color: #facc15 !important;
            width: min(90%, 520px);
    text-shadow: 0 2px 0 rgba(120, 53, 15, 0.7), 0 0 14px rgba(250, 204, 21, 0.45), 0 0 28px rgba(250, 204, 21, 0.2) !important;
    letter-spacing: 0.04em !important;
}

.header-title-animated {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42em !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
}

.header-title-animated .header-word {
    font-weight: 900 !important;
}

.header-title-animated .header-ball-run {
    position: relative !important;
    width: 1.6em !important;
    height: 1.2em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.header-title-animated .header-ball-run::after {
    content: '' !important;
    position: absolute !important;
    left: 0.15em !important;
    right: 0.2em !important;
    top: 53% !important;
    border-top: 2px dashed rgba(125, 211, 252, 0.32) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.header-title-animated .header-ball {
    display: inline-block !important;
    z-index: 1 !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.62)) !important;
    animation: headerBallPush 2.6s cubic-bezier(0.42, 0, 0.2, 1) infinite !important;
}

@keyframes headerBallPush {
    0% {
        transform: translateX(-0.08em) translateY(0) scale(1) rotate(0deg);
    }
    20% {
        transform: translateX(0.28em) translateY(-0.12em) scale(1.05) rotate(60deg);
    }
    45% {
        transform: translateX(0.92em) translateY(0.08em) scale(0.95) rotate(180deg);
    }
    55% {
        transform: translateX(1.1em) translateY(0) scale(1.03) rotate(230deg);
    }
    70% {
        transform: translateX(0.72em) translateY(-0.08em) scale(0.98) rotate(300deg);
    }
    100% {
        transform: translateX(-0.08em) translateY(0) scale(1) rotate(360deg);
    }
}

/* Unified header geometry across all sizes: no breakpoint-based visual jump. */
.header {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 176px !important;
    min-height: 0 !important;
    border-radius: 0 0 24px 24px !important;
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Keep auth controls pinned to the same local header origin at all widths. */
.header .auth-controls {
    left: 16px !important;
    right: auto !important;
    transform: none !important;
}

.header-goalkeeper {
    top: -116px !important;
    right: -48px !important;
    bottom: auto !important;
    width: min(142vw, 640px) !important;
    max-height: 340px !important;
}

.header-graphic::before {
    top: -76px !important;
    right: -34px !important;
    bottom: auto !important;
    width: min(136vw, 560px) !important;
    height: 300px !important;
}

.header .header-content {
    top: 58px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(94vw, 560px) !important;
    padding: 0 12px !important;
    max-width: none !important;
}

.header .sub-header {
    display: none !important;
}

.header-title-animated {
    gap: 0.32em !important;
}

.header-title-animated .header-ball-run {
    width: 1.35em !important;
}

/* Keep visual separation between header frame and first panel below */
.explorer-section {
    margin-top: 8px !important;
}

/* Keep panel/card proportions stable when viewport width grows */
.explorer-section,
.fixtures-section {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    .header-calendar-date-badge {
        top: calc(15% + 15px);
        right: calc(14% + 67px);
        min-width: 19px;
        height: 12px;
        padding: 0 2px;
        border-radius: 3px;
        font-size: 8px;
        letter-spacing: 0.03em;
    }

    .header-graphic::before {
        top: -10px !important;
        right: -2px !important;
        width: 196px !important;
        height: 142px !important;
        background:
            radial-gradient(circle at 86% 22%, rgba(250, 204, 21, 0.66) 0%, rgba(250, 204, 21, 0.48) 24%, rgba(234, 179, 8, 0.22) 44%, rgba(234, 179, 8, 0.1) 60%, rgba(234, 179, 8, 0.04) 72%, rgba(2, 6, 23, 0) 82%),
            radial-gradient(circle at 80% 26%, rgba(254, 240, 138, 0.24) 0%, rgba(250, 204, 21, 0) 18%),
            radial-gradient(circle at 78% 23%, rgba(250, 204, 21, 0.18) 0 0.95%, rgba(250, 204, 21, 0) 1.7%),
            radial-gradient(circle at 80% 19%, rgba(250, 204, 21, 0.15) 0 0.82%, rgba(250, 204, 21, 0) 1.48%),
            radial-gradient(circle at 83% 28%, rgba(250, 204, 21, 0.12) 0 0.78%, rgba(250, 204, 21, 0) 1.42%),
            radial-gradient(ellipse at 72% 42%, rgba(191, 219, 254, 0.22) 0%, rgba(148, 197, 255, 0.12) 28%, rgba(2, 6, 23, 0) 70%) !important;
        filter: blur(10px) !important;
    }
}

@media (max-width: 767px) {
    .explorer-section {
        margin-top: 8px !important;
    }
}

/* iPhone/touch fallback: apply the same layer restoration even in landscape widths */
@media (hover: none) and (pointer: coarse) {
    .explorer-section {
        padding: 8px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.18) 40%, rgba(15, 23, 42, 0.1) 100%) !important;
        border: 1px solid rgba(148, 163, 184, 0.2) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(2, 6, 23, 0.24) !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    #stepCountry:not(.hidden),
    #stepLeague:not(.hidden),
    #stepTeam:not(.hidden) {
        position: relative !important;
        padding: 6px !important;
        border-radius: 12px !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.34) 0%, rgba(15, 23, 42, 0.2) 46%, rgba(15, 23, 42, 0.12) 100%) !important;
        border: 1px solid rgba(148, 163, 184, 0.2) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px rgba(2, 6, 23, 0.2) !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    #stepCountry:not(.hidden)::before,
    #stepLeague:not(.hidden)::before,
    #stepTeam:not(.hidden)::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: inherit !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 24%, rgba(15, 23, 42, 0) 100%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    #stepCountry:not(.hidden) > *,
    #stepLeague:not(.hidden) > *,
    #stepTeam:not(.hidden) > * {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Layering guard so lower content never bleeds above header */
.header {
    isolation: isolate !important;
    z-index: 20 !important;
}

/* Header stack: back layer (0), image (1), top layer (2), content (6+) */
.header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(120% 85% at 18% 8%, rgba(148, 197, 255, 0.22) 0%, rgba(56, 189, 248, 0.08) 42%, rgba(2, 6, 23, 0) 72%),
        linear-gradient(160deg, rgba(8, 16, 30, 0.86) 0%, rgba(10, 22, 40, 0.72) 46%, rgba(3, 9, 20, 0.9) 100%) !important;
}

.header-goalkeeper {
    z-index: 1 !important;
}

.header-graphic {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}

.header::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(15, 23, 42, 0) 52%),
        radial-gradient(110% 70% at 82% 24%, rgba(30, 41, 59, 0.28) 0%, rgba(2, 6, 23, 0) 70%) !important;
}

.header .header-content,
.header .desktop-nav {
    position: relative !important;
    z-index: 6 !important;
}

.header-subtitle-line {
    margin: 8px 0 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    text-align: center;
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}

.header-subtitle-text {
    display: inline-block;
    max-width: min(88vw, 680px);
}

.header-subtitle-brand-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.header-subtitle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

html[dir="rtl"] .header-subtitle-line {
    direction: rtl;
}

html[dir="ltr"] .header-subtitle-line {
    direction: ltr;
}

@media (max-width: 768px) {
    .header-subtitle-line {
        margin-top: 6px;
        font-size: 0.74rem;
        line-height: 1.2;
        max-width: min(94vw, 560px);
    }

    .header-subtitle-text {
        max-width: min(78vw, 420px);
    }

    .header-subtitle-icon {
        width: 20px;
        height: 20px;
        font-size: 0.68rem;
    }

    #headerUpcomingBtn.header-upcoming-btn {
        bottom: 76px !important;
        width: min(calc(100% - 16px), 740px) !important;
        min-height: 38px !important;
        border-width: 1px !important;
        border-color: rgba(148, 163, 184, 0.52) !important;
        font-size: 0.84rem !important;
        padding: 0 12px !important;
    }

    .header .top-quick-nav {
        border: 1px solid rgba(148, 163, 184, 0.35) !important;
    }

    .root-explorer-grid .root-explorer-card {
        border: 1px solid rgba(148, 163, 184, 0.44) !important;
    }
}

/* English copy is longer; keep it tighter without affecting Hebrew sizing */
html[lang="en"] .header-subtitle-line {
    font-size: 0.72rem;
    letter-spacing: 0;
}

html[lang="en"] .header-subtitle-text {
    max-width: min(84vw, 620px);
}

html[lang="en"] #headerUpcomingBtn.header-upcoming-btn {
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
}

html[lang="en"] .root-explorer-card .root-explorer-title {
    font-size: clamp(1.18rem, 1.8vw, 1.58rem) !important;
    line-height: 1.1 !important;
}

@media (max-width: 768px) {
    html[lang="en"] .header-subtitle-line {
        font-size: 0.66rem;
        line-height: 1.15;
    }

    html[lang="en"] .header-subtitle-text {
        max-width: min(74vw, 380px);
    }

    html[lang="en"] #headerUpcomingBtn.header-upcoming-btn {
        font-size: 0.78rem !important;
    }

    html[lang="en"] .root-explorer-card .root-explorer-title {
        font-size: clamp(1.04rem, 3.8vw, 1.34rem) !important;
        line-height: 1.08 !important;
    }
}

.header-subtitle-icon--apple {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.header-subtitle-icon--google {
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #dbeafe;
}

.header-help-btn,
.help-fab {
    position: absolute !important;
    top: auto !important;
    bottom: 5px !important;
    right: auto !important;
    left: 5px !important;
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(4px) !important;
    transform: none !important;
    z-index: 69 !important;
}

.header-help-btn:hover,
.help-fab:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.header .auth-controls {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    top: 12px !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 70 !important;
}

.header .auth-controls .auth-btn,
.header .auth-controls .auth-btn-login,
.header .auth-controls .auth-btn-logout {
    height: 40px !important;
    min-width: 118px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
    border-radius: 20px !important;
}

@media (max-width: 767px) {
    .header {
        height: 176px !important;
    }

    .header .header-content {
        top: 54px !important;
        width: min(94vw, 520px) !important;
        padding: 0 14px !important;
    }

    .header .sub-header {
        display: none !important;
    }
}

.explorer-section,
.explorer-step {
    position: relative !important;
    z-index: 5 !important;
}

/* Restore the behind-display layer under explorer content (direct panel, always visible) */
.explorer-section {
    padding: 4px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.18) 38%, rgba(15, 23, 42, 0.1) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(2, 6, 23, 0.24) !important;
}

/* Hard fallback: visible under-layer on the active explorer panel itself */
.container .explorer-step:not(.hidden) {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.34) 0%, rgba(15, 23, 42, 0.2) 45%, rgba(15, 23, 42, 0.12) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 20px rgba(2, 6, 23, 0.2) !important;
    padding: 4px !important;
}

@media (max-width: 767px) {
    .explorer-section {
        padding: 4px !important;
        border-radius: 14px !important;
    }

    .container .explorer-step:not(.hidden) {
        padding: 2px !important;
        border-radius: 12px !important;
    }
}

/* Final spacing fix: keep clear gap between upper cards and first team panel (World Cup/Premier League card) */
#stepTeam:not(.hidden) #teamsGrid {
    padding-top: 20px !important;
}

@media (max-width: 767px) {
    #stepTeam:not(.hidden) #teamsGrid {
        padding-top: 16px !important;
    }
}

/* Small/medium screens: use the same desktop behavior */
@media (max-width: 1200px) {
    .mobile-bottom-nav {
        display: grid !important;
    }

    .fab {
        display: none !important;
    }

    .header .desktop-nav {
        display: none !important;
    }

    .header-help-btn,
    .help-fab {
        display: flex !important;
    }

    body {
        padding-bottom: 80px !important;
    }
}

/* Final authoritative header overrides (keep at end to avoid duplicate-rule conflicts) */
.header {
    height: 200px !important;
    min-height: 200px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: none !important;
}

.header .header-content {
    top: 62px !important;
    left: 20px !important;
    right: min(55%, 280px) !important;
    width: auto !important;
    transform: none !important;
    padding: 0 12px !important;
    text-align: center !important;
}

.header .header-kicker {
    text-align: center !important;
    width: 100% !important;
}

.header .header-title-animated {
    justify-content: center !important;
    width: 100% !important;
}

.header .sub-header {
    text-align: center !important;
}

.header .auth-controls {
    right: 5px !important;
    top: 12px !important;
}

.header .top-quick-nav .auth-controls {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 44px !important;
}

.header .top-quick-nav .auth-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
}

.header .top-quick-nav .auth-btn,
.header .top-quick-nav .auth-btn-login,
.header .top-quick-nav .auth-btn-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 118px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.header-help-btn,
.help-fab {
    left: 5px !important;
    bottom: 5px !important;
    right: auto !important;
    top: auto !important;
}

/* Main header logo (goalkeeper) size tweak */
.header-logo-wrap {
    top: -6px !important;
    right: -34px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    transform-origin: top right !important;
    width: min(55%, 280px) !important;
    aspect-ratio: 512 / 288 !important;
    max-height: none !important;
}

.header-logo-wrap .header-goalkeeper {
    width: 100% !important;
    height: 100% !important;
}

/* Main header text contrast tuning */
.header .header-kicker {
    color: #eab308 !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 3px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.45) !important;
}

.header .header-title-animated {
    opacity: 0.8 !important;
    color: #c7d2e0 !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.82), 0 6px 16px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.52) !important;
    min-height: 1.3em !important;
}

.header .header-title-animated .header-word {
    color: #c7d2e0 !important;
    display: inline-block !important;
}

.header .header-title-animated .header-word:first-of-type {
    min-width: 2.9em !important;
}

.header .header-title-animated .header-word:last-of-type {
    min-width: 4.5em !important;
}

/* Table panel compact spacing: reduce gaps between upper panel -> table panel -> parent layer */
#stepTeam:not(.hidden) #teamsGrid {
    padding-top: 4px !important;
}

#stepTeam:not(.hidden) {
    min-height: calc(100vh - 248px) !important;
}

#stepTeam:not(.hidden) #teamsGrid.is-loading {
    min-height: calc(100vh - 272px) !important;
}

@media (max-width: 767px) {
    #stepTeam:not(.hidden) {
        min-height: calc(100vh - 236px) !important;
    }

    #stepTeam:not(.hidden) #teamsGrid.is-loading {
        min-height: calc(100vh - 252px) !important;
    }
}

#stepTeam:not(.hidden) #teamsGrid .teams-panels-gap {
    height: 2px !important;
}

#stepTeam:not(.hidden) #teamsGrid .teams-table-container {
    margin-top: 2px !important;
}

#fixturesContainer .controls-bar {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
}

#fixturesContainer .table-container {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    #stepTeam:not(.hidden) #teamsGrid {
        padding-top: 2px !important;
    }

    #stepTeam:not(.hidden) #teamsGrid .teams-panels-gap {
        height: 1px !important;
    }

    #stepTeam:not(.hidden) #teamsGrid .teams-table-container {
        margin-top: 1px !important;
    }

    #fixturesContainer .controls-bar {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }
}

/* ==================================================================
   MIDNIGHT OBSIDIAN - COUNTRY HUB FINAL OVERRIDES
   Keep country/continent hub chrome dark across all cascade layers.
   ================================================================== */

#leaguesGrid .continent-hub-label {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#leaguesGrid .continent-hub-title {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

#leaguesGrid .continent-hub-subtitle,
#leaguesGrid .continent-hub-description {
    color: rgba(226, 232, 240, 0.88) !important;
}

#leaguesGrid .hub-guidance-panel,
#leaguesGrid .country-hub-guidance {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    margin: 4px 0 4px !important;
    padding: 12px 14px !important;
}

#leaguesGrid .hub-guidance-eyebrow {
    color: #93c5fd !important;
}

#leaguesGrid .hub-guidance-title,
#leaguesGrid .country-hub-guidance .hub-guidance-title {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

#leaguesGrid .hub-guidance-description,
#leaguesGrid .country-hub-guidance .hub-guidance-description {
    color: rgba(203, 213, 225, 0.92) !important;
}

#leaguesGrid .hub-guidance-title-flag {
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.34) !important;
}

#leaguesGrid .tabs-nav {
    background: rgba(2, 6, 23, 0.2) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    padding: 4px !important;
}

#leaguesGrid .tabs-nav .tab-btn {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

#leaguesGrid .tabs-nav .tab-btn .tab-text,
#leaguesGrid .tabs-nav .tab-btn .tab-icon {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

#leaguesGrid .tabs-nav .tab-btn:hover {
    color: #f8fafc !important;
    background: rgba(51, 65, 85, 0.52) !important;
}

#leaguesGrid .tabs-nav .tab-btn.active {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.42) !important;
    border-bottom: 2px solid rgba(125, 211, 252, 0.86) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#leaguesGrid .hub-guidance-chips {
    gap: 7px !important;
    margin-top: 10px !important;
}

#leaguesGrid .hub-guidance-chip {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.16) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: rgba(226, 232, 240, 0.9) !important;
    -webkit-text-fill-color: rgba(226, 232, 240, 0.9) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

html[dir="rtl"] #leaguesGrid .country-hub-guidance,
html[dir="rtl"] #leaguesGrid .hub-guidance-panel {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #leaguesGrid .hub-guidance-eyebrow,
html[dir="rtl"] #leaguesGrid .hub-guidance-title,
html[dir="rtl"] #leaguesGrid .hub-guidance-description {
    text-align: right !important;
}

html[dir="rtl"] #leaguesGrid .country-hub-guidance .hub-guidance-title-line {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[dir="rtl"] #leaguesGrid .hub-guidance-chips {
    direction: rtl;
    justify-content: flex-end;
}

html[dir="rtl"] #leaguesGrid .tabs-nav {
    flex-direction: row-reverse;
}

html[dir="rtl"] #leaguesGrid .tabs-nav .tab-btn {
    justify-content: flex-end;
    flex-direction: row-reverse;
    text-align: right !important;
}

@media (max-width: 768px) {
    #leaguesGrid .tabs-nav.sub-tabs,
    #leaguesGrid .tabs-nav.country-hub-tabs,
    #leaguesGrid .tabs-nav.continent-hub-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    #leaguesGrid .tabs-nav.sub-tabs .tab-btn,
    #leaguesGrid .tabs-nav.country-hub-tabs .tab-btn,
    #leaguesGrid .tabs-nav.continent-hub-tabs .tab-btn {
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 12px !important;
        justify-content: center !important;
        display: inline-flex !important;
    }

    html[dir="rtl"] #leaguesGrid .tabs-nav.sub-tabs .tab-btn,
    html[dir="rtl"] #leaguesGrid .tabs-nav.country-hub-tabs .tab-btn,
    html[dir="rtl"] #leaguesGrid .tabs-nav.continent-hub-tabs .tab-btn {
        justify-content: flex-end !important;
        text-align: right !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    html[dir="rtl"] #leaguesGrid .tabs-nav.continent-hub-tabs {
        direction: rtl !important;
    }

    html[dir="rtl"] #leaguesGrid .tabs-nav.continent-hub-tabs .tab-text {
        direction: rtl !important;
        unicode-bidi: plaintext !important;
        text-align: right !important;
    }

    html[dir="rtl"] #leaguesGrid .tabs-nav.continent-hub-tabs .tab-icon {
        margin-left: 0 !important;
        margin-right: 6px !important;
    }

    /* Country hub: enforce RTL from the container itself, not only html[dir] */
    #leaguesGrid .country-hub-guidance[dir="rtl"],
    #leaguesGrid .hub-guidance-panel.country-hub-guidance[dir="rtl"] {
        direction: rtl !important;
        text-align: right !important;
    }

    #leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-eyebrow,
    #leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-title,
    #leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-description,
    #leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-chip {
        text-align: right !important;
    }

    #leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-title-line {
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        width: 100%;
    }

    #leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-chips {
        direction: rtl !important;
        justify-content: flex-end !important;
    }

    #leaguesGrid .tabs-nav.country-hub-tabs[dir="rtl"] {
        direction: rtl !important;
    }

    #leaguesGrid .tabs-nav.country-hub-tabs[dir="rtl"] .tab-btn {
        direction: rtl !important;
        text-align: right !important;
        justify-content: flex-end !important;
        flex-direction: row-reverse !important;
    }

    #leaguesGrid .tabs-nav.country-hub-tabs[dir="rtl"] .tab-text {
        direction: rtl !important;
        unicode-bidi: plaintext !important;
        text-align: right !important;
    }

    #leaguesGrid .tabs-nav.country-hub-tabs[dir="rtl"] .tab-icon {
        margin-left: 0 !important;
        margin-right: 6px !important;
    }

    #leaguesGrid .tabs-nav.country-hub-tabs[dir="rtl"] .tab-btn {
        justify-content: flex-end !important;
        text-align: right !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    html[dir="rtl"] #leaguesGrid .tabs-nav.sub-tabs,
    html[dir="rtl"] #leaguesGrid .tabs-nav.country-hub-tabs,
    html[dir="rtl"] #leaguesGrid .tabs-nav.continent-hub-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    #leaguesGrid .hub-guidance-chips {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    #leaguesGrid .hub-guidance-chip {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    html[dir="rtl"] #leaguesGrid .hub-guidance-chips {
        flex-direction: column !important;
    }
}

/* Country hub header: keep mixed Hebrew/English text stable and right-aligned */
#leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-title,
#leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-description {
    text-align: right !important;
    unicode-bidi: plaintext;
}

#leaguesGrid .country-hub-guidance[dir="rtl"] .hub-guidance-title-line {
    text-align: right !important;
}

#leaguesGrid #tab-national .card-subtitle-single-line {
    color: rgba(203, 213, 225, 0.9) !important;
}

/* Help dialog (static) + app guide (dynamic): Midnight Obsidian */
#helpModal .help-modal-layout,
#appGuideModal .modal-content {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.97) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Local Teams fallback card/panel (Midnight Obsidian) */
.local-teams-fallback-card {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background:
        radial-gradient(120% 120% at 8% 0%, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 52%),
        linear-gradient(160deg, #0b1228 0%, #111c37 52%, #0a1329 100%);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(148, 163, 184, 0.15);
}

.local-teams-fallback-card:hover {
    border-color: rgba(96, 165, 250, 0.44);
    transform: translateY(-2px);
}

.local-teams-fallback-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
}

.local-teams-fallback-card__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.local-teams-fallback-card__logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.26);
    padding: 4px;
}

.local-teams-fallback-card__title-wrap {
    min-width: 0;
}

.local-teams-fallback-card__title {
    color: #f8fafc;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.local-teams-fallback-card__subtitle {
    color: #94a3b8;
    font-size: 0.78rem;
}

.local-teams-fallback-card__meta {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 600;
}

.local-teams-fallback-card__message {
    color: #e2e8f0;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}

.local-teams-fallback-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.34);
    background: rgba(30, 64, 175, 0.22);
    color: #dbeafe;
    font-size: 0.8rem;
    font-weight: 700;
}

.local-teams-fallback-panel {
    margin-bottom: 12px;
}

#teamsGrid .local-teams-scope-note {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: linear-gradient(180deg, rgba(69, 39, 4, 0.45) 0%, rgba(30, 41, 59, 0.72) 100%);
    color: rgba(255, 237, 213, 0.96);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
}

html[dir="rtl"] #teamsGrid .local-teams-scope-note {
    text-align: right;
    font-size: 0.94rem;
    line-height: 1.5;
}

#helpModal .help-header h2 {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

#helpModal .help-header p {
    color: rgba(203, 213, 225, 0.92) !important;
}

#helpModal .help-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

#helpModal .step-card {
    background: rgba(30, 41, 59, 0.76) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 10px;
    padding: 12px;
}

#helpModal .step-card h3 {
    color: #e2e8f0 !important;
}

#helpModal .step-card p,
#helpModal .step-card strong {
    color: #cbd5e1 !important;
}

#helpModal .pro-tip {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(30, 58, 138, 0.22) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    color: #dbeafe !important;
}

#helpModal .pro-tip a {
    color: #93c5fd !important;
}

#helpModal .modal-close,
#appGuideModal .modal-close {
    background: rgba(51, 65, 85, 0.86) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

#helpModal .modal-close:hover,
#appGuideModal .modal-close:hover {
    background: rgba(71, 85, 105, 0.9) !important;
    color: #ffffff !important;
}

#aboutModal .about-modal-layout {
    max-width: 900px;
    max-height: min(86vh, 820px);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.97) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0;
}

#aboutModal .about-header h2 {
    margin: 0;
    color: #f8fafc;
    padding-right: 52px;
}

#aboutModal .about-header p {
    margin: 8px 0 0;
    color: rgba(203, 213, 225, 0.92);
}

#aboutModal .about-columns {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#aboutModal .about-column {
    background: rgba(30, 41, 59, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 14px;
}

#aboutModal .about-column h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #f8fafc;
}

#aboutModal .about-column p {
    margin: 0 0 10px;
    line-height: 1.6;
    color: #cbd5e1;
}

#aboutModal .about-column p:last-child {
    margin-bottom: 0;
}

#aboutModal .modal-close {
    background: rgba(51, 65, 85, 0.86) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    inset-inline-end: auto !important;
    right: 8px !important;
    top: 8px !important;
}

#aboutModal .modal-close:hover {
    background: rgba(71, 85, 105, 0.9) !important;
    color: #ffffff !important;
}

@media (max-width: 640px) {
    #helpModal .help-steps-grid {
        grid-template-columns: 1fr;
    }

    #aboutModal .about-columns {
        grid-template-columns: 1fr;
    }
}

/* Desktop-default lock across all widths */
.desktop-footer {
    display: none !important;
}

@media (max-width: 768px) {
    html,
    body {
        background-attachment: scroll !important;
        background-position: center top !important;
    }
}

.container {
    margin: 0 !important;
    padding: 0 8px 8px !important;
    max-width: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.header {
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    height: 200px !important;
    min-height: 200px !important;
    border-radius: 0 0 20px 20px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: none !important;
}

.header .header-content {
    top: 62px !important;
    width: min(94vw, 560px) !important;
    padding: 0 12px !important;
}

.mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.header .desktop-nav {
    display: none !important;
}

body {
    padding-bottom: 80px !important;
}

.explorer-section,
.fixtures-section {
    width: 100% !important;
    max-width: none !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
}

#stepCountry:not(.hidden),
#stepLeague:not(.hidden),
#stepTeam:not(.hidden) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    isolation: auto !important;
}

#stepCountry:not(.hidden)::before,
#stepLeague:not(.hidden)::before,
#stepTeam:not(.hidden)::before {
    content: none !important;
    display: none !important;
}

#stepCountry:not(.hidden) #pageInfoPanel,
#stepCountry:not(.hidden) #countriesGrid,
#stepLeague:not(.hidden) #leaguesGrid,
#stepTeam:not(.hidden) #teamsGrid {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#stepCountry:not(.hidden) #pageInfoPanel,
#stepCountry:not(.hidden) #countriesGrid,
#stepTeam:not(.hidden) #teamsGrid {
    padding: 10px 0 0 !important;
}

#stepLeague:not(.hidden) #leaguesGrid {
    padding: 10px 0 0 !important;
    gap: 12px !important;
}

.cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 14px !important;
    padding: 10px !important;
}

/* Country browser: stack regions and countries vertically for readability */
#countriesGrid.country-mode {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-inline: 0 !important;
}

.country-search-row {
    margin: 8px 0 10px;
}

.country-search-input {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.35);
    color: #f8fafc;
    padding: 0 14px;
    font-size: 0.98rem;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.country-search-input::placeholder {
    color: rgba(203, 213, 225, 0.9);
}

@media (max-width: 480px) {
    .country-search-input {
        font-size: 0.875rem;
        height: 42px;
    }
}

.country-search-input:focus {
    border-color: rgba(125, 211, 252, 0.65);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

#countriesGrid.country-mode .country-region-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

#countriesGrid.country-mode .country-grid-card {
    min-height: 78px !important;
    padding: 10px 12px !important;
}

#countriesGrid.country-mode .country-grid-card-copy {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
}

#countriesGrid.country-mode .country-grid-card-name {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[dir="rtl"] #countriesGrid.country-mode .country-grid-card-copy {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    text-align: right !important;
}

@media (max-width: 430px) {
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 8px !important;
    }
}

.grid-card[class*="card-"]:not(.root-explorer-card),
.grid-card.league-card,
.grid-card.league-active,
.grid-card.finished-card,
.grid-card.locked-card,
.grid-card.active-champion-card {
    min-height: 220px !important;
}

/* Global header parity: keep header panel identical to >768 at all widths */
.header {
    height: 200px !important;
    min-height: 200px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 0 20px 20px !important;
}

.header .header-content {
    top: 62px !important;
    width: min(94vw, 560px) !important;
    padding: 0 12px !important;
}

/* Desktop mode from 1201px: header nav active, footer nav hidden */
@media (min-width: 1201px) {
    .mobile-bottom-nav {
        display: grid !important;
    }

    .fab {
        display: none !important;
    }

    .header .desktop-nav {
        display: none !important;
    }

    .header-help-btn,
    .help-fab {
        display: flex !important;
    }

    body {
        padding-bottom: 80px !important;
    }
}

/* ---- Mode-best: no pseudo overlays ---- */
body.mode-best::before,
body.mode-best::after {
    content: none !important;
    display: none !important;
}

body.mode-best #stepCountry,
body.mode-best .explorer-step,
body.mode-best #countriesGrid,
body.mode-best #countriesGrid.cards-grid,
body.mode-best #countriesGrid .grid-card,
body.mode-best #countriesGrid .league-card,
body.mode-best #countriesGrid .card-glass-base {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
}

/* ---- Region / continent cards: same smoked glass ---- */
.grid-card.continent-grid-card,
.root-explorer-grid .continent-grid-card {
    background: rgba(31, 41, 55, 0.45) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 20px !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    min-height: 210px !important;
    padding: 42px 18px 18px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.grid-card.continent-grid-card:hover,
.root-explorer-grid .continent-grid-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(31, 41, 55, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

.grid-card.country-grid-card,
.country-region-grid .grid-card {
    background: rgba(31, 41, 55, 0.45) !important;
    background-color: rgba(31, 41, 55, 0.45) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 20px !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    min-height: 170px !important;
    padding: 20px !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.grid-card.country-grid-card:hover,
.country-region-grid .grid-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(31, 41, 55, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

.grid-card.country-grid-card::before,
.country-region-grid .grid-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.grid-card.continent-grid-card::before,
.root-explorer-grid .continent-grid-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.grid-card.continent-grid-card .continent-card-icon-wrap,
.root-explorer-grid .continent-grid-card .continent-card-icon-wrap {
    width: 132px !important;
    height: 132px !important;
    min-height: 132px !important;
    margin: 0 auto 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at center, rgba(241, 245, 249, 0.22) 0%, rgba(241, 245, 249, 0.08) 58%, rgba(241, 245, 249, 0) 86%) !important;
}

.grid-card.continent-grid-card .continent-card-icon,
.root-explorer-grid .continent-grid-card .continent-card-icon {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.62)) !important;
    transition: transform 0.3s ease !important;
}

.continent-card-icon.is-hidden,
.continent-card-fallback.is-hidden {
    display: none !important;
}

.grid-card.continent-grid-card:hover .continent-card-icon,
.root-explorer-grid .continent-grid-card:hover .continent-card-icon {
    transform: scale(1.08) !important;
}

.grid-card.continent-grid-card .continent-card-fallback,
.root-explorer-grid .continent-grid-card .continent-card-fallback {
    font-size: 4.75rem !important;
    line-height: 1 !important;
    margin: 0 auto 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.62)) !important;
}

.grid-card.continent-grid-card .continent-card-copy,
.grid-card.continent-grid-card .continent-card-title,
.grid-card.continent-grid-card .continent-card-subtitle,
.root-explorer-grid .continent-grid-card .continent-card-copy,
.root-explorer-grid .continent-grid-card .continent-card-title,
.root-explorer-grid .continent-grid-card .continent-card-subtitle {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: center !important;
    justify-content: center !important;
}

.grid-card.continent-grid-card .continent-card-copy,
.root-explorer-grid .continent-grid-card .continent-card-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.grid-card.continent-grid-card .continent-card-title,
.root-explorer-grid .continent-grid-card .continent-card-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 92% !important;
    margin: 2px auto 0 !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.62) 100%) !important;
    color: #f8fafc !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.55) !important;
}

.grid-card.continent-grid-card .continent-card-title--na,
.root-explorer-grid .continent-grid-card .continent-card-title--na {
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-width: 94% !important;
    padding: 6px 9px !important;
}

.grid-card.continent-grid-card .continent-card-subtitle,
.root-explorer-grid .continent-grid-card .continent-card-subtitle {
    min-height: 30px !important;
    padding: 4px 14px !important;
    margin-top: auto !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    background: rgba(226, 232, 240, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

.grid-card.continent-grid-card .continent-card-name-badge,
.root-explorer-grid .continent-grid-card .continent-card-name-badge {
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
}

.root-explorer-card,
.country-grid-card,
.continent-grid-card,
.root-explorer-grid .continent-grid-card {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.root-explorer-card img {
    max-width: 74px !important;
    max-height: 74px !important;
    margin: 0 auto 8px !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.62)) !important;
}

.root-explorer-card[data-home-card-key="big-tournament"] .home-world-cup-icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

/* Bracket-capable card carries an extra action button, so trim the logo,
   label and button enough that nothing gets clipped by the card's rounded
   edge (overflow:hidden) and the button sits with a clean bottom margin. */
.root-explorer-card[data-home-card-key="big-tournament"] {
    gap: 6px;
}
/* Wear the same Midnight Obsidian skin as the Knockout button so the World Cup
   card and its button read as one cohesive bracket-themed unit. */
.root-explorer-grid .root-explorer-card[data-home-card-key="big-tournament"],
.root-explorer-card[data-home-card-key="big-tournament"] {
    background: linear-gradient(135deg, #0B0C10 0%, #1F2833 100%) !important;
    background-color: #0B0C10 !important;
    background-image: linear-gradient(135deg, #0B0C10 0%, #1F2833 100%) !important;
    border: 1px solid #45A29E !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(102, 252, 241, 0.10) inset !important;
}
.root-explorer-card[data-home-card-key="big-tournament"] .root-explorer-title {
    color: #66FCF1 !important;
    -webkit-text-fill-color: #66FCF1 !important;
    text-shadow: 0 0 12px rgba(102, 252, 241, 0.35) !important;
    font-size: clamp(0.84rem, 3vw, 0.98rem) !important;
}
.root-explorer-card[data-home-card-key="big-tournament"] .root-explorer-subtitle {
    color: #9fb6b4 !important;
}
.root-explorer-card[data-home-card-key="big-tournament"] .card-dual-actions {
    padding-top: 4px;
    padding-bottom: 14px;
}
.root-explorer-card[data-home-card-key="big-tournament"] .card-dual-btn {
    padding: 7px 9px;
    font-size: clamp(0.7rem, 2.5vw, 0.8rem);
    border-radius: 8px;
}
/* On the obsidian card, lift the Knockout button so it still reads as a button
   (slightly brighter panel + glowing teal border) rather than blending in. */
.root-explorer-card[data-home-card-key="big-tournament"] .card-dual-btn--knockout {
    background: linear-gradient(135deg, #16323a 0%, #1F2833 100%);
    border: 1px solid #E8B33A;
    box-shadow: 0 0 0 1px rgba(232, 179, 58, 0.25), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
}

.country-grid-card img,
#cont-country-grid .country-grid-card img {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 8px !important;
    display: block !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.62)) !important;
    transition: transform 0.3s ease !important;
}

.grid-card.country-grid-card:hover img,
.country-region-grid .grid-card:hover img {
    transform: scale(1.08) !important;
}

.country-grid-card-copy,
.root-explorer-card span,
.continent-card-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.grid-card.country-grid-card .country-grid-card-name,
.country-region-grid .grid-card .country-grid-card-name,
#cont-country-grid .country-grid-card-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

.continent-card-fallback {
    font-size: 5rem !important;
}

.grid-card.continent-grid-card .continent-card-icon-source,
.root-explorer-grid .continent-grid-card .continent-card-icon-source {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 6px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #cbd5e1 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
}

/* ---- Mobile Bottom Nav: dark themed ---- */
.mobile-bottom-nav {
    background: rgba(10, 18, 36, 0.97) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6) !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mobile-nav-viewport-offset, 0px) !important;
    will-change: transform;
    transform: translateZ(0);
}

.mobile-nav-item {
    color: rgba(203, 213, 225, 0.75) !important;
}

.mobile-nav-item .nav-icon {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.mobile-nav-item .nav-label {
    color: rgba(203, 213, 225, 0.75) !important;
}

.mobile-nav-item.active,
.mobile-nav-item.active .nav-label {
    color: #93c5fd !important;
}

/* ---- Tournament cards: bottom-aligned strips, no visible names ---- */
.league-card .tournament-name,
.league-card .tournament-card-name,
.league-card .tournament-card-name--strong,
.league-card .finished-card-tournament-name {
    display: none !important;
}

.league-card .tournament-card-shell,
.league-card .tournament-card-shell--compact,
.league-card .finished-card-body,
.league-card .finished-card-body--with-winner {
    height: 100% !important;
    justify-content: flex-start !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    gap: 8px !important;
}

.league-card .finished-card-logo {
    width: var(--card-logo-size) !important;
    height: var(--card-logo-size) !important;
}

.league-card .card-countdown-badge,
.league-card .next-match-countdown,
.league-card .finished-card-winner-frame,
.league-card .finished-card-status-pill {
    align-self: center !important;
    margin-top: auto !important;
    margin-bottom: 4px !important;
}

.league-card .card-countdown-badge,
.league-card .finished-card-winner-frame,
.league-card .finished-card-status-pill {
    min-width: 118px !important;
    max-width: calc(100% - 16px) !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    background-color: rgba(15, 23, 42, 0.88) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
}

.league-card .finished-card-winner-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.league-card .finished-card-winner-copy {
    gap: 2px !important;
}

.league-card .finished-card-winner-name,
.league-card .card-countdown-value {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

.league-card .finished-card-winner-meta,
.league-card .card-countdown-kicker,
.league-card .finished-card-status-pill {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: rgba(203, 213, 225, 0.9) !important;
    -webkit-text-fill-color: rgba(203, 213, 225, 0.9) !important;
}

.league-card .finished-card-winner-frame,
.league-card .card-countdown-badge {
    width: 118px !important;
}

/* Unified countdown chip across all card variants */
.grid-card .card-countdown-badge,
.league-card .card-countdown-badge,
.grid-card .next-match-countdown .card-countdown-badge,
.league-card .next-match-countdown .card-countdown-badge {
    width: 118px !important;
    min-width: 118px !important;
    max-width: calc(100% - 16px) !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 100%) !important;
    background-color: rgba(15, 23, 42, 0.88) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
}

/* Winner chip uses same size/placement shell as countdown chip */
.grid-card .finished-card-winner-frame,
.league-card .finished-card-winner-frame {
    width: 118px !important;
    min-width: 118px !important;
    max-width: calc(100% - 16px) !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 100%) !important;
    background-color: rgba(15, 23, 42, 0.88) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
}

.grid-card .card-countdown-badge.is-live,
.league-card .card-countdown-badge.is-live,
.grid-card .next-match-countdown .card-countdown-badge.is-live,
.league-card .next-match-countdown .card-countdown-badge.is-live {
    border-color: rgba(74, 222, 128, 0.55) !important;
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.38) 0%, rgba(15, 23, 42, 0.82) 100%) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45), 0 0 10px rgba(74, 222, 128, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.grid-card .card-countdown-badge.is-soon,
.league-card .card-countdown-badge.is-soon,
.grid-card .next-match-countdown .card-countdown-badge.is-soon,
.league-card .next-match-countdown .card-countdown-badge.is-soon {
    border-color: rgba(251, 191, 36, 0.55) !important;
    background: linear-gradient(180deg, rgba(146, 64, 14, 0.30) 0%, rgba(15, 23, 42, 0.82) 100%) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45), 0 0 10px rgba(251, 191, 36, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.grid-card .card-countdown-badge.is-upcoming,
.league-card .card-countdown-badge.is-upcoming,
.grid-card .next-match-countdown .card-countdown-badge.is-upcoming,
.league-card .next-match-countdown .card-countdown-badge.is-upcoming,
.grid-card .card-countdown-badge.is-scheduled,
.league-card .card-countdown-badge.is-scheduled,
.grid-card .next-match-countdown .card-countdown-badge.is-scheduled,
.league-card .next-match-countdown .card-countdown-badge.is-scheduled {
    border-color: rgba(125, 211, 252, 0.45) !important;
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.24) 0%, rgba(15, 23, 42, 0.82) 100%) !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45), 0 0 10px rgba(96, 165, 250, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.grid-card .card-countdown-kicker,
.league-card .card-countdown-kicker,
.grid-card .next-match-countdown .card-countdown-kicker,
.league-card .next-match-countdown .card-countdown-kicker {
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    color: rgba(148, 163, 184, 0.9) !important;
    -webkit-text-fill-color: rgba(148, 163, 184, 0.9) !important;
}

.grid-card .card-countdown-value,
.league-card .card-countdown-value,
.grid-card .next-match-countdown .card-countdown-value,
.league-card .next-match-countdown .card-countdown-value {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #e5e7eb !important;
    -webkit-text-fill-color: #e5e7eb !important;
}

.grid-card .card-countdown-badge.is-live .card-countdown-value,
.league-card .card-countdown-badge.is-live .card-countdown-value,
.grid-card .next-match-countdown .card-countdown-badge.is-live .card-countdown-value,
.league-card .next-match-countdown .card-countdown-badge.is-live .card-countdown-value {
    color: #86efac !important;
    -webkit-text-fill-color: #86efac !important;
}

.grid-card .card-countdown-badge.is-soon .card-countdown-value,
.league-card .card-countdown-badge.is-soon .card-countdown-value,
.grid-card .next-match-countdown .card-countdown-badge.is-soon .card-countdown-value,
.league-card .next-match-countdown .card-countdown-badge.is-soon .card-countdown-value {
    color: #fcd34d !important;
    -webkit-text-fill-color: #fcd34d !important;
}

.grid-card .card-countdown-badge.is-upcoming .card-countdown-value,
.league-card .card-countdown-badge.is-upcoming .card-countdown-value,
.grid-card .next-match-countdown .card-countdown-badge.is-upcoming .card-countdown-value,
.league-card .next-match-countdown .card-countdown-badge.is-upcoming .card-countdown-value,
.grid-card .card-countdown-badge.is-scheduled .card-countdown-value,
.league-card .card-countdown-badge.is-scheduled .card-countdown-value,
.grid-card .next-match-countdown .card-countdown-badge.is-scheduled .card-countdown-value,
.league-card .next-match-countdown .card-countdown-badge.is-scheduled .card-countdown-value {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* Keep countdown/winner strips anchored to the card bottom on all card types */
.grid-card .js-card-center-trigger,
.grid-card .finished-card-body,
.grid-card .finished-card-body--with-winner,
.grid-card .tournament-card-shell,
.grid-card .tournament-card-shell--compact {
    height: 100% !important;
    justify-content: flex-start !important;
    padding-top: 24px !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
}

/* Keep logos clear of year/status badges and bottom strips in compact 220px cards. */
.grid-card .js-card-center-trigger .tournament-card-logo,
.grid-card .js-card-center-trigger .tournament-card-logo--compact,
.grid-card .js-card-center-trigger .tournament-card-logo--api-normalized {
    top: 50% !important;
}

.grid-card.card-upcoming-with-defender .js-card-center-trigger .tournament-card-logo,
.grid-card.card-upcoming-with-defender .js-card-center-trigger .tournament-card-logo--compact,
.grid-card.card-upcoming-with-defender .js-card-center-trigger .tournament-card-logo--api-normalized,
.grid-card.card-upcoming-without-defender .js-card-center-trigger .tournament-card-logo,
.grid-card.card-upcoming-without-defender .js-card-center-trigger .tournament-card-logo--compact,
.grid-card.card-upcoming-without-defender .js-card-center-trigger .tournament-card-logo--api-normalized {
    width: 76px !important;
    height: 76px !important;
}

.grid-card.card-finished-with-winner .finished-card-logo,
.grid-card.card-active-finished-with-winner .finished-card-logo {
    top: 50% !important;
    width: 72px !important;
    height: 72px !important;
}

.grid-card .js-card-center-trigger .tournament-card-logo--title-safe,
.grid-card .js-card-center-trigger .tournament-card-logo--compact.tournament-card-logo--title-safe,
.grid-card .js-card-center-trigger .tournament-card-logo--api-normalized.tournament-card-logo--title-safe,
.league-card .js-card-center-trigger .tournament-card-logo--title-safe,
.league-card .js-card-center-trigger .tournament-card-logo--compact.tournament-card-logo--title-safe,
.league-card .js-card-center-trigger .tournament-card-logo--api-normalized.tournament-card-logo--title-safe {
    width: 72px !important;
    height: 72px !important;
    top: 50% !important;
}

.grid-card .finished-card-logo--title-safe,
.league-card .finished-card-logo--title-safe {
    width: 66px !important;
    height: 66px !important;
    top: 50% !important;
}

.grid-card.card-finished-with-winner .finished-card-logo--title-safe,
.grid-card.card-active-finished-with-winner .finished-card-logo--title-safe,
.league-card.card-finished-with-winner .finished-card-logo--title-safe,
.league-card.card-active-finished-with-winner .finished-card-logo--title-safe {
    width: 56px !important;
    height: 56px !important;
    top: 40% !important;
}

.grid-card.card-finished-with-winner .finished-card-body--with-winner,
.grid-card.card-active-finished-with-winner .finished-card-body--with-winner,
.league-card.card-finished-with-winner .finished-card-body--with-winner,
.league-card.card-active-finished-with-winner .finished-card-body--with-winner {
    padding-top: 18px !important;
    gap: 4px !important;
}

.grid-card .js-card-center-trigger .card-countdown-badge,
.grid-card .js-card-center-trigger .next-match-countdown,
.grid-card .finished-card-body .finished-card-status-pill,
.grid-card .finished-card-body .finished-card-winner-frame,
.grid-card .finished-card-body--with-winner .finished-card-winner-frame,
.grid-card .finished-card-body .card-countdown-badge,
.grid-card .finished-card-body--with-winner .card-countdown-badge,
.grid-card .tournament-card-shell .card-countdown-badge,
.grid-card .tournament-card-shell .next-match-countdown {
    align-self: center !important;
    margin-top: auto !important;
    margin-bottom: 1px !important;
}

/* Hard anchor countdown in card center so it does not drift between logos/card variants */
.js-card-center-trigger {
    position: relative !important;
}

.js-card-center-trigger > .card-countdown-badge,
.js-card-center-trigger > .next-match-countdown {
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    z-index: 3;
}

.js-card-center-trigger > .next-match-countdown {
    width: auto !important;
}

/* ==================================================================
   MIDNIGHT OBSIDIAN - PHASE 1
   Dialogs + Tables readability and consistency overrides
   ================================================================== */

/* Modal overlays */
.modal,
#smartSearchModal.modal,
.sync-modal-overlay,
.manage-modal-overlay,
.team-info-modal {
    background: rgba(2, 6, 23, 0.72) !important;
    -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
    backdrop-filter: blur(8px) saturate(130%) !important;
}

/* Modal surfaces */
.modal-content,
.sub-pref-modal-content,
.sync-modal-content,
.calendar-sync-modal-content,
.manage-modal-content,
.sub-promo-modal,
.team-info-modal > div,
.fixture-info-popup {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.94) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #e5e7eb !important;
}

/* Modal typography */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.sub-pref-modal-content h1,
.sub-pref-modal-content h2,
.sub-pref-modal-content h3,
.sync-modal-header h2,
.manage-modal-header h2,
.team-info-modal h1,
.team-info-modal h2,
.team-info-modal h3 {
    color: #f8fafc !important;
}

.modal-content p,
.modal-content span,
.modal-content label,
.sub-pref-modal-content p,
.sub-pref-modal-content span,
.sub-pref-modal-content label,
.sync-modal-header p,
.manage-modal-header p,
.sync-modal-copy,
.sync-modal-copy > span,
.sync-modal-note,
.team-info-modal p,
.team-info-modal span,
.team-info-modal label {
    color: rgba(226, 232, 240, 0.92) !important;
}

/* Close buttons across dialogs */
.modal-close,
.modal-close-btn,
.sync-modal-close,
.manage-modal-close {
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #e2e8f0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.modal-close:hover,
.modal-close-btn:hover,
.sync-modal-close:hover,
.manage-modal-close:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    color: #ffffff !important;
}

/* Generic tables (main app) */
table,
.teams-table,
.fixtures-table {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

table th,
.teams-table th,
.fixtures-table th {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
}

table td,
.teams-table td,
.fixtures-table td {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: transparent !important;
}

table tbody tr,
.teams-table tbody tr,
.fixtures-table tbody tr {
    background: rgba(15, 23, 42, 0.45) !important;
}

table tbody tr:nth-child(odd),
.teams-table tbody tr:nth-child(odd),
.fixtures-table tbody tr:nth-child(odd) {
    background: rgba(30, 41, 59, 0.34) !important;
}

table tbody tr:nth-child(even),
.teams-table tbody tr:nth-child(even),
.fixtures-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.28) !important;
}

table tbody tr:hover,
.teams-table tbody tr:hover,
.fixtures-table tbody tr:hover {
    background: rgba(51, 65, 85, 0.62) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Inputs/selects inside dialogs */
.modal-content input,
.modal-content select,
.modal-content textarea,
.sub-pref-modal-content input,
.sub-pref-modal-content select,
.sub-pref-modal-content textarea,
.sync-modal-content input,
.sync-modal-content select,
.sync-modal-content textarea,
.manage-modal-content input,
.manage-modal-content select,
.manage-modal-content textarea {
    background: rgba(15, 23, 42, 0.92) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder,
.sub-pref-modal-content input::placeholder,
.sub-pref-modal-content textarea::placeholder {
    color: rgba(148, 163, 184, 0.9) !important;
}

/* Desktop/tablet cleanup: remove footer credit block and keep only tight 8px safe spacing */
@media (min-width: 768px) {
    .desktop-footer {
        display: none !important;
    }

    .container {
        margin: 0 !important;
        padding: 0 8px 8px !important;
        max-width: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .header {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    .explorer-section,
    .fixtures-section {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        max-width: none !important;
    }

    body {
        padding-bottom: 80px !important;
    }
}

/* ---- Compact inner-panel spacing: reduce gaps between stacked panels ---- */
#stepCountry:not(.hidden) #pageInfoPanel,
#stepCountry:not(.hidden) #countriesGrid,
#stepLeague:not(.hidden) #leaguesGrid,
#stepTeam:not(.hidden) #teamsGrid {
    padding-top: 4px !important;
}

#stepTeam:not(.hidden) #teamsGrid {
    gap: 6px !important;
}

#stepLeague:not(.hidden) #leaguesGrid {
    gap: 6px !important;
}

#stepCountry:not(.hidden) #countriesGrid {
    gap: 6px !important;
}

/* Avoid blank framed strip when top info containers have no content */
#pageInfoPanel:empty,
#continent-tab-info:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Remove the tiny empty framed strip under header when Step 1 has no content yet */
.explorer-section:has(#stepCountry:not(.hidden) #pageInfoPanel:empty):has(#stepCountry:not(.hidden) #countriesGrid:empty) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 6px !important;
}

.explorer-section:has(#stepCountry:not(.hidden) #pageInfoPanel:empty):has(#stepCountry:not(.hidden) #countriesGrid:empty) .explorer-step {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.country-region-section {
    margin-bottom: 4px !important;
}

/* ---- Desktop header alignment: all layers share the same 20px horizontal bounds ---- */
@media (min-width: 769px) {
    .header .header-content {
        left: 20px !important;
        right: 20px !important;
        width: calc(100% - 40px) !important;
        transform: none !important;
        text-align: center !important;
    }
    .header .top-quick-nav {
        left: 50% !important;
        right: auto !important;
        width: min(calc(100% - 40px), 760px) !important;
        transform: translateX(-50%) !important;
    }
}

@media (min-width: 1201px) {
    .header .desktop-nav {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* ---- Final nav/header stabilization: prevent jump while resizing ---- */
.header {
    height: 200px !important;
    min-height: 200px !important;
    overflow: hidden !important;
}

.header .header-content {
    top: 54px !important;
    bottom: 126px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 24px), 760px) !important;
    max-width: min(calc(100% - 24px), 760px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    z-index: 8 !important;
    pointer-events: none !important;
}

.header .header-content .header-kicker,
.header .header-content .header-title-animated {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.header .header-content .header-title-animated {
    justify-content: center !important;
    letter-spacing: 0.01em !important;
}

.header .header-content .header-kicker {
    margin: 0 0 8px 0 !important;
}

.header .top-quick-nav {
    top: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 24px) !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .header-logo-wrap {
        width: 280px !important;
        max-width: 280px !important;
    }

    .header .header-content {
        width: min(calc(100% - 20px), 760px) !important;
        max-width: min(calc(100% - 20px), 760px) !important;
    }

    .header .top-quick-nav {
        bottom: 10px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100% - 20px) !important;
        transform: translateX(-50%) !important;
    }
}

/* Final RTL fixes (kept at end to win cascade) */
html[dir="rtl"] .header .header-content {
    text-align: center !important;
}

html[dir="rtl"] .header-title-animated {
    direction: rtl;
    unicode-bidi: plaintext;
    justify-content: center;
}

html[dir="rtl"] .header-title-animated .header-ball-run {
    display: none !important;
}

html[dir="rtl"] .top-quick-nav .auth-controls {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .top-quick-nav {
    direction: ltr;
}

html[dir="rtl"] .top-quick-nav-btn,
html[dir="rtl"] .lang-switcher,
html[dir="rtl"] .top-quick-nav .auth-controls {
    direction: rtl;
}

/* RTL Input Field Support */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input[type="text"]::placeholder,
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="password"]::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}

img.img-load-failed {
    visibility: hidden;
}

/* Lock LTR fields (username, email, password) to always be English */
html[dir="rtl"] input[type="text"][dir="ltr"],
html[dir="rtl"] input[type="email"][dir="ltr"],
html[dir="rtl"] input[type="password"][dir="ltr"] {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .page-info-panel,
html[dir="rtl"] .page-info-title,
html[dir="rtl"] .page-info-description {
    text-align: right !important;
}

/* Final override: keep dedicated team matches in Midnight Obsidian (wins late cascade) */
.team-match-showcase .match-card,
.team-match-showcase .team-match-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.team-match-showcase .match-card-header,
.team-match-showcase .team-match-card__header {
    background: rgba(15, 23, 42, 0.82) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.team-match-showcase .match-date {
    color: #f8fafc !important;
}

.team-match-showcase .match-time {
    color: #cbd5e1 !important;
}

/* My Favorites: keep Hebrew content RTL-friendly while preserving card layout */
.my-favorites-info-panel {
    unicode-bidi: plaintext;
}

.favorite-team-card {
    unicode-bidi: plaintext;
}

.favorite-team-card-hint {
    display: block;
    margin-top: 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

html[dir="rtl"] .my-favorites-info-panel {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .my-favorites-info-panel .page-info-description {
    unicode-bidi: plaintext;
}

.favorites-h2h-bridge {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
}

.favorites-h2h-head {
    font-weight: 700;
    font-size: 0.92rem;
    color: #334155;
    margin-bottom: 8px;
}

/* ================================================================
   FINAL OVERRIDE: keep Explore description panel same height in EN/HE
   ================================================================ */
#pageInfoPanel .page-info-description,
.page-info-panel .page-info-description {
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.45 !important;
    min-height: calc(1.45em * 2) !important;
    max-height: calc(1.45em * 2) !important;
    text-wrap: balance;
}

/* Home explore panel: keep the description consistently at two lines in EN and HE */
#stepCountry:not(.hidden) #pageInfoPanel .page-info-description {
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    white-space: pre-line !important;
    min-height: auto !important;
    max-height: none !important;
    line-clamp: unset !important;
    -webkit-line-clamp: unset !important;
}

/* Hebrew version: slightly larger for better readability */
html[dir="rtl"] #stepCountry:not(.hidden) #pageInfoPanel .page-info-description {
    font-size: 0.96rem !important;
    line-height: 1.42 !important;
    white-space: pre-line !important;
    min-height: auto !important;
    max-height: none !important;
    line-clamp: unset !important;
    -webkit-line-clamp: unset !important;
}

/* Mobile viewport: allow more height for both languages to prevent text clipping */
@media (max-width: 480px) {
    #stepCountry:not(.hidden) #pageInfoPanel .page-info-description {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        min-height: auto !important;
        max-height: none !important;
        line-clamp: unset !important;
        -webkit-line-clamp: unset !important;
    }

    html[dir="rtl"] #stepCountry:not(.hidden) #pageInfoPanel .page-info-description {
        font-size: 0.94rem !important;
        line-height: 1.38 !important;
        min-height: auto !important;
        max-height: none !important;
        line-clamp: unset !important;
        -webkit-line-clamp: unset !important;
    }
}

.favorites-h2h-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.favorites-h2h-label {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.favorites-h2h-select {
    min-width: 180px;
    max-width: 260px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 8px;
    padding: 7px 10px;
    color: #0f172a;
}

.favorites-h2h-year {
    min-width: 120px;
    max-width: 140px;
}

.favorites-h2h-result {
    margin-top: 8px;
    font-size: 0.86rem;
    color: #475569;
}

.favorites-h2h-summary {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.favorites-h2h-item {
    padding: 6px 0;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
}

.favorites-h2h-item:first-of-type {
    border-top: 0;
}

.favorites-h2h-main {
    color: #0f172a;
}

.favorites-h2h-meta {
    font-size: 0.78rem;
    color: #64748b;
}

.favorites-h2h-empty {
    color: #64748b;
    font-style: italic;
}

html[dir="rtl"] .favorites-h2h-bridge,
html[dir="rtl"] .favorites-h2h-result,
html[dir="rtl"] .favorites-h2h-head {
    direction: rtl;
    text-align: right;
}

#manageModal .favorites-h2h-bridge--upcoming {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#teamMatchesDialog .favorites-h2h-bridge--upcoming {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* --- Team-matches dialog: Obsidian leg/chip Obsidian treatment --- */
#teamMatchesDialog .manage-leg-details__inline-chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.32);
    background: rgba(15, 28, 56, 0.72);
    color: #dbeafe;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

#teamMatchesDialog .manage-leg-details__inline-chip--stacked {
    flex-wrap: wrap;
    row-gap: 4px;
}

#teamMatchesDialog .manage-leg-details__inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    min-width: 20px;
    flex-shrink: 0;
    padding-top: 1px;
}

#teamMatchesDialog .manage-leg-details__inline-label {
    flex: 1;
    color: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

#teamMatchesDialog .manage-leg-details__inline-subline {
    display: block;
    width: 100%;
    padding-inline-start: 28px;
    color: #94a3b8;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 3px;
}

#teamMatchesDialog[dir="rtl"] .manage-leg-details__inline-subline,
#teamMatchesDialog .manage-leg-details__inline-chip[dir="rtl"] .manage-leg-details__inline-subline {
    padding-inline-start: 0;
    padding-inline-end: 28px;
    text-align: right;
}

#teamMatchesDialog[dir="rtl"] .manage-leg-details__inline-chip,
#teamMatchesDialog[dir="rtl"] .manage-leg-details__inline-chip--stacked {
    direction: rtl;
    flex-direction: row;
}

#teamMatchesDialog .manage-competition-meta {
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

#teamMatchesDialog .manage-competition-chip {
    border-color: rgba(125, 211, 252, 0.35);
    background: rgba(30, 64, 175, 0.28);
    color: #bfdbfe;
    padding: 4px 11px;
    font-size: 0.74rem;
    border-radius: 999px;
}

#teamMatchesDialog .manage-competition-chip--leg {
    border-color: rgba(196, 181, 253, 0.48);
    background: rgba(76, 29, 149, 0.34);
    color: #ddd6fe;
}

#teamMatchesDialog .manage-leg-details summary {
    color: #93c5fd;
}

#teamMatchesDialog .manage-leg-details__body {
    border-color: rgba(125, 211, 252, 0.38);
    background: rgba(15, 28, 56, 0.65);
    color: #dbeafe;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 8px;
    margin-top: 6px;
}

#teamMatchesDialog .manage-leg-details__label {
    color: #93c5fd;
}

#teamMatchesDialog .manage-leg-details__note {
    color: #cbd5e1;
}

#manageModal .favorites-h2h-controls {
    gap: 6px;
}

#teamMatchesDialog .favorites-h2h-controls {
    gap: 6px;
}

#manageModal .favorites-h2h-select {
    min-width: 120px;
    max-width: 180px;
}

#teamMatchesDialog .favorites-h2h-select {
    min-width: 120px;
    max-width: 180px;
}

#manageModal .favorites-h2h-year {
    min-width: 98px;
    max-width: 118px;
}

#teamMatchesDialog .favorites-h2h-year {
    min-width: 98px;
    max-width: 118px;
}

#manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-result {
    color: #cbd5e1;
}

#manageModal .favorites-h2h-bridge--upcoming .favorites-panel-btn[data-upcoming-h2h-action="load"],
#teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-panel-btn[data-upcoming-h2h-action="load"] {
    font-size: 0.98rem;
    font-weight: 700;
    min-height: 44px;
    padding: 10px 14px;
}

#teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-result {
    color: #cbd5e1;
}

#manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-main {
    color: #e2e8f0;
}

#teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-main {
    color: #e2e8f0;
}

#manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-meta,
#manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-empty {
    color: #94a3b8;
}

#teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-meta,
#teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-empty {
    color: #94a3b8;
}

#manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-summary {
    color: #f8fafc;
}

#teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-summary {
    color: #f8fafc;
}

@media (max-width: 768px) {
    #manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-controls {
        display: grid;
        grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
        row-gap: 8px;
        column-gap: 8px;
        align-items: center;
    }

    #teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-controls {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 8px;
        column-gap: 10px;
        align-items: center;
    }

    #manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-label {
        white-space: nowrap;
        font-size: 0.76rem;
    }

    #teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-label {
        white-space: nowrap;
        font-size: 0.8rem;
    }

    #manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-select,
    #manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-year {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 38px;
    }

    #teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-select,
    #teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-year {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 38px;
    }

    #manageModal .favorites-h2h-bridge--upcoming .favorites-panel-btn[data-upcoming-h2h-action="load"] {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 40px;
        margin-top: 2px;
    }

    #teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-panel-btn[data-upcoming-h2h-action="load"] {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 40px;
        margin-top: 2px;
    }

    #manageModal .favorites-h2h-bridge--upcoming .favorites-h2h-result {
        margin-top: 10px;
    }

    #teamMatchesDialog .favorites-h2h-bridge--upcoming .favorites-h2h-result {
        margin-top: 10px;
    }
}

html[dir="rtl"] .favorite-team-card {
    direction: rtl;
    text-align: center;
}

html[dir="rtl"] .favorite-team-card-hint {
    text-transform: none;
    letter-spacing: 0;
}

/* Keep control/button order stable between EN and HE */
html[dir="rtl"] .top-quick-nav,
html[dir="rtl"] .mobile-bottom-nav,
html[dir="rtl"] .controls-bar,
html[dir="rtl"] .selection-controls,
html[dir="rtl"] .fixtures-table {
    direction: ltr !important;
}

html[dir="rtl"] .controls-bar .subscription-help-note,
html[dir="rtl"] .controls-bar .subscription-help-note-title,
html[dir="rtl"] .controls-bar .subscription-help-note-line,
html[dir="rtl"] .controls-bar .subscription-actions-title,
html[dir="rtl"] .controls-bar .manual-actions-title {
    direction: rtl !important;
    text-align: right !important;
}

/* Keep Hebrew readability inside textual cells while preserving column order */
html[dir="rtl"] .fixtures-table .team-col,
html[dir="rtl"] .fixtures-table .team-col span {
    direction: rtl !important;
    text-align: right !important;
}

/* Upcoming/Results table: light and elegant refinement */
.fixtures-section .fixtures-table {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    background: #ffffff;
}

.fixtures-section .fixtures-table thead th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.fixtures-section .fixtures-table tbody tr:nth-child(odd),
.fixtures-section .fixtures-table tbody tr:nth-child(even) {
    background: #ffffff;
}

.fixtures-section .fixtures-table tbody tr:hover {
    background: #f8fafc;
    transform: none;
    box-shadow: none;
}

.fixtures-table .team-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Prevent generic span rules from stretching/hiding role badges */
.fixtures-table .team-col > .team-role-badge.desktop-only {
    flex: 0 0 auto !important;
    margin-inline-end: 6px;
}

.fixtures-table .away-team .team-col > .team-role-badge.desktop-only {
    margin-inline-end: 0;
    margin-inline-start: 6px;
}

.fixtures-table .team-role-badge.home-role {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #bfdbfe;
}

.fixtures-table .team-role-badge.away-role {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}

.fixtures-table .team-name-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .fixtures-table .team-role-badge {
        min-width: 42px;
        padding: 1px 6px;
        font-size: 9px;
    }

    .fixtures-table .team-col .team-stack .team-name-logo .team-role-badge {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .fixtures-table .team-col .team-stack .team-name-logo .team-name-value {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    .fixtures-table .home-team .team-stack .team-name-logo {
        gap: 4px !important;
    }

    .fixtures-table .away-team .team-stack .team-name-logo {
        gap: 4px !important;
    }
}

/* Keep home explorer card order identical to English */
html[dir="rtl"] .root-explorer-grid {
    direction: ltr !important;
}

html[dir="rtl"] .root-explorer-grid .root-explorer-title,
html[dir="rtl"] .root-explorer-grid .root-explorer-subtitle {
    direction: rtl !important;
    text-align: center !important;
}

/* Header layout hard-fix: keep desktop aligned with mobile and avoid RTL text clipping */
.header .header-content {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 24px), 560px) !important;
    max-width: min(calc(100% - 24px), 560px) !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    z-index: 3 !important;
}

.header .header-title-animated {
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.header .header-kicker {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

html[dir="rtl"] .header .header-content {
    position: absolute !important;
    inset: auto !important;
    top: 62px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 24px), 560px) !important;
    max-width: min(calc(100% - 24px), 560px) !important;
    text-align: center !important;
}

@media (min-width: 769px) {
    .header .top-quick-nav {
        left: 50% !important;
        right: auto !important;
        width: min(calc(100% - 24px), 760px) !important;
        transform: translateX(-50%) !important;
    }
}

/* =====================================================================
   FINAL HEADER STACK LOCK (highest priority)
   Keeps strict vertical flow: title -> subtitle -> upcoming -> quick-nav
   ===================================================================== */
.header {
    height: 252px !important;
    min-height: 252px !important;
}

.header .header-content {
    top: 56px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(94vw, 680px) !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    z-index: 14 !important;
}

.header .header-title-single-line,
.header .header-title-animated {
    margin: 0 !important;
    line-height: 1.05 !important;
}

.header-subtitle-line {
    margin: 4px 0 0 0 !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    max-width: min(92vw, 640px) !important;
    z-index: 15 !important;
}

#headerUpcomingBtn.header-upcoming-btn {
    position: absolute !important;
    top: 150px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 18px), 760px) !important;
    min-height: 40px !important;
    z-index: 16 !important;
}

.header .top-quick-nav {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 18px), 760px) !important;
    z-index: 13 !important;
}

html[lang="en"] .header-subtitle-line {
    font-size: 0.68rem !important;
    max-width: min(90vw, 620px) !important;
}

@media (max-width: 768px) {
    .header {
        height: 260px !important;
        min-height: 260px !important;
    }

    .header .header-content {
        top: 54px !important;
        width: min(95vw, 560px) !important;
        padding: 0 10px !important;
        gap: 5px !important;
    }

    .header-subtitle-line {
        margin-top: 2px !important;
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
        max-width: min(90vw, 520px) !important;
    }

    html[lang="en"] .header-subtitle-line {
        font-size: 0.64rem !important;
        max-width: min(88vw, 500px) !important;
    }

    #headerUpcomingBtn.header-upcoming-btn {
        top: 156px !important;
        width: min(calc(100% - 14px), 740px) !important;
        min-height: 38px !important;
        font-size: 0.82rem !important;
    }

    .header .top-quick-nav {
        bottom: 8px !important;
        width: min(calc(100% - 14px), 740px) !important;
    }
}

/* Header language switcher: top-left, outside quick nav */
.header .header-lang-switcher {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 8 !important;
}

.header .header-lang-switcher .lang-switcher-select {
    min-width: 64px !important;
    height: 34px !important;
}

@media (max-width: 768px) {
    .header .header-lang-switcher {
        top: 10px !important;
        left: 10px !important;
    }

    .header .header-lang-switcher .lang-switcher-select {
        min-width: 58px !important;
        height: 30px !important;
    }
}

/* Ensure desktop login text in upper nav is never clipped */
.header .top-quick-nav .auth-controls,
.header .top-quick-nav .auth-container,
.header .top-quick-nav .auth-btn,
.header .top-quick-nav .auth-btn-login,
.header .top-quick-nav .auth-btn-logout {
    flex: 0 0 auto !important;
}

.header .top-quick-nav .auth-btn,
.header .top-quick-nav .auth-btn-login,
.header .top-quick-nav .auth-btn-logout {
    min-width: max-content !important;
    padding: 0 12px !important;
}

.header .top-quick-nav .auth-btn .auth-text,
.header .top-quick-nav .auth-btn-login .auth-text,
.header .top-quick-nav .auth-btn-logout .auth-text {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Mobile: show icon-only auth in upper nav to avoid clipping */
@media (max-width: 768px) {
    .header .top-quick-nav .auth-btn,
    .header .top-quick-nav .auth-btn-login,
    .header .top-quick-nav .auth-btn-logout {
        min-width: 44px !important;
        width: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .header .top-quick-nav .auth-btn .auth-text,
    .header .top-quick-nav .auth-btn-login .auth-text,
    .header .top-quick-nav .auth-btn-logout .auth-text {
        display: none !important;
    }

    /* Keep the logged-in logout button readable on mobile */
    .header .top-quick-nav .auth-btn-logout-nav {
        width: auto !important;
        min-width: 88px !important;
        padding: 0 12px !important;
    }

    .header .top-quick-nav .auth-btn-logout-nav .auth-text {
        display: inline-flex !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .header .top-quick-nav .auth-btn-logout-nav .auth-icon {
        display: inline-flex !important;
        font-size: 0.82rem !important;
    }
}

/* Emphasize Login action in upper nav */
.header .top-quick-nav .auth-btn-login {
    border-color: rgba(250, 204, 21, 0.58) !important;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.45) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
    color: #f8fafc !important;
    font-weight: 800 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(250, 204, 21, 0.22), 0 8px 18px rgba(2, 6, 23, 0.62) !important;
}

.header .top-quick-nav .auth-btn-login .auth-text {
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    color: #fef9c3 !important;
}

.header .top-quick-nav .auth-btn-login .auth-icon {
    filter: brightness(1.34) saturate(1.2) !important;
}

.header .top-quick-nav .auth-btn-login:hover {
    border-color: rgba(250, 204, 21, 0.72) !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.52) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    transform: translateY(-1px) !important;
}

/* Final header typography: same behavior on mobile + desktop, smooth scale, always centered */
.header .header-content {
    top: 46px !important;
    padding: 0 !important;
    text-align: center !important;
}

.header .header-kicker {
    font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.34rem) !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

.header .header-title-animated {
    font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.34rem) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
}

.header .header-title-animated .header-word {
    display: inline-block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 900 !important;
}

html[dir="rtl"] .header .header-content {
    top: 46px !important;
    padding: 0 !important;
}

/* Final RTL switch stabilization: keep desktop/mobile layout structure identical when changing EN <-> HE */
html[dir="rtl"] .header {
    direction: ltr !important;
}

html[dir="rtl"] .header .header-graphic {
    direction: ltr !important;
    left: 0 !important;
    right: 0 !important;
}

html[dir="rtl"] .header .header-logo-wrap {
    right: -34px !important;
    left: auto !important;
}

html[dir="rtl"] .header .header-content,
html[dir="rtl"] .header .header-kicker,
html[dir="rtl"] .header .header-title-animated {
    direction: rtl !important;
    text-align: center !important;
}

html[dir="rtl"] .top-quick-nav,
html[dir="rtl"] .mobile-bottom-nav,
html[dir="rtl"] .root-explorer-grid {
    direction: ltr !important;
}

html[dir="rtl"] .root-explorer-grid .root-explorer-card {
    direction: rtl !important;
}

/* Hebrew tablet+desktop: keep the 4 quick action buttons locked to start */
html[dir="rtl"] .header .top-quick-nav {
    justify-content: flex-start !important;
}

/* Hebrew: keep feature tabs RTL (country/continent hubs + calendar sync modal) */
html[dir="rtl"] #leaguesGrid .tabs-nav,
html[dir="rtl"] #calendarSyncTabNav {
    direction: rtl !important;
}

/* Hebrew: all tab rails should flow RTL by default */
html[dir="rtl"] .tabs-nav {
    direction: rtl !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .tabs-nav .tab-btn {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .tabs-nav .tab-btn .tab-icon {
    margin-left: 0 !important;
    margin-right: 6px !important;
}

html[dir="rtl"] #leaguesGrid .tabs-nav .tab-btn,
html[dir="rtl"] #calendarSyncTabNav .calendar-sync-tab-btn {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #leaguesGrid .tabs-nav.sub-tabs {
    direction: rtl !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] #leaguesGrid .tabs-nav.sub-tabs .tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-direction: row-reverse;
    text-align: center !important;
}

html[dir="rtl"] #leaguesGrid .tabs-nav.sub-tabs .tab-text {
    direction: rtl;
    unicode-bidi: plaintext;
}

html[dir="rtl"] #subPrefModal .sub-pref-modal-content,
html[dir="rtl"] #subPrefModal .sub-pref-modal-body,
html[dir="rtl"] #subPrefModal .sub-pref-modal-body p,
html[dir="rtl"] #subPrefModal .sub-pref-modal-body label {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #subPrefModal .tabs-nav {
    direction: rtl !important;
}

html[dir="rtl"] #subPrefModal .tabs-nav .tab-btn {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #subPrefModal .pref-option {
    direction: rtl !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

html[dir="rtl"] #subPrefModal .pref-option > div {
    text-align: right !important;
}

/* Robust RTL for subscription modal when dir is set on the modal itself */
#subPrefModal[dir="rtl"] .sub-pref-modal-body,
#subPrefModal[dir="rtl"] .sub-pref-modal-body p,
#subPrefModal[dir="rtl"] .sub-pref-modal-body label {
    direction: rtl !important;
    text-align: right !important;
}

#subPrefModal[dir="rtl"] .pref-option {
    direction: rtl !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
}

#subPrefModal[dir="rtl"] .pref-option > input[type="checkbox"] {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

#subPrefModal[dir="rtl"] .pref-option > div {
    text-align: right !important;
}

html[dir="rtl"] #helpModal .help-header,
html[dir="rtl"] .calendar-sync-header,
html[dir="rtl"] .sync-modal-header,
html[dir="rtl"] .manage-modal-header,
html[dir="rtl"] .favorites-dialog-header {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .calendar-sync-header-title-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

html[dir="rtl"] .calendar-sync-global-tip--footer {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .welcome-screen,
html[dir="rtl"] .welcome-screen .welcome-feature .feature-text,
html[dir="rtl"] #entryPromoModal .sub-promo-header,
html[dir="rtl"] #entryPromoModal .promo-subtitle,
html[dir="rtl"] #entryPromoModal .sub-promo-content,
html[dir="rtl"] #entryPromoModal .sub-promo-content p {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .teams-table .col-team .team-name-row,
html[dir="rtl"] .teams-table .col-team > div {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

html[dir="rtl"] .teams-table .col-team .team-name-text,
html[dir="rtl"] .teams-table .col-team span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
}

html[dir="rtl"] .calendar-sync-header-titles,
html[dir="rtl"] #helpModal .help-header h2,
html[dir="rtl"] #helpModal .help-header p,
html[dir="rtl"] .calendar-sync-header h2,
html[dir="rtl"] .calendar-sync-header p,
html[dir="rtl"] .sync-modal-header h2,
html[dir="rtl"] .sync-modal-header p,
html[dir="rtl"] .manage-modal-header h2,
html[dir="rtl"] .manage-modal-header p,
html[dir="rtl"] .favorites-dialog-header h2 {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .manage-events-header,
html[dir="rtl"] .manage-loading,
html[dir="rtl"] .manage-empty-state,
html[dir="rtl"] .match-card,
html[dir="rtl"] .match-card .match-team-name,
html[dir="rtl"] .match-card .match-date,
html[dir="rtl"] .match-card .match-time,
html[dir="rtl"] .match-card .match-league {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .manage-events-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .manage-modal-close {
    right: 10px;
    left: auto;
    inset-inline-start: auto;
    inset-inline-end: 10px;
}

html[dir="rtl"] .manage-modal-content {
    direction: rtl;
}

html[dir="rtl"] .manage-modal-header {
    text-align: center !important;
    padding-inline: 56px;
}

html[dir="rtl"] .manage-tabs-row {
    direction: rtl;
}

/* Android mobile header stabilization (Pixel-class screens):
   Keep language switcher, title stack, quick nav, and auth button in separate layers. */
@media (max-width: 768px) {
    #pwaInstallBtn {
        display: none !important;
    }

    .header {
        height: 292px !important;
        min-height: 292px !important;
        margin-bottom: 10px !important;
    }

    .header .header-lang-switcher {
        top: 10px !important;
        left: 10px !important;
        z-index: 80 !important;
    }

    .header .header-content {
        top: 78px !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(calc(100% - 24px), 620px) !important;
        max-width: min(calc(100% - 24px), 620px) !important;
        padding: 0 10px !important;
        z-index: 8 !important;
    }

    .header .header-kicker {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        margin: 0 0 6px 0 !important;
    }

    .header .header-title-animated {
        font-size: clamp(0.95rem, 3.9vw, 1.08rem) !important;
        gap: 0.24em !important;
        line-height: 1.15 !important;
    }

    .header .top-quick-nav {
        bottom: 10px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 20px) !important;
        padding: 8px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        z-index: 70 !important;
    }

    .header .top-quick-nav-btn {
        flex: 0 0 auto !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
    }

    .header .top-quick-nav .auth-controls {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-left: auto !important;
        z-index: 1 !important;
    }

    .header-logo-wrap {
        top: 2px !important;
        right: -26px !important;
        width: min(54%, 240px) !important;
    }
}

/* =====================================================================
   FINAL 4-ROW HEADER GRID (single-column)
   Row 1: language + date
   Row 2: title + subtitle
   Row 3: upcoming/guest note
   Row 4: quick-nav buttons
   ===================================================================== */
.header {
    position: relative !important;
}

.header .header-lang-switcher {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    z-index: 30 !important;
}

.header-top-date {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 30 !important;
}

.header .header-content {
    position: absolute !important;
    top: 56px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 18px), 760px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    z-index: 24 !important;
}

.header-subtitle-line {
    margin-top: 6px !important;
    max-width: min(92vw, 660px) !important;
}

#headerUpcomingBtn.header-upcoming-btn {
    position: absolute !important;
    top: 166px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 18px) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 26 !important;
}

.header .top-quick-nav {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 18px) !important;
    z-index: 25 !important;
}

@media (max-width: 768px) {
    .header {
        height: 292px !important;
        min-height: 292px !important;
    }

    .header .header-content {
        top: 54px !important;
        width: min(calc(100% - 14px), 740px) !important;
    }

    #headerUpcomingBtn.header-upcoming-btn {
        top: 170px !important;
        width: calc(100% - 14px) !important;
        min-height: 42px !important;
    }

    .header .top-quick-nav {
        width: calc(100% - 14px) !important;
    }
}

@media (min-width: 769px) {
    .header {
        height: 304px !important;
        min-height: 304px !important;
    }

    .header .header-content {
        top: 58px !important;
        width: min(calc(100% - 32px), 820px) !important;
        max-width: min(calc(100% - 32px), 820px) !important;
    }

    .header-subtitle-line {
        font-size: 0.72rem !important;
        line-height: 1.18 !important;
        max-width: min(calc(100% - 40px), 700px) !important;
    }

    #headerUpcomingBtn.header-upcoming-btn {
        top: 176px !important;
        width: calc(100% - 32px) !important;
        min-height: 46px !important;
    }

    .header .top-quick-nav {
        bottom: 12px !important;
        width: calc(100% - 32px) !important;
        min-height: 66px !important;
        padding: 10px 164px 10px 14px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    .header .top-quick-nav .auth-controls {
        position: absolute !important;
        right: 14px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    html[dir="rtl"] .header .top-quick-nav {
        padding: 10px 14px 10px 164px !important;
    }

    html[dir="rtl"] .header .top-quick-nav .auth-controls {
        right: 14px !important;
        left: auto !important;
    }
}

html[dir="rtl"] .manage-tab-btn {
    direction: rtl;
    flex-direction: row-reverse;
    text-align: center;
}

html[dir="rtl"] .match-card-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .match-league {
    text-align: center;
}

/* Robust RTL when direction is set on manage modal root */
#manageModal[dir="rtl"] .manage-modal-content,
#manageModal[dir="rtl"] .manage-events-section,
#manageModal[dir="rtl"] .manage-events-header,
#manageModal[dir="rtl"] .manage-loading,
#manageModal[dir="rtl"] .manage-empty-state,
#manageModal[dir="rtl"] .match-card,
#manageModal[dir="rtl"] .match-card .match-team-name,
#manageModal[dir="rtl"] .match-card .match-date,
#manageModal[dir="rtl"] .match-card .match-time,
#manageModal[dir="rtl"] .match-card .match-league {
    direction: rtl !important;
    text-align: right !important;
}

#manageModal[dir="rtl"] .manage-modal-close {
    right: 10px;
    left: auto;
    inset-inline-start: auto;
    inset-inline-end: 10px;
}

#manageModal[dir="rtl"] .manage-modal-header {
    text-align: center !important;
    padding-inline: 56px;
}

#manageModal[dir="rtl"] .manage-events-header,
#manageModal[dir="rtl"] .match-card-header {
    flex-direction: row-reverse;
}

#manageModal .manage-score-order {
    display: inline-block;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

#manageModal[dir="rtl"] .manage-score-order {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
}

#manageModal[dir="rtl"] .manage-tabs-row {
    direction: rtl;
}

#manageModal[dir="rtl"] .manage-tab-btn {
    direction: rtl;
    flex-direction: row-reverse;
    text-align: center;
}
#manageModal[dir="rtl"] .manage-empty-state__actions {
    direction: rtl;
}

/* ===================================================
   FINAL HEADER LOCK: title/subtitle aligned to upcoming bar frame
   =================================================== */
.header .header-content {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 24px), 760px) !important;
    max-width: min(calc(100% - 24px), 760px) !important;
    top: 54px !important;
    bottom: 126px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 8px !important;
    text-align: center !important;
    z-index: 8 !important;
    pointer-events: none !important;
}

.header .header-content .header-kicker,
.header .header-content .header-title-animated,
.header .header-content .sub-header {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.header .header-content .header-kicker {
    line-height: 1.15 !important;
}

.header .header-content .header-title-animated {
    line-height: 1.15 !important;
}

@media (max-width: 768px) {
    .header .header-content {
        width: min(calc(100% - 20px), 760px) !important;
        max-width: min(calc(100% - 20px), 760px) !important;
        top: 56px !important;
        bottom: 126px !important;
        row-gap: 6px !important;
    }

    .header .header-content .header-kicker {
        font-size: clamp(0.92rem, 3.6vw, 1.02rem) !important;
    }

    .header .header-content .header-title-animated {
        font-size: clamp(0.92rem, 3.7vw, 1.06rem) !important;
    }
}

@media (max-width: 768px) {
    .top-quick-nav-btn--labeled .top-quick-nav-label {
        display: inline !important;
    }

    .manage-empty-state__actions {
        flex-direction: column;
    }

    .manage-empty-state__chip {
        width: 100%;
        justify-self: stretch;
    }
}

html[dir="rtl"] .match-card-footer {
    justify-content: flex-start;
}

/* ===================================================
   TEAM MATCH SHOWCASE — match-card structure (mirrors #manageModal dialog styles)
   =================================================== */

.team-match-showcase-container .match-card,
.obsidian-match-showcase .match-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin-bottom: 12px;
}

.team-match-showcase-container .match-card:hover,
.obsidian-match-showcase .match-card:hover {
    border-color: rgba(147, 197, 253, 0.34);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-match-showcase-container .match-card.showcase-match-card--selected,
.obsidian-match-showcase .match-card.showcase-match-card--selected {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), 0 12px 26px rgba(2, 6, 23, 0.28);
}

/* Header */
.showcase-match-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    padding: 12px 16px 10px;
    background: linear-gradient(180deg, rgba(13, 24, 45, 0.96) 0%, rgba(9, 18, 35, 0.94) 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.34);
}

.showcase-match-header[dir="ltr"] {
    flex-direction: row;
}

.showcase-match-header[dir="rtl"] {
    direction: rtl;
    flex-direction: row-reverse;
}

.showcase-match-pick {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.showcase-pick-input {
    width: 22px;
    height: 22px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.showcase-match-card {
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 18, 34, 0.98) 100%);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22);
}

.showcase-match-card:hover {
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.26);
}

.team-match-showcase-container .match-card.showcase-match-card,
.obsidian-match-showcase .match-card.showcase-match-card {
    overflow: clip;
}

#teamMatchesDialog .obsidian-match-showcase .match-card.showcase-match-card:has(.showcase-details:not(.showcase-details--hidden) .manage-h2h-details[open]),
#teamMatchesDialog .obsidian-match-showcase .match-card.showcase-match-card.manage-match-card--h2h-open {
    overflow: visible;
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

#teamMatchesDialog .obsidian-match-showcase .showcase-details:not(.showcase-details--hidden) .manage-h2h-details[open] {
    position: relative;
    z-index: 3;
}

.showcase-match-header .match-datetime {
    gap: 5px;
}

.showcase-match-header .match-date,
.showcase-match-header .match-time {
    min-height: 18px;
    line-height: 1.35;
}

.showcase-match-header .match-date {
    font-size: 0.82rem;
    font-weight: 700;
}

.showcase-match-header .match-time {
    font-size: 0.78rem;
    color: #cbd5e1;
}

.showcase-match-header[dir="ltr"] .match-datetime {
    width: auto;
    min-width: 0;
    align-items: flex-end;
    text-align: right;
}

.showcase-match-header[dir="rtl"] .match-datetime {
    width: auto;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
}

.showcase-match-header .match-date,
.showcase-match-header .match-time {
    min-height: 18px;
    line-height: 1.35;
}

.showcase-match-header .match-date--placeholder,
.showcase-match-header .match-time--placeholder {
    visibility: hidden;
}

.showcase-competition-strip {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.34);
}

.showcase-competition-title {
    color: #dbeafe;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.showcase-competition-strip[dir="rtl"] .showcase-competition-title {
    text-align: right;
}

/* ===================================================
   FINAL TITLE LOOK (user request): top-Y alignment + larger blue glow
   =================================================== */
.header .header-content {
    top: 6px !important;
    bottom: 126px !important;
    align-content: start !important;
    justify-items: center !important;
    row-gap: 2px !important;
    padding-top: 0 !important;
}

.header .header-content .header-title-animated {
    order: 1 !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    color: #93c5fd !important;
    text-shadow: 0 2px 0 rgba(2, 6, 23, 0.95), 0 0 10px rgba(59, 130, 246, 0.88), 0 0 22px rgba(59, 130, 246, 0.65) !important;
    justify-content: center !important;
}

.header .header-content .header-kicker {
    order: 2 !important;
    margin: 0 !important;
    display: none !important;
    color: #dbeafe !important;
    text-shadow: 0 1px 0 rgba(2, 6, 23, 0.92), 0 0 10px rgba(30, 64, 175, 0.5) !important;
}

@media (max-width: 768px) {
    .header .header-content {
        top: 6px !important;
        bottom: 126px !important;
        row-gap: 8px !important;
    }

    .header .header-content .header-title-animated {
        font-size: clamp(1.18rem, 5.8vw, 1.62rem) !important;
        color: #ffffff !important;
        text-shadow: 0 2px 0 rgba(2, 6, 23, 0.98), 0 0 12px rgba(147, 197, 253, 0.56), 0 0 20px rgba(59, 130, 246, 0.34) !important;
    }

    .header .header-content .header-subtitle-line {
        position: relative !important;
        margin-top: 2px !important;
        padding-top: 5px !important;
    }

    .header .header-content .header-subtitle-line::before {
        content: '' !important;
        display: block !important;
        width: min(180px, 44vw) !important;
        height: 2px !important;
        margin: 0 auto 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 20%, rgba(147, 197, 253, 0.85) 50%, rgba(255, 255, 255, 0.95) 80%, transparent 100%) !important;
        opacity: 0.78 !important;
    }

    .header .header-content .header-kicker {
        font-size: clamp(0.86rem, 3.4vw, 0.96rem) !important;
    }
}

/* ---------- My Favorites / Team-matches showcase Obsidian dark ---------- */
.showcase-competition-strip .manage-competition-meta {
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.showcase-competition-strip .manage-competition-chip {
    border-color: rgba(125, 211, 252, 0.38);
    background: rgba(30, 64, 175, 0.28);
    color: #bfdbfe;
    padding: 4px 11px;
    font-size: 0.74rem;
    border-radius: 999px;
}

.showcase-competition-strip .manage-competition-chip--leg {
    border-color: rgba(196, 181, 253, 0.5);
    background: rgba(76, 29, 149, 0.34);
    color: #ddd6fe;
}

.showcase-competition-strip .manage-leg-details__inline-chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.32);
    background: rgba(15, 28, 56, 0.72);
    color: #dbeafe;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

.showcase-competition-strip .manage-leg-details__inline-chip--stacked {
    flex-wrap: wrap;
    row-gap: 4px;
}

.showcase-competition-strip .manage-leg-details__inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    min-width: 20px;
    flex-shrink: 0;
    padding-top: 1px;
}

.showcase-competition-strip .manage-leg-details__inline-label {
    flex: 1;
    color: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

.showcase-competition-strip .manage-leg-details__inline-subline {
    display: block;
    width: 100%;
    padding-inline-start: 28px;
    color: #94a3b8;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 3px;
}

.showcase-competition-strip[dir="rtl"] .manage-leg-details__inline-subline {
    padding-inline-start: 0;
    padding-inline-end: 28px;
    text-align: right;
}

.showcase-competition-strip[dir="rtl"] .manage-leg-details__inline-chip,
.showcase-competition-strip[dir="rtl"] .manage-leg-details__inline-chip--stacked {
    direction: rtl;
    flex-direction: row;
}

/* FINAL DATE POSITION LOCK: always top-right, never near language switcher */
.header .header-top-date,
html[dir="rtl"] .header .header-top-date,
html[dir="ltr"] .header .header-top-date {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    left: auto !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
    z-index: 90 !important;
}

@media (max-width: 768px) {
    .header .header-top-date,
    html[dir="rtl"] .header .header-top-date,
    html[dir="ltr"] .header .header-top-date {
        top: 8px !important;
        right: 10px !important;
        left: auto !important;
        inset-inline-end: 10px !important;
        inset-inline-start: auto !important;
    }
}

.team-match-showcase-container .match-date,
.obsidian-match-showcase .match-date {
    color: #f8fafc !important;
    background: transparent !important;
}

.team-match-showcase-container .match-time,
.obsidian-match-showcase .match-time {
    color: #cbd5e1 !important;
    background: transparent !important;
}

/* Card body */
.team-match-showcase-container .match-card-body,
.obsidian-match-showcase .match-card-body {
    background: linear-gradient(180deg, rgba(9, 20, 40, 0.95) 0%, rgba(5, 14, 32, 0.96) 100%);
    border-top: 1px solid rgba(51, 65, 85, 0.45);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    padding: 20px 18px;
}

/* Fixture row */
.showcase-fixture-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.showcase-fixture-row .match-team-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 8px;
    min-height: 124px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(8, 15, 30, 0.78) 100%);
    border: 1px solid rgba(71, 85, 105, 0.2);
}

.showcase-fixture-row .match-team-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12));
}

.showcase-fixture-row .match-team-logo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.2);
    flex-shrink: 0;
}

.showcase-fixture-row .match-team-name {
    color: #f8fafc;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
    max-width: 100%;
}

/* Team role visuals */
.showcase-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    max-width: min(100%, 148px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-role-badge--home {
    color: #fdba74;
    background: linear-gradient(180deg, rgba(63, 38, 15, 0.9) 0%, rgba(30, 20, 10, 0.94) 100%);
    border: 1px solid rgba(251, 146, 60, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(251, 146, 60, 0.08);
}

.showcase-role-spacer {
    display: inline-block;
    height: 26px;
}

.showcase-role-icon {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.85;
}

.showcase-role-icon-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 148px);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #93c5fd;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, rgba(18, 34, 66, 0.9) 0%, rgba(10, 18, 38, 0.94) 100%);
    border: 1px solid rgba(96, 165, 250, 0.24);
}

/* VS badge — orange */
.showcase-vs {
    color: #fb923c !important;
    background: rgba(251, 146, 60, 0.1) !important;
    border: 1px solid rgba(251, 146, 60, 0.35) !important;
    border-radius: 8px;
    align-self: center;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.showcase-fixture-row .match-center-col {
    flex-shrink: 0;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* RTL: order is controlled in JS to keep home/away deterministic */
.showcase-fixture-row[dir="rtl"],
.team-match-showcase-container[dir="rtl"] .showcase-fixture-row,
.obsidian-match-showcase[dir="rtl"] .showcase-fixture-row {
    flex-direction: row;
}

/* Collapsible details panel */
.showcase-details {
    padding: 16px 18px;
    background: rgba(2, 6, 23, 0.6);
    border-top: 1px solid rgba(51, 65, 85, 0.35);
}

.showcase-details--hidden {
    display: none;
}

/* Midnight Obsidian treatment for World Cup helper panels */
.obsidian-info-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px 0;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 28px rgba(2, 6, 23, 0.34);
}

.obsidian-info-panel__icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    font-size: 1.6rem;
    color: #f8fafc;
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.obsidian-info-panel__body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.obsidian-info-panel__title {
    margin: 0;
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.obsidian-info-panel__copy {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.55;
}

.obsidian-info-panel__copy strong {
    color: #f8fafc;
    font-weight: 800;
}

.world-cup-structure-panel--obsidian {
    margin: 0 0 14px 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(2, 6, 23, 0.38);
}

.world-cup-structure-panel--obsidian summary {
    list-style: none;
}

.world-cup-structure-panel--obsidian summary::-webkit-details-marker {
    display: none;
}

.world-cup-structure-panel__summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
}

.world-cup-structure-panel__title {
    color: #dbeafe;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.world-cup-structure-panel__summary-text {
    color: #93c5fd;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: end;
}

.world-cup-structure-panel__body {
    display: grid;
    gap: 10px;
    padding: 0 18px 16px;
}

.world-cup-structure-panel__line {
    margin: 0;
    color: #dbe4f3;
    font-size: 0.9rem;
    line-height: 1.7;
}

.world-cup-structure-panel__line--accent {
    padding: 10px 12px;
    border-radius: 14px;
    color: #99f6e4;
    font-weight: 800;
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(45, 212, 191, 0.2);
}

.world-cup-structure-panel__line--muted {
    color: #94a3b8;
}

.world-cup-structure-panel__line--warning {
    color: #fbbf24;
    font-weight: 700;
}

html[dir="rtl"] .world-cup-structure-panel__summary,
html[dir="rtl"] .obsidian-info-panel {
    direction: rtl;
}

html[dir="rtl"] .world-cup-structure-panel__summary-text {
    text-align: start;
}

@media (max-width: 768px) {
    .obsidian-info-panel {
        padding: 13px 14px;
        border-radius: 20px;
    }

    .obsidian-info-panel__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
        font-size: 1.4rem;
    }

    .obsidian-info-panel__title {
        font-size: 0.95rem;
    }

    .obsidian-info-panel__copy,
    .world-cup-structure-panel__line {
        font-size: 0.84rem;
    }

    .world-cup-structure-panel__summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .world-cup-structure-panel__summary-text {
        text-align: start;
    }
}

.showcase-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.showcase-detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(71, 85, 105, 0.18);
}

.showcase-detail-item--wide {
    grid-column: 1 / -1;
}

.showcase-detail-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    line-height: 1.3;
}

.showcase-detail-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.45;
}

.showcase-detail-value--domestic {
    color: #86efac;
}

.showcase-detail-value--international {
    color: #93c5fd;
}

.showcase-detail-value--neutral {
    color: #cbd5e1;
}

/* Card footer */
.showcase-match-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    background: rgba(2, 6, 23, 0.88);
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    gap: 12px;
}

.showcase-match-footer[dir="rtl"] {
    flex-direction: row-reverse;
}

.showcase-match-footer__start {
    display: flex;
    align-items: center;
}

.showcase-match-footer__actions {
    gap: 12px;
    flex-wrap: wrap;
}

.showcase-footer-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.94) 100%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    padding: 10px 16px;
    min-height: 46px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.showcase-info-toggle {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.94) 100%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
    border-radius: 12px;
    padding: 10px 16px;
    min-height: 46px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.showcase-info-toggle:hover {
    background: linear-gradient(180deg, rgba(45, 61, 87, 0.92) 0%, rgba(18, 28, 46, 0.96) 100%);
    border-color: rgba(125, 211, 252, 0.32);
    color: #e2e8f0;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.22);
}

.showcase-footer-info-btn[aria-expanded="true"] {
    border-color: rgba(125, 211, 252, 0.36);
    color: #dbeafe;
}

/* Team matches dedicated dialog (single instance to avoid parallel dialogs) */
#teamMatchesDialog.team-matches-dialog {
    z-index: 3200;
    padding: max(10px, env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
    align-items: flex-start;
}

#teamMatchesDialog .team-matches-dialog__content {
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100dvh - 22px - env(safe-area-inset-bottom));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 60px 14px 14px;
    border-radius: 22px;
    position: relative;
}

#teamMatchesDialog .team-matches-dialog__close {
    top: 8px !important;
    left: auto !important;
    right: 10px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 10px !important;
    z-index: 40 !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.34);
}

#teamMatchesDialog[dir="rtl"] .team-matches-dialog__close {
    left: 10px !important;
    right: auto !important;
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
}

#teamMatchesDialog .team-matches-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0;
    padding-right: 4px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

#teamMatchesDialog .team-match-showcase {
    margin: 0;
    border-radius: 16px;
}

html[dir="rtl"] #teamMatchesDialog .team-matches-dialog__content {
    direction: rtl;
}

@media (max-width: 768px) {
    #teamMatchesDialog.team-matches-dialog {
        padding: max(8px, env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    }

    #teamMatchesDialog .team-matches-dialog__content {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));
        border-radius: 18px;
        padding: 58px 10px 10px;
    }

    #teamMatchesDialog .team-matches-dialog__close {
        top: 8px !important;
        left: auto !important;
        right: 8px !important;
        inset-inline-start: auto !important;
        inset-inline-end: 8px !important;
        width: 46px !important;
        height: 46px !important;
    }

    #teamMatchesDialog[dir="rtl"] .team-matches-dialog__close {
        left: 8px !important;
        right: auto !important;
        inset-inline-start: 8px !important;
        inset-inline-end: auto !important;
    }

    #teamMatchesDialog .team-matches-dialog__body {
        padding-top: 0;
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }

    .showcase-match-header {
        flex-direction: column !important;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .showcase-match-header[dir="rtl"] {
        flex-direction: column !important;
    }

    .showcase-match-league {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .showcase-match-header[dir="ltr"] .match-datetime,
    .showcase-match-header[dir="rtl"] .match-datetime {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    html[dir="rtl"] .showcase-match-header[dir="rtl"] .match-datetime {
        align-items: flex-end;
        text-align: right;
    }

    .team-match-showcase-container .match-card-body,
    .obsidian-match-showcase .match-card-body {
        padding: 18px 14px;
    }

    .showcase-fixture-row {
        gap: 10px;
        align-items: stretch;
    }

    .showcase-fixture-row .match-team-block {
        min-height: 132px;
        padding: 12px 8px;
    }

    .showcase-fixture-row .match-team-name {
        font-size: 0.94rem;
        line-height: 1.45;
    }

    .showcase-fixture-row .match-center-col {
        min-width: 52px;
    }

    .showcase-vs {
        padding: 8px 10px;
    }

    .showcase-details {
        padding: 14px;
    }

    .showcase-detail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .showcase-detail-item {
        padding: 10px 11px;
    }

    .showcase-footer-pick {
        padding: 8px 10px;
        font-size: 0.76rem;
        min-height: 44px;
    }

    .showcase-pick-input {
        width: 24px;
        height: 24px;
    }

    .team-match-showcase__selection-nav {
        padding: 8px;
    }

    .team-match-showcase__selection-actions {
        gap: 5px;
    }

    .team-match-showcase__nav-btn {
        min-height: 52px;
        border-radius: 10px;
        padding: 6px 4px;
    }

    .team-match-showcase__nav-label {
        font-size: 0.62rem;
    }
}

@media (max-width: 480px) {
    #teamMatchesDialog.team-matches-dialog {
        padding: max(6px, env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
    }

    #teamMatchesDialog .team-matches-dialog__content {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 12px - env(safe-area-inset-bottom));
        padding: 56px 8px 8px;
        border-radius: 16px;
    }

    .showcase-match-card {
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .showcase-match-header {
        gap: 8px;
        padding: 12px;
    }

    .showcase-match-league {
        font-size: 0.74rem;
        padding: 7px 10px;
    }

    .showcase-match-header .match-datetime {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .showcase-match-header .match-date,
    .showcase-match-header .match-time {
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .team-match-showcase-container .match-card-body,
    .obsidian-match-showcase .match-card-body {
        padding: 14px 12px;
    }

    .showcase-fixture-row,
    .showcase-fixture-row[dir="rtl"],
    .team-match-showcase-container[dir="rtl"] .showcase-fixture-row,
    .obsidian-match-showcase[dir="rtl"] .showcase-fixture-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
    }

    .showcase-fixture-row .match-team-block {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 0;
        padding: 10px;
        text-align: left;
    }

    .showcase-fixture-row[dir="rtl"] .match-team-block,
    .team-match-showcase-container[dir="rtl"] .showcase-fixture-row .match-team-block,
    .obsidian-match-showcase[dir="rtl"] .showcase-fixture-row .match-team-block {
        flex-direction: row-reverse;
        text-align: right;
    }

    .showcase-fixture-row .match-team-name {
        flex: 1;
        min-width: 0;
        text-align: inherit;
        font-size: 0.95rem;
        line-height: 1.35;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .showcase-fixture-row .match-team-logo,
    .showcase-fixture-row .match-team-logo-placeholder {
        width: 40px;
        height: 40px;
    }

    .showcase-role-badge,
    .showcase-role-icon-label {
        max-width: 86px;
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 0.62rem;
    }

    .showcase-fixture-row .match-center-col {
        min-width: 0;
        order: 2;
    }

    .showcase-fixture-row .showcase-team-block--home {
        order: 1;
    }

    .showcase-fixture-row .showcase-team-block--away {
        order: 3;
    }

    .showcase-vs {
        padding: 5px 12px;
        font-size: 0.72rem;
    }

    .showcase-details {
        padding: 12px;
    }

    .showcase-detail-label {
        font-size: 0.68rem;
    }

    .showcase-detail-value {
        font-size: 0.84rem;
    }

    .showcase-match-footer {
        padding: 10px 12px;
    }

    .showcase-match-footer__actions {
        width: 100%;
        gap: 8px;
    }

    .showcase-info-toggle,
    .showcase-footer-pick {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 10px;
        min-height: 42px;
    }
}

/* Tablet consistency: overlays open from same top point and use more height */
@media (min-width: 768px) and (max-width: 1366px) {
    .manage-modal-overlay,
    #manageModal.manage-modal-overlay {
        align-items: flex-start !important;
        padding-top: max(16px, env(safe-area-inset-top)) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }

    #manageModal .manage-modal-content {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    #manageModal .manage-modal-content,
    #teamMatchesDialog .team-matches-dialog__content,
    .calendar-sync-modal-content,
    #helpModal .help-modal-layout,
    #appGuideModal .modal-content {
        max-height: calc(100dvh - 36px - env(safe-area-inset-bottom)) !important;
    }

    /* iPad: keep dialogs narrow like mobile while giving more vertical room */
    #teamMatchesDialog .team-matches-dialog__content,
    .calendar-sync-modal-content,
    #helpModal .help-modal-layout,
    #appGuideModal .modal-content {
        width: min(560px, calc(100vw - 24px)) !important;
        max-width: 560px !important;
    }
}

/* Upcoming manage dialog: protect card rendering on very small screens.
   This scopes fixes to #manageModal only so team-matches showcase styling is unaffected. */
@media (max-width: 641px) {
    #manageModal .manage-events-list {
        max-height: calc(100dvh - 300px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    #manageModal .match-card {
        position: relative;
        isolation: isolate;
        min-height: 192px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.94) 100%) !important;
        border: 1px solid rgba(148, 163, 184, 0.3) !important;
        border-radius: 12px;
        overflow: hidden;
    }

    #manageModal .match-card::before,
    #manageModal .match-card::after {
        content: none !important;
    }

    #manageModal .match-card > * {
        position: relative;
        z-index: 1;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #manageModal .match-card-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    #manageModal .match-card-body,
    #manageModal .match-card-footer {
        display: block !important;
    }

    #manageModal .match-card-body {
        padding: 16px 12px 18px !important;
        min-height: 108px !important;
    }

    #manageModal .manage-competition-strip {
        margin-bottom: 10px !important;
        padding-bottom: 9px !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.34) !important;
    }

    #manageModal .manage-competition-title {
        color: #dbeafe !important;
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    #manageModal .manage-competition-chip {
        border-color: rgba(125, 211, 252, 0.35) !important;
        background: rgba(30, 64, 175, 0.28) !important;
        color: #bfdbfe !important;
    }

    #manageModal .manage-competition-chip--leg {
        border-color: rgba(196, 181, 253, 0.45) !important;
        background: rgba(76, 29, 149, 0.34) !important;
        color: #ddd6fe !important;
    }

    #manageModal .manage-leg-details summary {
        color: #93c5fd !important;
    }

    #manageModal .manage-leg-details__body {
        border-color: rgba(125, 211, 252, 0.4) !important;
        background: rgba(30, 41, 59, 0.58) !important;
        color: #dbeafe !important;
    }

    #manageModal .manage-leg-details__label {
        color: #93c5fd !important;
    }

    #manageModal .manage-leg-details__note {
        color: #cbd5e1 !important;
    }

    /* RTL: Finished-cup knockout context */
    #manageModal[dir="rtl"] .manage-competition-chip--final,
    #manageModal[dir="rtl"] .manage-competition-chip--qualified {
        display: inline-flex !important;
        direction: rtl !important;
    }

    /* Finished-cup knockout context chips */
    #manageModal .manage-competition-chip--final {
        border-color: rgba(239, 68, 68, 0.6) !important;
        background: rgba(127, 29, 29, 0.45) !important;
        color: #fca5a5 !important;
        font-weight: 700 !important;
    }

    #manageModal .manage-competition-chip--qualified {
        border-color: rgba(34, 197, 94, 0.6) !important;
        background: rgba(20, 83, 40, 0.45) !important;
        color: #86efac !important;
        font-weight: 600 !important;
    }

    /* Inline first-leg chip for upcoming second-leg */
    #manageModal .manage-leg-details__inline-chip {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        border-radius: 10px !important;
        border: 1px solid rgba(125, 211, 252, 0.32) !important;
        background: rgba(15, 28, 56, 0.72) !important;
        color: #dbeafe !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
    }

    #manageModal .manage-leg-details__inline-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        min-width: 20px !important;
    }

    #manageModal .manage-leg-details__inline-label {
        flex: 1 !important;
        color: #f1f5f9 !important;
        font-size: 0.78rem !important;
    }

    /* Stacked chip wrap + sublines – Obsidian dark */
    #manageModal .manage-leg-details__inline-chip--stacked {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
        padding: 10px 13px !important;
        margin-top: 10px !important;
        margin-bottom: 2px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(125, 211, 252, 0.32) !important;
        background: rgba(15, 28, 56, 0.72) !important;
    }

    #manageModal .manage-leg-details__inline-subline {
        display: block !important;
        width: 100% !important;
        padding-inline-start: 28px !important;
        color: #94a3b8 !important;
        font-size: 0.73rem !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        margin-top: 3px !important;
    }

    #manageModal[dir="rtl"] .manage-leg-details__inline-subline {
        padding-inline-start: 0 !important;
        padding-inline-end: 28px !important;
        text-align: right !important;
    }

    #manageModal[dir="rtl"] .manage-leg-details__inline-chip--stacked {
        direction: rtl !important;
    }

    #manageModal[dir="rtl"] .manage-leg-details__inline-chip {
        direction: rtl !important;
        flex-direction: row !important;
    }

    /* Competition meta chips – spacing */
    #manageModal .manage-competition-meta {
        gap: 10px !important;
        margin-top: 10px !important;
        flex-wrap: wrap !important;
    }

    #manageModal .manage-competition-chip {
        padding: 4px 11px !important;
        font-size: 0.74rem !important;
        border-radius: 999px !important;
    }

    #manageModal[dir="rtl"] .manage-competition-title {
        text-align: right !important;
    }

    #manageModal .match-fixture-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 8px !important;
        direction: ltr !important;
    }

    #manageModal[dir="rtl"] .match-fixture-row {
        direction: rtl !important;
    }

    #manageModal .match-team-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        padding-bottom: 0 !important;
        direction: ltr !important;
    }

    #manageModal[dir="rtl"] .match-team-block {
        direction: rtl !important;
    }

    #manageModal .match-team-role {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px 8px !important;
        min-width: 74px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        font-weight: 700 !important;
        color: #cbd5e1 !important;
        background: rgba(30, 41, 59, 0.75) !important;
        border: 1px solid rgba(148, 163, 184, 0.3) !important;
    }

    #manageModal .match-team-logo,
    #manageModal .match-team-logo-placeholder {
        display: block !important;
        width: 38px !important;
        height: 38px !important;
    }

    #manageModal .match-center-col {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 52px !important;
    }

    #manageModal .match-vs,
    #manageModal .manage-status-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #manageModal .match-team-name,
    #manageModal .match-date,
    #manageModal .match-time,
    #manageModal .match-league {
        color: #e2e8f0 !important;
    }

    #manageModal .match-team-name {
        display: block !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-top: 2px !important;
        min-height: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
    }

    #manageModal .match-card-footer {
        padding: 10px 12px !important;
    }

    #manageModal .match-card-actions {
        display: flex !important;
        justify-content: flex-end !important;
    }

    #manageModal .btn-remove-match {
        pointer-events: auto !important;
        touch-action: manipulation;
    }
}

/* FINAL RTL HEADER LAYOUT LOCK:
   Keep header/navigation in the exact same physical positions as English. */
html[dir="rtl"] .header .desktop-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

html[dir="rtl"] .header .top-quick-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    direction: ltr !important;
    justify-content: flex-start !important;
    padding-right: 142px !important;
}

html[dir="rtl"] .header .top-quick-nav .auth-controls {
    left: auto !important;
    right: 12px !important;
    margin: 0 !important;
}

/* FINAL MOBILE HEADER LABEL + NAV PARITY LOCK (EN/HE):
   Keep title position and upper-nav behavior identical across languages. */
@media (max-width: 768px) {
    .header .header-content {
        top: 52px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(calc(100% - 170px), 520px) !important;
        max-width: min(calc(100% - 170px), 520px) !important;
        padding: 0 6px !important;
    }

    .header .header-title-animated {
        font-family: "Assistant", "Rubik", "Heebo", "Segoe UI", Arial, sans-serif !important;
        font-size: clamp(1.04rem, 0.96rem + 1.05vw, 1.22rem) !important;
        line-height: 1.08 !important;
    }
}

/* English panel above home cards: keep title/subtitle tighter than Hebrew */
html[lang="en"] #stepCountry:not(.hidden) #pageInfoPanel .page-info-title {
    font-size: 0.84rem !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
}

html[lang="en"] #stepCountry:not(.hidden) #pageInfoPanel .page-info-description {
    font-size: 0.78rem !important;
    line-height: 1.28 !important;
    text-wrap: pretty !important;
}

@media (max-width: 480px) {
    html[lang="en"] #stepCountry:not(.hidden) #pageInfoPanel .page-info-title {
        font-size: 0.8rem !important;
        line-height: 1.15 !important;
    }

    html[lang="en"] #stepCountry:not(.hidden) #pageInfoPanel .page-info-description {
        font-size: 0.74rem !important;
        line-height: 1.24 !important;
    }
}

html[dir="rtl"] .header .top-quick-nav,
html[dir="rtl"] .header .top-quick-nav-btn,
html[dir="rtl"] .header .top-quick-nav .auth-controls,
html[dir="rtl"] .header .top-quick-nav .auth-btn,
html[dir="rtl"] .header .top-quick-nav .auth-btn-login,
html[dir="rtl"] .header .top-quick-nav .auth-btn-logout,
html[dir="rtl"] .header .top-quick-nav .auth-btn-logout-nav {
    direction: ltr !important;
}

/* Keep the main header copy visually centered inside the banner,
   subtitle always stacked directly below the main title */
.header .header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
}

.header .header-title-single-line,
.header .header-title-animated {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    margin-bottom: 6px !important;
}

.header-subtitle-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    margin-top: 2px !important;
}

.header-subtitle-text,
.header-subtitle-brand-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FINAL DESKTOP HEADER ALIGNMENT LOCK */
@media (min-width: 769px) {
    /* Cap cards at 3 per row on all tablet/desktop widths */
    .root-explorer-grid,
    #countriesGrid.cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .header {
        height: 320px !important;
        min-height: 320px !important;
    }

    .header .header-content {
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(calc(100% - 36px), 840px) !important;
        max-width: min(calc(100% - 36px), 840px) !important;
        margin: 0 !important;
        display: grid !important;
        justify-items: center !important;
        align-content: start !important;
        row-gap: 8px !important;
        text-align: center !important;
        padding: 0 18px !important;
    }

    .header .header-title-single-line,
    .header .header-title-animated,
    .header-subtitle-line {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Keep title/subtitle vertical order stable on wide screens. */
    .header .header-title-single-line,
    .header .header-title-animated {
        order: 1 !important;
    }

    .header-subtitle-line {
        order: 2 !important;
    }

    .header-subtitle-line {
        font-size: 0.7rem !important;
        line-height: 1.16 !important;
        max-width: 700px !important;
    }

    #headerUpcomingBtn.header-upcoming-btn {
        top: 188px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 36px) !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 44px !important;
    }

    .header .top-quick-nav {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 14px !important;
        width: calc(100% - 36px) !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 70px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 136px 12px 12px !important;
        overflow: hidden !important;
        direction: ltr !important;
    }

    .header .top-quick-nav .top-quick-nav-btn {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .header .top-quick-nav .auth-controls {
        position: absolute !important;
        right: 12px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 4 !important;
    }

    html[dir="rtl"] .header .top-quick-nav {
        padding: 12px 12px 12px 136px !important;
        direction: ltr !important;
    }

    html[dir="rtl"] .header .top-quick-nav .auth-controls {
        right: 12px !important;
        left: auto !important;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .header .top-quick-nav {
        justify-content: flex-start !important;
        padding-right: 132px !important;
    }
}

/* FINAL HEADER UNIFIED LOCK
   Keep title/subtitle size and alignment identical on all breakpoints. */
.header .header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
}

.header .header-title-single-line,
.header .header-title-animated {
    order: 1 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.08 !important;
}

.header-subtitle-line {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

.header-subtitle-text,
.header-subtitle-brand-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 769px) {
    .header .header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        row-gap: 0 !important;
    }

    .header .header-title-single-line,
    .header .header-title-animated {
        font-size: 1.5rem !important;
    }

    .header-subtitle-line {
        font-size: 0.78rem !important;
        max-width: none !important;
    }
}

/* iPad/tablet: keep 3 quick buttons left, keep auth pinned right */
@media (min-width: 769px) and (max-width: 1366px) {
    .header .top-quick-nav {
        bottom: 10px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 10px 120px 10px 12px !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .header .top-quick-nav .top-quick-nav-btn {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .header .top-quick-nav .auth-controls {
        position: absolute !important;
        right: 12px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 6 !important;
        flex: 0 0 auto !important;
    }

    html[dir="rtl"] .header .top-quick-nav {
        padding: 10px 12px 10px 120px !important;
    }

    html[dir="rtl"] .header .top-quick-nav .auth-controls {
        right: 12px !important;
        left: auto !important;
    }

    /* 4px gap above top quick nav: upcoming bottom = nav bottom + nav min-height + 4px */
    #headerUpcomingBtn.header-upcoming-btn {
        top: auto !important;
        bottom: calc(10px + 70px + 4px) !important;
    }
}

/* FINAL DESKTOP SUBHEADER SIZE LOCK
   Keep subtitle text visually identical across all desktop widths. */
@media (min-width: 769px) {
    .header-subtitle-line,
    html[lang="en"] .header-subtitle-line {
        font-size: 0.82rem !important;
        line-height: 1.22 !important;
    }
}

/* Disable decorative glow layer behind header */
.header::before {
    display: none !important;
}

/* FINAL MAIN HEADER COLOR LOCK */
.header .header-title-single-line,
.header .header-title-animated {
    opacity: 1 !important;
    color: #facc15 !important;
    text-shadow: 0 2px 0 rgba(120, 53, 15, 0.72), 0 0 12px rgba(250, 204, 21, 0.5), 0 0 26px rgba(250, 204, 21, 0.28) !important;
}

.header .header-title-animated .header-word {
    color: #facc15 !important;
    opacity: 1 !important;
}

/* Mobile hardening for Upcoming modal cards:
   ensure manage-match-card layout remains visible and does not collapse into stripe-like rows. */
@media (max-width: 768px) {
    #manageModal .manage-events-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow-x: hidden !important;
    }

    #manageModal .manage-events-list .manage-match-card {
        display: block !important;
        flex: 0 0 auto !important;
        min-height: 190px !important;
        margin: 0 !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 12px !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.94) 100%) !important;
        overflow: hidden !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    #manageModal .manage-events-list .manage-match-card::before,
    #manageModal .manage-events-list .manage-match-card::after {
        content: none !important;
    }

    #manageModal .manage-match-card__header,
    #manageModal .manage-match-card__body,
    #manageModal .manage-match-card__footer {
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #manageModal .manage-match-card__header {
        padding: 10px 12px !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
    }

    #manageModal .manage-match-card__body {
        padding: 12px !important;
    }

    #manageModal .manage-match-card__footer {
        padding: 10px 12px !important;
        border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
        background: rgba(15, 23, 42, 0.45) !important;
    }

    #manageModal .manage-match-card__date,
    #manageModal .manage-match-card__time,
    #manageModal .manage-competition-title,
    #manageModal .match-team-name,
    #manageModal .match-vs,
    #manageModal .manage-status-pill {
        color: #e2e8f0 !important;
    }

    #manageModal .btn-remove-match {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    #manageModal .manage-events-list .manage-match-card.manage-match-card--h2h-open {
        flex: 0 0 auto !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 20 !important;
        margin-bottom: 24px !important;
    }

    #manageModal .manage-events-list .manage-match-card.manage-match-card--h2h-open .manage-h2h-row,
    #manageModal .manage-events-list .manage-match-card.manage-match-card--h2h-open .manage-h2h-details[open],
    #manageModal .manage-events-list .manage-match-card.manage-match-card--h2h-open .manage-leg-details__body {
        position: relative !important;
        z-index: 21 !important;
        overflow: visible !important;
    }

    #manageModal .manage-h2h-row {
        width: calc(100% + 16px) !important;
        margin: 2px -8px 0 !important;
        padding-top: 2px !important;
    }

    #manageModal .manage-h2h-details {
        width: 100% !important;
        margin-top: 4px !important;
    }

    #manageModal .manage-h2h-details summary {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 14px !important;
        border-radius: 10px !important;
    }

    #manageModal .manage-h2h-details .manage-leg-details__body {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Upcoming modal: keep teams/H2H controls close to the lower separator. */
#manageModal .manage-events-list .manage-match-card .manage-match-card__body {
    padding-bottom: 4px !important;
}

#manageModal .manage-events-list .manage-match-card .match-fixture-row {
    margin-bottom: 0 !important;
}

#manageModal .manage-events-list .manage-match-card .manage-h2h-row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* FINAL SUBHEADER 3-LINE LOCK (all devices) */
.header-subtitle-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    color: #facc15 !important;
}

.header-subtitle-line .header-subtitle-row {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.header-subtitle-line .header-subtitle-icon {
    margin: 0 2px !important;
    vertical-align: middle !important;
}

.header-subtitle-line .header-subtitle-brand-line {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: rgba(226, 232, 240, 0.8) !important;
    letter-spacing: 0 !important;
}

.header-subtitle-line .header-subtitle-brand-line .header-subtitle-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.62rem !important;
    opacity: 0.88 !important;
}

html[lang="en"] .header-subtitle-line {
    font-size: 0.82rem !important;
    line-height: 1.22 !important;
}

@media (max-width: 768px) {
    .header-subtitle-line {
        font-size: 0.74rem !important;
        line-height: 1.18 !important;
    }

    .header-subtitle-line .header-subtitle-brand-line {
        font-size: 0.66rem !important;
        color: rgba(226, 232, 240, 0.74) !important;
    }

    html[lang="en"] .header-subtitle-line {
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
    }

    html[lang="en"] .header-subtitle-line .header-subtitle-brand-line {
        font-size: 0.64rem !important;
    }
}

/* FINAL iPad NAV LOCK + spacing
   - keep 3 quick buttons as a left group
   - keep auth/logout pinned to far right
   - maintain exact 4px gap from upcoming button */
@media (min-width: 769px) and (max-width: 1366px) {
    .header .top-quick-nav {
        bottom: 10px !important;
        padding: 10px 120px 10px 12px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .header .top-quick-nav .top-quick-nav-btn {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .header .top-quick-nav .auth-controls {
        position: absolute !important;
        right: 12px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 6 !important;
        flex: 0 0 auto !important;
    }

    html[dir="rtl"] .header .top-quick-nav {
        padding: 10px 12px 10px 120px !important;
    }

    html[dir="rtl"] .header .top-quick-nav .auth-controls {
        right: 12px !important;
        left: auto !important;
    }

    #headerUpcomingBtn.header-upcoming-btn {
        top: auto !important;
        bottom: calc(10px + 70px + 4px) !important;
    }
}

/* Skeleton placeholder for lazy-loaded flag images */
.flag-img-lazy {
    background-color: #e5e7eb;
    background-image: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 2s infinite;
}

.flag-img-lazy:not([src=""]) {
    animation: none;
    background: none;
}

@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Mobile: Make GD column compact and visible on small screens */
@media (max-width: 768px) {
    /* Standings table on mobile: show GD with smaller font */
    #teamsGrid table thead th.col-gd,
    #teamsGrid table tbody td.col-gd {
        width: 28px !important;
        padding: 6px 3px !important;
        font-size: 0.75rem !important;
    }
    
    #teamsGrid table thead th.col-gd {
        font-weight: 600;
        font-size: 0.7rem;
    }
    
    #teamsGrid table tbody td.col-gd {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }
    
    /* Tighten other stat columns for space */
    #teamsGrid table thead th.col-gp,
    #teamsGrid table tbody td.col-gp {
        width: 28px !important;
        padding: 6px 3px !important;
        font-size: 0.75rem !important;
    }
    
    #teamsGrid table thead th.col-form,
    #teamsGrid table tbody td.col-form {
        padding: 6px 2px !important;
        font-size: 0.7rem !important;
    }
}