/****************************************************************************/
/* STILE DELLA FINESTRA PRESENTI */

/* HELP: Da qui è possibile modificare:
- I font ed i colori dei presenti
- Le dimensioni e la posizione della finestra dei presenti
- Lo sfondo della finestra dei presenti */
/*Frame dei presenti*/
div.presenti iframe.iframe_presenti {
    width: 190px;
    height: 520px;
    border: none;
    overflow: auto;
    background-color: transparent;
}

div.presenti iframe.iframe_presenti body.transparent_body {
    background-color: none;
}

div.luogo {
    margin: 0 auto;
    font-size: 20px;
    font-weight: bolder;
    color: #ffff00;
}

div.presente {
    font-weight: normal;
    font-size: 16px;
    color: #b3ecff;
	display: block;
}

div.presente2 {
    font-weight: normal;
    font-size: 20px;
    color: #b3ecff;
	display: block;
}
div.link_presenti {
    color: #00FFFF;
	display: block;
    /*border: solid 1px #000080;
	border-radius: 5px;
    -moz-border-radius: 5px; /* Bordi arrotondati */
    /*-webkit-border-radius: 5px;
    -khtml-border-radius: 5px;*/
}

/*Icone di stato dei presenti*/
div.pagina_presenti img.sesso_ico,
div.pagina_presenti img.status_ico,
div.pagina_presenti img.disponibile,
div.pagina_presenti_estesa img.sesso_ico,
div.pagina_presenti_estesa img.status_ico,
div.pagina_presenti_estesa img.disponibile {
    /*margin: 0 2px 0 0;
	border: solid 1px #000080;
    padding:2px;
	border-radius: 5px;*/
}

div.pagina_presenti img.disponibile_switch {
     display: block;
}

/*Nomi dei luoghi*/
div.pagina_presenti ul.elenco_presenti li.luogo,
div.pagina_presenti_estesa ul.elenco_presenti tr.elenco_presenti li.luogo td.luogo {
    font-size: 22px;
    font-weight: bold;
    margin: 3px 0 1px 8px;
	display: block;
    color: #33ccff;
}

div.pagina_presenti_estesa ul.elenco_presenti tr.elenco_presenti li.mappa td.mappa  {
    font-size: 24px;
    font-weight: bold;
    margin: 3px 0 1px 0;
    color: #33ccff;
	display: block;
}

/* Nomi dei personaggi */
/*div.pagina_presenti ul.elenco_presenti li.presente,
div.pagina_presenti_estesa ul.elenco_presenti li.presente {
    font-size: 22px;
    margin: 0 0 0 5px;
    color: #33ccff;
	/*border-bottom: solid 1px #000080;
    padding:2px;
	border-radius: 8px;
    -moz-border-radius: 8px; /* Bordi arrotondati */
    /*-webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
	display: block;
}

div.pagina_presenti_estesa {
    margin: 0 auto;
    display: block;
	padding: 3px;
	border: solid 3px #000080;
    -moz-border-radius: 8px; /* Bordi arrotondati */
    /*-webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
	border-radius: 8px;
	width: 800px;

}*/

/*div.presenti_estesi ul, li {
    margin: 0 auto;
    display: block;
	padding: 3px;
	border: solid 1px #000080;
	border-radius: 5px;
	width: 800px;

}*/

/*Icone presenti*/
img.presenti_ico {
    margin-left: 2px;
    width: 30px;
    height: 30px;
    border: none;
	/*border: solid 1px #000080;
	border-radius: 5px;*/
}

/* Mini avatar di chat e status */

div.mini_avatar_presenti {
    margin: 0 auto;
    border: solid 1px #000080;
    padding:3px;
	border-radius: 5px;
}

div.statuspers {
    margin: 0 auto;
	margin-left: 5px;
   /* border: solid 1px #000080;*/
	border-radius: 5px;
}

/****************************************************************************/
/* ANIMAZIONI NEON & FLICKER (Aggiungile in cima al file) */

@keyframes name-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 15px #0ff;
        opacity: 1;
    }
    20%, 22.1%, 24%, 55% {
        text-shadow: none;
        color: #113333; /* Colore spento/ombra */
        opacity: 0.6;
    }
}

@keyframes image-glow-flicker {
    0%, 100% { box-shadow: 0 0 5px #0ff; filter: brightness(1); }
    50% { box-shadow: 0 0 15px #0ff; filter: brightness(1.2); }
    52% { box-shadow: none; filter: brightness(0.8); } /* Micro sfarfallio */
}

/****************************************************************************/
/* MODIFICHE AI PRESENTI ESTESI */

/* Il contenitore principale della pagina estesa */
div.pagina_presenti_estesa {
    margin: 20px auto;
    display: block;
    padding: 15px;
    background: rgba(0, 15, 20, 0.8); /* Sfondo scuro tech */
    border: 1px solid #00ffff; /* Bordo Ciano */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(0, 255, 255, 0.1);
    border-radius: 4px; /* Angoli più secchi sono più cyberpunk */
    width: 850px;
}

/* Nomi dei personaggi nella lista estesa */
div.pagina_presenti_estesa ul.elenco_presenti li.presente {
    font-size: 22px;
    margin: 10px 0;
    color: #fff;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    padding: 10px;
    border-radius: 0;
    display: flex;
    align-items: center;
}

/* Il link del nome con sfarfallio */
div.pagina_presenti_estesa li.presente a {
    color: #fff !important;
    text-decoration: none;
    animation: name-flicker 6s infinite;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mini avatar di chat */
div.mini_avatar_presenti {
    margin-right: 15px;
    border: 1px solid #0ff;
    padding: 2px;
    background: #000;
    box-shadow: 0 0 8px #0ff;
    animation: image-glow-flicker 4s infinite;
    display: inline-block;
    line-height: 0;
}

div.mini_avatar_presenti img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* Frase / Status del personaggio */
div.statuspers {
    font-family: 'Courier New', monospace; /* Stile terminale */
    color: #00ffff;
    font-size: 14px;
    margin-top: 5px;
    opacity: 0.8;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
}

/* Icone di stato (sesso, allineamento, ecc.) */
img.presenti_ico {
    filter: drop-shadow(0 0 2px #0ff);
    margin-right: 5px;
    transition: transform 0.2s;
}

img.presenti_ico:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px #fff);
}

/****************************************************************************/
/* TRUCCO DESINCRONIZZAZIONE (Per non farli sfarfallare tutti insieme) */

div.pagina_presenti_estesa li.presente:nth-child(3n) a { animation-delay: 1s; animation-duration: 7s; }
div.pagina_presenti_estesa li.presente:nth-child(3n+1) a { animation-delay: 2.5s; animation-duration: 5s; }
div.pagina_presenti_estesa li.presente:nth-child(3n+2) a { animation-delay: 0.5s; animation-duration: 8s; }