:root{
--dragon-red:#a11212;
--dragon-gold:#c9a66b;
--dragon-dark:#0a0a0a;
--stone:#161616;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:'Inter',sans-serif;
background:#050505;
color:#f2f2f2;
overflow-x:hidden;
background-image:radial-gradient(circle at top, rgba(161,18,18,.08), transparent 35%);
}

body::before{
content:'';
position:fixed;
inset:0;
pointer-events:none;
opacity:.14;
z-index:999;
mix-blend-mode:soft-light;
}

.hero-section{
min-height:100vh;
position:relative;
overflow:hidden;
background:#050505;
}

.hero-slideshow{
position:absolute;
inset:0;
z-index:0;
}

.hero-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transform:scale(1.08);
transition:opacity 1.8s ease, transform 7s ease;
/*filter:brightness(.5) saturate(1.05);*/
}

.hero-slide::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(5,5,5,.35), rgba(5,5,5,.78));
}

.hero-slide.active{
opacity:1;
transform:scale(1);
}

.hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at center, rgba(161,18,18,.1), transparent 55%),
linear-gradient(to top, rgba(0,0,0,.1), transparent 45%);
}



.scroll-progress-bar{
position:fixed;
top:0;
left:0;
width:100%;
height:4px;
transform-origin:left;
transform:scaleX(0);
background:linear-gradient(90deg,#4a320f 0%, #c9a66b 35%, #f4d38a 50%, #c9a66b 65%, #4a320f 100%);
box-shadow:0 0 12px rgba(201,166,107,.9),0 0 24px rgba(120,74,14,.55);
z-index:9999;
animation:goldReadingProgress linear;
animation-timeline:scroll(root);
}

@keyframes goldReadingProgress{
from{transform:scaleX(0);}
to{transform:scaleX(1);}
}

.dragon-navbar{
position:relative;
top:0;
left:0;
width:100%;
z-index:50;
padding:18px 0;
background-image: linear-gradient(180deg, rgba(28, 28, 28, 0.2), rgba(10, 10, 10, 0.2)), url(shadow.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
border-bottom: 1px solid rgba(201, 166, 107, .15);
}

.dragon-logo{
font-family:'Cinzel',serif;
letter-spacing:5px;
color:var(--dragon-gold)!important;
}

.logo{
font-family:'Cinzel',serif;
letter-spacing:5px;
color:var(--dragon-gold)!important;
width: auto;
height: auto;
}

.nav-link{
color:#ddd!important;
transition:.3s;
margin-left:12px;
position:relative;
}

.nav-link::after{
content:'';
position:absolute;
left:0;
bottom:-6px;
width:0;
height:1px;
background:var(--dragon-red);
transition:.3s;
}

.nav-link:hover{
color:#fff!important;
text-shadow:0 0 12px rgba(255,0,0,.7);
}

.nav-link:hover::after{
width:100%;
}

.hero-container{
position:relative;
z-index:2;
}

.hero-subtitle{
color:var(--dragon-gold);
text-transform:uppercase;
letter-spacing:5px;
}

.hero-title{
font-family:'Cinzel',serif;
font-size:4rem;
line-height:.95;
margin:20px 0;
text-shadow:0 0 35px rgba(0,0,0,.65);
}

.hero-title span{
display:block;
color:var(--dragon-red);
text-shadow:0 0 24px rgba(255,0,0,.45);
}

.hero-description{
max-width:540px;
line-height:1.8;
color:#ccc;
font-size:1.05rem;
}

.hero-buttons{
margin-top:35px;
gap:15px;
flex-wrap:wrap;
}

.dragon-btn,
.dragon-btn-outline{
padding:16px 28px;
border-radius:0;
letter-spacing:2px;
text-transform:uppercase;
transition:.3s;
border-radius: 0px 10px 10px 10px;
}

.dragon-btn{
background:linear-gradient(135deg,#7e0d0d,var(--dragon-red));
color:white;
border:1px solid #780000;
margin-bottom: 10px;
}

.dragon-btn:hover{

box-shadow:0 0 25px rgba(255,0,0,.4);
transform:translateY(-4px);
}

.dragon-btn-outline{
border:1px solid var(--dragon-gold);
color:var(--dragon-gold);
margin-bottom: 10px;
}

.dragon-btn-outline:hover{
background:var(--dragon-gold);
color:black;
/*transform:translateY(-2px);*/
}

.dragon-frame{
padding:14px;
border:1px solid rgba(201,166,107,.25);
box-shadow:0 0 40px rgba(255,0,0,.16);
position:relative;
background:rgba(0,0,0,.45);
}

.dragon-frame::before,
.dragon-frame::after{
content:'';
position:absolute;
width:40px;
height:40px;
border:2px solid var(--dragon-gold);
}

.dragon-frame::before{
left:-6px;
top:-6px;
border-right:none;
border-bottom:none;
}

.dragon-frame::after{
right:-6px;
bottom:-6px;
border-left:none;
border-top:none;
}

.dragon-image{
border:0px solid rgba(255,255,255,.08);
    filter:
        drop-shadow(0 35px 50px rgba(0,0,0,0.95))
        drop-shadow(0 0 28px rgba(255,180,90,0.18));
}

.section-dark,
.section-red,
.gallery-section{
padding:120px 0;
position:relative;
}

.section-dark{
    background:
        linear-gradient(
            to bottom,
            rgb(8,5,3) 0%,
            rgb(8,6,4) 12%,
            rgb(6,5,5) 30%,
            #050505 100%
        );
}

.section-red{
    background:
        linear-gradient(
            to bottom,
            rgb(8,5,3) 0%,
            rgb(8,6,4) 12%,
            rgb(6,5,5) 30%,
            #050505 100%
        );
}

.section-header h2{
font-family:'Cinzel',serif;
font-size:3rem;
color:var(--dragon-gold);
letter-spacing:2px;
}

.section-line{
width:140px;
height:2px;
background:linear-gradient(to right, transparent, var(--dragon-red), transparent);
margin:20px auto 100px;
}

.stone-card,
.faction-card,
.monster-card{
background:linear-gradient(145deg,rgba(27,27,27,.96),rgba(12,12,12,.98));
padding:38px;
min-height:250px;
border:1px solid rgba(201,166,107,.12);
transition:.35s;
position:relative;
overflow:hidden;
backdrop-filter:blur(4px);
}

.stone-card::before,
.faction-card::before,
.monster-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(201,166,107,.05), transparent 45%);
pointer-events:none;
}

.stone-card::after,
.faction-card::after,
.monster-card::after{
content:'';
position:absolute;
top:18px;
right:18px;
width:58px;
height:58px;
opacity:.08;
background-size:contain;
background-repeat:no-repeat;
filter:invert(78%) sepia(19%) saturate(494%) hue-rotate(356deg);
}

.stone-card:hover,
.faction-card:hover,
.monster-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 35px rgba(255,0,0,.12);
border-color:rgba(255,0,0,.35);
}

.stone-card h3,
.faction-card h3,
.monster-card h4{
font-family:'Cinzel',serif;
margin-bottom:18px;
position:relative;
z-index:2;
}

.stone-card p,
.faction-card p,
.monster-card p{
position:relative;
z-index:2;
color:#c8c8c8;
line-height:1.7;
}

.gallery-item{
height:320px;
position:relative;
overflow:hidden;
border:1px solid rgba(201,166,107,.18);
transition:.35s;
background-size:cover;
background-position:center;
}

.gallery-item::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.75));
transition:.35s;
}

.gallery-item::after{
content:'Spalona kraina';
position:absolute;
left:24px;
bottom:24px;
font-family:'Cinzel',serif;
letter-spacing:2px;
font-size:1.2rem;
}

.gallery-item:hover{
transform:translateY(-6px) scale(1.01);
}

