@font-face{font-family:Rowdies;src:url('/fonts/Rowdies-Light.woff2') format('woff2'),url('/fonts/Rowdies-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap} 
 @font-face{font-family:Rowdies;src:url('/fonts/Rowdies-Regular.woff2') format('woff2'),url('/fonts/Rowdies-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} 
 @font-face{font-family:Rowdies;src:url('/fonts/Rowdies-Bold.woff2') format('woff2'),url('/fonts/Rowdies-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} 

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #fff;
    font-family: "Rowdies", sans-serif; /* <-- Fuente añadida aquí */

    /* 1. Color de fondo base actualizado */
    background-color: #020818;

    /* 2. Capas de fondo: imagen arriba, luego gradiente */
    background-image:
        /* Capa superior: imagen principal */
        url('../img/portal.webp'),
        /* Capa inferior: gradiente circular */
        radial-gradient(circle at center, rgba(3,14,42,1) 15%, transparent 60%);

    /* Posición para cada capa de fondo (imagen, gradiente) */
    background-position:
        top center,    /* Para portal.webp */
        center center; /* Para el gradiente */

    /* Repetición para cada capa (imagen, gradiente) */
    background-repeat:
        no-repeat,     /* Para portal.webp */
        no-repeat;     /* Para el gradiente */

    /* Tamaño para cada capa (imagen, gradiente) */
    background-size:
        contain,       /* Para portal.webp */
        auto;          /* Para el gradiente (su tamaño se controla por sus color-stops) */
}

.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

/* MAIN: contenedor GRID 2x2 */
main {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 40px;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 120px auto 50px auto;
}

.main-footer {
    flex-shrink: 0;
    width: 100%;
}

.nav-icon-btn {
    background: none;
    border: none;
    padding: 0 .9em;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    line-height: 1;
    transition: background .15s;
}
.nav-icon-btn:focus,
.nav-icon-btn:hover {
    background: rgba(255,255,255,0.07);
    outline: none;
    border-radius: 8px;
}
.nav-icon-btn svg {
    display: block;
    height: 28px;
    width: 28px;
    stroke: #fff !important;
    color: #fff !important;
    fill: none !important;
    stroke-width: 1.7;
    transition: stroke 0.18s, color 0.18s;
}


/* Bloques de info centrada, ahora en grid */
.game-info-center-container {
    background: rgba(14, 18, 30, 0.93);
    border-radius: 5px;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.40), 0 1.5px 0 rgba(255,255,255,0.04) inset;
    padding: 0 0 1.7rem 0;
    min-width: 0;
    max-width: 600px;
    width: 94vw;
    text-align: center;
    border: 2.5px solid #2ca16d;
    backdrop-filter: blur(3px);
    animation: fadeInGultarInfo .9s cubic-bezier(.25,.46,.45,.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6em;
    margin: 0 auto;
}

@keyframes fadeInGultarInfo {
    from { opacity: 0; transform: scale(0.95);}
    to   { opacity: 1; transform: scale(1);}
}
.game-info-center-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 5px;
    object-fit: cover;
    margin: 0;
    box-shadow: none;
    background: #181a22;
    border: none;
    display: block;
}
.game-info-center-description {
    color: #e6e6e6;
    font-size: 1.05em;
    margin: 0 0 5px 0;
    text-shadow: 0 1px 2px #000;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: .01em;
    padding: 0 16px;
}

.img-lazy-hidden { visibility: hidden; opacity: 0; transition: opacity .3s; }
.img-lazy-visible { visibility: visible; opacity: 1; transition: opacity .3s; }

@media (max-width: 1100px) {
    main {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 24px;
        max-width: 98vw;
    }
    .game-info-center-container {
        max-width: 98vw;
    }
}
@media (max-width: 600px) {
    main {
        gap: 14px;
    }
    .game-info-center-container {
        width: 98vw;
        max-width: 98vw;
        padding: 0 0 1.3rem 0;
        border-radius: 14px;
    }
    .game-info-center-img {
        border-radius: 10px;
    }
}

/* ========== Características Overlay ========== */
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
}
.overlay-content {
    background: #fff;
    color: #000;
    padding: 20px 20px 18px 20px;
    border-radius: 10px;
    text-align: center;
    width: 97vw;
    max-width: 950px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0);
    animation: .22s forwards scaleUp;
    font-family: "Rowdies", sans-serif;
    box-shadow: 0 2px 20px #0005;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100000;
}
@keyframes scaleUp {
    to { transform: scale(1);}
}
.overlay-content img {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    display: block;
    object-fit: contain;
    border-radius: 12px;
}
.overlay-content h2 {
    margin: 8px 0 14px 0;
    font-size: 1.45em;
    letter-spacing: .01em;
}
.features-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 1.2em;
    width: 100%;
}
.gultar-feature-card {
    background: #f9f9f9;
    border: 1.6px solid #2ca16d;
    border-radius: 12px;
    box-shadow: 0 1px 8px #0001;
    flex: 1 1 260px;
    max-width: 290px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 18px 12px 18px;
    text-align: left;
    transition: box-shadow .18s, transform .18s;
    word-break: break-word;
}
.gultar-feature-card:hover {
    box-shadow: 0 4px 24px #2ca16d33, 0 1px 8px #0001;
    transform: translateY(-4px) scale(1.03);
}
.gultar-feature-title {
    font-size: 1.17em;
    font-weight: 700;
    color: #2ca16d;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.gultar-feature-title .emoji {
    font-size: 1.38em;
    margin-right: 4px;
}
.gultar-feature-content {
    font-size: 1.01em;
    color: #222;
    line-height: 1.54;
}
.overlay-content .cerrar-btn {
    margin-top: 12px;
    background: #6c757d;
    color: #fff;
    font-size: 1.12em;
    padding: 10px 0;
    border: none;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    font-family: "Rowdies", sans-serif;
    transition: background .2s;
}
.overlay-content .cerrar-btn:hover {
    background: #208c57;
}
@media (max-width: 950px) {
    .features-cards-container { gap: 14px; }
    .gultar-feature-card { min-width: 180px; max-width: 340px;}
}
@media (max-width: 650px) {
    .features-cards-container { flex-direction: column; align-items: center; }
    .gultar-feature-card { width: 98%; max-width: 370px; min-width: 0;}
    .overlay-content { max-width: 99vw; }
}

@media (max-width: 768px) {
    body {
        /* background-color: #020818; se hereda */
        background-image:
            /* Capa superior: imagen móvil */
            url('../img/portal-moviles.webp'),
            /* Capa inferior: gradiente circular */
            radial-gradient(circle at center, rgba(3,14,42,1) 15%, transparent 60%);

        background-position:
            top center,    /* Para portal-moviles.webp */
            center center; /* Para el gradiente */

        background-repeat:
            no-repeat,     /* Para portal-moviles.webp */
            no-repeat;     /* Para el gradiente */

        background-size:
            contain,       /* Para portal-moviles.webp */
            auto;          /* Para el gradiente */
    }
}