/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Vintage', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
/* =====================================================================
   EVENTS
   ===================================================================== */
:root {
    --event-frame-bg: linear-gradient(135deg, #6b1f52 0%, #3a0f2e 55%, #22081b 100%); /* big box background */
    --event-frame-border: #14040f;
    --event-accent: #ffc400;        /* yellow: title text, text, buttons */
    --event-accent-dark: #14040f;   /* text colour on yellow buttons */
    --event-font: Impact, "Anton", "Arial Narrow", sans-serif; /* Anton = Impact look-alike for phones */
}

/* ---------- POPUP: dock (slides in when you reach "Our games") ---------- */
.event-dock {
    --event-w: 620px;                                 /* desktop width: fixed, same on every window size */
    --event-h: 250px;                                 /* desktop height: fixed, same on every window size */
    --event-overhang: calc(var(--event-w) * 0.12);    /* how far the mascot sticks out on the right */
    --event-tab: 28px;                                /* size of the small arrow button */

    position: fixed;
    right: var(--event-overhang);
    bottom: var(--cookie-banner-h, 0px);              /* sits on top of the cookie banner */
    width: var(--event-w);
    height: var(--event-h);
    z-index: 9000;                                    /* above the site, under the cookie banner */
    transform: translateX(130%);                      /* hidden off-screen on the right */
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), bottom 0.3s ease, visibility 0s linear 0.3s;
}

.event-dock.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), bottom 0.3s ease, visibility 0s;
}

/* Hidden checkbox that remembers "open / closed" (no JavaScript needed) */
.event-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.event-popup {
    position: absolute;
    inset: 0;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* Closed: slide right, only the arrow button stays on the screen edge */
.event-toggle-input:checked ~ .event-popup {
    transform: translateX(calc(100% + var(--event-overhang)));
}

/* Small arrow button on the left of the popup */
.event-tab {
    position: absolute;
    left: calc(var(--event-tab) * -1);
    top: 50%;
    width: var(--event-tab);
    height: calc(var(--event-tab) * 2.2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--event-accent);
    color: var(--event-accent-dark);
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.event-tab-arrow {
    transition: transform 0.3s ease;
}

.event-toggle-input:checked ~ .event-popup .event-tab-arrow {
    transform: rotate(180deg);
}

.event-toggle-input:focus-visible ~ .event-popup .event-tab {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- POPUP: big box (teal in the elements drawing) ---------- */
.event-frame {
    position: absolute;
    inset: 0;
    container-type: size;              /* lets the text scale with the popup */
    background: var(--event-frame-bg);
    border: 3px solid var(--event-frame-border);
    border-bottom: none;
    border-radius: 6px 0 0 0;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
    font-family: var(--event-font);
    font-weight: normal;               /* Impact is already bold */
}

/* Every image placeholder: any picture size fits inside without being cut or stretched */
.event-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Event title: image and/or text, sticks out above the box */
.event-title {
    position: absolute;
    left: 3%;
    top: -32%;
    width: 78%;
    height: 52%;                       /* bigger title: change this to resize the logo */
    display: flex;
    align-items: center;
    gap: 2cqw;
    z-index: 1;
}

.event-title-img {
    height: 100%;
    max-width: 72%;
    min-width: 0;
    object-fit: contain;
    object-position: left center;
}

.event-title-text {
    margin: 0;
    font-size: min(15cqh, 5.5cqw);
    line-height: 1;
    color: var(--event-accent);
    white-space: nowrap;
    /* black outline */
    text-shadow:
        -0.05em -0.05em 0 #000,  0.05em -0.05em 0 #000,
        -0.05em  0.05em 0 #000,  0.05em  0.05em 0 #000,
         0      -0.06em 0 #000,  0       0.06em 0 #000,
        -0.06em  0      0 #000,  0.06em  0      0 #000,
         0.08em  0.1em  0 #000;
}

/* Mascot: inside the box but sticking out on the right */
.event-mascot {
    position: absolute;
    left: 81%;
    width: 31%;
    top: -23%;
    height: 90%;
    pointer-events: none;
    z-index: 1;
}

.event-mascot img {
    object-position: right bottom;
}

/* ---------- POPUP: inner box (red in the elements drawing) ---------- */
.event-body {
    position: absolute;
    left: 0;
    right: 4.5%;
    top: 20%;
    bottom: 0;
}

/* Card art: big, see-through, sits behind the text like a background */
.event-side-img {
    position: absolute;
    left: 0;
    top: -8%;
    bottom: 0;
    width: 45%;                        /* CARD ART SIZE: make this bigger/smaller */
    opacity: 0.45;                     /* CARD ART TRANSPARENCY: 0 = invisible, 1 = solid */
    z-index: 0;
    pointer-events: none;
}

.event-side-img img {
    object-position: left bottom;
}

.event-text {
    position: absolute;
    z-index: 1;                        /* text stays in front of the card art */
    left: 28%;
    width: 56.5%;
    top: 20%;
    height: 40%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    font-size: min(10cqh, 3.8cqw);
    line-height: 1.1;
    color: var(--event-accent);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);   /* keeps the text readable over the card art */
}

/* PARTICIPATE NOW button: idle pulse + shine, hover lift, click press */
.event-btn {
    position: absolute;
    z-index: 1;
    left: 67%;
    right: 0;
    top: 64%;
    height: 26%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    overflow: hidden;
    background: var(--event-accent);
    color: var(--event-accent-dark);
    border: 3px solid var(--event-accent-dark);
    border-radius: 4px;
    box-shadow: 0 4px 0 var(--event-accent-dark);
    font-size: min(9cqh, 3.2cqw);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    animation: event-btn-pulse 1.6s ease-in-out infinite;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* light streak that sweeps across the button */
.event-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-20deg);
    animation: event-btn-shine 2.8s ease-in-out infinite;
}

.event-btn-arrow {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.event-btn:hover,
.event-btn:focus-visible {
    animation: none;
    background: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 7px 0 var(--event-accent-dark), 0 0 18px var(--event-accent);
}

.event-btn:hover .event-btn-arrow,
.event-btn:focus-visible .event-btn-arrow {
    animation: event-btn-nudge 0.6s ease-in-out infinite;
}

.event-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 1px 0 var(--event-accent-dark);
}

@keyframes event-btn-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 4px 0 var(--event-accent-dark), 0 0 0 rgba(255, 196, 0, 0); }
    50%      { transform: scale(1.04); box-shadow: 0 4px 0 var(--event-accent-dark), 0 0 16px rgba(255, 196, 0, 0.8); }
}