.gallery-item:hover::before{
background:linear-gradient(rgba(120,0,0,.2),rgba(0,0,0,.7));
}

.gallery-item:nth-child(1), .gallery-fire{
background-image:url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1200&auto=format&fit=crop');
}

.gallery-ruins{
background-image:url('https://images.unsplash.com/photo-1518562180175-34a163b1a9a6?q=80&w=1200&auto=format&fit=crop');
}

.gallery-dragon{
background-image:url('https://images.unsplash.com/photo-1577495508326-19a1b3cf65b7?q=80&w=1200&auto=format&fit=crop');
}

.footer-section{
padding:32px 0;
background-image: linear-gradient(180deg, rgba(28, 28, 28, 0.2), rgba(10, 10, 10, 0.2)), url(shadow.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-top:1px solid rgba(201,166,107,.15);
color:#888;
position:relative;
overflow:hidden;
}

.footer-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
}

.footer-left p{
margin:0;
font-size:.95rem;
letter-spacing:.5px;
text-align:left;
}

.footer-center{
display:flex;
justify-content:center;
flex:1;
}

.dev-blog-link{
display:inline-flex;
align-items:center;
gap:10px;
color:#c9a66b;
text-decoration:none;
padding:10px 18px;
border:1px solid rgba(201,166,107,.2);
background:rgba(201,166,107,.05);
transition:all .35s ease;
letter-spacing:1px;
text-transform:uppercase;
font-size:.78rem;
}

.dev-blog-link:hover{
color:#fff;
background:rgba(201,166,107,.15);
box-shadow:0 0 18px rgba(201,166,107,.18);
transform:translateY(-2px);
}

.footer-rune{
font-size:1rem;
opacity:.8;
}

.footer-right{
display:flex;
align-items:center;
gap:12px;
}

.social-icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:0%;
border:1px solid rgba(201,166,107,.2);
background:rgba(255,255,255,.03);
color:#c9a66b;
text-decoration:none;
transition:all .35s ease;
position:relative;
overflow:hidden;
}

.social-icon::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle, rgba(201,166,107,.25) 0%, transparent 70%);
opacity:0;
transition:opacity .35s ease;
}

.social-icon:hover{
transform:translateY(-4px) scale(1.08) rotate(3deg);
color:#fff;
border-color:rgba(201,166,107,.5);
box-shadow:0 0 16px rgba(201,166,107,.3);
}

.social-icon:hover::before{
opacity:1;
}

.social-icon i{
position:relative;
z-index:2;
}

@media(max-width:768px){
.footer-wrapper{
flex-direction:column;
text-align:center;
}

.footer-left p{
text-align:center;
}

.footer-center{
order:3;
width:100%;
}
}


.ember{
position:fixed;
width:4px;
height:4px;
border-radius:50%;
background:rgba(255,120,0,.9);
pointer-events:none;
animation:floatUp linear forwards;
}

@keyframes floatUp{
0%{transform:translateY(0) scale(1);opacity:0;}
10%{opacity:1;}
100%{transform:translateY(-120vh) scale(0);opacity:0;}
}

@media(max-width:992px){
.hero-title{
font-size:3.5rem;
}

.hero-container{
padding-top:120px;
padding-bottom:60px;
}
}

@media(max-width:768px){
.hero-title{
font-size:2.7rem;
}

.section-header h2{
font-size:2.2rem;
}

.hero-buttons{
justify-content:center;
}

.hero-description{
margin:auto;
}

.stone-card,
.faction-card,
.monster-card{
min-height:auto;
}
}


.race-card{
padding-top:120px;
overflow:visible;
}

.race-character{
position:absolute;
z-index:5;
pointer-events:none;
filter:drop-shadow(0 0 25px rgba(0,0,0,.9));
transition:transform .4s ease, filter .4s ease;
}

.race-card:hover .race-character{
transform:translateY(-8px) scale(1.03);
filter:drop-shadow(0 0 35px rgba(201,166,107,.18));
}

.race-elf{
height:300px;
top:-170px;
left:50%;
transform:translateX(-50%);
}

.race-djinn{
height:360px;
top:-220px;
left:50%;
transform:translateX(-50%);
}

.race-dwarf{
height:300px;
top:-155px;
left:50%;
transform:translateX(-50%);
}

.race-card h3,
.race-card p{
position:relative;
z-index:2;
}

@media(max-width:768px){
.race-card{
margin-top:120px;
}

.race-elf,
.race-dwarf{
height:220px;
top:-120px;
}

.race-djinn{
height:260px;
top:-170px;
}
}


.stone-card:hover .race-character,
.stone-card:hover img {
    transform: translateX(-50%) translateY(-10px);
}


/* ==========================================
   DARK FANTASY RACE CARDS
========================================== */

.race-showcase-section {
    position: relative;
    padding: 180px 0 140px;
    background:
        radial-gradient(circle at top, rgba(120,40,20,0.12), transparent 45%),
        #050505;
    overflow: hidden;
}

.race-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 80px;
}

.race-showcase-card {
    position: relative;
    background-image:
        radial-gradient(
            ellipse at center bottom,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,0.72) 78%,
            rgba(0,0,0,0.98) 100%
        ),
        linear-gradient(
            180deg,
            rgba(28, 28, 28, 0.2),
            rgba(10, 10, 10, 0.2)
        ),
        var(--race-card-bg, url("shadow.png"));

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0px 0px 0px 0px;
    overflow: visible;
    border: 1px solid rgba(191,145,72,0.18);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(255,180,90,0.04);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    padding-top: 260px;
	margin-top: 100px;
}

.race-showcase-card:hover {
    transform: translateY(-14px);
    border-color: rgba(255,180,80,0.35);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.85),
        0 0 40px rgba(255,140,40,0.12);
}

.race-image-wrapper {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    z-index: 5;
    pointer-events: none;
}

.showcase-race-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,0.85))
        drop-shadow(0 0 22px rgba(255,170,70,0.10));
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.race-showcase-card:hover .showcase-race-image {
    transform: translateY(-10px);
    filter:
        drop-shadow(0 35px 50px rgba(0,0,0,0.95))
        drop-shadow(0 0 28px rgba(255,180,90,0.18));
}

.race-card-content {
    padding: 40px 34px 30px;
    text-align: center;
	height: 260px;
}

.race-level {
    display: inline-block;
    color: #c49b52;
    letter-spacing: 4px;
    font-size: 0.8rem;
    margin-bottom: 18px;
	text-shadow: 1px 1px 1px black;
}

.race-card-content h3 {
    font-size: 1.8rem;
    color: #f0e6d2;
    margin-bottom: 18px;
	text-shadow: 1px 1px 1px black;
}

.race-card-content p {
    color: rgba(230,230,230,0.72);
    line-height: 1.8;
    font-size: 1rem;
	text-shadow: 1px 1px 1px black;
}

.race-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,180,80,0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.stat-box {
    padding: 39px 10px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(140,80,25,0.92), rgba(110,55,15,0.96)) , url(red.png);
    border-right: 1px solid rgba(255,220,180,0.08) , url(shadow.png);
}

.stat-box:last-child {
    border-right: none;
}

.stat-box strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
}

