/* CSS General */

/* Variables de color y texto */
:root {
    --N-Light-Gray: #F5F5F5;
    --N-Gray: #9E9E9E;
    --Background-Color-Blueish: #1D1740;
    --Background-Color-Dark: #120E26;
    --Primary-Color: #84E9DD;
    --Primary-Color-Light: #CCF8F2;
    --Primary-Color-Dark: #2D8A81;
    --Secondary-Color-Purple: #9C6ADE;
    --Secondary-Color-Purple-Dark: #6E41A5;
    --Third-Color: #FF6F61;
    
    --Default-Font: 'Poppins', sans-serif;
    --Font-Size-Paragraph: 14px;
    --Font-Size-H4: 16px;
    --Font-Size-H3: 24px;
    --Font-Size-H2: 28px;
    --Font-Size-H1: 36px;
}

body {
    background-color: var(--colecci-n-variable-background-color-dark);
    color: var(--colecci-n-variable-n-light-gray);
    min-height: auto;
    min-width: auto;
    display: grid;
    grid-template-columns: auto 1fr; /*Va a ser tan gramde como necesite*/
    grid-template-rows: auto 1fr auto; /*El footer va a ocupar el espacio que necesite*/
    grid-template-areas:
        "sidebar main"
        "sidebar main"
        "footer footer";
    
}
h1 {
    font-family: var(--h1-font-family);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
    letter-spacing: var(--h1-letter-spacing);
    line-height: var(--h1-line-height);
    font-style: var(--h1-font-style);
}
h2 {
    font-family: var(--h2-font-family);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
    letter-spacing: var(--h2-letter-spacing);
    line-height: var(--h2-line-height);
    font-style: var(--h2-font-style);
}
h3 {
    font-family: var(--h3-font-family);
    font-weight: var(--h3-font-weight);
    font-size: var(--h3-font-size);
    letter-spacing: var(--h3-letter-spacing);
    line-height: var(--h3-line-height);
    font-style: var(--h3-font-style);
}

/*Footer*/
    footer {
        grid-area: footer;
        background-color: var(--colecci-n-variable-background-color-dark);
        color: var(--colecci-n-variable-n-light-gray);
        text-align: center;
        padding: min(10vw, 50px);
        font-size: min(1.5vw, 12px);
        z-index: 1;
        height: auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    footer a {
        color: var(--colecci-n-variable-n-light-gray);
        text-decoration: none;
        font-size: var(--paragraph-font-size);
    }

    footer a:hover{
        color: var(--colecci-n-variable-PC-light-1);
    }

    .footer-top, .footer-link-sections, .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: start;
        padding: 10px;
        width: 100%;
    }

    .footer-bottom {
        align-items: center;
    }

    /*Footer-top*/
    .newsletter-form {
    justify-self: center;
    }

    /*Footer-link-sections*/
    .footer-link-sections {
        gap: min(6vw, 15px);
        margin-top: 20px;  
    }

    .footer-link-sections-section ul {
        list-style: none;
        margin-left: 2em;
    }

    .footer-link-sections-section{
        text-align: left;
    }
    /*Section Title button*/
    .footer-link-sections-section .collapsible-btn {
        background: none;
        border: none;
        color: var(--colecci-n-variable-n-light-gray);
        font-size: var(--Font-Size-H3);
        font-weight: var(--h3-font-weight);
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        cursor: pointer;
        padding: .5em;
        border-radius: .5em;
    }
        /*Hidden svg*/
        .footer-link-sections-section .collapsible-btn svg {
            display: none;
        }



