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


:root {

    --aion-dark: #070b13;
    --aion-panel: rgba(15, 22, 35, .92);
    --aion-panel-light: rgba(25, 35, 52, .95);

    --aion-blue: #9bd5ff;
    --aion-blue-glow: rgba(100,180,255,.35);

    --aion-gold: #d8b56a;
    --aion-gold-glow: rgba(216,181,106,.35);

    --aion-border: rgba(216,181,106,.35);

    --text: #edf2f7;
    --muted: #9aa8bd;
}



body {

    background:
        radial-gradient(
            circle at top,
            rgba(50,120,220,.18),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #080c14,
            #05070c
        );

    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    min-height: 100vh;

}



a {

    color: inherit;

    text-decoration: none;

}



.container {

    width: min(1200px, 95%);

    margin: auto;

}



/*
    NAVBAR
*/


.navbar {

    height: 70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;


    background:
        linear-gradient(
            90deg,
            rgba(15,22,35,.95),
            rgba(8,12,20,.95)
        );


    border-bottom:
        1px solid var(--aion-border);


    box-shadow:
        0 5px 25px rgba(0,0,0,.5);

}



.navbar__logo {

    font-size:24px;

    font-weight:700;

    color:var(--aion-gold);

    text-shadow:
        0 0 15px var(--aion-gold-glow);

}




/*
    HERO
*/


.hero {

    min-height:
        calc(100vh - 140px);


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;

    gap:24px;

}



.hero h1 {

    font-size:58px;

    letter-spacing:2px;


    color:white;


    text-shadow:

        0 0 20px var(--aion-blue-glow);

}



.hero p {

    color:var(--muted);

    font-size:18px;

}



/*
    SEARCH
*/


.character-search {

    position:relative;

    width:min(650px,95%);

}



#character-search {


    width:100%;

    padding:16px 20px;


    background:
        rgba(10,15,25,.95);


    border:

        1px solid var(--aion-border);


    border-radius:6px;


    color:white;


    font-size:16px;


    outline:none;


    box-shadow:

        0 0 20px rgba(0,0,0,.5);

}



#character-search:focus {


    border-color:var(--aion-blue);


    box-shadow:

        0 0 20px var(--aion-blue-glow);

}




/*
    SEARCH RESULTS
*/


.search-results {


    position:absolute;

    top:65px;

    left:0;

    right:0;


    background:

        var(--aion-panel);


    border:

        1px solid var(--aion-border);


    border-radius:8px;


    overflow:hidden;


    z-index:50;


    box-shadow:

        0 15px 40px rgba(0,0,0,.7);

}




.character-result {


    display:flex;


    align-items:center;


    gap:15px;


    padding:12px;


    cursor:pointer;


    transition:.2s;


    border-bottom:

        1px solid rgba(255,255,255,.05);

}



.character-result:last-child {

    border-bottom:none;

}



.character-result:hover {


    background:

        linear-gradient(
            90deg,
            rgba(155,213,255,.15),
            rgba(216,181,106,.15)
        );


}



.character-result img {


    width:70px;

    height:70px;


    object-fit:cover;


    border-radius:4px;


    border:

        1px solid var(--aion-gold);


    box-shadow:

        0 0 15px var(--aion-gold-glow);

}



.character-result strong {


    color:var(--aion-blue);

    font-size:18px;

}



.character-result span {

    color:var(--muted);

    font-size:14px;

}




/*
    FOOTER
*/


.footer {

    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    color:#718096;


    border-top:

        1px solid var(--aion-border);


    background:

        rgba(10,15,25,.9);

}

/* ==========================
   CHARACTER ARMORY
========================== */


.character-header {

    display:flex;
    gap:30px;
    align-items:center;

    background:#151515;
    border:1px solid #333;
    border-radius:12px;

    padding:25px;
    margin-bottom:30px;

}



.character-avatar img {

    width:150px;
    height:150px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #c9a227;

}



.character-info h1 {

    font-size:42px;
    margin:0 0 15px 0;

}



.character-meta {

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}



.character-meta span {

    background:#222;
    padding:8px 15px;

    border-radius:6px;

    color:#ccc;

}



.combat-power {

    margin-top:20px;

    font-size:22px;

    color:#d7b35a;

}





h2 {

    margin-top:40px;

    border-bottom:1px solid #333;

    padding-bottom:10px;

}





/* STATS */


.stats-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:15px;

}



.stat-card {

    background:#171717;

    border:1px solid #333;

    padding:15px;

    border-radius:8px;

    display:flex;

    justify-content:space-between;

}





/* SKILLS */


.skills-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(180px,1fr));

    gap:15px;

}



.skill {

    display:flex;

    gap:12px;

    align-items:center;

    background:#151515;

    border:1px solid #333;

    border-radius:8px;

    padding:10px;

}



.skill img {

    width:48px;

    height:48px;

    object-fit:contain;

}



.skill:hover {

    border-color:#c9a227;

}

/* =====================================================
   EQUIPMENT
   ===================================================== */


.equipment-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, 120px);

    gap: 20px;

    margin-bottom: 40px;

}



.equipment-item {

    position: relative;

    text-align: center;

    padding: 12px;

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

    border-radius: 10px;

    min-height: 140px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}



.equipment-item:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 15px rgba(255,255,255,.25);

}




.equipment-item img {

    width: 72px;

    height: 72px;

    object-fit: contain;

    margin-bottom: 8px;

}




.equipment-name {

    font-size: 13px;

    line-height: 16px;

    min-height: 32px;

}




.equipment-info {

    margin-top: 6px;

    font-size: 12px;

    opacity: .75;

}





/*
    Raretés AION 2
*/


.grade-common {

    border:
        2px solid #777;

}



.grade-rare {

    border:
        2px solid #35c85a;

}



.grade-unique {

    border:
        2px solid #4da3ff;

}



.grade-legend {

    border:
        2px solid #ffb300;

}



.grade-special {

    border:
        2px solid #00d9d9;

}




/*
    Petit effet glow selon rareté
*/


.grade-rare:hover {

    box-shadow:
        0 0 15px rgba(53,200,90,.5);

}



.grade-unique:hover {

    box-shadow:
        0 0 15px rgba(77,163,255,.6);

}



.grade-legend:hover {

    box-shadow:
        0 0 15px rgba(255,179,0,.7);

}



.grade-special:hover {

    box-shadow:
        0 0 15px rgba(0,217,217,.7);

}

/* ==========================
   EQUIPMENT TOOLTIP
   ========================== */

.equipment-item {
    position: relative;
}

.equipment-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    width: 260px;
    background: rgba(8,12,20,.97);
    border: 1px solid rgba(216,181,106,.7);
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .2s ease;
    z-index: 100;
    box-shadow: 0 15px 40px rgba(0,0,0,.8);
}

.equipment-item:hover .equipment-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-header {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
}

.tooltip-header img {
    width:48px;
    height:48px;
    object-fit:contain;
}

.tooltip-header h3 {
    font-size:16px;
    color:#fff;
}

.tooltip-grade {
    font-size:13px;
    color:#d8b56a;
}

.tooltip-body {
    font-size:13px;
    color:#ccc;
}

.tooltip-body p {
    margin:5px 0;
}