* {
    box-sizing: border-box;
}

:root {
    /* --- Identita' golindiretta, 20/08/2026 -------------------------------
       Il vecchio --primary era #6366f1, cioe' l'indigo-500 predefinito di
       Tailwind: il viola piu' usato del web, quello che fa sembrare qualsiasi
       sito un modello comprato. Sostituito col verde petrolio del marchio.
       Su fondo scuro il petrolio si spegne, quindi esiste --primary-dark-bg
       che schiarisce verso il turchese: usarla la' e non --primary. */
    --primary: #0f766e;
    --primary-light: #e6f4f2;
    --primary-dark-bg: #2dd4bf;
    /* Secondario: ambra. Sta bene col petrolio perche' e' caldo dove il petrolio
       e' freddo, e resta leggibile sia sul bianco sia sul petrolio stesso.
       Si usa per gli evidenziatori — "match del giorno", preferiti, in evidenza —
       MAI per le azioni principali, che restano petrolio. */
    --secondary: #f59e0b;
    --secondary-light: #fef3c7;
    --secondary-dark: #b45309;
    --accent: #0b5b55;
    --gradient: linear-gradient(135deg, #0f766e 0%, #0b5b55 100%);
    --bg: #f4f7f6; /* grigio con un'ombra di petrolio, non di blu */
    --card-bg: #ffffff;
    --text: #1a1a1a;
    --text-light: #737373;
    --border: #f0f0f0;
    /* Il live e' PETROLIO dal 20/08/2026, scelta di Tobia dopo aver visto il
       confronto con il rosso. Il prezzo consapevole: una partita al 67' e una
       finita hanno lo stesso colore di punteggio, quindi il segnale del "in corso"
       sta tutto nella pillola e nel suo battito. */
    --live: #0f766e;
    /* Il rosso resta, ma solo dove vuol dire rosso: cartellini, infortuni,
       sconfitte nel W-D-L, retrocessioni, trasferimenti in uscita, errori. */
    --rosso: #e11d48;
    --sidebar-w: 220px;
    --right-sidebar-w: 260px;
    --max-w: 1250px;
}

/* Breadcrumbs Moderni e Minimali */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    width: fit-content;
    margin-bottom: 15px !important;
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    transition: all 0.3s ease;
}

.breadcrumbs:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    background: #ffffff;
}

.breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumbs a i {
    font-size: 12px;
}

.breadcrumbs a:hover {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumbs .separator {
    color: #ccd4d2;
    font-size: 12px;
    display: flex;
    align-items: center;
    font-weight: 400;
}

.breadcrumbs .current {
    color: #69736f;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    padding-left: 2px;
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 4px 10px;
        font-size: 10px !important;
        margin-bottom: 12px !important;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        background: #ffffff; /* No blur on mobile for performance */
    }
    .breadcrumbs .current {
        max-width: 120px;
    }
}

/* Override per vecchi colori sparsi */
.primary-color { color: #0f766e !important; }
.accent-color { color: var(--primary) !important; }
.primary-bg { background-color: #0f766e !important; }
.accent-bg { background-color: var(--primary) !important; }
.primary-gradient { background: linear-gradient(135deg, #0f766e 0%, var(--primary) 100%) !important; }

/* Badge GOL animato */
.goal-badge {
    background: var(--live);
    color: white !important;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    animation: pulse-goal 1s infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(15, 118, 110, 0.3);
    text-transform: uppercase;
    line-height: 1;
    position: absolute;
    right: 35px; /* Posizionato a sinistra del risultato */
    z-index: 10;
    white-space: nowrap;
}

@keyframes pulse-goal {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(15, 118, 110, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
}

body {
    font-family: 'Sora', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Header Forza Style */
.top-header {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 10001;
    border-bottom: 1px solid #e4e9e7;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 50px;
}

.sticky-team-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7f9f8;
    padding: 6px 15px;
    border-radius: 50px;
    border: 1px solid #e4e9e7;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    
    /* Positioned in the middle of the header */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 10px);
    margin: 0;
    z-index: 5;
}

.sticky-team-header.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) !important;
}

.sticky-match-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7f9f8;
    padding: 6px 15px;
    border-radius: 50px;
    border: 1px solid #e4e9e7;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 10px);
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sticky-match-header.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) !important;
}

