/* H2H Section Styles */
.h2h-container {
    background: linear-gradient(145deg, #ffffff 0%, #f7f9f8 45%, #eef2f1 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 6px 24px rgba(0,30,40,0.06);
    position: relative;
    overflow: hidden;
}

.h2h-container::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.h2h-container > * {
    position: relative;
    z-index: 1;
}

.h2h-header-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.h2h-header-title span {
    font-size: 16px;
    color: #98a3a0;
    font-weight: 400;
}

.h2h-summary-top {
    text-align: center;
    margin-bottom: 40px;
}

.h2h-summary-top .count {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary);
    display: block;
    line-height: 1;
}

.h2h-summary-top .label {
    font-size: 14px;
    font-weight: 700;
    color: #98a3a0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.h2h-main-visual {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.h2h-team-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    text-align: center;
}

.h2h-team-side img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    object-fit: contain;
}

.h2h-team-side .name {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.h2h-team-side .perc {
    font-size: 13px;
    color: #98a3a0;
}

.h2h-bar-container {
    flex: 1;
}

.h2h-progress-bar {
    display: flex;
    height: 45px;
    border-radius: 12px;
    overflow: hidden;
}

.h2h-progress-part {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 800;
}

.h2h-win-home { background-color: #8ce43c; } /* Light Green */
.h2h-draw { background-color: #fdd835; color: var(--primary); } /* Yellow */
.h2h-win-away { background-color: #ff6b6b; } /* Red/Pink */

.h2h-counts-row {
    display: flex;
    justify-content: space-between;
    padding: 0 120px;
    font-size: 14px;
    font-weight: 600;
    color: #69736f;
    margin-bottom: 40px;
}

.h2h-description-text {
    background-color: #f7f9f8;
    border-radius: 15px;
    padding: 25px;
    font-size: 15px;
    color: #4c5551;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 40px;
}

/* Stats Cards Grid */
.h2h-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.h2h-stat-card {
    background: white;
    border: 1px solid #eef2f1;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.h2h-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.card-over15::after { background: #8ce43c; width: 80%; }
.card-over25::after { background: #fdd835; width: 50%; }
.card-over35::after { background: var(--secondary); width: 30%; }
.card-btts::after { background: #ff6b6b; width: 60%; }
.card-cs-h::after { background: #ff4081; width: 20%; }
.card-cs-a::after { background: var(--primary); width: 20%; }

.h2h-stat-card .value {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    display: block;
    line-height: 1.2;
}

.h2h-stat-card .label {
    font-size: 14px;
    font-weight: 700;
    color: #69736f;
    display: block;
    margin: 5px 0;
}

.h2h-stat-card .sub {
    font-size: 12px;
    color: #98a3a0;
}

@media (max-width: 768px) {
    .h2h-header-title { font-size: 18px; }
    .h2h-main-visual { gap: 10px; }
    .h2h-team-side { width: 80px; }
    .h2h-team-side img { width: 45px; height: 45px; }
    .h2h-team-side .name { font-size: 12px; }
    .h2h-progress-bar { height: 35px; }
    .h2h-counts-row { padding: 0 10px; font-size: 12px; }
    .h2h-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .h2h-stat-card { padding: 15px; }
    .h2h-stat-card .value { font-size: 22px; }
}

.match-detail-container {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
}

.detail-header {
    background: linear-gradient(180deg, #0a3733 0%, #0f766e 100%);
    color: #ffffff;
    padding: 50px 20px 90px;
    text-align: center;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.detail-header div[style*="color: #98a3a0"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

.scoreboard-card {
    background: #ffffff;
    border-radius: 20px;
    margin: -60px 20px 20px;
    padding: 35px;
    position: relative;
    z-index: 100;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* .scoreboard-card.sticky {
    position: fixed;
    top: 60px;
    left: auto;
    right: auto;
    width: calc(100% - 260px);
    max-width: 940px;
    margin: 0;
    padding: 10px 20px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1000;
    border: 1px solid #e4e9e7;
    border-top: none;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
} */

/* .scoreboard-card.sticky .detail-teams {
    margin: 0;
    justify-content: center;
    gap: 40px;
}

.scoreboard-card.sticky .detail-team img {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 0;
    margin-right: 8px;
}

.scoreboard-card.sticky .detail-team {
    flex-direction: row;
    flex: 0 1 auto;
}

.scoreboard-card.sticky .detail-team h2 {
    font-size: 14px;
    font-weight: 700;
}

.scoreboard-card.sticky .detail-score {
    flex: 0 0 100px;
    gap: 10px;
}

.scoreboard-card.sticky .score-main {
    font-size: 20px;
}

.scoreboard-card.sticky .score-divider {
    font-size: 16px;
    margin: 0 5px;
}

.scoreboard-card.sticky .form-section-header,
.scoreboard-card.sticky .favorite-star-detail {
    display: none;
} */

/* @media (max-width: 992px) {
    .scoreboard-card.sticky {
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
        padding: 8px 10px;
        background: #fff;
    }

    .scoreboard-card.sticky .detail-teams {
        gap: 15px;
    }

    .scoreboard-card.sticky .detail-team img {
        width: 24px !important;
        height: 24px !important;
        margin-right: 5px;
    }

    .scoreboard-card.sticky .detail-team h2 {
        font-size: 13px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .scoreboard-card.sticky .detail-score {
        flex: 0 0 80px;
    }

    .scoreboard-card.sticky .score-main {
        font-size: 18px;
    }
} */

@media (max-width: 768px) {
    /* Logo Header più grande (ulteriormente +25%) e a sinistra */
    .logo-new .logo-text {
        font-size: 25px !important;
    }
    .logo-new img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .logo-new {
        margin-right: auto;
    }

    .detail-header {
        padding: 40px 15px 80px;
    }

    .scoreboard-card {
        margin: -60px 10px 15px;
        padding: 25px 15px;
    }

    .detail-team img {
        width: 75px !important;
        height: 75px !important;
        margin-bottom: 10px;
    }

    .detail-team h2 {
        font-size: 16px;
        font-weight: 800;
    }

    /* .scoreboard-card.sticky .detail-team img {
        width: 28px !important;
        height: 28px !important;
    } */

    .score-main {
        font-size: 36px;
    }
}

.match-league-badge-container {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    display: inline-block;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-bottom: 15px;
}

.match-league-badge-container span {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.detail-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 10px 0;
    position: relative;
    z-index: 2;
}

.detail-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    transition: transform 0.3s ease;
}

.detail-team:hover {
    transform: translateY(-5px);
    background: transparent;
}

.detail-team img {
    width: 80px!important;
    height: 80px!important;
    margin-bottom: 12px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.08));
    object-fit: contain;
}

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

.detail-team h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #1f2724;
    text-shadow: none;
    text-align: center;
}

.detail-score {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.main-score-display {
    font-size: 52px;
    font-weight: 900;
    color: #1f2724;
    background: none;
    -webkit-text-fill-color: #1f2724;
    filter: none;
    line-height: 1;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative; /* Per posizionamento badge gol */
}

/* ==========================================================================
   IL GOL nella pagina partita — 28/08/2026
   ==========================================================================
   Scelta di Tobia: **la pastiglia del minuto diventa GOL**.

   Qui il punteggio e' 52 px e sta al centro della scheda: e' la cosa che la
   gente sta guardando, e coprirla la spegne. Per questo non si tocca il
   fondo di niente. Si usa un elemento che c'e' gia' — la pastiglia sotto il
   punteggio che dice `67'` — che ruota, si gonfia e diventa GOL petrolio
   pieno. La cifra che e' salita passa al petrolio e batte sei volte, un
   battito ogni 0,95 s: gli stessi sei battiti della home.

   6.150 ms in tutto, come in home, ed e' il timeout del JS in
   assets/js/match-details.js: se cambi le durate vanno cambiate nei due
   file insieme.

   Prima (27/08) c'era GOL rosso lampeggiante appeso sopra il punteggio, con
   `.main-score-display .goal-badge`. Tolto: e' lo stesso gesto che e' stato
   tolto dalla home, e le due pagine devono raccontare il gol allo stesso
   modo.
   ========================================================================== */

.match-status-pill.gd-gol-minuto {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    justify-content: center;
    animation: gd-gol-morph 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes gd-gol-morph {
    0%   { transform: scale(0.62) rotate(-7deg); opacity: 0.2; }
    60%  { transform: scale(1.14) rotate(2deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* La cifra di chi ha segnato. Il `-webkit-text-fill-color` non e' cosmesi:
   `.main-score-display` lo imposta a #1f2724 e senza sovrascriverlo il
   colore petrolio non si vedrebbe su WebKit. */
.main-score-display .gd-gol-cifra {
    display: inline-block;
    color: #0f766e !important;
    -webkit-text-fill-color: #0f766e !important;
    animation: gd-gol-cifra-batte 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 6 both;
}

@keyframes gd-gol-cifra-batte {
    0%, 100% { transform: scale(1); }
    32%      { transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
    .match-status-pill.gd-gol-minuto { animation: none; }
    .main-score-display .gd-gol-cifra { animation: none; }
}

.match-status-pill {
    margin-top: 12px;
    background: #eef2f1;
    border: 1px solid #e4e9e7;
    padding: 5px 14px;
    border-radius: 50px;
    color: #69736f;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.match-status-pill.is-live {
    background: #fdeaee;
    border-color: #fbd8de;
    color: var(--live);
    animation: none;
}

.form-dots-container {
    display: flex;
    gap: 3px; /* Smaller gap */
    margin-top: 10px;
    flex-wrap: nowrap;
}

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

.form-badge {
    width: 16px; /* Smaller badge */
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: white;
}

.form-dots-container .form-team-logo {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    object-fit: contain;
    opacity: 1;
    display: block !important;
    margin: 4px auto 0 !important;
}

@keyframes pulse-live {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.halftime-score-display {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 700;
    margin-top: 5px;
}


.main-score-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-score-mobile {
    display: none;
    font-size: 24px;
    font-weight: 800;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
    margin-top: 10px;
}

.detail-tabs {
    display: flex;
    background: #eef2f1;
    padding: 5px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

@media (max-width: 768px) {
    .match-detail-container {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .detail-header {
        padding: 20px 15px 30px !important; /* Ridotto drasticamente il background scuro */
    }

    .match-league-badge-container {
        margin-bottom: 10px !important;
    }

    .detail-header div:nth-child(2) {
        margin-bottom: 0 !important; /* Ridotto spazio sotto la data */
    }

    .scoreboard-card {
        margin: 0 10px 20px !important; 
        padding: 20px 12px !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
        border: 1px solid #eef2f1 !important;
    }
    
    .detail-teams {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    .detail-team {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }
    
    .detail-team img {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 8px !important;
    }
    
    .detail-team h2 {
        font-size: 13px !important;
        line-height: 1.1 !important;
        height: 2.2em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .detail-score {
        flex: 0 0 80px !important;
        min-width: 80px !important;
        border-left: none !important;
        border-right: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .main-score-display {
        font-size: 38px !important;
        gap: 5px !important;
        margin-bottom: 5px !important;
    }
    
    .match-status-pill {
        font-size: 10px !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
        width: fit-content !important;
    }

    .form-section-header {
        margin-top: 20px !important;
        width: 100% !important;
    }
    
    .form-dots-container {
        justify-content: center !important;
        gap: 2px !important;
    }
    
    .form-badge {
        width: 14px !important;
        height: 14px !important;
        font-size: 7px !important;
    }
    
    .form-dots-container .form-team-logo {
        width: 12px !important;
        height: 12px !important;
        max-width: 12px !important;
    }
    
    .detail-tabs {
        padding: 8px 5px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: #f7f9f8 !important;
    }
    
    .tab-link {
        padding: 10px 15px !important;
        font-size: 11px !important;
        min-width: 100px !important;
    }
}

.tab-link {
    flex: 1;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-light);
    transition: all 0.2s;
    border-radius: 10px;
    white-space: nowrap;
}

.player-number-inline {
    font-size: 12px;
    font-weight: 700;
    color: #98a3a0; /* light grey */
    margin-right: 5px;
}

/* SUL CAMPO il numero era piu' grande del nome — 12px contro 8 — e col margine si
   mangiava un quarto della targhetta: e' meta' del motivo per cui i cognomi uscivano
   tagliati. Qui vale meno del nome, perche' e' un'etichetta, non l'informazione. */
.player-on-pitch .player-number-inline {
    font-size: 8px;
    margin-right: 3px;
    color: #9aa8a5;
}

.tab-link.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tab-content {
    display: none;
    padding: 30px;
}

.tab-content.active {
    display: block;
}

.prob-container {
    margin: 20px 0;
    padding: 20px;
    background: #f7f9f8;
    border-radius: 15px;
}

.prob-bar {
    display: flex;
    height: 25px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

.prob-home {
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.prob-draw {
    background: #98a3a0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.prob-away {
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-light);
}

.info-item i {
    color: var(--primary);
    width: 20px;
}

.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #eee;
    transform: translateX(-50%);
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.event-home {
    flex: 1;
    text-align: right;
    padding-right: 30px;
}

.event-away {
    flex: 1;
    text-align: left;
    padding-left: 30px;
}

.event-time {
    background: var(--primary);
    color: white;
    min-width: 40px;
    height: 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    z-index: 1;
    padding: 0 8px;
    white-space: nowrap;
}

.event-icon {
    font-size: 14px;
    margin: 0 5px;
}

.event-goal {
    color: var(--accent-dark);
}

.event-card-yellow {
    color: #ffc107;
}

.event-card-red {
    color: var(--rosso);
}

.event-sub {
    color: var(--primary);
}

.event-var {
    color: var(--primary);
}

.stat-item-v2 {
    margin-bottom: 30px;
}

.stat-item-v2 > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.stat-item-v2 span {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
}

.stat-item-v2 div div {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-item-v2 > div:last-child {
    display: flex;
    height: 8px;
    background: #eef2f1;
    border-radius: 4px;
    overflow: hidden;
}

.stat-item-v2 > div:last-child > div:first-child {
    background: var(--primary);
}

.stat-item-v2 > div:last-child > div:last-child {
    background: var(--accent);
    flex: 1;
}

/* Football Field Styles */
/* IL CAMPO DELLE FORMAZIONI — rifatto ORIZZONTALE il 22/08/2026.
 *
 * Prima era verticale (aspect-ratio 1/1.9) e verde scuro con le righe bianche. Due
 * problemi: in verticale un 4-2-3-1 sta in undici righe strettissime su mobile, e il
 * verde scuro non e' di questo sito — il campo che il sito disegna davvero e' quello
 * della scheda squadra (.tp-stadio-ripiego in team.css): fondo #eef4f3, linee
 * #0f766e in trasparenza, e il taglio dell'erba a strisce verticali.
 *
 * Qui si usano gli stessi colori, cosi' le due pagine sembrano lo stesso sito. Le
 * proporzioni sono quelle vere di un campo (105x68 metri, cioe' ~1.55:1), non 16:9
 * inventato.
 *
 * IL CONTENITORE CHE SCORRE NON E' UN DETTAGLIO: undici giocatori per parte su un
 * telefono da 360px vorrebbero dire schede da 30px sovrapposte. Sotto una certa
 * larghezza il campo tiene la sua misura minima e si scorre di lato, invece di
 * schiacciarsi fino a diventare illeggibile.
 */
/* IL CAMPO NON SCORRE MAI, NE' SU DESKTOP NE' SUL TELEFONO.
   La prima versione teneva una misura minima e faceva scorrere di lato quello che non
   ci stava: su un telefono vuol dire che meta' squadra e' fuori schermo e la si insegue
   col dito. La soluzione non e' stringere le schede — 22 giocatori in dieci file dentro
   360px fanno 36px a colonna comunque — ma **girare il campo**: orizzontale dove c'e'
   larghezza, verticale dove ce n'e' poca. E' anche il motivo per cui le app di calcio
   sul telefono mostrano il campo in verticale. */
.pitch-scroll {
    margin: 26px 0;
}

.pitch-container {
    background: #eef4f3;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 10px;
    position: relative;
    width: 100%;
    max-width: 900px;
    /* 1.85 e non 1.55, che sarebbe la proporzione vera di un campo (105x68 metri).
       Vista dall'alto e senza prospettiva quella misura sembra alta, e con i giocatori
       distribuiti su tutta l'altezza il riquadro si mangia mezza schermata. E' una
       deformazione voluta: qui il campo e' lo sfondo di uno schema, non una mappa. */
    aspect-ratio: 1.85 / 1;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 43, 40, .08);
}

/* Il taglio dell'erba: strisce verticali, come sul campo della scheda squadra. */
.pitch-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(15, 118, 110, .075) 0 6.25%, rgba(15, 118, 110, 0) 6.25% 12.5%);
    pointer-events: none;
}

.pitch-line {
    position: absolute;
    border: 2px solid rgba(15, 118, 110, .22);
    pointer-events: none;
}

.pitch-perimetro {
    left: 10px; right: 10px; top: 10px; bottom: 10px;
    border-radius: 3px;
}

/* La linea di meta' campo: verticale, non orizzontale. */
.pitch-center-line {
    top: 10px; bottom: 10px; left: 50%;
    width: 0; height: auto;
    border: none;
    border-left: 2px solid rgba(15, 118, 110, .22);
}

.pitch-center-circle {
    width: 19%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

/* Le aree di rigore stanno a SINISTRA e a DESTRA. */
.pitch-area { top: 21%; bottom: 21%; width: 14%; }
.pitch-area-sinistra { left: 10px;  border-left: none;  border-radius: 0 3px 3px 0; }
.pitch-area-destra   { right: 10px; border-right: none; border-radius: 3px 0 0 3px; }

/* L'arco del dischetto: mezzaluna che sporge verso il centro. */
.pitch-arco { width: 30px; height: 62px; top: 50%; }
.pitch-arco-sinistra {
    left: calc(14% + 10px);
    transform: translateY(-50%);
    border-left: none;
    border-radius: 0 62px 62px 0;
}
.pitch-arco-destra {
    right: calc(14% + 10px);
    transform: translateY(-50%);
    border-right: none;
    border-radius: 62px 0 0 62px;
}

/* Il giocatore prende la fila dall'asse orizzontale e il posto da quello verticale.
   Le tre misure le stampa match.php su ogni scheda: --p il posto nella fila, --x la
   fila sul campo orizzontale, --y quella sul campo verticale. */
.player-on-pitch { left: var(--x); top: var(--p); }

/* Il numero di maglia sulla faccia. Sul desktop non serve — il numero sta gia' accanto
   al nome — e infatti li' non si vede: esiste per il telefono, dove il nome dal campo
   sparisce e il numero resta l'unico modo di riconoscere chi e'. */
.player-number-badge { display: none; }

/* L'elenco dei titolari sotto il campo: sul desktop non serve, i nomi sono sul campo. */
.formazioni-elenco { display: none; }

/* --------------------------------------------------------- IL CAMPO SUL TELEFONO
   Resta ORIZZONTALE, e ci sta — ma a un patto. Su uno schermo da 390px le dieci file
   del modulo si dividono la larghezza: 39px a colonna, e la sola faccia ne occupa 36.
   Un cognome come "M. Kayode" ne vorrebbe 50. Quindi o si scorre col dito (fuori
   discussione), o i nomi si troncano a quattro lettere (illeggibili), o **i nomi
   escono dal campo**: restano le facce col numero, e i nomi si leggono nell'elenco
   qui sotto, che compare solo qui. Niente si perde, cambia dove si legge. */
@media (max-width: 760px) {
    .pitch-scroll { margin: 18px 0; }

    .player-on-pitch { width: 34px; }
    .player-on-pitch .player-name { display: none; }

    .player-card-wrapper { width: 24px; height: 24px; margin-bottom: 0; }
    .player-on-pitch img.player-photo { border-width: 1.5px; }

    .player-rating-badge {
        top: -6px; right: -9px;
        font-size: 7px; padding: 1px 3px; border-radius: 3px;
    }
    .player-number-badge {
        display: block;
        position: absolute;
        bottom: -5px; left: 50%; transform: translateX(-50%);
        background: rgba(255, 255, 255, .95);
        color: #0f2b28;
        font-size: 8px; font-weight: 800; line-height: 1;
        padding: 2px 4px; border-radius: 6px;
        box-shadow: 0 1px 3px rgba(15, 43, 40, .18);
        z-index: 3;
    }
    .player-goal-badge { transform: scale(.8); }

    /* L'elenco: due colonne, una per squadra, nell'ordine in cui stanno sul campo. */
    .formazioni-elenco {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 4px 0 18px;
    }
    .fe-squadra {
        border: 1px solid var(--border, rgba(15, 118, 110, .16));
        border-radius: 8px;
        padding: 9px 10px;
        min-width: 0;
    }
    .fe-titolo {
        font-size: 10px; font-weight: 800; letter-spacing: .4px;
        text-transform: uppercase; color: var(--text-light, #69736f);
        margin-bottom: 7px;
    }
    .fe-riga {
        display: flex; align-items: baseline; gap: 6px;
        font-size: 11.5px; line-height: 1.55;
        min-width: 0;
    }
    .fe-num {
        flex: 0 0 18px; text-align: right;
        font-weight: 800; color: var(--accent-dark, #0f766e); font-size: 10px;
    }
    .fe-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* LA LARGHEZZA DELLA SCHEDA E' LEGATA ALLA DISTANZA FRA LE FILE, non scelta a occhio.
   Le file distano 10 punti percentuali (vedi match.php), che su un campo da ~620px fanno
   62px: la scheda sta sotto quella misura e due file adiacenti non si toccano piu'. Con
   la targhetta da 80px di prima si leggeva "9 Richarlison . Gallagher" tutto attaccato a
   meta' campo. Se un giorno si cambia la distanza fra le file, questo numero va con lei. */
.player-on-pitch {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
    transform: translate(-50%, -50%);
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.player-on-pitch:hover {
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 25;
}

.player-card-wrapper {
    position: relative;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
}

.player-on-pitch img.player-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid white;
    background: #eef2f1;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    object-fit: cover;
}

.player-rating-badge {
    position: absolute;
    top: -5px;
    right: -12px;
    color: white;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.2);
}

.player-rating-badge.rating-home {
    background: var(--secondary); /* Home - Orange */
}

.player-rating-badge.rating-away {
    background: var(--primary); /* Away - Light Blue */
}

.player-goal-badge {
    position: absolute;
    top: 15px; /* Positioned under the rating badge */
    right: -12px; /* Aligned with rating badge */
    background: #ccff00; /* Light Green (Lime) color */
    color: #0a3733; /* Dark text for contrast */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(204,255,0,0.4);
    z-index: 5;
}

.player-goal-badge i {
    font-size: 9px;
}

.player-goal-badge .goal-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent); /* Changed from red to purple as requested */
    color: white;
    font-size: 8px;
    font-weight: 800;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}

.sub-goal-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    background: rgba(204, 255, 0, 0.15);
    color: #88aa00;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.sub-goal-indicator i {
    font-size: 9px;
}

.sub-goal-indicator .count {
    background: #88aa00;
    color: white;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9px;
}

@media (max-width: 768px) {
    .player-goal-badge {
        width: 16px;
        height: 16px;
        font-size: 8px;
        top: 10px; /* Adjusted for mobile */
        right: -8px;
    }
    .player-goal-badge i { font-size: 7px; }
    .player-goal-badge .goal-count {
        width: 12px;
        height: 12px;
        font-size: 7px;
    }
}

.player-on-pitch .player-name {
    /* 8px e non 9: la targhetta non puo' allargarsi oltre la distanza fra due file
       (62px), quindi l'unico modo di far entrare un cognome intero e' stringere le
       lettere. A 9px in 62px ci stanno ~7 caratteri e "M. Kayode" ne ha 9: veniva
       tagliato. A 8px, con il riempimento ridotto, ce ne stanno ~9. */
    font-size: 8px;
    font-weight: 700;
    /* 22/08/2026 — su fondo chiaro il bianco con l'ombra nera non si legge e la
       pillola nera pesa. Testo scuro su pillola bianca: stesso stile del resto
       del sito, e il nome resta leggibile anche sopra le righe del taglio. */
    color: #0f2b28;
    text-shadow: none;
    text-align: center;
    padding: 1px 4px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(15, 43, 40, .14);
    border-radius: 10px;
    /* La targhetta e' centrata sulla faccia e sborda di meta' larghezza per parte:
       piu' e' stretta, meno rischia di finire sotto il bordo del campo o addosso al
       compagno di fianco. Il nome lungo si taglia con i puntini, non va a capo. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto; /* Width follows content */
    max-width: 62px; /* la distanza fra due file: oltre, le targhette si toccano */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot-home {
    background: var(--secondary); /* Orange */
    box-shadow: 0 0 5px var(--secondary);
}

.dot-away {
    background: var(--primary); /* Light Blue */
    box-shadow: 0 0 5px var(--primary);
}

.goal-indicator-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: white;
    background: #16a34a; /* Professional Green */
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
}

.goal-indicator-new i {
    font-size: 8px;
    margin-left: 2px;
}

.player-on-pitch .player-number {
    position: absolute;
    top: -5px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid white;
    z-index: 11;
}

.substitutes-container {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.sub-team {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.sub-team h4 {
    background: #f7f9f8;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    padding: 12px 20px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-team h4::before {
    content: "\f0c0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--accent);
}

.sub-list {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

.sub-list li {
    font-size: 13px;
    padding: 8px 20px;
    border-bottom: 1px solid #f7f9f8;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.2s;
}

.sub-list li:hover {
    background: #eef2f1;
}

.sub-list li:last-child {
    border-bottom: none;
}

.sub-list li span {
    background: #eef2f1;
    color: var(--primary);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* AI Box Styling */
.ai-box {
    background: white;
    color: var(--text);
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--accent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.ai-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

.ai-box-icon {
    background: #eef2f1;
    color: var(--primary);
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ai-box-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.ai-box-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text);
}

.ai-advice-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ai-advice-container span {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-box-advice {
    font-size: 18px;
    color: var(--primary); /* Green Emerald */
    font-weight: 800;
}

/* Coaches Section */
.coaches-section {
    margin-top: 30px;
    padding: 25px;
    background: #f7f9f8;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.coaches-section h3 {
    margin: 0 0 20px 0;
    color: var(--primary);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coaches-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.coach-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.coach-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: var(--accent);
}

.coach-item img {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #eef2f1;
}

.coach-name {
    font-weight: 800;
    font-size: 13px;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.coach-team {
    font-size: 10px;
    color: var(--text-light);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

@media (max-width: 480px) {
    .coaches-grid {
        grid-template-columns: 1fr;
    }
    .coach-name, .coach-team {
        max-width: none;
    }
}

/* Formation Cards */
.formations-header {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.formation-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    flex: 1;
    min-width: 250px;
}

.formation-card-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border);
}

.formation-team-logo {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.formation-team-info {
    flex: 1;
}

.formation-card h4 {
    margin: 0 0 4px 0;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.formation-display {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

.formation-display .formation-number {
    color: var(--accent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    margin-left: 5px;
}

.formation-extra-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-light);
    font-style: italic;
}

.formation-extra-info i {
    color: var(--accent);
    font-size: 12px;
}

@media (max-width: 600px) {
    .formations-header {
        flex-direction: column;
        align-items: stretch;
    }
    .formation-card {
        min-width: 0;
    }
}

/* Empty State / Coming Soon */
.empty-state-box {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(135deg, #f7f9f8, #ffffff);
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    max-width: 500px;
    margin: 40px auto;
}

.empty-state-box i {
    font-size: 56px;
    color: var(--text-light);
    margin-bottom: 25px;
    opacity: 0.5;
}

.empty-state-box h3 {
    color: var(--primary);
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 800;
}

.empty-state-box p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .formations-header {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .formation-card {
        padding: 15px;
    }
    .formation-display {
        font-size: 24px;
    }
}

.scores-container {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.scores-container table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.scores-container thead {
    background: #eef2f1;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-light);
}

.scores-container th {
    padding: 15px;
    text-align: left;
}

.scores-container th:not(:first-child) {
    text-align: center;
}

.scores-container td {
    padding: 15px;
    border-bottom: 1px solid var(--border);
}

.scores-container td:first-child {
    text-align: left;
}

.btn-live {
    font-size: 10px;
    padding: 8px 15px;
}

/* Mobile Odds Cards */
.mobile-odds-cards {
    display: none;
}

.mobile-odds-cards .odds-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.mobile-odds-cards .odds-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.odds-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.odds-card-header img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--border);
}

.odds-card-info h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.odds-card-info .bonus-text {
    font-size: 11px;
    color: var(--primary);
    background: var(--primary-light);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--primary-light);
    width: fit-content;
}

.odds-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
}

.odds-value {
    text-align: center;
    flex: 1;
    padding: 8px;
    background: #f7f9f8;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.odds-value span {
    font-size: 11px;
    color: var(--text-light);
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.odds-value strong {
    font-size: 18px;
    color: var(--primary);
    font-weight: 800;
    display: block;
}

.odds-card .btn-live {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    text-align: center;
    display: block;
    text-decoration: none;
    transition: all 0.2s;
}

.odds-card .btn-live:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3);
}

/* Responsive display controls */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
}

/* Mobile optimizations for match page */
@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;
        padding: 0 0 0 60px;
    }
    .event-home, .event-away {
        text-align: left;
        padding: 0 0 0 60px;
    }
    .event-time {
        position: absolute;
        left: 5px;
        top: 0;
        min-width: 45px;
        height: 28px;
        font-size: 13px;
        border-radius: 14px;
    }
    .detail-team img {
        width: 50px;
        height: 50px;
    }
    .detail-team h2 {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .main-container {
        padding: 5px;
    }
    .content-area {
        padding: 0;
    }
    .match-detail-container {
        margin: 0;
        border-radius: 0;
    }
    .detail-header {
        padding: 15px 5px;
    }
    .detail-header > div:first-child { /* League name and round */
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }
    .detail-header > div:nth-child(2) { /* Date and time */
        font-size: 11px;
        margin-bottom: 10px;
    }
    .detail-teams {
        display: flex;
        flex-direction: row; /* Keep teams side-by-side for better use of horizontal space */
        justify-content: space-between; /* Distribute space evenly */
        align-items: center;
        gap: 0px;
        margin: 10px 0;
        width: 100% !important;
    }

    .detail-team {
        flex: 1 1 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: none !important;
        min-width: 0 !important;
    }
    .detail-team img {
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
    }
    .detail-team h2 {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
    }
    .detail-score {
        font-size: 30px;
        flex: 0 0 70px !important;
        min-width: 70px !important;
        flex-direction: column;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-score-display {
        display: flex;
        justify-content: center;
        margin-bottom: 5px;
        width: auto;
        gap: 0;
    }
    .main-score-display span {
        font-size: 30px;
        font-weight: 800;
        color: var(--accent);
        line-height: 1;
    }
    .main-score-display span:nth-child(odd) {
        display: inline-block !important;
    }

    .detail-score-mobile {
        display: none !important;
    }

    .main-score-display span:nth-child(2) {
        display: none !important; /* Hidden to avoid double dash issues */
    }

    .main-score-display span:nth-child(1)::after {
        content: "-";
        margin: 0 10px;
        font-size: 24px;
        font-weight: 800;
        color: var(--accent);
    }

    /* Halftime score display for mobile */
    .halftime-score-display {
        display: none !important; /* Removed as requested */
    }

    /* Form dots and team position adjustments for mobile */
    .detail-team .form-dots {
        margin-top: 18px !important;
        margin-bottom: 12px !important;
        transform: scale(0.9); /* Slightly larger for better readability */
        justify-content: center;
    }

    .detail-team .team-position {
        font-size: 10px !important;
        padding: 5px 12px !important;
        margin-top: 15px !important; /* More space between form and position */
        display: inline-block;
        border-width: 1.5px !important;
    }

    #match-status-badge {
        font-size: 11px;
        margin-top: 5px;
        gap: 5px;
    }

    .live-minute-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    .ht-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
        background: var(--primary-light) !important;
        color: var(--live) !important;
        border: 1px solid rgba(15, 118, 110, 0.2) !important;
    }

    .detail-tabs {
        padding: 10px;
        gap: 10px;
    }
    .tab-link {
        padding: 12px 16px;
        font-size: 12px;
    }
    .tab-content {
        padding: 20px 10px;
    }
    .prob-container {
        padding: 15px;
    }
    .prob-bar {
        height: 30px;
    }
    .prob-home, .prob-draw, .prob-away {
        font-size: 12px;
    }
    .info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .info-item {
        font-size: 14px;
    }
    .timeline {
        padding: 10px 0;
    }
    .event-item {
        margin-bottom: 15px;
    }
    .stat-item-v2 {
        margin-bottom: 20px;
    }
    .stat-item-v2 span {
        font-size: 16px;
    }
    .stat-item-v2 div div {
        font-size: 10px;
    }
    /* Nessuna misura minima: il campo si adatta allo schermo e non si scorre mai.
       Le misure delle schede sul telefono stanno nel blocco @media 760px piu' sopra;
       qui NON si ripetono. Ci stavano, ed essendo piu' in basso nel foglio vincevano:
       le facce restavano a 32px mentre il blocco sopra le voleva a 24, e sembrava che
       quella regola non venisse applicata. Due blocchi mobile che dicono cose diverse
       sulla stessa classe sono un bug che si vede solo a occhio. */
    .pitch-container {
        margin: 0 auto;
    }
    .player-rating-badge {
        font-size: 7px;
        padding: 1px 3px;
        right: -8px;
        top: -3px;
    }
    .player-on-pitch .player-name {
        font-size: 8px;
    }
    .player-on-pitch .player-number {
        font-size: 8px;
        min-width: 14px;
        height: 14px;
        top: -3px;
        right: 8px;
    }
    .substitutes-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .formations-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .formation-card {
        width: 100%;
        min-width: unset;
        padding: 10px 20px;
    }
    .sub-team h4 {
        font-size: 12px;
    }
    .sub-list li {
        font-size: 12px;
        padding: 5px 0;
    }
    .scores-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }
    .scores-container table {
        min-width: 700px;
        font-size: 12px;
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    .scores-container thead {
        display: none;
    }
    .scores-container tbody tr {
        display: block;
        background: white;
        border-radius: 12px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 15px;
    }
    .scores-container tbody td {
        display: block;
        padding: 0;
        border: none;
        text-align: left;
    }
    .scores-container tbody td:first-child {
        margin-bottom: 12px;
    }
    .scores-container tbody td:first-child div {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .scores-container tbody td:first-child img {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: 6px;
        object-fit: contain;
    }
    .scores-container tbody td:first-child strong {
        font-size: 14px;
        font-weight: 700;
        color: var(--primary);
    }
    .scores-container tbody td:not(:first-child):not(:last-child) {
        display: inline-block;
        width: 30%;
        text-align: center;
        margin-right: 5%;
        vertical-align: top;
    }
    .scores-container tbody td:not(:first-child):not(:last-child) div {
        background: #f7f9f8;
        padding: 8px 12px;
        border-radius: 8px;
        margin-bottom: 8px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-light);
        text-transform: uppercase;
    }
    .scores-container tbody td:not(:first-child):not(:last-child) span {
        display: block;
        font-size: 16px;
        font-weight: 800;
        color: var(--primary);
    }
    .scores-container tbody td:last-child {
        text-align: center;
        margin-top: 12px;
    }
    .btn-live {
        padding: 10px 20px;
        font-size: 12px;
        font-weight: 700;
        min-width: 80px;
        border-radius: 8px;
    }
}

/* --- Compact & Minimal Statistics --- */
.stats-minimal-container {
    background: white;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid var(--border);
    max-width: 650px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.stat-row-minimal {
    margin-bottom: 25px;
    transition: transform 0.2s ease;
}

.stat-row-minimal:hover {
    transform: translateX(5px);
}

.stat-info-minimal {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
    padding: 0 2px;
}

.stat-label-minimal {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value-minimal {
    font-size: 16px;
    font-weight: 900;
    color: var(--primary);
    font-family: 'IBM Plex Mono', monospace;
}

.stat-bar-minimal-bg {
    height: 12px;
    background: #eef2f1;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    position: relative;
}

.stat-bar-minimal-fill {
    height: 100%;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-bar-home-min {
    background: linear-gradient(90deg, var(--primary), #0f766e);
    border-radius: 6px 0 0 6px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.stat-bar-away-min {
    background: linear-gradient(90deg, #00e676, var(--accent));
    border-radius: 0 6px 6px 0;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

.stat-bar-divider-min {
    width: 2px;
    background: white;
    z-index: 2;
    height: 100%;
}

.summary-minimal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px dashed var(--border);
}

.summary-item-minimal {
    text-align: center;
    padding: 10px;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.summary-item-minimal:hover {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.summary-label-minimal {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.summary-value-minimal {
    font-size: 14px;
    font-weight: 900;
    color: var(--primary);
    font-family: 'IBM Plex Mono', monospace;
}

@media (max-width: 480px) {
    .summary-minimal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ===== UNIFIED AI CARD - MINIMAL WHITE WITH COLOR ACCENTS ===== */

.ai-unified-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Header */
.ai-unified-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eef2f1;
}

.ai-unified-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary) 0%, #0b5b55 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--accent);
    flex-shrink: 0;
}

.ai-unified-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.3px;
}

.ai-unified-title p {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 600;
}

/* Main Advice */
.ai-main-advice {
    background: linear-gradient(135deg, rgba(0,30,40,0.03) 0%, rgba(15, 118, 110, 0.03) 100%);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.advice-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

.advice-value {
    display: block;
    font-size: 20px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.3;
}

/* Probability Section */
.ai-prob-section {
    margin-bottom: 28px;
}

.ai-prob-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.ai-prob-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-prob-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-prob-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-prob-header img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ai-prob-header span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.ai-prob-draw-icon {
    width: 20px;
    height: 20px;
    background: #eef2f1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #69736f;
    font-size: 10px;
}

.ai-prob-bar {
    position: relative;
    height: 28px;
    background: #f7f9f8;
    border-radius: 8px;
    overflow: hidden;
}

.ai-prob-fill {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-prob-home {
    background: var(--primary);
}

.ai-prob-draw {
    background: #98a3a0;
}

.ai-prob-away {
    background: var(--accent);
}

.ai-prob-percent {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 900;
    color: var(--primary);
    font-family: 'IBM Plex Mono', monospace;
}

/* Extra Predictions */
.ai-extra-predictions {
    padding-top: 24px;
    border-top: 2px solid #eef2f1;
}

.ai-extra-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.ai-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.ai-extra-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f7f9f8;
    border-radius: 10px;
    border: 1px solid #eef2f1;
    transition: all 0.2s ease;
}

.ai-extra-item:hover {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
}

.ai-extra-item i {
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.ai-extra-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-extra-item span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-extra-item strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .ai-unified-card {
        padding: 24px 20px;
    }
    
    .ai-unified-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .ai-main-advice {
        padding: 16px 20px;
    }
    
    .advice-value {
        font-size: 18px;
    }
    
    .ai-extra-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}





/* Probability Bars - Detailed Version */
.prob-detailed-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.prob-bars-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prob-bar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prob-bar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.prob-bar-label img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.prob-draw-icon {
    width: 24px;
    height: 24px;
    background: #e4e9e7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #69736f;
    font-size: 12px;
}

.prob-bar-track {
    flex: 1;
    height: 32px;
    background: #eef2f1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.prob-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    transition: width 0.6s ease;
    position: relative;
}

.prob-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: rgba(255,255,255,0.3);
}

.prob-bar-home {
    background: linear-gradient(90deg, var(--primary) 0%, #0b5b55 100%);
}

.prob-bar-draw {
    background: linear-gradient(90deg, #98a3a0 0%, #ccd4d2 100%);
    color: #4c5551;
}

.prob-bar-away {
    background: linear-gradient(90deg, var(--accent-dark) 0%, var(--accent) 100%);
    color: var(--primary);
}

.prob-bar-value {
    font-size: 13px;
    font-weight: 900;
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* AI Detailed Card */
.ai-detailed-card {
    background: linear-gradient(135deg, var(--primary) 0%, #0a3733 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 44px 16px rgba(0,30,40,0.15);
    position: relative;
    overflow: hidden;
}

.ai-detailed-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.15) 0%, transparent 70%);
}

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

.ai-icon-box {
    width: 48px;
    height: 48px;
    background: var(--accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.ai-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ai-header p {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.ai-predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    position: relative;
    z-index: 1;
}

.ai-pred-item {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.ai-pred-item:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--accent);
}

.ai-pred-main {
    grid-column: 1 / -1;
    background: rgba(15, 118, 110, 0.15);
    border-color: var(--accent);
}

.ai-pred-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.ai-pred-value {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: white;
    line-height: 1.3;
}

.ai-pred-main .ai-pred-value {
    font-size: 20px;
}

/* Match Details Grid */
.match-details-section {
    margin-bottom: 24px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.detail-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
}

.detail-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.1);
    transform: translateY(-2px);
}

.detail-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary) 0%, #0b5b55 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.detail-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.3;
}

.detail-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

/* Coaches Detailed Section */
.coaches-detailed-section {
    margin-bottom: 24px;
}

.coaches-detailed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.coach-detailed-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coach-detailed-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.coach-detailed-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,30,40,0.1);
    transform: translateY(-4px);
}

.coach-detailed-card:hover::before {
    transform: scaleX(1);
}

.coach-photo-container {
    position: relative;
    flex-shrink: 0;
}

.coach-photo-container img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.2);
}

.coach-team-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.coach-team-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.coach-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coach-name-detailed {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.3;
}

.coach-team-detailed {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.coach-formation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(0,30,40,0.05) 0%, rgba(15, 118, 110, 0.05) 100%);
    border-radius: 8px;
    width: fit-content;
}

.coach-formation i {
    color: var(--accent);
    font-size: 12px;
}

.coach-formation span {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    font-family: 'IBM Plex Mono', monospace;
}

/* Responsive */
@media (max-width: 768px) {
    .prob-bar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .prob-bar-label {
        min-width: auto;
    }
    
    .prob-bar-track {
        height: 28px;
    }
    
    .ai-header {
        flex-direction: column;
        text-align: center;
    }
    
    .ai-predictions-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-pred-main {
        grid-column: 1;
    }
    
    .details-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .coaches-detailed-grid {
        grid-template-columns: 1fr;
    }
    
    .coach-detailed-card {
        flex-direction: column;
        text-align: center;
    }
    
    .coach-formation {
        margin: 0 auto;
    }
}

/* ===== OLD MINIMAL STYLES (KEEP FOR COMPATIBILITY) ===== */

/* Probability Bar - Elegant & Minimal */
.prob-minimal-section {
    background: linear-gradient(135deg, rgba(0,30,40,0.02) 0%, rgba(15, 118, 110, 0.02) 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(15, 118, 110, 0.1);
}

.prob-minimal-bar {
    display: flex;
    height: 12px;
    border-radius: 100px;
    overflow: hidden;
    background: #eef2f1;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.prob-min-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.prob-min-segment:hover {
    filter: brightness(1.1);
}

.prob-min-segment span {
    position: absolute;
    top: -32px;
    font-size: 14px;
    font-weight: 900;
    font-family: 'IBM Plex Mono', monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.prob-min-home {
    background: linear-gradient(90deg, var(--primary) 0%, #0b5b55 100%);
    color: white;
}

.prob-min-draw {
    background: linear-gradient(90deg, #98a3a0 0%, #ccd4d2 100%);
    color: #4c5551;
}

.prob-min-away {
    background: linear-gradient(90deg, var(--accent-dark) 0%, var(--accent) 100%);
    color: var(--primary);
}

.prob-min-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.prob-min-labels span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* AI Card - Stylish */
.ai-min-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, #0a3733 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,30,40,0.15);
}

.ai-min-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.ai-min-icon {
    font-size: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.ai-min-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.ai-min-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.ai-min-value {
    font-size: 18px;
    font-weight: 800;
    color: white;
    line-height: 1.4;
}

/* Info Grid - Clean with Accent */
.info-min-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.info-min-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-min-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-min-item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
}

.info-min-item:hover::before {
    opacity: 1;
}

.info-min-item i {
    font-size: 20px;
    color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.info-min-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-min-item span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.info-min-item strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.3;
}

/* Coaches - Elegant */
.coaches-min-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.coach-min-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coach-min-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.coach-min-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0,30,40,0.08);
}

.coach-min-card:hover::after {
    transform: scaleX(1);
}

.coach-min-card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}

.coach-min-card div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.coach-min-card strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.3;
}

.coach-min-card span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

/* Responsive */
@media (max-width: 768px) {
    .prob-minimal-section {
        padding: 20px;
    }
    
    .prob-minimal-bar {
        height: 10px;
    }
    
    .prob-min-segment span {
        font-size: 13px;
        top: -30px;
    }
    
    .prob-min-labels span {
        font-size: 10px;
    }
    
    .ai-min-card {
        padding: 20px;
    }
    
    .ai-min-icon {
        font-size: 32px;
    }
    
    .ai-min-value {
        font-size: 16px;
    }
    
    .info-min-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .coaches-min-section {
        grid-template-columns: 1fr;
    }
}

/* V2 Timeline Styles */
.timeline-v2 {
    position: relative;
    padding: 20px 0;
    margin: 0 auto;
    max-width: 800px; /* Keep max-width for larger screens */
}
.timeline-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px; /* Always left-aligned for a single column */
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-light) 0%, var(--primary) 50%, var(--primary-light) 100%);
    border-radius: 2px;
}
.event-item-v2 {
    display: flex;
    position: relative;
    margin-bottom: 25px; /* Increased spacing */
    width: 100%; /* Full width */
    align-items: center;
    padding-left: 60px; /* Space for marker and time */
    text-align: left;
}
.event-item-v2.event-home,
.event-item-v2.event-away {
    left: 0;
    padding-right: 0;
    justify-content: flex-start;
    text-align: left;
}
.event-marker-v2 {
    position: absolute;
    top: 50%;
    left: 13px; /* Aligned with the timeline line */
    width: 44px; /* Increased size for the circle */
    height: 44px; /* Increased size for the circle */
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid var(--primary);
    box-shadow: 0 4px 10px rgba(15, 118, 110, 0.2);
    transform: translateY(-50%);
    z-index: 1;
    display: flex; /* Enable flexbox for centering content */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}
.event-time-v2 {
    /* No need for left/width/position here, as it's centered by flexbox in marker */
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    text-shadow: none; /* Rimosso text-shadow per chiarezza con il nuovo colore */
    flex-shrink: 0;
    line-height: 1; /* Adjust line height to prevent clipping */
}
.event-home .event-marker-v2,
.event-away .event-marker-v2 {
    right: auto; /* Reset right property */
    left: 13px; /* Ensure consistent left alignment */
}

.event-details-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    flex-grow: 1; /* Allow details to take available space */
    transition: all 0.3s ease;
}

.event-details-v2:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.08);
    border-color: var(--primary-light);
}

.event-home .event-details-v2,
.event-away .event-details-v2 {
    flex-direction: row; /* Always row direction */
}
.event-team-logo {
    width: 26px; /* Dimensione dello scudetto */
    height: 26px; /* Dimensione dello scudetto */
    object-fit: contain;
    margin-right: 10px; /* Spazio tra il logo e l'icona/testo */
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.event-icon-v2 {
    font-size: 18px; /* Slightly larger icon */
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.1);
}
.event-content-v2 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.event-content-v2 strong {
    font-weight: 800;
    display: block;
    color: var(--primary);
    font-size: 14px;
    letter-spacing: -0.2px;
}

.event-text-v2 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-text-v2 strong {
    font-weight: 800;
    display: block;
    color: var(--primary);
    font-size: 14px;
}

.event-player-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
}

.event-player-info .event-player-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #eef2f1;
    flex-shrink: 0;
}

.event-player-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
}

.event-player-link:hover span {
    color: var(--accent);
    text-decoration: underline;
}

.substitution-players {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}

.player-out, .player-in {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
}

.player-out .event-player-photo,
.player-in .event-player-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #eef2f1;
    flex-shrink: 0;
}

.sub-arrow-out {
    color: #dc3545; /* Red for player out */
    font-size: 14px;
    margin-left: auto; /* Push arrow to the right */
}

.sub-arrow-in {
    color: #28a745; /* Green for player in */
    font-size: 14px;
    margin-left: auto; /* Push arrow to the right */
}

/* CRONACA VUOTA — la linea del tempo che aspetta.
   Il riquadro tratteggiato di prima diceva "manca qualcosa"; qui invece la
   linea e' la stessa metafora della cronaca piena, e il punto sopra dice
   dove siamo: fermo a sinistra prima del fischio d'inizio, sul minuto e
   pulsante mentre si gioca, spento in fondo a partita finita. */
.gd-cronaca-vuota {
    margin: 20px;
    padding: 30px 22px 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fafafa 0%, var(--card-bg) 65%);
    text-align: center;
}
.gd-cv-timeline {
    max-width: 320px;
    margin: 0 auto 22px;
}
.gd-cv-binario {
    position: relative;
    height: 4px;
    border-radius: 4px;
    /* tratteggio: i minuti di cui non sappiamo niente */
    background: repeating-linear-gradient(90deg, #e3e3e0 0 5px, transparent 5px 11px);
}
.gd-cv-percorsa {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
    opacity: 0.85;
}
/* Il punto e' il marchio: cerchi concentrici che sfumano verso l'esterno. */
.gd-cv-punto {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.16), 0 0 0 11px rgba(15, 118, 110, 0.07);
}
.gd-cronaca-vuota.stato-viva .gd-cv-punto {
    animation: gd-cv-batte 1.8s ease-out infinite;
}
@keyframes gd-cv-batte {
    0%, 100% { box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.18), 0 0 0 11px rgba(15, 118, 110, 0.08); }
    50%      { box-shadow: 0 0 0 9px rgba(15, 118, 110, 0.10), 0 0 0 17px rgba(15, 118, 110, 0.03); }
}
/* Partita finita o non giocata: non c'e' piu' niente da aspettare, il
   petrolio sparisce e resta il grigio. */
.gd-cronaca-vuota.stato-chiusa .gd-cv-percorsa,
.gd-cronaca-vuota.stato-ferma .gd-cv-percorsa {
    background: #dcdcd9;
    opacity: 1;
}
.gd-cronaca-vuota.stato-chiusa .gd-cv-punto,
.gd-cronaca-vuota.stato-ferma .gd-cv-punto {
    background: #b5b5b0;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.045);
}
.gd-cv-tacche {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-light);
    opacity: 0.7;
}
.gd-cronaca-vuota h4 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
    margin: 0 0 8px 0;
}
.gd-cronaca-vuota p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0 auto;
    max-width: 420px;
}
/* FORMAZIONI VUOTE — il campo con le sagome al posto degli undici.
   Stessa idea della cronaca vuota: invece di dire che manca qualcosa, si
   disegna la forma di quello che manca. Le sagome respirano solo quando le
   formazioni stanno per uscire; se non arriveranno mai restano ferme. */
.gd-formazioni-vuote {
    margin: 4px 0 8px;
    padding: 26px 22px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fafafa 0%, var(--card-bg) 65%);
    text-align: center;
}
.gd-fv-campo {
    display: block;
    width: 100%;
    max-width: 330px;
    margin: 0 auto 20px;
}
.gd-fv-linee {
    color: #e4e4e1;
}
.gd-fv-omini {
    color: #cfcfca;
}
.gd-formazioni-vuote.stato-vicine .gd-fv-omini {
    color: var(--primary);
    opacity: 0.45;
    animation: gd-fv-respira 2.6s ease-in-out infinite;
}
@keyframes gd-fv-respira {
    0%, 100% { opacity: 0.28; }
    50%      { opacity: 0.6; }
}
.gd-formazioni-vuote h3 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
    margin: 0 0 8px 0;
}
.gd-formazioni-vuote p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0 auto;
    max-width: 420px;
}
@media (prefers-reduced-motion: reduce) {
    .gd-formazioni-vuote.stato-vicine .gd-fv-omini { animation: none; }
}

