/* ===================================================
   1. VARIABLES Y ESTILOS GLOBALES
   =================================================== */
:root {
    --bg-color: #ffffff;
    --text-color: #0f172a;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

a {
    color: #637ed5; /* Color de los links */
}

/* ===================================================
   2. CONTENEDORES PRINCIPALES
   =================================================== */
.game-container {
    background: linear-gradient(180deg, #ffffff 0%, #f5f1e2 100%);
    border: 5px solid #e8e4d6;
    border-radius: 70px;
    width: 90%;
    max-width: 760px; /* Ancho máximo en escritorio*/
    padding: 70px 30px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
}

/* Asegura que el padding no sume espacio extra al ancho definido */
.game-container, .promo-module {
    box-sizing: border-box;
}

/* ===================================================
   3. TIPOGRAFÍA Y TEXTOS (TÍTULOS, SUBTÍTULOS, STATS)
   =================================================== */
h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    color: #232323;
    margin: 0;
    text-align: center;
    font-size: 65px;

    /* EFECTO DE ETIQUETA AMARILLA */
    background-color: #ffcc00;
    padding: 5px 25px;
    border-radius: 20px;
    box-shadow: 0px 6px 15px rgba(0,0,0,0.08);
    white-space: nowrap;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

p.subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: #999999;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 25px;
    line-height: 1.2;
    font-size: 26px;
}

p.subtitle2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: #999999;
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.2;
    font-size: 26px;
}

.stats {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #939393;
    text-transform: uppercase;
    font-size: 24px;
}

/* ===================================================
   4. TABLERO DEL ROMPECABEZAS (AHORA 100% FLUIDO)
   =================================================== */
.puzzle-board {
    width: 100%;
    max-width: 600px; /* Tamaño máximo del tablero en pantallas grandes */
    aspect-ratio: 1 / 1; /* Mantiene el tablero siempre cuadrado */
    background-color: #f5f1e2; /* Fondo para el hueco vacío */
    position: relative;
    margin: 0 auto;
    border: 5px solid #e8e4d6;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 7px 25px rgba(0,0,0,0.05);
}

.tile {
    /* NOTA: width, height, background-image y background-size ya no
       se definen aquí. JavaScript los calcula y aplica automáticamente
       según el tamaño real del tablero y la imagen seleccionada en el
       carrusel de abajo (ver crearTablero() y reposicionarTablero()
       en el archivo .html). */
    position: absolute;
    border: none;
    transition: top 0.2s ease, left 0.2s ease;
    cursor: pointer;
    touch-action: none;
    z-index: 2;   /* <-- NUEVA línea: asegura que las piezas reales queden SIEMPRE encima del fantasma */
}

/* NUEVO: pieza fantasma — la esquina final del rompecabezas, siempre
   visible como pista semitransparente. No es jugable (no tiene la
   clase .tile), y su z-index más bajo hace que las piezas reales la
   cubran al pasar por esa posición. */
.ghost-tile {
    position: absolute;
    opacity: 0.4;
    pointer-events: none; /* nunca es clickeable/arrastrable */
    z-index: 1;
}

/* ===================================================
   5. INTERFAZ (BOTONES, NAVEGACIÓN Y MENSAJES)
   =================================================== */
.win-message {
    display: none;
    text-align: center;
    margin-top: 25px;
}

.win-message h2 {
    font-family: 'Sora', sans-serif;
    color: #ffcc00;
    margin-bottom: 5px;
    font-size: 35px;
}

.win-message p {
    font-family: 'Outfit', sans-serif;
    color: #939393;
    font-weight: 600;
    font-size: 20px;
}

.nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    width: 100%;
}

.level-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* Estilos compartidos de botones (Revolver / Solución) */
.btn-level, .btn-share {
    padding: 12px 25px;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    border: none;
    height: 46px;   /* <-- NUEVA línea: fija el alto para que el botón circular coincida exacto */
    transition: background-color 0.2s;
}

/* Botón Nivel (Amarillo: Revolver / Solución) */
.btn-level {
    background-color: #ffcc00;
    color: #333333;
}

.btn-level:hover {
    background-color: #fcde65;
}

/* Estado activo de los botones de dificultad (3x3/4x4/MAX) */
.btn-level.active {
    background-color: #fcde65;
    cursor: default;
}

/* Botón Compartir (Azul) */
.btn-share {
    background-color: #2a68d8;
    color: white;
}

.btn-share:hover {
    background-color: #6e9cf0;
}

