/* =========================================
   FLASHPOINT GAMES
   HOMEPAGE CSS
========================================= */


/* =========================================
   VARIABLES
========================================= */

:root {

    --blue:#45669F;
    --purple:#9F5B94;

    --background:#111624;
    --card:#20283B;

    --text:#F4F6FB;
    --muted:#BCC7DC;

    --glass:rgba(17,22,36,.82);

    --border:rgba(255,255,255,.12);

}



/* =========================================
   RESET
========================================= */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    background:var(--background);

    color:var(--text);

    font-family:"Poppins",sans-serif;

    overflow-x:hidden;

}



a {

    color:inherit;

}



/* =========================================
   TEXT OUTLINE UTILITY
========================================= */


.text-outline {

    text-shadow:

    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
    -2px  0    0 #000,
     2px  0    0 #000,
     0   -2px  0 #000,
     0    2px  0 #000,
     0 6px 15px rgba(0,0,0,.9);

}



/* =========================================
   HEADER / NAV
========================================= */


header {

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    z-index:1000;

}



nav {

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 15px;

    background:var(--glass);

    backdrop-filter:blur(12px);

    border-radius:50px;

    border:1px solid var(--border);

    box-shadow:

    0 10px 30px rgba(0,0,0,.45);

}



/* nav links */


nav a {

    text-decoration:none;

    color:white;

    font-weight:600;

    padding:10px 16px;

    border-radius:50px;

    transition:.3s;

}



nav a:hover {

    background:

    linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

}



/* =========================================
   LOGO
========================================= */


.nav-logo {

    padding-right:15px;

    border-right:

    1px solid rgba(255,255,255,.15);

}



.nav-logo a {

    display:flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

}



.nav-logo img {

    width:120px;

    height:50px;

    object-fit:contain;

    display:block;

}



.nav-logo a:hover {

    background:

    linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

}


/* =========================================
   HERO SECTION
========================================= */


.hero {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    background:

    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.55)
    ),

    url("images/background.jpg");

    background-size:cover;

    background-position:center;

}



/* subtle dark overlay for readability */


.hero::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at center,
        transparent 20%,
        rgba(0,0,0,.35)
    );

    pointer-events:none;

}



.hero-content {

    position:relative;

    z-index:2;

    max-width:900px;

    padding:40px;

}



/* small top text */


.eyebrow {

    color:white;

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:20px;

    text-shadow:

    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 5px 15px rgba(0,0,0,.9);

}



/* main heading */


.hero h1 {

    font-size:5rem;

    line-height:1;

    margin-bottom:20px;

    color:white;

    text-shadow:

    -3px -3px 0 #000,
     3px -3px 0 #000,
    -3px  3px 0 #000,
     3px  3px 0 #000,
     0 8px 20px rgba(0,0,0,.9);

}



/* secondary heading */


.hero h2 {

    color:white;

    font-size:2rem;

    margin-bottom:25px;

    text-shadow:

    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 5px 15px rgba(0,0,0,.9);

}



/* description */


.hero p {

    color:white;

    font-size:1.2rem;

    line-height:1.8;

    text-shadow:

    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 5px 15px rgba(0,0,0,.9);

}



/* =========================================
   HERO BUTTONS
========================================= */


.buttons {

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

}



.buttons a {

    padding:

    16px 35px;

    border-radius:50px;

    background:

    linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

    border:2px solid #000;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

    box-shadow:

    0 8px 20px rgba(0,0,0,.5);

}



.buttons a:hover {

    transform:translateY(-5px);

    border-color:white;

    box-shadow:

    0 15px 35px rgba(159,91,148,.45),
    0 8px 20px rgba(0,0,0,.6);

}



.buttons .secondary {

    background:

    rgba(0,0,0,.45);

    border:

    2px solid white;

}



/* =========================================
   CONVENTION SECTION
========================================= */


.convention {

    padding:90px 8%;

    display:flex;

    justify-content:center;

}



.convention-content {

    max-width:900px;

    text-align:center;

    padding:50px;

    border-radius:30px;

    background:

    linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

    box-shadow:

    0 20px 45px rgba(0,0,0,.35);

}



