:root{

    --accent:#d4af37;

    --bg:#161616;
    --bg-secondary:#1e1e1e;

    --card:#252525;
    --card-hover:#2d2d2d;

    --text:#f2f2f2;
    --text-light:#b8b8b8;

    --shadow:
        0 4px 14px rgba(0,0,0,0.25);

    --radius:10px;
}

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   BODY
========================= */

body{

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,0.03),
            transparent 30%
        ),
        linear-gradient(
            to bottom,
            #111,
            #1a1a1a
        );

    color:var(--text);

    font-family:
        Inter,
        Arial,
        sans-serif;

    min-height:100vh;

    padding-bottom:100px;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,h2,h3{

    color:var(--accent);

    margin-bottom:12px;

    font-weight:600;

    letter-spacing:0.5px;
}

p{
    color:var(--text-light);
    line-height:1.5;
}

/* =========================
   PAGE
========================= */

.page{
    display:none;
    padding:20px;
}

.page.active{
    display:block;
}

/* =========================
   CARDS
========================= */

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding: .5rem;

    margin-bottom:14px;

    cursor:pointer;

    transition:0.2s;

    box-shadow:var(--shadow);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem;
}

.card:hover{

    background:var(--card-hover);

    transform:translateY(-2px);
}

/* =========================
   GRID
========================= */

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* =========================
   STATS
========================= */

.stat{

    background:var(--card);

    padding:14px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);
}

.stat h3{
    font-size:0.9rem;
}

.stat p{

    margin-top:8px;

    font-size:1.4rem;

    color:var(--accent);

    font-weight:bold;
}

/* =========================
   BOTTOM NAV
========================= */

.bottom-nav{

    position:fixed;

    bottom:0;
    left:0;
    right:0;

    height:auto;


    backdrop-filter:blur(10px);

    display:flex;
    justify-content:space-around;
    align-items:center;

    z-index:100;
}

/* =========================
   NAV BUTTONS
========================= */

.nav-btn{

    background:var(--card);

    border:none;

    color:var(--text);

    padding:20px 20px;

    border-radius:10px;

    font-size:0.8rem;

    cursor:pointer;

    transition:0.2s;

    box-shadow:var(--shadow);
}

.nav-btn:hover{

    color:var(--accent);

    background:#333;
}

/* =========================
   MAIN CHARACTER BUTTON
========================= */

#stats_nav{

    width:4.5rem;
    height:4.5rem;

    border-radius:50%;

    background-size:cover;
    background-position:center;

    color:white;

    font-weight:bold;


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

/* =========================
   BACK BUTTON
========================= */

.back-btn{

    margin-bottom:20px;

    background:var(--accent);

    border:none;

    color:#111;

    padding:12px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    transition:0.2s;
}

.back-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);
}

/* =========================
   DETAIL BOX
========================= */

.detail-box{

    background:var(--card);

    padding:16px;

    border-radius:var(--radius);

    margin-top:14px;

    box-shadow:var(--shadow);
}

/* =========================
   POPUP
========================= */

.popup-overlay{

    position:fixed;
    inset:0;

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

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999;

    padding:20px;

    backdrop-filter:blur(4px);
}

.spell-popup{

    width:100%;
    max-width:520px;

    max-height:90vh;
    overflow-y:auto;

    backdrop-filter:blur(10px);

    border-radius:14px;

    padding:.5rem;

    position:relative;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.4);

    animation:popupFade 0.2s ease;

    border: solid 1px var(--card)
}

.spell-popup > h1 {

    padding-right: 3rem;
}

/* =========================
   POPUP SECTIONS
========================= */

.popup-section{

    background:var(--card);

    padding:14px;

    border-radius:10px;

    margin-bottom:12px;
}

.popup-description{

    margin-top:20px;

    background:var(--card);

    padding:18px;

    border-radius:10px;

    line-height:1.6;
}

/* =========================
   CLOSE BUTTON
========================= */

.close-btn{

    position:absolute;

    top:14px;
    right:14px;

    border:none;

    width:36px;
    height:36px;

    border-radius:50%;

    cursor:pointer;

    background:var(--accent);

    color:#111;

    font-size:18px;

    font-weight:bold;

    transition:0.2s;
}

.close-btn:hover{

    transform:scale(1.08);
}

/* =========================
   SCROLLBAR
========================= */

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

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

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

::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
}

/* =========================
   ANIMATION
========================= */

@keyframes popupFade{

    from{
        opacity:0;
        transform:translateY(10px) scale(0.97);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


.icon_image{
    width: 4rem;
    height: 4rem;
    background-color: #1a1a1a;
    border-radius: 50%;
    background-size:contain;
    padding: .5rem;
}


.weapon-image{
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    background-color: #1a1a1a;
    border-radius: 50%;
    background-size:contain;
    padding: .5rem;
    margin-bottom: .5rem;
}


.character-image{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}