@keyframes event-btn-shine {
    0%, 60% { left: -60%; }
    100%    { left: 130%; }
}

@keyframes event-btn-nudge {
    0%, 100% { transform: translateX(0.2em); }
    50%      { transform: translateX(0.5em); }
}

/* ---------- EVENT PAGE (event-fightober.html) ---------- */
.event-page {
    min-height: 100vh;
    padding: 100px 4vw 60px;
    background: var(--event-frame-bg);
    font-family: var(--event-font);
    font-weight: normal;
    color: #fff;
}

.event-page-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1.6fr) 1fr;
    gap: 7vw;                          /* space between the drawings and the text */
    align-items: center;
    max-width: max-content;
    margin: 0 auto;
}

.event-page-img {
    width: 100%;
    height: min(60vh, 520px);
}

.event-page-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.event-page-title {
    font-weight: normal;
    font-size: clamp(2.2rem, 5.5vw, 5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--event-accent);
    text-shadow: 0.05em 0.06em 0 #000;
}

.event-page-text {
    max-width: 60ch;
    margin: 0 auto;
    text-align: center;
    font-family: "League Spartan", sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.5;
}

.event-page-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.event-page-btn {
    flex: 1 1 220px;
    max-width: 320px;
    padding: 22px 28px;
    border: 3px solid var(--event-accent);
    border-radius: 6px;
    background: var(--event-accent);
    color: var(--event-accent-dark);
    font-weight: normal;
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.event-page-btn--alt {
    background: transparent;
    color: var(--event-accent);
}

.event-page-btn:hover {
    transform: scale(1.05);
}

.event-end {
    margin-top: 10px;
    padding: 18px 36px;
    border: 4px dashed var(--event-accent);
    background: rgba(0, 0, 0, 0.35);
}

.event-end-label {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.event-end-date {
    display: block;
    font-weight: normal;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: var(--event-accent);
}

/* ---------- EVENTS: mobile ---------- */
@media (max-width: 768px) {
    /* Popup: full width, 2/5 of the screen height, slides up/down */
    .event-dock {
        --event-h: 40vh;
        --event-overhang: 0px;
        left: 0;
        right: 0;
        width: auto;
        transform: translateY(160%);
    }

    .event-toggle-input:checked ~ .event-popup {
        transform: translateY(100%);
    }

    .event-tab {
        left: 3%;
        top: calc(var(--event-tab) * -1);
        width: calc(var(--event-tab) * 2.2);
        height: var(--event-tab);
        transform: none;
        border-radius: 8px 8px 0 0;
    }

    .event-tab-arrow {
        transform: rotate(90deg);       /* points down */
    }

    .event-toggle-input:checked ~ .event-popup .event-tab-arrow {
        transform: rotate(-90deg);      /* points up when closed */
    }

    .event-frame {
        border-radius: 6px 6px 0 0;
    }

    /* logo with "CONTEST!" next to it (same as desktop) */
    .event-title {
        left: 19%;
        width: 50%;
        top: -20%;
        height: 32%;
    }

    .event-title-img {
        max-width: 66%;
    }

    .event-title-text {
        font-size: min(9cqh, 5.2cqw);
    }

    .event-mascot {
        left: auto;
        right: 0;
        width: 34%;
        top: -18%;
        height: 55%;
    }

    .event-body {
        right: 0;
        top: 14%;
    }

    .event-side-img {
        top: 0;
        width: 60%;                     /* CARD ART SIZE on phones */
    }

    .event-text {
        left: 39%;
        width: 58%;
        top: 34%;
        height: 30%;
        font-size: min(7.6cqh, 5.4cqw);
    }

    .event-btn {
        left: 39%;
        right: 3%;
        top: 70%;
        height: 20%;
        font-size: min(7cqh, 4.6cqw);
    }

    /* Event page: both images on top, everything else below */
    .event-page {
        padding-top: 80px;
    }

    .event-page-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .event-page-img {
        height: 30vh;
    }

    .event-page-center {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .event-page-btn {
        max-width: none;
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-dock,
    .event-popup,
    .event-tab-arrow {
        transition-duration: 0.01s;
    }

    .event-btn,
    .event-btn::after,
    .event-btn-arrow {
        animation: none !important;
    }
}
/* ===================== END EVENTS ===================== */

header {
    font-family: "League Spartan", sans-serif;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem;
    background: #3b0d0d;
    color: #ffcc00;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Right-side container for links and icons */
.header-right {
    display:flex;
    align-items: center;
    gap: 20px; /* Space between nav links and icons */
}


/* Language toggle container styling */
.language-toggle {
    margin-left: 20px; /* Space between social media icons and the language toggle */
}

/* Styling for the language select dropdown */
.language-toggle select {
    background-color: #3b0d0d; /* Match header background */
    color: #FFD86D; /* Text color */
    border: 1px solid #FFD86D; /* Border color to match theme */
    padding: 5px 10px; /* Padding for the dropdown */
    font-size: 1rem; /* Font size */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease, border-color 0.3s ease; /* Smooth transition on hover */
}

/* Hover and focus effects for select dropdown */
.language-toggle select:hover, .language-toggle select:focus {
    border-color: #ffa500; /* Border color on hover/focus */
    transform: scale(1.05); /* Slightly enlarge on hover/focus */
}

/* Optional: Adjust font size and alignment in the header */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between each element in the header-right container */
}




/* Header navigation links styling */
.header-links ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-links ul li {
    margin-left: 20px;
}

.header-links ul li a {
    color: #FFD86D; /* Link color */
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.2s ease, color 0.3s ease; /* Smooth scaling on hover */
}

.header-links ul li a:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.logo-text-image {
    height: auto; /* Set the height to control the logo size */
    width: auto;  /* Maintain the aspect ratio */
    max-width: 200px;
    margin: 0%; /* Optional max-width to prevent it from getting too wide */
}

.logo-link {
    margin-right: auto; /* Pushes the logo to the left */
}
.header-icons {
    display: flex;
    align-items: center;
}

.social-media-icons a {
    color: #FFD86D; /* Icon color */
    margin-left: 15px; /* Space between icons */
    font-size: 1.5rem; /* Icon size */
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-media-icons a:hover {
    color: #ffa500; /* Change color on hover */
}

.language-toggle {
    margin: 1rem;
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #fff;
}


@media (max-width: 768px) {
    .navbar__toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: #fff;
    }
    /* Header adjustments */
    .header {
        flex-direction: column;
        align-items: flex-start;
    }

    .logo-text-image {
        height: auto;
        width: 200px;
    }

    .header-links  {
        display: none; /* Hidden initially, shown when menu toggled */
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 10px 0;
        background-color: #444;
    }
     .social-media-icons {
        display: none; /* Hidden initially, shown when menu toggled */
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 10px 0;
        background-color: #444;
    }

    .menu-toggle {
        display: block; /* Show menu button on mobile */
    }

    .menu-toggle.active + .header-links {
        display: flex;
    }

    /* Footer adjustments */
    .footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .footer-logo img {
        height: 30px;
    }

    .footer-1 {
        flex-direction: column;
        gap: 10px;
    }
    .footer-nav a {
        display: none; 
    }

    .footer-social-media-icons {
        flex-direction:column;
        justify-content: flex-start;
    }

    .footer-esrb img {

        clip-path: inset(0px 146px 0px 0px);
    }
}

























.anim {
    background: url('IMAGE GALLERY/VidosanstitreRaliseavecClipchamponline-video-cutter.com-ezgif.com-video-to-gif-converter.gif') no-repeat center center;
    background-size: cover;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #fff;
    text-align: center;
    transition: transform 1s ease;
    position: relative;
    image-rendering: pixelated; /* Ensures pixelated scaling */
    image-rendering: crisp-edges; /* Alternate for certain browsers */
}





.animated-image {
    width: auto; /* Initial size */
    height: auto; /* Maintains aspect ratio */
    transition: transform 0.3s ease; /* Smooth scaling on hover */
    margin-top: 20px; /* Adds spacing if needed */
}

/* Hover effect to double the size */
.animated-image:hover {
    transform: scale(1.05); /* Doubles the size on hover */
}



/*

#consentBox {
    background: #3b0d0d;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center;
}

#consentBox.hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

::selection {
    color: #3b0d0d;
    background: #8d0a0a;
}

#consentContent p {
    color: #858585;
    margin: 10px 0 20px 0;
}

#consentContent .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.consentButton,
.rejectButton {
    padding: 12px 30px;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.consentButton {
    background: #8d0a0a;
    margin-right: 10px;
}

.rejectButton {
    color: #111211;
    background: transparent;
    border: 2px solid #8d0a0a;
    text-decoration: none;
}

#consentBox img {
    max-width: 90px;
}

#consentHeader {
    font-size: 25px;
    font-weight: 600;
    margin-top: 10px;
    background-color: #3b0d0d;
}
*/













/* Landing section styling */
#landing-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('IMAGE GALLERY/ANIM1.gif'); /* Path to your GIF */
    background-size: cover;
    background-position: center;
    position: relative;
    color: #CED69C; /* Light green color as in the image */
    overflow: hidden;
    
}

/* Centered content styling */
#landing-section .content {
    text-align: center;
    z-index: 2;
}

/* Title styling */
#landing-section .title {
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    margin: 0;
    text-transform: uppercase;
}

/* Subtitle styling */
#landing-section .subtitle {
    font-family: "League Spartan", sans-serif;
    font-size: 1.5rem;
    color: #FF0000; /* Red color for the subtitle */
    margin: 10px 0 20px 0;
}

