/* ==========================================================================
   GRID BOOTSTRAP 5.3 (réplica funcional) — SOLO para el grid de tarjetas de
   index.php (única página que carga home.css con esta combinación de
   clases: "row home-games-grid justify-content-center gy-0 gy-md-5 gx-3
   gx-md-5 pt-4" + "col-12 col-md-6 col-lg-4"). Ver Fase 3 del port de
   detalles de WhatPiece, mismo patrón que su commit d48fdfb2.
   ADVERTENCIA: estos nombres de clase son genéricos (idénticos a Bootstrap)
   pero SOLO existen en este archivo — no están en common.css a propósito,
   para no mandar CSS de grid a las demás páginas del sitio que no lo
   necesitan. Cualquier página nueva que quiera usar .row/.col-N/.gy-N/.gx-N
   debe cargar home.css o portar estas reglas.
   ========================================================================== */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

.justify-content-center {
    justify-content: center;
}

.gy-0 {
    --bs-gutter-y: 0;
}

@media (min-width: 768px) {
    .gy-md-5 {
        --bs-gutter-y: 3rem;
    }
}

.gx-3 {
    --bs-gutter-x: 1rem;
}

@media (min-width: 768px) {
    .gx-md-5 {
        --bs-gutter-x: 3rem;
    }
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

/* --- ESTILO DE LAS CARTAS (MENU GRID) --- */
.card-wrap {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 35px;

    background: linear-gradient(160deg, #1e2a4a 0%, #141d38 40%, #1a2545 100%);
    border: 2px solid rgba(255, 203, 5, 0.6);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6),
                inset 0 1px 0 rgba(255,203,5,0.2),
                0 0 0 1px rgba(61,125,202,0.2);

    /* Padding inferior para el botón (position:absolute, ver .btn-pokemon-play) */
    padding: 30px 30px 75px 30px;
    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.6));
    transition: transform 0.5s ease;
}

.card-wrap:hover,
.card-wrap:focus-within {
    scale: 1.1;
    z-index: 100;
    cursor: pointer;
    transition: all 0.5s ease;
}

/* --- CABECERA DE LA CARTA --- */
.card-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 5px;
    height: 45px;
}

.card-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1rem;
    color: var(--poke-yellow, #ffde00);
    text-shadow:
        2px 2px 0px #1a1a2e,
        -1px -1px 0px #1a1a2e,
        1px -1px 0px #1a1a2e,
        -1px 1px 0px #1a1a2e,
        1px 1px 0px #1a1a2e;
    margin-bottom: 0;
    line-height: 1.3;
}

.card-icon-big {
    font-size: 1.6rem;
    margin: 0;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

img.card-icon-big {
    width: 62px;
    height: auto;
    object-fit: contain;
    margin-right: 5px;
}

.card-desc {
    font-size: 0.9rem;
    color: #ffca28;
    font-weight: 900;
    text-shadow: 1.5px 1.5px 0px #0a0e1a;
    line-height: 1.2;
    margin-bottom: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 98%;
}

/* --- ELEMENTOS DEL FORMULARIO (ESPECÍFICOS DE HOME) --- */
.form-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 15px;
}

.pirate-select {
    background-color: #fff0d0;
    background-image: radial-gradient(ellipse at center, #fffaf0 10%, #f2e2c2 100%);
    box-shadow: inset 0 0 6px rgba(93, 64, 55, 0.3);
    border: 3px ridge #8d6e63;
    border-radius: 4px;
    color: #003A70;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    font-weight: normal;
    padding: 5px 10px;
    text-align: center;
    width: 90%;
    cursor: pointer;
    margin-bottom: 0;
    outline: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        radial-gradient(ellipse at center, #fffaf0 10%, #f2e2c2 100%),
        url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233e2723%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, no-repeat;
    background-position: center, right .7em top 50%;
    background-size: cover, .65em auto;
}

.pirate-select:hover {
    background-color: #fffaf0;
    border-color: #a1887f;
}

.pirate-select:focus,
.pirate-select:focus-visible {
    outline: none !important;
    border-color: var(--gold-treasure) !important;
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.6) !important;
}

.pirate-select option {
    background-color: #fff0d0;
    color: #003A70;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1rem;
    padding: 10px;
}

/* Botón Play Pokémon. Mismo patrón que OP (.btn-seal-img): el elemento
   position:absolute es un <span> DENTRO del <a class="stretched-link">, no
   el propio <a>. Si el <a> fuera position:absolute (como estaba antes),
   se convierte en el contenedor de posicionamiento de su propio ::after,
   y el overlay de .stretched-link se encoge al tamaño del botón en vez de
   cubrir .card-wrap -- solo se podía entrar al juego pulsando el botón. Un
   intento anterior de arreglarlo con margin-top:auto (sin position en el
   <a>) tampoco funcionaba bien en la práctica; esto replica exactamente lo
   que ya funciona en OP. */
.btn-pokemon-play {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFCB05 0%, #f0bc00 100%);
    color: #003A70;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.65rem;
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid #003A70;
    box-shadow: 0 4px 0 #001a40, 0 6px 12px rgba(0,0,0,0.4);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-block;
    z-index: 5;
}

.btn-pokemon-play:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 0 #001a40, 0 8px 16px rgba(0,0,0,0.5);
    color: #003A70;
}

