/*==================================================
GAME HERO
==================================================*/

.game-hero{

position:relative;

padding:170px 0 100px;

background:#0b0f19;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(255,70,70,.15),

transparent 40%),

radial-gradient(circle at left,

rgba(255,215,0,.08),

transparent 35%);

}

.game-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:30px;

align-items:center;

position:relative;

z-index:2;

}

.game-badges{

display:flex;

gap:15px;

margin-bottom:25px;

flex-wrap:wrap;

}

.badge-released{

padding:10px 22px;

border-radius:999px;

font-weight:700;

font-size:14px;

}


.badge-complete{

padding:10px 22px;

border-radius:999px;

font-weight:700;

font-size:14px;

}

.latest{

background:#ff3b30;

color:#fff;

animation:pulse 2s infinite;

}

.status{

background:#1fb954;

color:#fff;

}

.status-live{

background:#1fb954;

color:#fff;

}

.game-left h1{

font-size:64px;

margin-bottom:20px;

}

.game-tagline{

font-size:20px;

color:#c8d0dd;

line-height:1.8;

margin-bottom:35px;

}

.game-meta{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.game-meta div{

background:#151b28;

padding:18px;

border-radius:14px;

}

.game-meta i{

color:#ffd700;

margin-right:10px;

}

.progress-card{

background:#151b28;

padding:25px;

border-radius:18px;

margin:35px 0;

}

.progress{

height:12px;

background:#222;

border-radius:999px;

overflow:hidden;

margin:18px 0;

}

.progress-fill{

height:100%;

background:linear-gradient(90deg,#ff3b30,#ffd700);

}

.quick-stats{

display:grid;

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

gap:15px;

margin-top:35px;

}

.stat{

background:#151b28;

padding:20px;

text-align:center;

border-radius:18px;

}

.stat h3{

font-size:34px;

color:#ffd700;

}


/*======================================
GAME HERO IMAGE
======================================*/

.game-right{

    position:relative;

}

.game-hero-banner{

    position:relative;

    height:100%;

    border-radius:24px;

    overflow:hidden;

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

}

.game-hero-banner img{

    display:block;

    width:100%;

    aspect-ratio: 682 / 1024;

    object-fit:cover;

    object-position:center;

}



.floating-card{

margin-top:-80px;

margin-left:auto;

background:#151b28;

padding:30px;

width:320px;

border-radius:20px;

border:1px solid rgba(255,215,0,.25);

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

position:relative;

}

.floating-card h2{

color:#ffd700;

margin:10px 0 20px;

}

.floating-card p{

margin-bottom:12px;

}

.scroll-indicator{

margin-top:60px;

text-align:center;

animation:bounce 2s infinite;

}

@media(max-width:992px){

.game-grid{

grid-template-columns:1fr;

}

.floating-card{

margin:30px auto 0;

width:100%;

max-width:420px;

}

.quick-stats{

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

}

.game-left h1{

font-size:48px;

}

}

@media(max-width:576px){

.game-meta{

grid-template-columns:1fr;

}

.quick-stats{

grid-template-columns:1fr 1fr;

}

.game-left h1{

font-size:38px;

}

.game-tagline{

font-size:17px;

}

}


/*==================================================
STORY
==================================================*/

.story-section{

padding:120px 0;

background:#101624;

}

.story-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

margin-top:60px;

}

.story-card{

background:#151b28;

padding:40px;

border-radius:24px;

margin-bottom:35px;

}

.story-card h3{

margin-bottom:25px;

font-size:32px;

}

.story-card p{

    line-height:2;

    color:#c9d2e1;

    max-height:1000px;

    overflow:hidden;

    transition:max-height .4s ease;

}

.story-card p.collapsed{

    max-height:180px;

}

.story-toggle{

margin-top:30px;

padding:12px 30px;

border:none;

background:#FFD700;

color:#000;

border-radius:999px;

font-weight:700;

cursor:pointer;

}

.feature-grid{

display:grid;

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

gap:20px;

}

.feature-card{

background:#151b28;

padding:25px;

border-radius:20px;

transition:.3s;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-card i{

font-size:34px;

color:#FFD700;

margin-bottom:15px;

}

.info-card,

.warning-card,

.tags-card{

background:#151b28;

padding:30px;

border-radius:22px;

margin-bottom:25px;

}

.info-card table{

width:100%;

border-collapse:collapse;

}

.info-card td{

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

.info-card td:last-child{

text-align:right;

font-weight:700;

}

.warning-card ul{

padding-left:20px;

}

.warning-card li{

margin-bottom:12px;

}

.tags{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.tags span{

background:#232b3d;

padding:10px 18px;

border-radius:999px;

font-size:14px;

}

/*==================================================
EPISODES
==================================================*/

.episodes-section{

padding:120px 0;

background:#0d121c;

}

.episode-progress{

display:flex;

align-items:center;

justify-content:center;

margin:60px 0;

flex-wrap:wrap;

gap:12px;

}

.episode-node{

width:50px;

height:50px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

position:relative;

}

.completed{

background:#1fb954;

color:#fff;

}

.latest{

background:#ff3b30;

color:#fff;

animation:pulse 2s infinite;

}

.latest span{

position:absolute;

top:-22px;

font-size:11px;

background:#FFD700;

color:#000;

padding:2px 8px;

border-radius:999px;

}

.locked{

background:#333;

color:#999;

}

.episode-line{

width:45px;

height:3px;

background:#444;

}

.episode-grid{

display:grid;

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

gap:30px;

}

.episode-card{

background:#151b28;

padding:28px;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.episode-card:hover{

transform:translateY(-8px);

border-color:#FFD700;

}

.latest-release{

border:2px solid #FFD700;

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

}

.episode-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.episode-number{

font-size:28px;

font-weight:700;

}

.episode-badge{

background:#ff3b30;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.old{

background:#444;

}

.episode-body ul{

list-style:none;

padding:0;

margin-top:25px;

}

.episode-body li{

padding:8px 0;

border-bottom:1px solid rgba(255,255,255,.06);

}

.episode-buttons{

display:grid;

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

gap:12px;

margin-top:30px;

}

.btn-danger{

background:#d62828;

color:#fff;

}

.btn-success{

background:#1fb954;

color:#fff;

}

.btn-disabled{

background:#444;

color:#888;

cursor:not-allowed;

}

.episode-like-btn{
    font-size: 16px;
    color: #fff;
}

/*==================================================
GALLERY
==================================================*/

.gallery-section{

padding:120px 0;

background:#101624;

}

/*======================================
FEATURED MEDIA
======================================*/

.featured-media{

    position:relative;

    max-width:1024px;

    margin:80px auto;
    
    border-radius:24px;
    
    overflow:hidden;
    
    background:#151b28;
    
    box-shadow:0 20px 50px rgba(0,0,0,.35);

}


.gallery-image{

    display:block;

    width:100%;

    height:auto;

    /* aspect-ratio:1024/682; */
    aspect-ratio:1920/1080;

    object-fit:cover;

}

.featured-media:hover img{

transform:scale(1.03);

}

.featured-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:40px;

    color:#fff;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.9) 0%,
        rgba(0,0,0,.5) 50%,
        rgba(0,0,0,0) 100%
    );

}

.gallery-grid{

display:grid;

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

gap:20px;

margin-bottom:60px;

}

.gallery-item{

overflow:hidden;

border-radius:18px;

cursor:pointer;

}

.gallery-item img{

width:100%;

display:block;

transition:.35s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.video-preview{

margin-top:60px;

}

.video-preview video{

width:100%;

border-radius:24px;

display:block;

}

#lightbox{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:99999;

}

#lightboxImage{

max-width:92%;

max-height:90vh;

border-radius:12px;

}

#closeLightbox{

position:absolute;

top:30px;

right:40px;

font-size:50px;

color:#fff;

cursor:pointer;

}

.gallery-nav{

position:absolute;

bottom:40px;

display:flex;

gap:20px;

}

.gallery-nav button{

width:60px;

height:60px;

border:none;

border-radius:50%;

font-size:28px;

cursor:pointer;

background:#FFD700;

}

/*==================================================
DEVELOPMENT
==================================================*/

.development-section{

padding:120px 0;

background:#0b0f19;

}

.development-grid{

display:grid;

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

gap:30px;

margin:60px 0;

}

.development-card{

background:#151b28;

padding:35px;

border-radius:24px;

}

.overall-progress{

display:flex;

align-items:center;

gap:30px;

margin-bottom:30px;

}

.progress-circle{

width:140px;

height:80px;

border-radius:50%;

background:linear-gradient(135deg,#FFD700,#ff3b30);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

font-weight:bold;

color:#740000;

}

.goal-list{

list-style:none;

padding:0;

}

.goal-list li{

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

.roadmap{

margin-top:80px;

}

.roadmap-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.roadmap-card{

padding:30px;

border-radius:20px;

}

.completed{

background:#14341f;

}

.active{

background:#3b2c10;

}

.future{

background:#1b2234;

}

.timeline{

margin-top:40px;

border-left:3px solid #FFD700;

padding-left:35px;

}

.timeline-item{

margin-bottom:40px;

position:relative;

}

.timeline-item::before{

content:"";

position:absolute;

left:-44px;

top:5px;

width:18px;

height:18px;

background:#FFD700;

border-radius:50%;

}

.support-development{

margin-top:80px;

padding:60px;

text-align:center;

background:#151b28;

border-radius:28px;

}

/*==================================================
PATREON
==================================================*/

.patreon-section{

padding:120px 0;

background:#101624;

}

.support-grid{

display:grid;

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

gap:25px;

margin:60px 0;

}

.support-card{

background:#151b28;

padding:35px;

border-radius:24px;

text-align:center;

transition:.3s;

}

.support-card:hover{

transform:translateY(-10px);

}

.support-card i{

font-size:42px;

color:#FFD700;

margin-bottom:20px;

}

.membership-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.tier-card{

background:#151b28;

padding:35px;

border-radius:24px;

text-align:center;

position:relative;

}

.featured{

border:2px solid gold;

transform:scale(1.05);

}

.popular{

position:absolute;

top:-14px;

left:50%;

transform:translateX(-50%);

background:red;

padding:6px 18px;

border-radius:999px;

font-size:12px;

font-weight:bold;

}

.price{

font-size:48px;

color:#FFD700;

margin:25px 0;

}

.tier-card ul{

text-align:left;

margin:30px 0;

}

.tier-card li{

margin-bottom:12px;

}

.goal-box{

margin-top:80px;

background:#151b28;

padding:45px;

border-radius:24px;

text-align:center;

}

.goal-progress{

height:18px;

background:#333;

border-radius:999px;

overflow:hidden;

margin:30px 0;

}

.goal-fill{

height:100%;

background:linear-gradient(90deg,#FFD700,#ff3b30);

}

.patreon-cta{

margin-top:80px;

text-align:center;

padding:70px;

border-radius:30px;

background:linear-gradient(135deg,#1d2435,#121821);

}

.patreon-cta a{
    margin-top: 25px;
}

/*==================================================
COMMUNITY
==================================================*/

.community-section{

padding:120px 0;

background:#0b0f19;

}

.community-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.community-card{

background:#151b28;

padding:35px;

border-radius:24px;

text-align:center;

transition:.35s;

}

.community-card:hover{

transform:translateY(-8px);

}

.community-card i{

font-size:48px;

color:#FFD700;

margin-bottom:20px;

}

.newsletter{

padding:100px 0;

background:#101624;

}

.newsletter-box{

background:#151b28;

padding:60px;

border-radius:28px;

text-align:center;

}

.newsletter form{

display:flex;

justify-content:center;

gap:15px;

margin-top:35px;

flex-wrap:wrap;

}

.newsletter input{

width:420px;

padding:18px;

border-radius:999px;

border:none;

background:#20283b;

color:white;

}

/*==================================================
GAME LIBRARY
==================================================*/

.games-library{

padding:120px 0;

background:#101624;

}

.game-filter{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin:50px 0;

}

.game-filter button{

padding:12px 24px;

border:none;

border-radius:999px;

cursor:pointer;

background:#222;

color:#fff;

}

.game-filter .active{

background:#FFD700;

color:#000;

}

.games-grid{

display:grid;

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

gap:35px;

}

.game-card{

background:#151b28;

border-radius:24px;

overflow:hidden;

transition:.35s;

}

.game-card:hover{

transform:translateY(-8px);

}

.game-cover{

position:relative;

overflow:hidden;

}

.game-cover img{

width:100%;

display:block;

transition:.4s;

}

.game-card:hover img{

transform:scale(1.08);

}

.game-overlay{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

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

opacity:0;

transition:.3s;

}

.game-card:hover .game-overlay{

opacity:1;

}

.game-status{

position:absolute;

top:20px;

left:20px;

background:red;

padding:8px 16px;

border-radius:999px;

}

.game-info{

padding:30px;

}

.game-buttons{

display:flex;

gap:15px;

margin-top:25px;

}

.continue-playing{

padding:100px 0;

background:#0b0f19;

}

.continue-card{

display:flex;

gap:35px;

align-items:center;

background:#151b28;

padding:35px;

border-radius:24px;

}

.continue-card img{

width:220px;

border-radius:16px;

}

.coming-soon{

padding:100px 0;

background:#101624;

text-align:center;

}

.coming-box{

padding:60px;

background:#151b28;

border-radius:24px;

}

/*==================================================
NEWS
==================================================*/

.updates-section,
.changelog-section,
.faq-section{

padding:120px 0;

background:#101624;

}

.news-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.news-card{

background:#151b28;

padding:35px;

border-radius:24px;

}

.latest{

border:2px solid gold;

}

.news-date{

color:#FFD700;

font-weight:bold;

margin-bottom:20px;

}

.change-item{

background:#151b28;

padding:30px;

border-radius:20px;

margin-bottom:25px;

}

.change-item span{

font-size:22px;

font-weight:bold;

display:block;

margin-bottom:20px;

}

.faq-item{

margin-bottom:20px;

background:#151b28;

border-radius:20px;

overflow:hidden;

}

.faq-question{

width:100%;

padding:25px;

background:none;

border:none;

text-align:left;

font-size:18px;

color:white;

cursor:pointer;

}

.faq-answer{

display:none;

padding:0 25px 25px;

}

.footer{

background:#0b0f19;

padding:80px 0 40px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin:12px 0;

}

.footer a{

color:#ddd;

text-decoration:none;

}

.footer-social{

display:flex;

gap:18px;

font-size:28px;

}

.footer hr{

margin:50px 0;

border-color:#333;

}

.copyright{

text-align:center;

color:#888;

}

/*======================================
STATISTICS
======================================*/

.stats-section{

padding:120px 0;

background:#0d1118;

}

.stats-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.stat-card{

padding:40px;

background:#151b28;

border-radius:24px;

text-align:center;

transition:.3s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card i{

font-size:46px;

color:#FFD700;

margin-bottom:20px;

}

.stat-card h3{

font-size:40px;

margin-bottom:15px;

}

.rating-section{

padding:100px 0;

background:#101624;

}

.rating-card{

background:#151b28;

padding:60px;

border-radius:24px;

text-align:center;

}

.rating-stars{

font-size:48px;

color:#FFD700;

margin:20px 0;

}

.milestone-section{

padding:120px 0;

background:#0b0f19;

}

.milestone-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}

.milestone{

background:#151b28;

padding:35px;

text-align:center;

border-radius:20px;

font-size:42px;

}

.featured-section{

padding:100px 0;

background:#101624;

}

.featured-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.featured-grid div{

padding:30px;

text-align:center;

background:#151b28;

border-radius:20px;

font-size:24px;

font-weight:bold;

}

/*======================================
READING PROGRESS
======================================*/

#reading-progress{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:linear-gradient(90deg,#FFD700,#ff3b30);

z-index:999999;

transition:.1s;

}

/*======================================
SCROLL REVEAL
======================================*/

.reveal{

opacity:0;

transform:translateY(70px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:none;

}

.hero-image{

animation:floatHero 6s ease-in-out infinite;

}

@keyframes floatHero{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

.progress-fill{

width:0;

transition:width 2s ease;

}

#cursor-glow{

    position:fixed;

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(255,215,0,.15);

    filter:blur(35px);

    pointer-events:none;

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

    z-index:0;

}

.btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:20px;

height:20px;

border-radius:50%;

background:rgba(255,255,255,.6);

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

animation:ripple .6s linear;

}

#backTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#FFD700;

display:none;

cursor:pointer;

z-index:999;

}

html{

scroll-behavior:smooth;

}

/*=========================================
CHARACTERS
=========================================*/

.characters-section{

    padding:100px 0;

    background:#101624;

}

.character-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.character-card{

    background:#161d2c;

    border-radius:18px;

    overflow:hidden;

    transition:.3s;

    border:1px solid rgba(255,255,255,.06);

}

.character-card:hover{

    transform:translateY(-8px);

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

}

.character-image{

    aspect-ratio:2/3;

    overflow:hidden;

}

.character-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    transition:.5s;

}

.character-card:hover img{

    transform:scale(1.05);

}

.character-content{

    padding:18px;

    text-align:center;

}

.character-content h3{

    font-size:18px;

    margin-bottom:6px;

}

.character-content span{

    display:block;

    color:#FFD700;

    font-size:13px;

    margin-bottom:16px;

}

.vote-btn{

    width:100%;

    border:none;

    background:#e63946;

    color:#fff;

    padding:10px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

.vote-btn:hover{

    background:#ff4d5d;

}

.profile-btn{

    width:100%;

    border:none;

    background:#399cff;

    color:#fff;

    padding:10px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;
    margin: 20px 0px;

}

.profile-btn:hover{

    background:#a64dff;

}

@media(max-width:992px){

.character-grid{

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

}

}

@media(max-width:768px){

.character-grid{

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

}

}

@media(max-width:480px){

.character-grid{

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

gap:15px;

}

.character-content{

padding:14px;

}

.character-content h3{

font-size:15px;

}

.vote-btn{

font-size:14px;

padding:8px;

}

}

/**********************************************************************/

@keyframes ripple{

to{

width:400px;

height:400px;

opacity:0;

}
}

@media(max-width:992px){

.stats-grid,

.milestone-grid,

.featured-grid{

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

}

}

@media(max-width:576px){

.stats-grid,

.milestone-grid,

.featured-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.news-grid{

grid-template-columns:1fr;

}

.footer-grid{

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

}

}

@media(max-width:576px){

.footer-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.games-grid{

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

}

}

@media(max-width:768px){

.games-grid{

grid-template-columns:1fr;

}

.continue-card{

flex-direction:column;

text-align:center;

}

}

@media(max-width:992px){

.community-grid{

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

}

}

@media(max-width:576px){

.community-grid{

grid-template-columns:1fr;

}

.newsletter input{

width:100%;

}

}

@media(max-width:992px){

.support-grid,

.membership-grid{

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

}

}

@media(max-width:576px){

.support-grid,

.membership-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.development-grid{

grid-template-columns:1fr;

}

.roadmap-grid{

grid-template-columns:1fr;

}

.overall-progress{

flex-direction:column;

text-align:center;

}

}

@media(max-width:992px){

.gallery-grid{

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

}

}

@media(max-width:576px){

.gallery-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.episode-buttons{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.story-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.story-card{

padding:25px;

}

}