/* ===================================================================
   FILE DEGLI STILI RESPONSIVE
   Contiene tutte le regole per schermi diversi dal desktop.
   Le media query sono ordinate dalla più grande alla più piccola.
   =================================================================== */
/* --- Stili di base per l'icona del menu Hamburger --- */
.menu-toggle {
    display: none; /* Nascosto di default, verrà mostrato dalla media query */
    width: 40px; height: 40px; position: relative;
    border: none; background-color: transparent; cursor: pointer; z-index: 1001;
}
.hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 100%; height: 4px; background-color: var(--nav-link-color, #fff);
    border-radius: 4px; position: absolute; transition: all 0.25s ease-in-out;
}
.hamburger-inner::before, .hamburger-inner::after { content: ''; display: block; }
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.menu-toggle.is-active .hamburger-inner { transform: rotate(225deg); }
.menu-toggle.is-active .hamburger-inner::before { top: 0; opacity: 0; }
.menu-toggle.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); }

/* --- Breakpoint per piccoli desktop / tablet grandi (sotto 1300px) --- */
@media (max-width: 1300px) {
    .page-top11 .title-section-container {
        flex-direction: column;
    }
    .page-top11 .ad-banner-side {
        margin-bottom: 20px;
    }
}


/* --- MEDIA QUERY PRINCIPALE PER TABLET E MOBILE (sotto 992px) --- */
@media (max-width: 992px) {

    body {
        padding-top: 90px;
        transition: padding-top 0.3s ease;
    }

    /* --- 1. Header, Menu e Banner Fissi --- */
    .header {    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important; /* Altissimo */
        width: 100%;
        padding: 10px 15px; 
margin-bottom: 0;
    }

    .header .menu-toggle { display: block; }
    .header .main-nav {
        display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
        background-color: #2c3e50; border-top: 1px solid var(--header-border-bottom, #50d3e9);
        box-shadow: 0 8px 16px rgba(0,0,0,0.3); max-height: 0; overflow: hidden;
        transition: max-height 0.4s ease-out;
    }
    .header .main-nav.is-open { max-height: calc(100vh - 70px); overflow-y: auto; }
    .header .main-nav ul { flex-direction: column; padding: 10px 0; }
    .header .main-nav li a { color: #ffffff; }
    .header .submenu { display: none; position: static; background-color: rgba(0,0,0,0.2); }
    .header .submenu.submenu-open { display: block; }
    .header .main-nav .submenu li a { padding-left: 40px; color: #e0e0e0; }
    

    .hide-on-mobile,
    .banner-container,
    .article-sidebar  {
        display: none !important;
    }

    /* Stile per il banner mobile posizionato in ALTO (come vuole main.js) */
.mobile-ad-container {
    display: flex;
    position: fixed;
    left: 0;
    top: 70;
    width: 100%;
    z-index: 1000;
    background-color: #f8f9fa;
    box-shadow: 0 -4px 6px rgba(0,0,0,0.1); /* Ombra verso l'alto */
    justify-content: center;
    align-items: center;
transform: translateZ(0);
}
.sticky-banner__close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 28px;
    cursor: pointer;
}
.sticky-banner__content {
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Gestione orientamento (queste regole annidate vanno bene) */
@media (orientation: portrait) {
    .mobile-ad-container { height: 60px; }
    .sticky-banner--portrait { display: flex; width: 320px; height: 50px; }
    .sticky-banner--landscape { display: none; }
}
@media (orientation: landscape) {
    .mobile-ad-container { height: 70px; }
    .sticky-banner--portrait { display: none; }
    .sticky-banner--landscape { display: flex; width: 468px; height: 60px; }
}
.page-pronostici-archivio .key-stat-mobile {
    display: block; /* Corretto: Lo rendiamo visibile su mobile */
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    font-size: 0.9em;
    line-height: 1.6;
}
    /* --- 2. Classi di Comportamento per il Layout --- */
    
    /* A) Layout Verticale */
    .responsive-vertical .page-container,
    .responsive-vertical .container {
        grid-template-columns: 1fr !important;
    }
    .responsive-vertical .sidebar,
    .responsive-vertical .sidebar-container {
        position: static !important;
        grid-row: 2;
    }
    
    /* B) Layout a Scorrimento Orizzontale (Tabelle) */
    .responsive-table-scroll .page-container,
    .responsive-table-scroll .container {
        display: block !important;
    }
    .responsive-table-scroll .main-content,
    .responsive-table-scroll .content-card,
    .responsive-table-scroll #data-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
   
/* Pagina Classifica per Intervalli (class_time.html) */
.page-class-time .page-container {
    display: block; /* Forziamo la colonna singola */
}
.page-class-time .sidebar-container {
    position: static !important; /* Disattiviamo lo sticky */
    margin-top: 30px;
}
.page-class-time .content-card {
    padding: 10px;
}
.page-class-time .controls-container,
.page-class-time .range-container {
    flex-direction: column; /* Impila i controlli verticalmente */
    align-items: stretch;
    gap: 10px;
}
.page-class-time .range-container label {
    text-align: left; /* Allinea le etichette a sinistra */
    width: auto;
}

/* ===== LA REGOLA CHIAVE PER RISOLVERE LO STRABORDAMENTO ===== */
.page-class-time .chart-area {
    overflow-x: auto; /* Attiva lo scroll orizzontale qui... */
    -webkit-overflow-scrolling: touch;
}
.page-class-time .chart-layout {
    min-width: 800px; /* ...e dai una larghezza minima al contenuto interno */
}

.page-class-time .sidebar-container .ad-banner {
    display: none !important;
}     

/* Pagina Classifica per Intervalli (class_time.html) */
.page-class-time .page-container {
    display: block; /* Forziamo la colonna singola, come per le altre pagine */
}
.page-class-time .sidebar-container {
    position: static !important; /* Disattiviamo lo sticky */
    margin-top: 30px;
}
.page-class-time .sidebar-container .ad-banner {
    display: none !important; /* Nascondiamo i banner desktop */
}

/* Modifichiamo il layout dei controlli e degli slider */
.page-class-time .content-card {
    padding: 10px; /* Meno spazio bianco su mobile */
}
.page-class-time .controls-container {
    gap: 15px; /* Riduciamo lo spazio tra i gruppi di controlli */
}
.page-class-time .range-container {
    flex-direction: column; /* Impila etichetta e slider verticalmente */
    align-items: stretch;   /* Li fa allungare a tutta larghezza */
    gap: 8px;               /* Spazio tra etichetta e slider */
    max-width: none;        /* Rimuoviamo il limite di 800px */
}
.page-class-time .range-container label {
    width: auto;            /* La larghezza della label diventa automatica */
    text-align: left;       /* Allineiamo il testo a sinistra, più naturale su mobile */
    margin-bottom: 5px;     /* Aggiungiamo un po' di spazio */
}
.page-class-time .slider-wrapper {
    width: 100%; /* Lo slider occupa tutta la larghezza disponibile */
}

/* --- Fix per Tabelle Larghe (es. Classifiche Avulse) --- */
/* Questa regola si applicherà a TUTTE le tabelle h2h su mobile */
.h2h-group {
    overflow-x: auto; /* Attiva lo scroll orizzontale */
    -webkit-overflow-scrolling: touch;
}
.h2h-table {
    /* Diamo una larghezza minima per garantire che lo scroll si attivi
       e che la tabella non si schiacci troppo */
    min-width: 600px;
}


/* Pagina Classifica di Forma */
.page-classifica-forma .page-container {
    display: block; /* Layout a colonna singola */
}
.page-classifica-forma .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-classifica-forma .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix per i controlli che strabordano */
.page-classifica-forma .controls-wrapper {
    padding: 15px;
}
.page-classifica-forma .controls-container {
    display: flex;
    flex-direction: column; /* Impila etichetta e select */
    align-items: flex-start; /* Allinea a sinistra */
    gap: 8px; /* Spazio tra etichetta e select */
}
.page-classifica-forma .controls-container label {
    font-weight: bold;
    color: #3195b5;
}
.page-classifica-forma .controls-container select {
    width: 100%; /* Forza il select ad occupare tutta la larghezza */
}

/* Specifichiamo un colore di testo più scuro per l'header evidenziato */
.page-classifica-forma .data-table thead th.highlight-col {
    color: #000000; /* Testo nero */
    font-weight: bold;
}


/* Pagina Andamento di Forma (chart_forma.html) */
.page-chart-forma .page-container {
    display: block !important; /* Forza il layout a colonna singola */
    padding: 0 10px;
    margin-top: 20px;
}
.page-chart-forma .sidebar-container {
    position: static !important; /* Disattiva lo sticky */
    margin-top: 30px;
}
.page-chart-forma .sidebar-container .ad-banner {
    display: none !important; /* Nasconde i banner desktop */
}


/* Adattiamo la card e il grafico */
.page-chart-forma .content-card {
    padding: 10px;
}
.page-chart-forma #chart-container {
    height: 70vh; /* Altezza ottimizzata per il mobile */
}

/* Adattiamo i controlli (selettore campionato) */
.page-chart-forma .controls-container {
    flex-direction: column; /* Impila l'etichetta e il select */
    align-items: stretch;   /* Li fa allungare a tutta larghezza */
}
.page-chart-forma #league-selector {
    min-width: 0;           /* Rimuove la larghezza minima dal desktop */
    width: 100%;            /* Fa occupare al selettore il 100% dello spazio */
}

    /* NUOVA REGOLA PER GRAFICI A BARRE LUNGHE (STATISTICHE) */
    .page-stats-gol .chart-area,
    .page-stats-avanzate .chart-area,
    .page-stats-arbitri .chart-area,
    .page-stats-tiri .chart-area{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .page-stats-gol #chart-container,
    .page-stats-avanzate #chart-container,
    .page-stats-arbitri #chart-container,
    .page-stats-tiri #chart-container{
        min-width: 600px;
        width: fit-content;
    }


/* Pagina Stats Trend Gol (stats_trend_gol.html) */
.page-stats-trend-gol .page-container,
   .page-stats-trend-punti .page-container {
    display: block !important;
}
.page-stats-trend-gol .sidebar-container,
   .page-stats-trend-punti .sidebar-container{
    position: static !important;
    margin-top: 30px;
}
.page-stats-trend-gol .sidebar-container .ad-banner,
   .page-stats-trend-punti .ad-banner{
    display: none !important;
}

/* Adattamento Controlli Complessi */
.page-stats-trend-gol .controls-wrapper,
   .page-stats-trend-punti .controls-wrapper{
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 15px;
}
.page-stats-trend-gol .row-bottom,
   .page-stats-trend-punti .row-bottom{
    border-top: none; /* Rimuove il bordo separatore su mobile */
    padding-top: 0;
    margin-top: 0;
}
.page-stats-trend-gol .select-row,
   .page-stats-trend-punti .select-row{
    flex-wrap: wrap; /* Permette ai 3 select di andare a capo se serve */
    gap: 8px;
}
.page-stats-trend-gol .team-select,
   .page-stats-trend-punti .team-select{
    width: 100%; /* La squadra prende tutta la riga */
    flex: 1 1 100%;
}
.page-stats-trend-gol .small-select,
   .page-stats-trend-punti .small-select{
    flex: 1; /* Casa/Fuori e 1T/2T si dividono lo spazio sotto */
}

/* Adattamento Grafici e Tabelle */
.page-stats-trend-gol .chart-container,
.page-stats-trend-punti .chart-container{
    height: 300px; /* Altezza fissa sicura per mobile */
}
.page-stats-trend-gol .content-card,
   .page-stats-trend-punti .content-card{
    padding: 10px;
    overflow-x: hidden; /* Previene scroll orizzontale della pagina */
}
.page-stats-trend-gol .stats-table,
   .page-stats-trend-punti .stats-table{
    display: block;
    width: 100%;
    overflow-x: auto; /* Scroll orizzontale SOLO per la tabella */
    white-space: nowrap; /* Evita che il testo vada a capo rompendo la tabella */
}

 /* Pagina Stats Sfida Risultati */
.page-stats-sfida-risultati .page-container {
    display: block !important;
}
.page-stats-sfida-risultati .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-stats-sfida-risultati .sidebar-container .ad-banner {
    display: none !important;
}

/* --- FIX DRASTICO PER I CONTROLLI GIGANTI --- */

.page-stats-sfida-risultati .controls-wrapper {
    display: block !important; /* Rimuove flex dal contenitore principale */
    height: auto !important;
    padding: 10px !important;
}

.page-stats-sfida-risultati .controls-row {
    display: block !important; /* Rimuove flex dalle righe */
    height: auto !important;
    margin-bottom: 0 !important;
}

.page-stats-sfida-risultati .select-group {
    display: block !important; /* Rimuove flex dai gruppi */
    height: auto !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.page-stats-sfida-risultati label {
    display: block !important;
    margin-bottom: 5px !important;
    height: auto !important;
}

.page-stats-sfida-risultati select {
    display: block !important;
    width: 100% !important;
    height: 40px !important; /* Forza altezza fissa */
    max-height: 40px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Pagina Candlestick */
/* Pagina Candlestick - Layout Mobile */
.page-candlestick .page-container {
    display: block !important;
}
.page-candlestick .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-candlestick .sidebar-container .ad-banner {
    display: none !important;
}

/* Controlli su mobile */
.page-candlestick .controls-container {
    flex-direction: column;
    align-items: stretch;
    position: static !important; /* Forza la rimozione di absolute se presente */
}
.page-candlestick .controls-container div {
    display: flex;
    flex-direction: column; /* Impila label e select */
    width: 100%;
}
.page-candlestick .controls-container label {
    margin-bottom: 5px;
    text-align: left;
}
.page-candlestick .controls-container select,
.page-candlestick .controls-container input {
    width: 100%;
}

/* Grafico Mobile */
.page-candlestick #chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FIX LARGHEZZA GRAFICO */
/* Il contenitore deve gestire lo scroll se il grafico è troppo largo */
.page-candlestick .content-card {
    padding: 10px;
    overflow-x: hidden; /* Nasconde l'overflow della card */
}
.page-candlestick #chart {
    min-width: 0; /* Permette al grafico di restringersi */
    width: 100%;
    overflow-x: auto; /* Scroll interno se necessario */
}
/* Se ApexCharts forza una larghezza fissa, questo aiuta */
.page-candlestick .apexcharts-canvas {
    max-width: 100% !important;
    width: 100% !important;
}


/* In style_responsive.css (dentro @media (max-width: 992px)) */

/* Pagina Classifica Marcatori Completa */

.page-marcatori-completa .page-container {
    display: block !important;
}
.page-marcatori-completa .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-marcatori-completa .sidebar-container .ad-banner {
    display: none !important;
}

/* 1. Riduciamo il padding della card per guadagnare spazio */
.page-marcatori-completa .content-card {
    padding: 10px 5px; /* Pochissimo padding laterale su mobile */
}

/* 2. Adattiamo i controlli (impilati) */
.page-marcatori-completa .controls-container {
    flex-direction: column;
    padding: 15px;
    gap: 15px;
}
.page-marcatori-completa .control-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}
.page-marcatori-completa .controls-container label {
    text-align: left;
    flex-basis: auto;
}
.page-marcatori-completa .controls-container select {
    width: 100%;
}

/* 3. Ottimizziamo la tabella per schermi stretti (350px) */
.page-marcatori-completa table {
    width: 100%;
    table-layout: fixed; /* Fondamentale: distribuisce lo spazio in modo equo */
    font-size: 0.85rem; /* Font leggermente più piccolo */
}

.page-marcatori-completa th, 
.page-marcatori-completa td {
    padding: 8px 4px; /* Riduciamo drasticamente il padding delle celle */
    word-wrap: break-word; /* Permette al testo di andare a capo */
    overflow-wrap: break-word;
}

/* Definiamo larghezze specifiche per le colonne per ottimizzare lo spazio */
.page-marcatori-completa th:nth-child(1), /* Pos */
.page-marcatori-completa td:nth-child(1) {
    width: 35px; 
    text-align: center;
}

.page-marcatori-completa th:nth-child(4), /* Gol */
.page-marcatori-completa td:nth-child(4) {
    width: 40px; 
    text-align: center;
    font-weight: bold;
}

/* Le colonne Giocatore e Squadra si dividono il resto dello spazio */
.page-marcatori-completa th:nth-child(2),
.page-marcatori-completa td:nth-child(2),
.page-marcatori-completa th:nth-child(3),
.page-marcatori-completa td:nth-child(3) {
    width: auto;
}


/* Fix Grafico - Questo risolve lo strabordamento */
.page-stats-sfida-risultati .chart-area {
    width: 100%;
    overflow-x: auto; /* Abilita lo scroll orizzontale SOLO per il grafico */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
.page-stats-sfida-risultati #chart-layout {
    min-width: 600px; /* Larghezza minima per non schiacciare le barre */
    display: flex;
    justify-content: flex-start; /* Allinea a sinistra se scrollabile */
}

/* Pagina Marcatori Custom */
.page-marcatori-custom .page-container {
    display: block !important;
}
.page-marcatori-custom .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-marcatori-custom .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix per i Controlli (come nelle altre pagine) */
.page-marcatori-custom .controls-container,
.page-marcatori-custom .range-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}
.page-marcatori-custom .range-container label {
    text-align: left;
    width: auto;
    margin-bottom: 5px;
}
.page-marcatori-custom .select-wrapper {
    width: 100%;
}

