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

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

        body {
            background-color: #080010;
            background-image: url('/assets/images/eyes.gif');
            background-repeat: repeat;
            color: #e0d0ff;
            font-family: 'VT323', monospace;
            font-size: 20px;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: repeating-linear-gradient(
                0deg, transparent, transparent 2px,
                rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
            );
            pointer-events: none;
            z-index: 9999;
        }

        /* Mobile-only elements hidden on desktop */
        #mobile-topbar  { display: none; }
        #nav-toggle     { display: none; }
        #hamburger-btn  { display: none; }
        #nav-close      { display: none; }
        #nav-overlay    { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.65); z-index:1000; cursor:pointer; }
        #back-to-top    { display: none; }
        #lang-switcher-mobile { display: none; }

        /* ===== WRAPPER ===== */
        #wrapper {
            width: 1280px;
            margin: 0 auto;
            border-left: 3px solid #8a2be2;
            border-right: 3px solid #8a2be2;
            background-color: rgba(5, 0, 15, 0.96);
        }

        /* ===== HEADER ===== */
        #header { width: 100%; position: relative; border-bottom: 3px solid #8a2be2; overflow: hidden; }
        #header img.banner { width: 100%; height: 190px; object-fit: cover; display: block; image-rendering: pixelated; }
        #header-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 12px 20px; }
        #site-title { font-family: 'Press Start 2P', monospace; font-size: 24px; color: #cc44ff; text-shadow: 0 0 12px #9932cc, 0 0 24px #9932cc, 3px 3px 0 #000; animation: glitch 6s infinite; }
        #site-subtitle { font-family: 'VT323', monospace; font-size: 20px; color: #00ff88; text-shadow: 0 0 6px #00ff88; margin-top: 4px; }

        @keyframes glitch {
            0%,88%,100% { text-shadow: 0 0 12px #9932cc, 0 0 24px #9932cc, 3px 3px 0 #000; transform: none; }
            89% { text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff; transform: skewX(-2deg); }
            91% { text-shadow:  3px 0 #ff00ff,-3px 0 #00ffff; transform: skewX(2deg); }
            93% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: skewX(-1deg); }
        }

        /* ===== MARQUEE ===== */
        #marquee-bar { background:#12001f; border-bottom:2px solid #8a2be2; border-top:2px solid #8a2be2; padding:6px 0; color:#ff3333; font-family:'Press Start 2P',monospace; font-size:9px; overflow:hidden; white-space:nowrap; }
        .marquee-inner { display:inline-block; animation:scroll-marquee 28s linear infinite; }
        @keyframes scroll-marquee { 0%{transform:translateX(980px);} 100%{transform:translateX(-100%);} }

        /* ===== NAV ===== */
        #nav { background:#0e0022; border-bottom:3px solid #8a2be2; display:flex; flex-wrap:wrap; justify-content:center; position:relative; }
        #nav a { display:inline-block; font-family:'Press Start 2P',monospace; font-size:8px; color:#cc44ff; text-decoration:none; padding:11px 16px; border-right:1px solid #3a0060; text-transform:uppercase; }
        #nav a:first-of-type { border-left:1px solid #3a0060; }
        #nav a:hover { background:#8a2be2; color:#fff; text-shadow:0 0 8px #fff; }

        /* Language switcher — desktop inside nav */
        #lang-switcher-desktop {
            position: absolute;
            right: 0; top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 0 10px;
            border-left: 1px solid #3a0060;
        }

        .lang-btn {
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            color: #664488;
            background: transparent;
            border: 1px solid #3a0060;
            padding: 4px 7px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .lang-btn:hover { color: #cc44ff; border-color: #8a2be2; }
        .lang-btn.active { color: #fff; background: #8a2be2; border-color: #cc44ff; box-shadow: 0 0 8px #8a2be2; }
        .lang-sep { color: #3a0060; font-size: 12px; }

        /* ===== MAIN LAYOUT ===== */
        #main-layout { display:flex; align-items:flex-start; flex-direction: row-reverse;}

        /* ===== SIDEBAR ===== */
        #sidebar { width:300px; min-width:300px; border-right:2px solid #8a2be2; padding:12px 8px; background:#08001a; }
        .sidebar-mascot { text-align:center; padding:6px 4px 10px; }
        .sidebar-mascot img { width:130px; image-rendering:pixelated; }
        .sidebar-box { border:2px solid #8a2be2; margin-bottom:12px; background:#0f0025; }
        .sidebar-box-title { background:#8a2be2; color:#fff; font-family:'Press Start 2P',monospace; font-size:7px; padding:5px 8px; text-align:center; text-transform:uppercase; letter-spacing:1px; }
        .sidebar-box-content { padding:8px; }
        .sidebar-box-content a { display:block; color:#cc88ff; text-decoration:none; font-family:'VT323',monospace; font-size:19px; padding:3px 0; border-bottom:1px dotted #3a0060; }
        .sidebar-box-content a::before { content:'► '; color:#8a2be2; }
        .sidebar-box-content a:hover { color:#ff44ff; text-shadow:0 0 5px #ff44ff; }
        .social-btn { display:block; text-align:center; padding:6px 4px; margin:4px 0; border:2px solid #8a2be2; color:#cc88ff; text-decoration:none; font-family:'Press Start 2P',monospace; font-size:7px; background:#1a003a; }
        .social-btn:hover { background:#8a2be2; color:#fff; }
        .social-btn.discord { border-color:#5865F2; color:#5865F2; } .social-btn.discord:hover { background:#5865F2; color:#fff; }
        .social-btn.patreon { border-color:#FF424D; color:#FF424D; } .social-btn.patreon:hover { background:#FF424D; color:#fff; }
        .social-btn.youtube { border-color:#FF0000; color:#FF0000; } .social-btn.youtube:hover { background:#FF0000; color:#fff; }
        .social-btn.tiktok  { border-color:#00f2ea; color:#00f2ea; } .social-btn.tiktok:hover  { background:#00f2ea; color:#000; }
        .social-btn.itch    { border-color:#FA5C5C; color:#FA5C5C; } .social-btn.itch:hover    { background:#FA5C5C; color:#fff; }
        .status-widget { font-family:'VT323',monospace; font-size:17px; color:#aaa; line-height:1.5; text-align:center; }
        .status-widget span { color:#00ff88; }
        .visitor-counter { text-align:center; font-family:'Press Start 2P',monospace; font-size:8px; color:#ff3333; padding:6px; border:1px solid #ff3333; }
        .sidebar-badge-box { text-align:center; padding:6px 4px; }
        .sidebar-badge-box img { width:88px; height:31px; image-rendering:pixelated; border:1px solid #8a2be2; display:block; margin:4px auto; }
        .sidebar-badge-box p { font-family:'VT323',monospace; font-size:14px; color:#555; margin-top:4px; }

        /* ===== CONTENT ===== */
        #content { flex:1; padding:16px; min-width:0; }
        .section-heading { font-family:'Press Start 2P',monospace; font-size:18px; color:#e0d0ff; text-shadow:0 0 8px #9932cc; border-bottom:2px solid #8a2be2; padding-bottom:7px; margin-bottom:14px; text-transform:uppercase; letter-spacing:2px; }
        .section-heading::before { content:'☠ '; }
        .new-tag { background:#ff3333; color:#e1e1e1; font-family:'Press Start 2P',monospace; font-size:18px; padding:2px 5px; margin-left:8px; vertical-align:middle; animation:blink 1s step-end infinite; }
        @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

        .blog-post { border:2px solid #3d006a; background:#0c0020; margin-bottom:16px; }
        .blog-post-header { background:linear-gradient(90deg,#220044,#160035); padding:7px 12px; border-bottom:1px solid #3d006a; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; }
        .blog-post-title { font-family:'Press Start 2P',monospace; font-size:14px; color:#fff; }
        .blog-post-date  { font-family:'VT323',monospace; font-size:17px; color:#e1e1e1; }
        .blog-post-body  { padding:12px; display:flex; gap:14px; align-items:flex-start; }
        .blog-post-img   { width:150px; min-width:150px; height:105px; object-fit:cover; border:2px solid #8a2be2; image-rendering:pixelated; }
        .blog-post-text  { font-family:'VT323',monospace; font-size:20px; color:#d0b0ff; line-height:1.5; }
        .blog-post-text p { margin-bottom:8px; }
        .read-more { display:inline-block; font-family:'Press Start 2P',monospace; font-size:7px; color:#ff44ff; text-decoration:none; border:1px solid #ff44ff; padding:4px 8px; margin-top:6px; }
        .read-more:hover { background:#ff44ff; color:#000; }

        .games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
        .game-card  { border:2px solid #3d006a; background:#0c0020; text-align:center; text-decoration:none; display:block; }
        .game-card:hover { border-color:#cc44ff; box-shadow:0 0 12px #8a2be2; }
        .game-card img   { width:100%; height:95px; object-fit:cover; display:block; image-rendering:pixelated; border-bottom:1px solid #3d006a; }
        .game-card-title { font-family:'Press Start 2P',monospace; font-size:7px; color:#cc88ff; padding:8px 4px; display:block; line-height:1.7; }
        .game-card:hover .game-card-title { color:#ff88ff; }

        .videos-grid { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-bottom:20px; }
        .video-embed-box { border:2px solid #3d006a; background:#0c0020; padding:8px; }
        .video-embed-box iframe { width:100%; height:380px; border:none; display:block; }
        .video-label { font-family:'Press Start 2P',monospace; font-size:7px; color:#777; text-align:center; padding:5px 0 4px; }

        .merch-teaser { border:2px dashed #3d006a; padding:24px 20px; text-align:center; background:#08001a; margin-bottom:20px; }
        .merch-teaser img { width:110px; image-rendering:pixelated; margin-bottom:12px; opacity:0.55; }
        .merch-teaser-text { font-family:'Press Start 2P',monospace; font-size:9px; color:#444; line-height:2; }

        .pixel-divider { border:none; border-top:3px dotted #3d006a; margin:20px 0; }
        .view-all { background: #8a2be2; display:inline-block; font-family:'Press Start 2P',monospace; font-size:7px; color:#fff; text-decoration:none; border:1px solid #8a2be2; padding:5px 10px; margin-bottom:20px; }
        .view-all:hover { background:#372be2; color:#fff; }

        /* ===== FOOTER ===== */
        #footer { border-top:3px solid #8a2be2; background:#050010; text-align:center; padding:16px; }
        #footer p { font-family:'VT323',monospace; font-size:18px; color:#555; margin-bottom:5px; }
        #footer a { color:#8a2be2; text-decoration:none; }
        #footer a:hover { color:#cc44ff; }
        .footer-links { font-family:'VT323',monospace; font-size:20px; margin:8px 0; }
        .footer-links a { color:#8a2be2; text-decoration:none; margin:0 8px; }
        .footer-links a:hover { color:#cc44ff; }
        .footer-badges { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
        .footer-badges img { height:31px; image-rendering:pixelated; }

        /* ============================================================
           RESPONSIVE — MOBILE ONLY (≤980px / ≤600px)
        ============================================================ */
        @media (max-width: 980px) {
            #wrapper { width:100%; border-left:none; border-right:none; }
            #nav { overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
            #nav::-webkit-scrollbar { display:none; }
            #nav a { white-space:nowrap; flex-shrink:0; }
            #lang-switcher-desktop { display:none; }
            #main-layout { flex-direction:column; }
            #content  { order:1; padding:12px; }
            #sidebar  { order:2; width:100%; min-width:unset; border-right:none; border-top:2px solid #8a2be2; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
            .sidebar-mascot { grid-column:1/-1; }
            .blog-post-body { flex-direction:column; }
            .blog-post-img  { width:100%; min-width:unset; height:170px; }
            .games-grid  { grid-template-columns:repeat(2,1fr); }
            .videos-grid { grid-template-columns:1fr; }
            #header img.banner { height:140px; }
            #header-overlay { display:none; }

            /* Mobile top bar */
            #mobile-topbar { display:flex; align-items:center; gap:10px; background:#0e0022; border-bottom:3px solid #8a2be2; padding:10px 12px; position:relative; }
            #mobile-topbar-text { flex:1; min-width:0; }
            #mobile-site-title { font-family:'Press Start 2P',monospace; font-size:13px; color:#cc44ff; text-shadow:0 0 10px #9932cc, 2px 2px 0 #000; animation:glitch 6s infinite; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
            #mobile-site-subtitle { font-family:'VT323',monospace; font-size:16px; color:#00ff88; text-shadow:0 0 5px #00ff88; margin-top:3px; }

            /* Hamburger */
            #hamburger-btn { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:46px; height:46px; font-size:20px; color:#fff; background:#8a2be2; border:2px solid #cc44ff; box-shadow:0 0 14px #8a2be2,0 0 28px rgba(138,43,226,0.4); cursor:pointer; border-radius:4px; transition:background 0.15s,box-shadow 0.15s; }
            #hamburger-btn:hover { background:#cc44ff; box-shadow:0 0 20px #cc44ff; }

            /* Lang switcher mobile — right side of topbar */
            #lang-switcher-mobile { display:flex; align-items:center; gap:2px; flex-shrink:0; }

            /* Overlay */
            #nav-toggle:checked ~ #nav-overlay { display:block; }

            /* Drawer */
            #nav-toggle:checked ~ #wrapper #nav { left:0; }
            #wrapper #nav { position:fixed; top:0; left:-300px; width:275px; height:100vh; background:#0e0022; border-right:3px solid #8a2be2; z-index:1001; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; overflow-y:auto; overflow-x:hidden; transition:left 0.25s ease; scrollbar-width:none; }
            #wrapper #nav::-webkit-scrollbar { display:none; }
            #wrapper #nav a { width:100%; padding:15px 20px; font-size:9px; border-right:none; border-left:none; border-bottom:1px solid #2a0050; text-align:left; }

            /* Close button */
            #nav-close { display:block; font-family:'Press Start 2P',monospace; font-size:8px; color:#ff3333; background:#1a0030; padding:14px 20px; border-bottom:2px solid #8a2be2; cursor:pointer; text-align:right; letter-spacing:1px; }
            #nav-close:hover { background:#ff3333; color:#fff; }

            /* Back to top */
            #back-to-top { display:flex; align-items:center; justify-content:center; position:fixed; bottom:22px; right:16px; width:46px; height:46px; background:#8a2be2; color:#fff; font-size:16px; text-decoration:none; border:2px solid #cc44ff; box-shadow:0 0 14px #8a2be2,0 0 28px rgba(138,43,226,0.4); z-index:500; border-radius:4px; transition:background 0.15s,box-shadow 0.15s; }
            #back-to-top:hover { background:#cc44ff; box-shadow:0 0 20px #cc44ff; }
        }

        @media (max-width: 600px) {
            #mobile-site-title { font-size:11px; }
            #mobile-site-subtitle { font-size:14px; }
            #header img.banner { height:110px; }
            #marquee-bar { font-size:7px; }
            .section-heading { font-size:8px; letter-spacing:1px; }
            .blog-post-title { font-size:7px; }
            .blog-post-img  { height:140px; }
            .blog-post-text { font-size:18px; }
            .games-grid { grid-template-columns:1fr; }
            .game-card img { height:120px; }
            .game-card-title { font-size:8px; }
            .video-embed-box iframe { height:185px; }
            #sidebar { grid-template-columns:1fr; }
            .sidebar-mascot { grid-column:1; }
            #footer p { font-size:15px; }
            .footer-links { font-size:17px; }
            .footer-badges { gap:4px; }
            .footer-badges img { height:28px; }
            .read-more { font-size:6px; padding:4px 7px; }
            .view-all  { font-size:6px; padding:4px 8px; }
        }
    
        /* ══════════════════════════════════════════
           TABLET (601px – 980px)
           Keep side-by-side layout, no hamburger.
           Overrides the ≤980px mobile rules above.
        ══════════════════════════════════════════ */
        @media (min-width: 601px) and (max-width: 980px) {

            /* Show desktop banner overlay, hide phone topbar */
            #mobile-topbar          { display: none !important; }
            #header-overlay         { display: block !important; }
            #site-title             { font-size: 16px; }
            #site-subtitle          { font-size: 17px; }
            #header img.banner      { height: 150px; }

            /* Hide phone-only controls */
            #hamburger-btn          { display: none !important; }
            #nav-close              { display: none !important; }
            #back-to-top            { display: none !important; }
            #lang-switcher-mobile   { display: none !important; }
            #lang-switcher-desktop  { display: flex !important; }

            /* Restore nav from drawer back to horizontal scroll bar */
            #wrapper #nav {
                position:   static    !important;
                left:       auto      !important;
                width:      auto      !important;
                height:     auto      !important;
                background: #0e0022   !important;
                border-right: none    !important;
                flex-direction: row   !important;
                flex-wrap:  nowrap    !important;
                overflow-x: auto      !important;
                overflow-y: visible   !important;
                transition: none      !important;
                z-index:    auto      !important;
                scrollbar-width: none;
            }
            #wrapper #nav::-webkit-scrollbar { display: none; }
            #nav-overlay { display: none !important; }

            /* Restore side-by-side layout with a narrower sidebar */
            #main-layout            { flex-direction: row-reverse !important; }
            #content                { order: 0; padding: 10px; }
            #sidebar {
                order:          0;
                display:        block !important;
                width:          165px;
                min-width:      165px;
                border-right:   2px solid #8a2be2;
                border-top:     none;
                padding:        8px 6px;
            }

            /* Sidebar text slightly smaller to fit */
            .sidebar-box-title      { font-size: 6px; }
            .sidebar-box-content a  { font-size: 17px; }
            .status-widget          { font-size: 15px; }
            .social-btn             { font-size: 6px; padding: 5px 3px; }
            .visitor-counter        { font-size: 7px; }

            /* Blog posts: stack image above text (content area is narrow) */
            .blog-post-body         { flex-direction: column; }
            .blog-post-img          { width: 100%; min-width: unset; height: 130px; }
            .blog-post-title        { font-size: 7px; }

            /* Section headings slightly smaller */
            .section-heading        { font-size: 9px; }

            /* 2-column games grid */
            .games-grid             { grid-template-columns: repeat(2, 1fr); }

            /* 1-column videos (stacked) */
            .videos-grid            { grid-template-columns: 1fr; }
            .video-embed-box iframe { height: 170px; }
        }


  /* ── Game card ── */
        .game-card-full {
            background: #0d001a;
            border: 2px solid #3a0060;
            display: flex;
            flex-direction: column;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .game-card-full:hover {
            border-color: #8a2be2;
            box-shadow: 0 0 12px #3a0060;
        }

        .game-card-full .game-cover {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            display: block;
            image-rendering: pixelated;
            border-bottom: 2px solid #3a0060;
        }

        .game-card-full .game-info {
            padding: 10px 10px 12px;
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 6px;
        }

        .game-card-full .game-title {
            font-family: 'Press Start 2P', monospace;
            font-size: 14px;
            color: #E0D100;
            line-height: 1.8;
            margin: 0;
        }

        .game-card-full .game-status {
            font-family: 'Press Start 2P', monospace;
            font-size: 6px;
            padding: 2px 6px;
            display: inline-block;
            align-self: flex-start;
        }

        .game-card-full .game-status.in-dev {
            background: #1a0030;
            border: 1px solid #8a2be2;
            color: #cc44ff;
        }

        .game-card-full .game-status.released {
            background: #001a00;
            border: 1px solid #00aa00;
            color: #00ff44;
        }

        .game-card-full .game-desc {
            font-family: 'VT323', monospace;
            font-size: 15px;
            color: #a090b8;
            line-height: 1.5;
            margin: 0;
            flex: 1;
        }

        /* Platform buttons */
        .game-btns {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: 4px;
        }

        .game-btn {
            font-family: 'Press Start 2P', monospace;
            font-size: 6px;
            padding: 6px 8px;
            text-decoration: none;
            text-align: center;
            border: 2px solid;
            display: block;
            line-height: 1.6;
            transition: background 0.15s, color 0.15s;
        }
         /* Itch.io button */
        .game-btn.itch {
            background: #1a0010;
            border-color: #FA5C5C;
            color: #FA5C5C;
        }
        .game-btn.itch:hover {
            background: #FA5C5C;
            color: #fff;
        }
        /* Itch.io button */
        .game-btn.browser {
            background: #090cdf3a;
            border-color: #091edf;
            color: #fff;
        }
        .game-btn.browser:hover {
            background: #091edf;
            color: #fff;
        }

        /* Steam button */
        .game-btn.steam {
            background: #001020;
            border-color: #4488cc;
            color: #4488cc;
        }
        .game-btn.steam:hover {
            background: #4488cc;
            color: #fff;
        }

        /* Android button */
        .game-btn.android {
            background: #001a00;
            border-color: #44aa44;
            color: #44aa44;
        }
        .game-btn.android:hover {
            background: #44aa44;
            color: #fff;
        }

        /* Section divider between IN DEV and RELEASED */
        .games-section-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            color: #664488;
            border-bottom: 2px solid #3a0060;
            padding-bottom: 8px;
            margin: 24px 0 14px;
            letter-spacing: 1px;
        }

        /* ── Responsive ── */
        @media (max-width: 980px) {
            .games-full-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 600px) {
            .games-full-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            .game-card-full .game-title { font-size: 6px; }
            .game-card-full .game-desc  { font-size: 13px; }
        }


body {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=243675, auto);}