/* ==========================================
   VARIABLES Y BASE
   ========================================== */
:root {
    --cake-h: 40px;
    --brown: #6d4c41;
    --pink: #f06292;
    --yellow: #ffeb3b;
    --shadow: rgba(0, 0, 0, 0.3);
}

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

body {
    background: transparent;
    /* bg-layer divs handle the background */
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    /* Use dynamic viewport height to avoid mobile browser chrome / notch issues */
    font-family: 'Inter', sans-serif;
    touch-action: manipulation;
    user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
}

html {
    background: #a1887f;
    /* Fallback que coincide con el color de la tierra */
}

.hidden {
    display: none !important;
}

/* ==========================================
   PANTALLAS (INICIO Y GAME OVER)
   ========================================== */
#user-screen,
#game-over-screen {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    padding: 35px 30px;
    border-radius: 40px;
    /* Esquinas más sutiles y armónicas */
    text-align: center;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    /* Sombras suaves capa sobre capa (Neumorfismo/Glass) */
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 2px 4px rgba(255, 255, 255, 0.8),
        inset 0 -2px 4px rgba(0, 0, 0, 0.02);
    width: 85%;
    max-width: 400px;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal h2 {
    margin: 5px 0 0;
    font-size: 1.6rem;
    color: #2c1a12;
    font-weight: 900;
}

.modal p {
    color: #555;
    margin: 5px 0 15px;
    font-size: 0.95rem;
}

@keyframes modalPop {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================
   INTERFAZ DE USUARIO (HUD)
   ========================================== */
#ui {
    position: fixed;
    width: 100%;
    top: 20px;
    text-align: center;
    z-index: 500;
    pointer-events: none;
}

#score-box {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: inline-block;
    padding: 14px 30px;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 3px 6px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.03);
}

#score-box h1 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--brown);
}

#score-box div {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
    margin-top: 5px;
}

/* ==========================================
   SISTEMA DE GRÚA
   ========================================== */
#crane-system {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 400;
}

#crane {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 300px;
    background: #333;
    transform-origin: top center;
}

#crane::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 24px;
    height: 10px;
    border: 4px solid #333;
    border-top: none;
    border-radius: 0 0 15px 15px;
}

#active-cake-container {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================================
   MUNDO DEL JUEGO Y TORRE
   ========================================== */
#game-world {
    width: 100%;
    height: 100%;
    position: relative;
    /* transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); - Removed as it causes snap bugs on drop/retries */
}

#camera-system {
    width: 100%;
    height: 100%;
    position: relative;
}

#base-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 200px;
    transform: translateX(-50%);
    transform-origin: bottom center;
    /* Crítico para la inclinación real */
    transition: transform 0.2s ease-out;
}

