/* Zonaferoz — sistema de juegos (ficha, sinopsis, galería, créditos, descargas). */

/* ===== ficha ===== */

            .zf-game-info {
                background:#18181c;
                border:1px solid rgba(255,255,255,.08);
                border-radius:10px;
                padding:20px;
                margin:25px 0;
                color:#fff;
                box-shadow:0 8px 30px rgba(0,0,0,.18);
            }
            .zf-game-info-header {
                display:flex;
                gap:20px;
                align-items:center;
                margin-bottom:20px;
            }
            .zf-game-info-cover {
                width:120px;
                flex:0 0 120px;
            }
            .zf-game-info-cover img {
                display:block;
                width:100%;
                height:165px;
                object-fit:cover;
                border-radius:8px;
            }
            .zf-game-info-main {
                min-width:0;
            }
            .zf-game-info-main h2 {
                margin:0 0 10px;
                font-size:25px;
                line-height:1.2;
            }
            .zf-game-rating {
                display:flex;
                align-items:center;
                gap:10px;
                color:#bbb;
            }
            .zf-game-stars {
                white-space:nowrap;
                letter-spacing:2px;
            }
            .zf-star {
                font-size:18px;
            }
            .zf-star-full,
            .zf-star-half {
                color:#f5c542;
            }
            .zf-star-empty {
                color:#44444c;
            }
            .zf-game-details {
                display:grid;
                grid-template-columns:repeat(2,minmax(0,1fr));
                gap:10px;
            }
            .zf-game-detail {
                background:#111114;
                border:1px solid rgba(255,255,255,.06);
                border-radius:8px;
                padding:12px 14px;
            }
            .zf-game-detail span {
                display:block;
                color:#999;
                font-size:12px;
                margin-bottom:5px;
            }
            .zf-game-detail strong {
                display:block;
                color:#fff;
                font-size:14px;
                line-height:1.4;
            }
            @media(max-width:600px) {
                .zf-game-info-header {
                    align-items:flex-start;
                }
                .zf-game-info-cover {
                    width:90px;
                    flex-basis:90px;
                }
                .zf-game-info-cover img {
                    height:125px;
                }
                .zf-game-info-main h2 {
                    font-size:20px;
                }
                .zf-game-details {
                    grid-template-columns:1fr;
                }
            }

/* ===== sinopsis ===== */

            .zf-synopsis-box {
                background:#18181c;
                border:1px solid rgba(255,255,255,.08);
                border-radius:10px;
                padding:20px;
                margin:25px 0;
                color:#ddd;
            }
            .zf-synopsis-title {
                display:flex;
                align-items:center;
                gap:10px;
                margin-bottom:15px;
            }
            .zf-synopsis-title span {
                font-size:20px;
            }
            .zf-synopsis-title h2 {
                margin:0;
                color:#fff;
                font-size:20px;
            }
            .zf-synopsis-content {
                color:#c7c7cc;
                font-size:15px;
                line-height:1.75;
            }
            .zf-synopsis-content p:last-child {
                margin-bottom:0;
            }