.convention-content h2 {

    margin-bottom:15px;

    font-size:2rem;

}



.convention-content p {

    line-height:1.8;

    color:white;

}

.buttons .primary {

    background:
    linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

}

/* =========================================
   EVENTS SECTION
========================================= */


#events {

    padding:100px 8%;

    background:

    linear-gradient(
        180deg,
        rgba(69,102,159,.08),
        transparent
    );

}



.section-title {

    text-align:center;

    margin-bottom:40px;

}



.section-label {

    color:#d9c5ff;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:15px;

}



.section-title h2 {

    font-size:2.2rem;

}



/* =========================================
   EVENT GRID
========================================= */


#publicEvents {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:50px;

}



/* =========================================
   EVENT CARD
========================================= */


.event-card {

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:30px;

    background:

    linear-gradient(
        145deg,
        rgba(69,102,159,.35),
        rgba(159,91,148,.25)
    );

    border:

    1px solid rgba(255,255,255,.15);

    box-shadow:

    0 20px 40px rgba(0,0,0,.35);

    transition:.35s;

}



.event-card::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top right,
        rgba(255,255,255,.18),
        transparent 40%
    );

    pointer-events:none;

}



.event-card:hover {

    transform:

    translateY(-12px)
    scale(1.02);

    box-shadow:

    0 30px 60px rgba(0,0,0,.55);

}



/* event text */


.event-card h3 {

    position:relative;

    color:white;

    font-size:1.6rem;

    margin-bottom:15px;

}



.event-card p {

    position:relative;

    color:var(--muted);

    line-height:1.7;

    margin-bottom:15px;

}



.event-game {

    position:relative;

    display:inline-block;

    padding:6px 15px;

    border-radius:50px;

    background:

    linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

    color:white;

    font-size:.85rem;

    font-weight:700;

}



.event-date {

    color:white;

    font-weight:700;

}



.event-time {

    color:var(--muted);

    font-weight:600;

}



.event-card strong {

    position:relative;

    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    border-radius:50px;

    background:

    rgba(255,255,255,.1);

    border:

    1px solid rgba(255,255,255,.2);

}



/* =========================================
   COMING SOON EVENT
========================================= */


.coming-soon {

    cursor:default;

}



.coming-soon .hover-text {

    display:none;

}



.coming-soon:hover .normal-text {

    display:none;

}



.coming-soon:hover .hover-text {

    display:inline;

}





/* =========================================
   STORE INFORMATION
========================================= */


.store-info {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

    padding:90px 8%;

}



.about-store,
.hours,
.contact-card {

    background:var(--card);

    padding:40px;

    border-radius:25px;

    border:

    1px solid rgba(255,255,255,.08);

    box-shadow:

    0 15px 35px rgba(0,0,0,.25);

}



.store-info h2 {

    margin-bottom:20px;

}



.store-info p,
.hours li {

    color:var(--muted);

    line-height:1.7;

}



.hours ul {

    list-style:none;

}



.hours li {

    padding:10px 0;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}



/* =========================================
   SOCIAL LINKS
========================================= */


.contact-link-row {

    margin:10px 0;

}



.contact-action-link {

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:var(--muted);

    text-decoration:none;

    transition:.2s ease;

}



.contact-action-link:hover,
.contact-action-link:focus-visible {

    color:white;

}



.contact-link-icon {

    flex:0 0 auto;

    font-size:1.05rem;

}



.social-links {

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:10px;

    margin-top:25px;

}



.social-links .social-button {

    min-height:64px;

    padding:10px 6px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    border:1px solid rgba(255,255,255,.12);

    color:white;

    text-decoration:none;

    font-weight:800;

    letter-spacing:0;

    font-size:.78rem;

    line-height:1.05;

    text-align:center;

    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;

}