/* STATISTICHE VUOTE — le barre di confronto senza i numeri.
   Stessa forma delle quattro righe in cima alla scheda quando i dati ci sono:
   due cifre, il nome in mezzo, la barra divisa. Al posto delle cifre un
   trattino, al posto della barra piena il tratteggio. */
.gd-stats-vuote {
    margin: 4px 0 8px;
    padding: 26px 22px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fafafa 0%, var(--card-bg) 65%);
    text-align: center;
}
.gd-sv-righe {
    max-width: 340px;
    margin: 0 auto 22px;
    display: grid;
    gap: 14px;
}
.gd-sv-riga {
    display: grid;
    grid-template-columns: 26px 1fr 26px;
    align-items: center;
    gap: 8px 10px;
}
.gd-sv-cifra {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    color: #c4c4bf;
}
.gd-sv-nome {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-light);
    opacity: 0.75;
}
/* Il vuoto in mezzo e' largo apposta: con 4px il tratteggio delle due meta'
   sembrava una riga sola e la barra non si leggeva piu' come un confronto. */
.gd-sv-barra {
    grid-column: 1 / -1;
    display: flex;
    gap: 14px;
    height: 5px;
}
.gd-sv-barra span {
    flex: 1;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, #dcdcd8 0 5px, transparent 5px 11px);
}
/* Mentre si gioca i numeri possono ancora arrivare: le righe respirano una
   dopo l'altra. A partita finita restano ferme, perche' non arrivera' niente. */
