* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Start Screen */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}

.start-content {
    text-align: center;
}

.start-icon {
    width: 80px;
    margin-bottom: 20px;
}

/* Diorama Container - Responsive Cover Wrapper */
#diorama-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#diorama-container {
    position: relative;
    /* Maintain exact 9:16 aspect ratio always */
    aspect-ratio: 9 / 16;
    height: 100%;
    /* No min-width, so it doesn't explode on PC. 
       On narrow phones, flex center will crop the sides perfectly. */
    perspective: 1000px;
    overflow: hidden;
    /* Corta todo lo que salga del 9:16 */

    /* Efecto 1: Zoom Cinemático */
    transform-origin: center center;
    transition: transform 3.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cinematic-start {
    transform: scale(1.4);
}

/* Base Layer Classes */
.layer {
    position: absolute;
    will-change: transform;
}

/* Layer 1: Background Video */
#bg-video {
    /* Scale slightly larger for parallax bleed */
    transform-origin: center;
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    object-fit: cover;
    z-index: 1;
}

/* Layer 2: Frame */
#frame-img {
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

/* Layer 3: Title */
#title-img {
    top: 2%;
    left: 0;
    right: 0;
    margin: auto;
    /* Centrado sin usar transform para no chocar con animaciones */
    width: 75%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

/* Button Positioning (Now applied to Wrappers to separate from Float/Shine) */
.wrap-btn {
    position: absolute;
    z-index: 4;
    opacity: 0;
    /* Empieza invisible */
}

.wrap-btn.revealed {
    opacity: 1;
    /* Solo transicionamos opacidad para no pelear con el Parallax (transform) de JS */
    transition: opacity 0.8s ease-out;
}

#wrap-pokedex {
    top: 25%;
    right: -5%;
    width: 32%;
}

#wrap-pokeball {
    top: 18%;
    left: -8%;
    width: 28%;
}

#wrap-gem {
    top: 55%;
    left: -5%;
    width: 22%;
}

#wrap-medal {
    bottom: 2%;
    left: -2%;
    width: 30%;
}

#wrap-map {
    bottom: -5%;
    right: -5%;
    width: 50%;
}

/* The Interactive Link (Handles scaling, masking, and shine) */
.btn-interactive {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.btn-interactive img {
    width: 100%;
    height: auto;
    display: block;
}

.btn-interactive:active {
    transform: scale(0.9) !important;
}

/* El pseudo-elemento que crea el rayo de luz */
.btn-interactive::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: premium-shine 5s infinite;
    z-index: 5;
    pointer-events: none;
}

/* Premium UX Shine Masks applied exactly to the scaling <a> tag */
#btn-pokedex {
    -webkit-mask-image: url('../assets/boton1.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('../assets/boton1.png');
    mask-size: 100% 100%;
}

#btn-pokedex::after {
    animation-delay: 0s;
}

#btn-pokeball {
    -webkit-mask-image: url('../assets/boton4.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('../assets/boton4.png');
    mask-size: 100% 100%;
}

#btn-pokeball::after {
    animation-delay: 1s;
}

#btn-gem {
    -webkit-mask-image: url('../assets/boton3.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('../assets/boton3.png');
    mask-size: 100% 100%;
}

#btn-gem::after {
    animation-delay: 2s;
}

#btn-medal {
    -webkit-mask-image: url('../assets/boton5.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('../assets/boton5.png');
    mask-size: 100% 100%;
}

#btn-medal::after {
    animation-delay: 3s;
}

#btn-map {
    -webkit-mask-image: url('../assets/boton2.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('../assets/boton2.png');
    mask-size: 100% 100%;
}

#btn-map::after {
    animation-delay: 4s;
}

