body {
    margin: 0;
    background-image: url("../assets/fundoundo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    transition: background-image .35s ease;
}

body.dark{
    background-image: url("../assets/categories/noite.png");
}
main {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
}
.intro-image {
    width: 300px;
    height: 300px;

    object-fit: cover;

    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 25px;

    display: block;

    border-radius: 18px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.67);

    transition: transform 0.3s ease;
}

.intro-image:hover {
    transform: scale(1.05);
}
.intro-box {
    background: white;
    border: 4px solid #6B3E26;
    border-radius: 18px;
    padding: 25px;
    margin: 0 30px 40px 30px;

   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95);
}

.intro-box h2 {
    color: black;
    margin-top: 0;
    text-align: center;
    font-size: 32px;
}

.intro-box p {
    color: black;
    font-size: 18px;
    line-height: 1.7;
}
.intro-image:hover {
    transform: scale(1.08);
}
.categories-box {
    background: white;
    border: 4px solid #6B3E26;
    border-radius: 18px;

    margin: 40px 30px;
    padding: 30px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}


.category-card {
    text-decoration: none;
    background: white;

    border-radius: 15px;
    padding: 15px;

    text-align: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

    transition: transform 0.3s ease;
}


.category-card img {
    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: 12px;
}


.category-card h3 {
    color: black;
    margin-top: 12px;
}


.category-card:hover {
    transform: scale(1.05);
}
.categories-box {
    background: white;
    border: 4px solid #6B3E26;
    border-radius: 18px;

    margin: 40px 30px;
    padding: 30px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;

    width: auto;
}


.category-card {
    text-decoration: none;
    background: white;

    border-radius: 15px;
    padding: 15px;

    text-align: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

    transition: transform 0.3s ease;
}


.category-card img {
    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: 12px;
}


.category-card h3 {
    color: black;
    margin: 8px 0 0 0;
}


.category-card:hover {
    transform: scale(1.05);
}
.categories-box {
    width: 90%;
    margin: 40px auto;
}
.category-card h3 {
    margin-top: 5px;
    margin-bottom: 0;
}
.categories-grid {
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.elements-box {
    background: white;

    border: 4px solid #6B3E26;
    border-radius: 18px;

    margin: 40px 30px;
    padding: 30px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.85);
}
.fire-box {
    background: white;

    border: 4px solid #6B3E26;
    border-radius: 18px;

    margin: 40px 30px;
    padding: 35px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.55);

    color: black;
}


.fire-title{

    text-align:center;

    font-size:48px;

    font-weight:bold;

    width:100%;

    margin:0;

}

.fire-content {
    display: flex;

    align-items: flex-start;

    gap: 40px;
}


.fire-description {
    font-size: 22px;
    font-weight: bold;

    color: black;

    margin-bottom: 35px;
}


.fire-text {
    font-size: 18px;
}


.fire-text h2 {
    font-size: 28px;
    font-weight: bold;

    margin-bottom: 30px;
}


.fire-text h3 {
    font-size: 23px;
    font-weight: bold;

    margin-bottom: 8px;
}


.fire-text p {
    font-size: 19px;

    color: black;

    margin-top: 0;
    margin-bottom: 30px;
}

.fire-ui {
    width: 300px;
    height: auto;

    border-radius: 15px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.85);

    margin-top: 20px;
}
body {
    font-family: "Trebuchet MS", Arial, sans-serif;
}
.mastery-box{

    display:flex;

    gap:15px;

    margin-bottom:30px;

}