/* Learn More button styling */
#landing-section .learn-more {
    padding: 10px 20px;
    background-color: #CFE098; /* Initial button color */
    color: #000;
    border: none;
    font-family: "League Spartan", sans-serif;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0; /* Remove border radius for sharp edges */
    transition: background-color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for the button */
#landing-section .learn-more:hover {
    background-color: #BE0000; /* Hover color matches the "INCOMING..." text */
    color: #FFF; /* Change text color to white for contrast */
}


/* Add a spotlight effect */
#landing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}










/* Games Section Styling */
#games {
    font-family: "League Spartan", sans-serif;
    background-color: #f5e9ce;
}

#games h2 {
    font-size: 2.5rem;
    text-align: center;
    padding: 7%;
    font-weight: bold;
    color: #3a1c00;
}


/* Individual Game Entry Styling */
.game-entry {
    display: flex;
    align-items: center;
    margin-bottom: 2%;
    padding: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;


}


.game-entry::before {
    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('IMAGE GALLERY/GAMES-BG-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.7;
}

/* Content Over Background */
.game-entry > * {
    position: relative;
    z-index: 2;
}

.game-image {
    flex: 1;
    padding: 10px;
}



.game-image img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}

.game-info {
    flex: 2;
    color: #3a1c00;
    padding: 0px;
}