/* NUEVO: botón circular de sonido — mismo alto que los botones amarillos (46px) */
.btn-sound {
    width: 46px;   /* Igual al height de arriba, para que el círculo sea perfecto */
    height: 46px;
    border-radius: 50%;
    background-color: #ffcc00; /* Mismo amarillo que los demás botones */
    color: #333333; /* Color del ícono (currentColor lo toma de aquí) */
    border: none;
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-sound:hover {
    background-color: #fcde65; /* Mismo hover que los demás botones */
}

.sound-icon {
    width: 22px; /* Tamaño del ícono dentro del círculo. Editable */
    height: 22px;
}

/* Por defecto se ven las ondas y se esconde la diagonal (sonido ENCENDIDO) */
.sound-mute-line {
    display: none;
}

/* Cuando el botón tiene la clase "muted" (ver alternarSonido() en el JS),
   se invierte: se esconden las ondas y aparece la diagonal */
.btn-sound.muted .sound-waves {
    display: none;
}

.btn-sound.muted .sound-mute-line {
    display: block;
}

footer {
    margin-top: 30px;
    font-size: 14px;
    color: #a7a7a7;
    text-align: center;
    font-family: 'Outfit', sans-serif;
}

/* ===================================================
   6. MENÚ DE SELECCIÓN DE IMÁGENES (CARRUSEL ESTILO STREAMING)
   ===================================================
   Cómo está armado, de afuera hacia adentro:
   - .carousel-wrapper: la caja completa. Aquí vive el "padding" que
     separa la tira del borde redondeado del game-container, y el
     espacio de los costados para que quepan las flechas.
   - .carousel-track: la tira que se desplaza horizontalmente.
   - .carousel-item: el espacio RESERVADO de cada miniatura. Este
     tamaño nunca cambia, para que las miniaturas vecinas jamás se
     muevan cuando una crece.
   - .carousel-item-inner: la imagen en sí, la que sí crece (solo en
     PC, al pasar el mouse) usando position:absolute — por eso su
     crecimiento no empuja a nadie más.
   =================================================== */
.carousel-wrapper {
    position: relative;
    width: 100%;
    margin-top: 20px;
    padding: 4px 34px; /* Espacio lateral para que quepan las flechas sin tapar imágenes */
    box-sizing: border-box;
}

.carousel-track {
    display: flex;
    align-items: center; /* Centra cada miniatura dentro del espacio extra de alto */
    gap: 12px; /* Si cambias este número, cambia también "gap" dentro de moverCarrusel() en el JS */
    height: 180px; /* = alto de la miniatura ya "crecida", para que quepa sin recortarse */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity; /* Desplazamiento libre y fluido; solo ajusta si sueltas muy cerca de una imagen */
    -webkit-overflow-scrolling: touch; /* Desplazamiento con inercia en iOS */
    padding: 0 2px;
    scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en Chrome/Safari/Edge */
}

.carousel-item {
    position: relative;
    flex: 0 0 auto;
    width: 140px; /* Ancho de la miniatura en reposo. Editable */
    height: 70px; /* Alto en reposo (formato rectangular, ancho). Editable */
    scroll-snap-align: center;
}

.carousel-item-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 6px; /* Mismo redondeado que los botones (.btn-level / .btn-share) */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: top 0.25s ease, height 0.25s ease, box-shadow 0.25s ease;
}

/* Borde amarillo de marca en la miniatura de la imagen activa (con la
   que se está jugando ahora). Se actualiza en marcarImagenActiva() (JS) */
.carousel-item.active .carousel-item-inner {
    box-shadow: 0 0 0 2px #d5ccb2, 0 4px 10px rgba(0,0,0,0.08);
}

/* Efecto "crece y se ve completa": SOLO en dispositivos con mouse real
   (no en celular/tablet táctil, donde no existe el hover). Usamos
   "@media (hover: hover)" en vez de un ancho de pantalla, porque
   detecta la capacidad real del dispositivo en vez de adivinar por
   tamaño de pantalla. */
@media (hover: hover) and (pointer: fine) {
    .carousel-item:hover .carousel-item-inner {
        top: -35px; /* (140 - 70) / 2 → crece parejo hacia arriba y abajo */
        height: 140px; /* Se vuelve cuadrada: 140 x 140 */
        z-index: 5;
        box-shadow: 0 6px 14px rgba(0,0,0,0.2); /* <-- imagen SIN seleccionar, al crecer */
    }

    .carousel-item.active:hover .carousel-item-inner {
        box-shadow: 0 0 0 2px #d5ccb2, 0 6px 14px rgba(0,0,0,0.2); /* <-- imagen SELECCIONADA, al crecer */
    }
}