.sticky-match-logo {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.sticky-match-score {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    background: transparent !important;
    padding: 0 10px !important;
    min-width: unset !important;
    text-align: center !important;
    font-family: 'Sora', sans-serif !important;
}

@media (max-width: 992px) {
    .header-container {
        padding: 0 6px !important;
        justify-content: space-between;
        gap: 4px !important;
    }
    
    .logo-new .logo-text {
        font-size: 14px !important;
        letter-spacing: -0.5px !important;
    }
    
    .logo-new img {
        width: 16px !important;
        height: 16px !important;
    }

    .sticky-match-logo {
        width: 18px !important;
        height: 18px !important;
    }

    .sticky-match-score {
        font-size: 13px !important;
        padding: 2px 5px !important;
        min-width: 32px !important;
        font-weight: 800;
    }

    .sticky-team-header {
        position: static;
        transform: scale(0.75) !important;
        max-width: 110px; 
        padding: 3px 6px; 
        margin: 0 auto;
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        transition: all 0.3s;
        order: 3;
        background: #f7f9f8;
        border: 1px solid #e4e9e7;
        border-radius: 50px;
    }

    .sticky-team-header.visible {
        opacity: 1;
        visibility: visible;
        transform: scale(1) !important;
    }

    .mobile-menu-toggle {
        display: block !important;
        order: 1;
        font-size: 16px !important;
        padding: 5px !important;
    }

    .logo-new {
        order: 2;
        margin-right: 0;
        gap: 3px;
    }

    .sticky-match-header {
        position: static;
        transform: translateY(4px) !important;
        opacity: 0;
        visibility: hidden;
        order: 3;
        margin: 0 5px 0 auto !important;
        padding: 2px 4px !important;
        gap: 3px !important;
        left: auto;
        top: auto;
        border-radius: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .sticky-match-header.visible {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    .header-right {
        order: 4;
        margin-left: 0;
        gap: 15px !important;
        padding-right: 15px !important;
    }
    
    .search-toggle {
        font-size: 22px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .header-nav-item i {
        font-size: 22px !important;
    }
}

.sticky-team-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.sticky-team-name {
    font-size: 15px;
    font-weight: 800;
    color: #1f2724;
    text-overflow: ellipsis;
    overflow: hidden;
}
@media (max-width: 768px) {
    .header-nav-item span {
        display: none;
    }
    
    .header-right {
        gap: 10px;
    }
}

@media (max-width: 580px) {
    .logo-text {
        font-size: 14px;
        letter-spacing: -0.5px;
    }
    
    .sticky-team-header {
        max-width: 160px; /* Più grande */
        padding: 6px 10px;
    }

    .sticky-team-logo {
        width: 26px; /* Aumentato da 20px */
        height: 26px; /* Aumentato da 20px */
    }

    .sticky-team-name {
        font-size: 12px; /* Aumentato da 10px */
        font-weight: 800;
    }
}

@media (max-width: 480px) {
    .logo-new .logo-text {
        font-size: 24px !important;
        letter-spacing: -0.5px !important;
    }
    .logo-new img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .logo-new {
        order: 2 !important;
        margin-right: auto !important;
        gap: 3px;
    }

    /* MINI SCORE BAR MOBILE - SOTTO L'HEADER */
    .sticky-match-header {
        position: fixed !important;
        top: 60px !important; /* Esattamente sotto la testata */
        left: 50% !important;
        transform: translateX(-50%) translateY(-100%) !important;
        display: flex !important;
        width: auto !important;
        min-width: 150px !important;
        height: 36px !important;
        background: #ffffff !important; /* Stesso colore dell'header */
        border-radius: 0 0 18px 18px !important;
        border: 1px solid #e4e9e7 !important;
        border-top: none !important;
        box-shadow: none !important; /* Rimossa ombra per fondersi con l'header */
        padding: 0 20px !important;
        gap: 12px !important;
        z-index: 10000 !important;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .sticky-match-header.visible {
        transform: translateX(-50%) translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sticky-match-score {
        font-size: 13px !important;
        font-weight: 800 !important;
        padding: 0 5px !important;
        min-width: unset !important;
        background: transparent !important;
    }

    .sticky-match-logo {
        width: 18px !important;
        height: 18px !important;
    }
}

.header-container {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* Aligned with main-container */
    position: relative;
    height: 100%;
}

/* Nuova Search con Toggle */
.header-search-v2 {
    position: relative;
    display: flex;
    align-items: center;
}

/* Da desktop la ricerca è sempre visibile */
.search-toggle {
    display: none;
}

.header-search-container {
    position: relative;
    transform: none;
    width: 300px;
    background: #ffffff;
    padding: 2px;
    border-radius: 50px;
    border: 1.5px solid #e4e9e7;
    display: flex;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.header-search-container:hover {
    border-color: #ccd4d2;
}

.header-search-container:focus-within {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1), 0 8px 25px rgba(0,0,0,0.05);
}

.search-inner-icon {
    position: absolute;
    left: 20px;
    color: var(--primary);
    z-index: 10;
    font-size: 24px;
}

.header-search-container input {
    width: 100%;
    padding: 12px 20px 12px 55px;
    border-radius: 50px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    color: #1f2724;
}

@media (max-width: 992px) {
    /* Da smartphone/tablet usiamo il toggle */
    .search-toggle {
        display: flex;
        background: transparent;
        border: none;
        color: #4c5551;
        font-size: 20px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
    }

    #header-search-container.header-search-container {
        position: absolute !important;
        right: 0 !important;
        top: 65px !important; /* Spostato sotto l'icona e l'header */
        transform: translateY(-15px) scale(0.95) !important;
        transform-origin: top center !important; /* Animazione centrata */
        width: 340px !important;
        background: white !important;
        opacity: 0 !important;
        visibility: hidden !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
        border-radius: 20px !important;
        z-index: 10003 !important;
        display: flex !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    @media (max-width: 480px) {
        #header-search-container.header-search-container {
            width: calc(100vw - 40px) !important;
            right: -65px !important; /* Spostato per centrarlo nello schermo */
            max-width: none !important;
        }
    }

    #header-search-container.header-search-container.active {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header-search-container input {
        background: #f7f9f8;
    }
}

.mobile-menu-toggle {
    display: none;
}

.logo-new {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s;
}

.logo-new:hover {
    transform: scale(1.02);
}

.logo-bolt {
    display: none;
}

.logo-text {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #1a1a1a !important;
    letter-spacing: -1px;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    line-height: 1;
}

.logo-accent {
    color: var(--accent) !important;
    font-weight: 800;
    margin: 0;
}

.logo-accent.footer-accent {
    color: #ffffff !important;
}

.logo-end {
    font-weight: 500;
}

.logo-accent::after {
    display: none;
}

@media (max-width: 850px) {
    .logo-text { font-size: 18px; letter-spacing: -0.8px; }
    .logo-bolt { width: 20px; height: 20px; font-size: 12px; }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
}

.header-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #4c5551;
    font-size: 12px;
    font-weight: 700;
}

.header-nav-item i {
    font-size: 28px;
    color: #4c5551;
}

.live-now-btn {
    background: #000;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s;
}

.live-now-btn:hover {
    transform: scale(1.02);
}

.live-now-btn span {
    background: var(--live);
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
}

/* Main Layout */
.main-container {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    gap: 30px;
    padding: 0 20px;
}

.left-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 15px 0;
    background: transparent;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.left-sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.content-area {
    flex: 1;
    min-width: 0;
    padding-top: 20px;
}

.right-sidebar {
    width: var(--right-sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    height: fit-content;
    padding-top: 20px;
}

/* Date Navigation Refined */
.date-navigation {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.date-nav-wrapper {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 65px;
}

.nav-tabs-left {
    display: flex;
    gap: 35px;
}

.tab-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tab-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    min-width: 32px;
    text-align: center;
    transition: all 0.2s;
}

.badge-all {
    background: #eef2f1;
    color: #4c5551;
}

.badge-live {
    background: #fdeaee;
    color: var(--live);
}

.badge-scheduled {
    background: var(--primary-light);
    color: var(--primary);
}

.nav-tab.active .badge-all {
    background: #4c5551;
    color: white;
}

.nav-tab.active .badge-live {
    background: var(--live);
    color: white;
}

.nav-tab.active .badge-scheduled {
    background: var(--primary);
    color: white;
}

.nav-tab {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #98a3a0;
    padding: 10px 0;
    position: relative;
    transition: color 0.2s;
}

.nav-tab:hover {
    color: var(--primary);
}

.nav-tab.active {
    color: var(--primary);
}

.nav-tab.live-tab {
    color: var(--live);
}

.nav-tab.live-tab.active {
    color: var(--live);
}

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    .date-navigation {
        margin-bottom: 12px !important;
    }
    .date-nav-wrapper {
        flex-direction: column !important;
        height: auto !important;
        padding: 8px 6px !important;
        gap: 8px !important;
    }

    .nav-tabs-left {
        width: 100% !important;
        gap: 4px !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .nav-tab {
        flex: 1 !important;
        background: #f7f9f8 !important;
        border-radius: 10px !important;
        padding: 5px 2px !important;
        font-size: 11px !important;
        min-width: 0 !important;
        border: 1px solid #eef2f1 !important;
        text-align: center !important;
    }

    .nav-tab.active {
        background: white !important;
        border-color: var(--primary) !important;
    }

    .tab-content-wrapper {
        gap: 1px !important;
    }

    .tab-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
        min-width: 20px !important;
    }

    .date-picker-pill {
        width: 85% !important;
        margin: 0 auto !important;
        justify-content: center !important;
        background: #eef2f1 !important;
        border: none !important;
        padding: 2px !important;
        height: 32px !important;
    }

    .current-date-display {
        font-size: 13px !important;
        font-weight: 700 !important;
        min-width: 80px !important;
        text-align: center !important;
        padding: 0 10px !important;
        color: var(--primary) !important;
    }

    .date-nav-arrow {
        width: 28px !important;
        height: 28px !important;
        background: white !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.date-picker-pill {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 30px;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.date-nav-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.2s;
}

.date-nav-arrow:hover {
    background: #eef2f1;
}

.current-date-display {
    padding: 0 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    min-width: 120px;
    text-align: center;
    transition: background 0.2s;
    border-radius: 20px;
}

.current-date-display:hover {
    background: #eef2f1;
}

.current-date-display i {
    color: #69736f;
    font-size: 14px;
}

@media (max-width: 850px) {
    .date-nav-wrapper {
        padding: 0 15px;
        height: 55px;
    }
    
    .nav-tabs-left {
        gap: 20px;
    }
    
    .nav-tab {
        font-size: 14px;
        padding: 15px 0;
    }
    
    .date-picker-pill {
        padding: 1px;
    }
    
    .current-date-display {
        padding: 0 15px;
        font-size: 13px;
        min-width: 70px;
    }
    
    .date-nav-arrow {
        width: 30px;
        height: 30px;
    }
}

/* League Groups - Professional Spacing */
.league-group {
    margin-bottom: 40px;
}

.league-header {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.league-header img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.league-header span {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

/* Match Rows - Optimized for Width */
.match-wrapper {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.match-wrapper:hover {
    background: #ffffff;
}

.match-row {
    display: grid;
    grid-template-columns: 40px 70px 1px 1fr 40px;
    align-items: center;
    padding: 10px 0;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
}

.match-fav {
    color: #d3d9d7;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-fav:hover {
    color: #f59e0b;
}

.match-fav.active {
    color: #f59e0b;
}

.match-fav.active i {
    font-weight: 900 !important;
}

.match-status-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    min-width: 70px;
}

.m-time {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    line-height: 1.2;
}

.m-time.live-text-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--live) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-style: italic;
    opacity: 1;
}

.m-minute {
    font-size: 13px;
    font-weight: 900;
    color: #bbb;
    line-height: 1.2;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.match-row.is-live .m-minute {
    color: var(--live);
}

.match-separator {
    width: 1px;
    height: 35px;
    background-color: #eee;
    margin: 0;
}

.match-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0 30px;
}

.match-content-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Per posizionamento badge gol */
}

.team-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.team-name {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

.score-item {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: 800;
    color: #000;
    min-width: 20px;
    text-align: right;
}

.match-row.is-live .score-item {
    color: var(--live);
}

.match-action {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.match-score {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 800;
    font-size: 18px;
    text-align: right;
    color: #000;
}

.live-badge {
    color: var(--live);
    font-weight: 900;
    font-size: 15px;
}

/* Sidebar Widgets Refinement */
.widget-title {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 25px;
    color: #000;
}

.squadre-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.2s;
}

.squadre-item:hover {
    padding-left: 5px;
}

.squadre-item img {
    width: 32px;
    height: 32px;
    margin-right: 15px;
}

.squadre-name {
    font-weight: 800;
    font-size: 15px;
    color: #000;
    display: block;
    margin-bottom: 2px;
}

.squadre-follow-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
}

.follow-icon-plus {
    margin-left: auto;
    font-size: 18px;
    color: var(--primary);
    opacity: 0.2;
    transition: all 0.3s ease;
}

.squadre-item:hover .follow-icon-plus {
    opacity: 1;
    transform: scale(1.1);
}

.squadre-item:hover .squadre-follow-tag {
    opacity: 1;
}

@media (max-width: 992px) {
    body.sidebar-open .main-container {
        position: relative;
    }

    .header-search {
        display: none; /* Hide search on mobile header to save space */
    }

    .live-now-btn {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: block !important;
    }

    .main-container {
        flex-direction: column;
        gap: 15px;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .content-area {
        padding-top: 0;
        width: 100% !important;
    }

    .right-sidebar {
        width: 100% !important;
        padding: 0 !important;
    }

    .widget {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    .league-group {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .left-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 300px;
        background: white;
        z-index: 30005;
        transition: left 0.3s ease;
        padding: 20px;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        overflow-y: auto;
        border-right: none;
    }

    .left-sidebar.mobile-active {
        left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 30000;
        cursor: pointer;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .right-sidebar {
        width: 100%;
    }

    .match-row {
        grid-template-columns: 35px 72px 1px 1fr 30px;
        padding: 8px 0;
    }

    .match-status-col {
        padding: 0 5px;
        min-width: 72px;
    }

    .ht-badge {
        padding: 2px 6px !important;
        font-size: 9px !important;
    }

    .m-time { font-size: 13px; }
    .m-minute { font-size: 11px; }

    .team-info img {
        width: 20px;
        height: 20px;
    }

    .team-name {
        font-size: 14px;
        font-weight: 400;
    }

    .score-item {
        font-size: 14px;
    }

    .leagues-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
    
    .country-link {
        padding: 15px 20px;
        font-size: 15px;
    }
    
    .league-link {
        padding: 12px 20px 12px 52px;
        font-size: 14px;
    }
}

/* Il puntino qui non si disegna piu': lo fa .live-dot, che nel markup sta gia'
   subito prima di questo badge. Tenerli tutti e due dava due pallini in fila. */

@keyframes live-blink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.match-row.is-live {
    background: #ffffff;
}

.ht-badge {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(15, 118, 110, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    margin-right: 2px;
}

/* Idem: anche l'intervallo ha il suo <span class="live-dot"> davanti. */

.league-group {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    animation: fadeIn 0.5s ease-out forwards;
}

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

.league-header {
    background: #ffffff;
    color: white;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.league-header i { color: #000; }

.match-wrapper {
    width: 100%;
}

.match-wrapper:last-child { border-bottom: none; }

.favorite-star {
    padding: 0 15px;
    cursor: pointer;
    font-size: 16px;
    color: #ffc107; /* Yellow outline by default */
    transition: all 0.2s;
}

.favorite-star:hover {
    transform: scale(1.2);
}

.match-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.match-arrow {
    display: none;
}

.match-arrow.active {
    opacity: 1;
    visibility: visible;
    color: #00ff85 !important;
    filter: drop-shadow(0 0 8px #00ff85);
    animation: arrowBlink 0.6s infinite alternate;
}

@keyframes arrowBlink {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.6); opacity: 0.8; }
}

/* Ensure H2H rows in match.php don't have the large right column if not needed */
#h2h .match-row {
    grid-template-columns: 80px 1fr 40px 60px;
}

.match-row:hover {
    background-color: #ffffff;
}

.match-row:last-child { border-bottom: none; }

/* Legacy styles removed to fix layout */

.match-row.is-live .match-score {
    background: transparent;
    color: var(--live);
    box-shadow: none;
    border: none;
}

.match-row.is-live .match-score span {
    color: var(--live) !important;
}

.match-status {
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-light);
}

.is-live .match-status {
    color: var(--live);
}

.live-min {
    color: var(--live);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.gambling-warning-mini {
    font-size: 8px !important;
    color: #98a3a0 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    font-weight: 400 !important;
    opacity: 0.7 !important;
}

.gambling-warning-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 10px !important;
    background: #f7f9f8 !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
    opacity: 0.8 !important;
}

.gambling-warning-text {
    font-size: 8px !important;
    color: #69736f !important;
    line-height: 1.3 !important;
    text-align: left !important;
    max-width: 300px !important;
}

.adm-logo-container img {
    max-width: 80px !important;
    height: auto !important;
    filter: grayscale(1) !important;
    opacity: 0.6 !important;
}

/* Mini Odds Styles */
.match-odds-mini {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
}

.view-odds-live {
    color: var(--accent-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.match-link:hover .view-odds-live {
    color: var(--accent);
    transform: translateX(3px);
}

.odd-row-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--primary);
    background: #eef2f1;
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.odd-row-pill:hover {
    background: white;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.odd-row-pill span {
    font-weight: 800;
    color: var(--text-light);
    opacity: 0.4;
    font-size: 9px;
}

.odd-row-pill strong {
    color: var(--primary);
    font-weight: 700;
}

.odd-row-pill.empty {
    opacity: 0.3;
    background: transparent;
    border: 1px dashed var(--border);
}

/* Real-time odds animations */
.odd-row-pill.odds-updating {
    transition: all 0.3s ease;
}

.odd-row-pill.odds-flash {
    animation: odds-flash 0.8s ease-in-out;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 255, 133, 0.3);
}

.odd-row-pill.odds-changed {
    background: linear-gradient(135deg, var(--secondary) 0%, #f59e0b 100%) !important;
    color: var(--primary) !important;
    animation: odds-changed-pulse 2s ease-in-out infinite;
    position: relative;
}

.odd-row-pill.odds-changed::after {
    content: '⬆';
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--rosso);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    animation: bounce-in 0.5s ease-out;
}

@keyframes odds-flash {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes odds-changed-pulse {
    0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    70% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

@keyframes bounce-in {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* Real-time standings animations */
.standings-table tr.position-changed {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
    color: white !important;
}

.standings-table tr.points-changed {
    background: linear-gradient(135deg, var(--secondary) 0%, #f59e0b 100%) !important;
    color: var(--primary) !important;
}

.standings-table tr.position-flash {
    animation: standings-position-flash 1.2s ease-in-out;
    box-shadow: 0 0 20px rgba(15, 118, 110, 0.5);
}

.standings-table tr.points-flash {
    animation: standings-points-flash 1.2s ease-in-out;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

.standings-table tr.position-changed td:first-child::after {
    content: '↕';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--rosso);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: standings-change-indicator 0.8s ease-out;
}

.standings-table tr.points-changed td:nth-child(3)::after {
    content: '+';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    background: #16a34a;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: standings-change-indicator 0.8s ease-out;
}

@keyframes standings-position-flash {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

@keyframes standings-points-flash {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes standings-change-indicator {
    0% { transform: translateY(-50%) scale(0) rotate(0deg); opacity: 0; }
    50% { transform: translateY(-50%) scale(1.3) rotate(180deg); opacity: 1; }
    100% { transform: translateY(-50%) scale(1) rotate(360deg); opacity: 1; }
}

/* Form Badges */
.form-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.form-dot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.form-opp-logo {
    width: 12px;
    height: 12px;
    object-fit: contain;
    opacity: 0.8;
}

.form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
}
.form-W { background-color: #22c55e !important; } /* Green for Win */
.form-D { background-color: var(--secondary) !important; } /* Yellow for Draw */
.form-L { background-color: var(--rosso) !important; } /* Red for Loss */

@media (max-width: 480px) {
    .form-dots-container {
        gap: 4px;
    }
    .form-badge {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
    .form-opp-logo {
        width: 10px;
        height: 10px;
    }
}

/* Red Card Badge */
.red-cards-container {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    vertical-align: middle;
    flex-wrap: nowrap;
}

.red-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 19px;
    background: var(--rosso) !important;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
    animation: redCardAppear 0.5s ease-out;
    flex-shrink: 0;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1;
    text-align: center;
    padding: 0;
}

@media (max-width: 768px) {
    .red-cards-container {
        margin-left: 4px;
        gap: 2px;
    }
    .red-card-badge {
        width: 12px;
        height: 16px;
        font-size: 10px !important;
    }
}

/* Goal Flash Animation - Single Match Focus */
.goal-flash {
    position: relative;
    z-index: 10;
    transition: background 0.5s ease;
}

/* Qui c'era `background: transparent !important`, che ANNULLAVA il fondo della
   riga invece di accenderla: la classe goal-flash non si vedeva. Sostituita
   dall'accensione vera, in fondo al file (cerca "IL GOL nella lista"). */

.status-badge {
    padding: 2px 4px;
    border: 1px solid var(--rosso);
    color: var(--rosso);
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.status-badge.gol-badge {
    animation: badgePulse 1s infinite;
}

.status-badge.var-badge {
    position: relative;
}

.status-badge.var-badge::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 1px solid var(--rosso);
    border-radius: 6px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: rotateBorder 1.5s linear infinite;
}

@keyframes badgePulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes rotateBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes scoreBlink {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.1);
    }
}

.score-blink, .score-flash {
    animation: scoreBlink 1s ease-in-out infinite !important;
    display: inline-block;
    z-index: 10;
}


/* Right Sidebar */
.right-sidebar {
    width: var(--right-sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 80px; /* Below the header */
    height: fit-content;
}

.widget {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.widget-title {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
    color: var(--primary);
}

/* Top Scorers Widget - Compact Design */
.scorer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.scorer-item:hover {
    background: rgba(0,255,133,0.05);
    transform: translateX(2px);
    box-shadow: 0 3px 8px rgba(0,255,133,0.08);
}

/* Ranking Number */
.scorer-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

.scorer-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.scorer-item:hover .scorer-img {
    transform: scale(1.05);
}

.scorer-info {
    flex: 1;
    min-width: 0;
}

.scorer-info strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scorer-item:hover .scorer-info strong {
    color: var(--accent);
}

/* Team Info */
.scorer-team {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}

.scorer-team img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.scorer-team small {
    color: var(--text-light);
    font-weight: 600;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats */
.scorer-stats {
    display: flex;
    gap: 6px;
    font-size: 9px;
    flex-wrap: wrap;
}

.scorer-stats span {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text);
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.03);
    white-space: nowrap;
}

.scorer-stats .goals {
    color: #006400;
    background: rgba(0,100,0,0.1);
}

.scorer-stats .assists {
    color: #69736f;
    background: rgba(100, 116, 139, 0.1);
}

.scorer-stats .appearances {
    color: var(--primary);
    background: rgba(15, 118, 110, 0.1);
}

.scorer-stats i {
    font-size: 8px;
    opacity: 0.8;
}

/* Injuries Widget - Modern Design */
.injury-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%);
    border: 1px solid rgba(220, 38, 38, 0.1);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.06);
    position: relative;
    overflow: hidden;
}

.injury-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--rosso) 0%, var(--rosso) 100%);
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.injury-item:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.02) 0%, rgba(239, 68, 68, 0.03) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.2);
}

.injury-item:hover::before {
    width: 6px;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
}

.injury-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    background: linear-gradient(135deg, var(--rosso), var(--rosso)) padding-box,
                linear-gradient(135deg, var(--rosso), var(--rosso)) border-box;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.injury-img::after {
    content: '🏥';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--rosso);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.injury-item:hover .injury-img {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
}

.injury-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.injury-info strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.injury-item:hover .injury-info strong {
    color: var(--rosso);
    text-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
}

/* Injury Team Info */
.injury-team {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.injury-team img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.injury-item:hover .injury-team img {
    transform: scale(1.1);
}

.injury-team small {
    color: var(--text-light);
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.injury-item:hover .injury-team small {
    color: var(--rosso);
}

/* Injury Type Badge */
.injury-type {
    display: flex;
    align-items: center;
}

.injury-badge {
    font-size: 9px;
    font-weight: 900;
    color: white;
    background: linear-gradient(135deg, var(--rosso) 0%, var(--rosso) 100%);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.injury-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.injury-item:hover .injury-badge::before {
    left: 100%;
}

.injury-item:hover .injury-badge {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

/* Responsive Optimization */
@media (max-width: 850px) {
    .mobile-menu-toggle { display: block !important; }
    .header-date { display: none; }
    .header-container { justify-content: space-between; gap: 10px; padding: 0 10px; height: 60px; }
    
    .logo { font-size: 18px; gap: 3px; }
    .logo span { display: none; }
    
    .header-right { gap: 10px; }
    .header-nav-item { gap: 1px; }
    .header-nav-item i { font-size: 16px; }
    .header-nav-item span { font-size: 9px; font-weight: 800; }

    .date-navigation { margin-bottom: 15px; }
    .nav-tab { font-size: 13px; padding: 12px 0; }
    .nav-tabs-left { gap: 15px; }

    .gambling-warning-box {
        padding: 10px;
        margin-bottom: 15px;
    }

    .gambling-warning-text {
        font-size: 9px;
    }

    .adm-logo-container img {
        max-width: 140px;
    }

    .league-group {
        margin-bottom: 20px;
        border-radius: 8px !important;
    }

    .league-header {
        padding: 10px 15px;
        gap: 10px;
    }

    .league-header img {
        width: 20px;
        height: 20px;
    }

    .match-row {
        grid-template-columns: 40px 60px 1px 1fr 30px;
        padding: 12px 0;
    }

    .team-name {
        max-width: 160px;
    }

    .match-row {
        grid-template-columns: 35px 55px 1px 1fr 30px;
        padding: 10px 0;
        gap: 0;
    }

    .match-status-col {
        padding: 0 5px;
        min-width: 55px;
    }

    .m-time { font-size: 12px; font-weight: 700; }
    .m-minute { font-size: 11px; font-weight: 800; }

    .team-info img {
        width: 20px;
        height: 20px;
    }

    .team-name {
        font-size: 13px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    .score-item {
        font-size: 14px;
        font-weight: 800;
    }

    .match-link {
        padding: 0 20px;
    }

    .match-content-main {
        gap: 8px;
    }

    .match-score span { color: var(--primary); }
    .is-live .match-score span, .match-row.is-live .match-score span { color: var(--live) !important; font-weight: 800; }
    .is-live .match-score span:nth-child(2), .match-row.is-live .match-score span:nth-child(2) { opacity: 1 !important; }
    .match-odds-mini { display: flex !important; flex-direction: row !important; width: auto !important; gap: 2px !important; padding: 0 !important; background: transparent !important; justify-content: flex-end !important; align-items: center !important; }
    .odd-row-pill { font-size: 8px !important; padding: 2px 4px !important; background: #eef2f1 !important; border-radius: 4px !important; color: var(--primary) !important; gap: 2px !important; flex-shrink: 0 !important; }
    .odd-row-pill span { font-size: 8px !important; opacity: 0.6 !important; }
    .view-odds-live { font-size: 9px !important; }
    .match-status { font-size: 9px; text-align: center; }
    .match-status i { display: none; }
}

@media (max-width: 480px) {
    .match-status-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .m-minute {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0;
    }
    .logo-subtitle { display: none; }
    .logo-main-text { font-size: 16px; }
    .logo-svg { max-height: 24px; }
    .detail-header { padding: 25px 15px; }
    .detail-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; }
    .detail-team img { width: 45px; height: 45px; margin-bottom: 8px; }
    .detail-team h2 { font-size: 13px; line-height: 1.2; }
    .detail-score { 
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center !important; 
        justify-content: center !important; 
        font-size: 32px !important; 
        gap: 15px !important; 
        font-weight: 800; 
        white-space: nowrap !important; 
    }
    .detail-score span:nth-child(2)::before { content: '-'; margin-right: 5px; opacity: 0.5; }
    .detail-tabs { overflow-x: auto; justify-content: flex-start; padding: 5px; gap: 5px; -webkit-overflow-scrolling: touch; }
    .tab-link { white-space: nowrap; padding: 10px 15px; font-size: 11px; }
    .stat-item-v2 span { font-size: 14px !important; }
    .stat-item-v2 div div { font-size: 9px !important; }
    .ai-box { padding: 15px !important; gap: 10px !important; }
    .ai-box-icon { width: 35px !important; height: 35px !important; font-size: 16px !important; }
    .ai-box-title { font-size: 9px !important; }
    .ai-box-text { font-size: 12px !important; }
    .ai-box-advice { font-size: 15px !important; }
}

/* Consolidate Mobile Optimizations */
@media (max-width: 850px) {
    .date-navigation {
        padding: 5px;
        border-radius: 12px;
        gap: 2px;
        justify-content: space-between;
    }
    .date-nav-wrapper {
        gap: 2px;
        flex: 1;
        padding: 0 5px;
        height: 55px;
    }
    .date-nav-item {
        padding: 5px 2px;
        min-width: 55px;
        flex: 1;
    }
    .date-nav-item .day-name { font-size: 8px; }
    .date-nav-item .day-date { font-size: 11px; }
    
    .calendar-btn { width: 35px; height: 35px; }
    .calendar-btn i { font-size: 14px; }
    .calendar-btn span { font-size: 7px; }

    .main-container { padding: 10px; }
    .content-area { padding: 0; }
    
    /* Match Detail Hero */
    .match-detail-container { margin: 0; border-radius: 0; }
    .detail-header { padding: 15px 10px; }
    .detail-teams { 
        display: grid !important; 
        grid-template-columns: 1fr auto 1fr !important; 
        gap: 10px !important; 
        align-items: center !important; 
    }
    .detail-team { text-align: center; }
    .detail-team img { width: 40px; height: 40px; margin-bottom: 5px; }
    .detail-team h2 { font-size: 12px; line-height: 1.2; margin: 0; }
    .detail-score { font-size: 28px !important; }
    
    /* Tabs and Content */
    .detail-tabs { 
        overflow-x: auto; 
        justify-content: flex-start; 
        padding: 5px; 
        gap: 5px; 
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--border);
    }
    .tab-link { white-space: nowrap; padding: 10px 15px; font-size: 11px; }
    .tab-content { padding: 15px 10px; }

    /* Tables Responsibility */
    .col-hide-mobile { display: none !important; }
    
    .standings-table-wrapper, .scores-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* 20/08/2026 — qui c'era "margin: 0 -10px" con "padding: 0 10px" a
           compensare. Il trucco allinea quello che si vede DENTRO, ma la scatola
           resta 20px piu' larga del genitore: 10px sporgono a destra, ed e'
           esattamente il "leggero spostamento" che restava sulla classifica da
           telefono. Tolti tutti e due: ora il contenitore sta nei suoi confini
           come ogni altro blocco della pagina. */
        margin: 0;
        padding: 0;
    }
    
    /* 20/08/2026 — questo min-width: 450px era l'unica larghezza sopra i 380px in
       tutto il foglio, e su un telefono da 390 allargava la pagina intera: veniva
       tagliata anche l'intestazione, non solo la tabella. Serviva quando la
       classifica mostrava nove colonne; ora .col-hide-mobile ne lascia tre (#,
       squadra, punti) e ne bastano 250. Le tabelle restano comunque dentro un
       contenitore che scorre, quindi se una fosse larga scorre lei, non la pagina. */
    .standings-table-modern, .scores-container table {
        min-width: 0;
        width: 100%;
    }

    /* Pitch and Lineups */
    .pitch-container { max-width: 100%; height: auto; min-height: 350px; }
    .player-on-pitch { width: 45px; }
    .player-on-pitch img { width: 22px; height: 22px; }
    .player-name { font-size: 7px; padding: 1px 2px; }
    
    .substitutes-container { grid-template-columns: 1fr; gap: 15px; }
    
    /* AI and Widgets */
    .ai-box { padding: 15px !important; gap: 10px !important; }
    .ai-box-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; }
    .ai-box-advice { font-size: 14px !important; }

    .live-now-calendar-btn { display: none !important; }
}

/* Football Field Styles */
.pitch-container { background: #2e7d32; border: 4px solid white; border-radius: 15px; position: relative; width: 100%; max-width: 380px; aspect-ratio: 2/3; margin: 30px auto; overflow: hidden; box-shadow: inset 0 0 100px rgba(0,0,0,0.2); }
.pitch-line { position: absolute; border: 2px solid rgba(255,255,255,0.5); }
.pitch-center-circle { width: 100px; height: 100px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pitch-center-line { width: 100%; top: 50%; left: 0; }
.pitch-penalty-area-top { width: 60%; height: 15%; top: 0; left: 20%; border-top: none; }
.pitch-penalty-area-bottom { width: 60%; height: 15%; bottom: 0; left: 20%; border-bottom: none; }
.player-on-pitch { position: absolute; display: flex; flex-direction: column; align-items: center; width: 60px; transform: translate(-50%, -50%); z-index: 10; }
.player-on-pitch img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.player-on-pitch .player-name { font-size: 8px; font-weight: 800; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); text-align: center; margin-top: 4px; white-space: nowrap; background: rgba(0,0,0,0.4); padding: 1px 4px; border-radius: 4px; }
.player-on-pitch .player-number { position: absolute; top: -8px; right: 5px; background: var(--accent); color: var(--primary); font-size: 8px; font-weight: 900; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid white; }
.tab-content { display: none; padding: 30px; }
.tab-content.active { display: block; }



@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; gap: 10px; }
    .substitutes-container { grid-template-columns: 1fr; gap: 20px; }
    .tab-content { padding: 15px; }
    .timeline::before { left: 20px; }
    .event-item { flex-direction: row; text-align: left; }
    .event-home, .event-away { text-align: left; padding: 0 0 0 50px; }
    .event-time { position: absolute; left: 5px; top: 0; }
    .detail-team img { width: 50px; height: 50px; }
    .detail-team h2 { font-size: 16px; }
}



/* Advanced Goal Notifications V2 */
#goal-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    align-items: flex-end;
}

.goal-notification {
    background: #ffffff;
    border-radius: 16px;
    width: 320px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 1px solid #eef2f1;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.goal-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--gradient);
}

.goal-notif-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.notif-logo {
    height: 24px;
    width: auto;
}

.goal-notif-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.goal-notif-match {
    font-size: 16px;
    font-weight: 700;
    color: #1f2724;
    margin-bottom: 10px;
}

.goal-notif-score {
    font-size: 32px;
    font-weight: 900;
    color: #1f2724;
    background: #f7f9f8;
    display: inline-block;
    padding: 4px 16px;
    border-radius: 12px;
    letter-spacing: -1px;
}

.goal-notif-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #98a3a0;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.goal-notif-close:hover {
    color: #4c5551;
}

.blink-red {
    color: #ff3366;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

/* Goal notification close button */
.goal-notif-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 16px;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.goal-notif-close:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: #1f2724;
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    max-width: 320px;
}

.toast i {
    font-size: 16px;
    color: var(--primary);
}

@keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 600px) {
    #goal-notification-container {
        left: 10px;
        bottom: 10px;
        right: 10px;
    }
    .goal-notification {
        min-width: unset;
        width: 100%;
    }
}

/* Team Search Styles - Integrated */
.search-box-container {
    position: relative;
}

.search-box-container .input-wrapper {
    position: relative;
    width: 100%;
}

#team-search-input {
    width: 100%;
    padding: 10px 15px 10px 38px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #f7f9f8;
    font-size: 13px;
    color: var(--text);
    transition: all 0.2s;
    outline: none;
}

#team-search-input::placeholder {
    color: var(--text-light);
    opacity: 0.6;
}

