/****************************************************************************/
/* 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 */

@font-face {
	font-family: 'Onderneming';
	src: url('fonts/Onderneming.eot');
	src: local('☺'), url('fonts/Onderneming.woff') format('woff'), url('fonts/Onderneming.ttf') format('truetype'), url('fonts/Onderneming.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Agressive_Winter';
	src: url('fonts/aAgressiveWinter.eot');
	src: local('☺'), url('fonts/aAgressiveWinter.woff') format('woff'), url('fonts/aAgressiveWinter.ttf') format('truetype'), url('fonts/aAgressiveWinter.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Biko';
	src: url('fonts/Biko.eot');
	src: local('☺'), url('fonts/Biko.woff') format('woff'), url('fonts/Biko.ttf') format('truetype'), url('fonts/Biko.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Hello_Almeida';
	src: url('fonts/Hello_Almeida.ttf');
	src: local('☺'), url('fonts/Hello_Almeida.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.eot');
    src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Regular.woff2') format('woff2'),
        url('fonts/Lato-Regular.woff') format('woff'),
        url('fonts/Lato-Regular.ttf') format('truetype'),
        url('fonts/Lato-Regular.svg#Lato-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sigmar One';
    src: url('fonts/SigmarOne-Regular.eot');
    src: url('fonts/SigmarOne-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/SigmarOne-Regular.woff2') format('woff2'),
        url('fonts/SigmarOne-Regular.woff') format('woff'),
        url('fonts/SigmarOne-Regular.ttf') format('truetype'),
        url('fonts/SigmarOne-Regular.svg#SigmarOne-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*PRESENTI ESTESISSIMI*/

div.pagina_presenti_estesa{
   position:relative;
   width: 800px;
   height: 563px;
   background:url('imgs/presentiestesi/sfondopresenti.png') no-repeat;

}

/*Frame dei presenti*/
div.presenti iframe.iframe_presenti {
    width: 180px;
    height: 520px;
    border: none;
    overflow: auto;
    background-color: transparent;
}

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

div.luogo {
    margin: 10px 0 0 0;
    font-size: 13px;
    font-weight: bolder;
}

div.presente {
    font-weight: normal;
    font-size: 12px;
    height:60px;
    display:flex;
    align-items:center;

}

div.link_presenti {
    margin-top: 20px;
    display:flex;
    align-items:center;
}

/*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;
}

div.pagina_presenti img.disponibile_switch {

}

/*Link nella colonna presenti */
div.pagina_presenti a,
div.pagina_presenti a:visited,
div.pagina_presenti_estesa a,
div.pagina_presenti_estesa a:visited {
    border: none;
    color: #282424;
    margin-left:5px;

}


div.pagina_presenti a:hover,
div.pagina_presenti_estesa a:hover {
    border: none;
}

/*Testo nella colonna presenti*/
div.pagina_presenti ul.elenco_presenti,
div.pagina_presenti_estesa ul.elenco_presenti {
    list-style-type: none;
    list-style-position: inside;
    padding: 0px;
    margin: 0px;
    text-align: left;
}

/*Nomi dei luoghi*/
div.pagina_presenti ul.elenco_presenti li.luogo,
div.pagina_presenti_estesa ul.elenco_presenti  {
    font-size: 11px;
    font-weight: bold;
    margin: 3px 0 1px 8px;
    text-transform: uppercase;
    font-family:'Lato';
}

div.online_status{
    font-size: 11px;
    color:#5b5656;
    text-transform:none;
    padding: 5px;
    line-height:1.3;
}

span.ruolo_presenti{
    text-transform: uppercase;
    color: #FAEBD7;
    background: #282424;
    padding: 2px;
}

li.luogo{
    font-family: 'Cinzel';
    font-size: 16px;
    font-weight: bold;
    margin: 3px 0 1px 0;
    padding: 2px 0 2px 0;
    text-transform: uppercase;
    border-top: solid 1px #282424;
    border-bottom: solid 1px #282424;
    width: 680px;
    text-align: center;
    background: #282424;
}

li.luogo a, li.luogo a:visited{
     color: #deb887;
     font-size: 18px;
}

div.pagina_presenti_estesa ul.elenco_presenti li.mappa {
    width: 680px;
    font-size: 22px;
    margin: 3px 0 10px 0;
    text-transform: uppercase;
    color: #282424;
    font-family: 'Cinzel';
    text-align: left;
    border-bottom: solid 2px #282424;
}

/* Nomi dei personaggi */

div.pagina_presenti ul.elenco_presenti li.presente,
div.pagina_presenti_estesa ul.elenco_presenti li.presente {
    font-size: 12px;
    margin: 0;
    display:flex;
    align-items: center;
    border-bottom: solid 1px #282424;
    padding: 5px;
    width: 680px;
    height: 70px;
    position:relative;
}

img.presenti_estesi_ava {
    width:70px;
    height:70px;
    border-radius:100%;
    border: solid 1px #282424;
    margin-left:5px;
    box-shadow: 1px 1px black;
}    

div.pagina_presenti_estesa div.presenti_estesi {
    margin-left: 65px;
    width: 722px;
    height: 500px;
    overflow: auto;
}

div.pagina_presenti_estesa div.guest_online_count {
    position: absolute;
    top: 20px;
    right: 48px;
    z-index: 2;
    font-family: 'Cinzel';
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .04em;
    color: #282424;
    text-transform: uppercase;
}

div.link_switch_presenti {
    position: absolute;
    top: 20px;
    left: 70px;
    z-index: 2;
    font-family: 'Cinzel';
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .04em;
    color: #282424;
    text-transform: uppercase;
}

div.link_switch_presenti a{
    font-weight:normal;
}

div.contenitore_destro{
    position: relative;
    width: 430px;
}

div.luogo_presente {
    position: absolute;
    bottom:0px;
    right:0px;
    text-transform: uppercase;
}

div.luogo_presente a, div.luogo_presente a:visited {
    font-size: 12px;
}

/*Icone presenti*/
img.presenti_ico {
    margin-left: 2px;
    width: 30px;
    height: 30px;
    border: solid 1px #282424;
    border-radius: 100%;
    padding: 5px;
    box-shadow: 1px 1px black;
}

div.link_msg_presenti{
    padding-top:5px;
    margin-left: -5px;
}

/* Halloween 2026: extended roster only. Keep the game's existing ordering,
   availability switches, character links and permission-dependent actions. */
body div.pagina_presenti_estesa {
    --pe-text: #f3dfbd;
    --pe-muted: #d1bea3;
    --pe-gold: #efbd78;
    --pe-copper: #a96934;
    position: relative;
    width: min(800px, 100%);
    height: 563px;
    max-height: 100dvh;
    min-height: min(340px, 100dvh);
    box-sizing: border-box;
    padding: 63px 38px 30px 78px;
    overflow: hidden;
    color: var(--pe-text);
    background: none;
    border: 0 solid transparent;
    border-image-source: url("imgs/presentiestesi/sfondopresenti.png");
    border-image-slice: 65 60 65 80 fill;
    border-image-width: 65px 60px 65px 80px;
    border-image-repeat: stretch;
    font: 13px/1.45 'Lato', Verdana, sans-serif;
    isolation: isolate;
}

body div.pagina_presenti_estesa::before {
    content: none;
    display: none;
}

body div.pagina_presenti_estesa::after {
    content: "";
    position: absolute;
    top: 54px;
    left: 78px;
    right: 68px;
    height: 1px;
    background: linear-gradient(90deg, #bc793b, #bc793b25);
    pointer-events: none;
}

/* One header row: ordering on the left, online guests on the right. */
body div.pagina_presenti_estesa > div:first-child:not(.presenti_estesi) { display: none; }

body div.pagina_presenti_estesa div.presenti_estesi {
    position: static;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 10px 4px 0;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #aa713e #160f0c;
}

body div.pagina_presenti_estesa div.presenti_estesi::-webkit-scrollbar { width: 8px; }
body div.pagina_presenti_estesa div.presenti_estesi::-webkit-scrollbar-track { background: #160f0c; }
body div.pagina_presenti_estesa div.presenti_estesi::-webkit-scrollbar-thumb {
    background: #aa713e;
    border: 2px solid #160f0c;
    border-radius: 6px;
}

body div.pagina_presenti_estesa div.guest_online_count {
    top: 19px;
    right: 68px;
    padding: 6px 9px;
    border: 1px solid #8c5b36;
    border-radius: 5px;
    background: #1d1512e6;
    color: var(--pe-text);
    font: 12px/1.2 'Lato', Verdana, sans-serif;
    letter-spacing: .02em;
    text-transform: none;
}

body div.pagina_presenti_estesa div.link_switch_presenti {
    top: 19px;
    left: 78px;
    font: 12px/1.2 'Lato', Verdana, sans-serif;
    letter-spacing: .01em;
    text-transform: none;
}

body div.pagina_presenti_estesa a,
body div.pagina_presenti_estesa a:visited {
    margin-left: 0;
    color: var(--pe-gold);
    text-decoration: none;
}

body div.pagina_presenti_estesa div.link_switch_presenti a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #a96934;
    border-radius: 5px;
    background: linear-gradient(#35241a, #1a120f);
    box-shadow: inset 0 1px 0 #f1c18526, 0 2px 3px #0005;
    color: #ffe0ae;
}

body div.pagina_presenti_estesa div.link_switch_presenti a:hover { background: #49301e; }
body div.pagina_presenti_estesa a:focus-visible {
    outline: 2px solid #ffd38f;
    outline-offset: 3px;
}

body div.pagina_presenti_estesa ul.elenco_presenti {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    list-style: none;
}

body div.pagina_presenti_estesa ul.elenco_presenti:empty::before {
    content: "Nessun personaggio presente.";
    display: block;
    padding: 24px 12px;
    color: var(--pe-muted);
    text-align: center;
}

body div.pagina_presenti_estesa ul.elenco_presenti li.mappa {
    width: auto;
    margin: 2px 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid #aa713e80;
    color: var(--pe-gold);
    font: 15px/1.2 'Cinzel', Georgia, serif;
    letter-spacing: .03em;
}

body div.pagina_presenti_estesa ul.elenco_presenti li.luogo {
    width: auto;
    margin: 16px 0 8px;
    padding: 8px 12px;
    border: 1px solid #8a552e;
    border-left: 3px solid #d18a43;
    border-radius: 4px;
    background: linear-gradient(90deg, #3b261a, #201711);
    color: #ffe0ae;
    font: 15px/1.3 'Cinzel', Georgia, serif;
    text-align: left;
    overflow-wrap: anywhere;
}

body div.pagina_presenti_estesa ul.elenco_presenti li.luogo a,
body div.pagina_presenti_estesa ul.elenco_presenti li.luogo a:visited { color: #ffe0ae; font-size: inherit; }

body div.pagina_presenti_estesa ul.elenco_presenti li.presente {
    display: grid;
    grid-template-columns: 18px 58px minmax(0, 1fr) 34px 34px 34px;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 88px;
    margin: 0 0 8px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #86582f80;
    border-radius: 7px;
    background: linear-gradient(110deg, #2b1d16f2, #17120ff2);
    box-shadow: inset 0 1px 0 #ffd18c0f, 0 2px 7px #0005;
    color: var(--pe-text);
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
}

body div.pagina_presenti_estesa ul.elenco_presenti li.presente:hover {
    border-color: #bc8244;
    background: linear-gradient(110deg, #38271df2, #221810f2);
}

body div.pagina_presenti_estesa img.presenti_estesi_ava {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 54px;
    height: 54px;
    margin: 0;
    box-sizing: border-box;
    object-fit: cover;
    border: 2px solid #ba7b3d;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #120c09, 0 2px 5px #0009;
}

body div.pagina_presenti_estesa img.presenti_ico {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    object-fit: contain;
    background: linear-gradient(#e1c599, #b59567);
    border: 1px solid #c18343;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 #ffe8bf60, 0 2px 3px #0008;
}

body div.pagina_presenti_estesa li.presente > img.presenti_ico:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    filter: brightness(0) invert(.88) sepia(.45);
}

body div.pagina_presenti_estesa li.presente > img.presenti_ico[src*="/icone/disponibile"],
body div.pagina_presenti_estesa li.presente > a.link_sheet:has(> img.presenti_ico[src*="/icone/disponibile"]) {
    grid-column: 4;
    grid-row: 1 / 3;
    justify-self: center;
    line-height: 0;
}

body div.pagina_presenti_estesa li.presente > img.presenti_ico[src*="/races/"] { grid-column: 5; grid-row: 1 / 3; }
body div.pagina_presenti_estesa li.presente > div.link_msg_presenti {
    grid-column: 6;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}
body div.pagina_presenti_estesa li.presente > div.link_msg_presenti a { display: block; line-height: 0; }
body div.pagina_presenti_estesa li.presente > a.link_sheet:hover img.presenti_ico,
body div.pagina_presenti_estesa div.link_msg_presenti a:hover img.presenti_ico { background: #ffe0a8; border-color: #ffc777; }

body div.pagina_presenti_estesa div.contenitore_destro {
    grid-column: 3;
    grid-row: 1;
    position: static;
    min-width: 0;
    width: auto;
    align-self: end;
    overflow-wrap: anywhere;
}

body div.pagina_presenti_estesa div.contenitore_destro > a {
    color: #ffe5bb;
    font: 17px/1.3 'Cinzel', Georgia, serif;
}

body div.pagina_presenti_estesa div.contenitore_destro > a:hover { color: #ffd08b; text-decoration: underline; }
body div.pagina_presenti_estesa div.contenitore_destro > br { display: none; }
body div.pagina_presenti_estesa div.online_status { padding: 3px 0 0; color: var(--pe-muted); font-size: 12px; line-height: 1.45; }
body div.pagina_presenti_estesa span.ruolo_presenti {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 6px;
    border: 1px solid #9d6334;
    border-radius: 4px;
    background: #3a2116;
    color: #f4c793;
    font-size: 10px;
    line-height: 1.3;
}

body div.pagina_presenti_estesa div.luogo_presente {
    grid-column: 3;
    grid-row: 2;
    position: static;
    width: auto;
    min-width: 0;
    align-self: start;
    color: var(--pe-gold);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body div.pagina_presenti_estesa div.luogo_presente a,
body div.pagina_presenti_estesa div.luogo_presente a:visited { color: var(--pe-gold); font-size: inherit; }
body div.pagina_presenti_estesa div.luogo_presente a:hover { color: #ffe5bb; text-decoration: underline; }

@media (max-width: 640px) {
    body div.pagina_presenti_estesa { padding: 63px 24px 28px 78px; }
    body div.pagina_presenti_estesa::after { left: 78px; right: 52px; }
    body div.pagina_presenti_estesa div.link_switch_presenti { left: 78px; }
    body div.pagina_presenti_estesa div.guest_online_count { right: 52px; font-size: 11px; }
    body div.pagina_presenti_estesa ul.elenco_presenti li.presente {
        grid-template-columns: 12px 48px minmax(0, 1fr) 30px 30px 30px;
        column-gap: 7px;
        padding: 9px;
    }
    body div.pagina_presenti_estesa img.presenti_estesi_ava { width: 44px; height: 44px; }
    body div.pagina_presenti_estesa img.presenti_ico { width: 30px; height: 30px; padding: 4px; }
    body div.pagina_presenti_estesa li.presente > img.presenti_ico:first-child { width: 12px; height: 16px; }
    body div.pagina_presenti_estesa div.contenitore_destro > a { font-size: 15px; }
}

@media (max-width: 480px) {
    body div.pagina_presenti_estesa ul.elenco_presenti li.presente {
        grid-template-columns: 10px 44px minmax(0, 1fr) 28px 28px 28px;
        column-gap: 6px;
    }
    body div.pagina_presenti_estesa img.presenti_ico { width: 28px; height: 28px; }
}