.stat-box span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-dark {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(140 25 25 / 92%), rgb(110 15 15 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-dark:last-child {
    border-right: none;
}

.stat-box-dark strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
} 

.stat-box-dark span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-borderland {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(25 76 140 / 92%), rgb(15 53 110 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-borderland:last-child {
    border-right: none;
}

.stat-box-borderland strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
}

.stat-box-borderland span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-light {
	padding: 36px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(140, 80, 25, 0.92), rgba(110, 55, 15, 0.96)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-light:last-child {
    border-right: none;
}

.stat-box-light strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
}

.stat-box-light span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

@media (max-width: 1100px) {
    .race-card-grid {
        grid-template-columns: 1fr;
        gap: 120px;
    }
}

@media (max-width: 640px) {

    .race-showcase-section {
        padding: 140px 20px 100px;
    }

    .race-image-wrapper {
        width: 210px;
        top: -80px;
    }

    .race-showcase-card {
        padding-top: 200px;
    }

    .race-card-content h3 {
        font-size: 1.7rem;
    }

    .stat-box strong {
        font-size: 1.5rem;
    }
}







.tips-showcase-section {
    position: relative;
    padding: 180px 0 140px;
    background:#050505;
    overflow: hidden;
}

.tips-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 80px;
}

.tips-showcase-card {
    position: relative;
    background-image:
        radial-gradient(
            ellipse at center bottom,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,0.72) 78%,
            rgba(0,0,0,0.98) 100%
        ),
        linear-gradient(
            180deg,
            rgba(28, 28, 28, 0.2),
            rgba(10, 10, 10, 0.2)
        ),
        var(--race-card-bg, url("shadow.png"));

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0px 0px 0px 0px;
    overflow: visible;
    border: 1px solid rgba(191,145,72,0.18);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(255,180,90,0.04);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    padding-top: 0px;
	margin-top: 100px;
}

.tips-showcase-card:hover {
    transform: translateY(-14px);
    border-color: rgba(255,180,80,0.35);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.85),
        0 0 40px rgba(255,140,40,0.12);
}

.tips-image-wrapper {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    z-index: 5;
    pointer-events: none;
}

.showcase-tips-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,0.85))
        drop-shadow(0 0 22px rgba(255,170,70,0.10));
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.tips-showcase-card:hover .showcase-tips-image {
    transform: translateY(-10px);
    filter:
        drop-shadow(0 35px 50px rgba(0,0,0,0.95))
        drop-shadow(0 0 28px rgba(255,180,90,0.18));
}

.tips-card-content {
    padding: 40px 34px 30px;
    text-align: center;
	height: 220px;
	margin-bottom: 40px;
}

.tips-level {
    display: inline-block;
    color: #c49b52;
    letter-spacing: 4px;
    font-size: 0.8rem;
    margin-bottom: 18px;
}

.tips-card-content h3 {
    font-size: 1.8rem;
    color: #f0e6d2;
    margin-bottom: 18px;
}

.tips-card-content p {
    color: rgba(230,230,230,0.72);
    line-height: 1.8;
    font-size: 1rem;
}

.tips-card-stats {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border-top: 1px solid rgba(255,180,80,0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.stat-box {
    padding: 39px 10px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(140,80,25,0.92), rgba(110,55,15,0.96)) , url(red.png);
    border-right: 1px solid rgba(255,220,180,0.08) , url(shadow.png);
}

.stat-box:last-child {
    border-right: none;
}

.stat-box strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
}

.stat-box span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-red {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(140 25 25 / 92%), rgb(110 15 15 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-red:last-child {
    border-right: none;
}

.stat-box-red strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
} 

.stat-box-red span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-dark {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(140 25 25 / 92%), rgb(110 15 15 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-dark:last-child {
    border-right: none;
}

.stat-box-dark strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
} 

.stat-box-dark span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-borderland {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(25 76 140 / 92%), rgb(15 53 110 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-borderland:last-child {
    border-right: none;
}

.stat-box-borderland strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
}

.stat-box-borderland span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.stat-box-light {
	padding: 36px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(140, 80, 25, 0.92), rgba(110, 55, 15, 0.96)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-light:last-child {
    border-right: none;
}

.stat-box-light strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
}

.stat-box-light span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.info-showcase-section {
    position: relative;
    padding: 180px 0 140px;
    background:#050505;
    overflow: hidden;
}

.info-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 80px;
}

.info-showcase-card {
    position: relative;
    background-image:
        radial-gradient(
            ellipse at center bottom,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,0.72) 78%,
            rgba(0,0,0,0.98) 100%
        ),
        linear-gradient(
            180deg,
            rgba(28, 28, 28, 0.2),
            rgba(10, 10, 10, 0.2)
        ),
        var(--race-card-bg, url("shadow.png"));

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0px 0px 0px 0px;
    overflow: visible;
    border: 1px solid rgba(191,145,72,0.18);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(255,180,90,0.04);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    padding-top: 0px;
	margin-top: 100px;
}

.info-showcase-card:hover {
    transform: translateY(-14px);
    border-color: rgba(255,180,80,0.35);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.85),
        0 0 40px rgba(255,140,40,0.12);
}

.info-image-wrapper {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 280px;
    z-index: 5;
    pointer-events: none;
}

.showcase-info-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,0.85))
        drop-shadow(0 0 22px rgba(255,170,70,0.10));
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.info-showcase-card:hover .showcase-info-image {
    transform: translateY(-10px);
    filter:
        drop-shadow(0 35px 50px rgba(0,0,0,0.95))
        drop-shadow(0 0 28px rgba(255,180,90,0.18));
}

.info-card-content {
    padding: 40px 34px 30px;
    text-align: center;
	height: 220px;
}

.info-level {
    display: inline-block;
    color: #c49b52;
    letter-spacing: 4px;
    font-size: 0.8rem;
    margin-bottom: 18px;
}

.info-card-content h3 {
    font-size: 1.8rem;
    color: #f0e6d2;
    margin-bottom: 18px;
}

.info-card-content p {
    color: rgba(230,230,230,0.72);
    line-height: 1.8;
    font-size: 1rem;
}

