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

.game-hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:560px;

    overflow:hidden;

}

/*====================================*/

.hero-background{

    position:absolute;

    inset:0;

}

.hero-background img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        brightness(.55)

        saturate(.95)

        contrast(1.05);

}

/*====================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
            to right,
            rgb(33 33 33 / 50%),
            rgb(31 33 33 / 50%) 50%,
            rgb(33 33 33 / 50%) 70%
        ),

        linear-gradient(
            to bottom,
            #1a1a1a00 0%,
            #1c1d1e00 35%,
            #1f2122 90%,
            #1f2122 100%
        );

}

/*====================================*/

.hero-container{

    position:relative;

    z-index:10;

    padding:120px 0 40px;

}

/*====================================*/

.back-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:white;

    text-decoration:none;

    margin-bottom:40px;

}

.back-link:hover{

    color:#7C3AED;

}

/*====================================*/

.cover-wrapper{

    position:relative;

}

.game-cover{

    width:100%;

    border-radius:18px;

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

}

/*====================================*/

.favorite-btn{

    position:absolute;

    top:15px;

    right:15px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:rgba(15,15,20,.80);

    backdrop-filter:blur(10px);

    color:white;

    transition:.30s;

}

.favorite-btn:hover{

    background:#7C3AED;

}

/*====================================*/

.hero-content{

    position:relative;

}

.hero-content::before{

    content:"";

    position:absolute;

    left:-80px;

    top:-80px;

    width:650px;

    height:650px;

    background:radial-gradient(

        circle,

        rgba(0,0,0,.45) 0%,

        rgba(0,0,0,.25) 45%,

        transparent 80%

    );

    z-index:-1;

}

/*====================================*/

.hero-content h1{

    color:white;

    font-size:64px;

    font-weight:800;

    margin-bottom:15px;

}

/*====================================*/

.hero-meta{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-bottom:25px;

    color:#D1D5DB;

    font-size:17px;

}

.hero-meta i{

    color:#FFD43B;

}

/*====================================*/

.hero-genres{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.hero-genres span{

    background:rgba(124,58,237,.15);

    color:white;

    border:1px solid rgba(124,58,237,.45);

    padding:8px 18px;

    border-radius:30px;

}

/*====================================*/

.hero-platforms{

    display:flex;

    gap:22px;

    font-size:34px;

    color:white;

    margin-bottom:35px;

}

/*====================================*/

/*==================================
        BOTONES HERO
==================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:30px;

}

.library-btn,
.content-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:280px;

    height:64px;

    border-radius:16px;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.30s ease;

}

/*==================================*/

.library-btn{

    background:#7C3AED;

    color:#FFF;

    border:2px solid #7C3AED;

}

.library-btn:hover{

    background:transparent;

    color:#FFF;

    transform:translateY(-3px);

}

/*==================================*/

.content-btn{

    background:transparent;

    color:#FFF;

    border:2px solid #7C3AED;

}

.content-btn:hover{

    background:#7C3AED;

    color:#FFF;

    transform:translateY(-3px);

}

/*==================================*/

.library-btn i,
.content-btn i{

    font-size:18px;

}

/* =========================
                Tabs
========================== */

.detail-main{

    position:relative;

    margin-top: 0px;

    z-index:20;

}

.detail-card{

    background:
        radial-gradient(
            circle at top right,
            rgba(124,58,237,.06),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #1A1E2E 0%,
            #1D2134 100%
        );

    border-radius:20px;

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

    padding:35px;

    overflow:hidden;

}

.detail-tabs{

    display:flex;

    align-items:center;

    gap:45px;

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

    padding-bottom:18px;

    margin-bottom:30px;

}

.detail-description{

    max-width:85%;

    margin-bottom:35px;

}

.detail-description p{

    color:#BFC4D7;

    font-size:16px;

    line-height:1.9;

}

.screenshots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {

    .screenshots {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .screenshots {
        grid-template-columns: 1fr;
    }

}


.screenshot{

    position:relative;

    overflow:hidden;

    border-radius:12px;

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

    transition:.35s;

    cursor:pointer;

}

.screenshots-section h3{

    color:white;

    margin-bottom:20px;

}


.screenshot img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    transition:transform .45s ease;

}

/* Overlay */

.screenshot-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    opacity:0;

    transition:.35s;

}

.screenshot-overlay i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(124,58,237,.90);

    color:white;

    font-size:22px;

    transform:scale(.8);

    transition:.35s;

}

/* Hover */