.mastery-box span{

    background:#6B3E26;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    font-weight:bold;

    font-size:18px;

}
.fire-text h3{

    border-bottom:2px solid #d6d6d6;

    padding-bottom:6px;

    margin-top:30px;

}
.fire-description{
    background:#f5f5f5;

    border-left:6px solid #6B3E26;

    padding:15px 20px;

    border-radius:10px;

    font-size:20px;

    font-weight:bold;

    margin-bottom:30px;
}
.materials-box{

    background:white;

    border:4px solid #6B3E26;

    border-radius:18px;

    padding:35px;

    margin:40px 30px;

    box-shadow:0 20px 50px rgba(0,0,0,.105);

}
.intro-box h2{

    font-size:40px;

    text-align:center;

    margin-bottom:25px;

    color:black;

    font-weight:bold;

}
.material-page{

    display:flex;

    gap:35px;

    align-items:flex-start;

    margin:40px 30px;

}

.material-left{

    flex:2;

    background:white;

    border:4px solid #6B3E26;

    border-radius:18px;

    padding:30px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.material-left h2{

    font-size:34px;

    margin-bottom:20px;

}

.material-left p{

    font-size:20px;

    line-height:1.7;

}

.material-list{

    font-size:20px;

    line-height:2;

}

.material-info{

    width:320px;

    background:rgb(243, 241, 241);

    border:4px solid #6B3E26;

    border-radius:18px;

    padding:25px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

    text-align:center;

}

.material-info h2{

    margin-bottom:20px;

}

.material-info img{

    width:160px;

    margin-bottom:20px;

}

.material-info table{

    width:100%;

    border-collapse:collapse;

}

.material-info th{

    text-align:left;

    padding:12px;

    background:#6B3E26;

    color:#d3bf9e;

}

.material-info td{

    padding:12px;

    background:#dfd6d6;

}
.material-image{

    display:flex;

    justify-content:center;

    margin-bottom:30px;

}

.material-image img{

    width:180px;

    border-radius:18px;

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

    transition:.25s;

}

.material-image img:hover{

    transform:scale(1.08);

}

.material-text{

    font-size:20px;

    line-height:1.8;

}

.material-list{

    font-size:20px;

    line-height:2;

}

.material-list li{

    margin-bottom:10px;

}
.material-image img:hover{

    transform:scale(1.08);

}
.fire-box h2,
.fire-box p,
.fire-box ul{

    text-align:left;

}
.rarity{

    display:inline-block;

    padding:10px 18px;

    border-radius:10px;

    font-weight:bold;

    font-size:18px;

    color:white;

    margin-bottom:30px;

}
.common{
    background:#323832;
}

.rare{
    background:#2D74FF;
}

.epic{
    background:#9B59B6;
}

.legendary{
    background:#F39C12;
}

.mythic{
    background:#E74C3C;
}
.page-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:50px 30px 20px;

}

.page-navigation a{

    text-decoration:none;

    transition:.2s;

}

.page-navigation a:hover{

    color:#a05b35;

    transform:translateY(-2px);

}
.arrow{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#6B3E26;

    color:white;

    font-size:24px;

    transition:.2s;

}

.arrow:hover{

    background:#8b5737;

    transform:scale(1.1);

}
.page-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:60px 30px 20px;

}

.nav-side{

    display:flex;

    align-items:center;

    gap:12px;

}

.nav-side span{

    font-size:22px;

    font-weight:bold;

    color:#6B3E26;

}

.arrow{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#000000;

    color:white;

    text-decoration:none;

    font-size:28px;

    font-weight:bold;

    transition:.25s;

}

.arrow:hover{

    background:#000000;

    transform:scale(1.12);

}
.arrow{

    color:white !important;

}
.codes-notice{

    font-size:20px;

    line-height:1.8;

    margin-bottom:35px;

}

.codes-table{

    width:100%;

    margin:0 auto;

    border:3px solid #000;

    border-radius:18px;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

}

.codes-table th{

    background:#6B3E26;

    color:white;

    padding:18px 30px;

    font-size:24px;

    text-align:center;

}

.codes-table td{

    padding:20px 30px;

    font-size:20px;

    text-align:center;

    background:white;

}

.codes-table tr:nth-child(even) td{

    background:#f8f5f0;

}

.codes-table td,
.codes-table th{

    border-bottom:2px solid #d8d8d8;

}