#team-search-input:focus {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.1);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 14px;
    pointer-events: none;
}

#team-search-input:focus + .search-icon {
    color: var(--accent);
}

.search-loading-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid #eef2f1;
    border-top: 2px solid var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.05);
    z-index: 10002; /* Sopra la header sticky */
    max-height: 400px;
    overflow-y: auto;
    display: none;
    padding: 8px 0;
    backdrop-filter: blur(10px);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1f2724;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #eef2f1;
}

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

.search-result-item:hover {
    background: #f7f9f8;
    padding-left: 20px;
}

.search-result-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #f7f9f8;
    border-radius: 8px;
    padding: 4px;
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.search-result-item .team-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.search-result-item .team-country {
    font-size: 11px;
    color: #69736f;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.search-no-results {
    padding: 30px 20px;
    text-align: center;
    color: #69736f;
    font-size: 14px;
    font-weight: 500;
}

.search-all-link {
    background: #f7f9f8 !important;
    border-bottom: 2px solid #e4e9e7;
}

.search-all-link:hover {
    background: #eef2f1 !important;
}

.search-spinner {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 15px;
    z-index: 15;
}

/* Bonus Bookmaker Widget Redesign */
.bonus-bookmaker-widget {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9f8 100%);
    border-radius: 24px;
    padding: 20px;
    border: 1px solid rgba(0, 255, 133, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.bonus-bookmaker-widget::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 255, 133, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.bonus-widget-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.bonus-icon-box {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 255, 133, 0.3);
}