.screenshot:hover{

    border-color:#7C3AED;

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(124,58,237,.25);

}

.screenshot:hover img{

    transform:scale(1.08);

}

.screenshot:hover .screenshot-overlay{

    opacity:1;

}

.screenshot:hover .screenshot-overlay i{

    transform:scale(1);

}

.screenshots-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:18px;

}

.screenshots-pagination span{

    width:60px;

    height:4px;

    background:#30344A;

    border-radius:20px;

}

.screenshots-pagination span.active{

    background:#7C3AED;

}


.screenshots-section h3{

    color:white;

    font-size:32px;

    margin-bottom:20px;

}

/*=================================
      WRAPPER CAPTURAS
==================================*/

.screenshots-wrapper{

    position:relative;

}

/*=================================
        FLECHAS
==================================*/

.screenshot-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(30,34,53,.90);

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:20;

    transition:.30s;

    opacity:0;

    visibility:hidden;

}

/* Mostrar únicamente al pasar el mouse */

.screenshots-wrapper:hover .screenshot-arrow{

    opacity:1;

    visibility:visible;

}

/* Hover */

.screenshot-arrow:hover{

    background:#7C3AED;

    transform:translateY(-50%) scale(1.08);

}

/* Posición */

.screenshot-arrow.left{

    left:-10px;

}

.screenshot-arrow.right{

    right:-10px;

}

.screenshots-wrapper:hover .left{

    left:-22px;

}

.screenshots-wrapper:hover .right{

    right:-22px;

}

/* Icono */

.screenshot-arrow i{

    font-size:16px;

}

.detail-tabs button{

    background:none;

    border:none;

    color:#9CA3AF;

    font-size:17px;

    font-weight:500;

    cursor:pointer;

    transition:.30s;

    padding:0;

}

.detail-tabs button:hover{

    color:white;

}

.detail-tabs button.active{

    color:white;

    position:relative;

}

.detail-tabs button.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-20px;

    width:100%;

    height:3px;

    background:#7C3AED;

    border-radius:20px;

}

/*====================================
            TABS
====================================*/

.tab-content{

    display:none;

    animation:fadeTab .35s ease;

}

.tab-content.active{

    display:block;

}

@keyframes fadeTab{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
        FEATURES
==========================*/

.section-title{

    color:#FFF;

    font-size:28px;

    font-weight:700;

    margin-bottom:30px;

}

.feature-grid{

    display:grid;

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

    gap:20px;

}

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#24283D;

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

    border-radius:16px;

    padding:22px;

    transition:.30s;

}

.feature-item:hover{

    transform:translateY(-4px);

    border-color:#7C3AED;

    box-shadow:0 10px 25px rgba(124,58,237,.18);

}

/*=========================
        BADGE
==========================*/

.badge{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-left:8px;

    padding:5px 10px;

    background:linear-gradient(
        135deg,
        #7C3AED,
        #9F67FF
    );

    color:#FFF;

    font-size:12px;

    font-weight:600;

    border-radius:999px;

    line-height:1;

    box-shadow:0 4px 10px rgba(124,58,237,.35);

    transition:.30s;

}

.detail-tabs button:hover .badge{

    transform:scale(1.08);

    box-shadow:0 6px 15px rgba(124,58,237,.45);

}

.feature-item i{

    color:#7C3AED;

    font-size:30px;

    margin-top:5px;

    min-width:35px;

}

.feature-item h5{

    color:#FFF;

    margin-bottom:8px;

    font-size:18px;

    font-weight:600;

}

.feature-item p{

    color:#B8BDD0;

    font-size:15px;

    line-height:1.6;

    margin:0;

}

/*=========================
        REVIEWS
==========================*/

.review-summary{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:40px;

    margin-bottom:40px;

}

.review-score{

    background:#24283D;

    border-radius:18px;

    padding:30px;

    text-align:center;

}

.review-score h2{

    color:#FFF;

    font-size:60px;

    margin-bottom:10px;

}

.review-score .stars{

    color:#FFD43B;

    font-size:22px;

    margin-bottom:10px;

}

.review-score span{

    color:#B8BDD0;

}

.review-bars{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.review-bars .bar{

    display:grid;

    grid-template-columns:55px 1fr 45px;

    gap:15px;

    align-items:center;

}

.review-bars .bar span{

    color:#F8FAFC;

    font-weight:600;

    font-size:15px;

}

/* Porcentaje derecho */

.review-bars .bar small{

    color:#D1D5DB;

    font-weight:600;

    font-size:14px;

    text-align:right;

}

.progress{

    height:10px;

    background:#3B415C;

    border-radius:50px;

    overflow:hidden;

}

.fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #7C3AED,
        #9F67FF
    );

    border-radius:50px;

}

