/* =========================================
   PALETTE COLORI & VARIABILI
   ========================================= */
:root {
    --bg-color: #0f172a;        
    --card-bg: #1e293b;         
    --accent-green: #22c55e;    
    --accent-yellow: #facc15;   
    --text-main: #f8fafc;       
    --text-dim: #94a3b8;        
    --border-color: #334155;
}

/* RESET BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

/* =========================================
   1. CORE & VARIABILI (VERSIONE ELITE)
   ========================================= */
:root {
    --bg-color: #0f172a;        
    --card-bg: rgba(30, 41, 59, 0.85); /* Leggermente trasparente per lo sfondo */
    --accent-green: #22c55e;    
    --accent-yellow: #f1c40f;   
    --text-main: #f8fafc;       
    --text-dim: #94a3b8;        
    --border-color: #334155;
}

/* --- BODY GENERALE --- */
/* --- 1. BODY E LIMITAZIONE DESKTOP --- */
body {
    background: #0f172a; /* Fallback scuro */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
}

/* Contenitore principale che limita la larghezza a 700px su Desktop */
.login-container {
    width: 100%;
    max-width: 700px; /* Qui blocchiamo la larghezza massima */
    margin: 0 auto;
    padding: 20px;
    background: url('sfondo.png') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra tutto il contenuto internamente */
    text-align: center;
    min-height: 100vh;
}

/* --- 2. LOGO AL CENTRO --- */
.logo {
    width: 150px; /* O la misura che preferisci */
    height: auto;
    margin: 20px auto; 
    display: block;
}

/* 1. IL FORM: Gestisce l'affiancamento e la centratura totale */
#login-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Forza il form a essere grande SOLO quanto serve */
    width: fit-content !important;
    max-width: 100% !important;
    
    /* Centratura automatica basata sulla larghezza reale */
    margin: 20px auto !important; 
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
}
/* 2. IL WRAPPER: Tiene le barre una sopra l'altra a destra */
.login-inputs-wrapper {
    flex: 0 0 315px !important;
    position: relative !important;
    width: 315%;

    /* --- MANOPOLA 2: MUOVI SOLO LE BARRE --- */
    /* Questo sposterà le barre senza trascinare il pallone */
    left: -35px !important; 
    top: 0px !important;

    margin: 0 !important;
}

/* Solo per gli input e i bottoni rettangolari (Demo e Unlock) */
.btn-demo, .btn-unlock {
    width: 100%; 
    padding: 12px;
    border-radius: 8px;
    box-sizing: border-box;
    
}

/* Per il pallone (Login), forziamo la dimensione fissa */
.btn-login {
    width: 60px !important;  /* Non deve essere 100%! */
    height: 60px !important; /* Deve restare un cerchio */
    padding: 0;              /* Il padding romperebbe i testi 'Entra in Campo' */
    box-sizing: border-box;
}

.footer-info {
    /* 1. Reset dei comportamenti precedenti */
    display: block;        /* Cambiato da flex/inline-block per gestire meglio i margini */
    width: fit-content;    /* Il box si stringe attorno al testo */

    /* 2. LA MAGIA PER IL CENTRO */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 3. Allineamento del testo interno */
    text-align: center;

    /* 4. Pulizia */
    align-self: center;    /* Se il padre è flex, questo lo centra */
    margin-top: 5px;       /* Regola questo valore per la distanza dalle barre */
    
    /* Spazio interno */
    padding: 3px 6px; 
    
    /* Font minimale */
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 0.60rem;    /* Piccolo e discreto */
    letter-spacing: 0.5px; /* Leggermente spaziato per un tocco moderno */
    color: white;
    
    /* sfondo e bordi per minimalismo */
    background: rgba(15, 23, 42, 0.6); 
    border-radius: 15px;
    border: none;
}

/* Il link colorato che spicca */
.footer-info a {
    color: #2aff43;        /* Il verde che abbiamo usato per il login */
    text-decoration: none;
    font-weight: 600;      /* Un po' più spesso per renderlo cliccabile */
    transition: color 0.3s ease;
    margin-left: 5px;      /* Spazio dopo il testo "Non hai un codice?" */
    font-size: 0.70rem;
}

