:root {
    --rosa-elettrico: #ff00ff;
    --viola: #5e00ff;
    --testo-bianco: #ffffff;
    --arancione-scuro: #ff3300;
    --arancione-chiaro: #ff6600;
    --giallo: #cccc00;
    --verdino: #00cc52;
    --verde: #22aa52;
    --celestino: #00ccff;
    --blu: #0066ff;
    --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);
}

@font-face {
    font-family: "TitoloFont";
    src: url("doc/DrukWideBold.otf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "ParagrafoFont";
    src: url("doc/HelveticaBold.ttf") format("truetype");
    font-display: swap;
}

body {
    background-image: url('/assets/imm/sfondouml25.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--rosa-elettrico);
    font-family: "ParagrafoFont", Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* STILI PER IL CAMPO DA CALCIO */
.campo-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 20px 19vw;
    gap: 20px;
}

.campo-calcio {
    width: 300px;
    height: 400px;
    background-image: url('imm/campetto.png');
    background-size: cover;
    background-position: center;
    border: 3px solid white;
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
}

.posizione {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Player display styling */
.posizione.selezionato {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.posizione.selezionato img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
}


.posizione .player-label {
    text-align: center;
    margin-top: 1.1px;
}

.posizione .player-name {
    color: white;
     font-size: 0.6em !important; 
     font-weight: normal !important;
    white-space: normal;  /* Cambiato da nowrap a normal */
    word-break: break-word;  /* Aggiungi questa riga */
    max-width: 80px;  /* Aggiungi questa riga */
    overflow: visible;  /* Aggiungi questa riga */
}



.posizione .player-role {
color: var(--rosa-elettrico);
background: rgba(0, 0, 0, 0);  /* Sfondo nero con opacità 20% */
padding: 2px 2px;                /* Spaziatura interna */
border-radius: 10px;             /* Bordi arrotondati per effetto ovale */
font-size: 14px;                 /* Dimensione del testo */
}

/* Posizioni sul campo - centrate perfettamente */
.portiere {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.difensore {
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.laterale-sx {
    bottom: 180px;
    left: 30px;
}

.laterale-dx {
    bottom: 180px;
    right: 30px;
}

.pivot {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Mantieni il centramento anche quando selezionati */
.portiere.selezionato {
    transform: translateX(-50%);
}

.difensore.selezionato {
    transform: translateX(-50%);
}

.pivot.selezionato {
    transform: translateX(-50%);
}

/* Panchina */
.panchina-container {
    margin: 0;
    flex-grow: 1;
}

.panchina-title {
    color: white;
    margin-bottom: 15px;
    font-size: 18px;
}

.panchina-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panchina-player {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 8px;
    width: 100%;
    max-width: 250px;
}

.panchina-player img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    position: relative;
}

.panchina-player-info {
    display: flex;
    flex-direction: column;
}

.panchina-player-name {
    color: white;
    font-size: 12px;
    white-space: nowrap;
}

.panchina-player-role {
    color: var(--rosa-elettrico);
    font-size: 11px;
}

/* Badge capitano */
.captain-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--rosa-elettrico);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

@media (max-width: 768px) {
.campo-container {
flex-direction: column;
margin: 20px auto;
align-items: center;
}

.campo-calcio {
width: 250px;
height: 350px;
}

.posizione.selezionato img {
width: 70px;
height: 70px;
}

.posizione .player-label {
font-size: 10px;
}

/* Aggiungi questa regola per il punteggio */
.posizione .player-role {
font-size: 10px; /* Stessa dimensione del nome */
}


.posizione .player-name {
 font-size: 0.8em !important; 
     font-weight: normal !important;
max-width: 60px;
}

 .laterale-sx {
    bottom: 150px;
    left: 20px;
}

.laterale-dx {
    bottom: 150px;
    right: 20px;
}

 .difensore {
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
}
.pivot {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}
.panchina-player {
max-width: 100%;
}

/* Layout 2-2-1 per la panchina */
.panchina-box {
display: grid;
grid-template-columns: 1fr 1fr; /* Due colonne uguali */
grid-template-rows: auto auto auto; /* Tre righe */
gap: 10px;
max-width: 100%;
}

/* Prima riga: giocatori 1 e 2 */
.panchina-player:nth-child(1) {
grid-column: 1;
grid-row: 1;
}

.panchina-player:nth-child(2) {
grid-column: 2;
grid-row: 1;
}

/* Seconda riga: giocatori 3 e 4 */
.panchina-player:nth-child(3) {
grid-column: 1;
grid-row: 2;
}

.panchina-player:nth-child(4) {
grid-column: 2;
grid-row: 2;
}

/* Terza riga: giocatore 5 centrato */
.panchina-player:nth-child(5) {
grid-column: 1 / 3; /* Occupa entrambe le colonne */
grid-row: 3;
justify-self: center; /* Centra l'elemento */
max-width: 48%; /* Mantiene la stessa larghezza degli altri */
}
}

.sponsor-section {
background: var(--sfondo-scuro);
padding: 20px !important;
border-radius: 15px !important;
margin: 20px 0 !important;
text-align: center!important;
}

.sponsor-container {
display: flex!important;
justify-content: center!important;
flex-wrap: wrap!important;
gap: 30px !important;
margin-top: 20px !important;
}

.sponsor-box {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
max-width: 200px !important;
}

.sponsor-logo {
width: 150px !important;
height: 150px !important;
object-fit: contain!important;
border-radius: 15px !important;
border: 2px solid var(--rosa-elettrico);
background: white !important;
padding: 10px !important;
margin-bottom: 10px !important;
transition: transform 0.3s ease!important;
}

.sponsor-logo:hover {
transform: scale(1.05) !important;
}

.sponsor-name {
color: white !important;
font-size: 16px !important;
font-weight: bold;
margin-top: 5px;
}

/* Responsive per mobile */
@media (max-width: 768px) {
.sponsor-container {
flex-direction: column;
align-items: center;
gap: 20px;
}

.sponsor-box {
max-width: 100%;
}

.sponsor-logo {
width: 120px;
height: 120px;
}
}


/* Stili per i loghi squadra nei giocatori */
.player-label img {
position: relative;
width: 25px;
height: 25px;
bottom: 60px;
right: -20px;
margin-top: 5px;
border-radius: 50%;
}

/* Stili per i loghi squadra in panchina */
.panchina-player img[alt*="logo"] {
position: absolute;
bottom: -5px;
right: -5px;
width: 15px;
height: 15px;
border: 1px solid white;
border-radius: 50%;
}

.sostituzioni-button {
text-align: center;
margin: 20px 0;
}

.btn-sostituzioni {
background: linear-gradient(45deg, #ff00ff, #5e00ff);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2em;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3);
}

.btn-sostituzioni:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 0, 255, 0.5);
background: linear-gradient(45deg, #ff3399, #7733ff);
}

.btn-sostituzioni:active {
transform: translateY(0);
}

/* Responsive per il pulsante */
@media (max-width: 768px) {
.btn-sostituzioni {
width: 100%;
max-width: 300px;
padding: 12px 20px;
font-size: 1em;
}
}