/* =====================================================================
   BASE CSS - RESET, COLORES DE JUGUETE, BOTONES 3D Y ANIMACIONES
   ===================================================================== */
* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #38BDF8 0%, #BAE6FD 58%, #86EFAC 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hidden {
    display: none !important;
}

/* Botones juguete 3D */
.toy-btn {
    border: 4px solid #FFFFFF;
    box-shadow: 0 7px 0 rgba(0, 0, 0, 0.2), 0 12px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.14s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.toy-btn:active, .toy-btn.pressed {
    transform: translateY(5px) scale(0.93);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.12);
}

.round-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #FFFFFF;
}

/* Colores de juguetes */
.bg-rojo     { background-color: #EF4444; }
.bg-amarillo { background-color: #FACC15; }
.bg-azul     { background-color: #3B82F6; }
.bg-verde    { background-color: #22C55E; }
.bg-naranja  { background-color: #F97316; }
.bg-rosa     { background-color: #EC4899; }
.bg-morado   { background-color: #8B5CF6; }
.bg-celeste  { background-color: #0EA5E9; }

/* Cartel festivo central "¡BIEEEN!" */
#victory-banner {
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.victory-badge-box {
    background: linear-gradient(135deg, #FACC15 0%, #F97316 50%, #EC4899 100%);
    border: 6px solid #FFFFFF;
    border-radius: 999px;
    padding: 14px 34px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.28), 0 0 0 8px rgba(254, 240, 138, 0.75);
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

/* Animaciones */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes eggWobble {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-6deg) scale(1.03); }
    50% { transform: rotate(6deg) scale(1.03); }
    75% { transform: rotate(-3deg); }
}
@keyframes popJump {
    0% { transform: scale(0.35) translateY(25px); opacity: 0; }
    65% { transform: scale(1.12) translateY(-10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes happyBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(6px) scale(1.12, 0.88); }
    60% { transform: translateY(-20px) scale(0.94, 1.12); }
}
@keyframes victoryPop {
    0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
    22% { transform: scale(1.18) rotate(4deg); opacity: 1; }
    38% { transform: scale(0.95) rotate(-3deg); opacity: 1; }
    55% { transform: scale(1.08) rotate(2deg); opacity: 1; }
    82% { transform: scale(1.02) rotate(0deg); opacity: 1; }
    100% { transform: scale(0.6) translateY(-30px); opacity: 0; }
}
@keyframes handPoint {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-8px, -12px) scale(0.88); }
}
@keyframes cloudDrift {
    0% { transform: translateX(0); }
    100% { transform: translateX(125vw); }
}
@keyframes butterflyFlight {
    0% { transform: translate(0, 0) rotate(5deg); }
    50% { transform: translate(-60vw, -28px) rotate(-8deg); }
    100% { transform: translate(-125vw, 10px) rotate(5deg); }
}
@keyframes chewAnim {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.14, 0.84); }
}
@keyframes soundWavePulse {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1.3); }
}
@keyframes animalMouthTalk {
    0%, 100% { transform: scaleY(0.3) scaleX(0.92); }
    50% { transform: scaleY(1.55) scaleX(1.18); }
}
@keyframes talkingPulse {
    0%, 100% { transform: scale(1.05) rotate(-1.5deg); }
    50% { transform: scale(1.11) rotate(1.5deg); }
}

.animate-egg { animation: eggWobble 2.3s infinite ease-in-out; }
.animate-pop { animation: popJump 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bounce-joy { animation: happyBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
.victory-pop-anim { animation: victoryPop 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-hand { animation: handPoint 1.1s infinite ease-in-out; }
.animate-chew { animation: chewAnim 0.35s ease-in-out 3; }
.mouth-talking { animation: chewAnim 0.2s infinite ease-in-out; transform-origin: center; }

.animal-talking .animal-mouth {
    animation: animalMouthTalk 0.18s infinite ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
}
.card-speaking {
    animation: talkingPulse 0.4s infinite ease-in-out;
    box-shadow: 0 0 0 6px #FEF08A, 0 14px 26px rgba(0,0,0,0.25) !important;
    z-index: 20;
}