.gd-stats-vuote.stato-viva .gd-sv-riga {
    animation: gd-sv-attesa 2.4s ease-in-out infinite;
    animation-delay: var(--gd-sv-ritardo, 0s);
}
@keyframes gd-sv-attesa {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.gd-stats-vuote h3 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
    margin: 0 0 8px 0;
}
.gd-stats-vuote p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0 auto;
    max-width: 420px;
}
@media (prefers-reduced-motion: reduce) {
    .gd-stats-vuote.stato-viva .gd-sv-riga { animation: none; }
}

/* Il pulsante e' lo stesso per tutti gli stati vuoti della pagina. */
.gd-cv-azione,
.gd-fv-azione,
.gd-sv-azione {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 9px 16px;
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.07);
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.gd-cv-azione:hover,
.gd-fv-azione:hover,
.gd-sv-azione:hover {
    background: rgba(15, 118, 110, 0.13);
    border-color: rgba(15, 118, 110, 0.35);
}
.gd-cv-azione svg,
.gd-fv-azione svg,
.gd-sv-azione svg {
    width: 14px;
    height: 14px;
}
@media (prefers-reduced-motion: reduce) {
    .gd-cronaca-vuota.stato-viva .gd-cv-punto { animation: none; }
}

/* Responsive Timeline - Adjustments for smaller screens */
@media (max-width: 768px) {
    .timeline-v2 {
        padding: 15px 0;
    }
    .timeline-v2::before {
        left: 20px; /* Sposta la linea temporale più a destra per dare spazio */
    }
    .event-item-v2 {
        padding-left: 65px; /* Aumenta il padding per evitare sovrapposizioni con il marker */
        margin-bottom: 20px;
    }
    .event-time-v2 {
        font-size: 16px; /* Aumentato per migliore leggibilità */
        white-space: nowrap;
        min-width: 30px; /* Leggermente aumentato */
    }
    .event-marker-v2 {
        left: 15px; /* Posiziona il marker sulla linea temporale */
        min-width: 40px; /* Larghezza minima per la forma a pillola */
        height: 26px; /* Altezza per la forma a pillola */
        border-radius: 13px; /* Forma a pillola */
        border-width: 2px;
        padding: 0 8px; /* Padding interno per il testo */
    }
    .event-details-v2 {
        padding: 12px 15px; /* Aumentato */
        gap: 10px; /* Aumentato */
    }
    .event-icon-v2 {
        width: 32px; /* Aumentato */
        height: 32px; /* Aumentato */
        font-size: 18px; /* Aumentato */
    }
    .event-text-v2 {
        font-size: 14px; /* Aumentato */
    }
    .event-text-v2 strong {
        font-size: 15px; /* Aumentato per i nomi dei giocatori */
    }
    .event-text-v2 span {
        font-size: 12px; /* Aumentato */
    }
    .gd-cronaca-vuota {
        margin: 15px;
        padding: 26px 16px 22px;
    }
    .gd-cv-timeline {
        max-width: 260px;
        margin-bottom: 20px;
    }
    .gd-cronaca-vuota h4 {
        font-size: 16px;
    }
    .gd-cronaca-vuota p {
        font-size: 13px;
    }
    .gd-formazioni-vuote {
        padding: 22px 14px 20px;
    }
    .gd-fv-campo {
        max-width: 280px;
        margin-bottom: 18px;
    }
    .gd-formazioni-vuote h3 {
        font-size: 16px;
    }
    .gd-formazioni-vuote p {
        font-size: 13px;
    }
    .gd-stats-vuote {
        padding: 22px 14px 20px;
    }
    .gd-sv-righe {
        max-width: 280px;
        margin-bottom: 18px;
    }
    .gd-stats-vuote h3 {
        font-size: 16px;
    }
    .gd-stats-vuote p {
        font-size: 13px;
    }
}