/* ===== FIX PER IL GRAFICO (GRISSINO) ===== */
.page-marcatori-custom .chart-area {
    width: 100%;
    overflow-x: auto; /* Attiva lo scroll orizzontale */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

.page-marcatori-custom .chart-layout {
    min-width: 800px; /* Larghezza minima per non schiacciare le barre */
    display: flex;
    flex-direction: column;
}

/* Assicuriamo che barre ed etichette siano larghe uguali */
.page-marcatori-custom .chart-bars-container,
.page-marcatori-custom .chart-labels-container {
    display: flex;
    width: 100%; /* Si adatterà al min-width del genitore */
    justify-content: space-around;
}

/* Pagina Marcatori Squadre */
.page-marcatori-squadre .page-container {
    display: block !important;
}
.page-marcatori-squadre .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-marcatori-squadre .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix Controlli (impilati) */
.page-marcatori-squadre .controls-container {
    flex-direction: column;
    align-items: stretch;
}
.page-marcatori-squadre .control-group {
    width: 100%;
}
.page-marcatori-squadre .control-group label {
    margin-bottom: 5px;
}

/* Fix Grafico - Altezza generosa per vedere tutte le squadre */
.page-marcatori-squadre #chart-container {
    height: 120vh; /* Molto alto, scorrerà con la pagina */
    min-height: 800px;
}
.page-marcatori-squadre .content-card {
    padding: 10px; /* Recupera spazio */
    overflow-x: hidden; /* Evita scroll orizzontale indesiderato */
}



