body {
    font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
    color: #e6e6ff;
    overflow-x: hidden;
    background: #0a0015;
    transition: background 0.5s, color 0.5s;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

.retro-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Enhanced gradient with deeper colors for immersion */
    background: radial-gradient(circle at center, rgba(255, 0, 204, 0.35), rgba(0, 246, 255, 0.15), transparent);
    z-index: -2;
    animation: parallax 45s linear infinite; /* Faster for dynamic feel */
}

.grid-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Softer, more vibrant grid lines */
    background: linear-gradient(0deg, rgba(0, 246, 255, 0.2) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 246, 255, 0.2) 1px, transparent 1px);
    background-size: 40px 40px; /* Tighter grid for detail */
    animation: gridMove 15s linear infinite; /* Smoother motion */
}

.stars-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Upgraded star pattern with varied sizes */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="10" cy="10" r="1.2" fill="#ffffff" opacity="0.9"/><circle cx="50" cy="30" r="2" fill="#ffffff" opacity="0.7"/><circle cx="80" cy="70" r="0.8" fill="#ffffff" opacity="0.85"/></svg>') repeat;
    opacity: 0.4;
    animation: twinkle 4s infinite; /* Slightly faster twinkle */
}

.vhs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Enhanced VHS effect with scanlines */
    background: linear-gradient(
        rgba(230, 230, 255, 0.06) 2%,
        transparent 2%,
        transparent 98%,
        rgba(230, 230, 255, 0.06) 98%
    ),
    repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 246, 255, 0.1) 3px,
        rgba(0, 246, 255, 0.1) 4px
    );
    animation: vhsFlicker 0.25s infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.65; }
}

@keyframes gridMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(-40px); }
}

@keyframes parallax {
    0% { transform: translateY(0); }
    100% { transform: translateY(-80px); }
}

@keyframes vhsFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

@keyframes pulseBorder {
    0% { box-shadow: 0 0 20px #ff00cc, 0 0 40px #00f6ff; }
    50% { box-shadow: 0 0 30px #00ff99, 0 0 50px #ff00cc; }
    100% { box-shadow: 0 0 20px #ff00cc, 0 0 40px #00f6ff; }
}

.glitch {
    position: relative;
    animation: glitch 1s linear infinite;
}

.glitch:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 2px;
    width: 100%;
    height: 100%;
    text-shadow: -2px 0 #ff00cc;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-top 1.3s linear infinite;
}

.glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: -2px;
    width: 100%;
    height: 100%;
    text-shadow: 2px 0 #00f6ff;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-bottom 1.5s linear infinite;
}

@keyframes glitch {
    2%, 64% { transform: translate(1px, 0) skew(0deg); }
    4%, 60% { transform: translate(-1px, 0) skew(0deg); }
    62% { transform: translate(0, 0) skew(3deg); }
}

@keyframes glitch-top {
    2%, 64% { transform: translate(2px, -2px); }
    4%, 60% { transform: translate(-2px, 2px); }
    62% { transform: translate(0, 0) skew(3deg); }
}

@keyframes glitch-bottom {
    2%, 64% { transform: translate(-2px, 0); }
    4%, 60% { transform: translate(2px, 0); }
    62% { transform: translate(0, 0) skew(3deg); }
}

.neon-nav {
    /* Softer background with blur */
    background: rgba(18, 0, 36, 0.85);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px #00f6ff, 0 0 40px #ff00cc;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.retro-button {
    background: linear-gradient(45deg, #ff00cc, #ff3399); /* Gradient for depth */
    border: 3px solid #00f6ff;
    box-shadow: 0 0 12px #00f6ff, 0 0 25px #ff00cc, inset 0 0 8px #00f6ff;
    transition: all 0.3s ease;
    color: #e6e6ff;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    cursor: pointer;
    position: relative;
    z-index: 11;
    /* Add scanline overlay */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 246, 255, 0.05) 2px,
        rgba(0, 246, 255, 0.05) 3px
    );
}

.retro-button:hover {
    transform: scale(1.08) translateY(-2px); /* Slight lift effect */
    box-shadow: 0 0 20px #00ff99, 0 0 30px #ff00cc, inset 0 0 10px #00f6ff;
    color: #ffffff;
}