/* Premium H2H Section */
.match-info-details-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #e4e9e7;
}

.match-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: center;
    padding: 5px 0;
}

@media (max-width: 1024px) {
    .match-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .match-info-details-card {
        padding: 15px;
    }
    
    .match-info-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

.info-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: #f7f9f8;
    border-radius: 12px;
    border: 1px solid #eef2f1;
    transition: all 0.2s ease;
}

.info-detail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #e4e9e7;
}

.info-inline {
    display: inline-block;
    white-space: nowrap;
}

.info-icon-box {
    width: 32px;
    height: 32px;
    background: #f7f9f8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid #eef2f1;
}

.info-label {
    font-size: 10px;
    color: #98a3a0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.info-value {
    font-size: 13px;
    color: #363f3c;
    font-weight: 700;
    line-height: 1.3;
}

.info-value-small {
    font-size: 14px;
}

.info-stadium { color: var(--primary); }
.info-referee { color: var(--rosso); }
.info-weather { color: var(--primary); }
.info-age { color: var(--primary); }
.info-league { color: #f59e0b; }

/* Injuries Section Refined */
.injuries-premium-section {
    margin-top: 25px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #e4e9e7;
}

.injuries-header {
    background: #f7f9f8;
    padding: 15px 20px;
    border-bottom: 1px solid #e4e9e7;
}

.injuries-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary);
    display: flex;
    align-items: center;
}