/* Flechas de navegación: ocultas por defecto. Solo aparecen al pasar
   el mouse sobre la tira, y solo en dispositivos con hover real (PC). */
.carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: none; /* background-color: rgba(0,0,0,0.08) fondo gris claro */
    appearance: none; /* Flechas sin fondo */
    -webkit-appearance: none; /* Flechas sin fondo */
    color: #d5ccb2; /* Color de la flecha */
    cursor: pointer;
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.15);*/
    z-index: 10;
}

/* NUEVO: el SVG de la flecha en sí (ver el <svg> dentro del botón en el HTML) */
.carousel-arrow-icon {
    width: 90%;   /* Qué tanto espacio del círculo ocupa la flecha. Editable */
    height: 90%;
    transition: transform 0.2s ease;
}

/* NUEVO: efecto de "crecer" al pasar el mouse sobre la flecha */
.carousel-arrow:hover .carousel-arrow-icon {
    transform: scale(1.25);   /* Qué tanto crece. Editable */
}

.carousel-arrow-left {
    left: 0;
}
.carousel-arrow-right {
    right: 0;
}
@media (hover: hover) and (pointer: fine) {
    .carousel-wrapper:hover .carousel-arrow {
        display: flex;
    }
}

/* ===================================================
   7. MÓDULO DESCRIPCIÓN DEL JUEGO (texto de SEO / párrafo visible)
   =================================================== */
.descripcion-juego {
    width: 90%;
    max-width: 760px;
    margin-top: 30px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

.descripcion-juego p {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: #797979;
    font-size: 19px;
    line-height: 1.5;
    margin: 0 0 14px 0;
}

.descripcion-juego p:last-child {
    margin-bottom: 0;
}

/* ===================================================
   8. MÓDULO INFERIOR (PROMOCIÓN DE LA REVISTA)
   =================================================== */
.promo-module {
    background-color: #f4f4f4;
    border-radius: 70px;
    width: 90%;
    max-width: 760px;
    padding: 70px 30px 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.promo-cover {
    max-width: 100%;
    width: 280px;
    height: auto;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.promo-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #636363;
    font-size: 32px;
    text-align: center;
    margin: 0 0 35px 0;
    line-height: 1.3;
}

.promo-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #636363;
    font-size: 22px;
    text-align: center;
    margin: 0 0 5px 0;
}

.promo-link {
    font-family: 'Outfit', sans-serif;
    color: #637ed5;
    font-size: 18px;
    text-decoration: underline;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    display: block;
    word-break: break-word;
    overflow-wrap: break-word;
}

.promo-link:last-child {
    margin-bottom: 0;
}

/* ===================================================
   9. CANVAS DEL CONFETI
   ===================================================
   Cubre toda la pantalla, pero "pointer-events: none" asegura que
   nunca bloquee un click o un arrastre de pieza — es puramente
   decorativo, el jugador puede seguir jugando debajo sin problema. */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

/* ===================================================
   10. RESPONSIVE: AJUSTES DE TEXTO Y CARRUSEL PARA CELULARES
   ===================================================
   AJUSTE 1: Ya NO hay reglas para .puzzle-board ni .tile aquí abajo,
   porque el tablero ahora se ajusta solo con "width: 100%" y
   "aspect-ratio" (ver sección 4). Este media query ahora solo
   achica textos, títulos, espaciados y el carrusel para que se vean
   bien en pantallas angostas.
   =================================================== */
@media (max-width: 768px) {
    body {
        padding: 20px 5px;
    }

    h1 {
        font-size: 35px;
        white-space: normal;
        width: 80%;
        padding: 10px;
    }

    p.subtitle {
        font-size: 18px;
        margin-top: 25px;
    }

    p.subtitle2 {
        font-size: 18px;
        margin-top: 0;
    }

    .stats {
        font-size: 18px;
    }

    .game-container {
        padding: 60px 15px 30px;
    }

    .promo-module {
        border-radius: 50px;
        padding: 60px 15px 30px;
    }

    .promo-title {
        font-size: 24px;
    }

    .promo-subtitle {
        font-size: 18px;
    }

    .promo-link {
        font-size: 16px;
    }

    /* Carrusel de imágenes: miniaturas un poco más chicas en celular,
       ya que aquí no aplica el efecto de hover (no hay mouse), solo
       el deslizamiento con el dedo. */
    .carousel-wrapper {
        padding: 4px 15px;
    }

    .carousel-track {
        height: 100px;
        gap: 8px;
    }

    .carousel-item {
        width: 100px;
        height: 50px;
    }

    .descripcion-juego {
        padding: 0 10px;
    }

    .descripcion-juego p {
        font-size: 18px;
    }
}