/* Pagina Quotidiano (Home) */
.page-quotidiano .newspaper-container {
    background-color: transparent !important; 
    padding: 0 10px; /* Margine laterale blu */
    margin-top: 1px !important; 
    border: none;
    box-shadow: none;
}
/* 1. Il contenitore della "riga" diventa trasparente e serve solo da wrapper */
/* Contenitore riga trasparente */
.page-quotidiano .layout-block {
    display: block !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important; 
    border: none;
    box-shadow: none;
}

.page-quotidiano .block-main-area,
.page-quotidiano .block-side-area {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    gap: 0 !important; /* Rimuoviamo gap flex/grid */
}

/* --- STILE DEL SINGOLO BOX ARTICOLO --- */
.page-quotidiano .article-block {
    display: block !important;
    /* Rimuoviamo il colore forzato qui, lasciamo che sia trasparente o bianco di base */
    background-color: #fff; 
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 10px !important;
    overflow: hidden; 
    padding: 0 !important;
}

.page-quotidiano .article-block .content-wrapper {
    padding: 15px !important;
    height: auto !important;
    
    /* IMPORTANTE: Non forziamo il background qui.
       Lasciamo che lo stile inline (style="background-color: ...") impostato dal builder
       faccia il suo lavoro. Se non c'è stile inline, erediterà o sarà trasparente. */
}