#base {
    width: 100%;
    height: calc(var(--cake-h) * 1.1);
    background: linear-gradient(to bottom, #a1887f, #6d4c41);
    border: 3px solid #4e342e;
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

#tower {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* ==========================================
   TARTAS Y EFECTOS
   ========================================== */
.cake {
    height: var(--cake-h);
    border-radius: 12px;
    /* Bordes redondeados más suaves */
    border: 2px solid rgba(0, 0, 0, 0.2);
    /* Borde más sutil y oscuro */
    box-sizing: border-box;
    position: relative;
    transform-origin: bottom center;

    /* Glaseado pastel suave con sombra sutil interior y textura de bizcocho */
    background-image:
        /* Textura porosa sutil del bizcocho */
        radial-gradient(rgba(0, 0, 0, 0.08) 10%, transparent 12%),
        radial-gradient(rgba(0, 0, 0, 0.08) 10%, transparent 12%),
        /* Sombras suaves 3D */
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.1) 15%,
            rgba(0, 0, 0, 0.0) 70%,
            rgba(0, 0, 0, 0.15) 100%),
        linear-gradient(to right,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0) 20%,
            rgba(0, 0, 0, 0) 80%,
            rgba(0, 0, 0, 0.1) 100%);
    background-size: 8px 8px, 8px 8px, auto, auto;
    background-position: 0 0, 4px 4px, 0 0, 0 0;

    /* Sombra de base para el relieve */
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Efecto de Glaseado Derretido (Dripping Icing) */
.cake::before {
    content: '';
    position: absolute;
    top: -2px;
    /* Superpone el borde superior */
    left: -2px;
    right: -2px;
    height: 16px;
    border-radius: 12px 12px 0 0;
    /* Patron de gotas cayendo usando radial-gradients repetidos */
    background:
        radial-gradient(circle at 8px 8px, var(--icing, #fff) 8px, transparent 9px) repeat-x 0 6px / 16px 16px,
        linear-gradient(var(--icing, #fff), var(--icing, #fff)) no-repeat 0 0 / 100% 14px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
    z-index: 1;
}

/* Simulación de la línea de relleno de crema */
.cake::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    height: 4px;
    background-color: var(--cream, #fff);
    /* Relleno de crema con su propia sombra para dar volumen */
    border-radius: 2px;
    transform: translateY(-50%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Colores Pastel Suaves y Rellenos Únicos */
.f-1 {
    background-color: #fce4ec;
    /* Vainilla / Fresa Claro */
    --icing: #f8bbd0;
    --cream: #f48fb1;
}

.f-2 {
    background-color: #f3e5f5;
    /* Lila Pastel */
    --icing: #e1bee7;
    --cream: #ce93d8;
}

.f-3 {
    background-color: #e0f7fa;
    /* Celeste Cielo */
    --icing: #b2ebf2;
    --cream: #80deea;
}

.f-4 {
    background-color: #fff8e1;
    /* Crema Dulce */
    --icing: #ffecb3;
    --cream: #ffcc80;
}

.f-5 {
    background-color: #efebe9;
    /* Bizcocho muy claro */
    --icing: #d7ccc8;
    --cream: #bcaaa4;
}

/* Relleno Chocolate con Leche */

/* Efecto Squash & Stretch */
.squash {
    animation: squashAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes squashAnim {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1.15, 0.75);
    }

    60% {
        transform: scale(0.95, 1.05);
    }

    100% {
        transform: scale(1, 1);
    }
}

/* Efectos de Sacudida de Pantalla */
.shake-perfect {
    animation: shakePerfect 0.2s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shakePerfect {

    10%,
    90% {
        transform: translate3d(-1px, 1px, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, -2px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 2px, 0);
    }

    40%,
    60% {
        transform: translate3d(1px, -1px, 0);
    }
}

.shake-heavy {
    animation: shakeHeavy 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shakeHeavy {

    10%,
    90% {
        transform: translate3d(-3px, 0, 0) rotate(-1deg);
    }

    20%,
    80% {
        transform: translate3d(3px, 0, 0) rotate(1deg);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 2px, 0) rotate(-2deg);
    }

    40%,
    60% {
        transform: translate3d(4px, -2px, 0) rotate(2deg);
    }
}

/* Brillo Perfecto */
.cake.perfect {
    box-shadow: 0 0 15px #fff, 0 0 25px var(--yellow);
    border: 3px solid white !important;
    z-index: 10;
}

/* Partículas (Migas) */
.crumb {
    position: fixed;
    width: 6px;
    height: 6px;
    pointer-events: none;
    z-index: 1001;
    border-radius: 2px;
    animation: crumbFall 0.8s forwards ease-out;
}

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

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

/* Chispas de Perfecto */
.spark {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--yellow);
    box-shadow: 0 0 10px white, 0 0 20px var(--yellow);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2000;
    transform: translate(-50%, -50%);
    animation: sparkExplode 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

    30% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50% + var(--dx) * 1.5), calc(-50% + var(--dy) * 1.5)) scale(0);
        opacity: 0;
    }
}

/* Texto de Perfecto/Combo */
.perfect-text {
    position: fixed;
    color: var(--yellow);
    font-weight: bold;
    font-size: 32px;
    text-shadow: 3px 3px 0px #000;
    pointer-events: none;
    z-index: 2000;
    transform: translate(-50%, -50%);
    animation: floatUp 0.8s forwards;
}

@keyframes floatUp {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -120px);
        opacity: 0;
    }
}