.info-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,180,80,0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.info-card-stats-game {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 180, 80, 0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.info-card-stats-politics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 180, 80, 0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.info-card-stats-war {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 180, 80, 0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.info-card-stats-war-common {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 180, 80, 0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.info-card-stats-war-special {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 180, 80, 0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.info-card-stats-ally {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border-top: 1px solid rgba(255, 180, 80, 0.10);
    overflow: hidden;
    border-radius: 0 0 0px 0px;
}

.stat-box {
    padding: 39px 10px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(140,80,25,0.92), rgba(110,55,15,0.96)) , url(red.png);
    border-right: 1px solid rgba(255,220,180,0.08) , url(shadow.png);
}

.stat-box:last-child {
    border-right: none;
}

.stat-box strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
	text-shadow: 1px 1px 1px black;
}

.stat-box span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-dark {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(140 25 25 / 92%), rgb(110 15 15 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-dark:last-child {
    border-right: none;
}

.stat-box-dark strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
	text-shadow: 1px 1px 1px black;
} 

.stat-box-dark span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-borderland {
	padding: 39px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(25 76 140 / 92%), rgb(15 53 110 / 96%)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-borderland:last-child {
    border-right: none;
}

.stat-box-borderland strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
	text-shadow: 1px 1px 1px black;
}

.stat-box-borderland span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-light {
	padding: 36px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(140, 80, 25, 0.92), rgba(110, 55, 15, 0.96)), url(red.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-light:last-child {
    border-right: none;
}

.stat-box-light strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-light span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-game {
	padding: 36px 10px;
    text-align: center;
    background: linear-gradient(180deg, #2a2a2a, #2b2b2b00), url(shadow.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-game:last-child {
    border-right: none;
}

.stat-box-game strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-game span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-ally {
	padding: 36px 10px;
    text-align: center;
    background: linear-gradient(180deg, #2a2a2a, #2b2b2b00), url(shadow.png);
    border-right: 1px solid rgba(255, 220, 180, 0.08);
}

.stat-box-ally:last-child {
    border-right: none;
}

.stat-box-ally strong {
    display: block;
    color: #fff2d5;
    font-size: 2rem;
    margin-bottom: 6px;
	text-shadow: 1px 1px 1px black;
}

.stat-box-ally span {
    color: rgba(255,240,220,0.78);
    font-size: 0.78rem;
    letter-spacing: 2px;
	text-shadow: 1px 1px 1px black;
}

@media (max-width: 1100px) {
    .tips-card-grid {
        grid-template-columns: 1fr;
        gap: 120px;
    }
}

@media (max-width: 1100px) {
    .info-card-grid {
        grid-template-columns: 1fr;
        gap: 120px;
    }
}

@media (max-width: 640px) {

    .tips-showcase-section {
        padding: 140px 20px 100px;
    }

    .tips-image-wrapper {
        width: 210px;
        top: -80px;
    }

    .tips-showcase-card {
        padding-bottom: 0px;
    }

    .tips-card-content h3 {
        font-size: 1.7rem;
    }

    .stat-box strong {
        font-size: 1.5rem;
    }
}

.captions {
    margin-top: -100px !important;
}




/* ==========================================
   IMPROVED HERO TRANSITION BLEND
========================================== */

.hero-section,
.hero {
    position: relative;
    overflow: hidden;
}

/* soft bottom fade */
.hero-section::before,
.hero::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 220px;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(7,0,0,0.15) 18%,
            rgba(10,2,0,0.35) 40%,
            rgba(12,4,0,0.72) 68%,
            rgba(10,5,2,0.96) 88%,
            rgba(8,5,3,1) 100%
        );
}

/* decorative organic separator */
.hero-section::after,
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 180px;
    z-index: 4;
    pointer-events: none;

    background-image: url('./assets/bg-game6.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;

    opacity: 0.28;
    mix-blend-mode: soft-light;
    filter: brightness(0.5);
}

.race-showcase-section {
    position: relative;
    margin-top: -2px;
    background:#050505;
}

.race-showcase-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 0;
    width: 100%;
    height: 220px;
    pointer-events: none;
    z-index: 1;
    background:#050505;
}

@media (max-width: 768px) {

    .hero-section::before,
    .hero::before {
        height: 240px;
    }

    .hero-section::after,
    .hero::after {
        height: 110px;
        opacity: 0.22;
    }

    .race-showcase-section::before {
        top: -100px;
        height: 120px;
    }
}

.hero-slide-indicators{
position:absolute;
bottom:42px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:14px;
z-index:3;
}

.hero-dot{
width:14px;
height:14px;
border-radius:50%;
border:1px solid rgba(201,166,107,.85);
background:rgba(0,0,0,.45);
box-shadow:0 0 12px rgba(0,0,0,.4);
transition:all .4s ease;
}

.hero-dot.active{
background:var(--dragon-red);
box-shadow:0 0 18px rgba(161,18,18,.9);
transform:scale(1.15);
}


.dragon-navbar-scrolled{
position:fixed;
top:0;
left:0;
width:100%;
z-index:200;
padding:14px 0;
background:rgba(0,0,0,.50);
/*backdrop-filter:blur(8px);*/
backdrop-filter:blur(8px);
border-bottom:1px solid rgba(201,166,107,.12);
transform:translateY(-120%);
opacity:0;
visibility:hidden;
transition:all .45s ease;
}

.dragon-navbar-scrolled.visible{
transform:translateY(0);
opacity:1;
visibility:visible;
}

.land-section{padding:120px 0;background:#050505;overflow:hidden;position:relative;}
.land-subtitle{color:#8f8372;letter-spacing:2px;text-transform:uppercase;font-size:12px;margin-top:18px;}
.read-more{margin-top:18px;}
.read-more a{color:#8f8372;letter-spacing:2px;text-transform:uppercase;font-size:12px;text-decoration:none;transition:color .3s ease,opacity .3s ease;}
.read-more a:hover{color:#c9a66b;opacity:1;}

.land-slider-wrap{width:100%;overflow:hidden;cursor:grab;padding:40px 0 20px;}
.land-slider-wrap:active{cursor:grabbing;}
.land-slider{display:flex;justify-content:center;align-items:center;gap:28px;width:100%;max-width:1400px;margin:0 auto;user-select:none;}
.land-card{flex:0 0 26%;height:24vw;max-height:620px;min-height:420px;position:relative;border-radius:0px;overflow:hidden;opacity:.55;transform:scale(.88);transition:all .45s ease;border:1px solid rgba(201,166,107,.2);cursor:pointer;}
.land-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);}
.land-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.15));}
.land-card.active{opacity:1;transform:scale(1.00);flex-basis:38%;z-index:2;border:1px solid rgba(201,166,107,.7);box-shadow:0 0 45px rgba(0,0,0,.65);}
.land-card.active img{filter:brightness(.99);}
.land-card.side{opacity:.72;transform:scale(.92);}
.land-overlay{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:2;text-align:center;width:100%;padding:0 20px;}
.land-overlay h3{font-family:'Cinzel',serif;color:#f4efe6;font-size:clamp(24px,2.8vw,58px);text-shadow:0 0 15px rgba(0,0,0,.8);}
@media(max-width:991px){
	.land-slider{
		gap:14px
	}
	.land-card{
		flex-basis:28%;
		height:55vw;
		min-height:unset}
	.land-card.active{
		flex-basis:40%
		}
		}

@media(max-width:767px){
	.land-slider{
		flex-direction:column;
		align-items:center;
	}
	.land-card,
	.land-card.active,
	.land-card.side{
		flex:0 0 100%;
		width:100%;
		max-width:520px;
		height:70vw;
		max-height:520px;
		min-height:320px;
		transform:none;
		opacity:1;
	}
}

.read-more{color:#8f8372!important;letter-spacing:2px;text-transform:uppercase;font-size:12px;margin-top:18px;}



.story-section{
position:relative;
padding:140px 0;
background:#050505;
overflow:hidden;
z-index:1;
}

.story-section::before{
content:'';
position:absolute;
inset:0;
background:#050505;
pointer-events:none;
z-index:-1;
}

.story-section .container{
position:relative;
z-index:2;
text-align: center !important;
}


.story-book-scene{
perspective:2200px;
display:flex;
justify-content:center;
align-items:center;
min-height:520px;
}

.story-book{
position:relative;
width:420px;
height:520px;
transform-style:preserve-3d;
}

.book-cover{
position:absolute;
width:100%;
height:100%;
transform-origin:left center;
transform-style:preserve-3d;
transition:transform 3.2s cubic-bezier(.23,1,.32,1);
z-index:5;
}

.story-book:hover .book-cover{
transform:rotateY(-135deg);
}

.book-cover-front,
.book-cover-back{
position:absolute;
inset:0;
backface-visibility:hidden;
border:2px solid rgba(201,166,107,.5);
overflow:hidden;
}

.book-cover-front{
background:
linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.85)),
url('../assets/skin.png') center/cover;
box-shadow:
0 30px 60px rgba(0,0,0,.7),
inset 0 0 80px rgba(0,0,0,.8);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.book-cover-front::before{
content:'';
position:absolute;
inset:14px;
border:1px solid rgba(201,166,107,.35);
pointer-events:none;
}

.book-cover-front h4{
font-family:'Cinzel',serif;
font-size:2rem;
letter-spacing:5px;
text-transform:uppercase;
color:#d2b07a;
margin-bottom:12px;
text-shadow:0 0 18px rgba(0,0,0,.8);
}

.book-cover-front p{
color:#a68c67;
letter-spacing:3px;
text-transform:uppercase;
font-size:.8rem;
margin:0;
}

.book-rune{
font-size:4rem;
color:rgba(201,166,107,.85);
margin-bottom:24px;
text-shadow:0 0 25px rgba(0,0,0,.9);
}

.book-cover-back{
background:linear-gradient(180deg,#22150f,#120c09);
transform:rotateY(180deg);
}

.book-pages{
position:absolute;
inset:12px 0 12px 20px;
display:flex;
background:#d6c3a0;
box-shadow:0 25px 45px rgba(0,0,0,.5);
}

.book-pages::before{
content:'';
position:absolute;
left:-20px;
top:0;
bottom:0;
width:20px;
background:linear-gradient(180deg,#3f2b1f,#1d130d);
box-shadow:inset -4px 0 8px rgba(0,0,0,.7);
}

.book-page{
flex:1;
padding:60px 35px;
background:
linear-gradient(rgba(255,255,255,.04),rgba(0,0,0,.05)),
repeating-linear-gradient(to bottom,transparent 0,transparent 27px,rgba(0,0,0,.05) 28px);
color:#3b2d1f;
font-family:'Cormorant Garamond',serif;
position:relative;
}

.page-left{
border-right:1px solid rgba(0,0,0,.12);
}

.book-page h5{
font-family:'Cinzel',serif;
font-size:1.3rem;
margin-bottom:24px;
color:#2f1d12;
letter-spacing:2px;
}

.book-page p{
color:#4b3828;
font-size:1.75rem;
line-height:1.9;
}

.story-box-glow{
position:absolute;
left:10%;
right:10%;
bottom:-35px;
height:70px;
background:radial-gradient(circle, rgba(156,91,34,.22), transparent 70%);
filter:blur(22px);
}

@media(max-width:991px){
.story-book{
width:320px;
height:420px;
}
.book-page{
padding:35px 20px;
}
.book-cover-front h4{
font-size:1.4rem;
}
}

.story-tag{
display:inline-block;
margin-bottom:18px;
padding:8px 18px;
border:1px solid rgba(168,112,52,.35);
color:#b98a52;
background:rgba(255,255,255,.02);
text-transform:uppercase;
letter-spacing:3px;
font-size:.75rem;
}

.story-section h2{
margin-bottom:28px;
text-transform:uppercase;
font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--dragon-gold);
    letter-spacing: 2px;
}

.story-section h3{
margin-bottom:28px;
text-transform:uppercase;
font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--dragon-gold);
    letter-spacing: 2px;
}

.story-section p{
color:rgba(228,228,228,.56);
font-size:1.05rem;
line-height:2;
margin-bottom:22px;
max-width:560px;
}

.story-section text{
color:#212529;
font-size:1.05rem;
line-height:1;
margin-bottom:22px;
max-width:560px;
}

.story-actions{
/*display:flex;*/
gap:18px;
margin-top:45px;
flex-wrap:wrap;
}

@media(max-width:991px){
.story-section{
padding:90px 0;
}
.story-section h2{
font-size:2.8rem;
}
.story-game-box{
transform:none;
}
.story-game-box img{
min-height:auto;
}
}

/* ECONOMY SECTION */
.economy-section{
padding:120px 0;
background:#050505;
position:relative;
overflow:hidden;
}
.economy-panel{
display:grid;
grid-template-columns: 420px 1fr;
width:100%;
max-width:960px;
background:rgba(12,15,24,.92);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 40px rgba(0,0,0,.45);
border-radius:0px;
overflow:hidden;
margin:50px auto 0;
}
.economy-sidebar{
border-right:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg, rgba(23,28,40,.96), rgba(10,12,20,.98));
}
.economy-item{
display:flex;
align-items:center;
gap:18px;
padding:22px;
cursor:pointer;
transition:.3s ease;
border-bottom:0px solid rgba(255,255,255,.05);
background-image: linear-gradient(180deg, rgba(28, 28, 28, 0.2), rgba(10, 10, 10, 0.2)), url(shadow.png);
box-shadow:inset 0 0 18px rgb(146 146 146 / 8%);
}
.economy-item.active{
/*background-image:linear-gradient(180deg, rgba(52,35,12,.85), rgba(12,10,10,.92)),
url(gold.png);*/
}
/*.economy-item:hover,.economy-item.active{
background:linear-gradient(90deg, rgb(152 0 31 / 95%), rgb(36 8 15 / 95%));
transform:translateX(6px);
}*/
.economy-item img{
width:82px;
/*height:82px;*/
object-fit:cover;
/*border-radius:10px;*/
/*border:1px solid rgba(255,255,255,.2);*/
/*background:#161b27;*/
}
.economy-item h4{
color: #f0e6d2;
font-size:1.15rem;
margin-bottom:6px;
/*font-family:'Cinzel',serif;*/
}
.economy-item p,.economy-content p{
color:#b8c0d4;
margin:0;
}
.economy-preview{
position:relative;
background-image: url("shadow.png");
background-size:cover;
}
.economy-image{
height:300px;
background-size:cover;
background-position:center;
position:relative;
transition:.4s ease;
}
.economy-image-overlay{
position:absolute;
inset:0;
}
.economy-badge{
position:absolute;
top:24px;
right:24px;
background:#5baa1a;
color:#fff;
padding:10px 18px;
border-radius:8px;
z-index:2;
font-weight:600;
}
.economy-content{
padding:38px;
position:relative;
margin-top:-300px;
z-index:2;
}
.economy-content h3{
font-size:2.3rem;
color: #f0e6d2;
margin-bottom:20px;
/*font-family:'Cinzel',serif;*/
/*text-transform:uppercase;*/
}
.economy-stats{
display:flex;
gap:18px;
margin-top:30px;
flex-wrap:wrap;
}
.economy-stats div{
background:rgba(255,255,255,.04);
padding:18px 24px;
border-radius:14px;
border:1px solid rgba(255,255,255,.06);
min-width:160px;
}
.economy-stats strong{
display:block;
font-size:1.8rem;
color:#fff;
}
.economy-stats span{
color:#9ca6bf;
font-size:.9rem;
}
@media(max-width:991px){
.economy-panel{grid-template-columns:1fr;}
.economy-sidebar{border-right:none;border-bottom:1px solid rgba(255,255,255,.06);}
.economy-content{margin-top:0;}
.economy-image{height:0px;}
}


.economy-template{
 display:none;
}

.economy-description-body ul{
 margin:12px 0 0 18px;
 padding:0;
 color: #b8c0d4;
}

.economy-inline-media{
 display:flex;
 align-items:center;
 gap:14px;
 margin-top:16px;
 padding:12px;
 border:1px solid rgba(255,215,130,.15);
 background:rgba(0,0,0,.25);
 border-radius:14px;
}

.economy-inline-media img{
 width:42px;
 height:42px;
 object-fit:contain;
 filter:drop-shadow(0 0 8px rgba(255,180,80,.35));
}


/* --- ECONOMY PANEL REWORK --- */
.economy-panel{
backdrop-filter: blur(10px);
border:1px solid rgba(201,166,107,.15);
box-shadow:
0 0 40px rgba(0,0,0,.55),
0 0 18px rgba(201,166,107,.08);
}

.economy-preview{
background-image: linear-gradient(180deg, rgba(28, 28, 28, 0.2), rgba(10, 10, 10, 0.2)), url(shadow.png);
}

.economy-item{
position:relative;
overflow:hidden;
}

.economy-item::before{
content:'';
position:absolute;
left:0;
top:0;
width:3px;
height:100%;
background:linear-gradient(to bottom, transparent, rgba(255,185,90,.9), transparent);
opacity:0;
transition:.35s ease;
}

.economy-item:hover{
transform:translateX(0px);
background-image:
linear-gradient(180deg, rgba(52,35,12,.35), rgba(12,10,10,.35)),
url(shadow.png);
box-shadow:inset 0 0 18px rgba(255,180,70,.08);
}

.economy-item:hover::before,
.economy-item.active::before{
opacity:1;
}

.economy-item.active{
box-shadow:
transform:translateX(0px);
background-image:
linear-gradient(180deg, rgba(52,35,12,.35), rgba(12,10,10,.35)),
url(shadow.png);
box-shadow:inset 0 0 18px rgba(255,180,70,.08);
}

.economy-content h3{
letter-spacing:2px;
text-shadow:0 0 18px rgba(255,170,70,.18);
}

.economy-description-body p,
.economy-description-body li{
line-height:1.8;
}

/* --- MOBILE COLLAPSIBLE VERSION --- */
.economy-mobile-content{
display:none;
overflow:hidden;
max-height:0;
transition:max-height .45s ease, padding .35s ease;
background:
linear-gradient(180deg, rgba(10,10,10,.95), rgba(20,14,10,.98));
border-top:1px solid rgba(255,255,255,.06);
}

.economy-mobile-content.open{
display:block;
max-height:600px;
padding:20px;
}

.economy-mobile-content h3{
font-size:1.5rem;
margin-bottom:14px;
color:#f0e6d2;
text-transform:uppercase;
letter-spacing:1px;
}

.economy-mobile-content p,
.economy-mobile-content li{
color:#b8c0d4;
}

.economy-item-toggle{
position:relative;
margin-left:auto;
width:34px;
height:34px;
transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
flex-shrink:0;
overflow:hidden;
}

.economy-item-toggle::before,
.economy-item-toggle::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
background:linear-gradient(90deg,#a78a39,#6b502c);
border-radius:999px;
transform:translate(-50%,-50%);
transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, box-shadow .35s ease;
box-shadow:0 0 10px rgba(233,194,124,.25);
}

.economy-item-toggle::after{
transform:translate(-50%,-50%) rotate(90deg);
}

.economy-item.active .economy-item-toggle{
transform:rotate(180deg);
}

.economy-item.active .economy-item-toggle::before{
transform:translate(-50%,-50%) rotate(45deg) scaleX(1.1);
}

.economy-item.active .economy-item-toggle::after{
transform:translate(-50%,-50%) rotate(-45deg) scaleX(1.1);
}

@media(max-width:991px){

.economy-panel{
border-radius:0px;
overflow:hidden;
}

.economy-preview{
display:none;
}

.economy-item{
flex-wrap:wrap;
padding:18px;
}

.economy-item img{
width:64px;
}

.economy-item h4{
font-size:1.05rem;
}

.economy-item p{
font-size:.92rem;
}

.economy-item:hover{
transform:none;
}

}


/* --- MOBILE CONTENT BELOW ITEM --- */
.economy-mobile-content{
width:100%;
margin-top:-2px;
border-left:1px solid rgba(255,255,255,.06);
border-right:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
}


/* --- ACCORDION FIX --- */

.economy-mobile-content{
display:block;
max-height:0;
overflow:hidden;
padding:0 20px;
transition:
max-height .45s ease,
opacity .35s ease,
padding .35s ease;
background-image: linear-gradient(180deg, rgba(28, 28, 28, 0.2), rgba(10, 10, 10, 0.2)), url(shadow.png);
border-left:1px solid rgba(255,255,255,.06);
border-right:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
}

.economy-mobile-content.open{
opacity:1;
max-height:800px;
padding:20px;
}

.economy-mobile-inner{
animation:economyFade .35s ease;
}

@keyframes economyFade{
from{
opacity:0;
transform:translateY(-4px);
}
to{
opacity:0;
transform:translateY(0);
}
}


/* --- BATTLE SECTION --- */
.battle-section{
padding:120px 0;
background:#050505;
position:relative;
overflow:hidden;
}

.battle-board{
display:flex;
flex-direction:column;
gap:0px;
margin-top:0px;
}

.battle-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:44px;
padding:28px 34px;
/*border:1px solid rgba(169,86,255,.2);
background:linear-gradient(90deg,rgba(22,10,36,.96),rgba(40,12,58,.88));
box-shadow:0 0 35px rgba(111,0,255,.16);*/
position:relative;
margin-top:30px;
}

.battle-card::before{
content:'';
position:absolute;
inset:0;
/*background: linear-gradient(90deg, transparent, #0c0c0c, transparent);
border-bottom: 1px solid #ffbf00;*/
pointer-events:none;
}

.battle-side{
display:flex;
align-items:center;
gap:22px;
width:42%;
position:relative;
/*background: linear-gradient(90deg, transparent, #0c0c0c, transparent);*/
}

.battle-side img{
width:110px;
height:110px;
object-fit:contain;
filter:drop-shadow(0 0 12px rgba(255,255,255,.15));
}

.battle-side h3{
color:#fff;
font-size:2rem;
text-transform:uppercase;
margin-bottom:8px;
}

.battle-side p{
margin:0;
color:rgba(255,255,255,.72);
letter-spacing:1px;
}

.battle-role{
position: absolute;
    top: -80px;
    left: 0;
    padding: 6px 14px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #c19100;
    border: 1px solid #ffbf00;
    color: #000000;
}

.battle-center{
width:16%;
display:flex;
align-items:center;
justify-content:center;
}

.battle-center img{
max-width:90px;
filter: drop-shadow(0 0 12px rgba(255, 255, 255, .15));
animation:battlePulse 2.6s infinite ease-in-out;
}

.defender{
justify-content:flex-end;
text-align:right;
}

.defender img{
order:2;
}

.defender .battle-role{
left:auto;
right:0;
}

@keyframes battlePulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.08);}
}