/* Eccezione per i widget pronostici che hanno il loro padding interno */
.page-quotidiano .article-block .content-wrapper.no-padding {
    padding: 0 !important;
}



/* 3. Header e Titolo */
.page-quotidiano .header-side-box {
    display: none !important; /* Nasconde i box laterali */
}
.page-quotidiano .masthead {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px; /* Spazio blu sotto la testata */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.page-quotidiano .masthead h1 {
    font-size: 3.5rem; /* Titolo più piccolo ma leggibile */
    line-height: 1.1;
}
.page-quotidiano .date-line {
    flex-direction: column;
    gap: 5px;
}
.page-quotidiano .date-line > span {
    text-align: center !important;
}

/* 4. Ticker News (più piccolo su mobile) */
.page-quotidiano .ticker-label,
.page-quotidiano .ticker-label-reverse {
    font-size: 0.8em;
    padding: 0 8px;
    width: 90px; /* Larghezza fissa per l'etichetta */
}
.page-quotidiano .ticker-item,
.page-quotidiano .ticker-item-reverse {
    font-size: 0.9em;
    padding: 0 10px;
}
.page-quotidiano .article-block h2,
.page-quotidiano .article-block h3,
.page-quotidiano .article-block h4 {
    margin-top: 10px; /* Spazio sopra il titolo */
    padding-top: 5px;
}
/* Disabilita la logica "ADATTA" su mobile */
.page-quotidiano .article-block .content-wrapper h1,
.page-quotidiano .article-block .content-wrapper h2,
.page-quotidiano .article-block .content-wrapper h3 {
    white-space: normal !important; /* Forza il testo ad andare a capo */
    font-size: 1.8rem !important;   /* Dimensione fissa leggibile */
    line-height: 1.2 !important;    /* Interlinea normale */
    height: auto !important;
}
/* 5. Widget Pronostici (adattamento griglia) */
.page-quotidiano .pw-predictions {
    grid-template-columns: 1fr; /* Una colonna su schermi piccolissimi */
    gap: 10px;
}
@media (min-width: 400px) {
    .page-quotidiano .pw-predictions {
        grid-template-columns: repeat(3, 1fr); /* 3 colonne se c'è spazio */
    }
}


/* Pagina Pronostici Archivio */
.page-pronostici-archivio .page-container {
    display: block !important;
    padding: 0 10px;
}

/* Nascondiamo il banner desktop */
.page-pronostici-archivio .top-banner-pronostici {
    display: none !important;
}

/* Adattiamo i filtri */
.page-pronostici-archivio .filters-widget {
    flex-direction: column; /* Impila i select */
    gap: 15px;
}
.page-pronostici-archivio .filters-widget select {
    width: 100%;
    min-width: 0;
}

/* Gestione Tabelle Generate Dinamicamente */
/* Lo script potrebbe generare div con classi diverse, cerchiamo di coprirle tutte */
.page-pronostici-archivio .sezione-affari-conclusi, 
.page-pronostici-archivio .table-responsive {
    overflow-x: auto; /* Scroll orizzontale */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.page-pronostici-archivio table {
    min-width: 600px; /* Forza la larghezza per attivare lo scroll */
    width: 100%;
}

/* Pagina Stats Gol */
.page-stats-gol .page-container {
    display: block !important;
}
.page-stats-gol .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-stats-gol .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix Controlli */
.page-stats-gol .controls-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}
.page-stats-gol .select-group {
    width: 100%;
}
.page-stats-gol .select-group select {
    width: 100%;
}

/* Fix Grafico (Scroll Orizzontale) */
.page-stats-gol .content-card {
    padding: 10px;
}
.page-stats-gol .chart-area {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page-stats-gol .chart-layout,
.page-stats-gol #chart-container {
    min-width: 800px; /* Larghezza minima per forzare lo scroll e non schiacciare le barre */
    display: flex;
    flex-direction: column;
}

/* Assicuriamo che le barre e le etichette si allineino */
.page-stats-gol .chart-bars-container,
.page-stats-gol .chart-labels-container {
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.page-stats-gol .bar-wrapper,
.page-stats-gol .label-wrapper {
    flex: 1;
    min-width: 0;
}

/* Pagina Diario */
.page-diario .page-container {
    display: block !important;
}

/* Sidebar: va sotto il contenuto, togliamo lo sticky */
.page-diario .sidebar {
    position: static !important;
    margin-top: 30px;
    width: 100%;
}

/* Nascondiamo il banner desktop (300x250) */
.page-diario .sidebar .ad-banner {
    display: none !important;
}

/* Stili per la lista archivio su mobile */
.page-diario .sidebar-widget {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.page-diario #diary-archive-list {
    max-height: 300px; /* Limitiamo l'altezza per non farla diventare chilometrica */
    overflow-y: auto; /* Aggiungiamo lo scroll verticale se la lista è lunga */
}

/* Pagina Calciomercato */
.page-calciomercato .container {
    display: block !important;
 padding: 0 20px 20px 20px;
}

.page-calciomercato .sidebar-container {
    position: static !important;
    margin-top: 30px;
}

/* Nascondiamo i banner 300x300 del desktop */
.page-calciomercato .sidebar-container .ad-banner {
    display: none !important;
}

.page-calciomercato .content-box {
    padding: 10px 10px; ; /* Riduciamo il padding su schermi piccoli */
}


/* Pagina Articolo */
.page-articolo .container {
    display: block !important;
}

.page-articolo .sidebar-container {
    position: static !important;
    margin-top: 30px;
}

/* Nascondiamo i banner desktop */
.page-articolo .sidebar-container .ad-banner {
    display: none !important;
}

/* COMPATTIAMO IL TESTO PER MOBILE:
   Meno spazio ai lati per far leggere meglio su smartphone */
.page-articolo .article-full {
    padding: 20px 15px !important; /* Spazio minimo indispensabile ai lati */
}

.page-articolo .article-content {
    font-size: 1.15rem; /* Leggermente più piccolo per non affollare lo schermo */
}


/* Pagina Regolamento */
.page-regolamento .top-banner-regolamento {
    display: none !important; /* Nasconde il banner gigante su mobile */
}

.page-regolamento .toc-grid {
    grid-template-columns: 1fr; /* Una colonna per il sommario */
    gap: 15px;
}

.page-regolamento article .rule-header h1 {
    font-size: 1.8rem; /* Titoli più piccoli su mobile */
}

/* GESTIONE TABELLE: Scroll orizzontale obbligatorio */
.page-regolamento table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pulsante torna su specifico per questa pagina (se diverso) */
.page-regolamento .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #3195b5;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.page-regolamento .back-to-top.show {
    opacity: 1;
    visibility: visible;
}


/* Pagina Stats Risultati (Frequenze) */
.page-stats-risultati .page-container {
    display: block !important;
}
.page-stats-risultati .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-stats-risultati .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix Controlli */
.page-stats-risultati .controls-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}
/* Assicuriamo che TUTTI i gruppi di selezione occupino tutto lo spazio orizzontale */
.page-stats-risultati .select-group {
    width: 100% !important; /* Forza la larghezza piena */
    box-sizing: border-box;
}