.codes-table tr:last-child td{

    border-bottom:none;

}
.notice-box{

    background:#f8f5f0;

    border-left:6px solid #6B3E26;

    padding:20px;

    border-radius:12px;

    margin-bottom:35px;

}
.spirit-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


.spirit-card img{

    width:250px;

    border-radius:18px;

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

    transition:.25s;

}


.spirit-card img:hover{

    transform:scale(1.08);

}


.spirit-card h2{

    margin-top:20px;

    color:#000000;

    font-size:28px;

}


.spirit-card a{

    text-decoration:none;

    text-align:center;

}
.spirit-images{

    display:flex;

    flex-direction:column;

    gap:25px;

    align-items:center;

}


.spirit-images img{

    width:280px;

    border-radius:18px;

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

    transition:.25s;

}


.spirit-images img:hover{

    transform:scale(1.08);

}
.chakra-box{

    display:inline-block;

    background:#227ed4;

    color:white;

    padding:8px 18px;

    border-radius:12px;

    font-weight:bold;

    font-size:18px;

    margin-bottom:12px;

}
.boss-container{

    display:flex;

    justify-content:center;

    gap:50px;

    flex-wrap:wrap;

}


.boss-card{

    text-align:center;

}


.boss-card a{

    text-decoration:none;

}


.boss-card img{

    width:220px;

    border-radius:18px;

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

    transition:.25s;

}


.boss-card img:hover{

    transform:scale(1.08);

}


.boss-card h2{

    margin-top:20px;

    color:#000000;

    font-size:24px;

}
.boss-content{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:50px;

}

.boss-left{

    flex:1;

}

.boss-right{

    width:320px;

}

.boss-right img{

    width:100%;

    border-radius:18px;

    margin-bottom:20px;

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

    transition:.25s;

}

.boss-right img:hover{

    transform:scale(1.05);

}
.health-bar{

    width:100%;

    height:38px;

    background:#d8d8d8;

    border-radius:999px;

    overflow:hidden;

    margin:15px 0 35px;

}

.health-fill{

    width:100%;

    height:100%;

    background:#35b24a;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    transition:.25s;

}

.health-fill:hover{

    transform:scale(1.02);

    filter:brightness(1.08);

}


.spawn-box{

    display:inline-block;

    background:#eeeeee;

    padding:12px 22px;

    border-radius:12px;

    font-weight:bold;

    margin:15px 0 35px;

}


.drop-list{

    list-style:none;

    padding:0;

    margin:0;

}

.drop-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:2px solid #ececec;

}

.drop-list li:last-child{

    border-bottom:none;

}

.drop-list a{

    color:#2b73d6;

    font-weight:bold;

    text-decoration:none;

    transition:.2s;

}

.drop-list a:hover{

    color:#4b90f0;

    text-decoration:underline;

}
.drop-list span{

    font-weight:bold;

}
.boss-location-note{

    margin-top:8px;

    text-align:center;

    font-size:16px;

    color:#666;

    font-style:italic;

}
.section-title{

    display:inline-block;

    border-bottom:4px solid #6B3E26;

    padding-bottom:6px;

    margin-bottom:25px;

}
.guide-link{

    background:#f4f1ed;

    border-left:6px solid #6B3E26;

    border-radius:10px;

    padding:15px 18px;

    margin:20px 0;

    transition:.25s;

}

.guide-link:hover{

    transform:translateX(6px);

    background:#ece6df;

}

.guide-link a{

    color:#2b73d6;

    font-weight:bold;

    text-decoration:none;

}
.highlight-word{

    color:#6B3E26;

    font-weight:bold;
}
.subtitle{

    margin-top:-10px;

    margin-bottom:30px;

}

.npc-link{

    color:#7b7b7b;

    text-decoration:none;

    font-size:20px;

    font-weight:bold;

    transition:.2s;

}