@media(max-width:991px){
.battle-card{
flex-direction:column;
padding:28px 20px;
}
.battle-side,.battle-center{
width:100%;
justify-content:center;
text-align:center;
}
.defender{
justify-content:center;
}
.battle-role{
position:relative;
top:auto;
left:auto;
right:auto;
margin-bottom:12px;
display:inline-block;
}
.battle-side{
flex-direction:column;
}

.battle-side img{
order:2;
margin-top:10px;
}

.battle-side .battle-role{
order:0;
}
}



/* ===== Battle Role Variants ===== */

.attacker-role{
background: linear-gradient(135deg,#a30000,#ff3c00);
border:1px solid #ff7b39;
color:#fff2df;
box-shadow:0 0 18px rgba(255,80,0,.35);
}

.defender-role{
background: linear-gradient(135deg,#11304f,#3a7bc1);
border:1px solid #7eb6ff;
color:#ecf5ff;
box-shadow:0 0 18px rgba(80,150,255,.35);
}

/* ===== Battle Status ===== */

.battle-status{
position:absolute;
top:80px;
left:50%;
transform:translateX(-50%);
padding:10px 22px;
border-radius:0px;
font-size:.78rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
z-index:5;
backdrop-filter:blur(6px);
}

.status-victory{
text-shadow: rgb(17 167 23 / 90%) 0px 0px 36px;
/*border:1px solid #71ff93;*/
color:#ffe9b0;
/*box-shadow:0 0 25px rgba(50,255,120,.25);*/
}
.status-defeat{
text-shadow: rgba(255,0,0,0.9) 0px 0px 36px;
/*border:1px solid #71ff93;*/
color:#ffe9b0;
/*box-shadow:0 0 25px rgba(50,255,120,.25);*/
}

.status-progress{
/*background:rgba(86,55,0,.88);*/
/*border:1px solid #ffbf47;*/
color:#ffe9b0;
/*box-shadow:0 0 25px rgba(255,191,71,.25);*/
}

/* ===== Winner / Loser Visuals ===== */

.battle-side.winner{
/*filter:drop-shadow(0 0 20px rgba(92,255,120,.22));*/
}

.battle-side.loser{
/*opacity:.72;
filter:grayscale(.25);*/
}

.battle-side.winner h3{
color:#98ffb0;
}

.battle-side.loser h3{
color:#ff9d9d;
}

@media(max-width:991px){

.battle-status{
position:relative;
top:auto;
left:auto;
transform:none;
margin-bottom:18px;
display:inline-flex;
align-self:center;
}

}


/* ===== Enhanced Dark Fantasy Battle Styling ===== */

.battle-card{
overflow:hidden;
}

.attacker-lose{
background: linear-gradient(90deg, rgb(120 35 35 / 18%), transparent);
border-left: 2px solid rgb(255 0 0 / 35%);
padding-left:18px;
height:300px;
transition: .35s ease;
}

.attacker-lose::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255 0 0 / 35%), transparent);
    opacity: 0;
    transition: .35s ease;
}