/* ==========================================
   OTROS ELEMENTOS (FORMULARIOS Y RANKING)
   ========================================== */
input[type="text"] {
    width: 100%;
    padding: 16px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    background: #f4f4f4;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    color: #333;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
    margin-bottom: 5px;
}

input[type="text"]:focus {
    background: white;
    border-color: var(--pink);
    box-shadow: 0 0 0 5px rgba(240, 98, 146, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

button {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(to bottom, #ff7ba8, #e91e63);
    color: white;
    border: none;
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 6px 0 #c2185b,
        0 8px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
    width: 100%;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

button:active {
    transform: translateY(4px);
    box-shadow:
        0 2px 0 #c2185b,
        0 4px 8px rgba(0, 0, 0, 0.3);
}

button:hover {
    filter: brightness(1.1);
}

/* Secondary Button (Share) Modifier is handled via inline styles for now, but shares base */

#high-score-board {
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.03);
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    text-align: left;
}

#high-score-board h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 12px;
    color: #2c1a12;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Custom Leaderboard Rows */
.lb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
}

.lb-row:last-child {
    border-bottom: none;
}

.lb-pos {
    font-weight: 800;
    color: #888;
    width: 28px;
}

.lb-name {
    font-weight: 700;
    color: #333;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-score {
    font-weight: 800;
    color: var(--pink);
    font-size: 0.9rem;
}

/* Custom Scrollbar for Modal and Leaderboard */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ==========================================
   NUBES ANIMADAS
   ========================================== */
.cloud {
    position: fixed;
    background: white;
    border-radius: 50px;
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
    animation: driftCloud linear infinite;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud::before {
    width: 55%;
    height: 180%;
    top: -50%;
    left: 15%;
}

.cloud::after {
    width: 40%;
    height: 150%;
    top: -35%;
    right: 15%;
}

/* Cloud variants: size, vertical position, speed, delay */
.cloud-1 {
    width: 160px;
    height: 50px;
    top: 10%;
    animation-duration: 28s;
    animation-delay: 0s;
    left: 110%;
}

.cloud-2 {
    width: 220px;
    height: 65px;
    top: 22%;
    animation-duration: 22s;
    animation-delay: -7s;
    left: 110%;
}

.cloud-3 {
    width: 120px;
    height: 38px;
    top: 8%;
    animation-duration: 35s;
    animation-delay: -14s;
    left: 110%;
}

.cloud-4 {
    width: 180px;
    height: 55px;
    top: 38%;
    animation-duration: 20s;
    animation-delay: -4s;
    left: 110%;
}

.cloud-5 {
    width: 100px;
    height: 32px;
    top: 18%;
    animation-duration: 30s;
    animation-delay: -20s;
    left: 110%;
}

@keyframes driftCloud {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-110vw - 300px));
    }
}

/* ==========================================
   ATMOSPHERIC BACKGROUND — scroll continuo
   ========================================== */
/* Cubre exactamente el viewport. El "scroll" lo hace background-position-y,
   NO translateY, para evitar que el body negro quede al descubierto. */
