@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

     /* Main Font */

/* Prevent horizontal overflow and make media responsive */

html, body { max-width: 100%; overflow-x: hidden; }

*, *::before, *::after { box-sizing: border-box; }

img, video, iframe, embed { max-width: 100%; height: auto; display: block; }

    body {

        font-family: 'Press Start 2P', cursive;

        color: #ffffff;

        margin: 0;

        display: flex;

        flex-direction: column;

        min-height: 100vh;

    }



    .nav-button {

        font-family: 'Press Start 2P', cursive;

        background-color: #000000;

        color: #ffffff;

        text-shadow: 1px 1px 0 #000;

        margin: 0;

    }



     /* Main background */

    body {

        background-color: #ff6200;

            background-image: radial-gradient(black 2px, transparent 0);

            /* slightly larger dots so pattern isn't too small on mobile */

            background-size: 40px 40px;

            /* start at origin so the animation is smooth from the first frame */

            background-position: 0 0;

            /* faster but not too fast */

            animation: bg-pan 9s linear infinite;

            font-family: 'Press Start 2P', cursive;

            color: white;

            text-align: center;

            background-attachment: fixed;

            min-height: 100vh;

            margin: 0;

            overflow-x: hidden;

            font-size: 12px;

        }

     

    /* Header style */

    .Header {

        font-size: 24px;

        line-height: 1.5;

        color: #ffffff;

         display: inline-block;

         line-height: 1em;

        text-align: center;

        cursor: pointer;

        text-shadow: 2px 2px 1px rgb(0, 0, 0);

    }



    /* Main Background Header - full width bar with centered inner bar */

    .site-header {

    width: 100%;

    padding: 12px 0;

    background: transparent;

    display: block;

    }



    .header-bar {

    max-width: 1100px;

    width: 95%;

    margin: 0 auto;

    background: rgba(44, 44, 44, 0.8);

    border-radius: 4px;

    padding: 9px 13px; /* ~5% smaller */

    box-shadow: 0 8px 12px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(255,255,255,0.02);

    border: 1px solid rgba(255,255,255,0.06);

    

    }



    .header-inner {

    display: flex;

    align-items: center;

    gap: 8px;

   }



     .logo {

     width: 44px;

     height: 44px;

     object-fit: cover;

     image-rendering: pixelated;

     border-radius: 4px;

     cursor: pointer;

         }



    .title-wrap { position: relative; }



        .site-title {

        font-family: 'Press Start 2P', cursive;

        font-size: 21px;

        color: #ffffff;

        text-shadow: 3px 3px 0 #000;

        line-height: 1;

        cursor: pointer;

            }



    .main-nav { margin-left: auto; display:flex; gap:9px; align-items:center; }



          .nav-button {

          background-color: #2f2f2f; /* Light gray background */

          border: 2px solid #4a4a4a;

          color: #ffffff;

          padding: 12px 18px; /* larger buttons */

          border-radius: 1px; /* slightly larger rounded corners */

          font-size: 13px; /* bigger text */

          cursor: pointer;

          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);

          transition: transform .12s ease, box-shadow .12s ease;

          text-transform: uppercase;

          letter-spacing: 1px;

          min-width: 110px; /* keep buttons visually larger */

      }


     
            .button-changer {
        position: fixed;        /* stays while scrolling */
        bottom: 20px;           /* distance from the bottom (visible on desktop) */
        top: auto;
        right: 20px;            /* distance from the right */
    z-index: 9999;          /* stays above everything */
    background-color: #2f2f2f;
    border: 2px solid #4a4a4a;
    padding: 12px 12px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    transition: transform .12s ease, box-shadow .12s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 40px;
    height: 40px;
    text-align: center;
}

.button-changer:hover {
    background: #08cc22;
    border-color: black;
    transform: translateY(-4px);
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.6);
}

.light-mode .button-changer:hover {
    background: #ff6200;
    border-color: black;
    transform: translateY(-4px);
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.6);
}

    .nav-button:hover {

    background: #08cc22;

    border-color: black;

    transform: translateY(-4px); box-shadow: 0 5px 2px rgba(0, 0, 0, 0.6); }

  

