/* Custom utilities no longer provided by the (removed) Tailwind Play CDN */

.neon-text {
    color: hsl(var(--primary));
    text-shadow: 0 0 10px hsl(var(--primary) / 0.8), 0 0 20px hsl(var(--primary) / 0.5), 0 0 40px hsl(var(--primary) / 0.35);
}

.shadow-neon {
    box-shadow: 0 0 16px hsl(var(--primary) / 0.35), 0 0 32px hsl(var(--primary) / 0.2), inset 0 0 12px hsl(var(--primary) / 0.12);
}

.animate-fade-in {
    animation: sfade-in 0.8s ease-out both;
}

.animate-slide-up {
    animation: sslide-up 0.7s ease-out both;
}

.animate-float {
    animation: sfloat 6s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: spulse-glow 3s ease-in-out infinite;
}

@keyframes sfade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sslide-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sfloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes spulse-glow {
    0%, 100% { box-shadow: 0 0 10px hsl(var(--primary) / 0.3); }
    50% { box-shadow: 0 0 24px hsl(var(--primary) / 0.7); }
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-up,
    .animate-float,
    .animate-pulse-glow {
        animation: none;
    }
}

/* Ad placement styles */
.ad-slot-banner {
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}

.ad-slot-banner iframe {
    max-width: 100%;
}

.ad-box-slot {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 300px;
    min-height: 300px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 0;
    overflow: hidden;
}

.ad-box-slot .ad-slot-box iframe {
    max-width: 100%;
}

/* Search bar: keep the icon clear of typed text even if the compiled
   Tailwind build is missing px-10 / -translate-y-1/2. */
.rom-search-form .relative > input[name="rom_search"] {
    padding-left: 2.5rem;
}

.rom-search-form .relative > svg:first-child {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

/* Search results loading state */
#rom-search-results.search-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
    position: relative;
}

#rom-search-results.search-loading::after {
    content: "";
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: switch-search-spin 0.7s linear infinite;
    z-index: 10;
}

@keyframes switch-search-spin {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Responsive utilities missing from the compiled dist/output.css */

.no-underline {
    text-decoration: none;
}

.max-w-full {
    max-width: 100%;
}

.h-24 {
    height: 6rem;
}

.w-24 {
    width: 6rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.fill-yellow-400 {
    fill: #facc15;
}

.text-green-500 {
    color: #22c55e;
}

.text-green-500\/90 {
    color: rgb(34 197 94 / 0.9);
}

.bg-green-500\/10 {
    background-color: rgb(34 197 94 / 0.1);
}

.border-green-500\/20 {
    border-color: rgb(34 197 94 / 0.2);
}

.bg-primary\/10 {
    background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/20 {
    background-color: hsl(var(--primary) / 0.2);
}

.gap-x-8 {
    column-gap: 2rem;
}

.sticky {
    position: sticky;
}

.top-28 {
    top: 7rem;
}

.self-start {
    align-self: flex-start;
}

/* Missing compiled Tailwind utilities shimmed here */
.pt-20 {
    padding-top: 5rem;
}

/* overflow-x: hidden turns the element into a scroll container, which breaks
   position: sticky for descendants (the ROM page sidebar). `clip` prevents
   horizontal overflow without creating a scroll container. */
body.overflow-x-hidden,
.overflow-x-hidden {
    overflow-x: clip;
}

/* CTA banner styles are emitted once inline (switch_roms_cta_inline_css) so
   they survive WP Rocket's style reordering; removing the duplicates here
   keeps the request small. */

/* Rendering optimization: skip layout/paint work for cards that are off-screen.
   Each .glass-card below the fold is only drawn when scrolled near the viewport,
   which massively speeds up long ROM/article grids. Disabled on small screens,
   where the reserved 420px placeholder causes layout jumps while scrolling. */
@media (min-width: 768px) {
    .glass-card {
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
}
/* Rank Math breadcrumbs */
.rank-math-breadcrumb {
    margin-bottom: 12px;
}
.rank-math-breadcrumb p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: hsl(0 0% 65%);
    line-height: 1.5;
}
.rank-math-breadcrumb a {
    color: hsl(0 0% 65%);
    text-decoration: none;
    transition: color .15s ease;
}
.rank-math-breadcrumb a:hover {
    color: hsl(278 100% 60%);
    text-decoration: none;
}
.rank-math-breadcrumb .separator {
    display: inline-flex;
    align-items: center;
    opacity: .5;
}