/****************************************************************************/
/* STILE DELLA SCHEDA DEL PERSONAGGIO */

/* HELP: Da qui è possibile modificare:
- I font ed i colori della scheda del personaggio
- Le dimensioni, l'aspetto e la posizione degli elementi della scheda
- Lo sfondo della scheda */

div.pagina_scheda {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
}

div.pagina_scheda div.form_info {
    color: #b4b6bf;
}

/*Titoli dei box*/
div.pagina_scheda {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
    color: #89aee7;
    font-weight: normal;
}

/*Box nome,ritratto,iscritto da, ultimo ingresso, scrivi a*/
div.ritratto {
    margin: 2px 2px 2px 2px;
    float: left;
    font-size: 12px;
    text-align: center;
    border: 2px solid #070a1b;
}

/*Nome PG*/
div.ritratto div.ritratto_nome {
    /*margin: 5px 0 0 0;*/
    font-size: 14px;
    font-weight: bold;
}

/*Immagine*/
div.ritratto div.ritratto_avatar {
    width: 300px;
    height: 400px;
    margin: auto;
    border: 0px solid #090a11;
    overflow: hidden;
}

div.ritratto_avatar img {
    max-width: 300px;
    max-height: 400px;
    margin: 0 auto;
}

/*Link invia messaggio*/
div.ritratto div.ritratto_invia_messaggio {
    margin: 5px 0 0 0;
}

/*Box punteggi, razza, gilda, ruolo off*/
div.profilo {
    margin: 2px 2px 2px 2px;
    float: right;
    font-size: 10px;
    width: 260px;
    color: #e2e2e2;
    /* height: 400px; */
}

div.profilo div.profilo_voce {
    text-align: justify;
    clear: both;
    height: 20px;
    line-height: 0px;
}

/*Nome campo*/
div.profilo_voce div.profilo_voce_label {
    width: 40%;
    float: left;
    margin-left: 5px;
    line-height: 0px;

}

/*Valore campo*/
div.profilo_voce div.profilo_voce_valore {
    text-align: right;
    width: 50%;
    float: right;
    margin-right: 5px;
    line-height: 0px;

}

/*Icone gilda*/
img.profilo_img_gilda {
    height: 15px;
    width: 15px;
}

/*Box status*/
div.profilo_status {
    margin: 5px 5px 5px 5px;
    clear: both;
    height: 100px;
    text-align: justify;
}

/*Casella PF nei controlli master*/
div.form_field input.healt_input {
    width: 28px;
}

/*Box storia pg, box affetti*/
div.background {
    margin: 10px auto 5px auto;
    clear: both;
    max-width: 567px;
    overflow-x: auto;
}

div.background img {
    max-width: 563px;
}

/*Menu' interno scheda*/
div.menu_scheda {
    /* margin: 0 3px 5px 5px; */
    /* margin-left: 10px; */
    /* width: 751px; */
    /* float: left; */
    /* color: #e2e2e2;*/
    text-align: center;
    font-size: 14px;
    height: 35px;
    margin: auto;
    padding:10px;
}

/*Box abilità*/
div.elenco_abilita {
    margin: 10px auto 5px auto;
    clear: both;
}

div.elenco_abilita table {
    margin: 2px auto 5px auto;
}

div.elenco_abilita td {
    vertical-align: top;
}

div.abilita_scheda_nome {
    width: 110px;
    font-size: 12px;
}

div.abilita_scheda_car {
    width: 70px;
    font-size: 12px;
}

div.abilita_scheda_tank {
    width: 20px;
    font-size: 12px;
}

div.abilita_scheda_sub {
    width: 35px;
    font-size: 12px;
}

/****************************************************************************/

/****************************************************************************/
/* STILE DELLA PAGINA DI MODIFICA SCHEDA */

div.modifica_scheda {
    margin: 10px;
}

/****************************************************************************/

/****************************************************************************/
/* STILE DELLA PAGINA DI EQUIPAGGIAMENTO */

div.omino_bianco_box {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    height: 300px;
    text-align: center;
}