.game-info h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.game-info p {
    line-height: 1.5;
    font-size: 0.8rem;
    margin-bottom: 5px;
    font-size: 1rem;
}

/* Available Platforms Section */
.available-on {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.OMA-available-on img {
    width: 150px;
    height: auto;
    padding: 2px;
    transition: transform 0.3s ease; 
}
.OMA-available-on img:hover {
    transform: scale(1.05);
}

/* Patreon Link */
.OMA-available-on a {
    color: #be0000;
    text-decoration: none;
    font-weight: bold;
}

.OMA-available-on a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .game-entry {
        flex-direction: column;
        text-align: center;
    }

    .game-image {
        margin-bottom: 20px;
    }

    .available-on {
        justify-content: center;
    }
}





/* Individual Game Entry Styling 
.game-entry0 {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    padding: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}


.game-entry0::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('IMAGE gallery/GAMES-BG-0.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.7;
}

/* Content Over Background 
.game-entry0 > * {
    position: relative;
    z-index: 2;
}

.game-image0 {
    flex: 1;
    padding: 10px;
}

.game-image0 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Patreon Link 
.TWG-available-on  {

    margin: 50px;
    text-decoration: none;
    font-weight: bold;
}

.TWG-available-on p {
    font-size: 40PX;

}

.TWG-available-on {
    max-width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 4px; 
    transition: transform 0.3s ease; 
}
.fanbase-icons img:hover {

    transform: scale(1.05);
}
.TWG-available-on a {
    margin: 50px;
    color: #F96854;
    text-decoration: none;
    font-weight: bold;
    font-size:1rem;
}

.TWG-available-on a:hover {
    text-decoration: underline;
}

/* Responsive Design 
@media (max-width: 768px) {
    .game-entry0 {
        flex-direction: column;
        text-align: center;
    }

    .game-image0 {
        margin-bottom: 20px;
    }

    .available-on {
        justify-content: center;
    }
    .game-entry0 {
        flex-direction: column;
        text-align: center;
    }

    .game-image0 {
        margin-bottom: 20px;
    }

    .available-on {
        justify-content: center;
    }
}

*/