/* ===== galeria ===== */

            .zf-gallery-box {
                background:#18181c;
                border:1px solid rgba(255,255,255,.08);
                border-radius:10px;
                padding:20px;
                margin:25px 0;
                color:#fff;
            }
            .zf-gallery-title {
                display:flex;
                align-items:center;
                gap:10px;
                margin-bottom:15px;
            }
            .zf-gallery-title span {
                font-size:20px;
            }
            .zf-gallery-title h2 {
                margin:0;
                color:#fff;
                font-size:20px;
            }
            .zf-gallery-grid {
                display:grid;
                grid-template-columns:
                    repeat(
                        3,
                        minmax(0,1fr)
                    );
                gap:10px;
            }
            .zf-gallery-item {
                display:block;
                width:100%;
                padding:0;
                overflow:hidden;
                border-radius:8px;
                background:#111114;
                border:1px solid rgba(255,255,255,.06);
                cursor:pointer;
                appearance:none;
                -webkit-appearance:none;
            }
            .zf-gallery-item img {
                display:block;
                width:100%;
                aspect-ratio:16/9;
                object-fit:cover;
                transition:
                    transform .25s ease,
                    opacity .25s ease;
            }
            .zf-gallery-item:hover img {
                transform:scale(1.04);
                opacity:.9;
            }
            /* ==================================================
             * LIGHTBOX
             * ================================================== */
            .zf-lightbox {
                position:fixed;
                inset:0;
                z-index:999999;
                display:none;
                align-items:center;
                justify-content:center;
            }
            .zf-lightbox.zf-lightbox-active {
                display:flex;
            }
            .zf-lightbox-backdrop {
                position:absolute;
                inset:0;
                background:rgba(0,0,0,.92);
                backdrop-filter:blur(4px);
            }
            .zf-lightbox-content {
                position:relative;
                z-index:2;
                display:flex;
                align-items:center;
                justify-content:center;
                width:100%;
                height:100%;
                padding:60px 80px;
            }
            .zf-lightbox-image {
                display:block;
                max-width:calc(100vw - 180px);
                max-height:calc(100vh - 120px);
                width:auto;
                height:auto;
                object-fit:contain;
                border-radius:8px;
                box-shadow:
                    0 20px 60px
                    rgba(0,0,0,.5);
            }
            .zf-lightbox-close,
            .zf-lightbox-prev,
            .zf-lightbox-next {
                position:absolute;
                z-index:5;
                display:flex;
                align-items:center;
                justify-content:center;
                width:46px;
                height:46px;
                border:1px solid rgba(255,255,255,.15);
                border-radius:50%;
                background:rgba(17,17,20,.9);
                color:#fff;
                cursor:pointer;
                font-family:Arial,sans-serif;
                line-height:1;
                transition:
                    background .2s ease,
                    border-color .2s ease,
                    transform .2s ease;
            }
            .zf-lightbox-close:hover,
            .zf-lightbox-prev:hover,
            .zf-lightbox-next:hover {
                background:#8b5cf6;
                border-color:#8b5cf6;
            }
            .zf-lightbox-close {
                top:20px;
                right:20px;
                font-size:30px;
            }
            .zf-lightbox-prev {
                left:20px;
                top:50%;
                transform:translateY(-50%);
                font-size:40px;
            }
            .zf-lightbox-next {
                right:20px;
                top:50%;
                transform:translateY(-50%);
                font-size:40px;
            }
            .zf-lightbox-prev:hover,
            .zf-lightbox-next:hover {
                transform:translateY(-50%) scale(1.05);
            }
            .zf-lightbox-counter {
                position:absolute;
                bottom:20px;
                left:50%;
                transform:translateX(-50%);
                color:#ddd;
                background:rgba(17,17,20,.9);
                border:1px solid rgba(255,255,255,.1);
                border-radius:20px;
                padding:6px 12px;
                font-size:12px;
            }
            @media(max-width:700px) {
                .zf-gallery-grid {
                    grid-template-columns:
                        repeat(
                            2,
                            minmax(0,1fr)
                        );
                }
                .zf-lightbox-content {
                    padding:60px 15px;
                }
                .zf-lightbox-image {
                    max-width:calc(100vw - 30px);
                    max-height:calc(100vh - 150px);
                }
                .zf-lightbox-close {
                    top:12px;
                    right:12px;
                }
                .zf-lightbox-prev {
                    left:10px;
                }
                .zf-lightbox-next {
                    right:10px;
                }
                .zf-lightbox-prev,
                .zf-lightbox-next {
                    width:40px;
                    height:40px;
                    font-size:32px;
                }
            }