img.omino_bianco_img {
    margin-top: 40px;
    height: 226px;
}

div.omino_bianco_armdx {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    background-color: #1A2240;
}

div.omino_bianco_armdx img {
    width: 70px;
    height: 70px;
}

div.omino_bianco_armsx {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    margin-right: 0px;
    background-color: #1A2240;
}

div.omino_bianco_armsx img {
    width: 48px;
    height: 35px;
}

div.omino_bianco_chest {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    margin-right: 0px;
    background-color: #1A2240;
}

div.omino_bianco_chest img {
    width: 50px;
    height: 49px;
}

div.omino_bianco_legs {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    background-color: #1A2240;
}

div.omino_bianco_legs img {
    width: 50px;
    height: 49px;
    margin-right: 0px;
}

div.omino_bianco_feet {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    background-color: #1A2240;
}

div.omino_bianco_feet img {
    width: 50px;
    height: 45px;
}

div.omino_bianco_head {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    background-color: #1A2240;
}

div.omino_bianco_head img {
    width: 50px;
    height: 45px;
}

div.omino_bianco_neck {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    background-color: #1A2240;
}

div.omino_bianco_neck img {
    width: 48px;
    height: 35px;
}

div.omino_bianco_ring {
    width: 70px;
    height: 70px;
    border: 2px solid #070a1b;
    margin-top: 5px;
    background-color: #1A2240;
}

div.omino_bianco_ring img {
    width: 29px;
    height: 19px;
}

/*Inventario*/
div.pagina_scheda_equip {
}

div.pagina_scheda_oggetti {
}

div.pagina_scheda_oggetti td.casella_elemento,
div.pagina_scheda_equip td.casella_elemento {
    font-size: 12px;

    padding: 3px;
}

div.pagina_scheda_oggetti div.inventario_img img,
div.pagina_scheda_equip div.inventario_img img {
    height: 120px;
    width: 120px;
}

div.pagina_scheda_oggetti div.inventario_img,
div.pagina_scheda_equip div.inventario_img {
    width: 122px;
}

div.pagina_oggetti_equip div.inventario_nome,
div.pagina_scheda_equip div.inventario_nome {
    width: 122px;
}

div.pagina_scheda_oggetti div.inventario_quantita,
div.pagina_scheda_equip div.inventario_quantita {
    width: 122px;
}

div.pagina_scheda_oggetti div.inventario_nome,
div.pagina_scheda_equip div.inventario_nome {
    font-size: 12px;
    text-transform: uppercase;
}

div.pagina_scheda_oggetti div.form_label,
div.pagina_scheda_equip div.form_label {
    font-size: 12px;
    margin: 0;
}

div.pagina_scheda_oggetti input,
div.pagina_scheda_equip input {
    font-size: 12px;
    margin: 0;
}

div.inventario_riga_proprieta {
    width: 80px;
}

div.pagina_scheda_equip form,
div.pagina_scheda_oggetti form {
    text-align: center;
    margin: 0 0 4px 0;
}

.skill_incr.active,
.skill_decr.active {
    visibility:visible;
}
.skill_incr.inactive,
.skill_decr.inactive {
    visibility:hidden;
}



/****************************************************************************/

div.title {
    text-align: center;
    font-size: 15px;
    color: #e2e2e2;
    text-transform: uppercase;
    width: 305px;
    height: 20px;
    background-color: #16192b;
    border: 1px solid #090a11;
    border-radius:0px 10px 0px 10px;
    margin: 0px auto;
}

div.menu_scheda a {
    color: #e2e2e2;
    font-size: 10px;
    padding: 3px;
    text-transform: uppercase; 
}

div.ritratto_nome {
    /*margin: 5px 0 0 0;*/
    font-size: 14px;
    font-weight: bold;
    display: none; 
    
}


div.titolo_box {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    color: #89aee7;
    display: none;
}

div.titolo_box_scheda {
    text-align: center;
    font-size: 15px;
    color: #e2e2e2;
    text-transform: uppercase;
    width: 305px;
    height: 20px;
    background-color: #16192b;
    border: 1px solid #090a11;
    border-radius:10px 0px 10px 0px;
    margin: 0px auto;
}

