/* assets/css/fantauml_main.css - TEMA 2026 */

/* =========================================
   1. DEFINIZIONE FONTS
   ========================================= */
@font-face {
    font-family: 'DrukWide';
    src: url('/assets/doc/DrukTextWide-MediumItalic-Trial.otf') format('opentype');
    font-weight: bold;
    font-style: italic; /* Corsivo 2026 */
}

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

/* Alias per retrocompatibilità coi vecchi template */
@font-face {
    font-family: "TitoloFont";
    src: url("/assets/doc/DrukTextWide-MediumItalic-Trial.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "ParagrafoFont";
    src: url("/assets/doc/HelveticaBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

/* =========================================
   2. STILI BASE PAGINA E VARIABILI
   ========================================= */
:root {
    --rosa-elettrico: #ff19ff;
    --viola: #790cfd;
    --bianco: #ffffff;
    --testo-bianco: #ffffff;
    --sfondo-scuro: rgba(18, 0, 40, 0.85); /* Vinaccia Scuro */
    --sfondo-scuro-2: rgba(18, 0, 40, 0.5); /* Vinaccia Medio */
    --bordo-sottile: 1px solid rgba(255, 255, 255, 0.15);
}

body {
    font-family: 'HelveticaBold', Arial, sans-serif !important;
    font-weight: bold !important;
    padding-bottom: 20px;
    color: var(--bianco);
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    
    /* BASE VINACCIA */
    background-color: #120028 !important;
    position: relative;
    z-index: 0;
}

/* SFONDO FISSO 2026 CON OVERLAY VINACCIA */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: linear-gradient(rgba(18, 0, 40, 0.5), rgba(18, 0, 40, 0.5)), url('/assets/imm/gradiente26.jpg') center/cover no-repeat;
    z-index: -1;
    transform: translateZ(0);
    will-change: transform;
}

/* Forzatura Maiuscole */
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 Classifica --- */
.fantauml-container {
    width: 95%; max-width: 804px; margin: 13px auto; padding: 10px;
}

.classifica-container {
    background-color: var(--sfondo-scuro);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(18, 0, 40, 0.5);
    margin: 13px auto; padding: 10px; width: 95%; max-width: 670px;
    border: 1px solid var(--bordo-sottile);
}

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

.classifica-title, .preview-title, .modal-title {
    font-family: "DrukWide", Arial, sans-serif;
    font-style: italic;
    color: var(--rosa-elettrico);
    margin-bottom: 10px; text-align: center;
}

.section-title {
    font-family: 'DrukWide', sans-serif;
    font-style: italic;
    font-size: 1.68rem !important;
    color: var(--bianco);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.classifica-title { font-size: 1.2rem; margin: 0; }
.section-title { font-size: 1.2rem; }
.preview-title { font-size: 0.94rem; margin: 0; }
.modal-title { font-size: 1.07rem; margin-bottom: 13px; }

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

.classifica-table thead th, .giocatori-table th, .preview-table thead th {
    background-color: rgba(18, 0, 40, 0.95); /* Vinaccia quasi solido */
    color: var(--testo-bianco); padding: 8px 10px; text-align: left;
    font-weight: normal; letter-spacing: 0.67px;
}
.preview-table thead th { font-size: 0.6rem; }
.giocatori-table th { font-size: 0.57rem; padding: 5px 8px; }

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

/* Alternanza righe in Vinaccia/Viola */
.classifica-table tbody tr:nth-child(even), .preview-table tbody tr:nth-child(even) {
    background-color: rgba(121, 12, 253, 0.15); /* Viola 2026 trasparente */
}

.classifica-table tbody tr:hover, .preview-table tbody tr:hover {
    background-color: rgba(255, 25, 255, 0.15); /* Luce rosa neon */
}

.classifica-table td, .preview-table td, .giocatori-table td {
    padding: 8px 10px; color: var(--testo-bianco); vertical-align: middle;
}
.preview-table { font-size: 0.34rem !important; }
.preview-table tbody tr { font-size: 0.54rem !important; }
.giocatori-table td { padding: 5px 8px; border-bottom: var(--bordo-sottile); }

/* --- Stili Celle Specifiche --- */
.posizione-cell, .punti-cell, .player-points {
    font-family: "DrukWide", Arial, sans-serif;
    font-style: italic;
    color: var(--rosa-elettrico);
}
.posizione-cell { font-size: 0.74rem; text-align: center; width: 34px; }
.punti-cell { font-size: 0.74rem; text-align: right; padding-right: 17px; color: var(--testo-bianco); }
.player-points { font-size: 0.57rem; }

.squadra-cell, .giocatore-cell { display: flex; align-items: center; gap: 7px; }
.squadra-logo, .giocatore-foto, .giocatore-img {
    border-radius: 50%; object-fit: cover; border: 1px solid var(--rosa-elettrico);
}
.squadra-logo, .giocatore-foto { width: 23px; height: 23px; }
.giocatore-img { width: 20px; height: 20px; }

.squadra-info, .giocatore-info { display: flex; flex-direction: column; }
.squadra-nome, .giocatore-nome, .player-name { font-weight: bold; font-size: 0.64rem; color: var(--testo-bianco); }
.user-nome, .giocatore-ruolo { font-size: 0.57rem; opacity: 0.8; }

.toggle-cell { text-align: center; width: 34px; }
.toggle-icon, .bonus-icon { width: 13px; height: 13px; cursor: pointer; transition: transform 0.3s; filter: invert(1); }
.bonus-icon { width: 11px; height: 11px; margin-left: auto; }

/* --- Dettagli Espandibili --- */
.dettagli-row { background-color: rgba(18, 0, 40, 0.95) !important; }
.dettagli-content { padding: 10px; }
.giocatori-table { margin-top: 7px; }
.bonus-content {
    padding: 7px; background-color: rgba(255, 25, 255, 0.1);
    border-radius: 3px; margin-top: 3px; font-size: 0.57rem; display: none; color: var(--testo-bianco);
}

/* Voti & Icone */
.voto-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 3px; font-weight: bold; color: var(--testo-bianco);
}
.voto-5down { background-color: #ff3300; }
.voto-5to6 { background-color: #ff6600; }
.voto-6to65 { background-color: #cccc00; }
.voto-7to75 { background-color: #22aa52; }
.voto-75to85 { background-color: #00ccff; }
.voto-85to95 { background-color: #0066ff; }
.voto-95to10 { background-color: var(--rosa-elettrico); }

.player-icon-motn::before { content: "⭐️"; font-size: 11px; }
.player-icon-porter::before { content: "🧤"; font-size: 9px; }

/* --- Sezione Utente & Squadra --- */
.user-section, .preview-box, .info-box {
    background-color: var(--sfondo-scuro); border-radius: 8px; padding: 13px;
    box-shadow: 0 3px 10px rgba(18, 0, 40, 0.4); border: 1px solid var(--bordo-sottile);
}
.user-section { margin-bottom: 20px; }
.preview-box { padding: 10px; }
.info-box { text-align: center; transition: transform 0.3s; cursor: pointer; }
.info-box:hover { transform: translateY(-3px); background-color: rgba(18, 0, 40, 0.95); border-color: var(--rosa-elettrico); }

.user-info { display: flex; align-items: center; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rosa-elettrico); margin-right: 7px; }
.user-name { font-size: 0.67rem; opacity: 0.9; }

.team-container { display: flex; flex-direction: column; align-items: center; flex-grow: 1; }
.team-info { display: flex; align-items: center; gap: 10px; }
.team-logo { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; border: 1px solid var(--rosa-elettrico); }
.team-name { font-family: 'DrukWide', sans-serif; font-style: italic; font-size: 1rem; color: var(--rosa-elettrico); margin-bottom: 2px; }
.team-stats { font-size: 0.74rem; }

.position-badge {
    background: linear-gradient(135deg, var(--rosa-elettrico), var(--viola));
    border-radius: 7px; padding: 3px 8px; font-weight: bold; font-size: 0.67rem;
    display: flex; gap: 3px; align-items: center;
}

/* Preview Section & Info */
.preview-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-bottom: 20px; }
.info-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 20px; }
.view-all { color: var(--testo-bianco); font-size: 0.6rem; transition: color 0.3s; text-decoration: none; }
.view-all:hover { color: var(--rosa-elettrico); }
.info-icon { font-size: 1.34rem; color: var(--rosa-elettrico); margin-bottom: 10px; }
.info-title { font-size: 0.8rem; margin-bottom: 7px; }
.info-description { font-size: 0.6rem; line-height: 1.4; text-transform: none !important; }

/* Buttons & Login */
.login-message { text-align: center; font-size: 0.8rem; padding: 20px 0; }
.login-button {
    display: inline-block; background-color: var(--rosa-elettrico); color: var(--testo-bianco);
    padding: 7px 17px; border-radius: 3px; text-decoration: none; margin-top: 10px; transition: 0.3s;
}
.login-button:hover { transform: translateY(-2px); box-shadow: 0 3px 7px rgba(255,25,255,0.4); }

/* --- Squadra utente (Cards Giocatori) --- */
.user-squad { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 13px; }
.player-card {
    width: calc(30% - 7px); max-width: 141px;
    background-color: var(--sfondo-scuro-2); border-radius: 5px;
    overflow: hidden; transition: transform 0.3s, box-shadow 0.3s;
    position: relative; display: flex; margin-bottom: 5px; border: 1px solid var(--bordo-sottile);
}
.player-card:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(255, 25, 255, 0.2); border-color: var(--rosa-elettrico); }

.captain-badge {
    position: absolute; top: 3px; right: 3px; background: linear-gradient(135deg, var(--rosa-elettrico), var(--viola));
    border-radius: 50%; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.54rem; z-index: 2; box-shadow: 0 1px 3px rgba(255, 25, 255, 0.5);
}

.player-image-container { width: 47px; min-width: 47px; position: relative; }
.player-image { width: 100%; height: 47px; object-fit: cover; border-right: 1px solid var(--rosa-elettrico); }

.player-info { padding: 5px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; width: calc(100% - 47px); overflow: hidden; }
.player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.player-name { font-size: 0.57rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; }
.player-details { display: flex; align-items: center; flex-wrap: nowrap; }
.player-role { font-size: 0.5rem; color: var(--rosa-elettrico); padding: 1px 3px; background-color: rgba(121, 12, 253, 0.2); border-radius: 5px; margin-right: 3px; white-space: nowrap; }
.player-team { font-size: 0.5rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.team-player-logo { width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; object-fit: cover; border: 1px solid var(--rosa-elettrico); flex-shrink: 0; }

/* Modals */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(18, 0, 40, 0.85); backdrop-filter: blur(5px); }
.modal-content { background-color: #120028; border: 1px solid var(--rosa-elettrico); margin: 5% auto; padding: 13px; border-radius: 8px; width: 80%; max-width: 536px; max-height: 80vh; overflow-y: auto; animation: modalopen 0.3s; }
@keyframes modalopen { from {opacity: 0; transform: translateY(-13px);} to {opacity: 1; transform: translateY(0);} }
.close { color: var(--rosa-elettrico); float: right; font-size: 19px; cursor: pointer; }

/* Responsive Media Queries */
@media (max-width: 603px) {
    .preview-section, .info-section { grid-template-columns: 1fr; }
    .player-card { width: calc(50% - 7px); }
}

@media (max-width: 515px) {
    .user-header { flex-direction: column; gap: 10px; }
    .user-info { order: 2; width: 100%; justify-content: center; }
    .team-container { order: 1; width: 100%; margin-bottom: 10px; }
    .position-badge { order: 3; margin-top: 7px; }
    .classifica-container { padding: 7px; width: 98%; }
    .classifica-title { font-size: 1rem; }
    .classifica-table thead th, .classifica-table td { padding: 5px 7px; font-size: 0.6rem; }
    .posizione-cell { font-size: 0.67rem; width: 27px; }
    .squadra-logo { width: 20px; height: 20px; }
    .squadra-nome { font-size: 0.57rem; }
    .user-nome { font-size: 0.5rem; }
    .punti-cell { font-size: 0.67rem; padding-right: 10px; }
    .toggle-icon { width: 12px; height: 12px; }
    .dettagli-content { padding: 7px; }
    .giocatori-table th, .giocatori-table td { padding: 4px 5px; font-size: 0.54rem; }
    .giocatore-img { width: 17px; height: 17px; }
    .voto-box { width: 17px; height: 17px; font-size: 0.6rem; }
}

@media (max-width: 402px) {
    .user-squad { gap: 5px; }
    .team-info { flex-direction: column; gap: 5px; }
    .player-card { width: calc(50% - 5px); }
    .player-image-container { width: 40px; min-width: 40px; height: 40px; }
    .player-image { height: 40px; }
    .player-info { padding: 3px; }
    .player-name, .player-points { font-size: 0.5rem; }
    .player-role, .player-team { font-size: 0.44rem; }
    .player-role { padding: 1px 2px; }
    .section-title {
    font-family: 'DrukWide', sans-serif;
    font-style: italic;
    font-size: 1rem !important;
    color: var(--bianco);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    }

    .preview-title { font-size: 0.8rem; }
    .preview-table thead th, .preview-table td { padding: 5px 7px; font-size: 0.54rem; }
    .posizione-cell { width: 20px; font-size: 0.67rem; }
    .squadra-logo, .giocatore-foto { width: 20px; height: 20px; }
    .squadra-nome, .giocatore-nome { font-size: 0.57rem; }
    .user-nome, .giocatore-ruolo { font-size: 0.5rem; }
    .punti-cell { font-size: 0.6rem; }
}

@media (max-width: 322px) {
    .classifica-table thead th:nth-child(3), .classifica-table td:nth-child(3) { display: none; }
    .squadra-info { min-width: 80px; }
    .classifica-title { font-size: 0.87rem; }
    .squadra-logo { width: 17px; height: 17px; }
    .giocatore-img { width: 13px; height: 13px; }
    .voto-box { width: 13px; height: 13px; font-size: 0.54rem; }
}
.no-link-decoration { text-decoration: none; color: inherit; }