.btn-pokemon-play:active {
    transform: translateX(-50%) translateY(2px);
    box-shadow: 0 2px 0 #001a40;
}

/* --- ROTACIONES GRID (PC) --- */
@media (min-width: 992px) and (max-width: 1039px) {
    .home-games-grid > .col-lg-4 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1040px) {
    /* Rotación por juego (columna 1 = -4deg, columna 3 = +5deg, columna 2 sin
       rotar), targeteando data-game en vez de nth-child: los divs
       .ad-card-break intercalados entre tarjetas desincronizaban el conteo de
       posición y hacían que Grid (columna 2, "sin rotar" en la fila) heredara
       la rotación pensada para otra columna. Bug real visto el 26 agosto.
       Corte en 1040px (no 992px): por debajo el grid ya está en 2 columnas
       (home.css ~L274) y la rotación no debe activarse hasta volver a 3. */
    .card-wrap[data-game="pokemon"],
    .card-wrap[data-game="bingo"],
    .card-wrap[data-game="impostor"] {
        transform: rotate(-4deg);
        margin-top: 20px;
    }

    .card-wrap[data-game="silueta"],
    .card-wrap[data-game="higher-lower"],
    .card-wrap[data-game="piramide"] {
        transform: rotate(5deg);
        margin-top: 20px;
    }

    .card-wrap {
        margin-bottom: 0;
    }
}

/* Ajustes Mobile de Cartas */
@media (max-width: 600px) {
    .card-wrap {
        min-height: 240px;
        transition: none;
    }

    .card-wrap:hover,
    .card-wrap:focus-within {
        scale: 1.0;
        transform: none;
        z-index: auto;
        transition: none;
    }

    .pirate-select {
        margin-top: 5px;
    }
}

/* --- ANIMACIONES ENTRADA HOME --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-animate {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Retardos escalonados para las cartas */
.col-12:nth-child(1).card-animate {
    animation-delay: 0.1s;
}

.col-12:nth-child(2).card-animate {
    animation-delay: 0.2s;
}

.col-12:nth-child(3).card-animate {
    animation-delay: 0.3s;
}

.col-12:nth-child(4).card-animate {
    animation-delay: 0.4s;
}

.col-12:nth-child(5).card-animate {
    animation-delay: 0.5s;
}

.col-12:nth-child(6).card-animate {
    animation-delay: 0.6s;
}