/* Assicuriamo che TUTTI i select dentro i gruppi riempiano il gruppo */
.page-stats-risultati .select-group select {
    width: 100% !important; /* Forza il riempimento */
    max-width: 100% !important; /* Impedisce di sbordare */
    box-sizing: border-box; /* Include padding e bordi nel calcolo */
    display: block; /* Si comporta come un blocco */
}

/* Fix Grafico (Scroll Orizzontale) */
.page-stats-risultati .content-card {
    padding: 10px;
}
.page-stats-risultati .chart-area {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Forziamo una larghezza minima per il contenitore delle barre */
.page-stats-risultati #chart-layout {
    min-width: 800px; /* Larghezza che garantisce leggibilità */
    display: flex;
    justify-content: center; /* O flex-start se preferisci allineato a sx */
    gap: 5px;
}
.page-stats-risultati .chart-column {
    flex: 1; /* Distribuisce lo spazio equamente */
    min-width: 30px; /* Larghezza minima per ogni barra */
}

   
    /* Per la Lavagna Tattica: assicuriamo lo scroll orizzontale */
    .page-lavagna.responsive-horizontal-scroll .lavagna-sidebar { 
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .page-lavagna.responsive-horizontal-scroll .board-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-lavagna.responsive-horizontal-scroll .tactical-board {
        min-width: 500px;
    }


    /* --- 3. Stili Responsive Specifici per Pagina --- */

/* Pagina Rassegna Web */
.page-rassegna-web .container {
    display: flex; /* Usiamo Flexbox per riordinare gli elementi */
    flex-direction: column;
}
.page-rassegna-web .news-feed {
    order: 2; /* Manda le notizie in seconda posizione */
}
.page-rassegna-web .sidebar {
    order: 1; /* Manda la sidebar (con i tag) in prima posizione */
    position: static !important; /* Annulla lo sticky e il 'top' negativo */
    margin-bottom: 1px; /* Aggiunge spazio tra i tag e le notizie */
}
.page-rassegna-web .sidebar .ad-banner {
    display: none; /* Nasconde i banner che erano nella sidebar */
} 


/* Pagina Classifica Grafica (APPROCCIO FLEXBOX CORRETTO) */

/* 1. Layout di base della pagina */
.page-classifica-grafica .page-container {
    display: block; 
}
.page-classifica-grafica .content-card {
    padding: 10px;
    overflow: hidden; /* Nasconde qualsiasi cosa esca, per sicurezza */
}
.page-classifica-grafica .controls-container {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
}

/* 2. Il contenitore del grafico gestisce lo scroll */
.page-classifica-grafica .chart-area {
    width: 100%;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}

/* 3. Il layout interno NON deve avere larghezza minima! */
.page-classifica-grafica .chart-layout {
    /* Rimuoviamo min-width da qui */
    display: flex; /* Lo rendiamo un contenitore flex per allineare barre ed etichette */
    flex-direction: column;
}

/* 4. I contenitori delle barre e delle etichette devono avere la stessa larghezza */
.page-classifica-grafica .chart-bars-container,
.page-classifica-grafica .chart-labels-container {
    display: flex;
    min-width: 800px; /* Impostiamo qui la larghezza minima DESIDERATA per il grafico */
}

/* 5. Ogni colonna (barra + etichetta) deve occupare uno spazio uguale */
.page-classifica-grafica .bar-wrapper,
.page-classifica-grafica .label-wrapper {
    flex: 1; /* Ciascun elemento occupa una frazione uguale dello spazio totale (degli 800px) */
    min-width: 0; /* Permette il restringimento se necessario */
}

.page-classifica-grafica .team-name {
    font-size: 12px;
}

/* Pagine Stats Gol e Avanzate (Condividono lo stesso layout grafico) */
.page-stats-gol .page-container,
.page-stats-avanzate .page-container {
    display: block !important;
}
.page-stats-gol .sidebar-container,
.page-stats-avanzate .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-stats-gol .sidebar-container .ad-banner,
.page-stats-avanzate .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix Controlli */
.page-stats-gol .controls-container,
.page-stats-avanzate .controls-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

/* Fix Grafico (Scroll Orizzontale) */
.page-stats-gol .content-card,
.page-stats-avanzate .content-card {
    padding: 10px;
}
.page-stats-gol .chart-area,
.page-stats-avanzate .chart-area {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page-stats-gol .chart-layout,
.page-stats-avanzate .chart-layout {
    min-width: 800px;
    display: flex;
    flex-direction: column;
}


/* Pagina Stats Under/Over */
.page-stats-under-over .page-container {
    display: block !important;
}
.page-stats-under-over .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-stats-under-over .sidebar-container .ad-banner {
    display: none !important;
}

/* Fix Controlli */
.page-stats-under-over .controls-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}
.page-stats-under-over .select-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.page-stats-under-over select {
    width: 100%;
}

/* Fix Grafico (Scroll Verticale per barre orizzontali) */
.page-stats-under-over .content-card {
    padding: 10px;
    overflow-y: visible; /* Permette al contenuto di "uscire" e allungare la card */
    max-height: none;   /* Rimuove qualsiasi limite di altezza */
}
.page-stats-under-over #chart-container {
    height: auto; /* Lasciamo che JS imposti l'altezza reale */
    overflow: visible;
}