.injuries-header h3 i {
    margin-right: 10px;
    color: var(--rosso);
}

.injuries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}

.injuries-team-col {
    padding: 20px;
}

.injuries-team-col:first-child {
    border-right: 1px solid #eef2f1;
}

.injuries-team-col h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.injuries-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.injury-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fdf2f2;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #fdeaee;
    transition: transform 0.2s ease;
}

.injury-item:hover {
    transform: translateX(5px);
}

.injury-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.injury-player-photo {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #fdeaee;
    object-fit: cover;
}

.injury-player-details {
    display: flex;
    flex-direction: column;
}

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

.injury-type {
    font-size: 11px;
    color: #69736f;
    font-weight: 600;
}

.injury-reason {
    font-size: 12px;
    color: var(--rosso);
    font-weight: 700;
    background: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #fdeaee;
}

.no-injuries {
    font-size: 13px;
    color: #98a3a0;
    font-style: italic;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.no-injuries i {
    color: var(--primary);
}

@media (max-width: 768px) {
    .injuries-grid {
        grid-template-columns: 1fr;
    }
    .injuries-team-col:first-child {
        border-right: none;
        border-bottom: 1px solid #eef2f1;
    }
}

.h2h-premium-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid #eef2f1;
}

.h2h-premium-header {
    background: #f7f9f8;
    padding: 20px;
    border-bottom: 1px solid #eef2f1;
}

.h2h-premium-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #1f2724;
}

.h2h-premium-header h3 span {
    font-size: 14px;
    color: #98a3a0;
    font-weight: 400;
    margin-left: 10px;
}

.h2h-main-stats {
    padding: 30px;
}

.h2h-total-matches {
    text-align: center;
    margin-bottom: 25px;
}

.h2h-total-matches strong {
    display: block;
    font-size: 32px;
    color: #1f2724;
    line-height: 1;
}

.h2h-total-matches span {
    font-size: 14px;
    color: #69736f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.h2h-visual-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.h2h-team-left, .h2h-team-right {
    width: 100%;
    text-align: center;
}

.h2h-team-left img, .h2h-team-right img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

.h2h-team-name {
    font-size: 14px;
    font-weight: 800;
    color: #1f2724;
}

.h2h-team-perc {
    font-size: 14px;
    color: #69736f;
    font-weight: 600;
}

.h2h-progress-container {
    width: 100%;
}

