/* Add your custom styles here to override the existing design */
body {
  /* Example: background-color: #f0f0f0; */
}

/* Global Yellow Definitions (replacing jeet-green) */
.text-yellow-500 { color: #eab308 !important; }
.bg-yellow-500 { background-color: #eab308 !important; }
.border-yellow-500 { border-color: #eab308 !important; }
.shadow-yellow-500 { --tw-shadow-color: #eab308 !important; }

/* Bright Yellow (replacing jeet-green-bright) */
.text-yellow-400 { color: #facc15 !important; }
.bg-yellow-400 { background-color: #facc15 !important; }
.border-yellow-400 { border-color: #facc15 !important; }

/* Opacity variants */
.border-yellow-500\/10 { border-color: rgba(234, 179, 8, 0.1) !important; }
.border-yellow-500\/20 { border-color: rgba(234, 179, 8, 0.2) !important; }
.border-yellow-500\/30 { border-color: rgba(234, 179, 8, 0.3) !important; }
.border-yellow-500\/50 { border-color: rgba(234, 179, 8, 0.5) !important; }

.shadow-yellow-500\/10 { box-shadow: 0 25px 50px -12px rgba(234, 179, 8, 0.1) !important; }
.shadow-yellow-500\/20 { box-shadow: 0 25px 50px -12px rgba(234, 179, 8, 0.2) !important; }
.shadow-yellow-500\/50 { box-shadow: 0 25px 50px -12px rgba(234, 179, 8, 0.5) !important; }

/* Hover states */
.hover\:text-yellow-400:hover { color: #facc15 !important; }
.hover\:bg-yellow-400:hover { background-color: #facc15 !important; }
.hover\:border-yellow-500\/50:hover { border-color: rgba(234, 179, 8, 0.5) !important; }
.hover\:shadow-yellow-500\/20:hover { box-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.2) !important; }

/* Group Hover */
.group:hover .group-hover\:text-yellow-400 { color: #facc15 !important; }

/* Keep old overrides just in case, mapped to yellow */
.text-jeet-green { color: #eab308 !important; }
.bg-jeet-green { background-color: #eab308 !important; }
.border-jeet-green { border-color: #eab308 !important; }

/* Bright variants */
.text-jeet-green-bright { color: #facc15 !important; }
.bg-jeet-green-bright { background-color: #facc15 !important; }

/* Partial opacity overrides */
.border-jeet-green\/20 { border-color: rgba(234, 179, 8, 0.2) !important; }
.border-jeet-green\/30 { border-color: rgba(234, 179, 8, 0.3) !important; }
.border-jeet-green\/50 { border-color: rgba(234, 179, 8, 0.5) !important; }

/* Shadows */
.shadow-jeet-green\/10 { box-shadow: 0 25px 50px -12px rgba(234, 179, 8, 0.1) !important; }
.shadow-jeet-green\/50 { box-shadow: 0 25px 50px -12px rgba(234, 179, 8, 0.5) !important; }
.shadow-jeet-green-bright\/60 { box-shadow: 0 25px 50px -12px rgba(250, 204, 21, 0.6) !important; }

/* Hover states */
.hover\:text-jeet-green-bright:hover { color: #facc15 !important; }
.hover\:bg-jeet-green-bright:hover { background-color: #facc15 !important; }
.hover\:border-jeet-green\/50:hover { border-color: rgba(234, 179, 8, 0.5) !important; }
.hover\:shadow-jeet-green\/20:hover { box-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.2) !important; }

/* Group Hover */
.group:hover .group-hover\:text-jeet-green-bright { color: #facc15 !important; }

/* Text Shadows (overriding arbitrary values on H1 and H2) */
h1.text-jeet-green {
    text-shadow: 0 0 30px rgba(234, 179, 8, 0.4) !important;
}
h2.text-jeet-green {
    text-shadow: 0 0 20px rgba(234, 179, 8, 0.3) !important;
}

/* Floating Animation */
#game-canvas-container {
    height: 600px !important;
}

@keyframes floatUp {
    0% {
        transform: translateY(110vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: var(--target-opacity, 0.2);
    }
    90% {
        opacity: var(--target-opacity, 0.2);
    }
    100% {
        transform: translateY(-20vh) rotate(360deg);
        opacity: 0;
    }
}

.troll-floater {
    position: absolute;
    top: 0;
    display: block;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    animation-name: floatUp;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* Default values if JS fails */
    opacity: 0.4;
    width: 50px;
}