.attacker-lose:hover{
transform:translateX(0px);
background:linear-gradient(90deg, rgb(255 0 0 / 18%), transparent);
}

.attacker-lose:hover::before,
.attacker-lose.active::before{
opacity:1;
}

.attacker-win{
background: linear-gradient(90deg, rgb(10 120 71 / 18%), transparent);
border-left: 2px solid rgb(0 255 176 / 35%);
padding-left:18px;
height:300px;
}

.attacker-win::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0 255 176 / 35%), transparent);
    opacity: 0;
    transition: .35s ease;
}

.attacker-win:hover{
transform:translateX(0px);
background:linear-gradient(90deg, rgb(28 218 133 / 18%), transparent);
}

.attacker-win:hover::before,
.attacker-win.active::before{
opacity:1;
}

.defender-lose{
background: linear-gradient(270deg, rgb(120 35 35 / 18%), transparent);
border-right: 2px solid rgb(255 0 0 / 35%);
padding-right:18px;
height:300px;
}

.defender-lose::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255 0 0 / 35%), transparent);
    opacity: 0;
    transition: .35s ease;
}

.defender-lose:hover{
transform:translateX(0px);
background:linear-gradient(270deg, rgb(255 0 0 / 18%), transparent);
transition: .35s ease;
}

.defender-lose:hover::before,
.defender-lose.active::before{
opacity:1;
}