/* Badge "NEW" — CSS puro, sin imagen */
.new-badge {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 101;
    transform: rotate(15deg);
    pointer-events: none;
    width: auto;
    height: auto;
    background: linear-gradient(135deg, #EE1515, #cc0000);
    color: #ffffff;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    padding: 5px 10px;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 6px rgba(204,0,0,0.5);
    white-space: nowrap;
    display: inline-block;
}

/* Animation delays for cards 7-9 */
.col-12:nth-child(7).card-animate {
    animation-delay: 0.7s;
}

.col-12:nth-child(8).card-animate {
    animation-delay: 0.8s;
}

.col-12:nth-child(9).card-animate {
    animation-delay: 0.9s;
}

/* Animation delays for cards 10-12 */
.col-12:nth-child(10).card-animate {
    animation-delay: 1.0s;
}

.col-12:nth-child(11).card-animate {
    animation-delay: 1.1s;
}

.col-12:nth-child(12).card-animate {
    animation-delay: 1.2s;
}

/* --- COMING SOON CARDS --- */
.card-coming-soon {
    opacity: 0.8;
    border: 3px dashed rgba(255, 202, 40, 0.4);
    border-radius: 12px;
    background-image: none;
    background: #12192e;
    cursor: default;
}

.card-coming-soon:hover,
.card-coming-soon:focus-within {
    scale: 1.0;
    cursor: default;
}

.card-coming-soon .card-title {
    font-size: 1.6rem;
    color: rgba(255, 202, 40, 0.7);
}

.card-coming-soon .card-desc {
    font-size: 0.85rem;
    color: rgba(255, 202, 40, 0.5);
    font-weight: normal;
}

.coming-soon-icon {
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

/* --- GRID COMING SOON (Specific) --- */
.card-coming-soon-grid {
    opacity: 0.85;
    border: 2px solid rgba(255, 215, 0, 0.35);
    animation: gridComingSoonGlow 3s ease-in-out infinite;
}

.card-coming-soon-grid:hover,
.card-coming-soon-grid:focus-within {
    scale: 1.04;
    cursor: default;
}

.card-coming-soon-grid .card-title {
    font-size: 2rem;
    color: rgba(255, 215, 0, 0.85);
}

.card-coming-soon-grid .card-desc {
    font-size: 0.85rem;
    color: rgba(255, 202, 40, 0.7);
    font-weight: 600;
}

/* --- HIGHER OR LOWER COMING SOON (Specific) --- */
.card-coming-soon-hol {
    opacity: 0.8;
    border: 2px solid rgba(255, 215, 0, 0.35);
}

.card-coming-soon-hol:hover,
.card-coming-soon-hol:focus-within {
    scale: 1.0;
    cursor: default;
}

/* Badge "Próximamente" */
.coming-soon-badge {
    position: absolute;
    top: -12px;
    right: -10px;
    z-index: 101;
    background: linear-gradient(135deg, #3b4cca 0%, #1a2f9e 100%);
    color: #ffde00;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 20px;
    transform: rotate(8deg);
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.5);
    pointer-events: none;
    text-shadow: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Date label */
.coming-soon-date {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    color: #FFD700;
    text-shadow: 1px 1px 0px #003A70;
    margin: 0;
    animation: comingSoonPulse 2s ease-in-out infinite;
}

@keyframes comingSoonPulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes gridComingSoonGlow {

    0%,
    100% {
        border-color: rgba(255, 215, 0, 0.25);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.1);
    }

    50% {
        border-color: rgba(255, 215, 0, 0.5);
        box-shadow: 0 0 16px rgba(255, 215, 0, 0.2);
    }
}

/* --- STREAK BADGE --- */
.streak-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 102;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px 5px 9px;
    border-radius: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.35rem;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.5));
    transform: rotate(-6deg);
    border: 2px solid;
    transition: all 0.3s ease;
}

.streak-fire {
    font-size: 1.2rem;
}

.streak-num {
    font-weight: bold;
}

/* ── Tier 1: East Blue (3-10 días) ── Yellow ── */
.streak-badge.tier-1 {
    background: linear-gradient(135deg, #2a2510 0%, #3d3518 100%);
    border-color: #d4b44a;
    color: #d4b44a;
    box-shadow: 0 0 6px rgba(212, 180, 74, 0.25);
}

/* ── Tier 2: Grand Line (11-99 días) ── Orange ── */
.streak-badge.tier-2 {
    background: linear-gradient(135deg, #2a1500 0%, #3e1f00 100%);
    border-color: #ff6a00;
    color: #ff6a00;
    box-shadow: 0 0 8px rgba(255, 106, 0, 0.35);
    font-size: 1.4rem;
}

/* ── Tier 3: New World (100-299 días) ── Crimson ── */
.streak-badge.tier-3 {
    background: linear-gradient(135deg, #1a0008 0%, #3a0010 100%);
    border-color: #ff2d2d;
    color: #ff2d2d;
    box-shadow: 0 0 12px rgba(255, 45, 45, 0.4), inset 0 0 6px rgba(255, 45, 45, 0.1);
    font-size: 1.45rem;
}

/* ── Tier 4: Pirate King (300+ días) ── Diamond ── */
.streak-badge.tier-4 {
    background: linear-gradient(135deg, #1a1a2e 0%, #2a2040 50%, #1a1a2e 100%);
    border-color: #e8e0f0;
    color: #f0ecf5;
    text-shadow: 0 0 4px rgba(200, 180, 255, 0.6);
    box-shadow:
        0 0 15px rgba(220, 200, 255, 0.4),
        0 0 30px rgba(180, 160, 255, 0.15),
        inset 0 0 8px rgba(220, 200, 255, 0.1);
    font-size: 1.5rem;
    animation: streakDiamond 4s ease-in-out infinite;
}

/* Pendiente (no jugado hoy) → gris apagado */
.streak-badge.pending {
    opacity: 0.5;
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.5)) grayscale(70%);
    animation: streakPulse 2.5s ease-in-out infinite;
}

/* Tier 4 pendiente combina ambas animaciones */
.streak-badge.tier-4.pending {
    animation: streakDiamond 4s ease-in-out infinite, streakPulse 2.5s ease-in-out infinite;
}

@keyframes streakPulse {

    0%,
    100% {
        opacity: 0.65;
    }

    50% {
        opacity: 0.9;
    }
}

/* --- RESCUE CTA BAR --- */
.rescue-cta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px auto 0;
    padding: 9px 20px;
    max-width: 680px;
    background: linear-gradient(135deg, rgba(10, 10, 30, 0.88) 0%, rgba(20, 20, 60, 0.88) 100%);
    border: 1px solid rgba(59, 76, 202, 0.45);
    border-radius: 30px;
    color: #a0b0ff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.88rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.rescue-cta-btn {
    background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
    color: #ffde00;
    border: none;
    border-radius: 20px;
    padding: 5px 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(212, 160, 23, 0.4);
    white-space: nowrap;
}

.rescue-cta-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.6);
}