#bg-scroll {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: background-position-y 0.5s ease-out;
    /* Galaxia arriba (0%) → Tierra abajo (100%) */
    background: linear-gradient(to bottom,
            /* ---- Galaxia: nebulosa rica en magenta/violeta ---- */
            #080010 0%,
            #1a0038 2%,
            #3d0870 4%,
            #6b1fa8 6%,
            #8b35c0 7.5%,
            #6018a0 9%,
            #380a70 11%,
            #1e0445 13%,
            /* ---- Espacio profundo: negro con venas azuladas ---- */
            #0a0325 15%,
            #04010f 18%,
            #020008 21%,
            #050015 24%,
            #0a0530 27%,
            /* ---- Espacio ---- */
            #050318 30%,
            #09082a 33%,
            #0d0c38 36%,
            #100e40 38%,
            /* ---- Estratosfera: aurora azul-verde ---- */
            #071830 41%,
            #083566 44%,
            #0a4a78 46%,
            #0d5e8a 48%,
            #0f6a94 50%,
            /* ---- Cielo alto: azul real intenso ---- */
            #0a5090 53%,
            #0d68b0 56%,
            #1275c0 59%,
            #1a82cc 62%,
            #2090d0 65%,
            /* ---- Cielo bajo: celeste vibrante ---- */
            #28a0d8 68%,
            #48b5e0 71%,
            #68c4e8 74%,
            #8dc0d8 77%,
            #add0e4 80%,
            /* ---- Horizonte: transición a los colores del usuario ---- */
            #b1d4e0 83%,
            /* Azul claro del usuario */
            #b1d4e0 85%,
            #c1cca0 87%,
            #d1c470 89%,
            #e0b450 91%,
            #efa440 93%,
            /* ---- Tierra: naranja del usuario ---- */
            #ed9631 95%,
            /* Naranja principal del usuario */
            #ed9631 97%,
            #ed9631 100%);
    /* El gradiente ocupa 8× la altura del div (= 800vh efectivos) */
    background-size: 100% 800%;
    /* Empieza mostrando la parte de abajo (tierra) */
    background-position-y: 100%;
    transition: background-position-y 2s ease;
}


/* ==========================================
   ZONE LABEL BANNER
   ========================================== */


.zone-label {
    position: fixed;
    top: 45%;
    left: 50%;
    width: 100vw;
    text-align: center;
    transform: translate(-50%, -40%) scale(0.95);
    color: white;
    font-size: min(15vw, 6rem);
    font-weight: 900;
    line-height: 1;
    z-index: 100;
    /* Behind crane/tower but above deep sky */
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease-out, transform 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
    mix-blend-mode: overlay;
    /* Blends into gradients beautifully */
}

.zone-label.show {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(1);
}

/* ==========================================
   ATMOSPHERE ELEMENTS — BASE
   ========================================== */
.atm-element {
    position: fixed;
    pointer-events: none;
    z-index: 2;
}

/* ---- BIRDS ---- */
.bird {
    left: 110%;
    width: 70px;
    height: 35px;
    animation: flyAcross linear forwards;
}

.bird-svg {
    width: 100%;
    height: 100%;
    animation: birdFlap 0.4s ease-in-out infinite alternate;
}

@keyframes birdFlap {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0.6);
    }
}

/* ---- CLOUDS (dynamic) ---- */
.cloud-atm {
    background: white;
    border-radius: 50px;
    opacity: 0.8;
    left: 110%;
    animation: flyAcross linear forwards;
}

.cloud-atm::before,
.cloud-atm::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud-atm::before {
    width: 55%;
    height: 180%;
    top: -50%;
    left: 15%;
}

.cloud-atm::after {
    width: 40%;
    height: 150%;
    top: -35%;
    right: 15%;
}

/* ---- PLANES ---- */
.plane {
    left: 110%;
    width: 150px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: flyAcross linear forwards;
}

.airplane-svg {
    width: 100%;
    height: auto;
    /* Flip horizontal: el avión vuela hacia la izquierda (su nariz apunta izquierda) */
    transform: scaleX(-1);
    animation: planeBob 3s ease-in-out infinite;
}

@keyframes planeBob {

    0%,
    100% {
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }

    50% {
        transform: scaleX(-1) translateY(-8px) rotate(2deg);
    }
}