.social-links .social-button.facebook {

    background:linear-gradient(135deg,#1877f2,#0e5fc9);

}



.social-links .social-button.discord {

    background:linear-gradient(135deg,#5865f2,#404eed);

}



.social-links .social-button.instagram {

    background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045);

}



.social-icon {

    width:26px;

    height:26px;

    flex:0 0 26px;

    fill:currentColor;

    color:white;

}



.social-links .social-button:hover,
.social-links .social-button:focus-visible {

    transform:translateY(-3px);

    filter:brightness(1.08);

    box-shadow:0 12px 24px rgba(0,0,0,.35);

}

/* =========================================
   STAFF PORTAL
========================================= */


.staff-portal {

    text-align:center;

    padding:25px;

}



.staff-portal a {

    color:

    rgba(255,255,255,.45);

    text-decoration:none;

    font-size:.85rem;

    transition:.3s;

}



.staff-portal a:hover {

    color:white;

}





/* =========================================
   FOOTER
========================================= */


footer {

    padding:40px 20px;

    text-align:center;

    color:var(--muted);

    border-top:

    1px solid rgba(255,255,255,.08);

}

.site-design-credit {
    margin-top:10px;
    font-size:.82rem;
}

.site-design-credit a {
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .15s ease;
}

.site-design-credit a:hover,
.site-design-credit a:focus-visible {
    color:var(--text);
}





/* =========================================
   MOBILE RESPONSIVE
========================================= */


@media(max-width:900px) {



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


    header {

        top:10px;

        width:95%;

    }



    nav {

        width:100%;

        padding:8px 10px;

        gap:5px;

        overflow-x:auto;

        justify-content:flex-start;

        scrollbar-width:none;

    }



    nav::-webkit-scrollbar {

        display:none;

    }



    nav a {

        flex-shrink:0;

        padding:9px 12px;

        font-size:.8rem;

    }



    .nav-logo {

        flex-shrink:0;

    }



    .nav-logo img {

        width:100px;

        height:45px;

    }





    /* =========================
       HERO
    ========================= */


    .hero {

        min-height:90vh;

        padding-top:70px;

    }



    .hero-content {

        padding:

        25px 20px;

    }



    .eyebrow {

        font-size:.7rem;

        letter-spacing:2px;

    }



    .hero h1 {

        font-size:2.6rem;

        line-height:1.1;

    }



    .hero h2 {

        font-size:1.35rem;

    }



    .hero p {

        font-size:1rem;

        line-height:1.6;

    }





    /* =========================
       BUTTONS
    ========================= */


    .buttons {

        flex-direction:column;

        width:100%;

        gap:15px;

    }



    .buttons a {

        width:100%;

        text-align:center;

        padding:14px 20px;

    }





    /* =========================
       CONVENTION
    ========================= */


    .convention {

        padding:

        60px 20px;

    }



    .convention-content {

        padding:

        30px 20px;

        border-radius:25px;

    }



    .convention-content h2 {

        font-size:1.7rem;

    }





    /* =========================
       EVENTS
    ========================= */


    #events {

        padding:

        60px 20px;

    }



    .section-title h2 {

        font-size:1.8rem;

    }



    #publicEvents {

        grid-template-columns:1fr;

        gap:20px;

    }



    .event-card {

        padding:25px;

        border-radius:22px;

    }



    .event-card h3 {

        font-size:1.3rem;

    }





    /* =========================
       STORE INFO
    ========================= */


    .store-info {

        grid-template-columns:1fr;

        padding:

        60px 20px;

        gap:20px;

    }



    .about-store,
    .hours,
    .contact-card {

        padding:25px;

        border-radius:22px;

    }



    .store-info h2 {

        font-size:1.5rem;

    }





    /* =========================
       SOCIAL BUTTONS
    ========================= */


    .social-links {

        display:grid;

        grid-template-columns:1fr;

    }


    .social-links .social-button {

        min-height:58px;

        justify-content:flex-start;

        flex-direction:row;

        gap:10px;

        padding:12px 20px;

        font-size:.95rem;

        text-align:left;

    }

    .social-icon {

        width:28px;

        height:28px;

        flex-basis:28px;

    }



    .social-links a {

        text-align:center;

    }





    /* =========================
       FOOTER
    ========================= */


    footer {

        padding:

        30px 20px;

        font-size:.85rem;

    }


}
/* =========================================
   ADMIN-SELECTED HOMEPAGE HERO MEDIA
========================================= */
.hero-media-layer {
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.hero-media-layer img,
.hero-media-layer video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.hero::before {
    z-index:1;
}

.hero-media-layer::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55));
    pointer-events:none;
}