.defender-win{
background: linear-gradient(270deg, rgb(10 120 71 / 18%), transparent);
border-right: 2px solid rgb(0 255 176 / 35%);
padding-right:18px;
height:300px;
}

.defender-win::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0 255 176 / 35%), transparent);
    opacity: 0;
    transition: .35s ease;
}

.defender-win:hover{
transform:translateX(0px);
background:linear-gradient(270deg, rgb(28 218 133 / 18%), transparent);
transition: .35s ease;
}

.defender-win:hover::before,
.defender-win.active::before{
opacity:1;
}

.war-side-a{
background: linear-gradient(90deg, rgb(119 119 119 / 18%), transparent);
border-left: 2px solid rgb(140 140 140 / 35%);
padding-right:18px;
height:300px;
}

.war-side-a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(119 119 119 / 18%), transparent);
    opacity: 0;
    transition: .35s ease;
}

.war-side-a:hover{
transform:translateX(0px);
background:linear-gradient(90deg, rgb(90 90 90 / 28%), transparent);
transition: .35s ease;
}

.war-side-a:hover::before,
.war-side-a.active::before{
opacity:1;
}

.war-side-b{
background: linear-gradient(270deg, rgb(119 119 119 / 18%), transparent);
border-right: 2px solid rgb(140 140 140 / 35%);
padding-left:18px;
height:300px;
}

.war-side-b::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(119 119 119 / 18%), transparent);
    opacity: 0;
    transition: .35s ease;
}

.war-side-b:hover{
transform:translateX(0px);
background:linear-gradient(270deg, rgb(90 90 90 / 28%), transparent);
transition: .35s ease;
}

.war-side-b:hover::before,
.war-side-b.active::before{
opacity:1;
}

.attacker-role{
clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
}

.defender-role{
clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
}

.battle-outcome{
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
}

.victory-text{
color:#9fffac !important;
text-shadow:0 0 10px rgba(120,255,120,.4);
}

.defeat-text{
color:#ff9d9d !important;
text-shadow:0 0 10px rgba(255,120,120,.25);
}

.progress-text{
color:#ffd67a !important;
text-shadow:0 0 10px rgba(255,180,0,.2);
}



/* DARK FANTASY SCROLL CTA */
.fantasy-scroll-controls{
position:fixed;
right:18px;
bottom:18px;
display:flex;
flex-direction:column;
gap:8px;
z-index:9999;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
margin-bottom:17%;
}

.fantasy-scroll-controls.visible{
opacity:1;
pointer-events:auto;
}

.fantasy-scroll-btn{
width:34px;
height:34px;
border-radius:0px;
background:transparent;
border:1px solid rgba(201,166,107,.2);
background:rgba(255,255,255,.03);
color:#c9a66b;
font-size:14px;
cursor:pointer;
backdrop-filter:none;
transition:.25s ease;
display:flex;
align-items:center;
justify-content:center;
box-shadow:none;
backdrop-filter:blur(10px);
}

.fantasy-scroll-btn:hover{
border-color:rgba(201,166,107,.5);
color:#ffffff;
transform:translateY(-0px);
/*transform:translateY(-0px) scale(1.1);*/
box-shadow:0 0 35px rgba(255,140,0,.45), inset 0 0 20px rgba(255,215,0,.2);
backdrop-filter:blur(10px);
}


.fantasy-scroll-controls{
position:fixed;
right:28px;
bottom:32px;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:12px;
pointer-events:none;
opacity:0;
visibility:hidden;
transform:translateY(30px);
transition:all .35s ease;
z-index:9999;
}

.fantasy-scroll-controls.visible{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.fantasy-scroll-btn span{
filter:drop-shadow(0 0 10px rgba(255,180,0,.55));
}

@media(max-width:768px){
.fantasy-scroll-controls{
right:16px;
bottom:18px;
}

.fantasy-scroll-btn{
width:56px;
height:56px;
font-size:24px;
}
}


/* =========================================
RESPONSIVE HERO CAPTIONS POSITIONING
Dark Fantasy Responsive Layout
========================================= */

.captions{
position:relative;
z-index:5;
}

/* Bardzo małe telefony */
@media (max-width:480px){

.hero-section{
display:flex;
align-items:flex-start;
}

.captions{
margin-bottom: 280px !important;
padding:0 20px;
}

.hero-title{
font-size:3rem;
}

.hero-description{
font-size:1rem;
line-height:1.5;
}

}

/* Telefony poziomo + tablety */
@media (min-width:481px) and (max-width:768px){

.hero-section{
display:flex;
align-items:flex-start;
}

.captions{
margin-bottom:280px !important;
padding:0 30px;
}

.hero-title{
font-size:4rem;
}

}

/* Tablety poziomo / małe laptopy */
@media (min-width:769px) and (max-width:992px){

.captions{
margin-bottom:300px !important;
}

.hero-title{
font-size:4rem;
}

}

/* Laptopy / desktop */
@media (min-width:993px) and (max-width:1200px){

.captions{
margin-bottom:0px !important;
}

}

/* Duże monitory */
@media (min-width:1201px){

.captions{
margin-bottom:0px !important;
}

}


/* PRELOADER */
.preload-active{
overflow:hidden;
height:100vh;
}

.dragon-preloader{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circle at center, rgba(0,0,0,.1), rgba(0,0,0,.99) 0%);
z-index:100000;
overflow:hidden;
transition:opacity 1s ease, visibility 1s ease;
}

.dragon-preloader.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.preloader-bg{
position:absolute;
inset:-20%;
filter:blur(50px);
animation:preloaderRotate 12s linear infinite;
}

.preloader-content{
position:relative;
text-align:center;
width:min(420px, 90vw);
padding:40px 20px;
}

.preloader-logo{
width:min(280px, 80vw);
filter:drop-shadow(0 0 18px rgba(120,0,0,.55));
animation:logoPulse 2.8s ease-in-out infinite;
position:relative;
z-index:2;
}

.preloader-runes{
position:absolute;
width:320px;
height:320px;
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
animation:preloaderRotate 14s linear infinite;
}

.preloader-runes::before,
.preloader-runes::after{
content:'';
position:absolute;
inset:14px;
border-radius:50%;
}

