*{

margin:0;
padding:0;
box-sizing:border-box;

}


}

/* ==========================
   GLOBAL TYPOGRAPHY SYSTEM
========================== */


body{

font-family:"Dosis", sans-serif;

}



h1{

font-family:"Cinzel Decorative", serif;

}



h2{

font-family:"Cinzel Decorative", serif;

font-size:42px;

letter-spacing:4px;

}



h3{

font-family:"Cinzel Decorative", serif;

font-size:24px;

letter-spacing:2px;

}



p{

font-family:"Dosis", sans-serif;

font-size:18px;

line-height:1.6;

letter-spacing:.5px;

color:rgba(217,227,234,.75);

}




.navbar{


position:fixed;

top:0;

width:100%;

z-index:100;


display:flex;

justify-content:space-between;

align-items:center;


padding:30px 70px;


background:

rgba(0,0,0,.35);


backdrop-filter:blur(20px);



}




.logo{


font-size:30px;

letter-spacing:8px;

color:#d9e3ea;


}



nav a{


color:#d9e3ea;

text-decoration:none;

margin-left:35px;

font-size:14px;

text-transform:uppercase;


transition:.4s;


}



nav a:hover{


color:#b7ff00;


}


.navbar a,
button{


font-family:
"Montserrat",
sans-serif;


font-weight:500;


letter-spacing:3px;


}





/* ================================
   GLOBAL FANTASY WORLD BACKGROUND
================================ */


.world-background{


position:fixed;

inset:0;

z-index:-1;

overflow:hidden;


background:#05080b;


}




/* CASTLE IMAGE */

.castle-layer{


position:absolute;

inset:0;


background:


linear-gradient(

rgba(5,8,11,.45),

rgba(5,8,11,.85)

),


url("../assets/images/castle.png");



background-size:cover;

background-position:center;


animation:

castleMove 30s infinite alternate;


}



@keyframes castleMove{


from{

transform:scale(1);

}


to{

transform:scale(1.08);

}


}









.fog-layer{


position:absolute;

inset:-100px;


background:

url("../assets/images/fog.png");


background-size:cover;


opacity:.22;


animation:

fogAnimation 35s linear infinite;


}




@keyframes fogAnimation{


0%{

transform:translateX(-100px);

}


50%{

transform:translateX(100px);

}


100%{

transform:translateX(-100px);

}


}








.aurora-layer{


position:absolute;


width:700px;

height:700px;


top:-200px;

left:30%;



background:#b7ff00;


filter:blur(180px);


opacity:.25;



animation:

auroraMove 12s infinite alternate;


}




@keyframes auroraMove{


from{

transform:translateX(-200px);


}



to{

transform:translateX(200px);


}


}







.aurora{


position:absolute;


width:700px;

height:700px;


background:#b7ff00;


filter:blur(180px);


opacity:.35;


animation:

magic 8s infinite alternate;


}





@keyframes magic{


from{

transform:translateX(-150px);

}


to{

transform:translateX(150px);

}



}











.author{


letter-spacing:8px;

color:#a7e8ff;

margin-bottom:30px;


}









.hero{


min-height:100vh;


display:flex;

align-items:center;

justify-content:center;


position:relative;


}



.hero-content{


position:relative;


z-index:10;


max-width:1000px;


text-align:center;


animation:

heroFloat 8s infinite alternate;


}



@keyframes heroFloat{


from{

transform:translateY(0);


}



to{

transform:translateY(-15px);


}


}



.hero h1{


font-family:"Cinzel Decorative", serif;


font-size:90px;


line-height:1.05;


letter-spacing:8px;


color:#D9E3EA;



text-shadow:

0 0 15px rgba(167,232,255,.8),
0 0 40px rgba(167,232,255,.4);



}

.hero h1 span{


color:#ffffff;


text-shadow:

0 0 20px rgba(167,232,255,.9);


}





.description{


font-size:25px;

max-width:600px;

margin:40px auto;


}




/* ===========================
 MAGIC BUTTON
=========================== */


button{


position:relative;


padding:18px 55px;


background:

rgba(0,0,0,.55);


color:#d9e3ea;



border:

1px solid #b7ff00;



font-family:"Cinzel",serif;


letter-spacing:4px;


text-transform:uppercase;


cursor:pointer;


overflow:hidden;



transition:.5s;



}