.footer-info a:hover {
    color: #27ae60;        /* Verde leggermente più scuro al passaggio */
    text-decoration: underline;
}

/* --- 4. ADATTAMENTO DESKTOP --- */
@media (min-width: 1024px) {
    .login-container {
        background: url('sfondoDesk.png') no-repeat center center;
        background-size: 100% 100%; 
        border-left: 1px solid rgba(255,255,255,0.1);
        border-right: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
        
    }
}

/* --- INTRO TEXT --- */
.intro-text {
    background: rgba(15, 23, 42, 0.7); 
    max-width: 320px;
    margin: -10px auto;
    font-size: 0.85rem;
    color: white;
    
    /* --- ARROTONDAMENTO --- */
    border-radius: 15px;      /* Angoli morbidi in linea con i box moderni */
    padding: 0.5px;            /* Spazio interno per non far toccare il testo ai bordi */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Un sottile bordo per dare profondità */
    
    /* --- FONT --- */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;         /* Peso medio per massima leggibilità */
    line-height: 1.6;         /* Interlinea più ampia per non affaticare la vista */
    text-align: centre;
    
    /* --- EFFETTO EXTRA --- */
    backdrop-filter: blur(4px); /* Effetto vetro se lo sfondo è colorato */
}

/* --- DASHBOARD SPECIFICA --- */
.dashboard-body {
    display: block;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* Gli input "Email" e "Codice" */
.input-group input {
    width: 56%;
    padding: 15px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #334155;
    border-radius: 10px;
    color: white;
    margin-bottom: 15px;
    outline: none;
    transition: border-color 0.3s;
    
    /* AGGIUNGI QUESTO */
    display: block;    /* Assicura che si comporti come un blocco */
    margin-left: auto;    /* Attacca a sinistra */
    margin-right: 0; /* Spinge lo spazio a destra */
}

.input-group input:focus {
    border-color: #00ff88; /* Verde Sorare quando clicchi */
}

.logo { width: 140px; margin-bottom: 15px; }

/* Bottone LOGIN */
.btn-login {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    flex-shrink: 0 !important;
    position: relative !important;
    /* --- MANOPOLA 1: MUOVI SOLO IL PALLONE --- */
    /* Se vedi spazio vuoto a sinistra, usa un valore negativo (es. -20px) */
    /* Se vuoi allontanarlo dalle barre, usa un valore positivo (es. 10px) */
    left: 90px !important; 
    top: -20px !important;
    margin: 0!important; 
    cursor: pointer;
    z-index: 10;
    border: 1.2px solid rgba(0, 0, 0, 0.8);
    
    /* Estetica (Invariata) */
    background-color: #2aff43;
    background-image: 
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0l17.32 10v20L20 40 2.68 30v-20z' fill='none' stroke='black' stroke-width='1.5' stroke-opacity='0.6'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.3) 100%);
    background-size: cover, 40px 40px, cover;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Stile comune per le parole */
.btn-login span {
    position: absolute;
    color: black;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none; /* Il click passa al bottone */
    font-size: 0.70rem;
    font-style: italic !important;            /* Corsivo per dare senso di velocità */
    font-family: 'Kanit', sans-serif !important; /* Il nuovo font sportivo */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

/* POSIZIONAMENTO SPARPARGLIATO */
.txt-1 { 
    top: 18%; 
    left: 5%; 
    transform: rotate(-10deg);
    
}

.txt-2 { 
    top: 43%; 
    left: 38%; 
    font-size: 0.65rem !important; /* "IN" al centro più grande */
    transform: rotate(-10deg);
}

.txt-3 { 
    bottom: 18%; 
    right: 14%; 
    transform: rotate(-10deg);
}

.btn-login:active { transform: scale(0.95); }

/* Contenitore per i due bottoni sotto */
.actions-container {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: center !important; /* Fondamentale per centrare le due sfere */
    gap: 30px !important; /* Aumentiamo il gap per dare respiro alle sfere */
    margin-top: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Rendo i bottoni SFOCATI (non più schiacciati) */
.actions-container .btn-demo, 
.actions-container .btn-unlock {
    flex: none !important; /* RIMOSSO flex: 1 che li schiacciava */
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    padding: 0 !important; /* Via il padding che deforma */
    white-space: normal !important; /* Permette al testo di andare a capo internamente */
}

/* Bottone DEMO */
.btn-demo {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    flex-shrink: 0 !important;
    position: relative !important;
    display: block !important;
    /* --- MANOPOLA 1: MUOVI SOLO IL BOTTONE --- */
    /* Se vedi spazio vuoto a sinistra, usa un valore negativo (es. -20px) */
    /* Se vuoi allontanarlo dalle barre, usa un valore positivo (es. 10px) */
    left: -40px !important; 
    top: 0px !important;
    margin: 0!important; 
    cursor: pointer;
    z-index: 10;
    border: 1.2px solid rgba(0, 0, 0, 0.8);
    
    /* Estetica (Invariata) */
    background-color: white;
    background-image: 
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0l17.32 10v20L20 40 2.68 30v-20z' fill='none' stroke='black' stroke-width='1.5' stroke-opacity='0.6'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.3) 100%);
    background-size: cover, 40px 40px, cover;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Il primo valore sposta a DESTRA (+) o SINISTRA (-) */
    /* Il secondo valore sposta in BASSO (+) o in ALTO (-) */
    transform: translate(10px, -25px) !important;  
}

.btn-demo span {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    text-align: center !important;
    color: black !important;
    font-weight: 900 !important;
    font-style: italic !important;            /* Corsivo per dare senso di velocità */
    font-family: 'Kanit', sans-serif !important; /* Il nuovo font sportivo */
    text-transform: uppercase !important;
    line-height: 1 !important;
    pointer-events: none;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

/* Regolazione "FREE" */
.btn-demo .txt-1 {
    top: 22px !important;    /* Sposta dal bordo superiore verso il centro */
    left: -3px !important;
    font-size: 20px !important;
    transform: rotate(-8deg) skewX(-10deg) !important;
}

/* Regolazione "TRIAL" */
.btn-demo .txt-2 {
    top: auto !important;
    bottom: 28px !important; /* Sposta dal bordo inferiore verso il centro */
    font-size: 20px !important;
    transform: rotate(-8deg) skewX(-10deg) !important;
}

/* Bottone UNLOCK */
.btn-unlock {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    flex-shrink: 0 !important;
    position: relative !important;
    /* --- MANOPOLA 1: MUOVI SOLO IL SBLOCCA --- */
    /* Se vedi spazio vuoto a sinistra, usa un valore negativo (es. -20px) */
    /* Se vuoi allontanarlo dalle barre, usa un valore positivo (es. 10px) */
    left: 0px !important; 
    top: 0px !important;
    margin: 0!important; 
    cursor: pointer;
    z-index: 10;
    border: 1.2px solid rgba(0, 0, 0, 0.8);
    
    /* Estetica (Invariata) */
    background-color: #ffcc00;
    background-image: 
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0l17.32 10v20L20 40 2.68 30v-20z' fill='none' stroke='black' stroke-width='1.5' stroke-opacity='0.6'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.3) 100%);
    background-size: cover, 40px 40px, cover;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* MANOPOLA SPOSTAMENTO: */
    /* Il primo valore sposta a DESTRA (+) o SINISTRA (-) */
    /* Il secondo valore sposta in BASSO (+) o in ALTO (-) */
    transform: translate(20px, 30px) !important;
}

/* --- GESTIONE TESTI A 3 RIGHE --- */
.btn-unlock span {
    position: absolute !important;
    width: 100% !important;
    left: 0;
    text-align: center !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    pointer-events: none;
    font-style: italic !important;            /* Corsivo per dare senso di velocità */
    font-family: 'Kanit', sans-serif !important; /* Il nuovo font sportivo */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

/* 1. SBLOCCA (In alto) */
.btn-unlock .txt-1 {
    top: 14px !important;
    left: -10px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px;
}

/* 3. SORARE (In basso) */
.btn-unlock .txt-3 {
    bottom: 36px !important;
    left: 0px !important;
    top: auto !important; /* Fondamentale per sbloccare il posizionamento */
    font-size: 20px !important;
    letter-spacing: 0.5px;
    transform: rotate(-8deg) skewX(-10deg) !important;
}


/* =========================================
   FINESTRA MODALE (IMPORTANTE: LA NASCONDE)
   ========================================= */
.modal {
    display: none; /* <--- QUESTO NASCONDE IL TESTO SORARE ALL'INIZIO */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Sfondo scuro */
    backdrop-filter: blur(5px); /* Effetto sfocato */
}

.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto;
    padding: 25px;
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    border: 1px solid var(--accent-yellow);
    position: relative;
    max-height: 85vh;
    overflow-y: auto; /* Permette lo scroll se il testo è lungo */
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    color: var(--text-dim);
    cursor: pointer;
}

.modal-text {
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.5;
    color: white;
}

/* Questo entra dentro la modale e forza il colore ignorando ogni altra regola */
div#sorare-modal.modal div.modal-content h2 {
    color: var(--accent-yellow) !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    display: block !important;
}
.modal-text ol {
    padding-left: 20px;
    margin: 15px 0;
}

.modal-text li {
    margin-bottom: 10px;
}

.exclusive-msg {
    background: rgba(34, 197, 94, 0.1);
    padding: 12px;
    border-radius: 10px;
    color: #2aff43;
    margin: 15px 0;
    font-weight: 600;
}

.small-note {
    font-size: 0.75rem;
    color: white;
    margin-bottom: 15px;
}

.btn-modal-standard {
    /* Layout */
    display: block !important;
    width: fit-content !important;
    max-width: 300px;
    margin: 25px auto 10px auto !important;
    padding: 15px 25px !important;
    
    /* Estetica */
    background-color: var(--accent-yellow) !important;
    color: #000 !important; /* Testo nero per contrasto sul giallo */
    border: none !important;
    border-radius: 8px !important; /* Angoli leggermente arrotondati, non a cerchio */
    
    /* Testo */
    font-family: inherit;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Interazione */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* EFFETTO SCHIACCIAMENTO (Solo pressione) */
.btn-modal-standard:active {
    transform: scale(0.96) !important; /* Si comprime leggermente */
    background-color: #e6b800 !important; /* Diventa un giallo un po' più scuro */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* =========================================
   AGGIORNAMENTI LAYOUT ROSASORARE
   ========================================= */

.modal-footer-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;            /* Spazio tra i due bottoni */
    margin-top: 25px;
    flex-wrap: wrap;      /* Se non ci stanno, vanno uno sotto l'altro */
    width: 100%;
}

/* Header flessibile: Logo e Titoli sulla stessa riga */
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

/* Titoli delle sezioni (GK, DF, etc.) */
.role-title {
    font-size: 0.9rem;
    color: black; /* Ho corretto "balck" in "black" */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 25px auto 15px auto; /* Centra il blocco rispetto al contenitore */
    text-align: center; /* Centra il testo all'interno del blocco */
    
    /* Se vuoi mantenere il tocco di giallo, meglio metterlo sotto */
    border-left: none; /* Togliamo il bordo a sinistra */
    border-bottom: 3px solid var(--accent-yellow); /* Lo mettiamo sotto */
    
    display: table; /* Fa sì che il bordo sia lungo quanto il testo e non quanto tutta la riga */
    padding: 0 10px 5px 10px; /* Spazio intorno al testo */
}

/* Card dei giocatori migliorata */
.player-card-exclusive {
    background-color: rgba(15, 23, 42, 1);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color); /* Colore base */
    transition: transform 0.2s;
}

/* Modifica mirata solo per desktop */
@media (min-width: 769px) {
    .player-card-exclusive {
        width: 85%; /* Stringe la card rispetto ai 700px del contenitore */
        margin-left: auto; /* Centra la card */
        margin-right: auto; /* Centra la card */
        max-width: 500px; /* Impedisce che diventi troppo larga su schermi grandi */
    }
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.card-top h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.card-top h4 small {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 400;
}

.p-price {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.p-team {
    font-size: 0.75rem;
    color: var(--accent-yellow);
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.p-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
}

.info-alert {
    background: rgba(51, 65, 85, 0.8);
    border: 1px solid var(--border-color);
    padding: 12px 20px; /* Aumentato il padding laterale per estetica */
    border-radius: 10px;
    line-height: 1.4;
    color: white;
    font-size: 0.85rem;

    /* --- LOGICA DI CENTRATURA E ADATTAMENTO --- */
    display: table;           /* Fa sì che il box sia largo quanto il testo */
    margin: 0 auto 20px auto; /* Centra il box nel tunnel e mantiene il margine sotto */
    text-align: left;       /* Centra il testo internamente */
}
/* =========================================
   NUOVA DASHBOARD HOME & DETTAGLI PLAYER
   ========================================= */

/* Griglia 3 Bottoni Verticali */
.main-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.btn-main-action {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 20px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-main-action:active {
    transform: scale(0.98);
    background: #2d3a4f;
}

/* Tabella Bonus Estesa */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

.stats-table th {
    background: var(--border-color);
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px;
    text-align: left;
}

.stats-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.table-sum-box {
    background: rgba(250, 204, 21, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid var(--accent-yellow);
    font-size: 0.8rem;
    color: var(--accent-yellow);
}

/* Metriche xG / xA e Indicatore Caldo */
.metrics-row {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    padding: 10px;
    background: var(--bg-color);
    border-radius: 12px;
}

.metric-box { text-align: center; }
.metric-box span { display: block; font-size: 0.65rem; color: var(--text-dim); }
.metric-box strong { font-size: 1.1rem; color: var(--text-main); }

.heat-container { margin: 15px 0; }
.heat-bar-bg {
    background: #334155;
    height: 10px;
    border-radius: 5px;
    margin: 8px 0;
    overflow: hidden;
}
.heat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-yellow), #ef4444);
}

/* Bottom Nav Fix */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    z-index: 1000;
}
/* =========================================
   3. DASHBOARD & RICERCA (OTTIMIZZATA)
   ========================================= */
.dashboard-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 100px; /* Spazio per la nav mobile */
}

/* Logout Button */
.btn-logout {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(239, 68, 68, 0.2);
    color: #f8fafc;
    border: 1px solid var(--accent-red);
    border-radius: 20px;
    font-size: 0.7rem;
    text-decoration: none;
    margin-top: 10px;
    font-weight: bold;
}

/* Barra di Ricerca */
.search-bar {
    margin: -15px 5;
    display: flex;
    gap: 10px;
}

.search-bar input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
}

.btn-search-trigger {
    background: var(--accent-yellow);
    border: none;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Griglia Bottoni Principali */
.main-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-main-action {
    width: 60%;
    padding: 18px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    margin-left: 90px;
}

.btn-main-action:active { transform: scale(0.98); }

/* Colori specifici come da screen */
.btn-main-action:nth-child(1) { background: #1442ff; color: black; } /* Confronta - Blu */
.btn-main-action:nth-child(2) { background: #2aff43; color: black; } /* Statistiche - Verde */
.btn-main-action:nth-child(3) { background: #f1c40f; color: black; } /* Top - Giallo */


/* STILE PER IL RISULTATO RICERCA */
.player-detail-box {
    background: var(--card-bg);
    border: 1px solid var(--accent-yellow);
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    text-align: left; /* Fondamentale per la tabella */
}

.stats-table {
    width: 100%;
    margin: 15px 0;
    border-collapse: collapse;
}

.stats-table th {
    color: var(--text-dim);
    font-size: 0.7rem;
    border-bottom: 1px solid var(--border-color);
    padding: 5px;
}

.stats-table td {
    padding: 10px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}

.table-sum-box {
    background: rgba(250, 204, 21, 0.1);
    color: var(--accent-yellow);
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 15px;
}
/* --- POP-UP MODALE --- */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(15, 23, 42, 0.98);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

.modal-content-wrapper {
    width: 92%;
    max-width: 450px;
    background: #111827;
    border: 1px solid var(--accent-yellow);
    border-radius: 20px;
    padding: 10px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease-out;
}

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

/* --- TENDINE INTERNE --- */
.dropdown-section {
    border-bottom: 1px solid #334155;
    margin-bottom: 5px;
}

.dropdown-trigger {
    display: flex;
    justify-content: space-between;
    padding: 15px 5px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.dropdown-section.active .dropdown-content {
    max-height: 500px;
    padding-bottom: 15px;
}

/* --- TABELLE POP-UP --- */
.stats-table-v2 {
    width: 100%;
    border-collapse: collapse;
}

.stats-table-v2 td {
    padding: 12px 8px;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.stats-table-v2 td:nth-child(2) { text-align: center; }
.stats-table-v2 td:nth-child(3) { text-align: right; }

/* --- BOX SOMMA BONUS & PUNTEGGIO --- */
.info-highlight-box {
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid var(--accent-yellow);
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

.current-score-row { font-size: 0.65rem; color: var(--text-dim); margin-bottom: 5px; }
.current-score-row span { color: white; font-size: 1.2rem; font-weight: bold; }
.bonus-summary-row { font-size: 0.9rem; color: var(--accent-yellow); font-weight: bold; }

/* --- METRICHE E FOOTER --- */
.metrics-row-modal {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.metrics-row-modal strong { display: block; font-size: 1.2rem; }

.titolarity-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 15px 5px;
    border-top: 1px solid #334155;
    color: var(--text-dim);
}

.titolarity-footer strong { color: var(--accent-green); }

.btn-close-modal {
    width: 100%;
    background: #334155;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: bold;
}
/* --- STILE DESCRIZIONI METRICHE (xG / xA) --- */
.metric-desc {
    font-size: 0.58rem;          /* Dimensione molto piccola */
    color: #94a3b8;             /* Colore grigio tenue */
    margin: 8px 10px 0 10px;    /* Spazio sopra e ai lati */
    line-height: 1.3;           /* Interlinea per leggibilità */
    text-transform: lowercase !important; /* FORZA IL MINUSCOLO */
    display: block;             /* Assicura che vada a capo */
}

/* Assicurati che anche le etichette piccole siano in minuscolo */
.metric-item small {
    display: block;
    font-size: 0.65rem;
    color: var(--accent-yellow);
    text-transform: lowercase; 
    margin-bottom: 5px;
}
.compare-search-grid {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    font-weight: bold;
    font-size: 0.8rem;
}

.compare-flex-container {
    display: flex;
    gap: 10px;
    width: 100%;
}

.compare-slot {
    flex: 1;
    min-width: 0; /* Evita che le tabelle rompano il layout */
}

.placeholder-box {
    border: 1px dashed #334155;
    border-radius: 15px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.6rem;
    text-align: center;
    padding: 10px;
}

.mini-stat {
    font-size: 0.7rem;
    margin-bottom: 5px;
    color: var(--text-dim);
}

.mini-stat strong {
    color: white;
}
.compare-search-wrapper {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    gap: 8px;
    align-items: center;
}

.search-group {
    display: flex;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
    height: 45px;
}

.compare-input {
    background: transparent !important;
    border: none !important;
    padding: 0 10px;
    flex: 1;
    color: white;
    font-size: 0.8rem;
    min-width: 0;
}

.search-btn-mini {
    background: var(--accent-yellow);
    border: none;
    color: #000;
    padding: 0 15px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.search-btn-mini:hover {
    opacity: 0.8;
}

.compare-flex-container {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.compare-slot {
    flex: 1;
    min-width: 160px;
}

.placeholder-box {
    border: 1px dashed #334155;
    border-radius: 15px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.6rem;
    text-align: center;
    padding: 20px;
    text-transform: uppercase;
}
.bonus-string {
    font-size: 1rem; /* Ingrandito per leggibilità */
    color: var(--accent-yellow);
    letter-spacing: 1.5px;
    margin-top: 8px;
}

/* Ingrandiamo anche l'etichetta del Potenziale Bonus */
.heat-label {
    font-size: 0.65rem !important; 
    color: var(--text-dim);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .category-btn {
        height: 55px; /* Più grande, facile da cliccare col pollice */
        font-size: 1rem;
        position: sticky;
        bottom: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        border: 2px solid white; /* Lo rende più visibile */
    }

    input[type="text"] {
        font-size: 16px; /* Evita lo zoom automatico di iOS quando si clicca */
    }
}
@media (max-width: 768px) {
    /* Rende i bottoni più alti e facili da toccare */
    .category-btn {
        padding: 18px !important;
        font-size: 1rem !important;
        letter-spacing: 1px;
    }

    /* Evita lo zoom fastidioso di iPhone/Android quando clicchi l'input */
    input[type="text"] {
        font-size: 16px !important; 
    }
}
.btn-search-trigger {
    background: var(--accent-yellow); /* Usa il tuo giallo */
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search-trigger:active {
    transform: scale(0.9); /* Effetto pressione */
}

/* Assicuriamoci che la search-bar non si rompa su mobile */
.search-bar div {
    width: 100%;
}
/* --- AGGIORNAMENTI PER TABS E DEMO --- */

/* Gestione dello scorrimento orizzontale delle Tabs su Mobile */
.tabs-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Nasconde scrollbar su Firefox */
    -ms-overflow-style: none; /* Nasconde scrollbar su IE/Edge */
    gap: 8px;
    padding: 8px;
    background: #111827;
    border-radius: 12px;
}

.tabs-nav::-webkit-scrollbar {
    display: none; /* Nasconde scrollbar su Chrome/Safar/App */
}

/* Stile per i componenti bloccati (Demo) */
.locked-btn {
    position: relative;
    background: #1f2937 !important;
    border: 1px dashed #4b5563 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    overflow: hidden;
}

.locked-btn::after {
    content: 'PREMIUM';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.5rem;
    background: var(--accent-yellow);
    color: black;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 900;
}

/* Card Risultati Ricerca/Confronto */
.trial-result-card {
    animation: fadeIn 0.4s ease-out;
    background: #111827;
    border: 1px solid var(--accent-yellow);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

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

/* Utility per i testi */
.text-accent { color: var(--accent-yellow); }
.text-small { font-size: 0.7rem; color: #9ca3af; }

/* Ottimizzazione Input */
input[type="text"] {
    transition: border-color 0.3s ease;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-yellow) !important;
    box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.1);
}
.search-wrapper { position: relative; width: 100%; display: flex; gap: 10px; align-items: center; }
.suggestions-container {
    position: absolute;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    width: calc(100% - 50px); /* Allineato all'input */
    top: 50px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.suggestion-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #222;
    color: white;
}
.suggestion-item:hover { background: var(--accent-yellow); color: black; }
.modal-overlay { z-index: 9999; }
/* Box Colorati Sidebar Destra */
.locked-feature.bonus { 
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(0, 0, 0, 0.4)); 
    border-left: 4px solid #2ecc71; 
}

.locked-feature.stats { 
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(0, 0, 0, 0.4)); 
    border-left: 4px solid #3498db; 
}

/* Disclaimer Stilizzato */
.disclaimer-box {
    margin-top: 15px;
    padding: 15px;
    background: rgba(241, 196, 15, 0.05);
    border: 1px dashed var(--accent-yellow);
    border-radius: 12px;
    text-align: center;
    font-size: 0.75rem;
    color: #eee;
    line-height: 1.4;
}

.disclaimer-box b { 
    color: var(--accent-yellow); 
    text-transform: uppercase;
}
/* Box EXP BONUS - Verde Sorare/Successo */
.locked-feature.lineup { 
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(15, 23, 42, 0.9));
    border-left: 4px solid #2ecc71;
    transition: transform 0.3s ease;
}

/* Box STATISTICHE - Blu Elite */
.locked-feature.market { 
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(15, 23, 42, 0.9));
    border-left: 4px solid #3498db;
    transition: transform 0.3s ease;
}

/* Disclaimer - Giallo Tazziño con bagliore */
.disclaimer-box {
    background: rgba(241, 196, 15, 0.05);
    border: 1px dashed var(--accent-yellow);
    box-shadow: inset 0 0 10px rgba(241, 196, 15, 0.1);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
}

/* Effetto hover per i box (opzionale) */
.locked-feature:hover {
    transform: translateY(-2px);
    filter: grayscale(0.5); /* Riduce l'effetto spento al passaggio del mouse */
}
/* Sfondo oscurato e sfocato */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
}

/* Contenitore della scheda giocatore */
.modal-content {
    background: #0f172a;
    max-width: 700px;
    margin: 40px auto;
    border-radius: 20px;
    border: 2px solid var(--accent-yellow);
    position: relative;
    padding: 25px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Pulsante per chiudere */
.close-modal {
    position: absolute;
    top: 15px; right: 15px;
    background: #e74c3c;
    color: white;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    z-index: 10001;

/*add CSS*/