/* ---- MOON ---- */
.moon {
    width: 90px;
    height: 90px;
    right: 12%;
    top: 12%;
    background: radial-gradient(circle at 35% 35%, #fffde8, #f0e68c);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 230, 100, 0.4), inset -12px -6px 0 #d4c060;
}

/* ---- STARS ---- */
.star {
    background: white;
    border-radius: 50%;
    animation: twinkle ease-in-out infinite;
}

/* ---- SATELLITE ---- */
.satellite {
    left: 110%;
    width: 100px;
    height: 50px;
    animation: flyAcross linear forwards;
}

.satellite-svg {
    width: 100%;
    height: 100%;
}

/* ---- ASTEROID ---- */
.asteroid {
    left: 110%;
    width: 55px;
    height: 48px;
    animation: diagonal linear forwards;
}

.asteroid-svg {
    width: 100%;
    height: 100%;
    animation: asteroidSpin 4s linear infinite;
}

@keyframes asteroidSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---- PLANETS ---- */
.planet {
    border-radius: 50%;
    opacity: 0.9;
}

.planet-saturn {
    width: 100px;
    height: 100px;
    right: 8%;
    top: 20%;
    background: radial-gradient(circle at 35% 35%, #f5e0c0, #d4a96a);
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.3);
    position: fixed;
    pointer-events: none;
    z-index: 2;
    border-radius: 50%;
}

.planet-saturn::after {
    content: '';
    position: absolute;
    width: 160%;
    height: 30%;
    border: 6px solid rgba(200, 160, 80, 0.5);
    border-radius: 50%;
    top: 35%;
    left: -30%;
    transform: rotate(-20deg);
}

.planet-jupiter {
    width: 120px;
    height: 120px;
    left: 6%;
    top: 15%;
    background: repeating-linear-gradient(0deg,
            #c88b3a 0px, #c88b3a 10px,
            #e8c080 10px, #e8c080 20px,
            #c06030 20px, #c06030 30px,
            #d49050 30px, #d49050 40px);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(200, 140, 50, 0.3);
    position: fixed;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* ---- GALAXY CORE ---- */
.galaxy-core {
    width: 320px;
    height: 320px;
    right: -80px;
    top: 4%;
    background:
        radial-gradient(ellipse at 45% 45%, rgba(220, 120, 255, 0.7) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 55%, rgba(100, 50, 200, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse at 30% 60%, rgba(255, 80, 180, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(160, 80, 220, 0.4) 0%, rgba(80, 20, 140, 0.2) 55%, transparent 80%);
    border-radius: 50%;
    animation: galaxyPulse 5s ease-in-out infinite;
    position: fixed;
    pointer-events: none;
    z-index: 2;
    filter: blur(4px);
}

/* ---- SHOOTING STAR ---- */
.shooting-star {
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px white;
    animation: shootingStar linear forwards;
}

/* ==========================================
   KEYFRAMES — ATMOSPHERE
   ========================================== */

@keyframes flyAcross {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-120vw - 300px));
    }
}

@keyframes diagonal {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(calc(-120vw - 200px), 200px);
    }
}

@keyframes twinkle {

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

    50% {
        opacity: 0.2;
        transform: scale(0.6);
    }
}

@keyframes galaxyPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.15) rotate(8deg);
        opacity: 1;
    }
}


@keyframes shootingStar {
    from {
        transform: translate(0, 0) scaleX(1);
        opacity: 1;
        box-shadow: 0 0 6px white, 20px 0 30px white;
    }

    to {
        transform: translate(-200px, 150px) scaleX(8);
        opacity: 0;
    }
}

/* ==========================================
   GUÍA DE JUEGO (TUTORIAL)
   ========================================== */
#tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.4s ease;
}

#tutorial-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    padding: 36px 32px 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.4s ease;
}

#tutorial-card h2 {
    font-size: 1.4rem;
    color: #3d2b1a;
    margin: 12px 0 10px;
}

#tutorial-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.tut-icon {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Steps: only .active is shown */
.tutorial-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tutorial-step.active {
    display: block;
}

/* Rating badges */
.tut-ratings {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.rating {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: bold;
}

.rating.perfect {
    background: #fff3cd;
    color: #856404;
    border: 1.5px solid #ffc107;
}

.rating.good {
    background: #d1e7dd;
    color: #0f5132;
    border: 1.5px solid #198754;
}

.rating.bad {
    background: #f8d7da;
    color: #842029;
    border: 1.5px solid #dc3545;
}

/* Navigation */
#tutorial-nav {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#tutorial-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s, transform 0.3s;
}

