/*
 * ArcadeVibeCode — Ice Blue Arcade
 * Stage 1: Brand foundation and navigation
 *
 * Visual styling only.
 * No JavaScript, database or functional changes.
 */

/* ==========================================
   FONTS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Press+Start+2P&display=swap');

/* ==========================================
   OFFICIAL BRAND COLOURS
========================================== */

:root {
    --avc-navy: #071B34;
    --avc-arcade-blue: #1467B3;
    --avc-electric-blue: #1598E6;
    --avc-ice-blue: #A8DFFF;
    --avc-frost: #F2F9FF;
    --avc-steel: #6689A8;
    --avc-white: #FFFFFF;

    --avc-border: #D8E7F3;
    --avc-hover: #E7F4FF;

    --avc-radius: 10px;

    --avc-shadow: 0 3px 12px rgba(
        7, 27, 52, 0.06
    );
}

/* ==========================================
   GLOBAL FOUNDATION
========================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.5;

    /*
     * Keep the original dark page foundation
     * until the homepage and cards are
     * converted during Stage 2.
     */
    background-color: #0a0f1d;
    color: #FFFFFF;

    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

:focus-visible {
    outline: 3px solid var(--avc-electric-blue);
    outline-offset: 3px;
}

/* ==========================================
   NEW NAVIGATION BAR
========================================== */

body > nav {
    background: var(--avc-white) !important;

    border-bottom: 1px solid var(--avc-border)
        !important;

    box-shadow: var(--avc-shadow);

    backdrop-filter: none;

    min-height: 76px;

    padding: 12px 24px;
}

/* ==========================================
   HEADER WORDMARK
========================================== */

body > nav h1 {
    color: var(--avc-navy) !important;

    font-family: 'Inter', sans-serif;

    font-size: 23px;
    font-weight: 900;

    font-style: normal;

    letter-spacing: -1.2px;
    line-height: 1.1;

    white-space: nowrap;
}

/*
 * Temporarily recolour the existing
 * ArcadeVibeCode text logo.
 *
 * A proper transparent header-logo image
 * will replace this later.
 */

body > nav h1 span:nth-child(1) {
    color: var(--avc-navy) !important;
}

body > nav h1 span:nth-child(2) {
    color: var(--avc-electric-blue) !important;
}

body > nav h1 span:nth-child(3) {
    color: var(--avc-arcade-blue) !important;
}

/* ==========================================
   NAVIGATION LINKS
========================================== */

body > nav .hidden.md\:flex {
    align-items: center;
    gap: 5px;
}

body > nav .hidden.md\:flex > button {
    position: relative;

    padding: 11px 12px;

    border-radius: 8px;

    background: transparent;

    color: var(--avc-navy);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

body > nav .hidden.md\:flex > button:hover {
    color: var(--avc-arcade-blue) !important;

    background: var(--avc-hover);
}

/*
 * Existing app.js adds text-neoncyan
 * to the active navigation button.
 * Keep that mechanism unchanged.
 */

body > nav .hidden.md\:flex
> button.text-neoncyan {
    color: var(--avc-arcade-blue) !important;

    background: #E1F2FF;
}

body > nav .hidden.md\:flex
> button.text-neoncyan::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 2px;

    background: var(--avc-electric-blue);

    border-radius: 4px;
}

/* ==========================================
   ACCOUNT AND ADMIN BUTTONS
========================================== */

body > nav #authBtn {
    color: var(--avc-navy) !important;

    font-size: 13px;
    font-weight: 700;

    padding: 9px 10px;

    border-radius: 8px;
}

body > nav #authBtn:hover {
    color: var(--avc-arcade-blue) !important;

    background: var(--avc-hover);
}

body > nav #adminBtn {
    color: var(--avc-arcade-blue) !important;

    background: #E7F4FF !important;

    border: 1px solid #C4E4FA;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    padding: 9px 12px;

    box-shadow: none;
}

body > nav #adminBtn:hover {
    background: #D4ECFF !important;
}

/* ==========================================
   SUBMIT A GAME BUTTON
========================================== */

body > nav button[onclick*="requireAuthToDashboard"] {
    background: var(--avc-arcade-blue)
        !important;

    color: var(--avc-white) !important;

    border: 1px solid var(--avc-arcade-blue);

    border-radius: 9px;

    padding: 12px 19px;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    box-shadow: none !important;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

body > nav button[onclick*="requireAuthToDashboard"]:hover {
    background: #0E528F !important;

    transform: translateY(-1px);
}

/* ==========================================
   HERO — ORIGINAL PRESERVED FOR STAGE 2
========================================== */

.hero-bg {
    background-image:
        linear-gradient(
            to bottom,
            rgba(10, 15, 29, 0.4),
            rgba(10, 15, 29, 1)
        ),
        url(
            'https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80'
        );

    background-size: cover;
    background-position: center;
}

/* ==========================================
   EXISTING TAB FUNCTIONALITY
   DO NOT REMOVE
========================================== */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   RESPONSIVE NAVIGATION STYLING
========================================== */

@media (max-width: 1200px) {
    body > nav {
        padding-left: 16px;
        padding-right: 16px;
        gap: 12px;
    }

    body > nav > div:first-child {
        gap: 16px;
    }

    body > nav .hidden.md\:flex {
        gap: 0;
    }

    body > nav .hidden.md\:flex > button {
        padding: 9px 7px;
        font-size: 12px;
    }

    body > nav h1 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    body > nav {
        min-height: 68px;

        padding: 12px 14px;

        gap: 10px;
    }

    body > nav h1 {
        font-size: 19px;
    }

    body > nav > div:last-child {
        gap: 6px;
    }

    body > nav #authBtn {
        font-size: 12px;
        padding: 8px;
    }

    body > nav button[onclick*="requireAuthToDashboard"] {
        font-size: 11px;

        padding: 9px 11px;

        border-radius: 8px;
    }
}

@media (max-width: 420px) {
    body > nav h1 {
        font-size: 17px;
    }

    body > nav {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body > nav button {
        transition: none !important;
    }
}