.preloader-runes::after{
inset:36px;
animation:preloaderRotateReverse 10s linear infinite;
}

.preloader-flame{
position:absolute;
left:50%;
top:48%;
width:180px;
height:180px;
transform:translate(-50%,-50%);
filter:blur(30px);
animation:flameFlicker 2s ease-in-out infinite;
}

.preloader-loading-wrap{
margin-top:30px;
height:6px;
border-radius:30px;
overflow:hidden;
background:rgba(255,255,255,.08);
border:1px solid rgba(201,166,107,.18);
box-shadow:0 0 18px rgba(0,0,0,.5);
}

.preloader-loading-bar{
height:100%;
width:0;
background:linear-gradient(90deg, #3b0909, #ff3434, #f7d48f);
box-shadow:0 0 18px rgba(255,60,60,.7);
animation:loadingBar 3.8s ease forwards;
}

.preloader-text{
margin-top:18px;
letter-spacing:4px;
text-transform:uppercase;
font-size:.82rem;
color:#d7bc8b;
animation:textPulse 1.6s ease-in-out infinite;
}

@keyframes loadingBar{
0%{width:0;}
100%{width:100%;}
}

@keyframes logoPulse{
0%,100%{transform:scale(1); filter:drop-shadow(0 0 18px rgba(255,0,0,.45));}
50%{transform:scale(1.04); filter:drop-shadow(0 0 28px rgba(120,0,0,.8));}
}

@keyframes flameFlicker{
0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1);}
50%{opacity:.9; transform:translate(-50%,-50%) scale(1.2);}
}

@keyframes textPulse{
0%,100%{opacity:.5;}
50%{opacity:1;}
}

@keyframes preloaderRotate{
from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes preloaderRotateReverse{
from{transform:rotate(360deg);}
to{transform:rotate(0deg);}
}


/* Subtle 3D dark fantasy hover perspective */
.race-showcase-card,
.tips-showcase-card,
.info-showcase-card {
    transform-style: preserve-3d;
    perspective: 1400px;
    will-change: transform;
}

.race-showcase-card::before,
.tips-showcase-card::before,
.info-showcase-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,190,110,0.08), transparent 38%, transparent 65%, rgba(0,0,0,0.22));
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.race-showcase-card:hover::before,
.tips-showcase-card:hover::before,
.info-showcase-card:hover::before {
    opacity: 1;
}


/* Individual race showcase backgrounds */
.race-bg-elf {
    --race-card-bg: url("elf-shadow.png");
}

.race-bg-djinn {
    --race-card-bg: url("djinn-shadow.png");
}

.race-bg-dwarf {
    --race-card-bg: url("dwarf-shadow.png");
}

.race-bg-ent {
    --race-card-bg: url("ent-shadow.png");
}

.race-bg-giant {
    --race-card-bg: url("giant-shadow.png");
}

.race-bg-hobbit {
    --race-card-bg: url("hobbit-shadow.png");
}

.race-bg-human {
    --race-card-bg: url("human-shadow.png");
}

.race-bg-necromant {
    --race-card-bg: url("necromant-shadow.png");
}

.race-bg-ork {
    --race-card-bg: url("ork-shadow.png");
}

.race-bg-vampire {
    --race-card-bg: url("vampire-shadow.png");
}

.race-bg-goblin {
    --race-card-bg: url("goblin-shadow.png");
}

.race-bg-insektoid {
    --race-card-bg: url("insektoid-shadow.png");
}



/* =========================
   BOOKS SECTION
========================= */

.books-section{
padding:140px 0;
position:relative;
background:#050505;
overflow:hidden;
}

.books-section::before{
content:'';
position:absolute;
inset:0;
background:
pointer-events:none;
}

.books-header{
text-align:center;
max-width:850px;
margin:0 auto 80px;
position:relative;
z-index:2;
}

.books-subtitle{
letter-spacing:4px;
text-transform:uppercase;
color:#b68a52;
font-size:.85rem;
}

.books-header h2{
font-family:'Cinzel',serif;
font-size:4rem;
margin:16px 0;
color:#f5e6c8;
text-shadow:0 0 30px rgba(255,140,0,.25);
}

.books-header p{
color:#bdb6aa;
font-size:1.05rem;
line-height:1.8;
}

.books-circle{
position:relative;
width:100%;
min-height:480px;
display:flex;
align-items:center;
justify-content:center;
}

/*.magic-core{
position:absolute;
width:260px;
height:260px;
border-radius:50%;
background:
radial-gradient(circle, rgba(255,120,0,.55), rgba(50,0,0,.05));
filter:blur(10px);
animation:corePulse 4s ease-in-out infinite;
box-shadow:0 0 80px rgba(255,120,0,.35);
}*/

.book-card{
position:static;
width:270px;
transition:transform .5s ease, filter .5s ease;
cursor:pointer;
filter:drop-shadow(0 0 25px rgba(0,0,0,.75));
}

.book-card img{
width:100%;
display:block;
animation:floating 5s ease-in-out infinite;
}

.book-card:hover{
z-index:5;
}

.book-card:nth-child(2){top:20px;left:50%;transform:translateX(-50%);}
.book-card:nth-child(3){top:170px;right:120px;}
.book-card:nth-child(4){bottom:80px;right:240px;}
.book-card:nth-child(5){bottom:80px;left:240px;}
.book-card:nth-child(6){top:170px;left:120px;}

.book-glow{
position:absolute;
inset:15%;
border-radius:50%;
filter:blur(45px);
opacity:.55;
z-index:-1;
}

.book-glow.dark{background:#7b2cff;}
.book-glow.ice{background:#8fd5ff;}
.book-glow.earth{background:#5dd45d;}
.book-glow.water{background:#4bc6ff;}
.book-glow.fire{background:#ff5b1f;}

.book-lore-panel{
margin-top:40px;
padding:40px;
border:1px solid rgba(201,166,107,.25);
background:rgba(10,10,10,.72);
backdrop-filter:blur(10px);
border-radius:28px;
max-width:850px;
margin-inline:auto;
text-align:center;
box-shadow:0 0 50px rgba(0,0,0,.4);
}

.book-lore-panel h3{
font-family:'Cinzel',serif;
font-size:2rem;
margin-bottom:14px;
color:#f5e6c8;
}

.book-lore-panel p{
color:#b8b0a6;
line-height:1.8;
margin:0;
}

@keyframes floating{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-14px);}
}

@keyframes corePulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.12);}
}

@media(max-width:991px){

.books-circle{
min-height:1200px;
}

.book-card{
width:220px;
}

.book-card:nth-child(2){
top:0;
left:50%;
transform:translateX(-50%);
}

.book-card:nth-child(3){
top:220px;
right:40px;
}

.book-card:nth-child(4){
bottom:260px;
right:80px;
}

.book-card:nth-child(5){
bottom:260px;
left:80px;
}

.book-card:nth-child(6){
top:220px;
left:40px;
}
}

@media(max-width:767px){

.books-header h2{
font-size:2.7rem;
}

.books-circle{
display:grid;
grid-template-columns:1fr;
gap:30px;
min-height:auto;
padding-top:40px;
}

.magic-core{
display:none;
}

.book-card{
position:relative !important;
inset:auto !important;
width:100%;
max-width:290px;
margin-inline:auto;
}
}

/* Correct hover animation for Mrok book card */
.book-card[data-element="Mrok"]{
    transform: translateX(0%);
	left: auto !important;
    right: auto !important;
}

.book-card[data-element="Mrok"]:hover{
    transform: translateX(0%) scale(1.1) translateY(0);
	left: auto !important;
    right: auto !important;
}


/* Grid layout for all dark fantasy books */
.books-container .book-card{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform-origin: center center;
}

.books-container .book-card:hover{
    z-index: 20;
}