.dot.active {
    background: #f06292;
    transform: scale(1.3);
}

#tutorial-next-btn {
    background: linear-gradient(135deg, #f06292, #ba68c8);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(240, 98, 146, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}

#tutorial-next-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(240, 98, 146, 0.55);
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

/* ==========================================


/* ==========================================
   WORLD RECORD POPUP
   ========================================== */
.record-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 4000;
    background: linear-gradient(135deg, #1a0540 0%, #4a1070 100%);
    border: 2px solid #ffd740;
    border-radius: 24px;
    padding: 28px 40px;
    text-align: center;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.4), 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: recordAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        recordGlow 1.5s ease-in-out infinite alternate,
        recordFade 3s ease forwards;
    pointer-events: none;
}

.record-message::before {
    content: '🏆';
    display: block;
    font-size: 52px;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.8));
    animation: trophySpin 0.8s ease-out;
}

.record-message .record-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #ffd740, #ffb347, #ffd740);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin: 0 0 4px;
}

.record-message .record-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

@keyframes recordAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes recordGlow {
    from {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.3), 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    to {
        box-shadow: 0 0 80px rgba(255, 215, 0, 0.7), 0 20px 60px rgba(0, 0, 0, 0.5);
    }
}

@keyframes recordFade {

    0%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes trophySpin {
    from {
        transform: rotateY(0deg) scale(0.5);
    }

    to {
        transform: rotateY(360deg) scale(1);
    }
}

/* ==========================================
   ZONE LABEL — MOBILE FRIENDLY
   ========================================== */
/* En móvil, ajustamos elementos flotantes */
@media (max-width: 480px) {

    /* Ensure atm-element sprites don't overflow on narrow screens */
    .bird {
        width: 55px;
    }

    .plane {
        width: 110px;
    }

    .satellite {
        width: 65px;
    }

    .asteroid {
        width: 60px;
    }
}

/* Fix bg-scroll covering full dvh on mobile (no black bar) */
#bg-scroll {
    height: 100dvh;
}

/* ==========================================
   UI POLISH ANIMATIONS
   ========================================== */
.glow-pulse {
    animation: glowPulseAnim 2s infinite;
}