button::before{


content:"";


position:absolute;


top:0;

left:-100%;


width:100%;

height:100%;



background:

linear-gradient(

120deg,

transparent,

rgba(183,255,0,.4),

transparent

);



transition:.7s;



}





button:hover::before{


left:100%;


}





button:hover{


box-shadow:


0 0 30px #b7ff00;


transform:translateY(-5px);


}





button:hover{


box-shadow:

0 0 40px #b7ff00;


transform:scale(1.1);


}





.section,
.books-preview,
.world,
.news{


position:relative;


background:

rgba(5,8,12,.35);



backdrop-filter:

blur(5px);


padding:120px 10%;



}



.section h2,
.books-preview h2,
.world h2,
.news h2{


font-family:"Cinzel",serif;


font-size:45px;


letter-spacing:5px;


color:#d9e3ea;



text-shadow:

0 0 25px rgba(167,232,255,.4);


margin-bottom:25px;


}






.book-card{


margin-top:50px;

display:flex;

justify-content:center;

gap:60px;

align-items:center;


}



.book-card img{


width:300px;


transition:.8s;


transform-style:preserve-3d;


}



.book-card img:hover{


transform:

perspective(900px)
rotateY(-25deg)
translateY(-20px);


filter:


drop-shadow(
0 0 50px #b7ff00
);


}



.cards{


display:grid;


grid-template-columns:

repeat(3,1fr);



gap:35px;



max-width:1200px;


margin:60px auto 0;


}


.card{


padding:40px 35px;


background:

rgba(0,0,0,.45);



border:

1px solid rgba(167,232,255,.2);



border-radius:4px;



min-height:260px;



display:flex;


flex-direction:column;


justify-content:center;



text-align:center;



transition:.5s;


}

.card h3{


font-size:26px;


margin-bottom:18px;


color:#d9e3ea;


}




.card:hover{


border-color:#b7ff00;


transform:translateY(-15px);


}





footer{


padding:40px;

text-align:center;

background:#050607;


}

.fog{


position:absolute;


inset:-50px;


background:


url("../assets/images/fog.png");


background-size:cover;


opacity:.15;


animation:

fogMove 30s linear infinite;


z-index:1;


}




@keyframes fogMove{


0%{

transform:translateX(-100px);

}


50%{

transform:translateX(100px);

}


100%{

transform:translateX(-100px);

}



}.cursor{


width:25px;

height:25px;


border-radius:50%;


border:

2px solid #b7ff00;


position:fixed;


pointer-events:none;


z-index:999;


transform:translate(-50%,-50%);


box-shadow:

0 0 20px #b7ff00;


}

#particles{


position:absolute;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:5;


}




.particle{


position:absolute;


width:5px;

height:5px;


background:#a7e8ff;


border-radius:50%;


box-shadow:

0 0 15px #a7e8ff,
0 0 30px #b7ff00;



animation:

floatParticles linear infinite;


}




@keyframes floatParticles{


0%{


transform:

translateY(100vh)
scale(0);


opacity:0;


}


30%{


opacity:1;


}



100%{


transform:

translateY(-20vh)
scale(1);


opacity:0;


}



}


/* ===========================
   PREMIUM GLASS NAVBAR
=========================== */


.navbar{


position:fixed;

top:0;

left:0;

width:100%;


padding:25px 70px;


display:flex;

justify-content:space-between;

align-items:center;


z-index:100;



background:

linear-gradient(

90deg,

rgba(0,0,0,.65),

rgba(10,20,25,.35)

);



backdrop-filter:blur(18px);



border-bottom:

1px solid rgba(167,232,255,.15);



}





.logo{


font-family:"Cinzel",serif;


font-size:30px;


letter-spacing:8px;


color:#d9e3ea;


text-shadow:

0 0 20px rgba(167,232,255,.5);



}





.nav-links{


display:flex;

gap:40px;


}




.nav-links a{


position:relative;


text-decoration:none;


color:#d9e3ea;


font-family:"Cinzel",serif;


font-size:13px;


letter-spacing:3px;


text-transform:uppercase;


transition:.5s;


}



.nav-links a::after{


content:"";


position:absolute;


bottom:-10px;


left:50%;


width:0;


height:1px;


background:#b7ff00;


transition:.5s;


transform:translateX(-50%);


}



.nav-links a:hover{


color:#b7ff00;


}




.nav-links a:hover::after{


width:100%;


}



.logo{


font-size:30px;

letter-spacing:8px;

color:#d9e3ea;


}