.review-bars span i{

    color:#FACC15;

    margin-left:4px;

    font-size:13px;

}

.review-card{

    background:#24283D;

    border-radius:18px;

    padding:25px;

    margin-bottom:20px;

}


.review-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}

.review-user img{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

}

.review-user h5{

    color:#FFF;

    margin-bottom:3px;

}

.review-user span{

    color:#9FA7C2;

    font-size:13px;

}

.review-rating{

    color:#FFD43B;

    font-size:18px;

    margin-bottom:12px;

}

.review-card p{

    color:#C4C8D9;

    line-height:1.8;

}

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

.news-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.news-item{

    display:flex;

    gap:25px;

    background:#24283D;

    border-radius:18px;

    overflow:hidden;

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

    transition:.30s;

}

.news-item:hover{

    transform:translateY(-4px);

    border-color:#7C3AED;

    box-shadow:0 12px 25px rgba(124,58,237,.20);

}

/*==========================*/

.news-item img{

    width:260px;

    object-fit:cover;

}

/*==========================*/

.news-content{

    padding:25px;

    flex:1;

}

.news-category{

    display:inline-block;

    background:#3B82F6;

    color:white;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

    margin-bottom:15px;

}

.news-category.purple{

    background:#7C3AED;

}

/*==========================*/

.news-content h4{

    color:white;

    font-size:22px;

    margin-bottom:12px;

    line-height:1.4;

}

.news-content small{

    color:#AEB4C4;

    display:block;

    margin-bottom:18px;

}

.news-content p{

    color:#C5CADC;

    line-height:1.8;

    margin-bottom:20px;

}

.news-content a{

    color:#7C3AED;

    text-decoration:none;

    font-weight:600;

}

.news-content a i{

    margin-left:8px;

    transition:.25s;

}

.news-content a:hover i{

    transform:translateX(5px);

}

/*==================================
        DETAIL SIDEBAR
==================================*/

.detail-sidebar-card{

    margin-top: 0px;

    background:#1E2235;

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

    border-radius:18px;

    padding:28px;

}

.detail-sidebar-card h3{

    color:#FFF;

    font-size:28px;

    margin-bottom:28px;

}

/*==================================*/

.game-info-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/*==================================*/

.info-item{

    display:flex;

    gap:18px;

    padding-bottom:18px;

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

}

.info-item:last-child{

    border:none;

    padding-bottom:0;

}

/*==================================*/

.info-icon{

    width:48px;

    height:48px;

    background:#2A2F46;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.info-icon i{

    color:#8B5CF6;

    font-size:20px;

}

/*==================================*/

.info-content{

    flex:1;

}

.info-content span:first-child{

    display:block;

    color:#9CA3AF;

    font-size:14px;

    margin-bottom:5px;

}

.info-content strong{

    color:#FFF;

    font-size:16px;

    font-weight:600;

}

/*==================================*/

.platform-icons{

    display:flex;

    gap:14px;

    margin-top:6px;

}

.platform-icons i{

    color:#D1D5DB;

    font-size:22px;

    transition:.3s;

}

.platform-icons i:hover{

    color:#8B5CF6;

}

/*==================================*/

.difficulty{

    margin-top:5px;

}

.difficulty-bar{

    width:100%;

    height:8px;

    background:#31354A;

    border-radius:20px;

    overflow:hidden;

    margin-top:8px;

}

.difficulty-fill{

    width:60%;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #7C3AED,
        #A855F7
    );

}

/*==================================*/

.age-rating{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:8px;

    padding:6px 14px;

    background:#EF4444;

    color:#FFF;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

/*==================================*/

.show-more{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:30px;

    padding:14px;

    border-radius:14px;

    background:#272B42;

    color:#FFF;

    text-decoration:none;

    transition:.3s;

}

.show-more:hover{

    background:#7C3AED;

    color:#FFF;

}

/*==================================
        SIMILAR GAMES
==================================*/

.similar-games{

    margin-top: 20px;

    background:#1E2235;

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

    border-radius:18px;

    padding:28px;

}

/*==================================
        HEADER
==================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:30px;

}

.section-header h3{

    color:#FFF;

    margin:0;

    font-size:28px;

    font-weight:700;

}

.section-subtitle{

    margin-top:8px;

    color:#9CA3AF;

    font-size:15px;

}

.section-header a{

    color:#8B5CF6;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.section-header a:hover{

    color:#A78BFA;

}

/*==================================
        CARD
==================================*/

.similar-card{

    display:block;

    background:#272B42;

    border-radius:16px;

    overflow:hidden;

    text-decoration:none;

    transition:.35s;

    height:100%;

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

}

.similar-card:hover{

    transform:translateY(-8px);

    border-color:#7C3AED;

    box-shadow:0 18px 35px rgba(124,58,237,.18);

}

/*==================================
        IMAGE
==================================*/

.similar-image{

    position:relative;

    overflow:hidden;

}

.similar-image img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:.45s;

}

