body {
    /* Merged from two separate rules and removed layout styles for a more robust approach */
    font-family: 'Quicksand', sans-serif;
    background-image: url('/plates.webp'); /* Use a root-relative path for robustness */
    background-repeat: repeat;
    background-size: 768px; /* Adjust this value to make the pattern smaller or larger */
    font-weight: 300;
}

.navbar {
background-color: #313236;
border-radius: 2px;
max-width: 800px;
}

.navbar a {
color: #aaa;
display: inline-block;
font-size: 15px;
padding: 10px;
text-decoration: none;
transition: color 0.2s ease-in-out;
}

.navbar a:hover {
color: #ffffff;
}

/* Keyframes for the header neon flicker */
@keyframes neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        box-shadow: 0 0 4px 5px rgba(250, 204, 21, 1), inset 0 0 4px 3px rgba(250, 204, 21, 1);
    }
    20%, 24%, 55% {
        box-shadow: 0 0 2px 3px rgba(250, 204, 21, 0.5), inset 0 0 2px 1px rgba(250, 204, 21, 0.5);
    }
}

.header-flicker {
    /* The base style for the shadow, matching the animation's start/end state */
    box-shadow: 0 0 4px 5px rgba(250, 204, 21, 1), inset 0 0 4px 3px rgba(250, 204, 21, 1);
    /* Apply the animation */
    animation: neon-flicker 2.5s infinite linear;
}

/* Keyframes for the title box purple flicker */
@keyframes purple-box-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        box-shadow: 0 0 4px 5px #f755e4, inset 0 0 4px 3px #f755e4;
    }
    20%, 24%, 55% {
        box-shadow: 0 0 2px 3px rgba(247, 85, 228, 0.5), inset 0 0 2px 1px rgba(247, 85, 228, 0.5);
    }
}

.panel-wrapper {
    /* Add transition for a smooth effect */
    transition: box-shadow 0.3s ease-in-out, outline-color 0.3s ease-in-out;
}

/* Apply the glow effect on hover of the parent aside element */
aside:hover .panel-wrapper {
    box-shadow: 0 0 4px 5px #38bdf8, inset 0 0 4px 3px #38bdf8;
    /* On hover, change outline color to sky-300 */
    outline-color: #7dd3fc;
}

.footer-glow {
    box-shadow: 0 0 4px 5px #84cc16, inset 0 0 4px 3px #84cc16; /* lime-500 */
}

.header-box-glow-purple {
    box-shadow: 0 0 4px 5px #f755e4, inset 0 0 4px 3px #f755e4; /* This is a custom pink/purple color */
    animation: purple-box-flicker 2.5s infinite linear;
}

.game-modal-content {
    background-color: rgba(2, 6, 23, 0.95); 
    border: 2px solid rgba(250, 204, 21, 0.7);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}

.game-modal-header-border {
    border-bottom: 1px solid rgba(250, 204, 21, 0.4);
}

#modal-title {
    color: #f9fafb; /* text-gray-50 */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#consent-banner {
    background-color: rgba(0, 0, 0, 0.9); /* black with opacity */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.game-tooltip {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #f9fafb;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
/* Replaced yellow glow with a standard drop shadow to match the sub-header theme */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 1);
    width: max-content;
    max-width: 250px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: left;
    white-space: pre-wrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 50;
    pointer-events: none; /* Tooltip should not be interactive */
    position: absolute; /* Position relative to the card wrapper */
    display: block; /* Always block, control with opacity/visibility */
}

.title-bar {
    background-color: #0ea5e9; /* sky-600 */
    border-bottom: 1px solid #0284c7; /* sky-700 */
    /* A subtle inner shadow at the top to give it some depth */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.jelly-button {
    background: #0ea5e9; /* sky-600 */
    border-top: 1px solid #7dd3fc; /* sky-300 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), /* top highlight */
                inset 0 -2px 4px rgba(2, 6, 23, 0.4); /* bottom shadow */
    transition: all 0.15s ease-in-out;
}

.jelly-button:hover {
    background: #0284c7; /* sky-700 */
}

.jelly-button:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.6);
}

.neon-text-orange {
    font-family: 'Tilt Neon', sans-serif;
    color: #fff; /* White text for best glow effect */
    /* A multi-layered text-shadow creates the glow effect */
    text-shadow:
        0 0 5px #fdba74, /* orange-300 */
        0 0 10px #fb923c, /* orange-400 */
        0 0 20px #f97316, /* orange-500 */
        0 0 40px #ea580c; /* orange-600 */
}

.neon-text-violet {
    font-family: 'Tilt Neon', sans-serif;
    color: #fff; /* White text for best glow effect */
    /* A multi-layered text-shadow creates the glow effect to match the box */
    text-shadow:
        0 0 5px #fbc7f4,   /* A lighter pink/violet */
        0 0 10px #f755e4,  /* Matches the box glow color */
        0 0 20px #c026d3,  /* A darker fuchsia */
        0 0 40px #a21caf;  /* A deeper fuchsia */
}

.themed-panel-bg {
    background-color: rgba(0, 0, 0, 0.85);
}

.header-image-shadow {
    position: relative;
    /* The outer shadows are applied to the container */
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px;
}
.header-image-shadow::after {
    content: '';
    position: absolute;
    inset: 0; /* A shorthand for top, right, bottom, left = 0 */
    border-radius: inherit; /* Inherits the parent's border-radius */
    /* The inner shadow is applied to this overlay, so it sits on top of the image */
    box-shadow: rgba(0, 0, 0, 0.65) 0px -6px 0px inset;
    pointer-events: none; /* Ensures the overlay doesn't block mouse events */
}
.responsive-text-container {
    container-type: inline-size;
}
.title-box-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* A radial gradient positioned behind the main title text */
    background: radial-gradient(ellipse 80% 50% at 50% 25%, rgba(244, 78, 186, 0.5 ) 0%, transparent 75%);
    pointer-events: none;
}
#tagline-text {
    animation: scroll-tagline 5s linear infinite;
}

@keyframes scroll-tagline {
    0%   { opacity: 0; transform: translateY(100%); }
    15%  { opacity: 1; transform: translateY(0); }
    85%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-100%); }
}

/* Styles specific to category pages */
.themed-panel-bg:not(.home) {
    /* This style will apply to subheader on category pages, but not the home page */
}

/* Styles for play.html */
.game-container {
    background-color: rgba(0, 0, 0, 0.75); 
    border: 2px solid rgba(250, 204, 21, 0.7);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}
.game-header-border {
    border-bottom: 1px solid rgba(250, 204, 21, 0.4);
}