.nav-links{


display:flex;

gap:35px;


}




.nav-links a{


color:#d9e3ea;

text-decoration:none;


font-size:14px;


text-transform:uppercase;


letter-spacing:2px;


transition:.4s;


}



.nav-links a:hover{


color:#b7ff00;


}




.menu-toggle{


display:none;

cursor:pointer;


}



.menu-toggle span{


display:block;

width:30px;

height:2px;


background:#b7ff00;


margin:7px;


transition:.4s;


}


@media(max-width:900px){



.navbar{


padding:20px 25px;


}




.logo{


font-size:22px;

letter-spacing:5px;


}



.menu-toggle{


display:block;


}



.nav-links{


position:absolute;


top:80px;

left:0;


width:100%;


background:

rgba(5,7,10,.95);


backdrop-filter:blur(20px);



display:flex;


flex-direction:column;


align-items:center;


gap:25px;


padding:40px 0;



transform:translateY(-150%);


transition:.5s;


}



.nav-links.active{


transform:translateY(0);


}




.nav-links a{


font-size:16px;


}





.hero h1{


font-size:55px;


}



.description{


font-size:20px;

padding:0 20px;


}




}

.menu-toggle.open span:nth-child(1){

transform:

rotate(45deg)
translate(6px,6px);

}



.menu-toggle.open span:nth-child(2){

opacity:0;

}



.menu-toggle.open span:nth-child(3){

transform:

rotate(-45deg)
translate(7px,-7px);

}


.rune-line{


width:180px;


height:2px;


margin:30px auto;


background:

linear-gradient(

90deg,

transparent,

#b7ff00,

transparent

);



position:relative;


}




.rune-line::after{


content:"✦";


position:absolute;


left:50%;


top:-15px;


transform:translateX(-50%);



color:#a7e8ff;


font-size:25px;


text-shadow:

0 0 20px #a7e8ff;


}


.book-showcase{


display:flex;


align-items:center;


justify-content:center;


gap:100px;


}



.book-image img{


width:350px;


transition:1s;


filter:

drop-shadow(
0 0 40px black
);



}




.book-image img:hover{


transform:

perspective(1000px)
rotateY(-25deg)
translateY(-20px);



filter:

drop-shadow(
0 0 60px #b7ff00
);



}





.book-info{


max-width:600px;


text-align:center;


display:flex;


flex-direction:column;


align-items:center;


}

.book-info .small-title{


text-align:center;


font-family:"Montserrat", sans-serif;


font-size:13px;


letter-spacing:5px;


color:#A7E8FF;


margin-bottom:20px;


}

.book-info h2{


text-align:center;


font-family:"Cinzel Decorative",serif;


color:#D9E3EA;


margin-bottom:25px;


}

.book-info p{


text-align:center;


max-width:550px;


}





.small-title{


color:#a7e8ff;


letter-spacing:6px;


}

.card{


padding:40px 35px;


background:

rgba(0,0,0,.45);



border:

1px solid rgba(167,232,255,.2);



border-radius:4px;



min-height:260px;



display:flex;


flex-direction:column;


justify-content:center;



text-align:center;



transition:.5s;


}



.card:hover{


transform:

translateY(-20px);



border-color:#b7ff00;



box-shadow:


0 0 40px rgba(183,255,0,.25);



}

html{

scroll-behavior:auto;

}



section{

scroll-margin-top:100px;

}


/* ==========================
   PREMIUM FANTASY TEXT STYLE
========================== */

/* ==========================
   FANTASY TYPOGRAPHY SYSTEM
========================== */

body{

font-family:
"Cormorant Garamond",
serif;

}






.section p,
.books-preview p,
.world p,
.news p{


font-size:24px;


max-width:800px;


}


.card{


position:relative;


background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(0,0,0,.55)

);



border:

1px solid rgba(167,232,255,.25);



padding:50px 35px;



backdrop-filter:

blur(20px);



overflow:hidden;



transition:.6s;


}



.card::before{


content:"";


position:absolute;


top:0;

left:-100%;


width:100%;

height:2px;


background:#b7ff00;


transition:.6s;


}



.card:hover::before{


left:0;


}



.card:hover{


transform:

translateY(-15px);



border-color:#b7ff00;


box-shadow:


0 0 40px rgba(183,255,0,.2);


}

.card h3{


font-size:26px;


margin-bottom:18px;


color:#d9e3ea;


}