/* ===== creditos ===== */

            .zf-credits-box {
                background:#18181c;
                border:1px solid rgba(255,255,255,.08);
                border-radius:10px;
                padding:20px;
                margin:25px 0;
                color:#fff;
            }
            .zf-credits-profile {
                display:flex;
                align-items:center;
                gap:15px;
            }
            .zf-credits-avatar {
                width:52px;
                height:52px;
                display:flex;
                align-items:center;
                justify-content:center;
                background:#111114;
                border:1px solid rgba(255,255,255,.08);
                border-radius:50%;
                font-size:23px;
            }
            .zf-credits-label {
                color:#999;
                font-size:12px;
                margin-bottom:4px;
            }
            .zf-credits-name {
                font-size:17px;
                font-weight:700;
            }
            .zf-credits-support {
                margin-top:20px;
                padding-top:18px;
                border-top:1px solid rgba(255,255,255,.07);
            }
            .zf-credits-support-title {
                font-weight:700;
                margin-bottom:12px;
            }
            .zf-credits-links {
                display:grid;
                grid-template-columns:
                    repeat(
                        3,
                        minmax(0,1fr)
                    );
                gap:9px;
            }
            .zf-credits-link {
                display:flex;
                align-items:center;
                gap:9px;
                padding:10px 12px;
                background:#111114;
                border:1px solid rgba(255,255,255,.07);
                border-radius:7px;
                color:#ddd;
                text-decoration:none;
                transition:
                    border-color .2s ease,
                    transform .2s ease;
            }
            .zf-credits-link:hover {
                border-color:#8b5cf6;
                transform:translateY(-1px);
            }
            .zf-credits-link-icon {
                width:22px;
                text-align:center;
            }
            .zf-credits-link-text {
                flex:1;
                font-size:13px;
            }
            .zf-credits-link-arrow {
                color:#8b5cf6;
            }
            @media(max-width:700px) {
                .zf-credits-links {
                    grid-template-columns:
                        repeat(
                            2,
                            minmax(0,1fr)
                        );
                }
            }

/* ===== descargas ===== */

            .zf-downloads-box {
                background:#18181c;
                border:1px solid rgba(255,255,255,.08);
                border-radius:10px;
                padding:20px;
                margin:25px 0;
                color:#fff;
            }
            .zf-downloads-title {
                display:flex;
                align-items:center;
                gap:10px;
                margin-bottom:15px;
            }
            .zf-downloads-title span {
                font-size:20px;
            }
            .zf-downloads-title h2 {
                margin:0;
                font-size:20px;
            }
            .zf-downloads-list {
                display:flex;
                flex-direction:column;
                gap:10px;
            }
            .zf-download-card {
                background:#111114;
                border:1px solid rgba(255,255,255,.07);
                border-radius:8px;
                padding:13px;
            }
            .zf-download-main {
                display:flex;
                align-items:center;
                gap:15px;
            }
            .zf-download-platform {
                display:flex;
                align-items:center;
                gap:10px;
                flex:1;
                min-width:0;
            }
            .zf-download-platform-icon {
                width:40px;
                height:40px;
                display:flex;
                align-items:center;
                justify-content:center;
                border-radius:7px;
                background:#18181c;
                font-size:18px;
            }
            .zf-download-platform-info strong {
                display:block;
                font-size:14px;
            }
            .zf-download-platform-info span {
                display:block;
                color:#888;
                font-size:12px;
                margin-top:2px;
            }
            .zf-download-server {
                min-width:100px;
            }
            .zf-download-server-label {
                display:block;
                color:#777;
                font-size:10px;
                text-transform:uppercase;
            }
            .zf-download-server strong {
                font-size:13px;
            }
            .zf-download-button {
                display:inline-flex;
                align-items:center;
                justify-content:center;
                padding:9px 15px;
                background:#8b5cf6;
                color:#fff !important;
                border-radius:7px;
                text-decoration:none !important;
                font-size:13px;
                font-weight:700;
            }
            .zf-download-button:hover {
                opacity:.9;
            }
            @media(max-width:650px) {
                .zf-download-main {
                    flex-wrap:wrap;
                }
                .zf-download-platform {
                    width:100%;
                    flex-basis:100%;
                }
                .zf-download-server {
                    flex:1;
                }
            }

