/* Stile per l'avatar del personaggio in alto a sinistra */
.avatar-container {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid black;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.avatar-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.avatar-link:hover {
    transform: scale(1.05);
}

.avatar-link:hover .avatar-container {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.avatar-container img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid black;
    object-fit: cover;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.avatar-link:hover img {
   border-color: black;
}

.avatar-container .character-name {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
    font-size: 12px;
    color: #333;
}

/* Riposizionamento icona messaggi sotto alle condizioni meteo */
.weather-messages-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.weather-info {
    order: 1;
}

.messages-icon {
    order: 2;
}

/* Stile alternativo per layout esistente */
.top-left-widgets {
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}



/* Forza il riposizionamento del nome ignorando il CSS di main.php */
.avatar-box .character-name, 
.avatar-box b, 
.avatar-box span {
    position: absolute !important;
    display: block !important;
    width: 150px !important; /* Più largo per evitare che vada a capo */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centratura perfetta */
    
    /* MODIFICA QUI: */
    top: 95px !important;    /* Aumenta questo valore per spingerlo SOTTO l'avatar */
    
    text-align: center !important;
    color: #0ff !important;
    text-shadow: 0 0 5px #0ff !important;
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Assicurati che il contenitore non tagli il nome mentre lo spostiamo */
.avatar-box {
    overflow: visible !important;
    height: 150px !important; /* Diamo spazio verticale per contenere il nome sotto */
}