.card p{


font-size:17px;


line-height:1.7;


max-width:280px;


margin:auto;


color:

rgba(217,227,234,.7);


}



@media(max-width:900px){


.hero h1{

font-size:45px;

letter-spacing:4px;


}


}



@media(max-width:900px){


.cards{


grid-template-columns:1fr;


gap:25px;


}



.card{


padding:35px 25px;


min-height:auto;


}



.card h3{


font-size:22px;


}



.card p{


font-size:16px;


max-width:300px;


}



}


/* ==========================
AUTHOR SECTION
========================== */


.author-section{


padding:120px 10%;


}



.author-section h2{


text-align:center;


}




.author-showcase{


display:flex;


align-items:center;


gap:80px;


max-width:1200px;


margin:70px auto 0;


}




.author-image{

width:280px;

height:280px;

flex-shrink:0;

border-radius:50%;

object-fit:cover;

object-position:center;

}




.author-image img{

width:260px;

height:330px;

object-fit:contain;

object-position:center;

border:1px solid rgba(167,232,255,.3);

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

background:rgba(0,0,0,.2);

}



.author-content{


flex:1;


}

.author-section h2{


color:#D9E3EA;


font-family:"Cinzel Decorative", serif;


text-align:center;


font-size:42px;


letter-spacing:5px;


text-shadow:

0 0 25px rgba(167,232,255,.6);


}



.author-content h3{


color:#FFFFFF;


font-family:"Cinzel Decorative", serif;


font-size:42px;


letter-spacing:4px;


text-shadow:

0 0 30px rgba(167,232,255,.7);


}


.author-content p{


color:rgba(217,227,234,.85);


font-family:"Dosis", sans-serif;


font-size:18px;


line-height:1.8;


}




/* ==========================
AUTHOR SOCIAL ICONS
========================== */


.author-social-icons{


display:flex;


justify-content:flex-start;


gap:25px;


margin-top:35px;


}


/* ==========================
CONTACT SOCIAL ICONS
========================== */


.contact-box .social-icons{


display:flex;


justify-content:center;


gap:30px;


margin-top:35px;


}


.social-icons a{


width:45px;

height:45px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



border:

1px solid rgba(167,232,255,.35);



color:#A7E8FF;



font-size:20px;



transition:.5s;



background:

rgba(0,0,0,.35);



}




.social-icons a:hover{


color:#B7FF00;


border-color:#B7FF00;



box-shadow:


0 0 25px rgba(183,255,0,.5);



transform:

translateY(-5px);



}



@media(max-width:900px){


.author-showcase{


flex-direction:column;


text-align:center;


}

@media(max-width:900px){


.book-showcase{


flex-direction:column;


text-align:center;


}



.book-info{


align-items:center;


text-align:center;


}


}



.author-content h3{


font-size:32px;


}



.social-links{


justify-content:center;


}


}

/* =================================
   FANTASY TEXT COLOR FIX
================================= */


h1,
h2,
h3{


font-family:"Cinzel Decorative", serif;


font-weight:700;


letter-spacing:5px;


color:#D9E3EA;


text-shadow:


0 0 20px rgba(167,232,255,.5);



}

/* ==========================
   CENTER SECTION HEADINGS
========================== */


.world h2,
.news h2{


text-align:center;


width:100%;


margin-left:auto;

margin-right:auto;


color:#D9E3EA;


text-shadow:

0 0 25px rgba(167,232,255,.5);


}

.section h2,
.author-section h2,
.books-preview h2,
.world h2,
.news h2,
.extras h2{


font-family:"Cinzel Decorative", serif;


font-size:42px;


font-weight:700;


letter-spacing:6px;


text-align:center;


color:#D9E3EA;


text-shadow:


0 0 25px rgba(167,232,255,.55);



}

@media(max-width:900px){


.section h2,
.author-section h2,
.books-preview h2,
.world h2,
.news h2,
.extras h2{


font-size:28px;


letter-spacing:3px;


}



}


/* ==========================
   NEWS SECTION CENTER ALIGN
========================== */


.news{


text-align:center;


}



.news-box{


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


text-align:center;


max-width:700px;


margin:50px auto 0;


}



.news-box h3{


text-align:center;


font-family:"Cinzel Decorative", serif;


font-size:30px;


color:#D9E3EA;


letter-spacing:4px;


margin-bottom:20px;


}