.bonus-icon-box i {
    color: var(--primary);
    font-size: 20px;
}

.bonus-header-text h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bonus-header-text p {
    margin: 0;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
}

.bonus-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.bonus-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.bonus-card img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: contain;
    padding: 4px;
    background: #f7f9f8;
    border: 1px solid #eef2f1;
    flex-shrink: 0;
}

.bonus-card-blue { border-left: 4px solid var(--primary); }
.bonus-card-green { border-left: 4px solid var(--primary); }
.bonus-card-orange { border-left: 4px solid #f59e0b; }
.bonus-card-red { border-left: 4px solid var(--rosso); }
.bonus-card-purple { border-left: 4px solid var(--primary); }

.bonus-card:hover {
    transform: translateX(5px);
}

.bonus-card-blue:hover { border-color: var(--primary); background: rgba(15, 118, 110, 0.02); box-shadow: 0 8px 20px rgba(15, 118, 110, 0.12); }
.bonus-card-green:hover { border-color: var(--primary); background: rgba(16, 185, 129, 0.02); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.12); }
.bonus-card-orange:hover { border-color: #f59e0b; background: rgba(245, 158, 11, 0.02); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12); }
.bonus-card-red:hover { border-color: var(--rosso); background: rgba(239, 68, 68, 0.02); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12); }
.bonus-card-purple:hover { border-color: var(--primary); background: rgba(15, 118, 110, 0.02); box-shadow: 0 8px 20px rgba(15, 118, 110, 0.12); }

.bm-name {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
}