@keyframes streakDiamond {
    0% {
        border-color: #e8e0f0;
        box-shadow: 0 0 15px rgba(220, 200, 255, 0.4), 0 0 30px rgba(180, 160, 255, 0.15);
    }

    33% {
        border-color: #c8b8ff;
        box-shadow: 0 0 18px rgba(180, 160, 255, 0.5), 0 0 35px rgba(160, 140, 255, 0.2);
    }

    66% {
        border-color: #a8d8ff;
        box-shadow: 0 0 18px rgba(168, 216, 255, 0.5), 0 0 35px rgba(140, 200, 255, 0.2);
    }

    100% {
        border-color: #e8e0f0;
        box-shadow: 0 0 15px rgba(220, 200, 255, 0.4), 0 0 30px rgba(180, 160, 255, 0.15);
    }
}
/* --- ESTILOS ESPEC�FICOS LANDING SEO --- */
.seo-content {
    max-width: 900px;
    margin: 40px auto 0;
    text-align: left;
    padding: 30px 35px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    color: #fff;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.seo-content h2 {
    color: #FFD700;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.6rem;
    margin-top: 30px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.seo-content h2:first-child {
    margin-top: 0;
}

.seo-content p {
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.seo-content strong {
    color: #FFD700;
}

.seo-content em {
    color: #ffca28;
}

.back-link {
    display: inline-block;
    text-align: center;
    margin-top: 30px;
    color: #FFD700;
    text-decoration: none;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    padding: 8px 20px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.back-link:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #FFD700;
    transform: translateY(-2px);
}

.seo-back-container {
    text-align: center;
    margin-top: 30px;
}

/* ============================================================
   DIALOGUE BOX THEMES — estructura visual auténtica por era
   Técnica: box-shadow en capas para el doble marco
     capa 1 (border)     → línea interior
     capa 2 (shadow 1)   → hueco entre marcos (color fondo)
     capa 3 (shadow 2)   → línea exterior
     capa 4 (shadow 3)   → sombra de profundidad
   ============================================================ */

/* Shared override: las clases dialog anulan el borde dashed de coming-soon */
.card-coming-soon[class*="dialog-"] {
    border-style: solid;
    opacity: 0.88;
}

/* ──────────────────────────────────────────────
   GEN 4 · Diamond / Pearl
   Doble marco azul noche sobre fondo blanco
   Esquinas bien redondeadas, estilo DS clásico
   ────────────────────────────────────────────── */
.dialog-dp {
    background: #FFFFFF;
    border: 3px solid #1E3A8A;          /* marco interior */
    border-radius: 16px;
    box-shadow:
        0 0 0 7px #FFFFFF,              /* hueco blanco entre marcos */
        0 0 0 11px #1E3A8A,             /* marco exterior (4px) */
        0 0 0 12px #4A6FC4,             /* borde exterior sutil */
        0 14px 30px rgba(0,0,0,0.5);
}
.dialog-dp .card-title {
    color: #1B3580;
    text-shadow: none;
}
.dialog-dp .card-desc {
    color: #1a2040;
    text-shadow: none;
    font-weight: 700;
}
.dialog-dp .coming-soon-badge {
    background: linear-gradient(135deg, #1E3A8A, #0f2060);
}
.dialog-dp .btn-pokemon-play {
    background: linear-gradient(135deg, #1E3A8A, #2B4BA0);
    color: #ffffff;
    border-color: #0f2060;
    box-shadow: 0 4px 0 #0a1540, 0 6px 12px rgba(0,0,0,0.4);
}
.dialog-dp .btn-pokemon-play:hover { color: #ffffff; }

/* ──────────────────────────────────────────────
   GEN 4 · Platinum
   Marcos plata-acero, fondo ligeramente azulado
   Más frío que DP, tono metálico
   ────────────────────────────────────────────── */
.dialog-platinum {
    background: linear-gradient(160deg, #F2F4FC 0%, #E8ECF8 100%);
    border: 3px solid #4A5C9A;
    border-radius: 16px;
    box-shadow:
        0 0 0 7px #E8ECF8,
        0 0 0 11px #4A5C9A,
        0 0 0 12px #8090C0,
        0 14px 30px rgba(0,0,0,0.45);
}
.dialog-platinum .card-title {
    color: #374A8C;
    text-shadow: none;
}
.dialog-platinum .card-desc {
    color: #2a3560;
    text-shadow: none;
    font-weight: 700;
}
.dialog-platinum .coming-soon-badge {
    background: linear-gradient(135deg, #4A5C9A, #2a3a7a);
}
.dialog-platinum .btn-pokemon-play {
    background: linear-gradient(135deg, #4A5C9A, #6070B0);
    color: #ffffff;
    border-color: #2a3a7a;
    box-shadow: 0 4px 0 #1a2a5a, 0 6px 12px rgba(0,0,0,0.4);
}
.dialog-platinum .btn-pokemon-play:hover { color: #ffffff; }

/* ──────────────────────────────────────────────
   GEN 4 · HeartGold / SoulSilver
   Marco dorado-marrón sobre fondo crema cálido
   Reminiscencia del Pokégear y las 8 medallas
   ────────────────────────────────────────────── */
.dialog-hgss {
    background: linear-gradient(160deg, #FFFDF0 0%, #FFF5DC 100%);
    border: 3px solid #7A4800;
    border-radius: 16px;
    box-shadow:
        0 0 0 7px #FFF5DC,
        0 0 0 11px #7A4800,
        0 0 0 12px #C8860A,
        0 14px 30px rgba(0,0,0,0.45);
}
.dialog-hgss .card-title {
    color: #5A3000;
    text-shadow: none;
}
.dialog-hgss .card-desc {
    color: #3A1800;
    text-shadow: none;
    font-weight: 700;
}
.dialog-hgss .coming-soon-badge {
    background: linear-gradient(135deg, #7A4800, #4a2c00);
    color: #FFE08A;
}
.dialog-hgss .btn-pokemon-play {
    background: linear-gradient(135deg, #C8860A, #A06000);
    color: #ffffff;
    border-color: #5A3000;
    box-shadow: 0 4px 0 #3A1800, 0 6px 12px rgba(0,0,0,0.4);
}
.dialog-hgss .btn-pokemon-play:hover { color: #ffffff; }

/* ──────────────────────────────────────────────
   GEN 5 · Black / White
   Máximo contraste: negro puro sobre blanco puro
   Estética minimalista, marco muy grueso
   ────────────────────────────────────────────── */
.dialog-bw {
    background: #FFFFFF;
    border: 3px solid #0A0A0A;
    border-radius: 8px;                 /* más rectangular que Gen 4 */
    box-shadow:
        0 0 0 7px #FFFFFF,
        0 0 0 11px #0A0A0A,
        0 14px 30px rgba(0,0,0,0.6);
}
.dialog-bw .card-title {
    color: #000000;
    text-shadow: none;
}
.dialog-bw .card-desc {
    color: #0A0A0A;
    text-shadow: none;
    font-weight: 700;
}
.dialog-bw .coming-soon-badge {
    background: linear-gradient(135deg, #111, #333);
    color: #FFFFFF;
}
.dialog-bw .btn-pokemon-play {
    background: linear-gradient(135deg, #222, #444);
    color: #ffffff;
    border-color: #000;
    box-shadow: 0 4px 0 #000, 0 6px 12px rgba(0,0,0,0.5);
}
.dialog-bw .btn-pokemon-play:hover { color: #ffffff; }

/* ──────────────────────────────────────────────
   GEN 5 · Black 2 / White 2
   Variante BW con acento azul oscuro
   Marco más refinado, tono más frío
   ────────────────────────────────────────────── */
.dialog-b2w2 {
    background: linear-gradient(160deg, #F4F5FF 0%, #ECEEFF 100%);
    border: 3px solid #1A1A3E;
    border-radius: 10px;
    box-shadow:
        0 0 0 7px #ECEEFF,
        0 0 0 11px #1A1A3E,
        0 0 0 12px #3A3A7A,
        0 14px 30px rgba(0,0,0,0.5);
}
.dialog-b2w2 .card-title {
    color: #0A0A2A;
    text-shadow: none;
}
.dialog-b2w2 .card-desc {
    color: #1A1A3E;
    text-shadow: none;
    font-weight: 700;
}
.dialog-b2w2 .coming-soon-badge {
    background: linear-gradient(135deg, #1A1A3E, #2a2a5e);
}
.dialog-b2w2 .btn-pokemon-play {
    background: linear-gradient(135deg, #1A1A3E, #2a2a5e);
    color: #ffffff;
    border-color: #0a0a1e;
    box-shadow: 0 4px 0 #0a0a1e, 0 6px 12px rgba(0,0,0,0.45);
}
.dialog-b2w2 .btn-pokemon-play:hover { color: #ffffff; }

/* ──────────────────────────────────────────────
   GEN 6 · X / Y
   Primera gen 3DS: borde único azul brillante
   Fondo oscuro semitransparente, look moderno
   ────────────────────────────────────────────── */
.dialog-xy {
    background: linear-gradient(160deg, rgba(10,22,62,0.97) 0%, rgba(5,14,42,0.97) 100%);
    border: 2px solid #5BA3E8;
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),  /* brillo superior */
        inset 0 0 24px rgba(74,144,217,0.10),
        0 0 0 1px rgba(74,144,217,0.25),
        0 14px 32px rgba(0,0,0,0.65);
}
.dialog-xy .card-title  { color: #FFCB05; }
.dialog-xy .card-desc   { color: #A8CEFF; text-shadow: none; }

/* ──────────────────────────────────────────────
   GEN 6 · Omega Ruby / Alpha Sapphire
   Borde rubí intenso, interior cálido oscuro
   ────────────────────────────────────────────── */
.dialog-oras {
    background: linear-gradient(160deg, rgba(35,8,5,0.97) 0%, rgba(20,5,3,0.97) 100%);
    border: 2px solid #E84020;
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 24px rgba(200,50,10,0.12),
        0 0 0 1px rgba(200,50,10,0.30),
        0 14px 32px rgba(0,0,0,0.65);
}
.dialog-oras .card-title { color: #FFCB05; }
.dialog-oras .card-desc  { color: #FFB090; text-shadow: none; }

/* ──────────────────────────────────────────────
   GEN 7 · Sun / Moon
   Tropical: borde naranja sol, interior violáceo
   Alola vibes, cálido y exótico
   ────────────────────────────────────────────── */
.dialog-sm {
    background: linear-gradient(160deg, rgba(22,8,45,0.97) 0%, rgba(12,4,28,0.97) 100%);
    border: 2px solid #F5A623;
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 0 28px rgba(240,150,20,0.10),
        0 0 0 1px rgba(240,150,20,0.28),
        0 14px 32px rgba(0,0,0,0.65);
}
.dialog-sm .card-title { color: #FFCB05; }
.dialog-sm .card-desc  { color: #FFD890; text-shadow: none; }

/* ──────────────────────────────────────────────
   GEN 7 · Ultra Sun / Ultra Moon
   Ultra espacio: violeta ultradeep, casi negro
   Más oscuro e intenso que SM
   ────────────────────────────────────────────── */
.dialog-usum {
    background: linear-gradient(160deg, rgba(8,0,30,0.98) 0%, rgba(3,0,15,0.98) 100%);
    border: 2px solid #9B5FE8;
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 30px rgba(140,80,220,0.14),
        0 0 0 1px rgba(140,80,220,0.35),
        0 14px 32px rgba(0,0,0,0.72);
}
.dialog-usum .card-title { color: #FFCB05; }
.dialog-usum .card-desc  { color: #CCA0FF; text-shadow: none; }

/* ──────────────────────────────────────────────
   GEN 8 · Sword / Shield
   Galar: cian eléctrico sobre azul profundo
   Look limpio y moderno, redondeado
   ────────────────────────────────────────────── */
.dialog-swsh {
    background: linear-gradient(160deg, rgba(4,18,44,0.97) 0%, rgba(2,10,28,0.97) 100%);
    border: 2px solid #10C8E8;
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 0 26px rgba(0,190,220,0.10),
        0 0 0 1px rgba(0,190,220,0.28),
        0 14px 32px rgba(0,0,0,0.65);
}
.dialog-swsh .card-title { color: #FFCB05; }
.dialog-swsh .card-desc  { color: #90E8FF; text-shadow: none; }

/* ──────────────────────────────────────────────
   GEN 9 · Scarlet / Violet
   Paldea: escarlata intenso con acento violeta
   Estilo más limpio, bicolor de fondo
   ────────────────────────────────────────────── */
.dialog-sv {
    background: linear-gradient(160deg, rgba(28,4,8,0.97) 0%, rgba(15,2,22,0.97) 100%);
    border: 2px solid #DC2626;
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 26px rgba(200,30,30,0.10),
        0 0 0 1px rgba(160,30,200,0.25),       /* halo violeta */
        0 0 0 3px rgba(200,30,30,0.15),        /* halo escarlata */
        0 14px 32px rgba(0,0,0,0.68);
}
.dialog-sv .card-title { color: #FFCB05; }
.dialog-sv .card-desc  { color: #FFB0B0; text-shadow: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Campaign banner (GuesserCore\Campaigns) — banner patrocinado de la home.
   Solo se pinta si hay una campaña activa; sin campaña, no se emite nada.
   aspect-ratio fijo en todos los breakpoints (debe coincidir con
   SITE_CONFIG['campaigns']['aspect'] en inc/config.php, hoy 1643/285) para
   que el hueco mida siempre lo mismo y no haya CLS al cambiar de campaña.

   Ancho igualado a WhatPiece/Naru2day (mismos tramos que #lang-suggestion-banner
   en common.css) en vez de seguir los pasos de Bootstrap de .container
   (540/720/960/1140/1320px) que traía antes — visualmente más estrecho y
   consistente entre los tres sitios. Vive dentro de <div class="container">
   (index.php), así que "%" en estos calc() resuelve contra ESE contenedor,
   ya limitado por el padding de 175px que reserva el body para los
   laterales — nunca puede invadirlo. */
.home-campaign-banner {
    width: min(960px, calc(100% - 32px));
    margin: 0 auto 24px;
    aspect-ratio: 1643 / 285;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(61, 125, 202, 0.25);
}

@media (max-width: 1039px) {
    .home-campaign-banner { width: min(760px, calc(100% - 24px)); }
}

@media (min-width: 1040px) and (max-width: 1439px) {
    .home-campaign-banner { width: min(700px, calc(100vw - 380px)); }
}

@media (min-width: 1440px) {
    .home-campaign-banner { width: min(930px, calc(100% - 72px)); }
}

@media (max-width: 600px) {
    .home-campaign-banner { width: calc(100% - 18px); }
}

.home-campaign-banner a {
    display: block;
    width: 100%;
    height: 100%;
}

.home-campaign-banner picture,
.home-campaign-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   .container-home — contenedor de ancho del <main> de index.php. Sustituye a
   la .container de Bootstrap para poder alinear los cortes con los del sistema
   de publicidad (1040/1440/1920 en common.css) sin tocar el resto del sitio.
   Hasta 1039px los valores son los de Bootstrap 5.3: mismo aspecto.
   Desde 1040px manda la reserva lateral del body; el max-width solo actúa como
   tope para ≥1440px y para los usuarios exentos de publicidad.
   ========================================================================== */
.container-home {
    width: 100%;
    box-sizing: border-box;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-home { max-width: 540px; }
}

@media (min-width: 768px) {
    .container-home { max-width: 720px; }
}

@media (min-width: 992px) {
    .container-home { max-width: 960px; }
}

@media (min-width: 1040px) {
    .container-home { max-width: 1320px; }
}

/* ==========================================================================
   TABLET VERTICAL (768-1039px): ritmo vertical
   El row ya separa sus filas con el gutter, así que el margin-bottom de la
   tarjeta se sumaba y dejaba casi el doble de aire que en escritorio, donde ya
   se anula a partir de 992px. El margen sigue haciendo falta por debajo de
   768px: ahí las tarjetas van en una columna con gy-0 y es su única separación.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1039px) {
    .card-wrap {
        margin-bottom: 0;
    }

    /* Baja el gutter que llevan TODOS los hijos del row —columnas de tarjeta y
       columna del anuncio intercalado— y los deja igualados. La primera fila no
       se mueve: .row compensa con un margin-top negativo del mismo valor. */
    .row.gy-md-5 {
        --bs-gutter-y: 1.5rem;
    }
}

/* ==========================================================================
   ESCALADO PROPORCIONAL DE LAS CARTAS — 1040-1439px
   En este tramo common.css reserva 175px por lado para el lateral de Playwire,
   así que las 3 columnas tienen bastante menos ancho del que la carta asume por
   diseño (350px). Se encoge la carta ENTERA en proporción al ancho real de su
   columna, en vez de estrujar solo el contenedor y dejar el contenido a tamaño
   fijo.

   Tres trampas de CSS detrás de cada decisión; no reordenar sin leerlas:

   1. El contenedor de consulta va en la columna, un ancestro ESTABLE cuyo ancho
      fija el 33.33% nativo del flex y no depende de nada que se calcule aquí.
      Ponerlo en .card-wrap seria circular: un elemento no puede medirse con las
      unidades del contenedor que el mismo establece.
   2. --k se declara en .card-wrap, NO en la columna. Las custom properties se
      sustituyen como tokens y se resuelven en el elemento que las consume: en
      .card-wrap y sus descendientes, 100cqw mide siempre la columna. Declarada
      en la columna, esa resolveria cqw contra un contenedor superior.
   3. --k es un numero SIN UNIDAD (longitud / longitud-con-unidad). Multiplicar
      dos <length> en calc() es invalido: el navegador descarta la declaracion y
      la propiedad cae a su valor inicial. min() acota --k a 1 para que nunca
      amplie por encima del diseño.
   ========================================================================== */
@media (min-width: 1040px) and (max-width: 1439px) {

    .home-games-grid > .col-lg-4 {
        container-type: inline-size;
    }

    /* container-type crea contexto de apilamiento: sin esto, la carta ampliada
       al hover quedaria pintada por debajo de la columna siguiente. */
    .home-games-grid > .col-lg-4:hover,
    .home-games-grid > .col-lg-4:focus-within {
        position: relative;
        z-index: 100;
    }

    .card-wrap {
        --k: calc(min(350px, 100cqw) / 350px);
        max-width: min(350px, 100cqw);
        min-height: calc(260px * var(--k));
        padding: calc(30px * var(--k)) calc(30px * var(--k)) calc(75px * var(--k));
    }

    .card-header-row {
        height: calc(45px * var(--k));
        margin-bottom: calc(5px * var(--k));
        gap: calc(4px * var(--k));
    }

    .card-title {
        font-size: calc(1.1rem * var(--k));
    }

    img.card-icon-big {
        width: calc(62px * var(--k));
        margin-right: calc(5px * var(--k));
    }

    .card-icon-big {
        font-size: calc(1.6rem * var(--k));
    }

    .card-desc {
        font-size: calc(0.9rem * var(--k));
    }

    .btn-pokemon-play {
        font-size: calc(0.65rem * var(--k));
        padding: calc(10px * var(--k)) calc(20px * var(--k));
        bottom: calc(12px * var(--k));
        border-radius: calc(25px * var(--k));
    }

    /* --- Variantes de carta: redefinen tamaños propios y hay que escalarlas
           igual. Todas heredan --k de .card-wrap. --- */
    .card-coming-soon .card-title {
        font-size: calc(1.6rem * var(--k));
    }

    .card-coming-soon .card-desc,
    .card-coming-soon-grid .card-desc {
        font-size: calc(0.85rem * var(--k));
    }

    .card-coming-soon-grid .card-title {
        font-size: calc(2rem * var(--k));
    }

    .coming-soon-icon {
        font-size: calc(2.2rem * var(--k));
    }

    .coming-soon-date {
        font-size: calc(1.2rem * var(--k));
        bottom: calc(30px * var(--k));
    }

    .coming-soon-badge {
        font-size: calc(0.85rem * var(--k));
        padding: calc(4px * var(--k)) calc(14px * var(--k));
    }

    .new-badge {
        font-size: calc(0.5rem * var(--k));
        padding: calc(5px * var(--k)) calc(10px * var(--k));
    }
}