.h2h-progress-multi {
    display: flex;
    height: 35px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-part {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.progress-part.win-home { background: #82c91e; }
.progress-part.draw { background: #ffd43b; color: #1f2724; }
.progress-part.win-away { background: #ff6b6b; }

.h2h-labels-row {
    display: flex;
    justify-content: space-between;
}

.label-item {
    font-size: 13px;
    color: #69736f;
    font-weight: 600;
}

.h2h-summary-text {
    background: #f7f9f8;
    padding: 15px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #4c5551;
    margin-bottom: 30px;
    text-align: center;
}

.h2h-stats-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .h2h-visual-bar {
        flex-direction: row;
        justify-content: space-between;
    }
    .h2h-team-left, .h2h-team-right { width: 120px; }
    .h2h-stats-cards { grid-template-columns: repeat(3, 1fr); }
}

.stat-mini-card {
    background: #fff;
    padding: 12px;
    border: 1px solid #eef2f1;
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-mini-value {
    font-size: 16px;
    font-weight: 800;
    color: #1f2724;
    margin-bottom: 2px;
}

.stat-mini-value span {
    font-size: 11px;
    color: #98a3a0;
    font-weight: 600;
    text-transform: uppercase;
}

.stat-mini-sub {
    font-size: 11px;
    color: #69736f;
    margin-bottom: 10px;
}

.stat-mini-bar {
    height: 6px;
    background: #eef2f1;
    border-radius: 3px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.stat-mini-bar div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Scrollable History List */
.h2h-history-list-container {
    border-top: 1px solid #eef2f1;
    padding-top: 25px;
}

.h2h-history-header {
    font-size: 14px;
    font-weight: 700;
    color: #69736f;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef2f1;
    display: inline-block;
}

.h2h-history-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: #ccd4d2 #f7f9f8;
}

.h2h-history-scroll::-webkit-scrollbar {
    height: 6px;
}

.h2h-history-scroll::-webkit-scrollbar-track {
    background: #f7f9f8;
}

.h2h-history-scroll::-webkit-scrollbar-thumb {
    background-color: #ccd4d2;
    border-radius: 10px;
}

.h2h-history-item {
    flex: 0 0 160px;
    background: #f7f9f8;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #eef2f1;
}

.h2h-item-date {
    font-size: 11px;
    color: #98a3a0;
    margin-bottom: 8px;
}

.h2h-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.h2h-item-row span {
    font-size: 12px;
    color: #4c5551;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.h2h-item-row strong {
    font-size: 13px;
    color: #1f2724;
}

.h2h-item-row.winner span {
    font-weight: 700;
    color: #1f2724;
}

.h2h-item-row.winner strong {
    color: #82c91e;
}

/* Prediction Premium Card */
.prediction-premium-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 1px solid #eef2f1;
    overflow: hidden;
}

.prediction-header {
    background: var(--gradient);
    padding: 15px 20px;
    color: white;
}

.prediction-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.prediction-header h3 i {
    color: #ffffff;
}

.prediction-body {
    padding: 25px;
}

.prob-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.prob-labels span {
    font-size: 12px;
    font-weight: 700;
    color: #69736f;
    text-transform: uppercase;
}

.prediction-body {
    padding: 15px !important;
}

.expert-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.expert-badge-mini .badge-prediction {
    width: 40px;
    height: 40px;
    font-size: 15px;
    border-radius: 8px;
}

.expert-advice-mini {
    font-size: 15px;
    color: #1f2724;
}

.expert-advice-mini .label {
    color: #98a3a0;
    margin-right: 5px;
    font-size: 13px;
}

/* Quando l'API non ha ancora dati la barra non si disegna e resta questa riga:
   vedi probabilita_hanno_senso() in match.php. */
.prediction-empty {
    margin: 15px 0 0;
    padding: 12px 14px;
    background: #f4f6f5;
    border-left: 3px solid #d5dbd9;
    border-radius: 6px;
    color: #5c6763;
    font-size: 13px;
    line-height: 1.5;
}

.prob-bar-minimal {
    display: flex;
    height: 32px;
    gap: 8px;
    background: transparent;
    overflow: visible;
}

.prob-bar-minimal .prob-segment {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1f2724;
    font-size: 13px;
    font-weight: 800;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Colori più tenui e moderni per differenziarli dall'H2H */
.prob-bar-minimal .prob-segment.home { background: #94d82d; }
.prob-bar-minimal .prob-segment.draw { background: #fab005; }
.prob-bar-minimal .prob-segment.away { background: #ff8787; }

.prob-bar-minimal .prob-segment span {
    font-size: 10px;
    color: #1f2724;
    opacity: 0.8;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: -2px;
}

@media (max-width: 768px) {
    .expert-strip {
        gap: 8px;
    }
    .expert-advice-mini {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .h2h-visual-bar {
        flex-direction: column;
        gap: 15px;
    }
    
    .h2h-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .h2h-main-stats {
        padding: 20px;
    }
}

/* V2 H2H Info Section Styles */
.h2h-main-stats-v2 {
    padding: 25px;
}

.h2h-total-matches-v2 {
    text-align: center;
    margin-bottom: 30px;
}

.h2h-total-matches-v2 strong {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: #1f2724;
    line-height: 1;
}

.h2h-total-matches-v2 span {
    font-size: 14px;
    font-weight: 700;
    color: #98a3a0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.h2h-teams-comp-v2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.h2h-team-item-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

.h2h-team-item-v2 img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 12px;
}

.h2h-team-item-v2 .name {
    font-size: 15px;
    font-weight: 800;
    color: #1f2724;
    margin-bottom: 4px;
}

.h2h-team-item-v2 .perc {
    font-size: 14px;
    color: #98a3a0;
    font-weight: 600;
}

.h2h-vs-v2 {
    font-size: 18px;
    font-weight: 800;
    color: #98a3a0;
}

.h2h-progress-wrap-v2 {
    margin-bottom: 35px;
}

.h2h-progress-bar-v2 {
    display: flex;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    background: #eef2f1;
}

.h2h-progress-bar-v2 .part {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.3s ease;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.h2h-progress-bar-v2 .win-home { background: #82c91e; }
.h2h-progress-bar-v2 .draw { background: #ffd43b; color: #1f2724; }
.h2h-progress-bar-v2 .win-away { background: #ff6b6b; }

.h2h-legend-v2 {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    color: #69736f;
    margin-bottom: 20px;
}

.h2h-legend-v2 .leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.h2h-legend-v2 .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.h2h-legend-v2 .dot.home { background: #82c91e; }
.h2h-legend-v2 .dot.draw { background: #ffd43b; }
.h2h-legend-v2 .dot.away { background: #ff6b6b; }

.h2h-legend-v2 strong {
    color: #1f2724;
    font-weight: 700;
}

.h2h-summary-box-v2 {
    background: #f7f9f8;
    border-radius: 12px;
    padding: 18px !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: #363f3c;
    text-align: left !important;
    margin-bottom: 25px !important;
    border-left: 4px solid var(--primary) !important;
}

.h2h-stats-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .h2h-teams-comp-v2 { 
        gap: 10px !important; 
        justify-content: space-between !important;
        width: 100% !important;
    }
    .h2h-team-item-v2 {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .h2h-team-item-v2 img { width: 45px; height: 45px; }
    .h2h-team-item-v2 .name { font-size: 13px; }
    .h2h-vs-v2 { font-size: 14px; flex: 0 0 auto; }
    .h2h-progress-bar-v2 { height: 35px; }
    .h2h-legend-v2 { font-size: 12px; gap: 5px; }
    .h2h-stats-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .h2h-main-stats-v2 { padding: 15px; }
}

/* ===== PROFESSIONAL STANDINGS TABLE ===== */
.standings-professional-table {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.standings-header {
    background: #f7f9f8;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid #e4e9e7;
}

.standings-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.standings-title i {
    font-size: 18px;
    color: #f59e0b;
}

.standings-title span {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.standings-legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #69736f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-dot.ucl {
    background: var(--primary);
    box-shadow: 0 0 8px rgba(0,102,204,0.5);
}

.legend-dot.uel {
    background: var(--secondary);
    box-shadow: 0 0 8px rgba(255,152,0,0.5);
}

.legend-dot.rel {
    background: #dc3545;
    box-shadow: 0 0 8px rgba(220,53,69,0.5);
}

.legend-dot.uecl {
    background: #2dd4bf;
    box-shadow: 0 0 8px rgba(0,210,255,0.5);
}

.legend-dot.other {
    background: #ccd4d2;
}

.standings-row.pos-uecl td.col-pos { border-left: 4px solid #2dd4bf; }
.standings-row.pos-other td.col-pos { border-left: 4px solid #ccd4d2; }

.standings-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 15px 15px;
}

.standings-table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: white;
}

.standings-table-modern thead th {
    position: sticky;
    top: 0;
    background: #f7f9f8;
    z-index: 10;
    border-bottom: 2px solid #e4e9e7;
}

.standings-table-modern th.col-pos,
.standings-table-modern td.col-pos {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 5;
    width: 50px;
    min-width: 50px;
    text-align: center;
}

.standings-table-modern th.col-team,
.standings-table-modern td.col-team {
    position: sticky;
    left: 50px; /* Width of col-pos */
    background: #fff;
    z-index: 5;
    min-width: 160px;
    text-align: left;
    border-right: 1px solid #eef2f1;
}

.standings-table-modern thead th.col-pos,
.standings-table-modern thead th.col-team {
    z-index: 15;
    background: #f7f9f8;
}

/* Fix for highlighting sticky columns */
.standings-row.highlight-team td.col-pos,
.standings-row.highlight-team td.col-team {
    background: #f0fdf4 !important;
}

/* Position indicator fix */
.standings-row::before {
    display: none; /* Remove the absolute tr before */
}

.standings-row.pos-ucl td.col-pos { border-left: 4px solid var(--primary); }
.standings-row.pos-uel td.col-pos { border-left: 4px solid var(--secondary); }
.standings-row.pos-rel td.col-pos { border-left: 4px solid #dc3545; }

/* Responsive hiding */
@media (max-width: 768px) {
    .col-hide-mobile {
        display: none !important;
    }
    
    .standings-table-modern th.col-team,
    .standings-table-modern td.col-team {
        min-width: 140px;
        left: 50px; /* Reduced width of col-pos on mobile */
    }
    
    .standings-table-modern th.col-pos,
    .standings-table-modern td.col-pos {
        width: 50px;
    }
}

.standings-row {
    border-bottom: 1px solid #eef2f1;
    transition: all 0.2s ease;
    position: relative;
}

.standings-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: all 0.3s ease;
}

.standings-row.pos-ucl::before {
    background: var(--primary);
}

.standings-row.pos-uel::before {
    background: var(--secondary);
}

.standings-row.pos-rel::before {
    background: #dc3545;
}

.standings-row:hover {
    background: #f7f9f8;
    transform: translateX(2px);
}

.standings-row.highlight-team {
    background: rgba(0, 230, 118, 0.08);
    font-weight: 700;
}

.standings-row.highlight-team:hover {
    background: rgba(0, 230, 118, 0.12);
}

.standings-table-modern td {
    padding: 14px 12px;
    text-align: center;
    color: var(--text);
    vertical-align: middle;
}

.col-pos {
    text-align: center;
}

.position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef2f1;
    transition: all 0.2s ease;
}

.standings-row.pos-ucl .position-badge {
    background: rgba(0, 102, 204, 0.1);
    color: var(--primary);
    font-weight: 800;
}

.standings-row.pos-uel .position-badge {
    background: rgba(255, 152, 0, 0.1);
    color: var(--secondary);
    font-weight: 800;
}

.standings-row.pos-rel .position-badge {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-weight: 800;
}

.position-number {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
}

.standings-row.pos-ucl .position-number,
.standings-row.pos-uel .position-number,
.standings-row.pos-rel .position-number {
    color: inherit;
}

.col-team {
    text-align: left;
}

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

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

.team-name {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-indicator {
    margin-left: auto;
    color: var(--accent);
    font-size: 8px;
    animation: pulse 2s infinite;
}

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

.col-stat {
    font-weight: 600;
    color: #69736f;
}

.stat-points {
    font-weight: 900;
    color: var(--primary);
    font-size: 15px;
}

.stat-win {
    color: #16a34a;
    font-weight: 700;
}

.stat-draw {
    color: #ca8a04;
    font-weight: 700;
}

.stat-loss {
    color: var(--rosso);
    font-weight: 700;
}

.stat-diff.positive {
    color: #16a34a;
    font-weight: 700;
}

.stat-diff.negative {
    color: var(--rosso);
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .standings-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 20px;
    }
    
    .standings-title {
        width: 100%;
    }
    
    .standings-title span {
        font-size: 16px;
    }
    
    .standings-legend {
        gap: 12px;
        width: 100%;
    }
    
    .legend-item {
        font-size: 10px;
    }
    
    .standings-table-wrapper {
        margin: 0 -1px;
    }
    
    .standings-table-modern {
        font-size: 12px;
    }
    
    .standings-table-modern th {
        padding: 12px 8px;
        font-size: 10px;
    }
    
    .standings-table-modern td {
        padding: 10px 8px;
    }
    
    .standings-table-modern th.col-team,
    .team-name {
        min-width: 140px;
        font-size: 12px;
    }
    
    .team-logo {
        width: 24px;
        height: 24px;
    }
    
    .position-badge {
        width: 28px;
        height: 28px;
    }
    
    .position-number {
        font-size: 12px;
    }
    
    .stat-points {
        font-size: 14px;
    }
    
    .standings-row::before {
        width: 3px;
    }
}

@media (max-width: 480px) {
    .standings-professional-table {
        border-radius: 12px;
        margin-bottom: 20px;
    }
    
    .standings-header {
        padding: 12px 15px;
    }
    
    .standings-title i {
        font-size: 16px;
    }
    
    .standings-title span {
        font-size: 14px;
    }
    
    .standings-legend {
        display: none; /* Hide legend on very small screens */
    }
    
    .standings-table-modern {
        font-size: 11px;
    }
    
    .standings-table-modern th {
        padding: 10px 6px;
        font-size: 9px;
    }
    
    .standings-table-modern td {
        padding: 8px 6px;
    }
    
    .team-info {
        gap: 8px;
    }
    
    .team-logo {
        width: 20px;
        height: 20px;
    }
    
    .team-name {
        font-size: 11px;
        min-width: 100px;
    }
    
    .position-badge {
        width: 24px;
        height: 24px;
    }
    
    .position-number {
        font-size: 11px;
    }
    
    .match-indicator {
        font-size: 6px;
    }
}

/* SCHEDA STATISTICHE — rifatta il 28/08/2026 ("proposta C").
   Prima erano quattro card in alto e quattro righe in basso: due trattamenti
   per la stessa cosa, e in nessuno dei due si capiva quale colonna fosse
   quale squadra. Due difetti veri della versione vecchia, per non rifarli:
   .detailed-fill.home e .detailed-fill.away avevano lo STESSO colore (le
   barre di dettaglio erano una riga verde uniforme che non diceva niente), e
   la meta' ospite usava #2dd4bf, cioe' il petrolio schiarito PER I FONDI
   SCURI, che su bianco si sbiadisce.
   Ora: il possesso fa da titolo, i nomi delle squadre stanno subito sotto, e
   da li' in giu' sinistra = casa e destra = trasferta per tutta la scheda. */
.gd-st {
    padding: 20px 18px 16px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    /* Due colori e basta: petrolio la casa, grigio scuro la trasferta.
       Niente colore nuovo nella tavolozza del sito. */
    --st-casa: var(--primary);
    --st-ospite: #47534f;
    --st-neutro: #dcdcd8;
}

/* --- il possesso, che fa da titolo --- */
.gd-st-possesso {
    margin-bottom: 14px;
}
.gd-st-eti-centro {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 8px;
}
.gd-st-striscia {
    display: flex;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
}
.gd-st-fetta {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #fff;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.gd-st-fetta.casa { background: var(--st-casa); }
.gd-st-fetta.ospite { background: var(--st-ospite); justify-content: flex-end; }
/* Quando una fetta e' troppo stretta perche' la percentuale ci stia dentro,
   le due cifre scendono qui, accanto ai nomi. */
.gd-st-quota {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    flex: none;
}

/* --- chi e' chi: si dice una volta, e vale per tutta la scheda --- */
.gd-st-squadre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.gd-st-squadra {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
}
.gd-st-squadra span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gd-st-squadra img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}

/* --- le righe --- */
.gd-st-lista {
    display: grid;
    gap: 2px;
}
.gd-st-riga {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
}
/* L'ambra segnala, non chiede di essere premuta: sta sull'unica riga che
   decide davvero una partita di calcio. */
.gd-st-riga.spicca {
    background: rgba(245, 158, 11, 0.10);
}
.gd-st-num {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.gd-st-num.destra {
    text-align: right;
    align-items: flex-end;
}
.gd-st-num b {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
}
.gd-st-num.top b {
    font-weight: 700;
    color: var(--text);
}
.gd-st-num small {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text-light);
    opacity: 0.8;
    margin-top: 2px;
}
.gd-st-centro {
    text-align: center;
    min-width: 0;
}
.gd-st-nome {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-light);
}
/* Corta e centrata: a piena larghezza sembrava un filo di separazione fra le
   righe invece del confronto fra due numeri. */
.gd-st-mini {
    display: flex;
    gap: 4px;
    height: 5px;
    width: 168px;
    max-width: 100%;
    margin: 6px auto 0;
}
.gd-st-mini i {
    display: block;
    height: 100%;
    border-radius: 3px;
}
.gd-st-mini .casa { background: var(--st-casa); }
.gd-st-mini .ospite { background: var(--st-ospite); }
/* Zero a zero non e' meta' e meta': e' nessuno dei due. */
.gd-st-mini.pari i { background: var(--st-neutro); }

/* --- i cartellini si disegnano, non si contano --- */
.gd-st-cartellini {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 7px auto 0;
    width: 168px;
    max-width: 100%;
}
.gd-st-cartellini .lato {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-height: 12px;
}
.gd-st-cartellini .lato.sx { justify-content: flex-end; }
.gd-st-cartellini .lato.dx { justify-content: flex-start; }
.gd-st-cartellini i {
    display: block;
    width: 7px;
    height: 10px;
    border-radius: 1.5px;
}
.gd-st-cartellini i.giallo { background: var(--secondary); }
.gd-st-cartellini i.rosso { background: var(--rosso); }
.gd-st-cartellini em {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
}

@media (max-width: 480px) {
    .gd-st {
        padding: 16px 12px 12px;
    }
    .gd-st-riga {
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
        padding: 8px 6px;
    }
    .gd-st-squadra {
        font-size: 11.5px;
    }
    .gd-st-nome {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
}


/* LE DUE SQUADRE — 28/08/2026.
   Non e' un pronostico: e' il profilo delle due squadre. Sta nella scheda INFO
   sotto il blocco delle probabilita' proprio per questo — quello dice cosa
   potrebbe succedere e quasi sempre non lo sa, questo dice cosa e' successo. */
.gd-ds {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 20px 18px 16px;
    margin-bottom: 30px;
    --ds-casa: var(--primary);
    --ds-ospite: #47534f;
    --ds-neutro: #d8dcda;
}
.gd-ds-testa {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.gd-ds-testa h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--primary);
}
.gd-ds-testa p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-light);
}
.gd-ds-sezione + .gd-ds-sezione {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.gd-ds-eti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 14px;
}
.gd-ds-legenda {
    display: flex;
    gap: 12px;
    letter-spacing: 0.4px;
}
.gd-ds-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gd-ds-legenda i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}
.gd-ds-legenda i.fatti { background: var(--ds-casa); }
.gd-ds-legenda i.subiti { background: var(--ds-neutro); }
.gd-ds-coppia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.gd-ds-squadra { min-width: 0; }
.gd-ds-nome {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.gd-ds-nome img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: none;
}
.gd-ds-nome span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- in casa e fuori --- */
.gd-ds-riga {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    /* La meta' che non riguarda questa partita resta leggibile ma non compete
       con quella che conta. */
    opacity: 0.55;
}
.gd-ds-riga.qui { opacity: 1; }
.gd-ds-dove {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-light);
}
.gd-ds-vnp {
    display: flex;
    gap: 2px;
    height: 7px;
    grid-column: 2;
}
.gd-ds-vnp i {
    display: block;
    height: 100%;
    border-radius: 3px;
}
/* Gli stessi tre colori del W-D-L in classifica: vittoria petrolio, pareggio
   grigio, sconfitta rossa. */
.gd-ds-vnp i.v { background: var(--primary); }
.gd-ds-vnp i.n { background: var(--ds-neutro); }
.gd-ds-vnp i.p { background: var(--rosso); }
.gd-ds-vnp i.z { background: var(--ds-neutro); opacity: 0.5; }
.gd-ds-cifre {
    grid-column: 2;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    margin-top: 2px;
}

/* --- quando segnano --- */
.gd-ds-orologio {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    align-items: end;
}
.gd-ds-fascia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.gd-ds-colonne {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 54px;
    width: 100%;
}
.gd-ds-colonne i {
    display: block;
    width: 7px;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
}
.gd-ds-colonne i.fatti { background: var(--ds-casa); }
.gd-ds-colonne i.subiti { background: var(--ds-neutro); }
.gd-ds-minuti {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 8.5px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}
.gd-ds-somma {
    margin-top: 10px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
}

@media (max-width: 560px) {
    .gd-ds {
        padding: 16px 12px 12px;
    }
    /* Sotto i 560px due grafici affiancati darebbero colonne larghe tre pixel:
       le squadre si impilano. */
    .gd-ds-coppia {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .gd-ds-minuti {
        font-size: 9px;
    }
}
/* Odds Summary Widget */
.odds-summary-premium {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 1px solid #eef2f1;
    overflow: hidden;
}

.odds-summary-header {
    background: #f7f9f8;
    padding: 15px 20px;
    border-bottom: 1px solid #eef2f1;
}

.odds-summary-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2724;
    display: flex;
    align-items: center;
    gap: 10px;
}

.odds-summary-header h3 i {
    color: var(--primary);
}

.odds-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}

.odds-summary-card {
    background: #f7f9f8;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #eef2f1;
}

.odds-market-title {
    font-size: 11px;
    font-weight: 800;
    color: #98a3a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.odds-market-values {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.odds-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e4e9e7;
    transition: all 0.2s ease;
}

.odds-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
}

.odds-label {
    font-size: 10px;
    font-weight: 800;
    color: #69736f;
}

.odds-val {
    font-size: 15px;
    font-weight: 900;
    color: #1f2724;
    font-family: 'IBM Plex Mono', monospace;
}

.odds-summary-footer {
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #eef2f1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    transition: all 0.2s ease;
}

.odds-summary-footer:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.odds-summary-footer i {
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.odds-summary-footer:hover i {
    transform: translateX(5px);
}

/* H2H Section Styles */
.h2h-summary {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.h2h-stats-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.h2h-stats-title i {
    color: var(--accent);
}

.h2h-progress-container {
    margin-bottom: 20px;
}

.h2h-progress-bar {
    height: 12px;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f1;
}

.h2h-progress-item {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.h2h-home { background: var(--primary); }
.h2h-draw { background: #98a3a0; }
.h2h-away { background: var(--accent); }

.h2h-legend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.h2h-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.h2h-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.h2h-legend-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.h2h-legend-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
}

.h2h-legend-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.h2h-match-item {
    background: white;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 80px 1fr 100px 60px;
    align-items: center;
    transition: all 0.2s ease;
}

.h2h-match-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    border-color: var(--accent);
}

.h2h-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
}

.h2h-teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.h2h-team {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.h2h-team img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.h2h-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #f7f9f8;
    border-radius: 8px;
    padding: 8px;
}

.h2h-score {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    display: flex;
    gap: 10px;
}

.h2h-status {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-light);
    text-align: center;
    background: #eef2f1;
    padding: 4px 8px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .h2h-match-item {
        grid-template-columns: 1fr 80px;
        gap: 10px;
    }
    
    .h2h-date {
        grid-column: 1 / 3;
        margin-bottom: 5px;
    }
    
    .h2h-status {
        display: none;
    }
}

/* Modern Odds (Quote) Section */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.quote-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.quote-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: var(--accent);
}

.quote-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quote-bm-logo {
    width: 80px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: #ffffff;
    padding: 2px;
    border: 1px solid #eef2f1;
}

.quote-bm-info {
    flex: 1;
}

.quote-bm-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
}

.quote-bonus-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(168, 85, 247, 0.1));
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    margin-top: 5px;
    border: 1px solid rgba(15, 118, 110, 0.1);
}

.quote-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: #f7f9f8;
    padding: 15px;
    border-radius: 16px;
}

.quote-val-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.quote-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-light);
    text-transform: uppercase;
}

.quote-odd {
    font-size: 18px;
    font-weight: 900;
    color: var(--primary);
    font-family: 'IBM Plex Mono', monospace;
}

.quote-cta-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #0b5b55 100%);
    color: white !important;
    text-decoration: none !important;
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0,30,40,0.15);
}