.game-entry0 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2%;
    padding: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}


.game-entry0::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('IMAGE GALLERY/GAMES-BG-0.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.7;
}

/* Content Over Background */
.game-entry0 > * {
    position: relative;
    z-index: 2;
}

.game-image0 {
    flex: 1;
    padding: 10px;
}

.game-image0 img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}


/* Patreon Link */
.OMA-available-on  {
    margin: 20px;
    font-weight: bold;
}

.OMA-available-on a {
    margin: 50px;
    color: #F96854;
    text-decoration: none;
    font-weight: bold;
}

.available-on-text  {
    margin: 20px;
    color: #000000;
    font-weight: bold;
    font-size: 50px;
}


.OMA-available-on a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .game-entry0 {
        flex-direction: column;
        text-align: center;
    }

    .game-image0 {
        margin-bottom: 20px;
    }

    .OMA-available-on {
        justify-content: center;
    }
    .game-entry0 {
        flex-direction: column;
        text-align: center;
    }

    .game-image0 {
        margin-bottom: 20px;
    }

    .OMA-available-on {
        justify-content: center;
    }
    .available-on-text  {
        justify-content: center;
}
}

















/* Individual Game Entry Styling */
.game-entry2 {
    display: flex;
    align-items: center;
    margin-bottom: 2%;
    padding: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}