.bm-bonus {
    display: inline-block;
    font-size: 11px;
    color: var(--accent);
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(5, 150, 105, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 2px;
}

.bonus-card-blue .bm-bonus { color: var(--primary); background: rgba(15, 118, 110, 0.08); }
.bonus-card-green .bm-bonus { color: var(--primary); background: rgba(16, 185, 129, 0.08); }
.bonus-card-orange .bm-bonus { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.bonus-card-red .bm-bonus { color: var(--rosso); background: rgba(239, 68, 68, 0.08); }
.bonus-card-purple .bm-bonus { color: var(--primary); background: rgba(15, 118, 110, 0.08); }

.news-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.news-sidebar-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

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

.news-sidebar-item:hover {
    transform: translateX(3px);
}

.news-sidebar-img {
    width: 60px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.news-sidebar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-sidebar-info {
    flex: 1;
    min-width: 0;
}

.news-sidebar-date {
    display: block;
    font-size: 10px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 2px;
}

.news-sidebar-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.news-sidebar-title * {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: inherit !important;
    text-transform: none !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.btn-view-all-news {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px;
    background: #f7f9f8;
    border: 1px solid #e4e9e7;
    border-radius: 8px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view-all-news:hover {
    background: var(--primary);
    color: white;
}

.bonus-footer-info {
    text-align: center;
    margin-top: 15px;
    font-size: 10px;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Match of the Day Widget */
.match-of-the-day-widget {
    background: linear-gradient(135deg, var(--primary) 0%, #0a3733 100%);
    color: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 1px solid rgba(0, 255, 133, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.match-of-the-day-widget:hover {
    background: linear-gradient(135deg, var(--primary) 0%, #0b5b55 100%);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-color: var(--accent);
}

.match-of-the-day-widget::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 255, 133, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

.match-of-the-day-widget .widget-title {
    color: var(--accent);
    border-bottom-color: rgba(0, 255, 133, 0.5);
    margin-bottom: 15px;
    padding-bottom: 8px;
    font-size: 14px;
    letter-spacing: 1px;
}

.match-of-the-day-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.match-of-the-day-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.motd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.motd-league-flag {
    width: 20px;
    height: 15px;
    object-fit: contain;
    border-radius: 2px;
}

.motd-league-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.motd-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.motd-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.motd-team img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.motd-team span {
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.motd-score-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
}

.motd-time {
    font-size: 24px;
    font-weight: 800;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
}

.motd-date {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
}

.motd-status {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.motd-status.finished {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

.motd-status.live {
    background: var(--live);
    color: white;
    animation: pulse 2s infinite;
}

.motd-final-score, .motd-live-score {
    font-size: 23px;
    font-weight: 800;
    font-family: 'IBM Plex Mono', monospace;
    color: white;
}

/* Responsive adjustments for Match of the Day Widget */
@media (max-width: 850px) {
    .motd-teams {
        gap: 5px; /* Reduce gap between teams and score */
    }

    .motd-team {
        gap: 4px; /* Reduce gap between logo and team name */
    }

    .motd-team img {
        width: 30px; /* Smaller logos */
        height: 30px;
    }

    .motd-team span {
        font-size: 11px; /* Smaller team names */
    }

    .motd-score-time {
        gap: 2px; /* Reduce gap in score/time section */
    }

    .motd-time {
        font-size: 18px; /* Smaller time font size */
    }

    .motd-final-score, .motd-live-score {
        font-size: 25px; /* Almeno 25px come richiesto */
    }

    .motd-status {
        font-size: 10px; /* Smaller status font size */
        padding: 2px 6px;
    }

    .motd-odd-pill {
        padding: 6px 10px; /* Smaller odds pills */
        font-size: 12px;
        gap: 3px;
    }

    .motd-odd-pill span {
        font-size: 9px;
    }
}

.motd-odds {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.motd-odd-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 255, 133, 0.15);
    color: white;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(0, 255, 133, 0.3);
    transition: all 0.2s;
}

.motd-odd-pill span {
    font-size: 11px;
    font-weight: 800;
    opacity: 0.7;
}

.motd-odd-pill strong {
    color: var(--accent);
}

.motd-odd-pill.empty {
    opacity: 0.5;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.2);
}

.match-of-the-day-link:hover .motd-odd-pill {
    background: rgba(0, 255, 133, 0.25);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 255, 133, 0.2);
}

/* Top Shots Widget */
.top-shots-widget {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
    border-radius: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 51, 102, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.top-shots-widget::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 51, 102, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.top-shots-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.top-shots-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #ff3366 0%, #ff1a53 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(255, 51, 102, 0.3);
}

.top-shots-icon i {
    color: white;
    font-size: 20px;
}

.top-shots-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    word-break: break-word;
}

.top-shots-title p {
    margin: 0;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
}

.top-shots-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.top-shot-card {
    display: block;
    background: white;
    border-radius: 18px;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.top-shot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
    border-color: rgba(255, 51, 102, 0.3);
}

.top-shot-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-shot-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rank-badge {
    position: absolute;
    top: -10px;
    left: 15px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

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

.ts-team.home {
    justify-content: flex-end;
    text-align: right;
}

.ts-team.away {
    justify-content: flex-start;
    text-align: left;
}

.ts-team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.ts-team span {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    background: #f7f9f8;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid #eef2f1;
}

.ts-score {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 800;
    font-size: 15px;
    color: var(--primary);
    line-height: 1;
}

.ts-status {
    font-size: 9px;
    font-weight: 700;
    color: var(--rosso);
    margin-top: 4px;
}

.ts-stat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffebeb 100%);
    padding: 8px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 51, 102, 0.1);
}

.ts-stat-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: #ff3366;
}

.ts-stat-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .ts-team span {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .ts-team span {
        display: none;
    }
    .ts-team img {
        width: 32px;
        height: 32px;
    }
    .ts-score-box {
        min-width: 60px;
    }
    .ts-stat-badge {
        padding: 6px 12px;
    }
    .ts-stat-value {
        font-size: 16px;
    }
    /* Animazione per il lampeggio del punteggio */
@keyframes scoreFlash {
    0% { background-color: transparent; }
    50% { background-color: var(--accent); color: var(--primary); } /* Assumendo --accent sia un colore brillante e --primary scuro */
    100% { background-color: transparent; }
}

.score-flash {
    animation: scoreFlash 1s ease-in-out 3; /* Lampeggia 3 volte in 3 secondi */
    border-radius: 4px; /* Opzionale: per un aspetto più morbido */
    padding: 2px 4px; /* Opzionale: per rendere visibile lo sfondo */
}

/* Animazione per il lampeggio dell'icona del pallone */
@keyframes footballFlash {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; color: var(--accent); } /* Rende l'icona leggermente più grande e cambia colore */
    100% { transform: scale(1); opacity: 1; }
}

.match-arrow.active i.fa-futbol {
    animation: footballFlash 0.5s ease-in-out 6; /* Lampeggia 6 volte in 3 secondi */
}
}

/* Sidebar Campionati Style - New Unique Names */
.side-leagues-box {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #eef2f1 !important;
    margin-bottom: 25px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

.side-leagues-title {
    background: #ffffff !important;
    color: #4c5551 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #eef2f1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.side-leagues-title i {
    color: var(--primary) !important;
    font-size: 14px !important;
}

.side-leagues-list, .side-leagues-list li, .side-leagues-container, .side-leagues-container li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.side-country-item {
    border-bottom: 1px solid #f7f9f8 !important;
}

.side-country-item:last-child {
    border-bottom: none !important;
}

.side-country-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #fff !important;
    cursor: pointer !important;
}

.side-country-header:hover {
    background: #f7f9f8 !important;
}

.side-country-link {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 11px 15px 11px 20px !important;
    color: #363f3c !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.side-country-flag {
    margin-right: 12px !important;
    border-radius: 2px !important;
    width: 16px !important;
    height: 12px !important;
    object-fit: cover !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.side-country-toggle {
    padding: 11px 20px !important;
    color: #ccd4d2 !important;
    transition: all 0.3s ease !important;
}

.side-country-header.active .toggle-icon {
    transform: rotate(90deg) !important;
    color: var(--primary) !important;
}

.side-leagues-container {
    background: #fafafa !important;
    display: none;
    border-top: 1px solid #f7f9f8 !important;
}

.side-league-link {
    display: block !important;
    padding: 9px 20px 9px 48px !important;
    font-size: 12px !important;
    color: #69736f !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    border-left: 3px solid transparent !important;
}

.side-league-link:hover {
    color: var(--primary) !important;
    background: #eef2f1 !important;
    padding-left: 52px !important;
}

.side-league-link.active {
    color: var(--primary) !important;
    font-weight: 700 !important;
    background: #eef2f1 !important;
    border-left-color: var(--primary) !important;
}

/* Favorites Section Styling */
.favorite-group {
    border: 1px solid #ffc107 !important;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px !important;
}

.favorite-group .league-header {
    border-bottom: none;
}

/* Footer - Moved to footer.css */


/* Responsive Ads */
.responsive-ad-wrapper { 
    width: 100%; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    margin: 15px 0; 
} 
.responsive-ad-content { 
    display: inline-block; 
    transform-origin: top center; 
    position: relative;
    max-width: none !important;
}

.responsive-ad-content * {
    max-width: none !important;
}

/* Bookmaker Carousel */
.bm-carousel-container {
    width: 100%;
    margin: 20px 0;
    padding: 0 10px;
    overflow: hidden;
}

.gambling-warning-mini {
    font-size: 10px;
    color: #69736f;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 500;
}

.bm-carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 10px 0 10px 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bm-carousel-wrapper:active {
    cursor: grabbing;
}

/* Hide scrollbar */
.bm-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

/* Dots Navigation */
.bm-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.bm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccd4d2;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.bm-dot.active {
    background: var(--primary);
    transform: scale(1.2);
    width: 20px;
    border-radius: 4px;
}

.bm-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    width: max-content;
    padding: 0 10px;
}

.bm-card {
    flex: 0 0 160px;
    background: #ffffff;
    border: 1px solid #e4e9e7;
    border-radius: 12px;
    padding: 12px;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

/* News Carousel */
.news-carousel-container {
    width: 100%;
    margin: 20px 0;
    padding: 0 10px;
    overflow: hidden;
}

.section-title-mini {
    font-size: 14px;
    font-weight: 700;
    color: #1f2724;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title-mini i {
    color: var(--primary);
}

.news-carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 5px 0 10px 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.news-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    width: max-content;
    padding: 0 5px;
}

.news-card {
    flex: 0 0 220px;
    width: 220px;
    background: #ffffff;
    border: 1px solid #e4e9e7;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.news-image-box {
    width: 100%;
    height: 110px;
    overflow: hidden;
    background: #eef2f1;
}

.news-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

img[loading="lazy"] {
    content-visibility: auto;
}

.news-card:hover .news-image-box img {
    transform: scale(1.05);
}

.news-content {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-meta {
    font-size: 11px;
    color: #69736f;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-title {
    font-size: 14px;
    font-weight: 700;
    color: #111917;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-dots-container {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.news-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccd4d2;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.news-dot.active {
    background: var(--primary);
    width: 15px;
    border-radius: 3px;
}

.bm-logo-box {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.bm-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bm-bonus-tag {
    background: #f0fdf4;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    line-height: 1.2;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-cta {
    background: var(--primary);
    color: white !important;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 0;
    width: 100%;
    border-radius: 6px;
    transition: background 0.2s;
}

.bm-card:hover .bm-cta {
    background: var(--accent);
}

@media (max-width: 768px) {
    .bm-card {
        flex: 0 0 140px;
        padding: 10px;
    }
    .bm-bonus-tag {
        font-size: 9px;
    }
    /* Su mobile nascondiamo la scrollbar per pulizia, si usa il touch */
    .bm-carousel-wrapper::-webkit-scrollbar {
        display: none;
    }
}

/* --- MODERN MATCH OF THE DAY V2 --- */
/* Players Carousel */
.players-carousel-container {
    width: 100%;
    margin: 20px 0;
    padding: 0 10px;
    overflow: hidden;
}

.players-carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 5px 0 15px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.players-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.players-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    width: max-content;
    padding: 0 5px;
}

.player-card {
    flex: 0 0 140px;
    width: 140px;
    background: #ffffff;
    border: 1px solid #e4e9e7;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.player-rating {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 2;
}

.player-photo-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2f1;
    margin-bottom: 10px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.player-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-info {
    text-align: center;
    width: 100%;
}

.player-name {
    font-size: 12px;
    font-weight: 800;
    color: #111917;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-team {
    font-size: 10px;
    color: #69736f;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .player-card {
        flex: 0 0 120px;
        width: 120px;
        padding: 10px;
    }
    .player-photo-box {
        width: 50px;
        height: 50px;
    }
    .player-name {
        font-size: 11px;
    }
}

.match-of-the-day-widget-v2 {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 25px;
    border: 1px solid #eef2f1;
    position: relative;
    overflow: hidden;
}

.motd-v2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.motd-v2-badge {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.motd-v2-league {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #69736f;
}

.motd-v2-teams-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    gap: 15px;
}

.motd-v2-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.motd-v2-team img {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.motd-v2-team .team-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2724;
    line-height: 1.2;
}

.motd-v2-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.score-display {
    font-size: 28px;
    font-weight: 800;
    color: #111917;
    letter-spacing: -1px;
}

.score-display.live {
    color: var(--live);
}

.live-indicator {
    font-size: 10px;
    font-weight: 800;
    color: var(--live);
    margin-bottom: 4px;
    animation: pulse 2s infinite;
}

.time-display {
    font-size: 22px;
    font-weight: 800;
    color: #1f2724;
}

.date-label {
    font-size: 10px;
    font-weight: 700;
    color: #98a3a0;
    text-transform: uppercase;
}

.motd-v2-odds-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.motd-v2-odd-item {
    background: #f7f9f8;
    border: 1px solid #e4e9e7;
    border-radius: 12px;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s;
    text-decoration: none !important;
}

.motd-v2-odd-item:hover {
    background: #eef2f1;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.motd-v2-odd-item .label {
    font-size: 10px;
    font-weight: 700;
    color: #98a3a0;
    margin-bottom: 2px;
}

.motd-v2-odd-item .value {
    font-size: 15px;
    font-weight: 800;
    color: #1f2724;
}

.motd-v2-cta {
    text-align: center;
}

.btn-bet-now {
    display: inline-block;
    background: var(--primary);
    color: white !important;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 30px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn-bet-now:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(15, 118, 110, 0.4);
}

.motd-v2-warning {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eef2f1;
}

/* --- SQUADRE OGGI MODERN --- */
.squadre-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.squadre-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #f7f9f8;
    border-radius: 14px;
    text-decoration: none !important;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.squadre-item:hover {
    background: white;
    border-color: #e4e9e7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transform: translateX(5px);
}

.squadre-logo-box {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.squadre-logo-box img {
    max-width: 32px;
    max-height: 32px;
}

.squadre-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.squadre-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2724;
}

.squadre-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.follow-text {
    display: none !important;
}

.notif-badge {
    color: #98a3a0;
    font-size: 12px;
}

.squadre-item:hover .follow-text {
    background: var(--primary);
    color: white;
}

/* --- SQUADRE OGGI COMPACT --- */
.squadre-list.compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.squadre-item-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f7f9f8;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.squadre-item-v2:hover {
    background: white;
    border-color: #e4e9e7;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.squadre-main-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    flex-grow: 1;
    color: #1f2724;
}

.squadre-main-link img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.squadre-main-link .squadre-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.squadre-follow-btn {
    background: var(--primary);
    color: white;
    font-size: 14px;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.squadre-follow-btn:hover {
    background: var(--accent);
    transform: scale(1.05);
}

/* --- MODAL SYSTEM --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100005;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 24px;
    position: relative;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #eef2f1;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: #69736f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #e4e9e7;
    color: #111917;
}

.modal-header {
    margin-bottom: 20px;
}

.modal-header i {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 15px;
    display: block;
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: #111917;
    margin: 0;
}

.modal-content p {
    font-size: 14px;
    color: #69736f;
    line-height: 1.5;
    margin-bottom: 25px;
}

#follow-form .form-group {
    margin-bottom: 15px;
}

#follow-form input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 2px solid #e4e9e7;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s;
}

#follow-form input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1);
}

.btn-follow-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn-follow-submit:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(15, 118, 110, 0.4);
}

.modal-footer-text {
    font-size: 11px !important;
    color: #98a3a0 !important;
    margin-top: 20px;
    margin-bottom: 0 !important;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.gambling-warning-mini {
    font-size: 8px !important;
    color: #98a3a0 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    font-weight: 400 !important;
    opacity: 0.7 !important;
}

.gambling-warning-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 10px !important;
    background: #f7f9f8 !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
    opacity: 0.8 !important;
}

.gambling-warning-text {
    font-size: 8px !important;
    color: #69736f !important;
    line-height: 1.3 !important;
    text-align: left !important;
    max-width: 300px !important;
}

.adm-logo-container img {
    max-width: 80px !important;
    height: auto !important;
    filter: grayscale(1) !important;
    opacity: 0.6 !important;
}

@media (max-width: 768px) {
    .motd-v2-teams-row {
        gap: 10px;
    }
    .score-display {
        font-size: 24px;
    }
    .time-display {
        font-size: 18px;
    }
    .motd-v2-team .team-name {
        font-size: 12px;
    }
    .modal-content {
        padding: 25px 20px;
    }
}

/* ==========================================================================
   BIGLIETTI — il tratto verde, la luce che passa (20/08/2026)
   --------------------------------------------------------------------------
   Era un cerchio pieno con gradiente, ombra rgba(0, 91, 187) e un alone
   pulsante rgba(0, 123, 255) ogni due secondi: gli ultimi due blu del tema
   comprato, sopravvissuti al restyling perche' scritti in rgba e non come
   #6366f1, quindi nessuna sostituzione li ha presi.

   Ora e' il contorno di un biglietto disegnato a tratto (SVG in
   vivaticket_functions.php), senza sfondo, in petrolio, che ogni sette secondi
   si schiarisce verso #2dd4bf e torna indietro — la luce che passa. Non e' un
   lampeggio: la fase chiara dura un sesto del ciclo e ogni partita parte con
   un ritardo diverso, altrimenti una giornata di campionato pulsa in coro.
   ========================================================================== */
.vivaticket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--primary);
    text-decoration: none !important;
    animation: ticket-luce 7s ease-in-out infinite;
    transition: transform 0.2s ease, color 0.2s ease;
}

@keyframes ticket-luce {
    0%, 60%   { color: var(--primary); filter: drop-shadow(0 0 0 rgba(45, 212, 191, 0)); }
    70%       { color: #2dd4bf;        filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.5)); }
    82%, 100% { color: var(--primary); filter: drop-shadow(0 0 0 rgba(45, 212, 191, 0)); }
}

.vivaticket-btn:hover {
    transform: scale(1.12);
    color: #2dd4bf;
}

.vivaticket-btn .viva-ticket {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible; /* il drop-shadow non deve essere tagliato dal viewBox */
}

.vivaticket-btn .viva-text {
    display: none !important; /* Rimosso testo ovunque per default */
}

.vivaticket-btn .viva-text-visible {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
}

/* Pagina partita: sotto il conto alla rovescia, con l'aria attorno che prima
   non aveva — ci stava appiccicato. */
.vivaticket-btn.has-text {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    font-weight: 600;
    margin: 14px auto 6px;
}

/* Chi ha chiesto meno animazioni non vede passare niente: il colore resta
   petrolio fisso, com'e' per il puntino del vivo. */
@media (prefers-reduced-motion: reduce) {
    .vivaticket-btn { animation: none; color: var(--primary); }
}

/* Il biglietto nella riga della home: PRIMA del punteggio, come si legge
   l'informazione (dove si va, poi come e' finita).
   -------------------------------------------------------------------------
   Non e' una colonna della griglia ma un elemento sovrapposto, e la ragione e'
   strutturale: i due punteggi stanno DENTRO <a class="match-link">, uno per
   riga squadra, e un link dentro un link non e' HTML valido. Per avere una
   colonna vera fra i nomi e i punteggi bisognerebbe tirare i .score-item fuori
   dal link — che e' il markup che il polling del vivo riscrive a ogni gol.
   Sovrapporlo non tocca niente di tutto questo.

   Il rientro da destra e' la somma di quello che ha accanto: freccia 40 +
   padding del link 30 + larghezza minima del punteggio 20, piu' un po' d'aria.
   Se cambia una di quelle tre misure, va rifatto il conto anche qui. */
.match-wrapper { position: relative; }

.match-ticket-col {
    position: absolute;
    right: 96px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;               /* il link copre tutta la riga: senza, il clic va alla pagina partita */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .vivaticket-btn .viva-ticket {
        width: 18px;
        height: 18px;
    }

    .vivaticket-btn .viva-text-visible {
        font-size: 11px;
    }

    /* Freccia 30 invece di 40: il rientro scala di conseguenza.
       Sotto i 480 NON cambia ancora: li' la griglia e' 35 55 1 1fr 30, la
       colonna della freccia resta 30 e il conto e' lo stesso. Un rientro piu'
       corto a quel punto infilerebbe l'icona sotto il punteggio. */
    .match-ticket-col { right: 86px; }
}

/* ==========================================================================
   COERENZA SU TUTTO IL SITO — 20/08/2026
   --------------------------------------------------------------------------
   Le pagine erano nate in momenti diversi e usavano pulsanti, pillole e schede
   ognuna a modo suo: blu qui, viola la', angoli e ombre diverse. Questo blocco
   le riporta a un linguaggio solo, e sta in fondo a style.css perche' vinca
   sulle regole vecchie senza doverle riscrivere una per una.

   Regola del colore: PETROLIO per le azioni e lo stato attivo, AMBRA solo per
   gli evidenziatori (preferiti, "match del giorno", in evidenza), ROSSO solo
   per il vivo. Un'azione ambra e' un errore: l'ambra non chiede di essere
   premuta, segnala e basta.
   ========================================================================== */

/* --- azione principale --- */
.btn-primary,
.btn-follow-submit,
.btn-view-all-news,
.live-now-btn,
.tp-btn-follow-v2,
.squadre-follow-btn {
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease !important;
}
.btn-primary:hover,
.btn-follow-submit:hover,
.btn-view-all-news:hover,
.live-now-btn:hover,
.tp-btn-follow-v2:hover,
.squadre-follow-btn:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* --- azione secondaria: contorno, non riempita --- */
.btn-light,
.follow-team-btn,
.btn-refresh-p,
.btn-refresh-lineups {
    background: #ffffff !important;
    border: 1px solid #e4e9e7 !important;
    color: var(--primary) !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.btn-light:hover,
.follow-team-btn:hover,
.btn-refresh-p:hover,
.btn-refresh-lineups:hover {
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
}
/* il cerchietto "+" dentro SEGUI era blu */
.follow-team-btn i,
.follow-team-btn .fa-plus,
.squadre-follow-btn i {
    color: inherit !important;
    background: transparent !important;
}

/* --- linguette: sottolineatura, non pulsante ------------------------------
   Il riempimento pieno faceva sembrare la scheda attiva un bottone da premere,
   quando invece serve solo a dire dove sei. La sottolineatura lo dice con meno
   rumore, e su una barra di sei voci evita il blocco di colore. */
.nav-tab,
.tab-link {
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: #69736f !important;
    font-weight: 700 !important;
    transition: color .15s ease, border-color .15s ease !important;
}
.nav-tab:hover,
.tab-link:hover { color: #15191c !important; }
.nav-tab.active,
.tab-link.active {
    background: transparent !important;
    color: #15191c !important;
    border-bottom-color: var(--primary) !important;
}
/* la pillola del vivo resta piena: li' il colore e' informazione, non stato */
.match-status-pill.is-live {
    background: var(--live) !important;
    color: #ffffff !important;
    border-color: var(--live) !important;
}

/* --- evidenziatori: ambra, mai per le azioni --- */
.motd-v2-badge,
[class*="match-del-giorno"],
.badge-featured {
    background: var(--secondary-light) !important;
    color: var(--secondary-dark) !important;
    border: none !important;
    font-weight: 800 !important;
}
.fa-star, .fa-bookmark { color: var(--secondary) !important; }

/* --- schede: stesso raggio e stessa ombra ovunque --- */
.widget,
.stat-card,
.league-group,
.card,
.news-card {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
    border: 1px solid #e6e9ec !important;
}

/* --- collegamenti --- */
a { color: var(--primary); }
a:hover { color: var(--accent); }

/* --- IL PUNTINO DEL LIVE, 20/08/2026 --------------------------------------
   Il markup <span class="live-dot"> esisteva in undici punti fra home, pagina
   partita e match-details.js, ma una regola CSS non c'e' mai stata: erano span
   vuoti, larghi zero, invisibili. Nessuno se n'era accorto perche' finche' il
   punteggio era rosso il live si vedeva lo stesso.

   Ora che il punteggio e' petrolio come tutto il resto, questo puntino e' il
   segnale che dice "si sta giocando": e' l'unico rosso di una riga viva, ed e'
   l'unica cosa in pagina che si muove. Il minuto NON lampeggia di proposito —
   un numero che si spegne e si riaccende e' difficile da leggere proprio mentre
   lo stai leggendo. */
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rosso);
    margin-right: 5px;
    flex-shrink: 0;
    vertical-align: middle;
    animation: live-dot-batte 1.4s ease-in-out infinite;
}

@keyframes live-dot-batte {
    /* Il minimo e' 0.55, non 0.3: quando il rosso era sparso su pillola, minuto e
       punteggio un puntino che quasi spariva non toglieva niente. Ora che e' l'UNICO
       segnale del "si sta giocando", per meta' del battito non deve diventare
       illeggibile. Pulsa l'alone, il puntino resta sempre solido. */
    0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(225, 29, 72, 0); }
}

/* Chi nel sistema ha chiesto meno animazioni non deve trovarsi venti puntini
   che pulsano all'infinito: resta rosso e fermo, che basta a distinguerlo. */
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

/* ============================================================================
   LA CLASSIFICA STA DENTRO LO SCHERMO — 20/08/2026
   Tobia: "per vedere il punteggio devo scorrere". La colonna PT finiva oltre il
   bordo destro perche' la tabella si dimensionava sul CONTENUTO (nomi squadra
   lunghi, colonne con larghezze fisse) e non sul contenitore.
   table-layout: fixed + width: 100% ribalta la regola: le colonne si spartiscono
   la larghezza disponibile e la tabella NON PUO' superarla, qualunque cosa ci
   sia dentro. Il nome squadra si accorcia con i puntini invece di spingere.
   ========================================================================== */
@media (max-width: 850px) {
    .standings-table {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Posizione e punti hanno larghezza propria; il nome si prende il resto. */
    .standings-table th:nth-child(1),
    .standings-table td:nth-child(1) { width: 36px !important; padding-left: 4px !important; padding-right: 0 !important; }

    .standings-table th:nth-child(3),
    .standings-table td:nth-child(3) { width: 46px !important; padding-left: 0 !important; padding-right: 6px !important; }

    /* max-width: 0 con table-layout: fixed e' il modo di dire "prenditi quello
       che avanza e taglia col puntino se non basta". */
    .standings-table td:nth-child(2) {
        max-width: 0 !important;
        overflow: hidden;
    }
    .standings-table td:nth-child(2) a { min-width: 0; }
    .standings-table td:nth-child(2) span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .standings-table td:nth-child(2) img { flex-shrink: 0; }
}

/* ============================================================================
   "SI TORNA IN CAMPO FRA..." — 20/08/2026
   Al posto di "Nessun match disponibile per questa selezione", che su una pagina
   campionato in agosto e' la scritta di un sito lasciato a se stesso. Si mostra
   il conto alla rovescia alla PROSSIMA PARTITA e non alla data d'inizio
   stagione: cosi' vale anche per la sosta invernale e per quella delle nazionali.
   ========================================================================== */
.attesa-box {
    background: var(--card-bg);
    border: 1px solid #eef2f1;
    border-radius: 16px;
    padding: 34px 28px 28px;
    text-align: center;
}

.attesa-titolo {
    font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    color: #98a3a0; margin-bottom: 22px;
}
.attesa-titolo i { color: var(--primary); margin-right: 5px; }

.attesa-conto { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.attesa-unita {
    background: #f7f9f8; border: 1px solid #eef2f1; border-radius: 12px;
    padding: 12px 6px 10px; min-width: 78px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.attesa-n {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 30px; font-weight: 700; color: var(--primary);
    line-height: 1; letter-spacing: -1px;
    /* cifre di larghezza uguale: senza, i numeri ballano a ogni secondo */
    font-variant-numeric: tabular-nums;
}
.attesa-e { font-size: 9px; font-weight: 800; letter-spacing: 0.8px; color: #98a3a0; text-transform: uppercase; }

.attesa-partita {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 26px; padding: 14px 18px;
    background: var(--primary-light); border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 12px; text-decoration: none; transition: background .15s;
}
.attesa-partita:hover { background: #d5ebe8; }
.attesa-squadra { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: #1f2724; flex: 1; min-width: 0; }
.attesa-squadra.casa { justify-content: flex-end; text-align: right; }
.attesa-squadra.ospite { justify-content: flex-start; text-align: left; }
.attesa-squadra img { flex-shrink: 0; object-fit: contain; }
.attesa-vs { color: #98a3a0; font-weight: 800; flex-shrink: 0; }

.attesa-data { margin-top: 14px; font-size: 12.5px; color: #69736f; }
.attesa-via { font-size: 18px; font-weight: 800; color: var(--primary); padding: 14px 0; }

.attesa-box.vuoto { padding: 46px 28px; }
.attesa-box.vuoto .attesa-titolo { margin-bottom: 10px; }
.attesa-box.vuoto .attesa-data { max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.65; }

/* Il guasto non e' "nessuna partita": si distingue anche a colpo d'occhio,
   altrimenti un lettore lo legge come una competizione vuota. 25/08/2026. */
.attesa-guasto { border-color: #fde68a; background: #fffbeb; }
.attesa-guasto .attesa-titolo { color: #92400e; }
.attesa-guasto .attesa-titolo i { color: #d97706; }
.attesa-riprova {
    display: inline-block; padding: 9px 18px;
    border: 1px solid rgba(15, 118, 110, 0.22); border-radius: 10px;
    background: var(--primary-light); color: var(--primary);
    font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.attesa-riprova:hover { background: #d5ebe8; }

@media (max-width: 560px) {
    .attesa-box { padding: 26px 16px 22px; }
    .attesa-conto { gap: 7px; }
    .attesa-unita { min-width: 0; flex: 1; padding: 10px 2px 8px; }
    .attesa-n { font-size: 23px; }
    .attesa-partita { gap: 9px; padding: 12px; }
    .attesa-squadra { font-size: 12.5px; gap: 6px; }
    .attesa-squadra img { width: 22px; height: 22px; }
}



/* ============================================================================
   LE SCHEDE DELLA PAGINA PARTITA — stesura definitiva, 20/08/2026
   Tre tentativi per arrivarci, e il difetto era sempre lo stesso: flex: 1 1 0
   imponeva a tutte le schede la STESSA larghezza, cosi' "FORMAZIONI" (che ne
   chiede 116) veniva schiacciata in 110 e finiva addosso alla vicina, mentre
   "H2H" sprecava spazio. Con flex: 1 1 auto ognuna prende quello che le serve e
   si divide l'avanzo: il totale e' 514px su 660 disponibili.
   Le icone sono SVG a tratto disegnate qui: Font Awesome gratuito ha solo il set
   pieno, che accanto a un testo sottile pesa troppo. Ereditano currentColor,
   quindi seguono da sole la scheda attiva.
   ========================================================================== */
.detail-tabs {
    display: flex !important;
    gap: 2px;
    background: #f4f7f6 !important;
    padding: 5px !important;
    border: none !important;
    border-bottom: 1px solid #e9edec !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 60px;
    z-index: 40;
}
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tabs.incollata { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; }

.tab-link {
    /* auto e non 0: le corte restano corte, le lunghe respirano */
    flex: 1 1 auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 10px !important;
    font-family: 'Sora', sans-serif;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: #7c8783 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.tab-ico { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; }

.tab-link:hover { color: #24302c !important; background: rgba(255, 255, 255, .6) !important; }

.tab-link.active {
    background: #ffffff !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 2px rgba(15, 25, 23, .07), 0 2px 6px rgba(15, 25, 23, .05) !important;
}
.tab-link.active .tab-ico { opacity: 1; }

@media (max-width: 768px) {
    .detail-tabs { padding: 4px !important; top: 56px; }
    .tab-link {
        flex: 0 0 auto !important;
        padding: 9px 11px !important;
        font-size: 11px !important;
        letter-spacing: .45px;
        gap: 6px;
    }
    .tab-ico { width: 14px; height: 14px; }
}

/* ------------------------------------------------------------------ sponsor
   Lo spazio venduto direttamente, 21/08/2026. Vedi display_sponsor()
   in ads_functions.php.

   L'occhiello "Sponsor" non e' decorazione: e' l'etichetta che distingue un
   contenuto pagato da uno editoriale. Va lasciata.

   Niente altezza fissa: il banner in testa e' pensato 970x250 ma su telefono
   deve rimpicciolirsi invece di essere tagliato, e la colonna accetta sia
   300x250 sia 300x600. */
.sponsor-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 16px;
    text-align: center;
    line-height: 0;
}
.sponsor-box .sponsor-eyebrow {
    display: block;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9aa4a0;
    line-height: 1;
    margin-bottom: 8px;
    text-align: left;
}
.sponsor-box .sponsor-link {
    display: inline-block;
    max-width: 100%;
}
.sponsor-box .sponsor-link + .sponsor-link {
    margin-top: 10px;
}
.sponsor-box img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
/* Il codice HTML incollato (tipo = 'html' nel pannello Sponsor). La scatola ha
   line-height: 0 perche' nasce per contenere una sola immagine: qui va rimesso,
   altrimenti un banner fatto di testo si sovrappone. Il resto e' contenimento:
   un tag di rete che dichiara 970 px non deve sfondare il telefono. */
.sponsor-box .sponsor-html {
    line-height: normal;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}
.sponsor-box .sponsor-html + .sponsor-html {
    margin-top: 10px;
}
.sponsor-box .sponsor-html img,
.sponsor-box .sponsor-html iframe {
    max-width: 100%;
    display: inline-block;
}
.sponsor-testa {
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .sponsor-box { padding: 8px; }
}

/* La legenda delle zone di classifica. 22/08/2026, vedi classifica_zone.php.
   Le etichette sono in italiano e una sola per zona: prima si stampava la
   descrizione cruda dell'API in maiuscolo, una riga per ogni variante
   ("PROMOTION - SERIE B (PLAY OFFS: QUARTER-FINALS)"). */
.cl-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 16px 20px;
    background: #f7f9f8;
    border-top: 1px solid var(--border);
}
.cl-legenda span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-light);
}
.cl-legenda i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* LA RIGA SPONSOR — 22/08/2026
   Occupa lo spazio di una partita e sta dentro l'elenco, non sopra.
   Le colonne sono COPIATE da .match-row e non scelte a occhio: e' cosi' che
   "SPONSOR" cade dove cade l'orario, la linetta dove cade la linetta e il
   marchio dove cadono gli stemmi. La prima colonna resta vuota, come la stella.
   I tre segni che dicono "questo e' un annuncio" — barretta petrolio, fondo
   appena diverso, etichetta — restano: una riga identica a un risultato
   sarebbe pubblicita' travestita da contenuto. */
.sp-riga {
    display: grid;
    grid-template-columns: 40px 70px 1px 1fr 40px;
    align-items: center;
    gap: 0;
    padding: 10px 0;
    /* Misurata in pagina, non dedotta: la riga partita e' 71px sopra i 992,
       63px fra 851 e 992, 69px sotto gli 850, perche' a ogni scalino cambiano
       il padding di .match-row e la dimensione degli stemmi. E' un minimo e non
       un'altezza fissa: se il testo va a capo la riga cresce, come cresce una
       partita con i nomi lunghi. */
    min-height: 71px;
    border-bottom: 1px solid var(--border);
    /* La sfumatura al posto della barretta da 3px. Scelta di Tobia il
       22/08/2026 fra sei alternative provate sulla riga vera.
       Fa la stessa cosa della barra — dire che questa riga non e' un
       risultato — ma senza il taglio netto: il petrolio si accende sul bordo
       e si spegne prima del marchio, quindi la riga sembra evidenziata e non
       marcata. Resta un segno di riconoscimento, che e' cio' che serve perche'
       la pubblicita' sia dichiarata. */
    background: linear-gradient(90deg,
        rgba(15, 118, 110, .13) 0%,
        rgba(15, 118, 110, .03) 22%,
        #fbfdfc 45%);
    position: relative;
    text-decoration: none;
    color: inherit;
}
/* Il passaggio del mouse alza la stessa sfumatura invece di sostituirla con
   un colore piatto: un background secco qui cancellerebbe il gradiente. */
.sp-riga:hover {
    background: linear-gradient(90deg,
        rgba(15, 118, 110, .20) 0%,
        rgba(15, 118, 110, .06) 22%,
        #f4faf9 45%);
}

.sp-riga-eti {
    /* Centrata su TUTTA la fascia sinistra, colonna della stella compresa:
       centrarla nella sola colonna dell'orario la faceva sembrare spostata a
       destra, perche' accanto non c'e' nessuna stella a bilanciarla. */
    grid-column: 1 / 3;
    text-align: center;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--primary);
    text-transform: uppercase;
    white-space: nowrap;
}

/* identica a .match-separator: stessa larghezza, stessa altezza, stesso grigio */
.sp-riga-sep { width: 1px; height: 35px; background-color: #eee; }

/* I 30px sono il padding di .match-link: senza, il marchio parte trenta pixel
   piu' a sinistra degli stemmi.
   Il rientro negativo del marchio non e' un ritocco a occhio. Il nome della
   squadra cade a stemma + 12px dall'inizio della colonna, cioe' a 34px; il
   marchio dello sponsor e' 34px, piu' largo di uno stemma. Se partisse dove
   partono gli stemmi il titolo finirebbe a 46px e sarebbe l'unico testo della
   pagina fuori squadra. Il marchio quindi sborda di 8px a sinistra e il titolo
   torna esattamente sulla colonna dei nomi. */
.sp-riga-corpo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 30px;
    min-width: 0;
}
.sp-riga-corpo > .sp-riga-logo { margin-left: -8px; }

/* Fondo BIANCO, non nero. I marchi veri sono disegnati per il bianco: quello
   di Cisalfa e' nero su trasparente e su una scatola scura sparirebbe del
   tutto, senza che niente lo segnali. La scatola scura resta solo dove non
   c'e' un'immagine e si stampano le iniziali, che sul bianco non si
   leggerebbero. */
.sp-riga-logo {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    padding: 2px;
    display: flex; align-items: center; justify-content: center;
}
.sp-riga-logo img { width: 100%; height: 100%; object-fit: contain; }
.sp-riga-sigla {
    background: #111917;
    border-color: #111917;
    color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: -.3px;
}

.sp-riga-testo { min-width: 0; }
.sp-riga-titolo {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1.25;
    white-space: normal;
}
.sp-riga-sotto {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sp-riga-cta {
    display: flex; justify-content: center; align-items: center;
    color: #e5e5e5;
    font-size: 14px;
}

/* gli stessi due scalini di .match-row, colonne comprese */
@media (max-width: 992px) {
    .sp-riga { grid-template-columns: 35px 72px 1px 1fr 30px; min-height: 63px; padding: 8px 0; }
    /* qui lo stemma e' 20px, quindi il nome cade a 32 e non a 34 */
    .sp-riga-corpo { gap: 6px; }
}
@media (max-width: 850px) {
    .sp-riga { grid-template-columns: 35px 55px 1px 1fr 30px; min-height: 69px; padding: 10px 0; }
    /* .match-link scende a 20px di padding sotto gli 850: se la riga sponsor
       restasse a 30 il marchio sarebbe dieci pixel piu' a destra degli stemmi */
    .sp-riga-corpo { padding: 0 20px; gap: 6px; }
    .sp-riga-eti { font-size: 8.5px; letter-spacing: .3px; }
    .sp-riga-logo { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 7px; }
    .sp-riga-titolo { font-size: 13px; }
    .sp-riga-sotto { font-size: 12px; }
}


/* ==========================================================================
   IL GOL — la scheda che compare quando una squadra segna (27/08/2026)
   ==========================================================================
   Semplice: scheda bianca, una striscia verde a sinistra, GOOOL in alto e i
   due loghi col punteggio. Chi ha segnato e' scritto in verde, l'altra squadra
   resta grigia.

   La prima versione era tutta petrolio con le lettere che entravano una alla
   volta: troppo. La costruisce createGoalNotificationElement() in
   live-updates-v3.js. Vive cinque secondi, quanto la barra in fondo.
   ========================================================================== */

.gd-gol-card {
    width: 290px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border: 1px solid #e4e9e7;
    border-left: 5px solid #0f766e;
    box-shadow: 0 12px 30px rgba(15, 25, 23, 0.14);
    color: #1f2724;
    cursor: pointer;
}

.gd-gol-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px 0;
}

.gd-gol-marchio {
    font-family: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: -0.3px;
    color: #98a3a0;
}
.gd-gol-marchio span { color: #0f766e; }

.gd-gol-chiudi {
    font-size: 16px;
    line-height: 1;
    color: #b6bfbc;
}

.gd-gol-corpo { padding: 4px 14px 14px; }

/* la scritta lampeggia come quella nella lista: stesso gesto, stesso sito */
.gd-gol-titolo {
    font-family: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #0f766e;
    margin-bottom: 8px;
    animation: gd-gol-lampeggia 5s ease-in-out forwards;
}

@keyframes gd-gol-lampeggia {
    0%   { opacity: 0; transform: scale(0.85); }
    8%   { opacity: 1; transform: scale(1.06); }
    14%  { opacity: 1; transform: scale(1); }
    26%  { opacity: 0.2; }
    34%  { opacity: 1; }
    46%  { opacity: 0.2; }
    54%  { opacity: 1; }
    66%  { opacity: 0.2; }
    74%  { opacity: 1; }
    100% { opacity: 1; }
}

.gd-gol-partita {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gd-gol-sq {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gd-gol-sq:last-child { flex-direction: row-reverse; }

.gd-gol-sq img { width: 22px; height: 22px; object-fit: contain; }

.gd-gol-sq span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #69736f;
}

.gd-gol-sq.ha-segnato span { color: #0f766e; font-weight: 900; }

.gd-gol-punteggio {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 19px;
    font-weight: 900;
    color: #15191c;
    white-space: nowrap;
}

.gd-gol-marcatore {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #0f766e;
}

/* quanto le resta da vivere */
.gd-gol-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #0f766e;
    transform-origin: left center;
    animation: gd-gol-svuota 5s linear forwards;
}

@keyframes gd-gol-svuota {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 600px) {
    .gd-gol-card { width: 100%; }
    .gd-gol-titolo { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .gd-gol-titolo { animation: none; opacity: 1; }
}

/* ==========================================================================
   IL GOL nella lista partite — home, 28/08/2026
   ==========================================================================
   Scelta di Tobia dopo aver visto sei alternative in prova. La versione del
   27/08 (GOL rosso che lampeggiava dieci volte) e' stata tolta: dieci
   intermittenze in cinque secondi sono il linguaggio dell'allarme, e su una
   pagina dove i pallini live gia' pulsano diventava rumore su rumore.

   Adesso la riga SI ACCENDE: un pannello petrolio si infila SOTTO il
   contenuto e i testi passano al bianco. La riga non viene ricostruita, e'
   sempre lei — stella, colonnina Live/minuto, stemmi, nomi, punteggio
   restano dove sono. Cambiano solo i colori, quindi non si sposta niente e
   quando si spegne non c'e' nessun salto.

   Accanto al punteggio della squadra che ha segnato batte GOL sei volte, un
   battito ogni 0,95 s: 5,7 s di battiti, poi il pannello si dissolve in
   0,45 s. Fa 6.150 ms, ed e' il timeout che usa index.php per ripulire.

   Il pannello sta SOTTO il testo e non sopra: davanti avrebbe fatto il vero
   vetro smerigliato, ma per sei secondi quella riga non si sarebbe letta.
   ========================================================================== */

/* Il pannello ha bisogno che la riga sia il suo blocco contenitore. Si
   aggiunge solo mentre dura il gol: .match-ticket-col e' absolute e passa da
   .match-wrapper a .match-row, ma le due scatole sono larghe uguale e la
   riga non ha padding orizzontale, quindi l'icona Vivaticket non si muove. */
.match-row.gd-gol-sotto { position: relative; }

/* Il contenuto sale di un piano cosi' il pannello gli passa sotto. */
.gd-gol-sotto .match-fav,
.gd-gol-sotto .match-status-col,
.gd-gol-sotto .match-separator,
.gd-gol-sotto .match-link { position: relative; z-index: 1; }

.gd-gol-lastra {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
    animation: gd-gol-accende 0.3s ease-out both,
               gd-gol-spegne 0.45s ease-in 5.7s both;
}

@keyframes gd-gol-accende { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-gol-spegne  { from { opacity: 1; } to { opacity: 0; } }

/* I colori viaggiano insieme al pannello: stessa durata dell'accensione,
   cosi' il bianco non arriva prima del fondo petrolio. */
.match-row .team-name,
.match-row .score-item,
.match-row .m-time,
.match-row .m-minute,
.match-row .live-minute-badge,
.match-row .match-fav,
.match-row .match-separator,
.match-row .live-dot,
.match-row .team-info img {
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.gd-gol-acceso .team-name,
.gd-gol-acceso .score-item,
.gd-gol-acceso .m-minute,
.gd-gol-acceso .live-minute-badge { color: #ffffff !important; }
.gd-gol-acceso .m-time          { color: rgba(255, 255, 255, 0.85) !important; }
.gd-gol-acceso .match-fav       { color: rgba(255, 255, 255, 0.5) !important; }
.gd-gol-acceso .match-fav.active { color: var(--secondary) !important; }
.gd-gol-acceso .match-separator { background: rgba(255, 255, 255, 0.35) !important; }
.gd-gol-acceso .live-dot        { background: #ffffff !important; }
.gd-gol-acceso .ht-badge        { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }

/* Milan, Inter e Juve hanno lo stemma scuro: sul petrolio sparirebbero.
   Pastiglia bianca tonda dietro, ma solo mentre la riga e' accesa. */
.gd-gol-acceso .team-info img {
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff;
}

/* La parola, accanto al punteggio della squadra che ha segnato. Sta in
   posizione assoluta dentro .team-row (che e' gia' relative), quindi non
   muove le misure di niente e le righe non ballano. */
.gd-gol-parola {
    position: absolute;
    right: 34px;
    top: 50%;
    margin-top: -6px;
    transform-origin: right center;
    font-family: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    z-index: 2;
    animation: gd-gol-batte 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 6 both;
}

@keyframes gd-gol-batte {
    0%   { opacity: 0; transform: scale(0.72); filter: blur(7px); letter-spacing: 0.04em; }
    30%  { opacity: 1; transform: scale(1.12); filter: blur(0);   letter-spacing: 0.16em; }
    58%  { opacity: 1; transform: scale(1);    filter: blur(0);   letter-spacing: 0.16em; }
    100% { opacity: 0; transform: scale(1);    filter: blur(0);   letter-spacing: 0.22em; }
}

/* Il punteggio non si tocca: cambia il numero e basta. La regola di style.css
   e' `scoreBlink ... infinite !important` e senza questo `none` tornerebbe a
   pulsare per sempre. */
.match-row .score-item.score-flash,
.match-row .score-item.score-blink {
    animation: none !important;
}

@media (max-width: 600px) {
    /* La riga stretta ha .match-row a colonne piu' piccole: il punteggio si
       avvicina al bordo e la parola va tirata dentro. */
    .gd-gol-parola { right: 28px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .gd-gol-lastra { animation: gd-gol-accende 0.01s both, gd-gol-spegne 0.01s 6.14s both; }
    .gd-gol-parola { animation: none; opacity: 1; }
}

/* Il pulsante del suono, in fila con i filtri della home: un cerchio con
   dentro la sola icona. Spento e' grigio chiaro, acceso e' verde pieno e
   l'icona batte una volta. Vedi toggleAudio() in common.js. */
.audio-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e4e9e7;
    border-radius: 50%;
    background: #f7f9f8;
    color: #98a3a0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.audio-tab:hover {
    border-color: #0f766e;
    color: #0f766e;
    background: #ffffff;
}

.audio-tab:active { transform: scale(0.92); }

.audio-tab.e-acceso {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.audio-tab.e-acceso i {
    animation: gd-cassa-batte 0.5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes gd-cassa-batte {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   LA BARRA DEI FILTRI SUL TELEFONO — 27/08/2026
   ==========================================================================
   Prima erano tre riquadri grigi tutti uguali, con dentro "In Diretta (26)"
   a 11px, e quello scelto si distingueva solo per un bordino verde: su uno
   schermo da 390px non si capiva a colpo d'occhio dove si era.

   Adesso: tre pillole a larghezza uguale, quella scelta e' verde piena con
   il testo bianco. Su "Diretta" c'e' il pallino rosso che batte e il numero
   in un badge tondo, non fra parentesi. La parola "In" sparisce (la tiene
   .tab-in) e "programma" si prende la maiuscola da capitalize: cosi' il
   testo ci sta senza rimpicciolirlo fino a non leggerlo piu'.

   Il pulsante del suono resta in fila, tondo e piu' piccolo.
   ========================================================================== */

/* Sul desktop il pallino non serve: "In Diretta" e' gia' chiaro e la riga e'
   larga. Compare solo da 768px in giu'. */
.tab-pallino { display: none; }

.tab-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: #eef2f1;
    color: #0f766e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.nav-tab.active .tab-conta {
    background: #0f766e;
    color: #ffffff;
}

@media (max-width: 768px) {
    .nav-tabs-left {
        gap: 6px !important;
        align-items: center !important;
    }

    .nav-tab {
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        height: 36px !important;
        padding: 0 6px !important;
        background: #f4f6f5 !important;
        border: none !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #69736f !important;
        text-transform: capitalize !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        transition: background 0.2s ease, color 0.2s ease !important;
    }

    /* quella scelta si vede da lontano: verde pieno, non un bordino */
    .nav-tab.active {
        background: #0f766e !important;
        border: none !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(15, 118, 110, 0.28) !important;
    }

    /* la riga verde sotto la scheda scelta, sul telefono, non serve piu' */
    .nav-tab.active::after { display: none !important; }

    .tab-in { display: none !important; }

    .tab-pallino {
        display: inline-block !important;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #e11d48;
        flex: 0 0 auto;
        animation: gd-pallino-batte 1.6s ease-in-out infinite;
    }

    .nav-tab.active .tab-pallino {
        background: #ffffff;
    }

    .tab-conta {
        min-width: 17px;
        height: 17px;
        margin-left: 2px;
        background: #ffffff !important;
        color: #0f766e !important;
        font-size: 10px;
    }

    .nav-tab.active .tab-conta {
        background: rgba(255, 255, 255, 0.22) !important;
        color: #ffffff !important;
    }

    .audio-tab {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        font-size: 13px !important;
    }

    /* la data sotto, larga quanto la barra */
    .date-picker-pill {
        width: 100% !important;
        height: 36px !important;
        border-radius: 999px !important;
    }
}

@keyframes gd-pallino-batte {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Sotto i 380px anche "Programma" e' troppo: si taglia con i puntini invece
   di far andare a capo la barra. */
@media (max-width: 380px) {
    .nav-tab {
        font-size: 11px !important;
        padding: 0 4px !important;
        text-overflow: ellipsis !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tab-pallino { animation: none !important; }
}


/* ==========================================================================
   PREFERITI — 27/08/2026
   --------------------------------------------------------------------------
   La sezione in cima alla home esisteva gia', ma la sua testata era scritta
   inline con "background:#fff !important; color:#000 !important": bianco su
   bianco. Si leggeva come un altro campionato, non come la tua lista — e la
   stessa partita compariva due volte, una qui e una nel suo girone, senza
   niente che collegasse le due copie.

   Il segnale sta sulle RIGHE, non sulla testata: una barra ambra su ogni
   preferita, dovunque si trovi. La testata resta bianca perche' una fascia
   ambra piena diventava la cosa piu' forte della pagina, piu' delle partite
   live, che sono il contenuto vero.

   Ambra e non petrolio: e' il colore che il blocco COERENZA qui sopra riserva
   agli evidenziatori, e i preferiti erano l'unico caso previsto che non lo
   usava.
   ========================================================================== */
#favorites-section {
    border: 1px solid #f0eeea !important;
    border-radius: 12px;
    overflow: hidden;
}

#favorites-section > .league-header {
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid #f2f2f0;
    border-radius: 0;
}

/* La scritta e' nera come i nomi dei campionati sotto: la sezione si
   riconosce dalla stella e dalle barre, non dal colore del titolo. */
#favorites-section > .league-header span { color: #000000; }

#favorites-section > .league-header i {
    color: var(--secondary);
    margin-right: 10px;
}

/* La riga di una preferita, DOVUNQUE si trovi: dentro la sezione in cima e
   anche giu' nel suo girone. E' questa barra che salda le due copie. */
.match-wrapper.is-fav {
    background: #fff8e6;
    border-left: 4px solid var(--secondary);
}