/*Main*/
    main a {
        text-decoration: none;
        color: var(--colecci-n-variable-accent-color-yellow);
    }
    main p {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    /*Container*/
    .container {
        padding: min(4vw, 20px);

        h2, p { 
            margin-top: 1em;
        }
    }
    .container-main{
        padding: 20px;
        background-color: var(--colecci-n-variable-background-color-blueish);
        
    }
    .container-centered {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }




/* CSS Específico */
/* game */

    #Game {
        background-color: var(--Background-Color-Blueish);
    }

    .game-address-navbar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 20px 0 20px 20px;

        .breadcrumb {
            list-style: none;
            font-size: var(--Font-Size-H4);
            color: var(--Primary-Color-Light);

            a {
                text-decoration: none;
                color: var(--Primary-Color-Light);
            }

            a:hover {
                text-decoration: underline;
            }
        }
    }

    #GameContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-bottom: 50px;
    }

    #GameWindow {
        width: 1000px;
        height: 600px;
        background-image: url("../media/ChatGPT Image 16 sept 2025, 10_05_29 p.m..png");
        background-size: cover;
    }

    #GameDetails, #GameHowtoPlay, #CommentsSection {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 20px;
        padding: 20px;
        border-radius: 20px;
    }

    #GameDetails, #GameHowtoPlay {
        background-color: var(--Background-Color-Dark);
    }

    .detail-title {
        font-family: var(--Default-Font);
        font-weight: var(--h2-font-weight);
        font-size: var(--Font-Size-H2);
        align-items: start;
    }

    #GameInformation {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .detail-info {
        font-family: var(--Default-Font);
        font-weight: var(--h3-font-weight);
        font-size: var(--Font-Size-H3);
    }

    #GameDescription {
        display: flex;
        align-items: start;
        justify-content: space-between;
    }

    .share-button {
        /* Estructura y tamaño */
        padding: 5px 14px;
        
        /* Colores */
        background-color: var(--Background-Color-Dark);
        color: #c8b6ff;
        
        /* Borde */
        border: 3px solid #c8b6ff;
        border-radius: 15px;
        
        /* Tipografía */
        font-family: var(--Default-Font);
        font-size: var(--Font-Size-H3);
        font-weight: var(--h3-font-weight);
        text-transform: lowercase;
        letter-spacing: -1px;
        
        /* Interacción */
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .detail-description {
        font-family: var(--Default-Font);
        font-weight: var(--h4-font-weight);
        font-size: var(--Font-Size-H4);
    }

    .how-to-play-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .how-to-play-content-text, .how-to-play-content-media {
            flex-direction: column;
            flex-direction: column;

            div span {
                font-weight: var(--h3-font-weight);
                font-size: var(--Font-Size-H3);
            }
        }
        
        .how-to-play-content-text li {
            margin-left: 20px;
        }

        .how-to-play-content-media img {
            width: 386px;
            height: 240px;
            background-size: cover;
        }
    }

    /* Add comment section */

    #AddCommentForm {
        background: var(--Background-Color-Dark);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 25px;
        border: 2px solid var(--Primary-Color);
    }

    #CommentText {
        flex: 1;
        background: var(--Background-Color-Dark);
        padding: 1rem 1.5rem;
        border-radius: 25px;
        border: none;
        font-size: 0.95rem;
        font-family: inherit;
        resize: none;
        min-height: 50px;
        transition: all 0.3s ease;
    }

    #CommentText::placeholder {
        color: var(--N-Gray);
    }

    #AddCommentForm button[type="submit"] {
        right: 1rem;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }

    #AddCommentForm button[type="submit"] img {
        width: 24px;
        height: 24px;
    }

    /* Contador de caracteres (si existe en el DOM) */
    #CharacterCount {
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--N-Gray);
        font-size: 0.85rem;
        pointer-events: none;
    }

    /* Artículo de comentario */
    .comment {
        background: none;
        border: 1px solid var(--Primary-Color);
        border-radius: 16px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }
    .comment__info {
        display: flex;
        gap: 1rem;
    }
    .comment__content {
        flex: 1;
    }
    .comment__header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .comment__avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid var(--N-Light-Gray);
        object-fit: cover;
    }
    .comment__username {
        color: var(--N-Light-Gray);
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }
    .comment__timestamp {
        color: var(--N-Light-Gray);
        font-size: 0.85rem;
    }
    .comment__actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .comment__like-button,
    .comment__flag-button {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    .comment__like-count {
        color: var(--Primary-Color);
        font-size: 0.9rem;
        font-weight: 600;
    }
    .comment__text {
        color: var(--N-Light-Gray);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
    }

    /* Responsive */
    @media (max-width: 800px) {
        #CommentsContainer {
            padding: 1rem;
        }

        .comment {
            padding: 1rem;
        }

        .comment__header {
            flex-wrap: wrap;
        }

        .comment__actions {
            width: 100%;
            margin-top: 0.5rem;
            margin-left: 0;
            justify-content: flex-end;
        }

        #CommentText {
            font-size: 0.9rem;
            padding: 0.875rem 3.5rem 0.875rem 1.25rem;
        }
    }

    /* home y games */
    #Games {
        padding-right: 10px;
        margin-top: 20px;
        padding-left: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    @media (max-width: 768px) {
        .game-carousel {
            max-width: 100vw;
        }

        .carousel-container {
            overflow-x: auto;
        }

        .carousel-track {
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

        #RecentGames {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
    }

    #RecentGames {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        width: 100vw;

        button {
            background-color: var(--Background-Color-Blueish);
            color: var(--N-Light-Gray);
            font-size: var(--Font-Size-H3);
            font-weight: var(--h3-font-weight);

            border: none;
            border-radius: 20px;

            width: min(50vw, 200px);
            height: min(20vw, 160px);
            flex-shrink: 0;
        }
    }

    .recent-game-cards {
        display: flex;
        gap: 10px;
        margin-left: 20px;

    }

    .recent-game-card 
        img {
        width: min(12vw, 185px);
        height: min(10vw, 160px);
        object-fit: cover;
        border-radius: 8px;
        margin-right: 10px;
    }

    .carousel-container {
        display: flex;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .game-carousel {
        max-width: 90vw;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .carousel-button-left, .carousel-button-right {
        border: none;
        border-radius: 20px;
        background-color: var(--Background-Color-Blueish);
        width: 125px;
        height: 250px;
        flex-shrink: 0; /* Evita que se achiquen */
        min-width: 125px; /* Asegura el ancho mínimo */
        min-height: 250px; /* Asegura la altura mínima */
        transition: box-shadow 0.3s, transform 0.2s;
    }

    .carousel-button-left:hover, .carousel-button-right:hover {
        background-color: var(--Background-Color-Dark);
        animation: floating 1.2s ease-in-out infinite alternate;
    }

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

    .carousel-track {
        display: flex;
        overflow: hidden;
        scroll-behavior: smooth;
        transition: transform 0.25s cubic-bezier(1, 0.2, 0.2, 0.4);
    }

    .carousel-track.skew-right {
        transform: skewX(10deg);
    }

    .carousel-track.skew-left {
        transform: skewX(-10deg);
    }

    .game-card {
        display: flex;
        margin-right: 20px;
    }

    .game-card img {
        width: min(30vw, 250px);
        height: min(28vw, 210px);
        object-fit: cover;
        border-radius: 8px;
        overflow: scroll;
    }

/* game */



/*BUTTONS*/
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-1px);
        }
    }
    /*Primary Button --> blur glow effect*/
        .btn-primary {
            background: var(--Primary-Color);
            color: var(--Background-Color-Blueish);
            font-size: var(--Font-Size-H3);
            font-weight: var(--h3-font-weight);
            border: none;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            margin-top: 6px;
            transition: background 0.2s, color 0.2s;

            animation: float 200ms ease-in-out infinite alternate;
            box-shadow: 5px 5px 5px var(--colecci-n-variable-black);
        }
        .btn-primary:hover {
            background: var(--Secondary-Color-Purple);
            color: var(--N-Light-Gray);
            animation: glow-loop 2.5s infinite;
        }
            @keyframes glow-loop {
                0% {
                    box-shadow: 0 0 0px 0px var(--Secondary-Color-Purple);
                }
                40% {
                    box-shadow: 0 0 18px 4px var(--Secondary-Color-Purple);
                }
                60% {
                    box-shadow: 0 0 8px 1px var(--Secondary-Color-Purple);
                }
                100% {
                    box-shadow: 0 0 0px 0px var(--Secondary-Color-Purple);
                }
            }
    /*Secondary Button --> */
        .btn-secondary, .btn-secondary a {
            padding: 5px 5px;
            font-size: 18px;
            color: var(--N-Light-Gray);
            background-color: var(--colecci-n-variable-accent-color-magenta);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.1s ease;
            font-size: var(--Font-Size-H3);
            font-weight: var(--h3-font-weight);

            animation: float 200ms ease-in-out infinite alternate;
            box-shadow: 5px 5px 5px var(--colecci-n-variable-black);
        
        }
        .btn-secondary:hover {
            animation: quiver 0.3s linear infinite;
        }
        .btn-secondary:active {
            transform: scale(0.95);
        }
            @keyframes quiver {
                0% { 
                    transform: translateX(0);
                }
                25% { 
                    transform: translateX(-2px); 
                }
                50% { 
                    transform: translateX(2px); 
                }
                75% { 
                    transform: translateX(-2px); 
                }
                100% { 
                    transform: translateX(0); 
                }
            }
            

    /*Third Button --> border with icon, transparent background*/
        .btn-third {
            background: transparent;
            border: 2px solid var(--N-Light-Gray);
            color: var(--N-Light-Gray);
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            margin-top: 6px;
            transition: color 0.2s, border-color 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;

            font-size: var(--h3-font-size);
            font-weight: var(--h3-font-weight);

            animation: float 200ms ease-in-out infinite alternate;
            box-shadow: 5px 5px 5px var(--colecci-n-variable-black);
        }

        .btn-third:hover {
            border-color: var(--Third-Color);
            color: var(--Third-Color);
            box-shadow: 10px 15px 15px var(--colecci-n-variable-black);
            animation: float-tilt 2s ease-in-out infinite alternate;
        }
            @keyframes float-tilt {
                0% {
                    transform: translateY(0) rotate(0deg);
                }
                50% {
                    transform: translateY(-8px) rotate(3deg);
                }
                100% {
                    transform: translateY(0) rotate(0deg);
                }
            }

@media screen and (max-width: 800px) {
    /*Footer*/
        footer {
            z-index: 0;
        }

        .footer-top, .footer-link-sections, .footer-bottom {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 50px;
        }

    /*Collapsible Menu*/
        .footer-link-sections-section .collapsible-btn svg {
            display: block;
        }
        .collapsible-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            padding-left: 0;
            margin: 0;
        }
        .collapsible-menu.open {
            max-height: 500px; /* Ajusta según el contenido */
        }
        .collapsible-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            width: 100%;
            padding: 10px 0;
        }
        .collapsible-btn h3 {
            margin: 0;
        }
        .collapsible-btn svg {
            transition: transform 0.3s ease;
        }
        .collapsible-btn.active svg {
            transform: rotate(180deg);
        }
        .footer-link-sections-section .collapsible-btn:hover {
            border-bottom: 1px solid var(--colecci-n-variable-PC-dark-1);
        }

}