/* ===== BACKGROUND GENERALE ===== */

body{
    background-image:url("background.gif");
    background-size: cover;
    background-position:center;
    background-attachment:fixed;
    color:#e6e6e6;
}


/* ===== MENU GENERALE ===== */
.menu {
    background: transparent;
    padding: 10px 20px;
    display: flex;                   /* Use flex layout */
    justify-content: space-around;   /* Space links evenly */
    align-items: center;             /* Vertically center */
    flex-wrap: wrap;                 /* Wrap if too many items */
}

.menu a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;               /* Makes clickable area bigger */
    transition: all 0.2s;
}

.menu a:hover {
    color: #ffd700;
    transform: scale(2);
}

/* ===== BOX GENERICI ===== */

.box{
    background:rgba(20,20,25,0.85);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:12px;
    box-shadow:
        0 0 10px rgba(0,0,0,0.6),
        inset 0 0 10px rgba(255,255,255,0.05);
}


/* ===== MENU TOP ===== */

.topmenu{

    background:linear-gradient(
        to bottom,
        #2c2c34,
        #15151a
    );

    border-bottom:2px solid #444;

}


/* ===== LINK ===== */

a{
    color:#c9b37a;
    text-decoration:none;
}

a:hover{
    color:#ffd86b;
    text-shadow:0 0 5px rgba(255,220,120,0.6);
}


/* ===== MENU LATERALI ===== */

.menu-item{
    padding:6px 4px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.menu-item:last-child{
    border-bottom:none;
}

.menu-item a{
    display:block;
}


/* ===== TITOLI ===== */

h1,h2,h3{

    color:#ffd86b;

    font-weight:normal;

    border-bottom:1px solid rgba(255,255,255,0.15);

    padding-bottom:4px;
}


/* ===== CENTRO CONTENUTO ===== */

.center{
    height: 90%;
    min-height:500px;
    text-align: center;
    overflow-y: auto;    /* vertical scroll when needed */
}


/* ===== PANNELLO DESTRO ===== */

.right{

    font-size:0.9em;


}

/* ===== FOOTER ===== */

.footer{

    background:linear-gradient(
        to bottom,
        #2c2c34,
        #15151a
    );
    padding: 1px;
    border-bottom:2px solid #444;

}

/* ===== SCROLLBAR (moderna) ===== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#444;
    border-radius:4px;
}

::-webkit-scrollbar-thumb:hover{
    background:#666;
}


/* ===== Characters page ===== */

.characters-container{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

padding:20px;

}


.character-card{

background:rgba(20,20,25,0.85);

border-radius:10px;

overflow:hidden;

box-shadow:0 0 12px rgba(0,0,0,0.6);

transition:0.2s;

}

.character-card:hover{

transform:scale(1.03);

box-shadow:0 0 18px rgba(0,0,0,0.8);

}


.character-avatar{

height:140px;

background-size:cover;

background-position:center;

}


.character-info{

padding:10px;

font-size:14px;

}


.character-info h3{

margin:0 0 8px 0;

color:#ffd86b;

}


.char-row{

margin-bottom:4px;

}

.char-row span{

color:#aaa;

}


.healthbar{

width:100%;

height:10px;

background:#222;

border-radius:4px;

margin-top:6px;

}


.healthvalue{

height:100%;

background:#2ecc71;

border-radius:4px;

}


/* card creazione */

.new-character{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

font-size:18px;

color:#aaa;

cursor:pointer;

background:#111;

}

.new-character-icon{

font-size:50px;

margin-bottom:10px;

}

/* === Charatecrs List === */
.character-card{
    position:relative;
    overflow:hidden;
}

/* ribbon */
.watermark{
    position:absolute;
    top:16px;
    right:-60px;

    width:220px;          /* enough space for long text */
    text-align:center;

    transform:rotate(45deg);

    padding:6px 0;
    font-size:12px;
    font-weight:bold;
    color:white;
    text-transform:uppercase;
    letter-spacing:1px;

    pointer-events:none;
}

/* colors */

.wm-red{
    background:#c0392b;
}

.wm-orange{
    background:#e67e22;
}

.wm-green{
    background:#27ae60;
}

.wm-maintenance{
    font-weight:900;
    color:#ffffff;

    background: repeating-linear-gradient(
        45deg,
        #f1c40f,
        #f1c40f 12px,
        #000 12px,
        #000 24px
    );

    border-top:2px solid rgba(0,0,0,0.5);
    border-bottom:2px solid rgba(0,0,0,0.5);

    /* makes text readable on stripes */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}