.news-box p{


text-align:center;


max-width:600px;


font-size:18px;


line-height:1.7;


margin:0 auto 30px;


}



.news-box a{


display:inline-flex;


justify-content:center;


align-items:center;


}

/* ==========================
 NEWS + EXTRAS SYSTEM
========================== */


.news,
.extras{


padding:90px 10%;

text-align:center;

}




.content-list{


max-width:900px;


margin:60px auto;


display:flex;


flex-direction:column;


gap:18px;


}




.content-item{


padding:25px 35px;



background:

rgba(0,0,0,.45);



border:

1px solid rgba(167,232,255,.2);



backdrop-filter:blur(15px);



text-align:left;



transition:.5s;


}



.content-item:hover{


border-color:#b7ff00;


transform:translateX(10px);


box-shadow:

0 0 30px rgba(183,255,0,.15);


}





.content-date{


font-family:"Montserrat",sans-serif;


font-size:12px;


letter-spacing:4px;


color:#a7e8ff;


}




.content-item h3{


margin:15px 0;


font-size:25px;


color:#D9E3EA;


}




.content-item p{


font-size:17px;


margin-bottom:20px;


}





.content-item a{


color:#b7ff00;


font-family:"Montserrat",sans-serif;


letter-spacing:2px;


font-size:13px;


text-decoration:none;


}

/* =================================
   INNER CIRCLE CONTACT SECTION
================================= */


.contact-realm{


padding:120px 10%;


display:flex;


justify-content:center;


text-align:center;


}



.contact-box{


max-width:850px;


padding:70px 60px;



background:


linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(0,0,0,.55)

);



border:

1px solid rgba(167,232,255,.25);



backdrop-filter:

blur(25px);



box-shadow:


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



}




.contact-box .small-title{


font-family:"Montserrat",sans-serif;


font-size:12px;


letter-spacing:6px;


color:#A7E8FF;


}



.contact-box h2{


margin:25px 0;


font-size:45px;


}





.contact-box p{


max-width:600px;


margin:25px auto;


font-size:19px;


line-height:1.7;


}




.realm-form{


margin-top:45px;


display:flex;


justify-content:center;


gap:15px;


}



.realm-form input{


width:350px;


padding:18px 25px;


background:


rgba(0,0,0,.6);



border:

1px solid rgba(167,232,255,.4);



color:white;


font-family:"Dosis",sans-serif;


font-size:17px;



outline:none;



}




.realm-form input:focus{


border-color:#b7ff00;


box-shadow:


0 0 20px rgba(183,255,0,.25);


}



.realm-form button{


white-space:nowrap;


}




@media(max-width:700px){


.contact-box{


padding:45px 25px;


}



.contact-box h2{


font-size:30px;


}



.realm-form{


flex-direction:column;


}



.realm-form input{


width:100%;


}



}
@media(max-width:900px){


.author-content .social-icons{


justify-content:center;


}


}

@media(max-width:900px){


.author-social-icons{


justify-content:center;


}


}


/* =================================
   AUTHOR SECTION SOCIAL ICONS
================================= */

.author-social-icons{


display:flex;


justify-content:flex-start;


gap:25px;


margin-top:35px;


margin-bottom:40px;


}

.author-content button{


margin-top:15px;


}



.author-social-icons a{


width:45px;


height:45px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



border:

1px solid rgba(167,232,255,.35);



background:

rgba(0,0,0,.35);



color:#A7E8FF;



font-size:20px;



text-decoration:none;



transition:.5s;



}




.author-social-icons a:hover{


color:#B7FF00;


border-color:#B7FF00;



box-shadow:

0 0 25px rgba(183,255,0,.5);



transform:

translateY(-5px);


}


@media(max-width:900px){


.author-social-icons{


justify-content:center;


margin-bottom:30px;


}


}

/* ==========================
   DATABASE CONTENT FIX
========================== */

.content-list{
    width:100%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}


.content-item{
    width:100%;
    max-width:900px;
    box-sizing:border-box;
}


.content-item h3,
.content-item p{
    max-width:100%;
}

/* ==========================
   NEWS DETAIL PAGE
========================== */


.news-detail-page{

padding:160px 10% 100px;

display:flex;

justify-content:center;

}



.news-detail-box{

max-width:900px;

width:100%;

padding:60px;


background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(0,0,0,.55)

);


border:1px solid rgba(167,232,255,.25);


backdrop-filter:blur(20px);


text-align:center;

}