.ddc1 .nav-button:hover {

    background: #ff6200;

    border-color: black;

    transform: translateY(-4px); box-shadow: 0 5px 2px rgba(0, 0, 0, 0.6); }

  
 /* --- Mobile Menu Close Button (NEW) --- */
.mobile-menu-inner {
    position: relative; /* Essential for positioning the close button absolutely within the menu */
}

.social-close {
    position: absolute;
    top: 14px; /* Align with top padding */
    right: 14px; /* Align with right padding */
    background: #4a4a4a; /* Darker background to make it stand out */
    border: 2px solid #2f2f2f;
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px; /* Smaller size for close icon */
    line-height: 1;
    z-index: 100000;
    transition: background .15s ease, border-color .15s ease;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.light-mode .social-close:hover {
    background: #ff6200; /* Use your main accent color for hover */
    border-color: #ff4d00;
}

/* Light mode hover adjustment (if needed, based on your color logic) */
.social-close:hover {
    background: #09b820; /* Use your light mode active color for hover/close */
    border-color: #09b820;
}

          @media (max-width: 768px) {

                        .header-bar { display: none; }

                        /* Show mobile header and make it full-width/fixed */
 
                                                /* mobile close button should be visible inside the mobile menu overlay */
                                                /* (removed the rule that hid it) */
                        .mobile-header { display: flex; }

                        /* Ensure the main nav buttons are not visible in mobile header area */

                        .main-nav { display: none; }

                        .mobile-nav { display: flex; }

          }



/* Mobile header styles (hidden by default on desktop) */

.mobile-header { display: none; }

.mobile-menu-overlay { display: none; }

.mobile-header .mobile-inner { display: flex; align-items: center; gap: 12px; width: 100%; }

.mobile-logo { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }

.mobile-title { font-family: 'Press Start 2P', cursive; color: #ffffff; font-size: 14px; text-shadow: 2px 2px 0 #000; }



@media (max-width: 768px) {

    .mobile-header {

        display: flex;

        position: relative; /* keep in normal flow so it scrolls away */

        width: 100%;

        padding: 10px 14px;

        background: rgba(44,44,44,0.95);

        box-shadow: 0 2px 8px rgba(0,0,0,0.5);

        align-items: center;

        z-index: 11001; /* keep mobile header above page content so the button is clickable */
    }

    /* Avoid fixed background quirks on mobile that can create visual gaps */

    body { background-attachment: scroll; }

    



    /* Slightly reduce the header-bar area to avoid double space (header-bar is hidden) */

    .header-bar { display: none; }



    /* No body padding needed for a static header */



    /* Mobile menu overlay styles */

    .mobile-menu-overlay {

        display: none;

        position: fixed;

        inset: 0; /* top:0; right:0; bottom:0; left:0 */

        background: rgba(0,0,0,0.55);

        align-items: center;

        justify-content: center;

        z-index: 10000;

    }



    .mobile-menu-overlay.active { display: flex; }



    .mobile-menu-inner {

        width: 84%;

        max-width: 300px;

        background: #2f2f2f;

        padding: 14px;

        border-radius: 2px;

        box-sizing: border-box;

        border: 2px solid rgba(71,71,71,0.8);

        box-shadow: 0 10px 30px rgba(0,0,0,0.6);

        display: flex;

        align-items: center;

        justify-content: center;

    }

    /* Square close button positioned above the mobile menu */
    .mobile-menu-inner .close-menu-btn {
        position: absolute;
        /* lift the button above the menu box so it appears 'above' */
        top: -22px;
        right: 12px;
        width: 44px;
        height: 44px;
        background: #4a4a4a;
        border: 2px solid #2f2f2f;
        color: #fff;
        padding: 0;
        border-radius: 6px; /* slight rounding while keeping square footprint */
        font-size: 16px;
        line-height: 1;
        z-index: 10002;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 12px rgba(0,0,0,0.35);
        pointer-events: auto;
    }

    .mobile-menu-inner .close-menu-btn i { font-size: 18px; }
    .mobile-menu-inner .close-menu-btn:hover { background: #ff6200; border-color: #000000; transform: translateY(-2px); }
    .ddr .close-menu-btn:hover { background: #26ff00; border-color: #ffffff; transform: translateY(-2px); }

    /* Slight adjustment for very small screens */
    @media (max-width: 480px) {
        .mobile-menu-inner .close-menu-btn { top: -20px; right: 8px; width: 40px; height: 40px; }
    }



    .mobile-nav { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }



    /* Make mobile nav buttons slightly smaller and remove desktop min-width */

    .mobile-nav .nav-button {

        width: 100%;

        min-width: 0;

        padding: 12px 14px;

        font-size: 12px;

        border-radius: 2px;

        background-color: #252525; /* Light gray background */

        border: 2px solid #4a4a4a;

        text-transform: uppercase;

        letter-spacing: 1px;

        color: #fff;

        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);

        text-align: center;

    }

    
    .mobile-nav .nav-button:hover { background: #08cc22; }

}


.ddc .mobile-nav .nav-button:hover { background: #ff6200; }





.nav-button1.active, .nav-button1:focus {

        outline: none;

        border-color: rgba(255,255,255,0.9);

        background: #09b820;

}


.ddb .nav-button1.active, .nav-button1:focus {

        outline: none;

        border-color: rgba(255,255,255,0.9);

        background: #ff4d00;

}



      /* Only for pc */

           



/* page content wrapper to restore page padding after removing body margin */

    .page-content { max-width: 1200px; margin: 18px auto; padding: 0 20px; flex: 1 0 auto; }



    /* active nav state */

    /* Active nav state: green in dark mode, orange in light mode */

    body:not(.light-mode) .nav-button.active,
    body:not(.light-mode) .nav-button:focus {

        outline: none;

        border-color: rgba(255,255,255,0.9);

        background: #09b820; /* dark-mode active */

    }

    .light-mode .nav-button.active,
    .light-mode .nav-button:focus {

        outline: none;

        border-color: rgba(255,255,255,0.9);

        background: #ff4d00; /* light-mode active */

    }



/* Posts styles */

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }

.post {

    background: #333333;

    padding: 16px;

    border-radius: 8px;

    text-align: left;

    box-shadow: 0 1px 1px #000000;

    border: 2px solid rgba(255,255,255,0.14);

    transition: transform .12s ease, box-shadow .12s ease;

    display: flex;

    flex-direction: column;

    gap: 8px;

    overflow: hidden;
    line-height: 1.3;

}

.post:hover { transform: translateY(-4px); box-shadow: 0 3px 4px rgba(14, 14, 14, 0.993); }

.post-title { font-size: 14px; margin: 0; color: #fff; text-shadow: 1px 1px 0 #000; cursor: pointer; }

.post-excerpt { font-size: 12px; color: #f5f5f5; opacity: 0.95; margin: 0; }

.post-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; }

.icon-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }

.icon-btn:hover { background: rgba(255,255,255,0.06); }



.icon-btn[disabled], .icon-btn.hidden { display: none; }



/* Image, header & rating for post card */

.post-image {

    width: 100%;

    aspect-ratio: 16/9; /* 1280:720 ratio */

    height: auto;

    object-fit: cover;

    border-radius: 10px; /* slightly rounded corners */

    border: 1px solid rgba(0,0,0,0.6);

    display: block;

}

.post-header { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.post-title { font-size: 15px; color: #0dff00; margin: 0; }

.post-title:hover { color: #0dff00; text-decoration: underline }

.version { background: #e0e0e0; color: #222; font-size: 11px; padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); }

.rating { margin-top: 8px; background: rgba(0,0,0,0.45); padding: 8px; border-radius: 6px; display: flex; align-items: center; gap: 12px; }

.stars { display: inline-flex; gap: 6px; }

.star { background: transparent; border: none; color: #bfbfbf; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; }

.star:focus { outline: 2px solid rgba(255,255,255,0.08); }

.star.filled { color: #ffd54f; }

.rate-text { color: #bdbdbd; font-size: 12px; background: rgba(255,255,255,0.02); padding: 6px 10px; border-radius: 6px; }

.post-excerpt { font-size: 13px; color: #e6e6e6; margin-top: 8px; line-height: 1.3; }

/* Social overlay (floating above posts) */
.social-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start; /* start a bit down from top */
    justify-content: center;
    z-index: 12000;
    pointer-events: none;
}

/* News posts (hidden by default) */
.news-posts { display: none; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }

/* Other addons section should match the posts grid sizing */
.other-posts { display: none; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }

/* Transition utilities used when switching views */
.fade-transition { transition: opacity .28s ease, transform .28s ease; }
.fade-out { opacity: 0; transform: translateY(8px); pointer-events: none; }
.visible { display: grid; opacity: 1; transform: translateY(0); pointer-events: auto; }

.social-overlay .social-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 260ms ease;
}

.social-overlay .social-posts {
    position: relative;
    margin-top: 56px;
    width: 95%;
    max-width: 1100px;
    background: rgba(47,47,47,0.98);
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    pointer-events: none;
}

/* Keep the social posts scrollable when overlay is open */
.social-overlay .social-posts {
    max-height: calc(100vh - 96px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure other-posts thumbnails are uniform and constrained */
.other-posts .post-image {
    object-fit: cover;
    aspect-ratio: 16/9;
    width: 100%;
    max-height: 200px; /* limit height so cards stay compact */
    border-radius: 8px;
}

@media (max-width: 480px) {
    .other-posts .post-image { max-height: 140px; }
}

/* Individual card entrance (staggered) */
.social-overlay .social-posts .post {
    transform: translateY(12px) scale(0.995);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 320ms cubic-bezier(.2,.9,.2,1);
}

.social-overlay.active .social-posts .post:nth-child(1) {
    transition-delay: 40ms;
}
.social-overlay.active .social-posts .post:nth-child(2) {
    transition-delay: 120ms;
}
.social-overlay.active .social-posts .post:nth-child(3) {
    transition-delay: 200ms;
}

.social-overlay.active .social-posts .post {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Close button inside overlay */


/* ensure close button is visible on small screens too */
@media (max-width: 480px) {
    .social-close { right: 8px; top: 8px; font-size: 20px; }
}

.social-overlay.active {
    pointer-events: auto;
}

/* Hide the social close button when overlay is not active */
.social-overlay .social-close { display: none; }
.social-overlay.active .social-close { display: block; }

/* Mobile menu toggle button styles (wrap the icon in a button for reliable clicks) */
.mobile-menu-toggle { background: transparent; border: none; color: inherit; cursor: pointer; padding: 6px; display: inline-flex; align-items: center; }
.mobile-menu-toggle:focus { outline: 2px solid rgba(255,255,255,0.12); }

.social-overlay.active .social-backdrop {
    opacity: 1;
}

.social-overlay.active .social-posts {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Utility class to prevent page scrolling when overlays are open */
.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: relative;
}

/* When overlay open, dim underlying posts */
.posts.dimmed {
    filter: blur(2px) saturate(.9);
    opacity: 0.6;
    pointer-events: none;
}



/* Hide icon-btn rules remain but not used since buttons removed */



/* Footer */

.site-footer {

    width: 100%;

    padding: 26px 0 36px 0;

    background: rgba(0,0,0,0.9);

    box-shadow: 0 -6px 12px rgba(27, 27, 27, 0.4);

    margin-top: auto;

    border-top: 3px solid;border-block-color: silver;

}



.footer-bar {

    max-width: 1200px;

    margin: 0 auto;

    text-align: center;

    padding: 6px 20px;

}



.footer-text {

    color: #ffffff;

    font-size: 12px;

    text-shadow: 2px 2px 0 #000;

}



.footer-links { margin-top: 8px }



.footer-link {

    color: #21bdf6;

    text-decoration: none;

    margin: 0 8px;

    font-size: 14px;

}



.footer-link:hover { color: #00bbff; text-decoration: underline }



.sep { color: #ffffff; margin: 0 6px }



/* Background pan keyframes and reduced-motion support */

@keyframes bg-pan {

    from { background-position: 0 0; }

    to   { background-position: -40px 0; }

}



@media (prefers-reduced-motion: reduce) {

    body { animation: none !important; }

}

/* --- NEW FLOATING MENU STYLES --- */

/* 1. Hide the new floating button on Desktop */
#mobile-menu-button {
    display: none;
    z-index: 10001; /* Above everything */
     background-color: #252525; /* Light gray background */
        border: 2px solid #4a4a4a;

}

#mobile-menu-button:hover {
    background: #08cc22;
    border-color: black;
    transform: translateY(-4px);
}

/* 2. Mobile Specific Styles */
@media (max-width: 768px) {
    
    /* Show the button and position it above the Dark Mode button */
    #mobile-menu-button {
        display: block;
        bottom: 70px; /* 20px (bottom) + 40px (btn height) + 10px (gap) */
        right: 20px;
        position: fixed;
    }

    /* 3. Transform the Fullscreen Overlay into a Small Popover */
    .mobile-menu-overlay {
        /* Keep it inset 0 so clicking outside still closes it (via JS) */
        background: transparent; /* Remove dark background */
        align-items: flex-end;   /* Align menu to bottom */
        justify-content: flex-end; /* Align menu to right */
        
        /* Position the inner box relative to the buttons */
        padding-bottom: 70px;    /* Align with the top button */
        padding-right: 70px;     /* Push to the left of the buttons */
    }

    /* The actual small menu box */
    .mobile-menu-inner {
        width: 160px;          /* Small width */
        max-width: none;       /* Remove desktop limits */
        height: auto;          /* Auto height */
        padding: 8px;
        border-radius: 6px;
        
        /* Visuals to match the theme */
        background: #2f2f2f;
        border: 2px solid #ffa600; /* Orange border to pop */
        box-shadow: 0 4px 12px rgba(0,0,0,0.6);
        
        /* Reset layout for small list */
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Hide the 'X' close button inside the menu (since we have the toggle button) */
    .mobile-menu-inner .close-menu-btn {
        display: none;
    }

    /* Style the links inside to be compact */
    .mobile-nav .nav-button {
        width: 100%;
        text-align: center;
        padding: 8px;
        font-size: 10px;
        margin: 0;
        background: #3a3a3a;
    }

    /* Ensure the mobile header justifies correctly without the button */
    .mobile-header .mobile-inner {
        justify-content: flex-start; /* Keep logo/title left aligned */
    }
}



/* --- ADVERTISEMENT STYLES --- */
.headerpc, .headermobile, .adsposts, .adfooter {
    border: 2px solid #ffa600;
    margin: 10px auto; /* Centers the ad */
    width: fit-content; /* CRITICAL: Makes border wrap tight */
    background-color: rgba(255, 166, 0, 0.05);
    display: block;
}

/* Size Placeholders */
.headerpc { max-width: 728px; max-height: 95px; }
.headermobile { max-width: 320px; max-height: 54px; }
.adsposts {
                width: 160px;  /* Force exact width */
                height: 600px; /* Force exact height */
                border: 2px solid #ffa600;
                margin: 2px auto; /* Center it in its grid cell */
                background-color: rgba(255, 166, 0, 0.05);
                
                /* Centering Magic */
                display: flex;
                justify-content: center;
                
                /* Grid Magic: Span 2 rows so it doesn't break the layout */
                grid-row: span 9; 
            }
.adfooter { max-width: 468px; max-height: 63px; }

/* Responsive Logic */
@media (max-width: 768px) {
    .headerpc { display: none; }
    .headermobile { display: block; }
    #ftext { font-size: 8px; }
     .adsposts { 
                    grid-row: auto; /* Reset row span on mobile */
                    margin: 20px auto;
                }
                .adfooter {
                    max-width: 475px; max-height: 63px;
                }
}
@media (min-width: 769px) {
    .headermobile { display: none; }
    .headerpc { display: block; }
    #ftext { font-size: 10px; }
}