.scheda_page_body {
    margin: auto;
    width: 100%;
}

.pg-infos {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    width: 100;
}

div.primo_box{
    width: 100%;
    border-radius: 10px;
    background-color: #181c30;
    border: 1px solid #090a11;
    font-size: 12px;
    color: #8f8f8f;
    font-family: "DejaVu Sans";
}
    
div.header_box  {
    padding: 0px;
    width: 100%;
    height: 15px;
    background-color: #0c0d17;
    border: 1px solid #090a11;
}
 
div.secondo_box{
 	padding: 5px;
    width: 300px;
    border-radius: 10px;
    background-color: #181c30;
    border: 1px solid #090a11;	
 }
 
 div.terzo_box{
 padding: 5px;
 width: 300px;
 border-radius: 10px;
 border: none;
     font-size: 12px;
    color: #8f8f8f;
    font-family: "DejaVu Sans";
    text-align:center;
 }
 
div.body_box {
border: 2px solid #070a1b;
    /* border-top: none; */
    margin: auto;
    height: min-content;
    /* width: max-content; */
    font-size: 10px;
    color: #e2e2e2;
    clear: both;
    text-transform: none;
    /* overflow: hidden; */
}
 
 td.casella_titolo {
    background-color: #1A2240;
    border: 2px solid #070a1b;
}

div.note{
    text-align: left;
    float: left;
    width: 600px;
background-color: #0c0d17;
border: 1px solid #090a11;
}

div.particolari{
    float: left;
    text-align: left;
    width: 700px;
    background-color: #0c0d17;
    border: 1px solid #090a11;
}

div.box_equip{
	margin-top: 100px;
}

div.titolo_skill_page {
    width: 50%;
    height: 20px;
    border: 1px solid #070A1B;
    line-height: 21px;
    margin: auto;
    background: url(imgs/scheda/header_skill.png);
    background-position: center;
    background-size: cover;
}

hr{
	background-color: #070a1b;
}

.hidden_row { 
            display: none; 
            overflow: hidden; 
        } 
        
ul {
    list-style-type: none;
}

.blue{
    width: 77%;
	padding: 10px;
    font-size: 13px;
    color: #8f8f8f;
    font-family: "DejaVu Sans";
    text-align: justify;
}

.green{
    width: 77%;
	padding: 10px; 
    font-size: 13px;
    color: #8f8f8f;
    font-family: "DejaVu Sans";
    text-align: justify;
}

textarea.form_textarea {
    height: 50px;
}

/*************************/



.slider {
  margin: auto; 
  width: 60%;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  
}
.slides::-webkit-scrollbar-thumb {
  background: #1A2240;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: max-content;
  height: max-content;
  margin-right: 50px;
  border-radius: 10px;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  display: block;
  justify-content: center;
  align-items: center;
}

.slider > a {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 1rem 0;
  position: relative;
  border: 1px solid #070A1B;
  background-color: #1A2240; 

}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}

/*********************************** ICONA HELP ****************************************/
.help-animated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; /* Più piccolo per testo */
    height: 18px;
    background: linear-gradient(135deg, #3a6ea5, #2a5685);
    color: white;
    border-radius: 50%;
    cursor: help;
    font-weight: bold;
    font-size: 11px;
    box-shadow: 0 2px 4px rgba(58, 110, 165, 0.3);
    transition: all 0.3s;
    margin: 0 3px;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}

.help-animated:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(58, 110, 165, 0.5);
}

/* TOOLTIP */
.tooltip-animated {
    position: absolute;
    bottom: calc(100% + 8px); /* 8px sopra l'icona */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #1a1a2e;
    color: #e0e0e0;
    padding: 10px 12px;
    border-radius: 6px;
    width: 180px; /* Larghezza fissa */
    font-size: 11px;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid #3a6ea5;
    
    /* Stato iniziale - NASCOSTO */
    opacity: 0;
    visibility: hidden;
    
    /* Transizione */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    
    /* Z-index */
    z-index: 1000;
    
    /* Non selezionabile */
    user-select: none;
    pointer-events: none;
}