.page-stats-arbitri .page-container {
    display: block !important;
}
.page-stats-arbitri .sidebar-container {
    position: static !important;
    margin-top: 30px;
}
.page-stats-arbitri .sidebar-container .ad-banner {
    display: none !important;
}
.page-stats-arbitri .controls-container {
    flex-direction: column;
    align-items: stretch;
}
.page-stats-arbitri .select-group {
    width: 100%;
}
.page-stats-arbitri .table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page-stats-arbitri .stats-table {
    min-width: 600px;
}


/* Pagina Top 11 */
.page-top11 .title-section-container {
    padding: 0 10px;
    display: block; /* Impila gli elementi */
}
.page-top11 .ad-banner-side {
    display: none !important; /* Nascondiamo i banner laterali del titolo */
}

/* Riorganizziamo il layout del campo e delle schede */
.page-top11 .tactic-board {
    padding: 0 10px;
}
.page-top11 .main-content {
    display: block; /* Rimuoviamo la griglia a 3 colonne */
}
.page-top11 .left-panel,
.page-top11 .right-panel {
    display: none !important; /* Nascondiamo i pannelli laterali vuoti */
}
.page-top11 .pitch-container {
    width: 100%; /* Il campo occupa tutta la larghezza */
    margin-bottom: 20px;
}
.page-top11 .pitch {
    width: 100% !important; /* Forziamo la larghezza fluida */
    max-width: 450px; /* Ma non più grande di 450px, per mantenere le proporzioni */
    margin: 0 auto; /* Centriamo il campo */
}