.npc-link:hover{

    color:#6B3E26;

}
.guide-link{

    display:block;

    background:#f4f1ed;

    border-left:6px solid #6B3E26;

    border-radius:12px;

    padding:18px;

    margin:20px 0;

    text-decoration:none;

    color:black;

    transition:.25s;

}
@keyframes arrowMove{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(10px);

    }

    100%{

        transform:translateX(0);

    }

}

.arrow-move{

    display:inline-block;

}

.guide-link:hover{

    transform:translateX(6px);

    background:#ece6df;

}

.guide-link:hover .arrow-move{

    animation:arrowMove .7s infinite;

}
.guide-text{

    margin-top:8px;

    font-weight:normal;

}
.boss-card img{

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:18px;

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

    transition:.25s;

}
.boss-card{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.boss-card h2{

    margin-top:15px;

    text-align:center;

    min-height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}
.skill-divider{
    border:none;
    height:2px;
    background:#d9d9d9;
    margin:28px 0;
    border-radius:999px;
}
/* ========= ACCESSORIES ========= */

.lock-section{

    margin-top:15px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.lock-icon{

    width:48px !important;

    height:48px !important;

    object-fit:contain;

    cursor:pointer;

    transition:.18s;

}
.lock-icon:hover{

    transform:scale(1.08);

}

.lock-icon:active{

    transform:scale(.90);

}

.materials-box{

    margin-top:20px;

    background:#ffffff;

    border:3px solid #6B3E26;

    border-radius:18px;

    padding:18px;

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.materials-box h2{

    color:#6B3E26;

    margin-bottom:18px;

}

.material-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin:14px 0;

}

.material-item img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.material-item span{

    flex:1;

    font-size:18px;

    font-weight:bold;

}

.material-item strong{

    min-width:45px;

    text-align:right;

    color:#6B3E26;

    font-size:19px;

    transition:.2s;

}

/* animação quando muda */

.flash{

    animation:flashMaterial .35s ease;

}

@keyframes flashMaterial{

0%{

opacity:.2;

transform:scale(.75);

}

50%{

opacity:1;

transform:scale(1.18);

}

100%{

opacity:1;

transform:scale(1);

}

}

.buff-box{

    background:#fafafa;

    border-radius:14px;

    padding:15px;

    border:2px solid #d8d8d8;

}

.buff-box h3{

    color:#6B3E26;

    margin-top:10px;

}
.ss-rank{

    color:#b46cff;

    font-size:24px;

    font-weight:bold;

    margin-top:12px;

    margin-bottom:8px;

    -webkit-text-stroke:1.3px #b46cff;
;

    text-shadow:
        1px 1px 0 #000,
       -1px 1px 0 #000,
        1px -1px 0 #000,
       -1px -1px 0 #000;

}
.weapon-page-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:25px;

}

.weapon-page-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    transition:.25s;

}

.weapon-page-card:hover{

    transform:translateY(-6px);

}

.weapon-page-image{

    width:180px;

    height:180px;

    object-fit:contain;

}

.weapon-page-name{

    margin-top:14px;

    font-size:30px;

    font-weight:bold;

    color:black;

    text-align:center;

}
/* ---------- WEAPONS PAGE ---------- */

.weapon-title{

    color:#000;
    text-align:center;

}

.weapon-grid{

    display:flex;

    justify-content:center;

    gap:140px; 

    padding:35px 0;

    flex-wrap:wrap;

}

.weapon-link{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

}

.weapon-link:hover{

    transform:translateY(-6px);

    transition:.25s;

}

.weapon-icon{

    width:210px;

    height:210px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.65);

}
.weapon-name{

    margin-top:15px;

    font-size:30px;

    font-weight:bold;

    color:#000;

}
.lock-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    margin:18px auto;

}
.drop-rates{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    margin:25px 0 35px;

}

.drop-rate{

    width:180px;

    padding:18px 12px;

    border-radius:18px;

    border:4px solid #222;

    text-align:center;

    color:white;

    font-weight:bold;

    box-shadow:0 8px 18px rgba(0,0,0,.35);

    transition:all .25s ease;

    cursor:default;

}