.news-detail-box h1{


font-family:"Cinzel Decorative",serif;

font-size:45px;

letter-spacing:5px;

color:#D9E3EA;

margin:25px 0;


}



.news-detail-box .full-content{


text-align:left;

font-size:20px;

line-height:1.9;

margin-top:40px;


}



.news-detail-image{


width:100%;

max-height:500px;

object-fit:cover;

margin:40px 0;


}



@media(max-width:700px){


.news-detail-box{

padding:30px;

}



.news-detail-box h1{

font-size:30px;

}



}

/* =================================
   SHARED NEWS + EXTRAS CARD SYSTEM
================================= */


.news .content-list,
.extras .content-list{

    width:100%;
    max-width:900px;
    margin:60px auto;

}


.news .content-item,
.extras .content-item{

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

    padding:25px 35px;

    box-sizing:border-box;

}


.news .content-item h3,
.extras .content-item h3{

    margin:15px 0;

}


.news .content-item p,
.extras .content-item p{

    margin-bottom:20px;

}
/* =========================
   ADMIN LOGIN FORM
========================= */


.news-detail-box input{


width:350px;

padding:18px 25px;

margin:10px auto;

display:block;


background:

rgba(0,0,0,.55);


border:

1px solid rgba(167,232,255,.35);


color:#D9E3EA;


font-family:"Dosis",sans-serif;


font-size:18px;


outline:none;


backdrop-filter:blur(15px);


transition:.4s;


}



.news-detail-box input::placeholder{

color:rgba(217,227,234,.5);

}



.news-detail-box input:focus{


border-color:#b7ff00;


box-shadow:

0 0 25px rgba(183,255,0,.25);


}

/* ==========================
   ADMIN DASHBOARD
========================== */


.admin-actions{

display:flex;

flex-direction:column;

gap:25px;

align-items:center;

margin-top:40px;

}


.admin-actions button{

width:300px;

}

/* =========================
   ADMIN NEWS CARDS
========================= */


.admin-news-card{

display:flex;

gap:25px;

align-items:center;

padding:25px;

margin:25px 0;


background:

rgba(0,0,0,.45);


border:

1px solid rgba(167,232,255,.25);


backdrop-filter:blur(15px);


}


.admin-news-image{

width:160px;

height:110px;

object-fit:cover;

border-radius:5px;

}


.admin-news-info{

flex:1;

text-align:left;

}


.admin-news-info h3{

margin-top:0;

}


.admin-news-info span{

opacity:.7;

font-size:14px;

}


.admin-actions-row{

display:flex;

gap:15px;

margin-top:20px;

}



@media(max-width:700px){


.admin-news-card{

flex-direction:column;

}


.admin-news-info{

text-align:center;

}


}

/* =========================
 ADMIN NEWS FORM
========================= */


.admin-section-title{

text-align:left;

margin-bottom:35px;

}


.admin-section-title h2{

font-family:"Cinzel Decorative",serif;

font-size:32px;

letter-spacing:3px;

margin-bottom:10px;

}



.admin-section-title p{

font-family:"Montserrat",sans-serif;

opacity:.7;

font-size:15px;

}





.admin-form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}




.form-group{

display:flex;

flex-direction:column;

text-align:left;

}



.form-group.full-width{

grid-column:1 / -1;

}




.form-group label{

font-family:"Montserrat",sans-serif;

font-size:14px;

margin-bottom:8px;

color:#d9e3ea;

}



.form-group input,
.form-group textarea{


width:100%;

box-sizing:border-box;

padding:15px 18px;


background:rgba(0,0,0,.45);


border:1px solid rgba(167,232,255,.25);


color:white;


font-family:"Montserrat",sans-serif;


font-size:15px;


outline:none;


}



.form-group textarea{

resize:vertical;

min-height:120px;

}




.form-group input:focus,
.form-group textarea:focus{

border-color:#b7ff00;

}




.admin-submit{

margin-top:35px;

width:250px;

}



@media(max-width:800px){

.admin-form-grid{

grid-template-columns:1fr;

}

}

/* ==========================
   ADMIN PANEL TYPOGRAPHY
========================== */


.admin-page-title{

font-family:"Montserrat", sans-serif;

font-size:32px;

font-weight:600;

letter-spacing:2px;

color:#d9e3ea;

text-transform:uppercase;

text-align:center;

margin-bottom:15px;

}


