html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* Let Tailwind background class take over the body, or keep a fallback */
    overflow: hidden;
    touch-action: none;
}

/* Optional styling for the canvas background to match the game aesthetic */
#gameCanvas {
    background-color: #78e08f;
}

/* Glassmorphism custom classes generated from Stitch */
.glass-pill {
    background: rgba(16, 34, 31, 0.85);
    /* Increased opacity since blur is removed */
    border: 1px solid rgba(37, 244, 209, 0.4);
}

.joystick-base {
    background: radial-gradient(circle, rgba(37, 244, 209, 0.25) 0%, rgba(16, 34, 31, 0.6) 100%);
}

.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

@keyframes errorShake {

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

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

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

.error-shake {
    animation: errorShake 0.4s ease-in-out;
    border-color: #ef4444 !important;
    /* Tailwind red-500 */
}