.similar-card:hover img{

    transform:scale(1.08);

}

/*==================================
        COMPATIBILITY
==================================*/

.match-badge{

    position:absolute;

    top:14px;

    right:14px;

    background:linear-gradient(
        135deg,
        #7C3AED,
        #9F67FF
    );

    color:#FFF;

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:600;

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

}

/*==================================
        INFO
==================================*/

.similar-info{

    padding:18px;

}

.similar-info h4{

    color:#FFF;

    font-size:20px;

    margin-bottom:6px;

}

.similar-info .developer{

    color:#9CA3AF;

    font-size:14px;

    margin-bottom:15px;

}

/*==================================
        RATING
==================================*/

.similar-rating{

    color:#FFD43B;

    font-weight:600;

    margin-bottom:15px;

}

.similar-rating i{

    margin-right:6px;

}

/*==================================
        GENRES
==================================*/

.similar-genres{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

}

.similar-genres span{

    background:#34384E;

    color:#E5E7EB;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

}

/*==================================
        PLATFORMS
==================================*/

.similar-platforms{

    display:flex;

    gap:15px;

    color:#B8BDD0;

    font-size:22px;

    margin-bottom:18px;

}

.similar-platforms i{

    transition:.3s;

}

.similar-platforms i:hover{

    color:#7C3AED;

}

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

.similar-button{

    width:100%;

    background:linear-gradient(
        135deg,
        #7C3AED,
        #9F67FF
    );

    color:#FFF;

    border:none;

    border-radius:12px;

    padding:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    opacity:0;

    transform:translateY(10px);

    transition:.35s;

}

.similar-card:hover .similar-button{

    opacity:1;

    transform:translateY(0);

}


/*==================================
        GAME PROFILE
==================================*/

.game-profile{

    margin-top: 20px;

    background:#1E2235;

    border-radius:18px;

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

    padding:28px;

}

.game-profile h3{

    color:#FFF;

    font-size:28px;

    margin-bottom:30px;

}

/*==================================
        BLOQUES
==================================*/

.profile-block{

    margin-bottom:30px;

}

.profile-block h5{

    display:flex;

    align-items:center;

    gap:10px;

    color:#FFF;

    font-size:18px;

    margin-bottom:15px;

}

.profile-block h5 i{

    color:#7C3AED;

}

/*==================================
        TAGS
==================================*/

.tags-container{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tag{

    background:#2A2F46;

    color:#E5E7EB;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    transition:.30s;

    cursor:pointer;

}

.tag:hover{

    background:#7C3AED;

}

/*==================================
        LISTAS
==================================*/

.profile-list{

    list-style:none;

    padding:0;

    margin:0;

}

.profile-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#C9D0DF;

    font-size:15px;

}

.profile-list i{

    color:#22C55E;

}

.profile-list.danger i{

    color:#EF4444;

}

/*==================================
        STATS
==================================*/

.profile-stats{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.profile-stat{

    display:flex;

    gap:15px;

    align-items:flex-start;

}

.profile-stat>i{

    width:46px;

    height:46px;

    border-radius:12px;

    background:#2A2F46;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#7C3AED;

    font-size:18px;

}

.profile-stat strong{

    display:block;

    color:#FFF;

    margin-bottom:6px;

}

.profile-stat span{

    color:#AEB6C8;

    line-height:1.6;

}

/*==================================
        DIFICULTAD
==================================*/

.difficulty-bar{

    margin-top:10px;

    width:100%;

    height:8px;

    background:#34384E;

    border-radius:20px;

    overflow:hidden;

}

.difficulty-fill{

    width:60%;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #7C3AED,
        #9F67FF
    );

}

.game-profile hr{

    border-color:rgba(255,255,255,.08);

    margin:35px 0;

}

/*==================================
    SYSTEM REQUIREMENTS
==================================*/

