/* =========================================
   1. DEFINIZIONE FONTS
   ========================================= */
@font-face {
    font-family: 'DrukWide';
    src: url('../../doc/DrukWideBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaBold';
    src: url('../../doc/HelveticaBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* =========================================
   2. STILI BASE PAGINA
   ========================================= */
:root {
    --rosa-elettrico: #ff19ff;
    --viola: #5e00ff;
    --bianco: #ffffff;
    --testo-bianco: #ffffff;
}

body {
    /* APPLICAZIONE FONT GRASSETTO (Include Header & Footer) */
    font-family: 'HelveticaBold', Arial, sans-serif !important;
    font-weight: bold !important;
    
    padding-bottom: 30px;
    color: var(--bianco);
    margin: 0;
    
    /* SFONDO FISSO */
    background-image: url('../../imm/sfondouml25.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    
    text-align: center;
    text-transform: uppercase;
}
/* --- Layout Classifica --- */
.classifica-container {
    background-color: var(--sfondo-scuro);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    margin: 20px auto;
    padding: 15px;
    width: 95%;
    max-width: 1000px;
}

.classifica-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: var(--bordo-sottile);
}

.classifica-title {
    font-family: "TitoloFont", Arial, sans-serif;
    color: var(--rosa-elettrico);
    font-size: 1.8rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Tabella Classifica --- */
.classifica-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "ParagrafoFont", Arial, sans-serif;
}

.classifica-table thead th {
    background-color: var(--viola);
    color: var(--testo-bianco);
    padding: 12px 15px;
    text-align: left;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.classifica-table tbody tr {
    background-color: var(--sfondo-scuro-2);
    border-bottom: var(--bordo-sottile);
    transition: background-color 0.3s ease;
}

.classifica-table tbody tr:nth-child(even) {
    background-color: rgba(94, 17, 247, 0.1);
}

.classifica-table tbody tr:hover {
    background-color: rgba(255, 0, 255, 0.1);
}

.classifica-table td {
    padding: 12px 15px;
    color: var(--testo-bianco);
    vertical-align: middle;
}

/* --- Stili Celle Specifiche --- */
.posizione-cell {
    font-family: "TitoloFont", Arial, sans-serif;
    color: var(--rosa-elettrico);
    font-size: 1.1rem;
    text-align: center;
    width: 50px;
}

.squadra-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.squadra-logo {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rosa-elettrico);
}

.squadra-info {
    display: flex;
    flex-direction: column;
}

.squadra-nome {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--testo-bianco);
}

.user-nome {
    font-size: 0.85rem;
    opacity: 0.8;
    color: var(--testo-bianco);
}

.punti-cell {
    font-family: "TitoloFont", Arial, sans-serif;
    font-size: 1.1rem;
    text-align: right;
    padding-right: 25px;
    color: var(--testo-bianco);
}

.toggle-cell {
    text-align: center;
    width: 50px;
}

.toggle-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    filter: invert(1);
}

/* --- Dettagli Espandibili --- */
.dettagli-row {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dettagli-content {
    padding: 15px;
}

.giocatori-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.giocatori-table th {
    background-color: var(--viola);
    color: var(--testo-bianco);
    padding: 8px 12px;
    text-align: left;
    font-weight: normal;
    font-size: 0.85rem;
}

.giocatori-table td {
    padding: 8px 12px;
    border-bottom: var(--bordo-sottile);
    color: var(--testo-bianco);
}

.giocatore-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.giocatore-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rosa-elettrico);
}

.bonus-toggle {
    margin-left: auto;
    cursor: pointer;
}

.bonus-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    filter: invert(1);
}

.bonus-content {
    padding: 10px;
    background-color: rgba(255, 0, 255, 0.1);
    border-radius: 5px;
    margin-top: 5px;
    font-size: 0.85rem;
    display: none;
    color: var(--testo-bianco);
}

/* Stili per i voti */
.voto-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    font-weight: normal;
    color: var(--testo-bianco);
}

.voto-5down { background-color: var(--arancione-scuro); }
.voto-5to6 { background-color: var(--arancione-chiaro); }
.voto-6to65 { background-color: var(--giallo); }
.voto-7to75 { background-color: var(--verde); }
.voto-75to85 { background-color: var(--celestino); }
.voto-85to95 { background-color: var(--blu); }
.voto-95to10 { background-color: var(--rosa-elettrico); }

/* Stili per le icone */
.player-icon-motn::before {
    content: "⭐️";
    font-size: 16px;
}

.player-icon-porter::before {
    content: "🧤";
    font-size: 14px;
}