.retro-button.active {
    background: linear-gradient(45deg, #00f6ff, #00b7cc);
    border: 3px solid #ff00cc;
    box-shadow: 0 0 20px #00ff99, inset 0 0 10px #ff00cc;
    color: #120024;
}

.play-now {
    background: linear-gradient(45deg, #ff00cc, #00f6ff, #00ff99);
    font-size: clamp(1.1rem, 2.8vw, 1.4rem);
    padding: 0.75rem 1.5rem;
    animation: pulse 1.5s infinite;
    color: #ffffff;
    text-shadow: 0 0 10px #120024;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 20px #00f6ff, 0 0 30px #ff00cc; }
    50% { transform: scale(1.12); box-shadow: 0 0 25px #00ff99, 0 0 40px #ff00cc; }
    100% { transform: scale(1); box-shadow: 0 0 20px #00f6ff, 0 0 30px #ff00cc; }
}

.arcade-machine {
    position: relative;
    width: 100%;
    max-width: 340px; /* Slightly larger for presence */
    height: auto;
    aspect-ratio: 320 / 450;
    background: linear-gradient(45deg, #1a1a2e, #2a2a4b);
    border: 8px solid #ff00cc;
    border-radius: 20px;
    box-shadow: 0 0 30px #ff00cc, inset 0 0 20px #00f6ff, 0 10px 20px rgba(0, 0, 0, 0.5); /* Added depth */
    margin: 0 auto;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.arcade-machine:hover {
    transform: scale(1.06) translateY(-5px); /* 3D lift */
    box-shadow: 0 0 40px #00ff99, inset 0 0 25px #00f6ff, 0 15px 30px rgba(0, 0, 0, 0.5);
}

.large-arcade-machine {
    position: relative;
    width: 100%;
    max-width: 720px;
    height: auto;
    aspect-ratio: 320 / 450;
    background: linear-gradient(45deg, #1a1a2e, #2a2a4b);
    border: 12px solid #ff00cc;
    border-radius: 30px;
    box-shadow: 0 0 50px #ff00cc, inset 0 0 30px #00f6ff, 0 20px 40px rgba(0, 0, 0, 0.5);
    margin: 2rem auto;
    overflow: hidden;
    animation: pulseBorder 1.8s infinite;
}

.large-arcade-machine:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 0 60px #00ff99, inset 0 0 40px #00f6ff, 0 25px 50px rgba(0, 0, 0, 0.5);
}

.arcade-marquee {
    background: #120024;
    height: 15%;
    border-bottom: 4px solid #00f6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px #00f6ff;
}

.large-arcade-machine .arcade-marquee {
    background: #2a004b;
    height: 10%;
    border-bottom: 6px solid #00f6ff;
    box-shadow: 0 0 25px #00f6ff;
}

.arcade-marquee h3 {
    color: #ffffff;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    text-shadow: 0 0 12px #00ff99;
}

.large-arcade-machine .arcade-marquee h3 {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    text-shadow: 0 0 15px #00ff99;
}

.arcade-frame {
    background: linear-gradient(45deg, #4b0082, #2a004b);
    height: 65%;
    border: 5px solid #00f6ff;
    border-radius: 12px 12px 0 0;
    padding: 20px;
    box-shadow: inset 0 0 25px #00f6ff;
    position: relative;
}

.large-arcade-machine .arcade-frame {
    height: 75%;
    border: 8px solid #00f6ff;
    padding: 30px;
    box-shadow: inset 0 0 35px #00f6ff;
    border-radius: 20px 20px 0 0;
}

.arcade-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Enhanced scanlines */
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 246, 255, 0.2) 3px,
        rgba(0, 246, 255, 0.2) 4px
    );
    pointer-events: none;
}

.large-arcade-machine .arcade-frame::before {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 5px,
        rgba(0, 246, 255, 0.3) 5px,
        rgba(0, 246, 255, 0.3) 6px
    );
}

.arcade-screen {
    background: linear-gradient(45deg, #00f6ff, #00b7cc);
    border-radius: 10px;
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: crtFlicker 2.5s infinite;
    /* Add glowing screen effect */
    box-shadow: inset 0 0 30px rgba(0, 246, 255, 0.5), 0 0 20px #00f6ff;
}

.large-arcade-machine .arcade-screen {
    background: linear-gradient(45deg, #00f6ff, #00ff99);
    padding: 25px;
    border-radius: 15px;
    box-shadow: inset 0 0 30px #120024, 0 0 20px #00ff99;
    overflow: hidden;
}

.arcade-screen canvas {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 4px solid #00f6ff;
    box-shadow: 0 0 20px #00f6ff;
    background: #000;
}

.large-arcade-machine .arcade-screen canvas {
    border: 5px solid #00ff99;
    box-shadow: 0 0 25px #00ff99;
}

.arcade-screen .fallback-text {
    color: #ffffff;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    text-align: center;
    display: none;
}

.arcade-screen canvas:not(:supported) + .fallback-text {
    display: block;
}

@keyframes crtFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.94; }
}

.arcade-controls {
    height: 20%;
    background: #1a1a2e;
    border-top: 4px solid #00f6ff;
    padding: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 15px #ff00cc;
}

.large-arcade-machine .arcade-controls {
    height: 15%;
    background: #2a004b;
    border-top: 6px solid #00f6ff;
    padding: 25px;
    box-shadow: 0 0 25px #ff00cc;
}

.joystick {
    width: clamp(35px, 12vw, 45px);
    height: clamp(35px, 12vw, 45px);
    background: #120024;
    border: 4px solid #ff0000;
    border-radius: 50%;
    position: relative;
}

.large-arcade-machine .joystick {
    width: clamp(55px, 9vw, 65px);
    height: clamp(55px, 9vw, 65px);
    border: 5px solid #ff0000;
}

.joystick::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: clamp(22px, 7vw, 27px);
    height: clamp(22px, 7vw, 27px);
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 8px #e6e6ff;
}

.large-arcade-machine .joystick::before {
    top: 12px;
    left: 12px;
    width: clamp(32px, 6vw, 38px);
    height: clamp(32px, 6vw, 38px);
    box-shadow: 0 0 10px #e6e6ff;
}

.control-buttons {
    display: flex;
    gap: 12px;
}

.large-arcade-machine .control-buttons {
    gap: 25px;
}

.control-button {
    width: clamp(25px, 7vw, 35px);
    height: clamp(25px, 7vw, 35px);
    border-radius: 50%;
    box-shadow: 0 0 10px #e6e6ff;
}

.large-arcade-machine .control-button {
    width: clamp(35px, 6vw, 45px);
    height: clamp(35px, 6vw, 45px);
    box-shadow: 0 0 15px #e6e6ff;
}

.control-button.red { background: #ff5555; }
.control-button.yellow { background: #ffff55; }
.control-button.blue { background: #5555ff; }

.neon-footer {
    /* Dynamic neon underline */
    background: rgba(18, 0, 36, 0.85);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px #00f6ff, 0 0 40px #ff00cc;
    padding: 1.25rem;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    color: #e6e6ff;
    text-align: center;
    position: relative;
    z-index: 10;
}

.neon-footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff00cc, #00f6ff, #ff00cc);
    animation: neonSlide 3s infinite;
}

@keyframes neonSlide {
    0% { background-position: 0; }
    100% { background-position: 200%; }
}

.arcade-parlor {
    position: relative;
    overflow: hidden;
    padding: 25px 0;
    text-align: center;
}

.arcade-parlor h1, .arcade-parlor h2 {
    color: #ffffff;
    text-shadow: 0 0 15px #00ff99;
}

.arcade-parlor p {
    color: #e6e6ff;
    text-shadow: 0 0 8px #ff00cc;
}

.holo-projector {
    position: relative;
    margin: 2.5rem auto;
    max-width: 950px;
}

.holo-base {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 12px;
    background: #ff00cc;
    border-radius: 6px;
    box-shadow: 0 0 20px #ff00cc;
    animation: holoGlow 1.8s infinite;
}

.holo-beam {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 246, 255, 0.35), transparent);
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    opacity: 0.6;
    animation: holoFlicker 1.3s infinite;
}

.holo-content {
    position: relative;
    z-index: 1;
    background: rgba(18, 0, 36, 0.65);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 3px solid #ff00cc;
    box-shadow: inset 0 0 10px #00f6ff;
    padding: 2rem;
    text-align: center;
}

.holo-content h2, .holo-content p, .holo-content .retro-button {
    color: #ffffff;
}

@keyframes holoGlow {
    0%, 100% { box-shadow: 0 0 20px #ff00cc; }
    50% { box-shadow: 0 0 30px #ff00cc; }
}

@keyframes holoFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

.container {
    padding: clamp(15px, 4vw, 25px);
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.text-3xl {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

.text-5xl {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
}

.text-7xl {
    font-size: clamp(3.2rem, 7.5vw, 5.5rem);
    text-shadow: 0 0 20px #00f6ff, 0 0 35px #ff00cc;
}

.theme-switch-wrapper {
    display: inline-block;
    position: relative;
    z-index: 11;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: clamp(55px, 12vw, 65px);
    height: clamp(30px, 6vw, 36px);
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #ff00cc, #ff3399);
    transition: 0.4s;
    border: 3px solid #00f6ff;
    box-shadow: 0 0 12px #00f6ff;
    z-index: 11;
}

.slider:before {
    position: absolute;
    content: "";
    height: clamp(24px, 5vw, 28px);
    width: clamp(24px, 5vw, 28px);
    left: 5px;
    bottom: 5px;
    background: #e6e6ff;
    transition: 0.4s;
    box-shadow: inset 0 0 6px #00f6ff;
    z-index: 11;
}

input:checked + .slider {
    background: linear-gradient(45deg, #00f6ff, #00b7cc);
}

input:checked + .slider:before {
    transform: translateX(clamp(24px, 5vw, 28px));
}

.slider.round {
    border-radius: 36px;
}

.slider.round:before {
    border-radius: 50%;
}

.game-grid {
    display: grid;
    gap: 2rem;
    justify-content: center; /* Centers the grid horizontally */
    grid-template-columns: repeat(3, minmax(320px, 320px)); /* Forces 3 cards per row */
    padding: 1.5rem 0;
    transition: opacity 0.3s ease;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 320px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    /* Add 3D perspective */
    perspective: 1000px;
}

.game-card:hover {
    transform: scale(1.06) rotateX(5deg); /* 3D tilt */
}

.game-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Holographic sheen */
    background: linear-gradient(
        45deg,
        transparent,
        rgba(0, 246, 255, 0.2) 50%,
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card:hover::before {
    opacity: 0.4;
}

.game-image {
    width: 320px;
    height: 320px;
    aspect-ratio: 1 / 1;
    border: 4px solid #00f6ff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 15px #00f6ff, 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: border-width 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover .game-image {
    border-width: 6px;
    box-shadow: 0 0 25px #00ff99, 0 15px 30px rgba(0, 0, 0, 0.4);
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-title {
    color: #ffffff;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    margin-top: 0.75rem;
    text-align: center;
    text-shadow: 0 0 10px #00ff99;
}

.enhanced-grid {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.holo-filter {
    background: rgba(18, 0, 36, 0.75);
    backdrop-filter: blur(6px);
    border: 4px solid #ff00cc;
    border-radius: 12px;
    box-shadow: 0 0 20px #ff00cc, inset 0 0 12px #00f6ff;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    animation: vhsFlicker 0.25s infinite;
}

.holo-panel {
    background: rgba(18, 0, 36, 0.75);
    backdrop-filter: blur(6px);
    border: 4px solid #ff00cc;
    border-radius: 20px;
    box-shadow: 0 0 25px #ff00cc, inset 0 0 20px #00f6ff;
    padding: 2rem;
    margin: 2.5rem 0;
    position: relative;
    animation: vhsFlicker 0.25s infinite;
}

.neon-text {
    color: #ffffff;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    text-align: center;
    margin-bottom: 0.75rem;
    text-shadow: 0 0 10px #00f6ff;
}

.filter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
}
.neon-input {
    background: #2a004b;
    border: 4px solid #00f6ff;
    box-shadow: 0 0 12px #00f6ff, inset 0 0 8px #00f6ff;
    color: #ffffff;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    padding: 0.75rem 1.5rem;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.neon-input::placeholder {
    color: #e6e6ff;
    opacity: 0.75;
}

.neon-input:focus {
    outline: none;
    box-shadow: 0 0 20px #00ff99, inset 0 0 10px #00ff99;
    animation: glitch 0.4s linear infinite;
}

.neon-input::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 246, 255, 0.15) 2px,
        rgba(0, 246, 255, 0.15) 3px
    );
    pointer-events: none;
    opacity: 0.6;
}

.tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.neon-tag {
    background: linear-gradient(45deg, #ff00cc, #ff3399);
    border: 3px solid #00f6ff;
    box-shadow: 0 0 10px #00f6ff;
    color: #ffffff;
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* ✅ Add this line */
    font-family: 'Press Start 2P', cursive;
}

.neon-tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(0, 246, 255, 0.3) 50%,
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neon-tag:hover::before {
    opacity: 0.5;
}

.neon-tag:hover {
    transform: scale(1.08) rotate(2deg); /* Playful tilt */
    box-shadow: 0 0 15px #00ff99;
}

.neon-tag.active {
    background: linear-gradient(45deg, #00f6ff, #00b7cc);
    border: 3px solid #ff00cc;
    color: #120024;
    box-shadow: 0 0 15px #00ff99;
}

.neon-tag.active::before {
    opacity: 0.6;
}

.similar-games {
    text-align: center;
}

.neon-dashboard {
    background: rgba(18, 0, 36, 0.85);
    backdrop-filter: blur(6px);
    border: 5px solid #ff00cc;
    border-radius: 20px;
    box-shadow: 0 0 30px #ff00cc, inset 0 0 20px #00f6ff;
    padding: 2.5rem;
    margin: 2.5rem 0;
    position: relative;
    animation: vhsFlicker 0.25s infinite;
}

.controls-content {
    color: #ffffff;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.controls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.controls-section, .info-section {
    padding: 1.5rem;
    border-radius: 10px;
    background: rgba(42, 0, 75, 0.55);
    box-shadow: 0 0 15px #00f6ff;
}

.controls-section h3, .info-section h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.5rem);
    margin: 0.75rem 0;
    color: #ffffff;
    text-shadow: 0 0 10px #00ff99;
}

.controls-section ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.controls-section li {
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-key {
    background: #00ff99;
    color: #120024;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    box-shadow: 0 0 10px #00ff99;
    transition: transform 0.3s ease;
}

.control-key:hover {
    transform: scale(1.08);
}

.info-section p {
    margin: 0.75rem 0;
    line-height: 1.5;
}

@media (min-width: 641px) {
    .enhanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filter-section {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
    .neon-input {
        width: 350px;
    }
    .controls-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1025px) {
    .enhanced-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .game-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .game-card {
        width: 280px;
    }
    .game-image {
        width: 280px;
        height: 280px;
    }
    .holo-filter {
        padding: 1rem;
    }
    .large-arcade-machine {
        max-width: 500px;
    }
    .large-arcade-machine .arcade-screen canvas {
        width: 100%;
        height: auto;
    }
    .text-7xl {
        font-size: clamp(2.2rem, 6.5vw, 3.2rem);
    }
    .neon-dashboard {
        padding: 1.5rem;
    }
    .controls-content {
        font-size: clamp(0.9rem, 1.8vw, 1rem);
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .game-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); /* Falls back to 2 or 1 card for smaller screens */
    }
    .game-card {
        width: 280px;
    }
    .game-image {
        width: 280px;
        height: 280px;
    }
}

@media (min-width: 1025px) {
    .game-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); /* Falls back to 2 or 1 card for smaller screens */
    }
    .game-card {
        width: 280px;
    }
    .game-image {
        width: 280px;
        height: 280px;
    }
}

.dark-mode {
    background: #0f0020; /* Slightly lighter for contrast */
    color: #e6e6ff;
    transition: background 0.5s, color 0.5s; /* Smooth transition */
}

.dark-mode .retro-grid {
    background: radial-gradient(circle at center, rgba(0, 246, 255, 0.4), rgba(255, 0, 204, 0.2), transparent);
}

.dark-mode .grid-lines {
    background: linear-gradient(0deg, rgba(255, 0, 204, 0.2) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 0, 204, 0.2) 1px, transparent 1px);
}

.dark-mode .vhs-overlay {
    background: linear-gradient(
        rgba(230, 230, 255, 0.07) 2%,
        transparent 2%,
        transparent 98%,
        rgba(230, 230, 255, 0.07) 98%
    ),
    repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 0, 204, 0.1) 3px,
        rgba(255, 0, 204, 0.1) 4px
    );
}

.dark-mode .glitch:before {
    text-shadow: -2px 0 #00f6ff;
}

.dark-mode .glitch:after {
    text-shadow: 2px 0 #ff00cc;
}

.dark-mode .retro-button {
    background: linear-gradient(45deg, #00f6ff, #00b7cc);
    border: 3px solid #ff00cc;
    box-shadow: 0 0 12px #ff00cc, 0 0 25px #00f6ff, inset 0 0 8px #ff00cc;
    color: #120024;
}

.dark-mode .retro-button:hover {
    box-shadow: 0 0 20px #00ff99, 0 0 30px #00f6ff, inset 0 0 10px #ff00cc;
    color: #120024;
}

.dark-mode .retro-button.active {
    background: linear-gradient(45deg, #ff00cc, #ff3399);
    border: 3px solid #00f6ff;
    box-shadow: 0 0 20px #00ff99, inset 0 0 10px #00f6ff;
    color: #120024;
}

.dark-mode .play-now {
    background: linear-gradient(45deg, #00f6ff, #ff00cc, #00ff99);
    color: #ffffff;
}

.dark-mode .arcade-machine {
    background: linear-gradient(45deg, #2a004b, #4b0082);
    border: 8px solid #00f6ff;
    box-shadow: 0 0 30px #00f6ff, inset 0 0 20px #ff00cc, 0 10px 20px rgba(0, 0, 0, 0.5);
}

.dark-mode .arcade-machine:hover {
    box-shadow: 0 0 40px #00ff99, inset 0 0 25px #ff00cc, 0 15px 30px rgba(0, 0, 0, 0.5);
}

.dark-mode .large-arcade-machine {
    background: linear-gradient(45deg, #2a004b, #4b0082);
    border: 12px solid #00f6ff;
    box-shadow: 0 0 50px #00f6ff, inset 0 0 30px #ff00cc, 0 20px 40px rgba(0, 0, 0, 0.5);
    animation: pulseBorder 1.8s infinite;
}

.dark-mode .large-arcade-machine:hover {
    box-shadow: 0 0 60px #00ff99, inset 0 0 40px #ff00cc, 0 25px 50px rgba(0, 0, 0, 0.5);
}

.dark-mode .arcade-marquee {
    background: #2a004b;
    border-bottom: 4px solid #ff00cc;
    box-shadow: 0 0 15px #ff00cc;
}

.dark-mode .large-arcade-machine .arcade-marquee {
    background: #120024;
    border-bottom: 6px solid #ff00cc;
    box-shadow: 0 0 25px #ff00cc;
}

.dark-mode .arcade-marquee h3 {
    color: #ffffff;
    text-shadow: 0 0 12px #00ff99;
}

.dark-mode .arcade-frame {
    background: linear-gradient(45deg, #4b0082, #2a004b);
    border: 5px solid #ff00cc;
    box-shadow: inset 0 0 25px #ff00cc;
}

.dark-mode .large-arcade-machine .arcade-frame {
    border: 8px solid #ff00cc;
    box-shadow: inset 0 0 35px #ff00cc;
}

.dark-mode .arcade-frame::before {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 0, 204, 0.2) 3px,
        rgba(255, 0, 204, 0.2) 4px
    );
}

.dark-mode .large-arcade-machine .arcade-frame::before {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 5px,
        rgba(255, 0, 204, 0.3) 5px,
        rgba(255, 0, 204, 0.3) 6px
    );
}

.dark-mode .arcade-screen {
    background: linear-gradient(45deg, #ff00cc, #00f6ff);
    color: #120024;
    box-shadow: inset 0 0 30px rgba(255, 0, 204, 0.5), 0 0 20px #ff00cc;
}

.dark-mode .large-arcade-machine .arcade-screen {
    background: linear-gradient(45deg, #ff00cc, #00ff99);
    box-shadow: inset 0 0 30px #120024, 0 0 20px #ff00cc;
}

.dark-mode .arcade-screen h3, .dark-mode .arcade-screen p {
    color: #ffffff;
}

.dark-mode .arcade-screen .retro-button {
    color: #ffffff;
}

.dark-mode .arcade-screen img {
    border: 3px solid #ff00cc;
    box-shadow: 0 0 15px #ff00cc;
}

.dark-mode .arcade-screen canvas {
    border: 5px solid #00ff99;
    box-shadow: 0 0 25px #00ff99;
}

.dark-mode .arcade-controls {
    background: #2a004b;
    border-top: 4px solid #ff00cc;
    box-shadow: 0 0 15px #00f6ff;
}

.dark-mode .large-arcade-machine .arcade-controls {
    background: #120024;
    border-top: 6px solid #ff00cc;
    box-shadow: 0 0 25px #00f6ff;
}

.dark-mode .joystick {
    border: 4px solid #00f6ff;
}

.dark-mode .joystick::before {
    background: #00f6ff;
    box-shadow: 0 0 10px #e6e6ff;
}

.dark-mode .holo-projector {
    background: rgba(230, 230, 255, 0.2);
    border: 5px solid #ff00cc;
    box-shadow: 0 0 25px #ff00cc, inset 0 0 15px #00f6ff;
}

.dark-mode .holo-base {
    background: #00f6ff;
    box-shadow: 0 0 20px #00f6ff;
}

.dark-mode .holo-beam {
    background: linear-gradient(to top, rgba(255, 0, 204, 0.4), transparent);
}

.dark-mode .holo-content {
    background: rgba(230, 230, 255, 0.15);
    border: 3px solid #00f6ff;
    box-shadow: inset 0 0 10px #ff00cc;
}

.dark-mode .holo-content h2, .dark-mode .holo-content p, .dark-mode .holo-content .retro-button {
    color: #ffffff;
}

.dark-mode .game-image {
    border: 4px solid #ff00cc;
    box-shadow: 0 0 15px #ff00cc, 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .game-card:hover .game-image {
    border-width: 6px;
    box-shadow: 0 0 25px #00ffcc, 0 15px 30px rgba(0, 0, 0, 0.4);
}

.dark-mode .game-card::before {
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 0, 204, 0.2) 50%,
        transparent
    );
}

.dark-mode .game-title {
    color: #ffffff;
    text-shadow: 0 0 10px #00ffcc;
}

.dark-mode .holo-filter {
    background: rgba(18, 0, 36, 0.85);
    border: 4px solid #00f6ff;
    box-shadow: 0 0 20px #00f6ff, inset 0 0 12px #ff00cc;
}

.dark-mode .holo-panel {
    background: rgba(18, 0, 36, 0.85);
    border: 4px solid #00f6ff;
    box-shadow: 0 0 25px #00f6ff, inset 0 0 20px #ff00cc;
}

.dark-mode .neon-text {
    color: #ffffff;
    text-shadow: 0 0 10px #ff00cc;
}

.dark-mode .neon-input {
    background: #2a004b;
    border: 4px solid #ff00cc;
    box-shadow: 0 0 12px #ff00cc, inset 0 0 8px #ff00cc;
    color: #ffffff;
}

.dark-mode .neon-input::placeholder {
    color: #e6e6ff;
}

.dark-mode .neon-input:focus {
    box-shadow: 0 0 20px #00ffcc, inset 0 0 10px #00ffcc;
}

.dark-mode .neon-input::before {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 0, 204, 0.15) 2px,
        rgba(255, 0, 204, 0.15) 3px
    );
}

.dark-mode .neon-tag {
    background: linear-gradient(45deg, #ff00cc, #ff3399);
    border: 3px solid #00f6ff;
    box-shadow: 0 0 10px #00f6ff;
    color: #ffffff;
}

.dark-mode .neon-tag::before {
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 0, 204, 0.3) 50%,
        transparent
    );
}

.dark-mode .neon-tag:hover {
    box-shadow: 0 0 15px #00ffcc;
}

.dark-mode .neon-tag.active {
    background: linear-gradient(45deg, #00f6ff, #00b7cc);
    border: 3px solid #ff00cc;
    color: #120024;
    box-shadow: 0 0 15px #00ffcc;
}

.dark-mode .neon-dashboard {
    background: rgba(18, 0, 36, 0.9);
    border: 5px solid #00f6ff;
    box-shadow: 0 0 30px #00f6ff, inset 0 0 20px #ff00cc;
}

.dark-mode .controls-section, .dark-mode .info-section {
    background: rgba(42, 0, 75, 0.65);
    box-shadow: 0 0 15px #ff00cc;
}

.dark-mode .control-key {
    background: #ff00cc;
    color: #ffffff;
    box-shadow: 0 0 10px #ff00cc;
}

.dark-mode .control-key:hover {
    transform: scale(1.08);
}

.auth-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(18, 0, 36, 0.85);
    backdrop-filter: blur(6px);
    border: 5px solid #00f6ff;
    border-radius: 15px;
    box-shadow: 0 0 25px #00f6ff, inset 0 0 15px #ff00cc;
    animation: pulseBorder 1.8s infinite;
}

.auth-form {
    padding: 1.5rem;
    display: flex;
    justify-content: center;
}

.neon-input-large {
    font-size: clamp(1.1rem, 2.8vw, 1.4rem);
    padding: 1rem 2rem;
    max-width: 375px;
    border: 5px solid #00f6ff;
    box-shadow: 0 0 20px #00f6ff, inset 0 0 10px #ff00cc;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.neon-input-large:focus {
    transform: scale(1.03);
    box-shadow: 0 0 25px #00ff99, inset 0 0 12px #00ff99;
    animation: glitch 0.4s linear infinite;
}

.neon-input-large::placeholder {
    color: #e6e6ff;
    opacity: 0.85;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.retro-button-large {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    padding: 1rem 1.5rem;
    background: linear-gradient(45deg, #ff00cc, #00f6ff, #00ff99);
    border: 5px solid #00ff99;
    box-shadow: 0 0 20px #00ff99, inset 0 0 12px #ff00cc;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Press Start 2P', cursive;

    width: 100%;             /* ✅ fill the parent */
    max-width: 400px;        /* ✅ same as .neon-input */
    box-sizing: border-box;
    white-space: nowrap;     /* ✅ prevent multi-line overflow */
    text-align: center;
}



.retro-button-large:hover {
    transform: scale(1.12);
    box-shadow: 0 0 30px #00ff99, inset 0 0 15px #ff00cc;
}

.dark-mode .auth-container {
    background: rgba(18, 0, 36, 0.9);
    border: 5px solid #ff00cc;
    box-shadow: 0 0 25px #ff00cc, inset 0 0 15px #00f6ff;
}

.dark-mode .neon-input-large {
    border: 5px solid #ff00cc;
    box-shadow: 0 0 20px #ff00cc, inset 0 0 10px #00f6ff;
}

.dark-mode .neon-input-large:focus {
    box-shadow: 0 0 25px #00ffcc, inset 0 0 12px #00ffcc;
}

.dark-mode .retro-button-large {
    background: linear-gradient(45deg, #00f6ff, #ff00cc, #00ff99);
    border: 5px solid #00ff99;
    box-shadow: 0 0 20px #00ff99, inset 0 0 12px #00f6ff;
}

.dark-mode .ret
ro-button-large:hover {
    box-shadow: 0 0 30px #00ffcc, inset 0 0 15px #00f6ff;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background: rgba(18, 0, 36, 0.85);
    border: 4px solid #00f6ff;
    box-shadow: 0 0 20px #00f6ff;
}

.leaderboard-table th, .leaderboard-table td {
    padding: 1rem;
    text-align: center;
    border: 2px solid #ff00cc;
}

.leaderboard-table th {
    background: linear-gradient(45deg, #ff00cc, #00f6ff, #00ff99);
    color: #120024;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.leaderboard-table td {
    color: #e6e6ff;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    text-shadow: 0 0 8px #00f6ff;
}

.dark-mode .leaderboard-table {
    border: 4px solid #ff00cc;
    box-shadow: 0 0 20px #ff00cc;
}

.dark-mode .leaderboard-table th {
    background: linear-gradient(45deg, #00f6ff, #ff00cc, #00ff99);
}

.dark-mode .leaderboard-table td {
    border: 2px solid #00f6ff;
    text-shadow: 0 0 8px #ff00cc;
}