.system-requirements{

    margin-top: 20px;

    background:#1E2235;

    border-radius:18px;

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

    padding:35px;

}

/*==================================*/

.requirements-header{

    margin-bottom:35px;

}

.requirements-header h3{

    color:#FFF;

    font-size:30px;

    margin-bottom:10px;

}

.requirements-header h3 i{

    color:#7C3AED;

    margin-right:12px;

}

.requirements-header p{

    color:#9CA3AF;

    margin:0;

}

/*==================================*/

.requirements-card{

    background:#262B40;

    border-radius:18px;

    padding:28px;

    height:100%;

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

}

.minimum{

    border-left:5px solid #F59E0B;

}

.recommended{

    border-left:5px solid #22C55E;

}

/*==================================*/

.requirements-title{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:25px;

}

.requirements-title h4{

    color:#FFF;

    margin-bottom:5px;

}

.requirements-title span{

    color:#ffffff;

    font-size:14px;

}

/*==================================*/

.requirements-badge{

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.warning{

    background:#F59E0B;

    color:#FFF;

}

.success{

    background:#22C55E;

    color:#FFF;

}

/*==================================*/

.experience{

    margin-bottom:25px;

}

.experience span{

    display:block;

    color:#C6CBD9;

    margin-bottom:8px;

}

.experience-bar{

    height:8px;

    border-radius:20px;

    background:#34384E;

    overflow:hidden;

}

.experience-fill{

    height:100%;

    border-radius:20px;

}

.medium{

    width:55%;

    background:#F59E0B;

}

.high{

    width:95%;

    background:#22C55E;

}

/*==================================*/

.requirements-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.requirements-card li{

    display:flex;

    gap:16px;

    padding:16px 0;

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

}

.requirements-card li:last-child{

    border-bottom:none;

}

.requirements-card li i{

    width:45px;

    height:45px;

    border-radius:12px;

    background:#31354A;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#7C3AED;

    font-size:18px;

    flex-shrink:0;

}

.requirements-card li span{

    display:block;

    color:#9CA3AF;

    font-size:14px;

    margin-bottom:4px;

}

.requirements-card li strong{

    color:#FFF;

    font-weight:600;

}

/*==================================
        REVIEWS
==================================*/

.game-reviews{

    margin-top: 20px;;

    background:#1E2235;

    border-radius:18px;

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

    padding:30px;

}

/*==================================*/

.reviews-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.reviews-header h3{

    color:white;

    font-size:28px;

}

.reviews-header i{

    color:#FACC15;

}

/*==================================*/

.review-btn{

    background:#7C3AED;

    color:white;

    border:none;

    border-radius:10px;

    padding:12px 22px;

    font-weight:600;

}

/*==================================*/

/*==================================
        CALIFICACIÓN GENERAL
==================================*/

.overall-score{

    background:#262B40;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

}

.overall-score h1{

    color:#FFF;

    font-size:64px;

    font-weight:700;

    margin-bottom:20px;

}

.stars{

    color:#FACC15;

    font-size:18px;

    letter-spacing:5px;

    margin-bottom:18px;

}

.overall-score small{

    color:#B8C0D4;

    font-size:18px;

}

/*==================================*/

/*==================================
        DISTRIBUCIÓN DE ESTRELLAS
==================================*/

.rating-row{

    display:grid;

    grid-template-columns:55px 1fr 45px;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

}

.rating-row span{

    color:#FFF;

    font-weight:700;

}

.rating-row span i{

    color:#FACC15;

    margin-left:3px;

}

.rating-row strong{

    color:#FFF;

    text-align:right;

    font-weight:700;

}

.progress{

    height:8px;

    background:#34384E;

    border-radius:50px;

    overflow:hidden;

}

.progress-bar{

    background:#8B5CF6;

    border-radius:50px;

}

/*==================================*/

.review-card{

    margin-top:40px;

    background:#262B40;

    border-radius:16px;

    padding:25px;

}

.review-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

}

.review-user{

    display:flex;

    gap:15px;

    align-items:center;

}

.review-user img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

}

.review-user h5{

    color:white;

    margin-bottom:4px;

}

.review-user small{

    color:#9CA3AF;

}

.review-stars{

    color:#FACC15;

    font-size:20px;

}

.review-card p{

    color:#D1D5DB;

    line-height:1.8;

}

.review-actions{

    display:flex;

    gap:30px;

    margin-top:20px;

    color:#9CA3AF;

}

.review-actions i{

    color:#7C3AED;

}