/* ========================================= */
/* personalizacion footer s.m.bros */
/* ========================================= */

/* ===================================================== */
/* MUNDO MARIO FOOTER */
/* ===================================================== */

.mario-world{
    position:relative;
    width:100%;
    height:270px;
    background:#87CEEB;
    overflow:hidden;
    isolation:isolate; /* 🔥 evita conflictos con Bootstrap */
}

/* ========================= */
/* CAPAS GLOBALES (Z-INDEX PRO) */
/* ========================= */

.clouds{ z-index:1; }
.mountains{ z-index:2; }

/* 👇 planta SIEMPRE detrás */
.piranha{ z-index:3; }

/* 👇 tubo delante de la planta */
.pipe{ z-index:4; }

/* tapa del tubo aún más arriba */
.pipe::before{ z-index:5; }

.blocks{ z-index:6; }
.coins{ z-index:7; }
.mario{ z-index:8; }
.ground{ z-index:9; }



/* ========================================= */
/* NUBES PRO - PARALLAX REAL (4 TIPOS) */
/* personalizacion footer s.m.bros */
/* ========================================= */

.clouds{
    position:absolute;
    top:20px;
    left:0;

    width:200%;
    height:120px;

    pointer-events:none;

    /* CAPA PRINCIPAL (nubes cercanas) */
    background:

    /* nube 1 grande */
    radial-gradient(circle at 30% 50%, #ffffff 60%, transparent 61%) 10% 20px/120px 60px,

    /* nube 2 compacta */
    radial-gradient(circle at 40% 50%, #f5f5f5 60%, transparent 61%) 25% 10px/90px 50px,

    /* nube 3 alargada */
    radial-gradient(circle at 50% 50%, #ffffff 60%, transparent 61%) 45% 25px/140px 55px,

    /* nube 4 pequeña */
    radial-gradient(circle at 50% 50%, #eeeeee 60%, transparent 61%) 70% 15px/80px 40px;

    background-repeat:no-repeat;

    animation:cloudMain 90s linear infinite;

    /* sombra suave */
    filter:drop-shadow(0 6px 4px rgba(0,0,0,0.08));
}

/* ========================= */
/* CAPA MEDIA */
/* ========================= */

.clouds::after{
    content:"";
    position:absolute;
    top:0;
    left:0;

    width:200%;
    height:100%;

    background:

    radial-gradient(circle, #ffffff 60%, transparent 61%) 35% 25px/110px 55px,
    radial-gradient(circle, #f5f5f5 60%, transparent 61%) 80% 15px/90px 45px;

    background-repeat:no-repeat;

    opacity:0.7;

    animation:cloudMid 120s linear infinite;

    filter:drop-shadow(0 6px 4px rgba(0,0,0,0.06));
}

/* ========================= */
/* CAPA LEJANA */
/* ========================= */

.clouds::before{
    content:"";
    position:absolute;
    top:0;
    left:0;

    width:200%;
    height:100%;

    background:

    radial-gradient(circle, #fafafa 60%, transparent 61%) 20% 30px/100px 50px,
    radial-gradient(circle, #f0f0f0 60%, transparent 61%) 60% 20px/120px 60px;

    background-repeat:no-repeat;

    opacity:0.5;

    animation:cloudFar 160s linear infinite;

    filter:drop-shadow(0 4px 3px rgba(0,0,0,0.05));
}

/* ========================= */
/* ANIMACIONES PARALLAX */
/* ========================= */

@keyframes cloudMain{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

@keyframes cloudMid{
    from{transform:translateX(0);}
    to{transform:translateX(-40%);}
}

@keyframes cloudFar{
    from{transform:translateX(0);}
    to{transform:translateX(-25%);}
}


/* ========================= */
/* MONTAÑAS PRO FIX + PARALLAX */
/* ========================= */

.mountains{
    position:absolute;
    bottom:60px;
    left:0;

    width:200%;
    height:160px;

    pointer-events:none;

    /* CAPA PRINCIPAL */
    background:

    /* MONTAÑA GRANDE */
    radial-gradient(ellipse at bottom,
        #2e7d32 55%,
        #1b5e20 56%,
        transparent 57%) 20% 100%/260px 160px,

    /* NIEVE */
    radial-gradient(ellipse at bottom,
        #ffffff 18%,
        transparent 19%) 20% 75%/120px 60px,

    /* MONTAÑA MEDIA */
    radial-gradient(ellipse at bottom,
        #43a047 55%,
        #2e7d32 56%,
        transparent 57%) 50% 100%/200px 130px,

    /* MONTAÑA CHICA */
    radial-gradient(ellipse at bottom,
        #66bb6a 55%,
        #43a047 56%,
        transparent 57%) 75% 100%/160px 110px;

    background-repeat:no-repeat;

    animation:mountMain 140s linear infinite;
}

/* CAPAS EXTRA */
.mountains::before,
.mountains::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;

    width:200%;
    height:100%;

    pointer-events:none;
}

/* CAPA LEJANA */
.mountains::before{

    background:

    radial-gradient(ellipse at bottom,
        #81c784 55%,
        transparent 56%) 30% 100%/180px 120px,

    radial-gradient(ellipse at bottom,
        #66bb6a 55%,
        transparent 56%) 60% 100%/160px 100px;

    background-repeat:no-repeat;

    opacity:0.5;

    animation:mountFar 220s linear infinite;
}

/* CAPA MEDIA */
.mountains::after{

    background:

    radial-gradient(ellipse at bottom,
        #388e3c 55%,
        transparent 56%) 40% 100%/200px 130px,

    radial-gradient(ellipse at bottom,
        #2e7d32 55%,
        transparent 56%) 70% 100%/180px 120px;

    background-repeat:no-repeat;

    opacity:0.7;

    animation:mountMid 180s linear infinite;
}

@keyframes mountMain{
    from{transform:translateX(0);}
    to{transform:translateX(-30%);}
}

@keyframes mountMid{
    from{transform:translateX(0);}
    to{transform:translateX(-25%);}
}

@keyframes mountFar{
    from{transform:translateX(0);}
    to{transform:translateX(-20%);}
}


/* ========================= */
/* BLOQUES PRO (Mario Style) */
/* ========================= */

.blocks{
    position:absolute;
    bottom:140px; /* 👈 antes 70px → ahora más alto */
    left:40%;
    display:flex;
    gap:8px;
}

/* ========================= */
/* BLOQUE NORMAL */
/* ========================= */

.block{
    width:40px;
    height:40px;

    position:relative;

    background:

    /* brillo superior */
    linear-gradient(to bottom, rgba(255,255,255,0.25), transparent 6px),

    /* líneas horizontales */
    repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 18px,
        #5d2f16 18px,
        #5d2f16 20px
    ),

    /* líneas verticales */
    repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 18px,
        #5d2f16 18px,
        #5d2f16 20px
    ),

    /* color base (SIEMPRE AL FINAL) */
    linear-gradient(#8d4b2b,#8d4b2b);

    border:3px solid #4e2a14;

    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.25),
        inset 0 -4px 0 rgba(0,0,0,0.3);

    image-rendering:pixelated;
}

/* ========================= */
/* BLOQUE ? */
/* ========================= */

.question{
    background:

    /* brillo */
    linear-gradient(to bottom, rgba(255,255,255,0.3), transparent 6px),

    /* base amarilla */
    #fbc02d;

    border-color:#e65100;

    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.35),
        inset 0 -4px 0 rgba(0,0,0,0.25);

    animation:blockBounce 1.2s infinite ease-in-out;
}

/* SIGNO ? estilo pixel */
.question::before{
    content:"?";
    position:absolute;

    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    font-size:22px;
    font-weight:bold;
    color:#5d4037;

    text-shadow:
        1px 1px 0 #fff176,
        -1px -1px 0 #e65100;
}

/* puntos esquinas tipo Mario */
.question::after{
    content:"";
    position:absolute;
    inset:4px;

    background:
        radial-gradient(circle,#5d4037 2px,transparent 3px) top left,
        radial-gradient(circle,#5d4037 2px,transparent 3px) top right,
        radial-gradient(circle,#5d4037 2px,transparent 3px) bottom left,
        radial-gradient(circle,#5d4037 2px,transparent 3px) bottom right;

    background-size:8px 8px;
    background-repeat:no-repeat;
}

/* ========================= */
/* ANIMACION */
/* ========================= */

@keyframes blockBounce{

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

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

}

.question:hover{
    filter:brightness(1.2);
}

/* ========================= */
/* MONEDAS PRO (Mario Style) */
/* ========================= */

.coins{
    position:absolute;
    bottom:200px; /* 👈 más alto (antes 120px) */
    left:42%;
    display:flex;
    gap:90px;
}

/* ========================= */
/* MONEDA */
/* ========================= */

.coin{
    width:32px;
    height:32px;
    border-radius:50%;

    position:relative;

    /* color base + volumen */
    background:
        radial-gradient(circle at 30% 30%, #fff59d, #fbc02d 60%, #f57f17);

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.5),
        inset 0 -3px 0 rgba(0,0,0,0.25);

    animation:
        coinSpin 0.8s linear infinite,
        coinFloat 2.5s ease-in-out infinite;
}

/* símbolo interno estilo moneda Mario */
.coin::before{
    content:"";
    position:absolute;

    top:6px;
    left:50%;
    transform:translateX(-50%);

    width:6px;
    height:18px;

    background:#ffb300;
    border-radius:2px;
}

/* borde lateral para efecto 3D */
.coin::after{
    content:"";
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    border-radius:50%;

    box-shadow:
        inset 2px 0 0 #f57f17,
        inset -2px 0 0 #fff176;
}

/* ========================= */
/* ANIMACIONES */
/* ========================= */

/* giro tipo Mario (flip) */
@keyframes coinSpin{

    0%{transform:scaleX(1);}
    50%{transform:scaleX(0.1);}
    100%{transform:scaleX(1);}

}

/* flotación suave */
@keyframes coinFloat{

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

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

}

/* ========================= */
/* PIPE MARIO PRO (FIX CAPAS) */
/* ========================= */

.pipe{
    position:absolute;
    right:12%;
    bottom:40px;

    width:120px;
    height:120px;

    z-index:2;
    overflow:visible;

    background:
    linear-gradient(
        to right,
        #1b5e20 0%,
        #2e7d32 30%,
        #43a047 50%,
        #2e7d32 70%,
        #1b5e20 100%
    );

    
}

/* BORDE SUPERIOR (tapa que oculta la planta) */
.pipe::before{
    content:"";
    position:absolute;

    top:-24px;
    left:-10px;

    width:140px;
    height:30px;

    z-index:5; /* 👈 SIEMPRE encima */

    background:
    linear-gradient(
        to right,
        #2e7d32 0%,
        #66bb6a 50%,
        #2e7d32 100%
    );

    border-bottom:4px solid #1b5e20;
    overflow:hidden; /* 👈 recorta la planta */

    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.25);
}

/* sombra interna del tubo */
.pipe::after{
    content:"";
    position:absolute;

    top:0;
    left:8px;

    width:18px;
    height:100%;

    z-index:5;

    background:rgba(0,0,0,0.25);
}

/* ========================= */
/* PIRANHA PLANT PRO */
/* ========================= */

.piranha{
    position:absolute;
    bottom:100%;
    left:50%;

    width:50px;
    height:70px;

    z-index:1; /* 👈 ENTRE tubo y borde */

    transform:translate(-50%, 60px);

    animation:piranhaMove 4s ease-in-out infinite;

    /* dientes */
    background:
        linear-gradient(45deg,transparent 45%,#fff 46% 54%,transparent 55%) top left/10px 10px,
        linear-gradient(-45deg,transparent 45%,#fff 46% 54%,transparent 55%) top right/10px 10px;

    background-repeat:no-repeat;
    background-position:
        5px 12px,
        35px 12px;
}

/* CABEZA */
.piranha::before{
    content:"";
    position:absolute;

    width:50px;
    height:42px;

    background:
        radial-gradient(circle at 30% 30%, #ff5252, #c62828);

    border-radius:50% 50% 45% 45%;

    top:0;
    left:0;

    box-shadow:
        inset 0 -5px 0 rgba(0,0,0,0.25);

    animation:mouth 0.6s infinite alternate;
}

/* TALLO */
.piranha::after{
    content:"";
    position:absolute;

    top:34px;
    left:50%;
    transform:translateX(-50%);

    width:12px;
    height:40px;

    background:
        linear-gradient(
            to right,
            #1b5e20,
            #43a047,
            #1b5e20
        );

    border-radius:4px;
}

/* ========================= */
/* ANIMACIONES */
/* ========================= */

@keyframes piranhaMove{

    0%{
        transform:translate(-50%, 60px);
    }

    15%{
        transform:translate(-50%, 0);
    }

    45%{
        transform:translate(-50%, 0);
    }

    60%{
        transform:translate(-50%, 10px);
    }

    75%{
        transform:translate(-50%, 0);
    }

    100%{
        transform:translate(-50%, 60px);
    }

}

/* abrir/cerrar boca */
@keyframes mouth{
    from{
        transform:scaleY(1);
    }
    to{
        transform:scaleY(0.8);
    }
}


/* ========================= */
/* MARIO PIXEL PRO */
/* ========================= */

/* ========================= */
/* MARIO ULTRA PRO (PIXEL REAL) */
/* ========================= */

/* ========================= */
/* MARIO ULTRA PRO (Nintendo Style) */
/* ========================= */

.mario{
    position:absolute;
    bottom:40px;
    left:-80px;

    width:64px;
    height:80px;

    image-rendering: pixelated;

    background:

    /* ========================= */
    /* 🔴 GORRA (con volumen) */
    /* ========================= */

    /* sombra inferior gorra */
    linear-gradient(#b71c1c,#b71c1c) 20px 6px/24px 8px,

    /* parte superior */
    linear-gradient(#e53935,#c62828) 20px 0/24px 12px,

    /* visera */
    linear-gradient(#8e0000,#b71c1c) 16px 10px/32px 6px,

    /* ========================= */
    /* 🧑 CARA (con sombras) */
    /* ========================= */

    /* cara base */
    linear-gradient(#ffcc99,#f4b183) 22px 12px/20px 16px,

    /* sombra lateral cara */
    linear-gradient(to right, rgba(0,0,0,0.15), transparent) 32px 12px/10px 16px,

    /* nariz */
    radial-gradient(circle,#ffb07c 60%,transparent 61%) 32px 18px/6px 6px,

    /* ojo */
    radial-gradient(circle,#000 60%,transparent 61%) 30px 16px/4px 4px,

    /* bigote */
    linear-gradient(#3e2723,#1b1b1b) 20px 22px/24px 6px,

    /* ========================= */
    /* 👕 OVEROL (volumen real) */
    /* ========================= */

    /* base */
    linear-gradient(#1976d2,#0d47a1) 16px 28px/32px 28px,

    /* sombra central */
    linear-gradient(to right, rgba(0,0,0,0.25), transparent) 28px 28px/10px 28px,

    /* tirantes */
    linear-gradient(#0d47a1,#0d47a1) 20px 28px/6px 16px,
    linear-gradient(#0d47a1,#0d47a1) 38px 28px/6px 16px,

    /* botones */
    radial-gradient(circle,#ffd54f 60%,transparent 61%) 22px 34px/6px 6px,
    radial-gradient(circle,#ffd54f 60%,transparent 61%) 36px 34px/6px 6px,

    /* ========================= */
    /* ✋ BRAZOS Y MANOS */
    /* ========================= */

    /* brazos */
    linear-gradient(#ffcc99,#e0a96d) 10px 30px/8px 18px,
    linear-gradient(#ffcc99,#e0a96d) 46px 30px/8px 18px,

    /* manos */
    radial-gradient(circle,#ffcc99 60%,transparent 61%) 8px 42px/8px 8px,
    radial-gradient(circle,#ffcc99 60%,transparent 61%) 48px 42px/8px 8px,

    /* ========================= */
    /* 👖 PIERNAS */
    /* ========================= */

    linear-gradient(#0d47a1,#08306b) 18px 56px/10px 20px,
    linear-gradient(#0d47a1,#08306b) 36px 56px/10px 20px,

    /* ========================= */
    /* 👞 ZAPATOS */
    /* ========================= */

    linear-gradient(#3e2723,#1b1b1b) 16px 72px/14px 8px,
    linear-gradient(#3e2723,#1b1b1b) 34px 72px/14px 8px,

    /* ========================= */
    /* ⚫ OUTLINE (Nintendo feel) */
    /* ========================= */

    linear-gradient(#000,#000) 18px 0/28px 2px,
    linear-gradient(#000,#000) 18px 78px/28px 2px,
    linear-gradient(#000,#000) 18px 0/2px 80px,
    linear-gradient(#000,#000) 44px 0/2px 80px;

    background-repeat:no-repeat;

    animation:marioWalk 18s linear infinite;
}

@keyframes marioWalk{

    0%{
        left:-80px;
        transform:translateY(0);
    }

    44%{
        transform:translateY(0);
    }

    /* 👇 SALTO */
    45%{
        transform:translateY(-90px);
    }

    46%{
        transform:translateY(-90px);
    }

    47%{
        transform:translateY(0);
    }

    100%{
        left:110%;
        transform:translateY(0);
    }

}

/* ========================= */
/* ENEMIGO ULTRA PRO (KOOPA DOME SHELL) */
/* ========================= */

.enemy{
    position:absolute;
    bottom:40px;
    right:-80px;

    width:60px;
    height:46px;

    z-index:7;
    image-rendering:pixelated;

    background:

    /* 🟢 CAPARAZÓN BASE (color plano estilo NES) */
    linear-gradient(#4caf50,#4caf50) 16px 6px/32px 22px,

    /* 🟢 SOMBRA INFERIOR (dura, no degradada) */
    linear-gradient(#2e7d32,#2e7d32) 16px 18px/32px 10px,

    /* 🟢 BORDE CAPARAZÓN (marcado) */
    linear-gradient(#1b5e20,#1b5e20) 16px 6px/32px 2px,
    linear-gradient(#1b5e20,#1b5e20) 16px 26px/32px 2px,
    linear-gradient(#1b5e20,#1b5e20) 16px 6px/2px 22px,
    linear-gradient(#1b5e20,#1b5e20) 46px 6px/2px 22px,

    /* 🧩 SEGMENTOS (bien visibles tipo Koopa) */
    linear-gradient(#1b5e20,#1b5e20) 32px 6px/2px 22px,
    linear-gradient(#1b5e20,#1b5e20) 24px 10px/2px 16px,
    linear-gradient(#1b5e20,#1b5e20) 40px 10px/2px 16px,

    /* 👇 CUERPO (plano estilo pixel) */
    linear-gradient(#ffcc99,#ffcc99) 8px 20px/44px 14px,

    /* sombra cuerpo (bloque, no blur) */
    linear-gradient(#d89a5f,#d89a5f) 8px 28px/44px 6px,

    /* 🐾 PATAS */
    linear-gradient(#4e342e,#4e342e) 6px 32px/14px 10px,
    linear-gradient(#4e342e,#4e342e) 38px 32px/14px 10px,

    /* 👀 OJOS estilo NES */
    linear-gradient(#fff,#fff) 28px 12px/6px 6px,
    linear-gradient(#fff,#fff) 36px 12px/6px 6px,

    /* pupilas */
    linear-gradient(#000,#000) 30px 14px/2px 2px,
    linear-gradient(#000,#000) 38px 14px/2px 2px;

    background-repeat:no-repeat;

    box-shadow:
        0 2px 0 rgba(0,0,0,0.25);

    animation:
        enemyWalk 18s linear infinite,
        enemyBounce 0.35s steps(2) infinite alternate;
}

/* ========================= */
/* MOVIMIENTO TORTUGA */
/* ========================= */

@keyframes enemyWalk{
    from{ right:-80px; }
    to{ right:110%; }
}

@keyframes enemyBounce{
    from{ transform:translateY(0); }
    to{ transform:translateY(-3px); }
}


/* ========================= */
/* SUELO PRO Mario (ladrillo + pasto) */
/* ========================= */

.ground{
    position:absolute;
    bottom:0;
    width:100%;
    height:56px;

    background:

    /* 🌱 PASTO */
    repeating-linear-gradient(
        to right,
        #2e7d32 0px,
        #2e7d32 6px,
        #388e3c 6px,
        #388e3c 12px,
        #43a047 12px,
        #43a047 18px
    ),

    /* sombra bajo pasto */
    linear-gradient(
        to bottom,
        rgba(0,0,0,0.25) 0px,
        transparent 6px
    ),

    /* 🟫 base tierra */
    linear-gradient(#6d4c41,#5d4037),

    /* líneas horizontales */
    repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 22px,
        #3e2723 22px,
        #3e2723 24px
    ),

    /* vertical 1 */
    repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 38px,
        #3e2723 38px,
        #3e2723 40px
    ),

    /* vertical 2 (offset) */
    repeating-linear-gradient(
        to right,
        transparent 20px,
        transparent 58px,
        #3e2723 58px,
        #3e2723 60px
    );

    background-size:
        100% 10px,   /* pasto */
        100% 10px,   /* sombra */
        100% 100%,   /* base */
        100% 100%,
        100% 100%,
        100% 100%;

    background-repeat:
        repeat-x,
        no-repeat,
        repeat,
        repeat,
        repeat,
        repeat;

    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;

    box-shadow: inset 0 3px 0 rgba(255,255,255,0.15);
    image-rendering: pixelated;
}

/* ========================= */
/* SUELO SVG PRO */
/* ========================= */

.ground{
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    overflow:hidden;
}

.ground-svg{
    width:100%;
    height:100%;
    display:block;
}

/* opcional: efecto pixel */
.ground-svg{
    image-rendering: pixelated;
}