/* FRECCETTA */
.tooltip-animated::after {
    text-align: center;
    content: '';
    position: absolute;
    top: 100%; /* Sotto il tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #3a6ea5 transparent transparent transparent;
}

/* MOSTRA IL TOOLTIP AL HOVER */
/* Opzione 1: Hover sull'icona (se tooltip è fratello) */
.help-animated:hover ~ .tooltip-animated {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Opzione 2: Hover sul container (più affidabile) */
span[style*="position:relative"]:hover .tooltip-animated {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/***************************    FINE    ICONA HELP ****************************************/

@supports (scroll-snap-type) { .slider > a { display: none; } }

@media screen and (max-width: 1024px) {
    div.pagina_scheda {
        width: 90%;
        margin: auto;
    }
    
    div.ritratto div.ritratto_avatar {
        width: 250px;
        height: 350px;
    }
    
    div.ritratto_avatar img {
        max-width: 250px;
        max-height: 350px;
    }

    div.profilo {
        width: 100%; /* Take full width on smaller screens */
        font-size: 12px;
    }

    div.primo_box, div.secondo_box, div.terzo_box {
        /* width: 100%; */
        font-size: 12px;
    }

    div.blue, div.green {
        width: 90%;
        font-size: 12px;
    }
}

/* For smaller mobile devices (768px and smaller) */
@media screen and (max-width: 768px) {
    div.pagina_scheda {
        width: 95%;
    }

    div.ritratto div.ritratto_avatar {
        width: 200px;
        height: 300px;
    }
    
    div.ritratto_avatar img {
        max-width: 200px;
        max-height: 300px;
    }

    div.profilo {
        font-size: 10px;
        width: 100%;
    }


    div.primo_box, div.secondo_box, div.terzo_box {
        /* width: 100%; */
        font-size: 11px;
    }

    div.blue, div.green {
        width: 85%;
        font-size: 11px;
    }

    .menu_scheda {
        /* menu */
        overflow-x: auto;        /* Scroll orizzontale quando necessario */
        overflow-y: visible;      /* Nasconde scroll verticale */
        white-space: nowrap;     /* Impedisce il wrap del contenuto */
        width: 100%;             /* Occupa tutta la larghezza disponibile */
        max-width: 100%;         /* Non supera la larghezza del parent */
        -webkit-overflow-scrolling: touch; /* Scroll fluido su iOS */
        scrollbar-width: none;  /* Nasconde la scrollbar in Chrome/Safari/Edge */
        /* Dai spazio in basso per il submenu */
        padding-bottom: 120px !important;
        margin-bottom: -120px !important;    /* Compensa visivamente */
    }
}

/* For very small mobile devices (480px and smaller) */
@media screen and (max-width: 480px) {
    div.pagina_scheda {
        width: 100%;
    }

    div.ritratto div.ritratto_avatar {
        width: 180px;
        height: 250px;
    }
    
    div.ritratto_avatar img {
        max-width: 180px;
        max-height: 250px;
    }

    div.profilo {
        font-size: 9px;
        width: 100%;
    }


    div.primo_box, div.secondo_box, div.terzo_box {
        width: 100%;
        font-size: 10px;
    }

    div.blue, div.green {
        width: 100%;
        font-size: 10px;
    }

    .menu_scheda {
        /* menu */
        overflow-x: auto;        /* Scroll orizzontale quando necessario */
        overflow-y: visible;      /* Nasconde scroll verticale */
        white-space: nowrap;     /* Impedisce il wrap del contenuto */
        width: 100%;             /* Occupa tutta la larghezza disponibile */
        max-width: 100%;         /* Non supera la larghezza del parent */
        -webkit-overflow-scrolling: touch; /* Scroll fluido su iOS */
        scrollbar-width: none;  /* Nasconde la scrollbar in Chrome/Safari/Edge */
        /* Dai spazio in basso per il submenu */
        padding-bottom: 120px !important;
        margin-bottom: -120px !important;    /* Compensa visivamente */
    }
}