/* Nascondiamo le linee di connessione su mobile */
.page-top11 #connector-lines {
    display: none !important;
}

/* Sistemiamo le schede dei giocatori in basso */
.page-top11 .bottom-panel {
    display: block; /* Non usare grid, usa un semplice blocco */
    width: 100%;
}

/* Applichiamo lo spazio tra le schede direttamente alle schede */
.page-top11 .bottom-panel .player-card {
    margin-bottom: 15px;
}

/* Stile per la SCHEDA evidenziata */
.page-top11 .player-card.highlighted {
    background-color: #eaf4ff; /* Un bel azzurro chiaro */
    border-left-color: #007bff; /* Bordo laterale blu acceso */
    transform: scale(1.02); /* Manteniamo un leggero ingrandimento */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Stile per il GIOCATORE SUL CAMPO evidenziato */
.page-top11 .player-marker.highlighted {
    background-color: #3195b5;
    border: 2px solid #fff;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* Aggiungiamo una transizione fluida per un effetto migliore */
.page-top11 .player-card,
.page-top11 .player-marker {
    transition: all 0.3s ease-in-out;
}


    /* Pagina Lavagna Tattica */
    .page-lavagna.responsive-horizontal-scroll .lavagna-container {
        display: flex; flex-direction: column; overflow-x: hidden; white-space: normal; padding: 10px;
    }
    .page-lavagna.responsive-horizontal-scroll .action-bar {
        display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; margin-bottom: 15px;
    }
    .page-lavagna.responsive-horizontal-scroll .lavagna-description {
        background-color: white; padding: 15px; border-radius: 8px;
        border: 1px solid #e0e0e0; color: #333; width: 100%; order: 3;
    }
    .page-lavagna.responsive-horizontal-scroll .action-bar button { order: 1; }
    .page-lavagna.responsive-horizontal-scroll .scrollable-content {
        width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
        white-space: nowrap; padding-bottom: 15px;
    }
    .page-lavagna.responsive-horizontal-scroll .lavagna-sidebar,
    .page-lavagna.responsive-horizontal-scroll .board-wrapper {
        display: inline-block; vertical-align: top; white-space: normal;
    }
    .page-lavagna.responsive-horizontal-scroll .lavagna-sidebar { width: 280px; margin-right: 20px; max-height: none; }
    .page-lavagna.responsive-horizontal-scroll .board-wrapper { width: 520px; }
    .page-lavagna.responsive-horizontal-scroll .tactical-board { width: 500px; }



/* In style_responsive.css (dentro @media (max-width: 992px)) */

/* Pagina Power Score Grafico (chart_power_score.html) */
.page-chart-power-score .page-container {
    display: block !important; /* Mantiene il layout a colonna singola */
}
.page-chart-power-score .sidebar-container {
    display: none !important; /* Nasconde la sidebar desktop */
}

/* Adattiamo la card e il grafico per il mobile */
.page-chart-power-score .content-card {
    padding: 5px; /* Padding minimo per massimizzare lo spazio */
}
.page-chart-power-score .controls-container {
    flex-direction: column;
    align-items: stretch;
}
.page-chart-power-score #league-selector {
    width: 100%;
    min-width: 0;
}

/* QUESTA È LA PARTE IMPORTANTE PER IL GRAFICO */
.page-chart-power-score #chart-container {
    height: 120vh; /* Diamo un'altezza molto generosa, 120% dell'altezza dello schermo */
    min-height: 800px; /* E una minima assoluta di 800px */
    overflow-y: visible; /* Niente scroll interno al contenitore */
}

