/* Vibe Arcade - Main Styles */

:root {
    --primary-neon: #00ffff;
    /* Cyan */
    --secondary-neon: #ff6ec7;
    /* Pink */
    --yellow-neon: #ffff00;
    /* Yellow */
    --red-neon: #ff0000;
    /* Red */
    --background-dark: #000015;
    --text-light: #ffffff;
    --primary-text-color: #e0e0e0;
    --secondary-text-color: #a0a0c0;
    --accent-color: #00f2ff;
    --card-background: #1a1a3a;
    /* Or #0a192f based on games.html preference, harmonizing to #1a1a3a for now or maybe a mix */
    --card-background-alt: #0a192f;
    --border-color: #3a3a5a;
    --accent-glow: rgba(0, 255, 255, 0.4);
    --neon-blue-glow: rgba(0, 221, 255, 0.7);
    --multi-gradient: linear-gradient(45deg, var(--primary-neon), var(--yellow-neon), var(--secondary-neon), var(--red-neon));
    --shadow-glow: 0 0 20px var(--accent-glow);
    --transition: all 0.4s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-dark);
    color: var(--primary-text-color);
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent-color);
    text-align: center;
}

h1,
header h1 {
    font-size: clamp(2rem, 6vw, 4rem) !important;
    /* Responsive sizing using clamp */
    margin: 0;
    text-shadow: var(--shadow-glow), 0 0 30px var(--yellow-neon);
    animation: neon-flicker 1.5s infinite alternate;
}

h2 {
    font-size: 2.5em;
    color: var(--red-neon);
    /* Defaulting to red neon for section headers based on aboutus/contactus */
    text-shadow: var(--shadow-glow);
    margin-bottom: 25px;
}

a {
    color: var(--primary-neon);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--yellow-neon);
}

/* Header */
header {
    background: var(--multi-gradient);
    background-size: 400% 400%;
    animation: gradient-flow 10s ease infinite;
    padding: 80px 20px 50px;
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 20px;
    /* Harmonized height */
    background: linear-gradient(to bottom, transparent, var(--background-dark));
}

header p {
    font-size: 1.3em;
    font-weight: 300;
    max-width: 800px;
    margin: 15px auto 0;
    opacity: 0.9;
    /* Text on gradient should be dark or white depending on contrast. Original had no specific color, inheriting body color which is light. But header bg is bright. Let's check. Original index.html header text color was inherited (whiteish). Wait, header bg is multi-gradient. White text might be hard to read on yellow/cyan. Let's stick to white with shadow or dark. Index.html didn't specify color for p in header explicitly, but body is text-light. Let's keep it text-light for now but maybe add text-shadow if needed. Actually, looking at index.html, it didn't have specific color. Let's assume white is fine or add a text-shadow. */
}

/* Animations */
@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes neon-flicker {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.85;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation */
nav {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    padding: 15px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 20000 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 25px;
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2em;
    position: relative;
    transition: var(--transition);
    min-width: 80px;
    padding: 10px;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--multi-gradient);
    transition: var(--transition);
}

nav a:hover,
nav a:focus {
    color: var(--yellow-neon);
    text-shadow: var(--shadow-glow);
}

nav a:hover::after,
nav a:focus::after {
    width: 100%;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: var(--primary-neon);
    transition: var(--transition);
}

/* Mobile Menu */
.nav-links.active {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    padding: 20px 0;
    z-index: 20000 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Sections */
section {
    padding: 60px 20px;
    max-width: 1400px;
    margin: 0 auto;
    animation: fade-in 1s ease;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

/* Buttons */
.cta-button,
.play-btn {
    background: var(--multi-gradient);
    color: var(--background-dark);
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;
    transition: var(--transition);
    display: inline-block;
    box-shadow: var(--shadow-glow);
    min-width: 200px;
    border: none;
    cursor: pointer;
    text-align: center;
}

.cta-button:hover,
.cta-button:focus,
.play-btn:hover,
.play-btn:focus {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--yellow-neon);
}

.play-btn {
    padding: 10px 25px;
    font-size: 1.1em;
    min-width: 120px;
}

/* Game Cards */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
    gap: 30px;
}

.game-card {
    background: var(--card-background-alt);
    /* Using the darker blue from games.html */
    border: 2px solid var(--primary-neon);
    border-radius: 20px;
    padding: 0;
    /* Reset padding as content handles it */
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 0 10px var(--neon-blue-glow), 0 0 20px var(--neon-blue-glow) inset;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.game-card:hover,
.game-card:focus {
    transform: translateY(-10px);
    box-shadow: 0 0 20px var(--neon-blue-glow), 0 0 30px var(--neon-blue-glow) inset;
    border-color: var(--red-neon);
}

.game-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 2px solid var(--primary-neon);
    margin-bottom: 0;
}

.game-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-card h3 {
    font-family: 'Orbitron', sans-serif;
    /* Harmonized to Orbitron */
    color: var(--yellow-neon);
    margin: 10px 0;
    font-size: 1.6em;
}

.game-card p {
    opacity: 0.85;
    margin-bottom: 20px;
    flex-grow: 1;
    font-size: 0.95em;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-text-color);
    font-size: 1.1em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid var(--primary-neon);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1em;
    transition: var(--transition);
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--yellow-neon);
    box-shadow: var(--shadow-glow);
    outline: none;
}

/* Footer */
footer {
    background: transparent;
    padding: 25px;
    text-align: center;
    font-size: 0.9em;
    opacity: 0.9;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    margin-top: 40px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    header {
        padding: 50px 15px 30px;
    }

    h1,
    header h1 {
        font-size: 2rem !important;
        /* Smaller fixed size for mobile to ensure it fits well */
    }

    header p {
        font-size: 1.1em;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    section {
        padding: 40px 15px;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}