@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Inconsolata:wght@300&display=swap');

:root{
    --bg-color:#111;
    --text-color:#ccc;
    --accent-color:#5a0000;
    --border-color:rgba(204,204,204,0.1);
    --hover-text-color:#fff;
}

/* =========================
   BODY
========================= */

body{
    background-color:var(--bg-color);
    color:var(--text-color);
    font-family:'Cormorant Garamond', serif;
    line-height:1.6;
    margin:0;
    padding:40px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    overflow-x:hidden;
    opacity:0;

    animation:fadeIn 1.5s ease-in-out forwards;
}

/* =========================
   FADE
========================= */

@keyframes fadeIn{

    to{
        opacity:1;
    }

}

/* =========================
   CONTENEDOR
========================= */

.container{

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

    border:1px solid var(--border-color);

    padding:50px 30px;

    background:rgba(17,17,17,0.85);

    backdrop-filter:blur(4px);
}

/* =========================
   TITULO
========================= */

h1{

    font-family:'Inconsolata', monospace;

    text-align:center;

    letter-spacing:3px;

    margin-bottom:30px;

    color:#fff;

    font-size:2.3rem;
}

/* =========================
   LAYOUT
========================= */

.game-info{

    display:flex;

    flex-direction:column;

    gap:30px;
}

/* =========================
   IZQUIERDA
========================= */

.game-left{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;
}

/* =========================
   CARRUSEL
========================= */

.carousel{

    position:relative;

    width:100%;

    max-width:400px;

    border:1px solid var(--border-color);

    overflow:hidden;
}

.carousel-images{

    position:relative;

    width:100%;
}

.carousel-image{

    width:100%;

    display:none;

    object-fit:cover;

    transition:0.3s;

    filter:grayscale(20%);
}

.carousel-image.active{
    display:block;
}

.carousel-image:hover{

    transform:scale(1.02);

    filter:grayscale(0%);
}

/* =========================
   VIDEO
========================= */

video.carousel-image{
    background:#000;
}

/* =========================
   BOTONES CARRUSEL
========================= */

.carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(0,0,0,0.45);

    color:#fff;

    border:none;

    padding:10px 14px;

    cursor:pointer;

    font-size:1rem;

    transition:0.3s;

    z-index:2;
}

.carousel-btn:hover{
    background:rgba(0,0,0,0.75);
}

.prev{
    left:0;
}

.next{
    right:0;
}

/* =========================
   PLATAFORMAS
========================= */

.platforms{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    justify-content:center;
}

.platforms span{

    border:1px solid rgba(255,255,255,0.1);

    padding:4px 10px;

    font-size:0.7rem;

    opacity:0.7;

    transition:0.3s;
}

.platforms span:hover{

    opacity:1;

    border-color:#fff;
}

/* =========================
   DETALLES
========================= */

.game-details{

    max-width:500px;

    margin:auto;
}

/* =========================
   BIO
========================= */

.biography{

    margin-bottom:25px;

    font-size:1.2rem;

    line-height:1.8;
}

/* =========================
   PRECIO
========================= */

.price-box{
    margin:20px 0;
}

.price{

    font-family:'Inconsolata', monospace;

    color:#fff;

    margin-bottom:20px;
}

.price .amount{
    font-size:1.8rem;
}

.price .currency{

    font-size:1rem;

    opacity:0.7;
}

/* =========================
   DESCUENTO
========================= */

.discount{

    font-family:'Inconsolata', monospace;

    font-size:0.9rem;

    padding:6px 10px;

    border:1px solid var(--accent-color);

    color:#ff4d4d;

    background:rgba(90,0,0,0.15);

    letter-spacing:1px;
}

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

.actions{

    display:flex;

    gap:20px;

    margin-top:25px;

    width:100%;

    flex-wrap:wrap;
}

/* BOTÓN GENERAL */

.btn{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    width:100%;

    padding:14px 22px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.08);

    color:#888 !important;

    text-decoration:none;

    font-family:'Inconsolata', monospace;

    letter-spacing:2px;

    font-size:0.85rem;

    cursor:pointer;

    transition:
    0.25s ease,
    transform 0.12s ease;

    box-sizing:border-box;

    appearance:none;

    -webkit-appearance:none;

    outline:none;

    box-shadow:none;
}

/* HOVER */

.btn:hover{

    color:#ddd !important;

    border-color:#5a0000;

    background:rgba(90,0,0,0.12);

    transform:translateY(-2px);
}

/* CLICK */

.btn:active{

    transform:scale(0.96);

    background:rgba(90,0,0,0.22);

    border-color:#7a0000;
}

/* BOTÓN COMPRAR */

.btn-buy{

    border-color:#5a0000;

    color:#ccc !important;
}

.btn-buy:hover{

    background:#5a0000;

    color:#fff !important;
}

/* =========================
   RESPONSIVE
========================= */

@media(min-width:768px){

    .game-info{

        flex-direction:row;

        align-items:flex-start;

        justify-content:center;
    }

}

@media(max-width:600px){

    .actions{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

}

@media(max-width:480px){

    h1{
        font-size:1.8rem;
    }

    .biography{
        font-size:1rem;
    }

    .container{
        padding:30px 20px;
    }

}
/* =========================================
   VOLVER
========================================= */

.back-games{

  position:fixed;

  top:20px;
  left:20px;

  z-index:9999;

  padding:14px 18px;

  border:1px solid rgba(255,255,255,0.08);

  background:rgba(10,10,10,0.88);

  backdrop-filter:blur(4px);

  color:#666;

  text-decoration:none;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  transition:0.3s;
}

.back-games:hover{

  color:#ddd;

  border-color:#5a0000;

  background:rgba(90,0,0,0.12);

  transform:translateX(-3px);
}
/* =========================================
   FIX COLOR ENLACE
========================================= */

.back-games,
.back-games:visited{

  color:#777 !important;

  text-decoration:none;
}

/* HOVER */

.back-games:hover{

  color:#ddd !important;
}