:root {
    --gold: #f3c34d;
    --gold-light: #ffe08a;
    --gold-dark: #b8860b;
    --bg-dark: #050505;
    --card-bg: rgba(15, 15, 15, 0.96);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* RESET BÁSICO */
* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-dark) no-repeat center center fixed;
    background-size: cover;
    color: white;
    text-align: center;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- HEADER Y LOGO --- */
.header-full {
    width: 100%;
    padding: 20px 10px;
    display: flex; justify-content: center;
}

.main-logo { 
    width: 90%; max-width: 400px; height: auto;
    filter: drop-shadow(0 0 20px rgba(243, 195, 77, 0.4));
}

/* --- BANNER --- */
.hero-banner {
    width: 100%; display: flex; justify-content: center;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('background-banner.png') center/cover;
    border-top: 1px solid rgba(243, 195, 77, 0.3); border-bottom: 1px solid rgba(243, 195, 77, 0.3);
    padding: 30px 0; margin-bottom: 30px; box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

.hero-content { width: 90%; max-width: 1200px; padding: 0 10px; }
.hero-content h1 { 
    color: var(--gold); text-transform: uppercase; margin: 0 0 10px 0; line-height: 1.2;
    font-size: clamp(1.4rem, 5vw, 2.2rem); /* Texto fluido */
}
.hero-content p { font-size: clamp(0.85rem, 3vw, 1rem); color: #ccc; margin: 0; }

/* --- GRID PRINCIPAL --- */
.main-container { width: 100%; max-width: 1200px; padding: 0 15px; }

.games-grid { 
    display: grid; 
    /* CAMBIO CLAVE: Bajamos de 300px a 250px para soportar pantallas Fold/Mini */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 25px; 
    margin-bottom: 80px; 
    justify-content: center; 
}

/* --- CARDS --- */
.game-card { perspective: 1200px; height: 430px; width: 100%; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.game-card.is-flipped .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 8px;
    padding: 12px 15px !important; /* Padding lateral un poco más ajustado */
    box-sizing: border-box; display: flex; flex-direction: column;
    background: var(--card-bg); backdrop-filter: blur(15px); border: 1px solid var(--glass-border);
}

.card-back { transform: rotateY(180deg); text-align: left; align-items: flex-start; justify-content: flex-start !important; }
.active-card .card-front, .active-card .card-back { border: 1px solid var(--gold); }

/* --- DETALLES --- */
.details-header { margin: 0 0 5px 0 !important; width: 100%; }
.details-header h3 { margin: 0 !important; line-height: 1; font-size: 1.1rem; color: var(--gold); }
.version-tag { font-size: 0.65rem; background: rgba(243, 195, 77, 0.15); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--gold); display: inline-block; margin-top: 5px; font-weight: bold; color: var(--gold-light); }

.card-intro { width: 100%; text-align: center; margin-bottom: 10px; }
.highlight-tag { display: block; color: var(--gold); font-weight: bold; font-size: 0.75rem; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; text-shadow: 0 0 8px rgba(243, 195, 77, 0.3); }

/* Listas y textos ajustables */
.server-specs { list-style: none; padding: 0; margin: 4px 0; font-size: 0.75rem; }
.server-specs li { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rates-box { background: rgba(255,255,255,0.05); padding: 5px; border-radius: 4px; font-size: 0.75rem; margin: 5px 0; border-left: 3px solid var(--gold); }
.boss-list, .speed-server-info, .desc-spoiler { font-size: 0.7rem; line-height: 1.2; margin-top: 4px; color: #aaa; }

.logo-container { position: relative; width: 100%; height: 80px; margin-bottom: 8px; display: flex; justify-content: center;}
.game-logo { width: 100%; height: 100%; object-fit: contain; position: absolute; transition: opacity 0.5s ease; }
.logo-hover { opacity: 0; }
.game-card:hover .logo-default { opacity: 0; transition-delay: 1.5s; }
.game-card:hover .logo-hover { opacity: 1; transition-delay: 1.5s; }

.footer-card-back { margin-top: auto; width: 100%; display: flex; justify-content: center; }
.btn-flip { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--gold); cursor: pointer; font-size: 1rem; z-index: 10; }
.btn-ingresar { background: linear-gradient(to bottom, var(--gold-light), var(--gold), var(--gold-dark)); color: #000; text-decoration: none; padding: 10px 0; border-radius: 4px; font-weight: bold; text-transform: uppercase; font-size: 0.75rem; margin-top: auto; text-align: center; width: 100%; }
.btn-more { color: white; text-decoration: underline; font-size: 0.75rem; padding: 5px 0; }
.btn-soon { background: rgba(255,255,255,0.06); color: #666; border: 1px solid rgba(255,255,255,0.1); padding: 10px 0; width: 100%; border-radius: 4px; font-size: 0.75rem; margin-top: auto; }

.spoiler-content { filter: blur(12px); opacity: 0.3; transition: filter 0.6s, opacity 0.6s; }
.game-card:hover .spoiler-content { filter: blur(0px); opacity: 1; }

.skeleton { background: rgba(255,255,255,0.03); border-radius: 4px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }
.logo-skeleton { width: 120px; height: 70px; margin: 0 auto 15px; }

footer { padding: 25px 0; color: #444; font-size: 0.65rem; text-align: center; }

/* --- AJUSTES PARA PANTALLAS MUY PEQUEÑAS (< 320px) --- */
@media (max-width: 320px) {
    .main-logo { width: 80%; }
    .hero-content h1 { font-size: 1.2rem; }
    .game-card { height: 450px; /* Un poco más alta porque el texto se aprieta */ }
    .card-front, .card-back { padding: 10px !important; } /* Menos padding */
    .btn-ingresar { padding: 8px 0; font-size: 0.7rem; }
    .highlight-tag { font-size: 0.65rem; letter-spacing: 0.5px; }
}