/* Media Queries */
@media (max-width: 768px) {
    .classifica-container {
        padding: 10px;
        width: 98%;
    }
    
    .classifica-title {
        font-size: 1.5rem;
    }
    
    .classifica-table thead th,
    .classifica-table td {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
    
    .posizione-cell {
        font-size: 1rem;
        width: 40px;
    }
    
    .squadra-logo {
        width: 30px;
        height: 30px;
    }
    
    .squadra-nome {
        font-size: 0.85rem;
    }
    
    .user-nome {
        font-size: 0.75rem;
    }
    
    .punti-cell {
        font-size: 1rem;
        padding-right: 15px;
    }
    
    .toggle-icon {
        width: 18px;
        height: 18px;
    }
    
    .dettagli-content {
        padding: 10px;
    }
    
    .giocatori-table th,
    .giocatori-table td {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    
    .giocatore-img {
        width: 25px;
        height: 25px;
    }
    
    .voto-box {
        width: 25px;
        height: 25px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .classifica-table thead th:nth-child(3),
    .classifica-table td:nth-child(3) {
        display: none;
    }
    
    .squadra-info {
        min-width: 120px;
    }
    
    .classifica-title {
        font-size: 1.3rem;
    }
    
    .squadra-logo {
        width: 25px;
        height: 25px;
    }
    
    .giocatore-img {
        width: 20px;
        height: 20px;
    }
    
    .voto-box {
        width: 20px;
        height: 20px;
        font-size: 0.8rem;
    }
}

/* Stili aggiuntivi */
.no-link-decoration {
    text-decoration: none;
    color: inherit;
}



        /* --- Stili Globali --- */
        :root {
            --rosa-elettrico: #ff00ff;
            --viola: #5e00ff;
            --testo-bianco: #ffffff;
            --sfondo-scuro: rgba(0, 0, 0, 0.7);
            --sfondo-scuro-2: rgba(0, 0, 0, 0.5);
            --bordo-sottile: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        
body,
.fantauml-container,
.section-title,
.user-section,
.user-header,
.user-info,
.user-name,
.team-container,
.team-info,
.team-data,
.team-name,
.team-stats,
.position-badge,
.login-message,
.login-button,
.user-squad,
.player-card,
.captain-badge,
.player-info,
.player-header,
.player-name,
.player-points,
.player-details,
.player-role,
.player-team,
.preview-section,
.preview-box,
.preview-header,
.preview-title,
.view-all,
.preview-table thead th,
.preview-table tbody tr td,
.posizione-cell,
.squadra-nome,
.user-nome,
.giocatore-nome,
.giocatore-ruolo,
.punti-cell,
.info-section,
.info-box,
.info-title,
.info-description,
.modal-title,
.modal-body,
.close {
    text-transform: uppercase !important;
}

        /* --- Layout principale --- */
        .fantauml-container {
            width: 95%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 15px;
        }

        .section-title {
            font-family: "TitoloFont", Arial, sans-serif;
            color: var(--rosa-elettrico);
            font-size: 1.8rem;
            margin-bottom: 15px;
            text-align: center;
            text-transform: uppercase;
        }

        /* --- Sezione utente --- */
        .user-section {
            background-color: var(--sfondo-scuro);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }

        .user-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: var(--bordo-sottile);
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--rosa-elettrico);
            margin-right: 10px;
        }

        .user-name {
            font-size: 1rem;
            color: var(--testo-bianco);
            opacity: 0.9;
        }

        .team-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
        }

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

        .team-logo {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            object-fit: cover;
            border: 2px solid var(--rosa-elettrico);
        }

        .team-data {
            text-align: center;
        }

        .team-name {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--rosa-elettrico);
            margin-bottom: 3px;
        }

        .team-stats {
            font-size: 1.1rem;
            color: var(--testo-bianco);
        }

        .position-badge {
            background: linear-gradient(135deg, var(--rosa-elettrico), var(--viola));
            color: white;
            border-radius: 10px;
            padding: 5px 12px;
            font-weight: bold;
            font-size: 1rem;
            display: flex;
            gap: 5px;
            align-items: center;
        }

        .login-message {
            text-align: center;
            font-size: 1.2rem;
            color: var(--testo-bianco);
            padding: 30px 0;
        }

        .login-button {
            display: inline-block;
            background-color: var(--rosa-elettrico);
            color: var(--testo-bianco);
            padding: 10px 25px;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 15px;
            transition: transform 0.3s, background-color 0.3s;
        }

        .login-button:hover {
            transform: translateY(-3px);
        }

        /* --- Squadra utente --- (MODIFICATO: Ridotto dimensioni del 40%) */
        .user-squad {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 20px;
        }

        .player-card {
            width: calc(30% - 10px); /* Ridotto dal 50% al 30% */
            max-width: 210px; /* Ridotto da 350px a 210px */
            background-color: var(--sfondo-scuro-2);
            border-radius: 8px; /* Ridotto da 10px a 8px */
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            display: flex;
            margin-bottom: 8px; /* Ridotto da 10px a 8px */
        }

        .player-card:hover {
            transform: translateY(-2px); /* Ridotto da -3px a -2px */
            box-shadow: 0 5px 15px rgba(95, 0, 255, 0.3); /* Ridotto da 8px/20px a 5px/15px */
        }

        .captain-badge {
            position: absolute;
            top: 5px; /* Ridotto da 10px a 5px */
            right: 5px; /* Ridotto da 10px a 5px */
            background: linear-gradient(135deg, var(--rosa-elettrico), var(--viola));
            color: white;
            border-radius: 50%;
            width: 20px; /* Ridotto da 30px a 20px */
            height: 20px; /* Ridotto da 30px a 20px */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem; /* Ridotto da 1rem a 0.8rem */
            z-index: 2;
            box-shadow: 0 2px 5px rgba(255, 0, 255, 0.5); /* Ridotto da 8px a 5px */
        }

        .player-image-container {
            width: 70px; /* Ridotto da 120px a 70px */
            min-width: 70px; /* Ridotto da 120px a 70px */
            position: relative;
        }

        .player-image {
            width: 100%;
            height: 70px; /* Ridotto da 120px a 70px */
            object-fit: cover;
            border-right: 2px solid var(--rosa-elettrico);
        }

        .player-info {
            padding: 8px; /* Ridotto da 12px a 8px */
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-grow: 1;
            width: calc(100% - 70px); /* Assicura che player-info occupi lo spazio rimanente */
            overflow: hidden; /* Impedisce overflow di testo */
        }

        .player-header {
            display: flex;
            align-items: center;
            margin-bottom: 5px; /* Ridotto da 8px a 5px */
            justify-content: space-between; /* Miglior disposizione */
        }

        .player-name {
            font-size: 0.85rem; /* Ridotto da 1.1rem a 0.85rem */
            font-weight: bold;
            color: var(--testo-bianco);
            white-space: nowrap; /* Previene il ritorno a capo del testo */
            overflow: hidden; /* Nasconde il testo in eccesso */
            text-overflow: ellipsis; /* Aggiunge puntini di sospensione */
            max-width: 75%; /* Limita la larghezza per fare spazio ai punti */
        }

        .player-points {
            font-family: "TitoloFont", Arial, sans-serif;
            color: var(--rosa-elettrico);
            font-size: 0.85rem; /* Ridotto da 1.1rem a 0.85rem */
            font-weight: bold;
            white-space: nowrap;
        }

        .player-details {
            display: flex;
            align-items: center;
            flex-wrap: nowrap; /* Previene il wrap delle info */
        }

        .player-role {
            font-size: 0.75rem; /* Ridotto da 0.9rem a 0.75rem */
            color: var(--rosa-elettrico);
            padding: 1px 5px; /* Ridotto da 2px/8px a 1px/5px */
            background-color: rgba(94, 0, 255, 0.1);
            border-radius: 8px; /* Ridotto da 10px a 8px */
            margin-right: 5px; /* Ridotto da 8px a 5px */
            white-space: nowrap;
        }

        .player-team {
            display: flex;
            align-items: center;
            font-size: 0.75rem; /* Ridotto da 0.9rem a 0.75rem */
            color: var(--testo-bianco);
            opacity: 0.8;
            white-space: nowrap; /* Previene il ritorno a capo del testo */
            overflow: hidden; /* Nasconde il testo in eccesso */
            text-overflow: ellipsis; /* Aggiunge puntini di sospensione */
        }

        .team-player-logo {
            width: 15px; /* Ridotto da 20px a 15px */
            height: 15px; /* Ridotto da 20px a 15px */
            border-radius: 50%;
            margin-right: 3px; /* Ridotto da 5px a 3px */
            object-fit: cover;
            border: 1px solid var(--rosa-elettrico);
            flex-shrink: 0; /* Previene il ridimensionamento del logo */
        }

        /* --- Preview Classifiche --- */
        .preview-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .preview-box {
            background-color: var(--sfondo-scuro);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }

        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: var(--bordo-sottile);
        }

        .preview-title {
            font-family: "TitoloFont", Arial, sans-serif;
            color: var(--rosa-elettrico);
            font-size: 1.4rem;
            margin: 0;
        }

        .view-all {
            color: var(--testo-bianco);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s;
        }

        .view-all:hover {
            color: var(--rosa-elettrico);
        }

        .preview-table {
            font-size: 0.5rem !important;
            width: 100%;
            border-collapse: collapse;
            font-family: "ParagrafoFont", Arial, sans-serif;
        }

        .preview-table thead th {
            background-color: #000;
            color: var(--rosa-elettrico);
            padding: 10px 15px;
            text-align: left;
            font-weight: normal;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

        .preview-table tbody tr {
            text-align: left;
            font-size: 0.8rem !important;
            background-color: var(--sfondo-scuro-2);
            border-bottom: var(--bordo-sottile);
            transition: background-color 0.3s ease;
        }

        .preview-table tbody tr:nth-child(even) {
            background-color: rgba(94,17,247,0.1);
        }

        .preview-table tbody tr:hover {
            background-color: rgba(255,0,255,0.1);
        }

        .preview-table td {
            padding: 10px 15px;
            color: var(--testo-bianco);
            vertical-align: middle;
        }

        .posizione-cell {
            font-family: "TitoloFont", Arial, sans-serif;
            color: var(--rosa-elettrico);
            font-size: 1.1rem;
            text-align: center;
            width: 40px;
        }

        .squadra-cell, .giocatore-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .squadra-logo, .giocatore-foto {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--rosa-elettrico);
        }

        .squadra-info, .giocatore-info {
            display: flex;
            flex-direction: column;
        }

        .squadra-nome, .giocatore-nome {
            font-weight: bold;
            font-size: 0.95rem;
        }

        .user-nome, .giocatore-ruolo {
            font-size: 0.85rem;
            opacity: 0.8;
        }

        .punti-cell {
            font-family: "TitoloFont", Arial, sans-serif;
            font-size: 1.1rem;
            text-align: right;
            padding-right: 15px;
        }

        /* --- Info Boxes --- */
        .info-section {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .info-box {
            background-color: var(--sfondo-scuro);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            cursor: pointer;
        }

        .info-box:hover {
            transform: translateY(-5px);
            background-color: rgba(0, 0, 0, 0.8);
        }

        .info-icon {
            font-size: 2rem;
            color: var(--rosa-elettrico);
            margin-bottom: 15px;
        }

        .info-title {
            font-family: "TitoloFont", Arial, sans-serif;
            color: var(--rosa-elettrico);
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        .info-description {
            color: var(--testo-bianco);
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.8);
        }

        .modal-content {
            background-color: var(--sfondo-scuro);
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            animation: modalopen 0.3s;
        }

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

        .close {
            color: var(--rosa-elettrico);
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .modal-title {
            font-family: "TitoloFont", Arial, sans-serif;
            color: var(--rosa-elettrico);
            font-size: 1.6rem;
            margin-bottom: 20px;
        }

        .modal-body {
            color: var(--testo-bianco);
            line-height: 1.6;
        }

        /* Responsive Design */
        @media (max-width: 900px) {
            .preview-section, .info-section {
                grid-template-columns: 1fr;
            }
            
            .player-card {
                width: calc(50% - 10px); /* Ridotto dimensioni ma aumentato proporzione per mobile */
            }
        }

        @media (max-width: 768px) {
            .user-header {
                flex-direction: column;
                gap: 15px;
            }
            
            .user-info {
                order: 2;
                width: 100%;
                justify-content: center;
            }
            
            .team-container {
                order: 1;
                width: 100%;
                margin-bottom: 10px;
            }
            
            .position-badge {
                order: 3;
                margin-top: 10px;
            }
        }

        @media (max-width: 600px) {
            .user-squad {
                gap: 8px;
            }
            
            .team-info {
                flex-direction: column;
                gap: 8px;
            }
            
            .player-card {
                width: calc(50% - 8px); /* Due colonne su mobile */
            }
            
            .player-image-container {
                width: 60px;
                min-width: 60px;
                height: 60px;
            }
            
            .player-image {
                height: 60px;
            }
            
            .player-info {
                padding: 5px;
            }
            
            .player-name {
                font-size: 0.75rem;
            }
            
            .player-points {
                font-size: 0.75rem;
            }
            
            .player-role {
                font-size: 0.65rem;
                padding: 1px 3px;
            }
            
            .player-team {
                font-size: 0.65rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .preview-title {
                font-size: 1.2rem;
            }
            
            .preview-table thead th {
                font-size: 0.8rem;
                padding: 8px 10px;
            }
            
            .preview-table td {
                padding: 8px 10px;
            }
            
            .posizione-cell {
                width: 30px;
                font-size: 1rem;
            }
            
            .squadra-logo, .giocatore-foto {
                width: 30px;
                height: 30px;
            }
            
            .squadra-nome, .giocatore-nome {
                font-size: 0.85rem;
            }
            
            .user-nome, .giocatore-ruolo {
                font-size: 0.75rem;
            }
            
            .punti-cell {
                font-size: 0.9rem;
            }
        }