.game-entry2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('IMAGE GALLERY/GAMES-BG-2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.7;
}

/* Content Over Background */
.game-entry2 > * {
    position: relative;
    z-index: 2;
}

.game-image2 {
    flex: 1;
    padding: 10px;
}

.game-image2 img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}


/* Patreon Link */
.GOC-available-on  {

    margin: 50px;
    text-decoration: none;
    font-weight: bold;
}
.GOC-available-on a {
    margin: 50px;
    color: #F96854;
    text-decoration: none;
    font-weight: bold;
    font-size:2rem;
}

.GOC-available-on a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .game-entry {
        flex-direction: column;
        text-align: center;
    }

    .game-image {
        margin-bottom: 20px;
    }

    .available-on {
        justify-content: center;
    }
    .game-entry2 {
        flex-direction: column;
        text-align: center;
    }

    .game-image2 {
        margin-bottom: 20px;
    }

    .available-on2 {
        justify-content: center;
    }
}


.game-entry3 {
    display: flex;
    align-items: center;
    margin-bottom: 0%;
    padding: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}


.game-entry3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('IMAGE GALLERY/GAMES-BG-3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0.7;
}

/* Content Over Background */
.game-entry3 > * {
    position: relative;
    z-index: 2;
}

.game-image2 {
    flex: 1;
    padding: 10px;
}

.game-image2 img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}


/* Patreon Link */
.GOC-available-on  {

    margin: 50px;
    text-decoration: none;
    font-weight: bold;
}
.GOC-available-on a {
    margin: 50px;
    color: #F96854;
    text-decoration: none;
    font-weight: bold;
    font-size:2rem;
}

.GOC-available-on a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .game-entry {
        flex-direction: column;
        text-align: center;
    }

    .game-image {
        margin-bottom: 20px;
    }

    .available-on {
        justify-content: center;
    }
    .game-entry3 {
        flex-direction: column;
        text-align: center;
    }

    .game-image2 {
        margin-bottom: 20px;
    }

    .available-on2 {
        justify-content: center;
    }
}







#fanbase {
    font-family: "League Spartan", sans-serif;
    background-color: #f5e9ce;
    padding: 50px 5%;
    display: block;
    align-items: center;
    justify-content: space-between;
}

.fanbase-content  {

    align-items: center;
    justify-content: center;
    text-align: center;
}


.fanbase-content h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3a1c00;
    margin-bottom: 20px;
}


.fanbase-content h3 {
    line-height: 1.8;
    padding: 30px 10%;

}

.fanbase-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.fanbase-icons img {
    max-width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 4px; 
    transition: transform 0.3s ease; 
}
.fanbase-icons img:hover {

    transform: scale(1.05);
}

@media (max-width: 768px) {
    .fanbase-content h2 {
        padding: 0%;
        font-size: 1.25rem;
    }
    .fanbase-icons {
        display:column;
        margin: 20px;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .fanbase-icons img {
        max-width: 200px;

        display: block;
        height: auto;
        object-fit: cover;
        border-radius: 4px; 
        transition: transform 0.3s ease; 
    }
    
}




#donations {
    font-family: "League Spartan", sans-serif;
    background-color: #f5e9ce;
    padding: 10%;
    display: block;
    align-items: center;
    justify-content: space-between;
}

.donation-content  {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5%;
}


.donation-content h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3a1c00;
    padding-bottom: 10px;
}


.donation-content h3 {
    font-size: 1rem;
    line-height: 1.2rem;
}

.donation-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.donation-icons img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px; 
    transition: transform 0.3s ease; 
}

.donation-icons img:hover {
    transform: scale(1.05);
}