@keyframes glowPulseAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(74, 222, 128, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.score-pop {
    animation: scorePopAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scorePopAnim {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
        color: var(--pink);
    }

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

#perfect-flash {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

#perfect-flash.active {
    opacity: 1;
    transition: none;
}

/* ==========================================
   THEMES (SKINS) OVERRIDES
   ========================================== */

/* --- NEON CYBERPUNK --- */
[data-theme="cyberpunk"] {
    --brown: #00fff5;
}

[data-theme="cyberpunk"] .cake {
    border-radius: 2px;
    border: 2px solid #00fff5;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
    box-shadow: inset 0 0 15px var(--neon-color, #00fff5) !important;
}

[data-theme="cyberpunk"] .cake::before,
[data-theme="cyberpunk"] .cake::after {
    display: none;
}

[data-theme="cyberpunk"] .cake.f-1 {
    background-color: #1a0033;
    border-color: #ff00ff;
    --neon-color: #ff00ff;
}

[data-theme="cyberpunk"] .cake.f-2 {
    background-color: #001a33;
    border-color: #00ffff;
    --neon-color: #00ffff;
}

[data-theme="cyberpunk"] .cyberpunk-glow {
    text-shadow: 0 0 10px var(--neon-color);
}

[data-theme="cyberpunk"] .cake.f-3 {
    background-color: #33001a;
    border-color: #ff0055;
    --neon-color: #ff0055;
}

[data-theme="cyberpunk"] .cake.f-4 {
    background-color: #1a3300;
    border-color: #00ff22;
    --neon-color: #00ff22;
}

[data-theme="cyberpunk"] .cake.f-5 {
    background-color: #331a00;
    border-color: #ffaa00;
    --neon-color: #ffaa00;
}

[data-theme="cyberpunk"] #base {
    background: #111;
    border-color: #333;
    box-shadow: 0 0 20px rgba(0, 255, 245, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="cyberpunk"] .crumb {
    background-color: #fff !important;
    box-shadow: 0 0 8px #fff, 0 0 15px #00fff5;
    border-radius: 50%;
}

[data-theme="cyberpunk"] #bg-scroll {
    filter: hue-rotate(240deg) brightness(0.6) contrast(1.5);
}

[data-theme="cyberpunk"] .spark {
    background: #00fff5 !important;
    box-shadow: 0 0 10px #00fff5;
}

/* --- CONSTRUCTORA --- */
[data-theme="construction"] {
    --brown: #424242;
}

[data-theme="construction"] .cake {
    border-radius: 0;
    border: 3px solid #222;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="construction"] .cake::before,
[data-theme="construction"] .cake::after {
    display: none;
}

[data-theme="construction"] .cake.f-1 {
    background-color: #8d6e63;
}

/* Ladrillo */
[data-theme="construction"] .cake.f-2 {
    background-color: #9e9e9e;
}

/* Concreto */
[data-theme="construction"] .cake.f-3 {
    background-color: #fbc02d;
}

/* Viga amarilla */
[data-theme="construction"] .cake.f-4 {
    background-color: #ef5350;
}

/* Ladrillo rojo */
[data-theme="construction"] .cake.f-5 {
    background-color: #546e7a;
}

/* Acero */

[data-theme="construction"] #base {
    background: repeating-linear-gradient(45deg, #222, #222 10px, #fbc02d 10px, #fbc02d 20px);
    border-radius: 0;
}

[data-theme="construction"] .crumb {
    background-color: #9e9e9e !important;
    border-radius: 0;
}

[data-theme="construction"] .spark {
    background: #ffeb3b !important;
    box-shadow: 0 0 5px #ff9800;
    border-radius: 0;
}

[data-theme="construction"] #bg-scroll {
    filter: sepia(0.3) contrast(1.1);
}

/* --- ZEN BOTÁNICO --- */
[data-theme="nature"] {
    --brown: #3e2723;
}

[data-theme="nature"] .cake {
    border-radius: 15px;
    border: 3px solid #3e2723;
    background-image: none !important;
}

[data-theme="nature"] .cake::before,
[data-theme="nature"] .cake::after {
    display: none;
}

[data-theme="nature"] .cake.f-1 {
    background-color: #6d4c41;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* Madera oscura */
[data-theme="nature"] .cake.f-2 {
    background-color: #8d6e63;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4) !important;
}

/* Madera clara */
[data-theme="nature"] .cake.f-3 {
    background-color: #9e9e9e;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px;
}

/* Piedra gris */
[data-theme="nature"] .cake.f-4 {
    background-color: #81c784;
    box-shadow: inset 0 0 15px rgba(0, 50, 0, 0.3) !important;
    border-radius: 4px;
    border-style: dashed;
}

/* Arbusto */
[data-theme="nature"] .cake.f-5 {
    background-color: #bcaaa4;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px;
}

/* Piedra de río */

[data-theme="nature"] #base {
    background: #4caf50;
    border-color: #2e7d32;
    border-radius: 10px 10px 0 0;
}

[data-theme="nature"] .crumb {
    background-color: #81c784 !important;
    border-radius: 50% 0 50% 50%;
    /* forma hoja */
}

[data-theme="nature"] .spark {
    background: #cddc39 !important;
    border-radius: 50%;
    box-shadow: 0 0 10px #8bc34a;
}

[data-theme="nature"] #bg-scroll {
    filter: hue-rotate(70deg);
}

/* --- ARCADE 8-BIT --- */
[data-theme="retro"] {
    --brown: #000;
}

[data-theme="retro"] .cake {
    border-radius: 0 !important;
    border: 4px solid #000 !important;
    background-image: none !important;
    box-shadow: none !important;
}

[data-theme="retro"] .cake::before,
[data-theme="retro"] .cake::after {
    display: none;
}

[data-theme="retro"] .cake.f-1 {
    background-color: #ff0000;
}