.drop-rate:hover{

    transform:translateY(-8px) scale(1.05);

    box-shadow:0 14px 28px rgba(0,0,0,.45);

}

.drop-rate span{

    display:block;

    font-size:26px;

    letter-spacing:1px;

    margin-bottom:12px;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;

}

.drop-rate strong{

    font-size:42px;

    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000;

}

.drop-rate.common{

    background:linear-gradient(#9b9b9b,#6f6f6f);

}

.drop-rate.rare{

    background:linear-gradient(#4fa9ff,#1f64d6);

}

.drop-rate.epic{

    background:linear-gradient(#b45dff,#7a22d4);

}

.drop-rate.legendary{

    background:linear-gradient(#ffd84d,#d89a00);

    color:#111;

}
.fighting-box{

    width:calc(100% - 60px);

    margin:30px auto;

    background:#fff;

    border:4px solid #6b4423;

    border-radius:18px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.fighting-grid{

    display:flex;

    justify-content:center;

    gap:60px;

    flex-wrap:wrap;

}

.fighting-card{

    text-decoration:none;

    color:#000;

    transition:.25s;

}

.fighting-card:hover{

    transform:translateY(-8px);

}

.fighting-image{

    width:250px;
    height:250px;

    object-fit:cover;

    border:none;

    border-radius:18px;

}

.fighting-title{

    margin-top:15px;

    font-size:28px;

    font-weight:bold;

    text-align:center;

    color:#000;

}
.cooldown-box{

    background:#d0d0d0;

    border:3px solid transparent;

    border-radius:12px;

    padding:8px 14px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}
#theme-toggle{

    position:fixed;

    top:20px;

    right:20px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#6b4423;

    color:white;

    font-size:24px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 8px 20px rgba(0,0,0,.4);

    transition:.25s;

}

#theme-toggle:hover{

    transform:scale(1.08);

}
/* ========================= */
/*        DARK MODE          */
/* ========================= */

body.dark{

    background-image:url("../assets/categories/noite.png");

}


/* caixas principais */

body.dark .intro-box,
body.dark .categories-box,
body.dark .elements-box,
body.dark .fire-box,
body.dark .materials-box,
body.dark .material-left,
body.dark .fighting-box{

    background:#2b2b2b;

}


/* textos principais */

body.dark .intro-box h2,
body.dark .intro-box p,
body.dark .fire-box h1,
body.dark .fire-box h2,
body.dark .fire-box p,
body.dark .material-left h2,
body.dark .material-left p,
body.dark .material-text,
body.dark .material-list{

    color:#f5f5f5;

}


/* cards da página inicial */

body.dark .category-card{

    background:#333;

}


body.dark .category-card h3{

    color:white;

}


/* acessórios */

body.dark .materials-box{

    background:#333;

    border-color:#6B3E26;

}


body.dark .materials-box h2{

    color:#d3bf9e;

}


body.dark .material-item span{

    color:white;

}


body.dark .material-item strong{

    color:#d3bf9e;

}


/* buffs */

body.dark .buff-box{

    background:#333;

    border-color:#555;

}


/* tabelas */

body.dark .codes-table td{

    background:#333;

    color:white;

}


body.dark .codes-table tr:nth-child(even) td{

    background:#3b3b3b;

}


/* fighting styles */

body.dark .fighting-title,
body.dark .weapon-name,
body.dark .weapon-page-name,
body.dark .spirit-card h2,
body.dark .boss-card h2{

    color:white;

}


/* cooldown */

body.dark .cooldown-box{

    background:#555;

    color:white;

}


/* chakra */

body.dark .chakra-box{

    background:#227ed4;

}


/* links */

body.dark a{

    color:#78b7ff;

}
body.dark .notice-box{

    background:#333;

    border-left:6px solid #6B3E26;

}


body.dark .codes-notice{

    color:#f5f5f5;

}