/* ===== cambios ===== */

            .zf-cambios-box {
                background: #18181c;
                border: 1px solid #303038;
                border-radius: 10px;
                padding: 20px;
                margin-bottom: 20px;
                color: #e0e0e0;
                font-size: 14px;
                line-height: 1.6;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            }
            .zf-cambios-box p {
                margin-bottom: 12px;
            }
            .zf-cambios-box p:last-child {
                margin-bottom: 0;
            }

/* ===== global ===== */

            .zf-game-info,
            .zf-synopsis-box,
            .zf-rating-box,
            .zf-gallery-box,
            .zf-credits-box,
            .zf-downloads-box {
                box-sizing:border-box;
                max-width:100%;
            }
            .zf-game-info *,
            .zf-synopsis-box *,
            .zf-rating-box *,
            .zf-gallery-box *,
            .zf-credits-box *,
            .zf-downloads-box * {
                box-sizing:border-box;
            }


/* ==========================================================
   DISEÑO DE LA ENTRADA DE JUEGO (2 columnas)
========================================================== */

.zf-game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 26px;
    align-items: start;
}

.zf-game-layout--single {
    grid-template-columns: minmax(0, 1fr);
}

.zf-game-main,
.zf-game-side {
    min-width: 0;
}

.zf-game-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.zf-game-side > section {
    margin: 0 !important;
}

.zf-game-free {
    margin-top: 22px;
}

.zf-anchor {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

.zf-jump-downloads {
    display: none;
}

@media (max-width: 980px) {

    .zf-game-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .zf-game-side {
        position: static;
    }

    .zf-jump-downloads {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0 0 18px;
        padding: 13px 18px;
        border-radius: 12px;
        background: linear-gradient(135deg, #8b5cf6, #6d3df0);
        color: #fff !important;
        font-weight: 800;
        text-decoration: none !important;
        box-shadow: 0 8px 22px rgba(139, 92, 246, .35);
    }
}

/* ==========================================================
   MEJORAS VISUALES
========================================================== */

.zf-game-info,
.zf-synopsis-box,
.zf-gallery-box,
.zf-credits-box,
.zf-downloads-box,
.zf-cambios-box {
    position: relative;
    margin: 0 0 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), #18181c;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.zf-game-info::before,
.zf-downloads-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
    opacity: .9;
}

.zf-cambios-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.zf-cambios-title h2 {
    margin: 0;
    font-size: 18px;
}

.zf-download-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.zf-download-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, .55);
    box-shadow: 0 10px 26px rgba(139, 92, 246, .22);
}

.zf-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #6d3df0);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(139, 92, 246, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.zf-download-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(139, 92, 246, .5);
}

.zf-gallery-item img {
    transition: transform .3s ease;
}

.zf-gallery-item:hover img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {

    .zf-download-card,
    .zf-download-button,
    .zf-gallery-item img {
        transition: none;
    }
}

/* Ajustes de la columna lateral */
.zf-game-side .zf-credits-links {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.zf-game-side .zf-credits-link-arrow {
    display: none;
}

.zf-game-side .zf-download-main {
    flex-wrap: wrap;
}

.zf-game-side .zf-download-platform {
    flex: 1 1 100%;
}

.zf-game-side .zf-download-server {
    flex: 1;
    min-width: 0;
}

.zf-game-side .zf-download-server-label {
    display: block;
}

/* Sin altura máxima ni scroll interno: todos los enlaces de descarga siempre alcanzables. */
.zf-game-layout .zf-game-side {
    position: static !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.zf-game-layout .zf-game-side > section {
    flex: 0 0 auto;
    max-height: none !important;
    overflow: visible !important;
}

.zf-game-info-name {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #cfcfe0;
}