/* Fundo geral estilo Lineage 2 */
body{
    margin:0;
    padding:0;

    background-image:url("/assets/img/bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    color:#fff;
    font-family:Arial;
}

/* Cabeçalho */
.topo {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid gold;
}

.topo h1 {
    color: gold;
    font-size: 40px;
    margin-bottom: 15px;
}

/* Menu do topo */
.menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.menu a {
    display: inline-block;
    background: #111;
    color: #FFD700;
    text-decoration: none;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 6px;
    border: 1px solid #333;
    transition: 0.3s;
}

.menu a:hover {
    background: #FFD700;
    color: #000;
    border: 1px solid #FFD700;
}

/* =========================
   CARDS MMORPG PREMIUM
========================= */

.characters{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
    padding:30px;
}

.card{

    position:relative;

    background:rgba(0,0,0,0.60);

    border:1px solid rgba(255,215,0,0.25);

    border-radius:18px;

    padding:25px;

    overflow:hidden;

    backdrop-filter:blur(5px);

    transition:0.3s ease;

    box-shadow:
        0 0 20px rgba(255,215,0,0.10);
}

.card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 0 35px rgba(255,215,0,0.25);
}

/* HERO */

.hero-card{

    border:2px solid gold;

    animation:heroGlow 2s infinite alternate;

    box-shadow:
        0 0 20px rgba(255,215,0,0.35),
        0 0 40px rgba(255,215,0,0.15);
}

@keyframes heroGlow{

    from{

        box-shadow:
            0 0 15px rgba(255,215,0,0.25),
            0 0 30px rgba(255,215,0,0.10);
    }

    to{

        box-shadow:
            0 0 30px rgba(255,215,0,0.60),
            0 0 60px rgba(255,215,0,0.25);
    }
}

/* NOME */

.char-name{

    font-size:28px;

    color:#ffd700;

    margin-bottom:15px;

    text-shadow:
        0 0 10px rgba(255,215,0,0.35);
}

/* INFOS */

.info{

    margin:10px 0;

    font-size:15px;

    color:#ddd;
}

/* STATUS */

.online{
    color:#00ff66;
    font-weight:bold;
}

.offline{
    color:#ff5555;
    font-weight:bold;
}

/* SUBCLASSES */

.subclasses{

    margin-top:14px;

    padding-top:12px;

    border-top:
    1px solid rgba(255,255,255,0.08);
}

.sub-title{

    color:#f5c76b;

    font-size:13px;

    margin-bottom:8px;

    font-weight:bold;

    letter-spacing:1px;

    text-transform:uppercase;
}

.sub-item{

    color:#d7d7d7;

    font-size:13px;

    margin-bottom:4px;

    padding-left:6px;
}

.sub-item span{

    color:#999;

    font-size:11px;

    margin-left:5px;
}

/* BOTÃO */

.btn{

    display:inline-block;

    margin-top:20px;

    padding:12px 24px;

    border-radius:10px;

    background:linear-gradient(
        45deg,
        #c89b3c,
        #ffd700
    );

    color:#000;

    text-decoration:none;

    font-weight:bold;

    transition:0.3s ease;

    box-shadow:
        0 0 15px rgba(255,215,0,0.25);
}

.btn:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 25px rgba(255,215,0,0.45);
}

/* ÍCONE DA CLASSE */

.class-icon{

    width:72px;
    height:72px;

    object-fit:cover;

    border-radius:14px;

    border:2px solid rgba(255,215,0,0.35);

    margin-bottom:15px;

    box-shadow:
        0 0 15px rgba(255,215,0,0.18);
}