.quote-cta-btn:hover {
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    color: var(--primary) !important;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.25);
}

.quote-cta-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.quote-cta-btn:hover i {
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .quote-grid {
        grid-template-columns: 1fr;
    }
    
    .quote-card {
        padding: 20px;
    }
}

/* Modern Quote Row List */
.quote-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.quote-item-row {
    background: white;
    border-radius: 16px;
    padding: 12px 20px;
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 240px 1fr 140px;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.quote-item-row:hover {
    transform: translateX(5px);
    border-color: var(--accent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.quote-row-bm {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quote-row-logo {
    width: 70px;
    height: 35px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 6px;
    padding: 2px;
    border: 1px solid #eef2f1;
}

.quote-row-info {
    display: flex;
    flex-direction: column;
}

.quote-row-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
}

.quote-row-bonus {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-light);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 4px;
    border: 1px solid var(--primary-light);
}

.quote-row-values {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.quote-row-val {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}

.quote-row-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 2px;
}

.quote-row-odd {
    font-size: 17px;
    font-weight: 900;
    color: var(--primary);
    font-family: 'IBM Plex Mono', monospace;
}

.quote-row-cta {
    background: linear-gradient(135deg, #DAA520 0%, #FF8C00 100%); /* Giallo Ocra -> Arancio Scuro */
    color: white !important;
    text-decoration: none !important;
    padding: 8px 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
}

.quote-row-cta:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 140, 0, 0.3);
}

@media (max-width: 992px) {
    .quote-item-row {
        grid-template-columns: 180px 1fr 120px;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .quote-item-row {
        grid-template-columns: 1fr auto;
        padding: 15px;
        gap: 15px;
    }
    
    .quote-row-values {
        grid-column: 1 / 3;
        justify-content: space-between;
        background: #f7f9f8;
        padding: 12px;
        border-radius: 12px;
        gap: 10px;
    }
    
    .quote-row-cta {
        padding: 8px 12px;
    }
}

/* Awin Product Banner */
.awin-products-container {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.awin-product-banner {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e4e9e7;
    flex: 1;
    min-width: 280px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

.awin-product-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.awin-banner-title {
    font-size: 11px;
    font-weight: 800;
    color: #98a3a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eef2f1;
    padding-bottom: 5px;
}

.awin-product-content {
    display: flex;
    gap: 15px;
    align-items: center;
}

.awin-product-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9f8;
    border-radius: 8px;
    padding: 5px;
}

.awin-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.awin-product-info {
    flex-grow: 1;
}

.awin-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2724;
    margin: 0 0 5px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.awin-product-price {
    margin-bottom: 5px;
}

.awin-product-price .price-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
}

.awin-merchant {
    font-size: 12px;
    color: #98a3a0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.awin-merchant b {
    color: #4c5551;
    font-weight: 600;
}

.btn-buy-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff !important;
    text-decoration: none !important;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s;
    width: 100%;
    justify-content: center;
}

.btn-buy-now:hover {
    background: var(--accent);
}


/* --- Conto alla rovescia al calcio d'inizio (20/08/2026) ------------------
   Sta dentro la fascia scura della scheda partita, quindi i riquadri sono
   traslucidi sul fondo invece che grigi: un grigio pieno li' sopra farebbe
   macchia. Il carattere e' IBM Plex Mono perche' le cifre hanno tutte la
   stessa larghezza: senza, il riquadro balla a ogni secondo che passa. */
.match-countdown {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 9px;
    /* .detail-score e' flex: 0 0 160px, quindi i riquadri devono starci dentro */
    max-width: 100%;
}
/* Correzione: il conto NON sta sulla fascia scura, sta dentro la scheda
   bianca. Con riquadri bianchi traslucidi e cifre bianche era invisibile —
   c'era, misurava 138x44 px, e non si vedeva. */
.mc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 38px;
    padding: 6px 5px;
    background: #eef2f1;
    border-radius: 8px;
}
.mc-val {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.mc-lab {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #98a3a0;
}
@media (max-width: 640px) {
    .mc-box { min-width: 36px; padding: 6px 4px; }
    .mc-val { font-size: 15px; }
}

/* ==========================================================================
   TESTATA PARTITA — rifatta il 20/08/2026, sobria e compatta
   --------------------------------------------------------------------------
   Prima: fascia colorata alta 140px di solo riempimento, scheda bianca tirata
   dentro con margine negativo, stemmi da 88px, punteggio da 52px. Sul telefono
   quella testata occupava quasi tutto il primo schermo: si apriva una partita
   e si vedevano due stemmi.
   Adesso: nessuna banda colorata, scheda bianca su grigio chiaro, il colore
   resta solo nei dettagli (conto alla rovescia, schede, collegamenti).
   Sono tutte sovrascritture: il markup non e' stato toccato, cosi' gli
   aggiornamenti del punteggio in tempo reale continuano a funzionare.
   ========================================================================== */

.detail-header {
    background: transparent !important;
    color: #15191c !important;
    padding: 14px 16px 34px !important;
}
/* dentro la fascia il testo era bianco su bianco: va riportato scuro */
.detail-header,
.detail-header * {
    color: inherit;
}
.detail-header div[style*="color: #98a3a0"] {
    color: #69736f !important;
}
/* la pillola del torneo era bianca traslucida su fondo scuro */
.detail-header [class*="league-pill"],
.detail-header [style*="rgba(255, 255, 255"] {
    background: #eef1f3 !important;
    color: #15191c !important;
}

.scoreboard-card {
    margin: -22px 12px 14px !important;
    padding: 18px 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
    border: 1px solid #e6e9ec !important;
}

/* stemmi: da 88 a 54, e il nome piu' contenuto */
.detail-team img {
    width: 54px !important;
    height: 54px !important;
}
.detail-team {
    gap: 7px;
}
.main-score-display {
    font-size: 34px !important;
    letter-spacing: -0.5px !important;
}
.detail-score {
    flex: 0 0 150px !important;
}

/* --- telefono: e' li' che sta il traffico ------------------------------- */
@media (max-width: 640px) {
    .detail-header { padding: 10px 12px 28px !important; }
    .scoreboard-card { margin: -18px 8px 10px !important; padding: 14px 10px !important; }
    .detail-team img { width: 42px !important; height: 42px !important; }
    .main-score-display { font-size: 27px !important; }
    .detail-score { flex: 0 0 110px !important; }
    /* L'andamento resta anche sul telefono: la forma di una squadra e'
       informazione, non decorazione. A raddoppiare l'altezza non erano i
       risultati ma gli stemmi degli avversari sotto ognuno, piu' l'etichetta.
       Restano i cinque esiti in fila e la linea di tendenza. */
    .detail-team .form-section-header { margin-top: 8px !important; }
    .detail-team .form-section-header > div:first-child { display: none !important; }
    .detail-team .form-dots-container { margin-top: 0 !important; gap: 4px !important; }
    .detail-team .form-dots-container .form-team-logo { display: none !important; }
    .detail-team .form-badge { width: 19px !important; height: 19px !important; font-size: 9.5px !important; border-radius: 5px !important; }
    .mc-box { min-width: 32px !important; padding: 5px 3px !important; }
    .mc-val { font-size: 14px !important; }
}

/* La pillola del torneo era pensata per la fascia scura: bianca traslucida con
   testo bianco. Tolta la fascia diventava bianca su bianco, cioe' invisibile,
   e con lei spariva il nome della competizione. */
.match-league-badge-container {
    display: inline-flex !important;
    align-items: center !important;
    /* bianca con un filo di bordo invece che grigia piena: sotto il nome del
       campionato non serve un blocco di colore, serve solo staccare dal fondo */
    background: #ffffff !important;
    border: 1px solid #e4e9e7 !important;
    color: #15191c !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    backdrop-filter: none !important;
}
.match-league-badge-container span { color: #15191c !important; }

@media (max-width: 640px) {
    .match-league-badge-container { font-size: 10.5px !important; padding: 5px 11px !important; }
}

/* ==========================================================================
   CRONACA DELLA PARTITA — ridisegnata il 20/08/2026
   --------------------------------------------------------------------------
   Prima: cerchi da 44 px, 25 px fra un episodio e l'altro, tutti uguali. Una
   partita con dieci episodi diventava lunghissima da scorrere, e soprattutto
   un gol pesava visivamente quanto una sostituzione — che e' il contrario di
   come si legge una partita.
   Adesso: righe compatte, e i GOL si distinguono da soli con un fondo tenue
   e il minuto in petrolio. Il resto resta silenzioso.
   ========================================================================== */

.timeline-v2 { padding: 6px 0 !important; }
.timeline-v2::before {
    left: 26px !important;
    width: 2px !important;
    background: #e4e9e7 !important;
}

.event-item-v2 {
    margin-bottom: 4px !important;
    padding: 9px 12px 9px 58px !important;
    border-radius: 10px !important;
    transition: background .15s ease;
}
.event-item-v2:hover { background: #f7f9f8; }

.event-marker-v2 {
    left: 8px !important;
    width: 36px !important;
    height: 36px !important;
    border: 2px solid #e4e9e7 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}
.event-time-v2 {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #69736f !important;
}

/* --- il gol si vede, il resto no ---------------------------------------- */
.event-item-v2:has(.fa-futbol) {
    background: var(--primary-light);
}
.event-item-v2:has(.fa-futbol) .event-marker-v2 {
    border-color: var(--primary) !important;
}
.event-item-v2:has(.fa-futbol) .event-time-v2 {
    color: var(--primary) !important;
}
/* i cartellini: il colore lo porta gia' l'icona, la riga resta neutra */
.event-item-v2:has(.fa-square) .event-marker-v2 { border-color: #e4e9e7 !important; }

@media (max-width: 640px) {
    .timeline-v2::before { left: 22px !important; }
    .event-item-v2 { padding: 8px 8px 8px 50px !important; margin-bottom: 3px !important; }
    .event-marker-v2 { left: 5px !important; width: 32px !important; height: 32px !important; }
    .event-time-v2 { font-size: 10.5px !important; }
}

/* ==========================================================================
   CASA E OSPITE: UN COLORE SOLO PER OGNI RUOLO — 20/08/2026
   --------------------------------------------------------------------------
   C'erano SEI coppie casa/ospite sulla pagina partita, ognuna con colori suoi:
   verde acido contro rosso nei precedenti, petrolio contro petrolio scuro nelle
   probabilita' (praticamente identici), ambra contro petrolio nei pallini —
   cioe' invertiti rispetto a tutto il resto.
   Ora vale ovunque la stessa regola: CASA petrolio, OSPITE ambra. Due colori
   gia' nella tavolozza del sito, abbastanza distanti da non confondersi mai.
   ========================================================================== */

.stat-bar-home-min,
.prob-home,
.ai-prob-home,
.dot-home {
    background: var(--primary) !important;
    background-image: none !important;
}
.stat-bar-away-min,
.prob-away,
.ai-prob-away,
.dot-away {
    background: var(--secondary) !important;
    background-image: none !important;
}
.stat-bar-home-min { box-shadow: none !important; }
.stat-bar-away-min { box-shadow: none !important; }

/* i precedenti: erano verde acido contro rosso, che leggeva come
   "buono contro cattivo" invece che "casa contro ospite" */
.h2h-win-home { color: var(--primary) !important; }
.h2h-win-away { color: var(--secondary-dark) !important; }

/* la legenda, perche' due colori senza nome non sono informazione */
.stat-label-minimal { color: #69736f !important; }

/* La riga sotto la pillola dello stato: punteggio dei rigori o nota dei
   supplementari. Vuota non deve lasciare spazio, quindi niente altezza fissa. */
.match-extra-line {
    margin-top: 5px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: #69736f;
    text-align: center;
    line-height: 1.2;
}
.match-extra-line:empty { display: none; }

/* La frase della cronaca. 22/08/2026, vedi cronaca_frasi.php.
   Sta sotto l'evento e non al suo posto: la riga secca (minuto, icona, nome)
   si legge a colpo d'occhio scorrendo, la frase la legge chi si ferma. Percio'
   e' piu' piccola e in grigio: e' un secondo livello, non il titolo. */
.event-frase {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: #69736f;
}
.event-frase:empty { display: none; }
@media (max-width: 600px) {
    .event-frase { font-size: 11.5px; }
}

/* Il tiro ricostruito dai campionamenti (22/08/2026, vedi tiri_live.php).
   E' una riga di contorno, non un evento saliente: nessun grassetto, icona
   piu' piccola e sbiadita, e si vede che sta un gradino sotto ai gol e ai
   cartellini. Non ha giocatore perche' le statistiche danno il totale di
   squadra, non chi ha calciato: scriverne uno sarebbe inventarlo. */
.event-tiro { opacity: .82; }
.event-tiro .event-icon-v2 i { font-size: 11px; color: #98a3a0; }
.event-tiro .event-time-v2 { color: #98a3a0; }
.event-tiro .event-frase { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Le zone della classifica dentro la pagina partita. 22/08/2026.

   I colori sono gli stessi di classifica_zone.php, e stanno qui in un posto
   solo: prima ogni classe portava il proprio colore (var(--primary),
   var(--secondary), #dc3545) e .pos-uecl non esisteva affatto, quindi la
   Conference League usciva senza colore. Ora ogni riga dichiara la sua tinta
   in --zona e tutto il resto la eredita.

   Le regole piu' sotto nel file valgono ancora per ucl/uel/rel: queste vengono
   dopo e le sovrascrivono, senza doverle cancellare una per una.
--------------------------------------------------------------------------- */
.standings-row.pos-ucl     { --zona: #0f766e; }
.standings-row.pos-uel     { --zona: #14b8a6; }
.standings-row.pos-uecl    { --zona: #5eead4; }
.standings-row.pos-prom    { --zona: #0f766e; }
.standings-row.pos-playoff { --zona: #2dd4bf; }
.standings-row.pos-playout { --zona: #f59e0b; }
.standings-row.pos-retro   { --zona: #e11d48; }

.standings-row[class*="pos-"] td.col-pos { border-left: 4px solid var(--zona, transparent); }
.standings-row[class*="pos-"]::before    { background: var(--zona, transparent); }
.standings-row[class*="pos-"] .position-badge {
    color: var(--zona, inherit);
    font-weight: 800;
    background: transparent;
}

/* Il pallino della legenda prende il colore da uno stile inline scritto in
   match.php: e' la stessa zona, quindi non serve una classe per tinta. */
.standings-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

/* La legenda dentro la pagina partita, allineata a quella delle altre
   classifiche (.cl-legenda in style.css). 22/08/2026.

   Era in MAIUSCOLO con letter-spacing: con le etichette vere
   ("Play-out / spareggi salvezza") ogni voce diventava lunga il doppio e la
   riga andava a capo. Le due legende del sito devono somigliarsi, non essere
   una la versione gridata dell'altra. */
.standings-legend { gap: 10px 16px; }
.standings-legend .legend-item {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    gap: 7px;
}

/* La barra della zona: SPEZZATA, una per riga. 22/08/2026.

   Era un `border-left` sulla cella della posizione, quindi alta quanto tutta
   la cella: le barre di righe consecutive si saldavano e dalla prima alla
   quarta si vedeva un unico blocco verde continuo. Nella classifica piena
   (standings.php) invece ogni riga ha il suo segmento, staccato sopra e sotto.
   Qui si fa la stessa cosa con uno pseudo-elemento: stessi 12% di respiro e
   stesso raggio, cosi' le due classifiche del sito si somigliano davvero. */
.standings-row[class*="pos-"] td.col-pos {
    border-left: none;
    position: relative;
}
.standings-row[class*="pos-"] td.col-pos::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 4px;
    background: var(--zona, transparent);
    border-radius: 0 3px 3px 0;
}

/* La classifica dentro la pagina partita: piu' compatta, e le due squadre
   della partita evidenziate. 22/08/2026.

   Compatta perche' qui la classifica e' un blocco di contorno, non la pagina:
   con 14 px di padding per cella si vedevano cinque righe per schermata.

   L'evidenziazione c'era gia' ma in `rgba(0, 230, 118, ...)`, un verde acido
   che non sta in nessun'altra parte del sito. Ora e' il petrolio al 7%, cioe'
   lo stesso colore di tutto il resto appena accennato: le due squadre si
   trovano a colpo d'occhio senza che la riga urli.

   Le celle POS e SQUADRA sono `position: sticky` con fondo bianco pieno: se non
   ricevono anche loro la tinta, la riga esce colorata solo a meta'. Per questo
   hanno un valore opaco equivalente invece dell'rgba. */
.standings-table-modern td { padding: 9px 12px; }
.standings-table-modern .team-logo { width: 20px; height: 20px; }

.standings-row.highlight-team { background: rgba(15, 118, 110, .07); font-weight: 700; }
.standings-row.highlight-team:hover { background: rgba(15, 118, 110, .11); }
.standings-row.highlight-team td.col-pos,
.standings-row.highlight-team td.col-team { background: #edf5f4 !important; }

/* L'ETICHETTA NOTA, 24/08/2026. Sostituisce il minuto sulle righe dedotte dalle
   statistiche — tiri ricostruiti fra due letture, possesso palla. Quelle righe
   un minuto vero non ce l'hanno: stampare l'ora della lettura accanto a un gol
   col suo minuto reale le faceva sembrare della stessa natura. Piu' piccola e
   piu' chiara del minuto, perche' e' contorno e deve leggersi come tale. */
.event-time-v2.event-time--nota {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    color: #9aa5a1 !important;
}

/* Il GOL rosso lampeggiante del 27/08/2026 stava qui: `.goal-badge` dentro
   `.main-score-display`, dieci lampeggi da mezzo secondo. Tolto il 28/08
   insieme al `golBadge` di match-details.js che lo creava — adesso il gol lo
   dice la pastiglia del minuto (vedi il blocco "IL GOL nella pagina partita"
   piu' su, verso riga 484). Regole senza nessun elemento che le porti sono
   solo codice che inganna chi legge dopo.

   Questa invece resta: la regola di style.css e'
   `scoreBlink ... infinite !important` e senza questo `none` un numero che
   prendesse `.score-blink` pulserebbe per sempre. */
.main-score-display .score-blink {
    animation: none !important;
}