body {
    font-family: 'Quicksand', sans-serif;
    background-color: #0f172a;
    background-image: radial-gradient(#1e293b 1px, transparent 1px), radial-gradient(#1e293b 1px, #0f172a 1px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

.pixel-font {
    font-family: 'Press Start 2P', monospace;
}

/* Botón de textura táctil estilo Minecraft */
.mc-btn {
    position: relative;
    border: 4px solid #000;
    background: #4b5563;
    box-shadow: inset -4px -4px #1f2937, inset 4px 4px #9ca3af;
    image-rendering: pixelated;
    transition: all 0.1s ease;
}

.mc-btn:active {
    box-shadow: inset 4px 4px #1f2937, inset -4px -4px #9ca3af;
    transform: translateY(2px);
}

.mc-btn-green {
    background: #16a34a;
    box-shadow: inset -4px -4px #15803d, inset 4px 4px #4ade80;
}

.mc-btn-blue {
    background: #2563eb;
    box-shadow: inset -4px -4px #1d4ed8, inset 4px 4px #60a5fa;
}

.mc-btn-amber {
    background: #d97706;
    box-shadow: inset -4px -4px #b45309, inset 4px 4px #fbbf24;
}

.mc-btn-purple {
    background: #7c3aed;
    box-shadow: inset -4px -4px #6d28d9, inset 4px 4px #a78bfa;
}

.draggable {
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

.dropzone.drag-over {
    background-color: rgba(59, 130, 246, 0.25);
    border-color: #60a5fa;
}

@keyframes float {

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

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

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes shake {

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

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

.shake-animation {
    animation: shake 0.4s ease-in-out;
}