.admin-page-subtitle{

font-family:"Montserrat", sans-serif;

font-size:14px;

font-weight:400;

opacity:.7;

text-align:center;

letter-spacing:1px;

margin-bottom:40px;

}


.admin-section-heading{

font-family:"Montserrat", sans-serif;

font-size:22px;

font-weight:600;

letter-spacing:1px;

color:#d9e3ea;

margin:40px 0 25px;

}

.author-key{

font-size:12px;

color:rgba(255,255,255,0.15);

text-decoration:none;

margin-left:15px;

transition:.3s;

}


.author-key:hover{

color:#b7ff00;

}


/* ==========================
   MOBILE LOGIN FIX
========================== */

@media(max-width:600px){

.news-detail-box{

width:90%;
padding-left:20px;
padding-right:20px;

}


.news-detail-box input{

width:100%;

max-width:350px;

box-sizing:border-box;

}


.news-detail-box h1{

font-size:28px;

letter-spacing:2px;

}


}

/* ==========================
   MOBILE PERFORMANCE MODE
========================== */

@media(max-width:700px){


/* Disable heavy background animation */

.castle-layer{

animation:none;

}



.fog-layer{

animation:none;

}



.aurora-layer,
.aurora{

display:none;

}


/* Reduce particle load */

#particles{

display:none;

}


/* Remove expensive blur */

.news-detail-box,
.card,
.contact-box,
.content-item{

backdrop-filter:none;

}


}


@media(min-width:701px){

.fog-layer,
.aurora-layer{

display:none;

}

}

#realm-message{

display:block;

width:100%;

margin-top:20px;

text-align:center;

font-family:'Dosis', sans-serif;

font-size:18px;

}

/* WORLD CATEGORY ACTIVE STATE */

.world-tab-active{

background:rgba(167,232,255,.15);

border-color:rgba(167,232,255,.8);

box-shadow:
0 0 20px rgba(167,232,255,.35);

color:#ffffff;

}

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


.world-page{

padding:160px 20px 80px;

}


.world-container{

max-width:1100px;

margin:auto;

text-align:center;

}



.world-container h1{

font-family:'Cinzel Decorative';

font-size:45px;

}



.world-intro{

max-width:700px;

margin:30px auto;

line-height:1.8;

}




.world-tabs{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin:50px 0;

}




.world-tab{

cursor:pointer;

}



.world-tab-active{

background:rgba(167,232,255,.15);

border-color:rgba(167,232,255,.8);

box-shadow:
0 0 25px rgba(167,232,255,.35);

}




.world-content{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}



.world-card{

padding:30px;

background:rgba(0,0,0,.45);

border:1px solid rgba(167,232,255,.2);

}



.world-card h3{

font-family:'Cinzel Decorative';

}



@media(max-width:700px){


.world-content{

grid-template-columns:1fr;

}


.world-container h1{

font-size:30px;

}


}

/* ==========================
WORLD DETAIL PAGE
========================== */


.world-detail-page{

padding:160px 20px 80px;

}



.world-detail-container{

max-width:900px;

margin:auto;

text-align:center;

}



.world-category{

text-transform:uppercase;

letter-spacing:4px;

opacity:.7;

}



.world-detail-container h1{

font-family:'Cinzel Decorative';

font-size:50px;

margin:20px 0;

}



.world-detail-image{

width:100%;

max-height:600px;

object-fit:cover;

margin:30px 0;

border:1px solid rgba(167,232,255,.3);

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

}



.world-detail-text{

font-family:'Montserrat';

line-height:2;

font-size:18px;

}



.world-details-list{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin:30px 0;

}



.world-details-list div{

padding:15px 25px;

border:1px solid rgba(167,232,255,.3);

background:rgba(0,0,0,.35);

}



@media(max-width:700px){


.world-detail-container h1{

font-size:32px;

}


.world-detail-text{

font-size:16px;

}



}

.lore-section{

margin:50px 0;

text-align:left;

}


.lore-section h2{

font-family:'Cinzel Decorative';

text-align:center;

margin-bottom:20px;

}


.lore-section p{

line-height:2;

font-size:18px;

}

.world-card{

background:rgba(0,0,0,.45);

border:1px solid rgba(167,232,255,.2);

overflow:hidden;

}



.world-card img{

width:100%;

height:220px;

object-fit:cover;

}



.world-card-content{

padding:25px;

}



.world-card h3{

font-family:'Cinzel Decorative';

font-size:22px;

}