[data-theme="retro"] .cake.f-2 {
    background-color: #00ff00;
}

[data-theme="retro"] .cake.f-3 {
    background-color: #0000ff;
}

[data-theme="retro"] .cake.f-4 {
    background-color: #ffff00;
}

[data-theme="retro"] .cake.f-5 {
    background-color: #ff00ff;
}

[data-theme="retro"] #base {
    background: #555;
    border: 4px solid #000;
    border-radius: 0;
    box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.5);
}

[data-theme="retro"] .crumb {
    border-radius: 0;
    background-color: #fff !important;
    border: 2px solid #000;
    width: 10px;
    height: 10px;
}

[data-theme="retro"] .spark {
    background: #ffff00 !important;
    border-radius: 0;
    width: 12px;
    height: 12px;
    box-shadow: none;
    border: 2px solid #000;
}

[data-theme="retro"] * {
    font-family: "Courier New", Courier, monospace !important;
}

[data-theme="retro"] #bg-scroll {
    filter: grayscale(0.2) contrast(1.5) saturate(2);
}

.btn-blue {
    background: linear-gradient(to bottom, #4fc3f7, #0288d1) !important;
    box-shadow: 0 6px 0 #0277bd, 0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn-blue:active {
    box-shadow: 0 2px 0 #0277bd, 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.btn-green {
    background: linear-gradient(to bottom, #4ade80, #22c55e) !important;
    box-shadow: 0 6px 0 #16a34a, 0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn-green:active {
    box-shadow: 0 2px 0 #16a34a, 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.btn-gray {
    background: linear-gradient(to bottom, #e0e0e0, #bdbdbd) !important;
    color: #333 !important;
    text-shadow: none !important;
    box-shadow: 0 6px 0 #9e9e9e, 0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn-gray:active {
    box-shadow: 0 2px 0 #9e9e9e, 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.btn-outline {
    background: transparent !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    color: #888 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-outline:active {
    transform: translateY(2px) !important;
    box-shadow: none !important;
}

.btn-yellow {
    background: linear-gradient(to bottom, #fbc02d, #f9a825) !important;
    color: #000 !important;
    box-shadow: 0 6px 0 #f57f17, 0 8px 15px rgba(0, 0, 0, 0.3) !important;
    text-shadow: none !important;
}

.btn-yellow:active {
    box-shadow: 0 2px 0 #f57f17, 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.btn-red {
    background: linear-gradient(to bottom, #ef4444, #dc2626) !important;
    color: white !important;
    box-shadow: 0 4px 0 #b91c1c, 0 6px 10px rgba(0, 0, 0, 0.3) !important;
    text-shadow: none !important;
}

.btn-red:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #b91c1c, 0 3px 5px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================
   HUD BOOSTERS
   ========================================== */
.booster-icon {
    font-size: 1.2rem;
    background: #fff;
    border: 2px solid var(--pink);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    animation: flashBooster 1.5s infinite alternate;
}

.booster-icon.extra-life {
    border-color: #4caf50;
    animation: flashBoosterGreen 1.5s infinite alternate;
}

@keyframes flashBooster {
    0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 2px var(--pink));
    }

    100% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px var(--pink));
    }
}

@keyframes flashBoosterGreen {
    0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 2px #4caf50);
    }

    100% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px #4caf50);
    }
}

/* ==========================================
   NUEVO RÉCORD MUNDIAL
   ========================================== */
.record-message {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: linear-gradient(135deg, #ffd54f, #fbc02d);
    border: 4px solid #fff;
    padding: 20px 40px;
    border-radius: 30px;
    text-align: center;
    z-index: 3000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(251, 192, 45, 0.7);
    animation: recordPop 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
}

.record-message .record-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
    color: #c2185b;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #fff;
}

.record-message .record-sub {
    margin: 5px 0 0 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #e65100;
}

@keyframes recordPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    10% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    15% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: brightness(1.2);
    }

    85% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: brightness(1);
    }

    100% {
        transform: translate(-50%, -80%) scale(0.8);
        opacity: 0;
    }
}