/* Pagina Stats Sfida (CORREZIONE LARGHEZZA) */
/* 1. Layout Generale */
.page-stats-sfida .page-container {
    display: block !important;
    padding: 0 10px; /* Un po' di margine ai lati */
}

/* 2. Controlli: Devono stare stretti */
/* Riduciamo lo spazio nel contenitore principale dei controlli */
.page-stats-sfida .controls-wrapper {
    padding: 5px; /* Molto meno padding */
    gap: 5px; /* Meno spazio tra le righe */
}

/* Riduciamo lo spazio tra i singoli selettori */
.page-stats-sfida .controls-row {
    gap: 8px; /* Meno spazio tra gli elementi impilati */
    margin-bottom: 0;
}

/* Riduciamo l'altezza dei singoli gruppi select+label */
.page-stats-sfida .select-group {
    margin-bottom: 5px; /* Meno margine sotto */
}

/* Riduciamo l'altezza del selettore stesso */
.page-stats-sfida .select-group select {
    padding: 8px 5px; /* Meno padding interno */
    height: auto; /* Lascia che l'altezza si adatti al testo */
    line-height: 1.2;
}

/* Riduciamo lo spazio sotto l'etichetta */
.page-stats-sfida .select-group label {
    margin-bottom: 2px;
    font-size: 0.9em;
}
/* 3. Tabella: Deve scrollare */
.page-stats-sfida .table-area {
    display: block;
    width: 100%;
    overflow-x: auto; /* Scroll orizzontale */
    -webkit-overflow-scrolling: touch;
    margin-top: 15px;
    padding-bottom: 10px; /* Spazio per la scrollbar */
}
.page-stats-sfida .comparison-table {
    min-width: 500px; /* Larghezza minima per leggibilità, forza lo scroll */
    width: 100%;
}


    /* Pagina Pronostici Archivio */
    .page-pronostici-archivio.responsive-vertical .container,
    .page-pronostici-archivio.responsive-table-scroll .container {
        display: flex !important; 
        flex-direction: column !important; 
    }
    
    .page-pronostici-archivio .sidebar-widget {
        order: -1; 
        background-color: #ffffff; 
        border-radius: 15px; 
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
        color: #333; 
        margin-bottom: 20px;
    }
    
    .page-pronostici-archivio .sidebar-container {
        order: 1;
    }

    .page-pronostici-archivio .sidebar-widget h3 { text-align: center; margin-bottom: 15px; }
    .page-pronostici-archivio .filters-widget { flex-direction: column; gap: 10px; }
    .page-pronostici-archivio .filters-widget select { width: 100%; }
    .page-pronostici-archivio .key-stat-desktop { display: none; }
    .page-pronostici-archivio .key-stat-mobile {
        display: block; margin-top: 15px; padding-top: 10px;
        border-top: 1px dashed #ccc; font-size: 0.9em; line-height: 1.6;
    }
    .page-pronostici-archivio .key-stat-mobile strong { font-weight: bold; color: #3195b5; }
    
    /* Pagina Articolo */
    .page-articolo .container {
        grid-template-columns: 1fr;
    }
    .page-articolo .article-sidebar {
        position: static;
        order: 2; 
        margin-top: 30px;
    }
    .page-articolo .article-main-column {
        order: 1;
    }
    
    /* Pagina Regolamento */
    .top-banner-regolamento {
        display: none;
    }
    .page-regolamento .sidebar {
        display: none !important;
    }

    /* Footer */
    .footer-col {
        width: 50%;
    }
}


/* --- Breakpoint per smartphone (sotto 768px) --- */
@media (max-width: 768px) {
    .page-top11 .ad-banner-side { 
        display: none; 
    }
    .footer-col {
        width: 100%; /* Una colonna per riga */
    }
}


/* --- Breakpoint per desktop (MIN-WIDTH) --- */
/* Questa è l'unica regola min-width, la mettiamo qui per completezza */
@media (min-width: 993px) {
    .sidebar .ad-banner:first-child,
    .sidebar-container .ad-banner:first-child {
        margin-top: 20px;
    }
}