.donation-icons button {
  border: none;           /* remove border */
  background: none;       /* remove background */
  padding: 0;             /* remove default padding */
  cursor: pointer;
}


.donation-content a {
    color:#812a2a;

}
@media (max-width: 768px) {
    .donation-content h2 {
        padding-top: 0%;
        font-size: 1.25rem;
    }
    .donation-content h3 {
        font-size: 0.75rem;
    }
    .donation-icons {
        display:column;
        margin: 10px;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .donation-icons img {
        max-width: 100%;
        display: block;
        height: auto;
        object-fit: cover;
        border-radius: 4px; 
        transition: transform 0.3s ease; 
    }
    
}




/*

.about-section {
    font-family: "League Spartan", sans-serif;
    width: 100%;
    background-color: #f5e9ce; 
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;  
    align-items: center;   
}

.about-frame {
     display: block;
  width: 75%;   

}

.about-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10%;
  text-align: center;
  width: 70%; 
}





@media (max-width: 768px) {
    .about-content  {
        width: 90%;
        line-height: 1.1;
        font-size: 0.75rem;
        padding: 10% ;
    }
    .about-content h3 {
        line-height: 1.1;  
        text-align: center;
    }

    .about-frame {
        width: 100%;
    }
}

*/
.about-section {
    font-family: "League Spartan", sans-serif;
    width: 100%;
    background-color: #f5e9ce; 
    position: relative;
    min-height: 100vh;  /* changed from height to min-height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;    /* breathing room on mobile */
}

.about-frame {
    display: block;
    width: 75%;
    height: auto;
}

.about-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10%;
    text-align: center;
    width: 70%;
}

@media (max-width: 890px) {
    .about-section {
        height: auto;   /* let it grow with content */
    }

    .about-frame {
        width: 95%;
    }

    .about-content {
        width: 80%;        /* narrower so text stays inside frame */
        font-size: 0.7rem; /* smaller so it fits */
        line-height: 1.2;
        padding: 5%;       /* less padding so more room for text */
    }

    .about-content h2 {
        font-size: 1rem;
        line-height: 1.1;
    }
}
@media (max-width: 600px) {
    .about-frame {
        content: url("IMAGE GALLERY/ABOUT Frame FINAL MOBILE.png");
    }
}





/* Footer Styling */
#footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
    background-color: #1C0000;
    color: #f8de7e;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
}

/* Logo Section */
.footer-logo img {
    width: 100px;
    height: auto;
    border-radius: 50%;
}

/* Navigation Links */
.footer-nav {
    display: flex;
    gap: 30px;
}

.footer-nav a {
    color: #f8de7e;
    text-decoration: none;
    font-weight: bold;
    position: relative;
}

.footer-nav a:hover::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #f8de7e;
    bottom: -2px;
    left: 0;
}



.footer-1 {
    display: grid;
    margin: 30px;
    margin-right: auto;
}
.footer-2 {
    display: flex;
    margin: 10px;
    padding-bottom: 10%;
    

}
.footer-1 p {
    color: #614444;
    font-size: 0.8rem;
}

.footer-nav{
    margin-right: auto;
}


/* Social Media Icons */
.footer-social-media-icons {
    display: flex;
    gap: 15px;
    margin-left: 15px; /* Space between icons */
    font-size: 1.5rem; /* Icon size */
    transition: color 0.3s ease;
}

.footer-social-media-icons a {
    color: #FFD86D;
    text-decoration: none;
    width: 24px;
    height: 24px;/* Adjusts brightness for visibility */
    transition: filter 0.3s;
}

.footer-social-media-icons a:hover {
    filter: brightness(1.5);
}

.footer-esrb {
    padding: 30px;
}
.footer-esrb img {
    width: 200px;
    height: auto;
    margin-left: auto;
}



@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* Hide the mobile notice by default (shown via JS on touch devices) */
#mobile-notice {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: #f5e9ce;
    border: 2px solid #333;
    border-radius: 12px;
    font-family: "League Spartan", sans-serif;
    min-height: 200px;
}

#mobile-notice p {
    margin: 0.5rem 0;
    font-size: 1rem;
}