/* Custom styles for Sebastian's Silly App */

/* Ensure full height for mobile */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Prevent text selection on buttons and interactive elements */
button, .select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    button {
        min-height: 44px; /* Apple's recommended minimum touch target */
    }
    
    /* Ensure canvas touch events work properly */
    canvas {
        touch-action: none;
    }
}

/* Custom animations for better performance */
@keyframes gentle-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.gentle-bounce {
    animation: gentle-bounce 1s ease-in-out;
}

/* Smooth transitions for tab switching */
.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus styles for accessibility */
button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

input:focus {
    outline: none;
    ring: 2px;
    ring-color: #3b82f6;
}

/* Prevent zoom on input focus for iOS */
@media screen and (max-width: 768px) {
    input[type="text"] {
        font-size: 16px;
    }
}