* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Usar el cursor nativo de la Wii de nuevo */
    cursor: url('resources/CursosWeb.png'), auto !important;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    /* Fondo estático inamovible para no poner la pantalla blanca entera */
    background-image: url('resources/StreetpassWebBackGroun.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#wii-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Nueva imagen de fondo aportada por el usuario para el menú principal */
    background-image: url('StreetpassWebMenu.png');
    /* Ocupa el 100% del ancho siempre, y le limitamos el alto a un 25% de la pantalla para que se vea completo pero chato */
    background-size: 100vw 25vh;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 9999;
}

#page-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
}

/* Título general flotante ("TituloPaginaEdiciones.png") */
#main-title {
    display: block;
    width: 70%;
    max-width: 650px; /* Título gigante */
    margin: 0 auto 4vh auto; /* Centrado y con margen debajo */
    z-index: 50;
    pointer-events: none; /* Para no alterar clics accidentales */
    filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.4)); /* Sombra 3D */
}

/* Contenedor principal para ajustar la rejilla de "canales" */
#wii-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75vw; /* Cajas mucho más grandes de nuevo */
    max-width: 1350px;
    position: relative;
    /* Subido un poco más arriba para que las cajas en pantallas normales no toquen el nuevo menú de abajo */
    transform: translateY(-4vh);
}

/* La cuadrícula de 4x3 - misma disposición */
#channels-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1.5vw; /* Menos espacio para no salirse de la pantalla */
    width: 100%;
}

/* Contenedor que agrupa la caja y el título */
.channel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Animación del título cuando se hace hover en la caja */
.channel-wrapper:hover .channel-title {
    opacity: 1;
    transform: translateY(0);
}

/* El Contenedor / Canal individual - forma y color grises idénticos a la imagen */
.channel-box {
    width: 100%;
    aspect-ratio: 1.65 / 1; /* Relación de aspecto rectangular redondeada */
    border-radius: 18px; /* Bordes redondeados clásicos */
    
    /* Degradado gris plateado idéntico al de los contenedores vacíos de la imagen */
    background: linear-gradient(180deg, #d3d3d3 0%, #c2c2c2 100%);
    
    /* Borde gris para enmarcar */
    border: 2px solid #a8a8a8;
    
    /* Sombra interior blanca arriba y gris oscuro debajo para el efecto relieve 3D, 
       más un poco de sombra exterior */
    box-shadow: 
        inset 0px 3px 5px rgba(255, 255, 255, 0.8), 
        inset 0px -2px 3px rgba(0, 0, 0, 0.05),
        2px 3px 6px rgba(0, 0, 0, 0.15);
        
    /* Transición de escalado elástica "spring" para máxima fidelidad a Wii */
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.25), 
                box-shadow 0.15s ease, 
                border-color 0.15s ease;
    
    position: relative;
    z-index: 1;
}

/* Efecto hover: agranda un poco y resalta sombra/borde, idéntico al comportamiento Wii */
.channel-box:hover {
    transform: scale(1.06); /* Agranda un poco */
    z-index: 10;           /* Se superpone a los demás al crecer */
    border-color: #999999;
    box-shadow: 
        inset 0px 4px 6px rgba(255, 255, 255, 0.95), 
        inset 0px -2px 4px rgba(0, 0, 0, 0.08),
        4px 8px 12px rgba(0, 0, 0, 0.25);
}

/* Efecto click (opcional pero le da el toque Wii interactivo real) */
.channel-box:active {
    transform: scale(0.98);
    box-shadow: 
        inset 0px 2px 4px rgba(0, 0, 0, 0.1),
        0px 2px 3px rgba(0, 0, 0, 0.1);
}

/* Flecha derecha de navegación (simulada) para coincidir con la de la foto */
.right-arrow {
    position: absolute;
    right: -5vw;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 1.5rem solid transparent;
    border-bottom: 1.5rem solid transparent;
    border-left: 2rem solid #aee4f3; /* Color azul claro tipo Wii */
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
    /* También le ponemos un borde exterior oscuro usando drop-shadow múltiple */
    -webkit-filter: drop-shadow(2px 2px 0 #555) drop-shadow(0 0 5px rgba(0,0,0,0.3));
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

.right-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

/* CSS para las fotos de las quedadas StreetPass dentro de cada canal */
.channel-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para rellenar todo sin deformar */
    border-radius: 16px; /* Para que quede perfectamente redondito por dentro */
    pointer-events: none; 
    position: absolute; /* CLAVE: Para que el tamaño original de la foto no agrande el cubo jamás */
    top: 0;
    left: 0;
}

/* Títulos debajo de los contenedores (imágenes) */
.channel-title {
    margin-top: 5px;
    height: 20px; /* Un poco más pequeños para no salirse */
    object-fit: contain;
    opacity: 0.2; /* Opacada hasta que se pasa el cursor */
    transform: translateY(-4px); /* Ligero desplazamiento para la animación */
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

/* Transición mágica frutiger aero de inicio estilo Wii al hacer click */
.fade-out-wii {
    animation: wiiStart 0.4s forwards ease-in;
    pointer-events: none;
}

@keyframes wiiStart {
    0% { transform: scale(1); filter: brightness(1); opacity: 1; }
    100% { transform: scale(2.5); filter: brightness(1.3) blur(4px); opacity: 0; }
}

/* Animación inversa cuando VUELVES desde un canal */
.fade-in-wii-return {
    animation: wiiReturnEnter 0.4s ease-out forwards;
}

@keyframes wiiReturnEnter {
    0% { transform: scale(0.5); filter: brightness(1.3) blur(4px); opacity: 0; }
    100% { transform: scale(1); filter: brightness(1) blur(0px); opacity: 1; }
}