/* Efecto 7: Rotación 3D Lenta (Slow Tilt) + Flotación + Profundidad */
@keyframes float1 {
    0% {
        transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: translateY(-8px) scale(1.04) rotateX(3deg) rotateY(-4deg);
    }

    50% {
        transform: translateY(-12px) scale(1.06) rotateX(0deg) rotateY(5deg);
    }

    75% {
        transform: translateY(-4px) scale(1.02) rotateX(-3deg) rotateY(-2deg);
    }

    100% {
        transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes float2 {
    0% {
        transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: translateY(5px) scale(0.96) rotateX(-4deg) rotateY(3deg);
    }

    50% {
        transform: translateY(8px) scale(0.94) rotateX(0deg) rotateY(-5deg);
    }

    75% {
        transform: translateY(3px) scale(0.97) rotateX(3deg) rotateY(2deg);
    }

    100% {
        transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes float3 {
    0% {
        transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
    }

    33% {
        transform: translateY(-6px) scale(1.05) rotateX(5deg) rotateY(-3deg);
    }

    66% {
        transform: translateY(4px) scale(1.08) rotateX(-3deg) rotateY(6deg);
    }

    100% {
        transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.float-slow {
    animation: float1 7s ease-in-out infinite;
}

.float-medium {
    animation: float2 5s ease-in-out infinite;
}

.float-fast {
    animation: float3 4s ease-in-out infinite;
}

.bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* Premium Shine Animation */
@keyframes premium-shine {
    0% {
        left: -150%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        left: 150%;
        opacity: 0;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}

/* --- Special Effects --- */
#lightning-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    /* Blanco semitransparente sin blend mode */
    opacity: 0;
    pointer-events: none;
    z-index: 99;
    /* Sobre todo */
    transition: opacity 0.1s ease-out;
}

#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* NECESITABA ESTO para no tener tamaño 0 */
    z-index: 1;
    /* Detrás del marco, delante del video */
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 150, 0.8);
    box-shadow: 0 0 10px rgba(255, 255, 100, 1);
    pointer-events: none;
    animation: floatUp linear forwards;
    opacity: 0;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-200px) translateX(30px) scale(1.5);
        opacity: 0;
    }
}

/* Efecto 3: Chispas Localizadas (Sparkles) */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkleLife 1.5s ease-out forwards;
    z-index: 6;
}

@keyframes sparkleLife {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Colores temáticos de sparkles por botón */
.sparkle-cyan {
    background: #00f0ff;
    box-shadow: 0 0 8px #00f0ff;
}

.sparkle-red {
    background: #ff4444;
    box-shadow: 0 0 8px #ff4444;
}

.sparkle-purple {
    background: #b832ff;
    box-shadow: 0 0 8px #b832ff;
}

.sparkle-gold {
    background: #ffd700;
    box-shadow: 0 0 8px #ffd700;
}

/* Efecto 3B: Polvo de Hadas Interactivo */
.magic-dust {
    position: fixed;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 10px #ffd700, 0 0 5px #ffffff;
    pointer-events: none;
    animation: dustFall 1s ease-out forwards;
    z-index: 9999;
}

@keyframes dustFall {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }

    100% {
        transform: scale(0) translate(var(--dx), var(--dy));
        opacity: 0;
    }
}

/* --- Efecto 5: Animación de Captura (Pokebola) --- */
@keyframes pokeball-catch {
    0% {
        transform: scale(1) rotate(0deg);
    }

    20% {
        transform: scale(1.3) rotate(-15deg);
    }

    40% {
        transform: scale(1.3) rotate(15deg);
    }

    60% {
        transform: scale(1.3) rotate(-10deg);
    }

    80% {
        transform: scale(1.3) rotate(10deg);
        filter: brightness(2);
    }

    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

.catch-animation {
    animation: pokeball-catch 1.2s ease-in-out !important;
}

/* --- Acciones Individuales de Botones --- */
@keyframes gem-pulse {
    0% {
        filter: brightness(1) drop-shadow(0 0 0px #b832ff);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.8) drop-shadow(0 0 25px #b832ff);
        transform: scale(1.15);
    }

    100% {
        filter: brightness(1) drop-shadow(0 0 0px #b832ff);
        transform: scale(1);
    }
}

.gem-action {
    animation: gem-pulse 1s ease-out !important;
}

@keyframes medal-flip {
    0% {
        transform: perspective(600px) rotateY(0deg) scale(1);
    }

    50% {
        transform: perspective(600px) rotateY(180deg) scale(1.2);
    }

    100% {
        transform: perspective(600px) rotateY(360deg) scale(1);
    }
}

.medal-action {
    animation: medal-flip 1s ease-in-out !important;
}

@keyframes map-jump {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-30px) scale(1.1);
    }

    60% {
        transform: translateY(0) scale(1.1);
    }

    80% {
        transform: translateY(-10px) scale(1.1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.map-action {
    animation: map-jump 1s ease-out !important;
}

/* --- Efecto 3: Pop-up Diegético (Retro RPG Modal) --- */
#retro-modal {
    position: absolute;
    bottom: 5%;
    left: 5%;
    right: 5%;
    height: 25%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: auto;
    /* Permite clic dentro del modal */
}

.retro-dialog-box {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    border: 6px solid #4a4a4a;
    border-radius: 12px;
    box-shadow: inset 0 0 0 4px #d0d0d0, 0 8px 16px rgba(0, 0, 0, 0.5);
    padding: 15px;
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    /* Retro feel */
    font-size: 16px;
    font-weight: bold;
    color: #2b2b2b;
    line-height: 1.4;
    overflow: hidden;
    transform: translateY(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.retro-dialog-box.open {
    transform: translateY(0);
}

.retro-text {
    width: 100%;
    height: 100%;
}

#retro-close-btn {
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #d00000;
    cursor: pointer;
    animation: bounce 1s infinite;
}