/* CORE PREMIUM THEME SYSTEM */
        :root {
            --bg-base: #06080d;
            --bg-surface: rgba(15, 18, 27, 0.68);
            --bg-surface-light: rgba(24, 28, 40, 0.55);
            --neon-cyan: #38bdf8;
            --neon-purple: #6366f1;
            --neon-accent: #6366f1;
            --neon-accent-rgb: 99, 102, 241;
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --glass-bg: rgba(8, 10, 16, 0.72);
            --glass-border: rgba(255, 255, 255, 0.08);
            --shadow-glow-cyan: 0 0 20px rgba(56, 189, 248, 0.22);
            --shadow-glow-purple: 0 0 20px rgba(99, 102, 241, 0.22);
            --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body.theme-purple { --neon-cyan: #ffffff; --neon-purple: #e8dcc4; --neon-accent: #f0e4cc; --neon-accent-rgb: 240, 228, 204; }
        body.theme-blue { --neon-cyan: #38bdf8; --neon-purple: #2563eb; --neon-accent: #2563eb; --neon-accent-rgb: 37, 99, 235; }
        body.theme-emerald { --neon-cyan: #2dd4bf; --neon-purple: #10b981; --neon-accent: #059669; --neon-accent-rgb: 5, 150, 105; }
        body.theme-cyber { --neon-cyan: #fb7185; --neon-purple: #f59e0b; --neon-accent: #f59e0b; --neon-accent-rgb: 245, 158, 11; }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-base);
            color: var(--text-main);
            min-height: 100vh;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)); z-index: 9999; width: 0%; transition: width 0.1s linear; }
        
        .aurora-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; pointer-events: none; background: #05070b; }
        .aurora-blob { position: absolute; border-radius: 50%; filter: blur(160px); opacity: 0.09; animation: floatBlob 20s infinite alternate ease-in-out; }
        .blob1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--neon-cyan); }
        .blob2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--neon-purple); animation-delay: -5s; }
        .blob3 { top: 40%; left: 50%; width: 35vw; height: 35vw; background: #334155; opacity: 0.08; animation-duration: 25s; }

        @keyframes floatBlob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8%, 12%) scale(1.15); } }

        body::before {
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
            background-size: 50px 50px; z-index: -1; pointer-events: none;
        }

        h1, h2, h3, .pixel-font { font-family: 'Space Grotesk', sans-serif; text-transform: none; letter-spacing: 0.2px; font-weight: 700; }
        .logo.pixel-font { font-family: 'Press Start 2P', cursive; letter-spacing: 1px; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        button, input, select, textarea { font-family: inherit; color: inherit; }
        button { cursor: pointer; border: none; outline: none; background: none; }

        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #06060c; }
        ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 20px; border: 2px solid #06060c; }
        ::-webkit-scrollbar-thumb:hover { background: var(--neon-accent); }

        #loader {
            position: fixed; inset: 0; background: #050508; z-index: 99999;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* NEW CUSTOM PIXEL CONSTRUCTION ANIMATION FOR "P G" */
        .pixel-pg-container {
            position: relative;
            width: 104px;
            height: 56px;
            transform: scale(1.6);
            margin-bottom: 20px;
        }
        .pxl {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--neon-cyan);
            box-shadow: 0 0 8px var(--neon-cyan);
            animation: pxlFly 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            opacity: 0;
            border-radius: 1px;
        }
        .pxl.prp {
            background: var(--neon-purple);
            box-shadow: 0 0 8px var(--neon-purple);
        }
        @keyframes pxlFly {
            0% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
            70% { opacity: 1; transform: translate(calc(var(--sx)*0.1), calc(var(--sy)*0.1)) scale(1.2); }
            100% { transform: translate(0, 0) scale(1); opacity: 1; }
        }
        
        /* coordinates for P (step 12px) */
        .p-0-0 { left: 0px; top: 0px; --sx: -200px; --sy: -300px; }
        .p-1-0 { left: 12px; top: 0px; --sx: -100px; --sy: -400px; }
        .p-2-0 { left: 24px; top: 0px; --sx: 50px; --sy: -350px; }
        .p-0-1 { left: 0px; top: 12px; --sx: -300px; --sy: 100px; }
        .p-2-1 { left: 24px; top: 12px; --sx: 200px; --sy: 50px; }
        .p-0-2 { left: 0px; top: 24px; --sx: -150px; --sy: 200px; }
        .p-1-2 { left: 12px; top: 24px; --sx: -50px; --sy: 300px; }
        .p-2-2 { left: 24px; top: 24px; --sx: 150px; --sy: 250px; }
        .p-0-3 { left: 0px; top: 36px; --sx: -250px; --sy: 400px; }
        .p-0-4 { left: 0px; top: 48px; --sx: -100px; --sy: 450px; }

        /* coordinates for G (offset left 60px) */
        .g-0-0 { left: 60px; top: 0px; --sx: 200px; --sy: -300px; }
        .g-1-0 { left: 72px; top: 0px; --sx: 300px; --sy: -400px; }
        .g-2-0 { left: 84px; top: 0px; --sx: 400px; --sy: -250px; }
        .g-0-1 { left: 60px; top: 12px; --sx: 150px; --sy: -100px; }
        .g-0-2 { left: 60px; top: 24px; --sx: 250px; --sy: 100px; }
        .g-2-2 { left: 84px; top: 24px; --sx: 450px; --sy: 50px; }
        .g-3-2 { left: 96px; top: 24px; --sx: 350px; --sy: 150px; }
        .g-0-3 { left: 60px; top: 36px; --sx: 100px; --sy: 300px; }
        .g-3-3 { left: 96px; top: 36px; --sx: 400px; --sy: 350px; }
        .g-0-4 { left: 60px; top: 48px; --sx: 50px; --sy: 400px; }
        .g-1-4 { left: 72px; top: 48px; --sx: 200px; --sy: 450px; }
        .g-2-4 { left: 84px; top: 48px; --sx: 300px; --sy: 400px; }
        .g-3-4 { left: 96px; top: 48px; --sx: 450px; --sy: 250px; }

        header {
            position: sticky; top: 0; z-index: 1000;
            background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--glass-border);
            padding: 16px 5%; display: flex; justify-content: space-between; align-items: center;
            flex-wrap: nowrap; gap: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: var(--transition-smooth);
        }
        header.scrolled { padding: 12px 5%; background: rgba(5, 5, 10, 0.95); border-bottom-color: rgba(255, 255, 255, 0.1); }
        
        .logo { font-size: 1.25rem; color: #fff; text-shadow: 0 0 15px rgba(56, 189, 248, 0.26); cursor: pointer; transition: var(--transition-smooth); }
        .logo span { color: var(--neon-purple); text-shadow: 0 0 15px rgba(99, 102, 241, 0.28); }
        .logo:hover { transform: scale(1.03); }
        
        .nav-links { display: flex; gap: 12px; align-items: center; }
        .nav-menu-links { display: flex; gap: 4px; align-items: center; margin-right: 8px; }
        .nav-menu-links a {
            color: var(--text-muted); font-weight: 500; font-size: 0.88rem;
            padding: 10px 14px; border-radius: 8px; transition: var(--transition-smooth); cursor: pointer;
        }
        .nav-menu-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
        .mobile-menu-toggle {
            display: none; background: none; border: none; color: var(--text-main);
            font-size: 1.3rem; cursor: pointer; padding: 6px 10px; border-radius: 8px;
        }
        .mobile-menu-toggle:hover { background: rgba(255, 255, 255, 0.05); }
        @media (max-width: 1100px) {
            .mobile-menu-toggle { display: block; }
            .nav-links {
                position: absolute; top: 100%; left: 0; right: 0;
                flex-direction: column; align-items: stretch; gap: 0;
                background: rgba(5, 5, 10, 0.97); backdrop-filter: blur(20px);
                border-bottom: 1px solid var(--glass-border);
                max-height: 0; overflow: hidden; padding: 0 5%;
                transition: max-height 0.3s ease, padding 0.3s ease;
            }
            .nav-links.open { max-height: 560px; padding: 12px 5% 20px; }
            .nav-menu-links { flex-direction: column; align-items: stretch; margin-right: 0; gap: 2px; }
            .nav-menu-links a { padding: 14px 10px; text-align: center; }
            .theme-select-container { justify-content: center; margin: 10px 0; }
        }
        .nav-btn {
            color: var(--text-muted); font-weight: 500; padding: 10px 18px; border-radius: 8px;
            transition: var(--transition-smooth); font-size: 0.88rem; border: 1px solid transparent;
        }
        .nav-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.05); }
        
        .theme-select-container { display: flex; align-items: center; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 30px; border: 1px solid var(--glass-border); margin-right: 8px; }
        .theme-dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 4px; cursor: pointer; transition: var(--transition-smooth); border: 2px solid transparent; }
        .theme-dot.t-purple { background: linear-gradient(135deg, #ffffff 50%, #e8dcc4 50%); }
        .theme-dot.t-blue { background: #2563eb; }
        .theme-dot.t-emerald { background: #10b981; }
        .theme-dot.t-cyber { background: #f59e0b; }
        .theme-dot.active { border-color: #fff; transform: scale(1.2); }

        .nav-btn.primary { background: linear-gradient(135deg, var(--neon-purple), #4f46e5); color: #fff; font-weight: 600; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.175); border: 1px solid rgba(255,255,255,0.1); }
        .nav-btn.primary:hover { box-shadow: 0 6px 25px rgba(99, 102, 241, 0.315); transform: translateY(-2px); }

        #hero-play-btn:hover { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); color: #000; box-shadow: 0 6px 25px rgba(56, 189, 248, 0.358); }

        .premium-hero {
            width: 100%; max-width: 1400px; margin: 30px auto 10px auto; padding: 0 5%;
            display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center;
        }
        
        .hero-info-panel {
            background: rgba(13, 13, 23, 0.45); border: 1px solid var(--glass-border);
            padding: 40px; border-radius: 20px; backdrop-filter: blur(15px);
            position: relative; overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,0.3);
            transition: var(--transition-smooth); cursor: pointer;
            height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
            min-height: 320px;
        }
        .hero-info-panel:hover { transform: translateY(-8px); border-color: var(--neon-cyan); box-shadow: 0 15px 35px rgba(56, 189, 248, 0.163); }
        .hero-info-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--neon-cyan), var(--neon-purple)); }
        
        .hero-tag { font-size: 0.75rem; color: var(--neon-cyan); letter-spacing: 2px; margin-bottom: 12px; font-weight: 700; display: inline-block; cursor: pointer; transition: var(--transition-smooth); }
        .hero-tag:hover { transform: scale(1.08); text-shadow: 0 0 16px var(--neon-cyan), 0 0 4px #fff; }
        .hero-title { font-size: 1.8rem; line-height: 1.4; color: #fff; margin-bottom: 16px; text-shadow: 0 0 20px rgba(255,255,255,0.05); }
        .hero-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        
        .hero-stats-row { display: flex; gap: 30px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 20px; margin-top: auto; }
        .stat-item { display: flex; flex-direction: column; gap: 4px; }
        .stat-num { font-size: 1.3rem; font-weight: 800; color: #fff; }
        .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
        
        .container { display: flex; flex-direction: column; align-items: center; padding: 10px 5% 60px 5%; max-width: 1400px; margin: 0 auto; width: 100%; }
        .main-content { width: 100%; display: flex; flex-direction: column; align-items: center; }
        
        .category-wrapper { display: flex; align-items: center; width: 100%; max-width: 1300px; margin-bottom: 30px; position: relative; gap: 12px; background: rgba(255,255,255,0.01); padding: 8px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.03); backdrop-filter: blur(5px); }
        .scroll-btn { background: var(--bg-surface-light); border: 1px solid var(--glass-border); color: #fff; border-radius: 50%; width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: var(--transition-smooth); flex-shrink: 0; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        .scroll-btn:hover { background: var(--neon-accent); border-color: transparent; box-shadow: 0 0 15px rgba(var(--neon-accent-rgb), 0.5); transform: scale(1.05); }
        
        .category-bar { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding: 2px 0; scrollbar-width: none; flex-grow: 1; justify-content: flex-start; transition: opacity 0.35s ease; }
        .category-bar::-webkit-scrollbar { display: none; }
        
        .cat-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 10px 22px; border-radius: 30px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; transition: var(--transition-smooth); }
        .cat-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
        .cat-btn.active { border-color: rgba(255,255,255,0.1); color: #fff; background: linear-gradient(135deg, rgba(var(--neon-accent-rgb), 0.25), rgba(var(--neon-accent-rgb), 0.05)); box-shadow: inset 0 0 12px rgba(var(--neon-accent-rgb), 0.2), 0 4px 15px rgba(0,0,0,0.2); }

        .game-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); 
            gap: 25px; width: 100%; max-width: 1300px; justify-content: center; 
            transition: opacity 0.3s ease;
        }
        
        .game-card { 
            background: rgba(18, 18, 32, 0.45); 
            overflow: hidden; 
            border: 1px solid var(--glass-border); position: relative; 
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; cursor: pointer; 
            display: flex; flex-direction: column;
            --s: 4px;
        }
        .game-card:hover { transform: translateY(-4px); border-color: var(--neon-cyan); box-shadow: inset 0 0 0 1px var(--neon-cyan); }
        .game-card.showcase-highlight { border-color: var(--neon-cyan); box-shadow: inset 0 0 0 3px rgba(56, 189, 248, 0.55); }
        
        .card-thumb { 
            width: 100%; 
            aspect-ratio: 4 / 3; 
            position: relative; 
            background-size: cover; 
            background-position: top center; 
            overflow: hidden; 
        }
        .card-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 0; }
        .gif-overlay { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: top center; opacity: 0; transition: opacity 0.4s ease; }
        .game-card:hover .gif-overlay { opacity: 1; }
        .card-thumb::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, transparent, rgba(12, 12, 22, 0.95)); }
        
        .play-overlay { position: absolute; inset: 0; z-index: 3; background: rgba(4, 4, 8, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: var(--transition-smooth); }
        .game-card:hover .play-overlay { opacity: 1; backdrop-filter: blur(3px); }
        .play-btn-circle { width: 50px; height: 50px; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 15px var(--neon-cyan); transform: scale(0.85); transition: var(--transition-smooth); }
        .game-card:hover .play-btn-circle { transform: scale(1); }
        .play-btn-circle::after { content: '▶'; color: #fff; font-size: 1.1rem; margin-left: 3px; }
        
        .card-info { 
            padding: 16px; 
            display: flex; flex-direction: column; justify-content: flex-end; 
            flex-grow: 1; position: relative; z-index: 4; 
            background: transparent; 
        }
        .card-genre { 
            font-size: 0.7rem; color: var(--neon-purple); 
            text-transform: uppercase; letter-spacing: 1.5px; 
            font-weight: 700; margin-bottom: 4px; 
        }
        .card-title { 
            font-size: 1.05rem; color: #fff; margin-bottom: 8px; 
            font-weight: 800; line-height: 1.3; transition: var(--transition-smooth); 
        }
        .game-card:hover .card-title { color: var(--neon-cyan); }
        .card-premium-meta { display: flex; align-items: center; justify-content: flex-start; width: 100%; }
        .card-stars-layer { color: #fbbf24; font-size: 0.8rem; letter-spacing: 2px; }

        /* ===== PORTFOLIO SECTIONS ===== */
        .portfolio-section { width: 100%; max-width: 1300px; margin: 70px auto 0 auto; padding: 0 5%; }
        .portfolio-section-header { margin-bottom: 28px; text-align: center; }
        .portfolio-section-title { font-size: 1.3rem; color: #fff; text-shadow: 0 0 15px rgba(56, 189, 248, 0.195); margin-bottom: 8px; }
        .portfolio-section-subtitle { color: var(--text-muted); font-size: 0.9rem; max-width: 560px; margin: 0 auto; line-height: 1.6; }

        .story-panel {
            background: var(--bg-surface); border: 1px solid var(--glass-border); border-radius: 20px;
            padding: 36px; backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px;
        }
        .story-milestone { position: relative; padding-left: 20px; border-left: 2px solid var(--neon-purple); }
        .story-milestone .milestone-year { font-size: 0.7rem; color: var(--neon-cyan); letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; display: block; }
        .story-milestone p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }
        .story-intro { color: var(--text-main); font-size: 0.95rem; line-height: 1.75; max-width: 900px; margin: 0 auto 32px auto; text-align: center; }

        .past-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
        .driller-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
        .driller-gallery-item { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--bg-surface); box-shadow: 0 15px 35px rgba(0,0,0,0.35); transition: var(--transition-smooth); aspect-ratio: 16/9; }
        .driller-gallery-item:hover { transform: translateY(-6px); border-color: var(--neon-cyan); box-shadow: 0 15px 35px rgba(56, 189, 248, 0.163); }
        .driller-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .past-project-card { cursor: default; }
        .past-project-card .card-thumb { aspect-ratio: 16/10; }
        .past-project-card:hover { transform: translateY(-6px); border-color: var(--neon-purple); box-shadow: 0 15px 35px rgba(99, 102, 241, 0.14); }
        .prototype-tag {
            position: absolute; top: 10px; left: 10px; z-index: 4; background: rgba(4,4,8,0.75);
            color: var(--text-muted); font-size: 0.62rem; letter-spacing: 1px; font-weight: 700;
            text-transform: uppercase; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--glass-border);
        }

        .coming-soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
        .coming-soon-card {
            background: rgba(18, 18, 32, 0.35); border: 1px dashed var(--glass-border); border-radius: 16px;
            aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 10px; transition: var(--transition-smooth);
        }
        .coming-soon-card:hover { border-color: var(--neon-cyan); background: rgba(18, 18, 32, 0.55); }
        .coming-soon-card i { font-size: 1.6rem; color: var(--text-muted); }
        .coming-soon-card span { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }

        .viewport-page { display: none; padding: 20px 5% 60px 5%; max-width: 1300px; margin: 0 auto; animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
        .page-header { text-align: center; margin-bottom: 25px; }
        .page-title-large { font-size: 1.5rem; color: #fff; text-shadow: 0 0 15px rgba(56, 189, 248, 0.227); margin-top: 10px; }
        .page-controls-top { display: flex; justify-content: flex-start; align-items: center; max-width: 960px; margin: 0 auto 20px auto; width: 100%;}
        .back-btn { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; transition: var(--transition-smooth); display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .back-btn:hover { color: #fff; transform: translateX(-3px); }
        
        .gameplay-layout { display: flex; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; }
        .game-container-wrapper { flex-grow: 1; width: 100%; display: flex; justify-content: center; }
        .game-container {
            background: #000; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 30px 60px rgba(0,0,0,0.7); position: relative; overflow: hidden;
            width: 100%; margin: 0 auto;
        }
        /* Orientation-specific sizing - each game keeps its intended aspect ratio and is
           never stretched, never force-rotated. Only the container's proportions change. */
        .game-container.orientation-landscape { max-width: 960px; aspect-ratio: 16 / 9; height: auto; max-height: 75vh; }
        .game-container.orientation-portrait { max-width: 480px; aspect-ratio: 9 / 16; height: auto; max-height: 82vh; }
        /* Fallback for the rare browser without aspect-ratio support */
        @supports not (aspect-ratio: 1 / 1) {
            .game-container.orientation-landscape { height: 540px; }
            .game-container.orientation-portrait { height: 640px; }
        }
        .game-container iframe { width: 100%; height: 100%; border: none; display: block; }

        /* Fullscreen: let the game element expand to fill the whole screen with no chrome around it.
           Aspect ratio no longer applies here - the iframe fills 100% and the game's own
           internal layout takes over, exactly as it did before orientation support was added. */
        .game-container:fullscreen, .game-container:-webkit-full-screen, .game-container:-moz-full-screen, .game-container:-ms-fullscreen {
            width: 100vw; height: 100vh; max-width: none; max-height: none; aspect-ratio: unset; border-radius: 0; border: none; box-shadow: none;
        }
        .game-container:fullscreen iframe, .game-container:-webkit-full-screen iframe, .game-container:-moz-full-screen iframe, .game-container:-ms-fullscreen iframe {
            width: 100%; height: 100%;
        }

        /* Landscape games on a touch phone held upright (when the browser refuses to lock the
           orientation, e.g. iOS Safari): show a clear message instead of a squashed or blank game.
           It is pure CSS, so it disappears the moment the device is rotated to landscape and the
           game is then shown in its normal, unstretched 16:9 layout. Desktop/tablet never match. */
        .rotate-hint { display: none; }
        @media (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
            .game-container.orientation-landscape .rotate-hint {
                display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                position: absolute; inset: 0; z-index: 25; padding: 12px; text-align: center;
                background: #06080d; color: #fff;
            }
            .game-container.orientation-landscape .rotate-hint strong { font-size: 0.95rem; }
            .game-container.orientation-landscape .rotate-hint small { font-size: 0.75rem; opacity: 0.7; }
            .game-container.orientation-landscape .rotate-hint-icon { font-size: 1.8rem; animation: rotateHintTurn 2s ease-in-out infinite; }
        }
        @keyframes rotateHintTurn { 0%, 30% { transform: rotate(0deg); } 70%, 100% { transform: rotate(90deg); } }

        /* Small transparent Exit Fullscreen control, shown only on mobile while fullscreen is active */
        .mobile-exit-fullscreen-btn {
            position: absolute; top: 12px; right: 64px; z-index: 30;
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(6, 8, 13, 0.32); color: #fff; border: 1px solid rgba(255,255,255,0.2);
            font-size: 1.15rem; align-items: center; justify-content: center;
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
            transition: var(--transition-smooth); cursor: pointer;
            display: none;
        }
        .mobile-exit-fullscreen-btn.visible { display: flex; }
        .mobile-exit-fullscreen-btn:active { background: rgba(6, 8, 13, 0.6); }

        /* Dedicated Fullscreen toggle shown below the game on PC/tablet */
        .game-fullscreen-controls { display: flex; justify-content: center; margin-top: 20px; }
        
        .game-action-bar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; background: rgba(16, 16, 28, 0.7); backdrop-filter: blur(10px); padding: 14px 20px; border-radius: 14px; border: 1px solid var(--glass-border); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .action-btn { background: var(--bg-surface-light); border: 1px solid rgba(255, 255, 255, 0.06); color: #e2e8f0; padding: 11px 20px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
        .action-btn:hover { color: #fff; border-color: var(--neon-cyan); background: rgba(56, 189, 248, 0.052); box-shadow: 0 0 15px rgba(56, 189, 248, 0.13); transform: translateY(-2px); }
        
        .game-details { max-width: 960px; margin: 30px auto 0 auto; background: rgba(15, 15, 26, 0.6); backdrop-filter: blur(15px); border-radius: 16px; padding: 32px; border: 1px solid var(--glass-border); }
        .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
        @media (max-width: 768px) { .details-grid { grid-template-columns: 1fr; gap: 25px; } }
        
        .detail-section h3 { font-size: 0.85rem; color: var(--neon-cyan); margin-bottom: 16px; border-left: 3px solid var(--neon-cyan); padding-left: 10px; }
        .detail-section p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.6; margin-bottom: 12px; }
        .detail-section p strong { color: #fff; }
        .prompt-box { background: #07070c; padding: 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.86rem; color: #a7f3d0; white-space: pre-wrap; font-family: monospace; overflow-x: auto; line-height: 1.6; margin-top: 10px; }

        /* STORE CSS ADDITIONS */
        .content-box { max-width: 1000px; margin: 0 auto; background: rgba(15, 15, 26, 0.5); backdrop-filter: blur(15px); border-radius: 16px; padding: 35px; border: 1px solid var(--glass-border); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
        .subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 20px;}
        .plan-card { background: rgba(8, 8, 15, 0.7); padding: 40px 30px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; position: relative; transition: var(--transition-smooth); }
        .plan-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
        .plan-card.popular-plan { border-color: var(--neon-cyan); background: linear-gradient(180deg, rgba(56, 189, 248, 0.04) 0%, rgba(8, 8, 15, 0.8) 100%); box-shadow: 0 0 30px rgba(56, 189, 248, 0.065); }
        .plan-features { margin: 25px 0; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; text-align: left; }
        .feature-item { display: flex; align-items: center; gap: 10px; color: #e2e8f0; font-size: 0.95rem; }
        .feature-item i { color: var(--neon-cyan); font-size: 0.9rem; }
        
        .modal-overlay { position: fixed; inset: 0; background: rgba(3, 3, 6, 0.85); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 99999; opacity: 0; transition: opacity 0.3s ease; }
        .modal-overlay.active { display: flex; opacity: 1; }
        .modal-content { background: #0c0c14; padding: 40px; border-radius: 20px; width: 92%; max-width: 440px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); transform: scale(0.94); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
        .modal-overlay.active .modal-content { transform: scale(1); border-color: var(--neon-purple); box-shadow: var(--shadow-glow-purple); }
        .close-modal { position: absolute; top: 20px; right: 22px; color: var(--text-muted); font-size: 1.5rem; font-weight: bold; transition: var(--transition-smooth); cursor: pointer; }
        .close-modal:hover { color: #fff; transform: rotate(90deg); }
        .modal-title { font-size: 0.95rem; color: #fff; margin-bottom: 26px; text-align: center; }
        .option-grid { display: flex; flex-direction: column; gap: 14px; }
        .opt-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 15px 20px; border-radius: 12px; text-align: left; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 14px; transition: var(--transition-smooth); color: #e2e8f0; cursor: pointer; }
        .opt-btn:hover { border-color: var(--neon-cyan); background: rgba(56, 189, 248, 0.04); transform: translateX(6px); color: #fff; box-shadow: 0 0 15px rgba(56, 189, 248, 0.065); }

        #pg-info-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 3, 5, 0.92); backdrop-filter: blur(10px); z-index: 999999; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
        #pg-info-modal.active-modal { display: flex; opacity: 1; }
        .info-modal-wrapper { background: #0d0d15; padding: 45px; border-radius: 20px; width: 90%; max-width: 660px; max-height: 82vh; overflow-y: auto; border: 1px solid rgba(255,255,255,0.1); position: relative; box-shadow: 0 25px 60px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        #pg-info-modal.active-modal .info-modal-wrapper { transform: scale(1); border-color: var(--neon-purple); box-shadow: var(--shadow-glow-purple); }

        footer { background: #050508; padding: 50px 5% 40px 5%; border-top: 1px solid rgba(255,255,255,0.03); color: #57657a; font-size: 0.88rem; text-align: center; margin-top: auto; }
        .footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; }
        .social-icons { display: flex; gap: 14px; justify-content: center; }
        .social-icons a { color: var(--text-muted); font-size: 1.15rem; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); }
        .social-icons a:hover { color: #fff; transform: translateY(-4px); border-color: var(--neon-cyan); box-shadow: 0 5px 15px rgba(56, 189, 248, 0.163); }
        .footer-links { display: flex; gap: 28px; color: var(--text-muted); font-weight: 500; font-size: 0.88rem; flex-wrap: wrap; justify-content: center; }
        .footer-links a { transition: var(--transition-smooth); cursor: pointer; }
        .footer-links a:hover { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(56, 189, 248, 0.26); }
        .footer-copyright { font-size: 0.68rem; color: #475569; letter-spacing: 0.5px; }

        #scrollToTopBtn { position: fixed; bottom: 35px; right: 35px; width: 48px; height: 48px; background: linear-gradient(135deg, var(--neon-purple), #4f46e5); color: #fff; border: none; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: none; z-index: 999; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.28); transition: var(--transition-smooth); }
        #scrollToTopBtn:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.42); }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 900px) {
            .premium-hero { grid-template-columns: 1fr; gap: 20px; margin-top: 15px; }
            .hero-info-panel { min-height: 280px; }
        }
        /* Mobile: shrink social icons so all remain visible on one line without horizontal overflow */
        @media (max-width: 768px) {
            .footer-content { max-width: 100%; }
            .social-icons { gap: clamp(6px, 1.8vw, 14px); flex-wrap: nowrap; max-width: 100%; }
            .social-icons a { width: clamp(30px, 8vw, 44px); height: clamp(30px, 8vw, 44px); font-size: clamp(0.8rem, 2.8vw, 1.15rem); flex-shrink: 0; }
        }

        /* Small phones (iPhone SE / small Android, ~360-400px wide) */
        @media (max-width: 420px) {
            .logo { font-size: 1rem; }
            .hero-title { font-size: 1.4rem; }
            .hero-info-panel { padding: 22px; min-height: unset; }
            .hero-stats-row { flex-wrap: wrap; gap: 14px; }
            .game-container.orientation-landscape { max-height: 260px; }
            .game-container.orientation-portrait { max-height: 70vh; }
            .portfolio-section-title { font-size: 1.1rem; }
        }

        /* Mobile landscape: short viewport height, so keep the game viewport and hero from
           forcing excessive vertical scrolling and keep on-screen controls reachable. */
        @media (max-height: 480px) and (orientation: landscape) {
            .premium-hero { margin-top: 8px; }
            .hero-info-panel { padding: 20px; min-height: unset; }
            .driller-gallery-grid { display: none; }
            .game-container.orientation-landscape { max-height: 88vh; }
            .game-container.orientation-portrait { max-height: 88vh; max-width: 320px; }
            header { padding: 10px 4%; }
        }

/* =====================================================================================
   PIXELGAUNT PLATFORM LAYER
   Everything below styles the platform sections (featured rail, categories, Publish,
   Tournaments, Creator Lab). Signature device: stair-stepped "pixel cut" corners (--s = step).
   Colours come from the theme variables above, so the four theme dots keep working.
   ===================================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

.pg-cut, .game-card, .pg-tile, .pg-cat, .pg-panel, .pg-btn, .pg-pill, .pg-field input, .pg-field select, .pg-field textarea, .pg-tcard, .pg-format, .pg-drop, .pg-verdict, .pg-search input {
    clip-path: polygon(
        0 calc(var(--s) * 3), var(--s) calc(var(--s) * 3), var(--s) calc(var(--s) * 2), calc(var(--s) * 2) calc(var(--s) * 2), calc(var(--s) * 2) var(--s), calc(var(--s) * 3) var(--s), calc(var(--s) * 3) 0,
        calc(100% - var(--s) * 3) 0, calc(100% - var(--s) * 3) var(--s), calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s) * 2) calc(var(--s) * 2), calc(100% - var(--s)) calc(var(--s) * 2), calc(100% - var(--s)) calc(var(--s) * 3), 100% calc(var(--s) * 3),
        100% calc(100% - var(--s) * 3), calc(100% - var(--s)) calc(100% - var(--s) * 3), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s) * 2) calc(100% - var(--s) * 2), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 3) calc(100% - var(--s)), calc(100% - var(--s) * 3) 100%,
        calc(var(--s) * 3) 100%, calc(var(--s) * 3) calc(100% - var(--s)), calc(var(--s) * 2) calc(100% - var(--s)), calc(var(--s) * 2) calc(100% - var(--s) * 2), var(--s) calc(100% - var(--s) * 2), var(--s) calc(100% - var(--s) * 3), 0 calc(100% - var(--s) * 3));
}
.pg-cut, .pg-tile, .pg-panel, .pg-tcard, .pg-format, .pg-drop, .pg-verdict { --s: 4px; }
.pg-cat, .pg-btn, .pg-pill, .pg-field input, .pg-field select, .pg-field textarea, .pg-search input { --s: 2px; }

/* ---- shelves (section headers with an action on the right) ---- */
.pg-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.pg-shelf-head h2 { font-size: 1.4rem; color: #fff; line-height: 1.2; }
.pg-shelf-head p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin-top: 6px; max-width: 62ch; }
.pg-link { color: var(--neon-cyan); font-weight: 600; font-size: 0.88rem; padding: 6px 0; border-bottom: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.pg-link:hover { border-bottom-color: var(--neon-cyan); }
.pg-muted { color: var(--text-muted); }
.pg-hidden { display: none !important; }

/* ---- featured rail ---- */
.pg-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pg-tile { flex: 0 0 clamp(230px, 24vw, 310px); aspect-ratio: 16 / 10; position: relative; display: block; background: #0c0f18; border: 1px solid var(--glass-border); scroll-snap-align: start; overflow: hidden; }
.pg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.35s ease; }
.pg-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 8, 13, 0.92) 8%, rgba(6, 8, 13, 0) 62%); }
.pg-tile:hover img, .pg-tile:focus-visible img { transform: scale(1.05); }
.pg-tile-info { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.pg-tile-info b { display: block; font-family: 'Space Grotesk', sans-serif; color: #fff; font-size: 1.05rem; line-height: 1.25; }
.pg-tile-info span { font-size: 0.78rem; color: var(--neon-cyan); font-weight: 600; }
.pg-tile:hover { border-color: var(--neon-cyan); }

/* ---- category tiles ---- */
.pg-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pg-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--glass-border); color: #e2e8f0; text-align: left; font-weight: 600; font-size: 0.92rem; transition: background 0.2s ease, border-color 0.2s ease; }
.pg-cat i { font-size: 1.1rem; color: var(--neon-cyan); width: 22px; text-align: center; flex-shrink: 0; }
.pg-cat small { display: block; font-size: 0.74rem; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.pg-cat:hover { background: rgba(255, 255, 255, 0.07); }
.pg-cat[aria-pressed="true"] { background: rgba(var(--neon-accent-rgb), 0.24); border-color: var(--neon-accent); color: #fff; }

/* ---- search + games toolbar ---- */
.pg-toolbar { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; max-width: 1300px; margin-bottom: 18px; }
.pg-search { position: relative; flex: 1 1 240px; max-width: 380px; }
.pg-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; pointer-events: none; z-index: 1; }
.pg-search input { width: 100%; background: #0a0d15; border: 1px solid var(--glass-border); padding: 11px 14px 11px 38px; font-size: 0.9rem; color: #fff; outline: none; }
.pg-search input:focus-visible { box-shadow: inset 0 0 0 2px var(--neon-cyan); }
.pg-count { color: var(--text-muted); font-size: 0.85rem; }

/* ---- community cards (reuse .game-card) ---- */
.pg-badge { position: absolute; top: 8px; left: 8px; z-index: 4; background: rgba(4, 4, 8, 0.82); color: #e2e8f0; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border: 1px solid var(--glass-border); }
.pg-badge.t { left: auto; right: 8px; color: #04121a; background: var(--neon-cyan); border-color: transparent; }
.pg-thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', cursive; font-size: 2rem; color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, rgba(var(--neon-accent-rgb), 0.55), #0c0f18); }
.pg-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 34px 16px; font-size: 0.92rem; line-height: 1.7; border: 1px dashed var(--glass-border); }
.pg-empty a { color: var(--neon-cyan); font-weight: 600; }

/* ---- generic controls ---- */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-weight: 700; font-size: 0.88rem; background: rgba(255, 255, 255, 0.07); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.pg-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); }
.pg-btn.primary { background: var(--neon-cyan); color: #04121a; border-color: transparent; }
.pg-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.pg-btn.danger { color: #fca5a5; }
.pg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pg-btn.sm { padding: 7px 12px; font-size: 0.8rem; }
.pg-btn:focus-visible, .pg-cat:focus-visible, .pg-tab:focus-visible, .pg-tile:focus-visible, .pg-drop:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.pg-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 0.74rem; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.pg-pill.live { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.pg-pill.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: pgPulse 1.6s ease-in-out infinite; }
.pg-pill.upcoming { background: rgba(var(--neon-accent-rgb), 0.28); color: #fff; }
.pg-pill.done { background: rgba(148, 163, 184, 0.16); color: var(--text-muted); }
.pg-pill.warn { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.pg-pill.ok { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.pg-pill.bad { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
@keyframes pgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- panels + forms ---- */
.pg-panel { background: rgba(13, 15, 24, 0.86); border: 1px solid var(--glass-border); padding: 24px; }
.pg-panel + .pg-panel { margin-top: 16px; }
.pg-panel h3 { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.pg-panel > p, .pg-note { color: var(--text-muted); font-size: 0.88rem; line-height: 1.65; }
.pg-note { margin-top: 10px; }
.pg-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.pg-field { display: flex; flex-direction: column; gap: 6px; }
.pg-field label { font-size: 0.82rem; font-weight: 600; color: #cbd5e1; }
.pg-field input, .pg-field select, .pg-field textarea { background: #0a0d15; border: 1px solid var(--glass-border); padding: 10px 12px; font-size: 0.9rem; color: #fff; outline: none; width: 100%; }
.pg-field input:focus-visible, .pg-field select:focus-visible, .pg-field textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--neon-cyan); }
.pg-field textarea { resize: vertical; min-height: 70px; }
.pg-field small { color: var(--text-muted); font-size: 0.76rem; }
.pg-check-inline { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: #cbd5e1; line-height: 1.5; }
.pg-check-inline input { margin-top: 3px; accent-color: var(--neon-cyan); }
.pg-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 32px 18px; border: 1px dashed rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.025); color: #cbd5e1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.pg-drop i { font-size: 1.8rem; color: var(--neon-cyan); }
.pg-drop b { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
.pg-drop span { font-size: 0.85rem; color: var(--text-muted); }
.pg-drop.over, .pg-drop:hover { background: rgba(var(--neon-accent-rgb), 0.16); border-color: var(--neon-cyan); }
.pg-drop input { display: none; }

/* ---- publish: steps + game check ---- */
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.pg-steps { list-style: none; counter-reset: pgs; display: flex; flex-direction: column; gap: 14px; }
.pg-steps li { counter-increment: pgs; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.pg-steps li::before { content: counter(pgs); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: 'Press Start 2P', cursive; font-size: 0.7rem; color: #04121a; background: var(--neon-cyan); }
.pg-steps b { color: #fff; display: block; font-size: 0.98rem; }
.pg-steps span { color: var(--text-muted); font-size: 0.86rem; line-height: 1.55; }
.pg-checks { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 14px 0; }
.pg-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); font-size: 0.9rem; align-items: start; }
.pg-checks .g { font-weight: 800; text-align: center; }
.pg-checks .pass .g { color: #34d399; } .pg-checks .warn .g { color: #fbbf24; } .pg-checks .fail .g { color: #f87171; } .pg-checks .info .g { color: var(--text-muted); }
.pg-checks small { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; overflow-wrap: anywhere; line-height: 1.5; }
.pg-verdict { padding: 14px 18px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; margin-top: 14px; }
.pg-verdict.ok { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.pg-verdict.warn { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.pg-verdict.bad { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.pg-verdict small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.82rem; margin-top: 3px; opacity: 0.9; }
.pg-progress { height: 8px; background: rgba(255, 255, 255, 0.08); margin: 12px 0; overflow: hidden; }
.pg-progress i { display: block; height: 100%; width: 0; background: var(--neon-cyan); transition: width 0.25s ease; }
.pg-mine { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pg-mine li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); font-size: 0.9rem; }

/* ---- tabs, tournaments ---- */
.pg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.pg-tab { padding: 9px 16px; font-weight: 600; font-size: 0.88rem; color: var(--text-muted); border-bottom: 2px solid transparent; background: none; }
.pg-tab:hover { color: #fff; }
.pg-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--neon-cyan); }
.pg-tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.pg-tcard { background: rgba(13, 15, 24, 0.86); border: 1px solid var(--glass-border); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pg-tcard h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; color: #fff; line-height: 1.3; }
.pg-tcard dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.84rem; margin: 0; }
.pg-tcard dt { color: var(--text-muted); }
.pg-tcard dd { color: #e2e8f0; margin: 0; overflow-wrap: anywhere; }
.pg-tcard .pg-row { margin-top: auto; padding-top: 6px; }
.pg-tdetail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
.pg-tablewrap { overflow-x: auto; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 420px; }
.pg-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 0.78rem; padding: 8px 10px; border-bottom: 1px solid var(--glass-border); }
.pg-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #e2e8f0; overflow-wrap: anywhere; }
.pg-table tr.me td { background: rgba(var(--neon-accent-rgb), 0.16); }
.pg-code { background: #07090f; border: 1px solid var(--glass-border); padding: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; color: #a7f3d0; overflow-x: auto; white-space: pre; line-height: 1.6; margin: 10px 0; }
.pg-cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 22px; }
.pg-cols3 .pg-panel { margin: 0; padding: 18px; }
.pg-cols3 h3 { font-size: 0.98rem; }

/* ---- play overlay (tournaments) ---- */
.pg-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(3, 3, 6, 0.96); display: flex; flex-direction: column; }
.pg-overlay-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.pg-overlay-bar b { color: #fff; font-family: 'Space Grotesk', sans-serif; }
.pg-overlay iframe { flex: 1; width: 100%; border: 0; background: #000; }
.pg-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100001; background: #0c0f18; color: #fff; border: 1px solid var(--neon-cyan); padding: 10px 18px; font-size: 0.88rem; max-width: 92vw; }

/* ---- creator lab ---- */
.pg-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.pg-format { background: rgba(13, 15, 24, 0.86); border: 1px solid var(--glass-border); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pg-format i { font-size: 1.4rem; color: var(--neon-cyan); }
.pg-format h3 { font-size: 1rem; color: #fff; }
.pg-format p { color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; }
.pg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pg-chips span { font-size: 0.72rem; padding: 2px 8px; background: rgba(255, 255, 255, 0.07); color: #cbd5e1; }
.pg-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pg-preview { background: repeating-conic-gradient(#141826 0% 25%, #0d1019 0% 50%) 50% / 20px 20px; min-height: 220px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--glass-border); overflow: hidden; }
.pg-preview canvas, .pg-preview img { max-width: 100%; max-height: 360px; display: block; }
.pg-status-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pg-status-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255, 255, 255, 0.03); font-size: 0.88rem; flex-wrap: wrap; }
.pg-status-list span:first-child { color: #e2e8f0; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .pg-split, .pg-tdetail, .pg-tool { grid-template-columns: 1fr; }
    .pg-shelf-head h2 { font-size: 1.2rem; }
}
@media (max-width: 560px) {
    .portfolio-section { padding: 0 4%; margin-top: 52px; }
    .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .card-info { padding: 10px 12px 12px; }
    .card-title { font-size: 0.92rem; }
    .pg-panel { padding: 16px; }
    .pg-tile { flex-basis: 74vw; }
    .pg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-tlist { grid-template-columns: 1fr; }
    .pg-toolbar { flex-direction: column; align-items: stretch; }
    .pg-search { max-width: none; }
}

/* ---- calmer on phones / when asked: the aurora blobs are the heaviest paint on the page ---- */
@media (max-width: 768px) { .aurora-blob { animation: none; filter: blur(90px); } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aurora-blob { animation: none; }
    .pg-pill.live::before { animation: none; }
    .pg-tile img { transition: none; }
}

/* ---- tournaments: single-elimination bracket ---- */
.br-head .br-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; color: #fff; margin: 10px 0 12px; line-height: 1.25; overflow-wrap: anywhere; }
.br-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.br-facts dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.br-facts dd { margin: 2px 0 0; color: #e2e8f0; font-weight: 600; overflow-wrap: anywhere; }
.br-desc { margin-top: 14px; color: #cbd5e1; font-size: 0.92rem; line-height: 1.6; overflow-wrap: anywhere; }
.br-panels, .br-wrap, .br-champion { margin-top: 20px; }
.br-count { margin: 6px 0 12px; color: #cbd5e1; }
.br-count b { font-size: 1.3rem; color: var(--neon-cyan); }
.br-players { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.br-players li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.04); font-size: 0.88rem; }
.br-players .br-pname { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #e2e8f0; }
.br-players em { color: var(--neon-cyan); font-style: normal; font-size: 0.78rem; }
.br-seed { width: 24px; text-align: center; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; }

.br-champion { text-align: center; padding: 26px 18px; border: 1px solid rgba(251, 191, 36, 0.5); background: radial-gradient(ellipse at top, rgba(251, 191, 36, 0.16), rgba(13, 15, 24, 0.9) 70%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.br-champion i { font-size: 2.4rem; color: #fbbf24; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5)); }
.br-champion small { font-family: 'Press Start 2P', cursive; font-size: 0.66rem; letter-spacing: 0.08em; color: #fcd34d; text-transform: uppercase; line-height: 1.6; }
.br-champion strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; color: #fff; overflow-wrap: anywhere; }
.br-champion span { color: #cbd5e1; font-size: 0.88rem; }

.br-hint { display: none; margin: 8px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.br-scroll { --br-w: 216px; --br-gap: 60px; --br-line: rgba(148, 163, 184, 0.45); overflow-x: auto; overflow-y: hidden; margin-top: 14px; padding: 4px 4px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.br-cols { display: flex; gap: var(--br-gap); align-items: stretch; width: max-content; min-width: 100%; }
.br-round { width: var(--br-w); flex: 0 0 var(--br-w); display: flex; flex-direction: column; }
.br-rtitle { text-align: center; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neon-cyan); padding: 0 0 10px; }
.br-col { flex: 1; display: flex; flex-direction: column; }
.br-slot { flex: 1; display: flex; align-items: center; position: relative; padding: 8px 0; min-height: 98px; }
/* connector lines: a stub into the next match, and a vertical join between each pair of feeders */
.br-slot::after { content: ''; position: absolute; left: 100%; width: calc(var(--br-gap) / 2); pointer-events: none; }
.br-slot.br-top::after { top: 50%; bottom: 0; border-top: 2px solid var(--br-line); border-right: 2px solid var(--br-line); }
.br-slot.br-bot::after { top: 0; bottom: 50%; border-bottom: 2px solid var(--br-line); border-right: 2px solid var(--br-line); }
.br-slot.br-final::after { top: 50%; border-top: 2px solid var(--br-line); }
.br-slot.br-in::before { content: ''; position: absolute; right: 100%; width: calc(var(--br-gap) / 2); top: 50%; border-top: 2px solid var(--br-line); pointer-events: none; }

.br-match { width: 100%; background: rgba(13, 15, 24, 0.92); border: 1px solid var(--glass-border); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.br-match:hover { border-color: rgba(var(--neon-accent-rgb), 0.7); }
.br-match:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.br-match.sel { border-color: var(--neon-cyan); box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 16px rgba(56, 189, 248, 0.25); }
.br-match.st-ready { border-color: rgba(56, 189, 248, 0.5); }
.br-match.st-bye { border-style: dashed; opacity: 0.75; }
.br-match.st-waiting { opacity: 0.85; }
.br-mh { display: flex; justify-content: space-between; padding: 3px 10px; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); }
.br-match.st-done .br-mh span:last-child { color: #6ee7b7; }
.br-match.st-ready .br-mh span:last-child { color: var(--neon-cyan); }
.br-p { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; font-size: 0.86rem; color: #e2e8f0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.br-p .br-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-p .br-s { min-width: 22px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.br-p.win { font-weight: 700; color: #fff; background: rgba(52, 211, 153, 0.12); box-shadow: inset 3px 0 0 #34d399; }
.br-p.win .br-s { color: #6ee7b7; }
.br-p.lose { color: var(--text-muted); }
.br-p.empty .br-n { color: #64748b; font-style: italic; }

.br-champ-col .br-rtitle { color: #fbbf24; }
.br-cbox { width: 100%; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed rgba(251, 191, 36, 0.45); color: #64748b; font-weight: 700; text-align: center; padding: 0 8px; overflow-wrap: anywhere; }
.br-cbox i { color: rgba(251, 191, 36, 0.5); font-size: 1.3rem; }
.br-cbox.has { border-style: solid; border-color: #fbbf24; color: #fff; background: rgba(251, 191, 36, 0.1); }
.br-cbox.has i { color: #fbbf24; }

.br-mlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.br-mlist li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); color: #e2e8f0; }
.br-mlist li.win { background: rgba(52, 211, 153, 0.12); box-shadow: inset 3px 0 0 #34d399; color: #fff; font-weight: 700; }
.br-mlist li i { color: #fbbf24; margin-left: 6px; }
.br-winner { margin-top: 10px; color: #cbd5e1; font-size: 0.9rem; }
.br-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-border); max-width: 520px; }

@media (max-width: 700px) {
    .br-scroll { --br-w: 184px; --br-gap: 44px; }
    .br-hint { display: block; }
    .br-head .br-title { font-size: 1.2rem; }
    .br-champion strong { font-size: 1.4rem; }
}

/* Trending: 5 games that always fit - no sideways scrolling.
   Desktop: one row of 5. Tablet: 2 large + 3 small. Phone: 1 large + 2 + 2. */
#featured-strip.pg-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; overflow: visible; scroll-snap-type: none; padding: 2px 0 6px; }
#featured-strip .pg-tile { flex: none; width: 100%; min-width: 0; }
#featured-strip .pg-tile-info b { font-size: clamp(0.85rem, 1.15vw, 1.02rem); }
@media (max-width: 1000px) {
    #featured-strip.pg-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #featured-strip .pg-tile { grid-column: span 2; }
    #featured-strip .pg-tile:nth-child(-n+2) { grid-column: span 3; }
    #featured-strip .pg-tile-info b { font-size: 0.95rem; }
}
@media (max-width: 560px) {
    #featured-strip.pg-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #featured-strip .pg-tile, #featured-strip .pg-tile:nth-child(-n+2) { grid-column: span 1; }
    #featured-strip .pg-tile:first-child { grid-column: span 2; }
    #featured-strip .pg-tile-info { left: 10px; right: 10px; bottom: 8px; }
    #featured-strip .pg-tile-info b { font-size: 0.88rem; }
}

/* Community bug report box */
.pg-bugbox { margin-top: 26px; border: 1px solid rgba(148,163,184,0.25); background: rgba(255,255,255,0.03); border-radius: 16px; padding: 18px 20px; }
.pg-bugbox h3 { color: #fff; font-size: 1.05rem; margin: 0 0 6px; } .pg-bugbox h3 i { color: #f87171; }
.pg-bugbox p { color: #94a3b8; font-size: 0.9rem; margin: 0 0 12px; }
.pg-bugbox input, .pg-bugbox textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.3); background: #0b1020; color: #fff; font: inherit; font-size: 0.95rem; margin-bottom: 10px; resize: vertical; }
.pg-bugbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pg-bugbox-row span { color: #94a3b8; font-size: 0.88rem; }
.pg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Welcome message */
.pg-welcome { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 9999;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9); color: #fff; padding: 12px 20px; border-radius: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: all .35s ease; max-width: calc(100% - 32px); text-align: center; }
.pg-welcome.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Live activity feed (home page, under Trending) */
.pg-live { margin-top: 22px; border: 1px solid rgba(56,189,248,0.3); background: rgba(56,189,248,0.05); border-radius: 16px; padding: 16px 18px; }
.pg-live-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pg-live-head h3 { color: #fff; font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: 8px; }
#live-playing { color: #34d399; font-weight: 700; font-size: 0.9rem; }
.pg-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pgPulse 1.8s infinite; display: inline-block; }
@keyframes pgPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
#live-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
#live-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(148,163,184,0.12); color: #e2e8f0; font-size: 0.93rem; }
#live-list li:last-child { border-bottom: 0; }
#live-list li small { color: #64748b; white-space: nowrap; }
.pg-live-note { color: #64748b; font-size: 0.78rem; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .pg-live-dot { animation: none; } }

/* Custom Merch Studio */
#merch-studio-section { margin-bottom: 40px; }
.mg-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 860px) { .mg-steps { grid-template-columns: 1fr; } }
.mg-card { border: 1px solid rgba(148,163,184,0.25); background: rgba(255,255,255,0.03); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; color: #cbd5e1; }
.mg-card h3 { color: #fff; font-size: 1.05rem; margin: 0 0 10px; }
.mg-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.mg-opt { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.3); background: rgba(255,255,255,0.04); color: #e2e8f0; cursor: pointer; font: inherit; font-weight: 600; }
.mg-opt[aria-pressed="true"] { border-color: var(--neon-cyan, #38bdf8); background: rgba(56,189,248,0.14); }
.mg-opt i { color: var(--neon-cyan, #38bdf8); }
.mg-ai { margin-top: 14px; display: grid; gap: 8px; }
.mg-ai textarea, .mg-grid input, .mg-grid select, .mg-card select { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.3); background: #0b1020; color: #fff; font: inherit; }
.mg-msg { font-size: 0.9rem; color: #34d399; min-height: 1em; margin: 10px 0 0; } .mg-msg.bad { color: #f87171; }
.mg-rules { font-size: 0.82rem; color: #64748b; margin: 10px 0 0; }
#mg-canvas { width: 100%; max-width: 420px; aspect-ratio: 1; display: block; margin: 10px auto; border-radius: 12px; }
.mg-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(148,163,184,0.5); cursor: pointer; }
.mg-swatch[aria-pressed="true"] { outline: 3px solid var(--neon-cyan, #38bdf8); outline-offset: 2px; }
.mg-inline { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; font-size: 0.9rem; }
.mg-inline select { width: auto; }
.mg-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.mg-grid label { display: grid; gap: 5px; font-size: 0.88rem; } .mg-grid .mg-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .mg-grid { grid-template-columns: 1fr; } }
.mg-order { padding: 8px 0; border-bottom: 1px solid rgba(148,163,184,0.12); font-size: 0.92rem; }
#merch-studio [hidden] { display: none !important; }

/* =====================================================================================
   CYBERPUNK NEON (Design 3) - applied to every page.
   5 colour themes (dots in the header): neon (default), cyan, toxic, inferno, gold.
   Everything below uses --pg-a (main), --pg-b (second), --pg-c (small accent); the older
   variables (--neon-cyan / --neon-purple / --neon-accent) are mapped onto them.
   ===================================================================================== */
body, body.theme-neon { --pg-a: #ff2e88; --pg-a-rgb: 255, 46, 136; --pg-b: #a855f7; --pg-b-rgb: 168, 85, 247; --pg-c: #22d3ee; }
body.theme-cyan    { --pg-a: #22d3ee; --pg-a-rgb: 34, 211, 238;  --pg-b: #3b82f6; --pg-b-rgb: 59, 130, 246;  --pg-c: #f0abfc; }
body.theme-toxic   { --pg-a: #a3e635; --pg-a-rgb: 163, 230, 53;  --pg-b: #14b8a6; --pg-b-rgb: 20, 184, 166;  --pg-c: #facc15; }
body.theme-inferno { --pg-a: #ff6b1a; --pg-a-rgb: 255, 107, 26;  --pg-b: #ef4444; --pg-b-rgb: 239, 68, 68;   --pg-c: #fde047; }
body.theme-gold    { --pg-a: #fbbf24; --pg-a-rgb: 251, 191, 36;  --pg-b: #c084fc; --pg-b-rgb: 192, 132, 252; --pg-c: #f472b6; }
body { --neon-cyan: var(--pg-c); --neon-purple: var(--pg-b); --neon-accent: var(--pg-a); --neon-accent-rgb: var(--pg-a-rgb);
       --bg-base: #07060b; --text-main: #ece6ff; --text-muted: #b9aedb; --cy-panel: #0d0a16; --cy-line: #2e2350; --cy-ink: #0b0414; --cy-side: 236px; }

body {
    font-family: 'Chakra Petch', 'Space Grotesk', sans-serif;
    background-color: #07060b;
    background-image: linear-gradient(rgba(var(--pg-b-rgb), .07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--pg-b-rgb), .07) 1px, transparent 1px);
    background-size: 48px 48px;
}
.blob1, .blob2 { opacity: .10 !important; }
h1, h2, h3, .pixel-font, .portfolio-section-title { font-family: 'Chakra Petch', sans-serif !important; letter-spacing: .5px; }
.portfolio-section-title, .pg-shelf-head h2 { text-transform: uppercase; color: #fff; }
.portfolio-section-title::after, .pg-shelf-head h2::after { content: '_'; color: var(--pg-a); }
a { color: inherit; }
::selection { background: var(--pg-a); color: var(--cy-ink); }
#scroll-progress { background: linear-gradient(90deg, var(--pg-a), var(--pg-b)); }

/* ---------- Logo: animated gauntlet + PIXELGAUNT ---------- */
.logo.pg-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; text-shadow: none; font-size: 1rem; }
.logo.pg-logo:hover { transform: none; }
.pg-logo-anim { width: 52px; height: 52px; flex: 0 0 52px; background: url('logo-anim.png') 0 0 / 468px 52px no-repeat; animation: pgLogoAnim 1.35s steps(9) infinite; }
@keyframes pgLogoAnim { to { background-position: -468px 0; } }
.pg-logo-text { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 1px; color: #fff; line-height: 1; }
.pg-logo-text b { color: var(--pg-a); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pg-logo-anim { animation: none; } }

/* ---------- Header: left sidebar on desktop, top bar on phones/tablets ---------- */
header#main-header { background: rgba(13, 10, 22, .96); border-bottom: 1px solid rgba(var(--pg-a-rgb), .35); box-shadow: none; }
.nav-menu-links a { border-radius: 0; color: #ddd3ff; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .86rem; }
.nav-menu-links a:hover { color: #fff; background: rgba(var(--pg-a-rgb), .10); }
.nav-menu-links a[style*="color:#fff"], .nav-menu-links a[style*="color: #fff"] { background: var(--pg-a); color: var(--cy-ink) !important; clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%); }
#nav-admin-link { color: var(--pg-c) !important; }
@media (min-width: 1101px) {
    body { padding-left: var(--cy-side); }
    header#main-header, header#main-header.scrolled {
        position: fixed; top: 0; left: 0; bottom: 0; width: var(--cy-side); box-sizing: border-box;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px;
        padding: 26px 18px; border-bottom: 0; border-right: 1px solid rgba(var(--pg-a-rgb), .35); overflow-y: auto; z-index: 1000;
    }
    header#main-header .pg-logo { flex-direction: column; align-items: flex-start; gap: 8px; }
    header#main-header .pg-logo-anim { width: 76px; height: 76px; flex-basis: 76px; background-size: 684px 76px; animation-name: pgLogoAnimL; }
    @keyframes pgLogoAnimL { to { background-position: -684px 0; } }
    .nav-links { flex-direction: column; align-items: stretch; gap: 16px; flex: 1; }
    .nav-menu-links { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
    .nav-menu-links a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-left: 2px solid var(--cy-line); }
    .theme-select-container { align-self: flex-start; }
    .pg-donate-btn { align-self: stretch; justify-content: center; }
    #main-login-btn { margin-top: auto; }
}

/* ---------- 5 theme dots ---------- */
.theme-select-container { background: rgba(0, 0, 0, .35); border: 1px solid var(--cy-line); border-radius: 0; padding: 6px 8px; gap: 2px; }
button.theme-dot { appearance: none; padding: 0; width: 20px; height: 20px; border-radius: 0; margin: 0 3px; cursor: pointer; border: 2px solid transparent; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); }
.theme-dot.t-neon { background: #ff2e88; } .theme-dot.t-cyan { background: #22d3ee; } .theme-dot.t-toxic { background: #a3e635; }
.theme-dot.t-inferno { background: #ff6b1a; } .theme-dot.t-gold { background: #fbbf24; }
.theme-dot.active { border-color: #fff; transform: scale(1.18); }
.theme-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Buttons: angled cut corners ---------- */
.nav-btn.primary, #main-login-btn, .pg-btn.primary, .action-btn.primary-action, .cy-btn-primary {
    background: var(--pg-a) !important; color: var(--cy-ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.nav-btn.primary:hover, #main-login-btn:hover, .pg-btn.primary:hover, .cy-btn-primary:hover { filter: brightness(1.1); transform: none; }
.pg-btn, .action-btn, .nav-btn { border-radius: 0 !important; }
.pg-btn:not(.primary):not(.danger) { border: 1px solid rgba(var(--pg-b-rgb), .6); color: #ece6ff; background: rgba(var(--pg-b-rgb), .08); }
.pg-donate-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--pg-c) !important; border: 1px solid var(--pg-c) !important; background: transparent; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.pg-donate-btn:hover { background: rgba(255, 255, 255, .06) !important; }
.pg-link { color: var(--pg-a) !important; }

/* ---------- Cards and panels: cut corner + neon edge ---------- */
.game-card, .pg-tile, .pg-panel, .plan-card, .pg-tcard, .coming-soon-card, .pg-live, .pg-bugbox, .mg-card, .pg-format, .detail-section, .cs-stat, .cs-rev-box, .past-project-card {
    border-radius: 0 !important; border-color: var(--cy-line) !important; background-color: var(--cy-panel);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.game-card:hover, .pg-tile:hover { border-color: var(--pg-a) !important; }
.pg-live { border-color: rgba(var(--pg-a-rgb), .45) !important; background: rgba(13, 10, 22, .9); }
.pg-live-dot { background: var(--pg-a); }
#live-playing { color: var(--pg-c); }
.pg-pill { border-radius: 0 !important; }
input, select, textarea { border-radius: 0 !important; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pg-a) !important; box-shadow: 0 0 0 1px var(--pg-a); }
.modal-content { border-radius: 0 !important; border: 1px solid rgba(var(--pg-a-rgb), .5) !important; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }

/* ---------- Home hero (Design 3) ---------- */
.premium-hero.cy-hero { display: grid; grid-template-columns: 5fr 6fr; align-items: center; gap: 0; max-width: 1360px; margin: 0 auto; padding: 46px clamp(18px, 3.5vw, 56px) 30px; min-height: 600px; box-sizing: border-box; }
.cy-hero-text { position: relative; z-index: 2; margin-right: -110px; }
.cy-tag { display: inline-block; transform: rotate(-3deg); background: var(--pg-b); color: var(--cy-ink); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 13px; letter-spacing: 2px; padding: 6px 12px; }
.cy-title { margin: 22px 0 0; font-weight: 700; line-height: .86; font-size: clamp(60px, 8vw, 128px); letter-spacing: -2px; }
.cy-title span { display: block; color: #fff; }
.cy-title .cy-outline { -webkit-text-stroke: 2px var(--pg-a); color: transparent; padding-left: 60px; }
.cy-title .cy-accent { color: var(--pg-a); }
.cy-title-sm { font-size: clamp(48px, 6.5vw, 96px); }
.cy-desc { max-width: 460px; font-size: 18px; line-height: 1.6; color: #cfc4f2; margin: 24px 0 0; background: rgba(7, 6, 11, .72); padding: 4px 0; }
.cy-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cy-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; text-decoration: none; font-weight: 700; letter-spacing: 2px; font-size: 15px; text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.cy-btn-ghost { background: #1a0f2e; color: #f3e8ff; border: 1px solid var(--pg-b); }
.cy-btn-ghost:hover { background: rgba(var(--pg-b-rgb), .25); }
.cy-status { margin: 20px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--pg-c); }
.cy-hero-art { position: relative; z-index: 1; }
.cy-hero-img { display: block; width: 100%; height: 540px; object-fit: cover; object-position: 40% center; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.cy-line { position: absolute; height: 3px; }
.cy-line-a { left: 6%; top: -14px; width: 40%; background: var(--pg-a); }
.cy-line-b { right: 12%; bottom: -14px; width: 30%; background: var(--pg-c); }
.cy-emblem { position: absolute; right: 2%; top: 26px; width: 128px; height: 128px; object-fit: contain; }
.cy-soon { max-width: 900px; margin: 30px auto 60px; padding: 40px 0; }

/* ---------- Trending: staggered angled cards (desktop) ---------- */
@media (min-width: 1001px) {
    #featured-strip.pg-rail { align-items: start; }
    #featured-strip .pg-tile:nth-child(2) { margin-top: 56px; } #featured-strip .pg-tile:nth-child(3) { margin-top: 18px; }
    #featured-strip .pg-tile:nth-child(4) { margin-top: 74px; } #featured-strip .pg-tile:nth-child(5) { margin-top: 34px; }
}
#featured-strip .pg-tile { border: 2px solid var(--cy-line) !important; }
#featured-strip .pg-tile:nth-child(1) { border-color: var(--pg-a) !important; }
#featured-strip .pg-tile:nth-child(2) { border-color: var(--pg-b) !important; }

/* ---------- Footer + ways to pay ---------- */
footer { border-top: 1px solid rgba(var(--pg-a-rgb), .3); }
.pg-paystrip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 14px 16px 22px; }
.pg-pay-label { width: 100%; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #8c80b3; margin-bottom: 2px; }
.pg-pay { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #ddd3ff; background: #120c20; border: 1px solid var(--cy-line);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.pg-pay i { color: var(--pg-c); }
.pg-pay-visa { font-style: italic; font-weight: 800; letter-spacing: 1px; color: #fff; background: #1a1f71; }

/* ---------- Donate window ---------- */
.pg-donate-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(4, 2, 10, .78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pg-donate-box { position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: var(--cy-panel); border: 1px solid rgba(var(--pg-a-rgb), .5); padding: 26px 24px; color: #ece6ff;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.pg-donate-box h3 { margin: 0 0 8px; font-size: 1.4rem; color: #fff; } .pg-donate-box h3 i { color: var(--pg-a); }
.pg-don-sub { color: #b9aedb; margin: 0 0 16px; line-height: 1.55; }
.pg-don-acc { border: 1px solid var(--cy-line); background: #120c20; padding: 12px 14px; margin-bottom: 10px; }
.pg-don-acc b { color: #fff; } .pg-don-acc a { color: var(--pg-a); }
.pg-don-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 6px; font-size: .92rem; color: #cfc4f2; word-break: break-all; }
.pg-don-copy { flex: none; min-height: 32px; padding: 0 12px; background: transparent; border: 1px solid var(--pg-b); color: #ece6ff; cursor: pointer; }
.pg-don-note { font-size: .82rem; color: #8c80b3; margin: 10px 0 0; }
.pg-donate-x { position: absolute; right: 12px; top: 8px; width: 44px; height: 44px; background: none; border: 0; color: #b9aedb; font-size: 1.8rem; cursor: pointer; }

/* ---------- Phones / tablets ---------- */
@media (max-width: 1100px) {
    header#main-header { padding: 10px 4%; }
    .pg-logo-text { font-size: 1.1rem; }
    .nav-links { background: rgba(13, 10, 22, .98) !important; }
    .pg-donate-btn { justify-content: center; margin: 4px 0; }
}
@media (max-width: 900px) {
    .premium-hero.cy-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 26px; }
    .cy-hero-text { margin-right: 0; }
    .cy-title .cy-outline { padding-left: 0; }
    .cy-hero-art { order: -1; margin-bottom: 18px; }
    .cy-hero-img { height: 260px; }
    .cy-emblem { width: 84px; height: 84px; top: 12px; }
}
.pg-welcome { background: var(--pg-a) !important; color: var(--cy-ink) !important; border-radius: 0 !important; box-shadow: none !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }

/* ---------- Hand logo (replaces the animated frames) ---------- */
.pg-logo-hand { width: 46px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 0 8px rgba(56, 189, 248, .45)); }
@media (min-width: 1101px) { header#main-header .pg-logo-hand { width: 96px; } }

/* ---------- Trending: taller (portrait) cards ---------- */
#featured-strip .pg-tile { aspect-ratio: 3 / 4; }
#featured-strip .pg-tile img { object-position: center center; }

/* ---------- Account / payment icons ---------- */
.pg-pay-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 34px; background: #ffffff; padding: 3px 6px; box-sizing: border-box;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.pg-pay-ico img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pg-don-acc { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: start; }
.pg-don-acc > img { width: 44px; height: 44px; object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; grid-row: span 4; }
.pg-don-gate { text-align: center; padding: 10px 0 4px; }
.pg-don-gate .cy-btn { margin-top: 12px; }
.pg-don-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--cy-line); display: grid; gap: 10px; }
.pg-don-form h4 { margin: 0; color: #fff; font-size: 1.05rem; }
.pg-don-form label { display: grid; gap: 4px; font-size: .88rem; color: #cfc4f2; }
.pg-don-form input, .pg-don-form select, .pg-don-form textarea { padding: 10px 12px; background: #07060b; border: 1px solid var(--cy-line); color: #fff; font: inherit; }
.pg-don-msg { min-height: 1em; font-size: .9rem; color: #34d399; margin: 0; } .pg-don-msg.bad { color: #f87171; }
.pg-don-mine { font-size: .85rem; color: #b9aedb; }
.pay-method img { width: 28px; height: 22px; object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; }
.pay-acc-ico { width: 34px; height: 34px; object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; vertical-align: middle; margin-right: 8px; }

/* ---------- Community game: likes, share, comments ---------- */
.pg-social { max-width: 960px; margin: 18px auto 30px; padding: 0 5%; }
.pg-social-bar { display: flex; gap: 10px; flex-wrap: wrap; }
#pg-like-btn[aria-pressed="true"] { background: var(--pg-a) !important; color: var(--cy-ink) !important; border-color: var(--pg-a) !important; }
.pg-social-h { color: #fff; font-size: 1.1rem; margin: 22px 0 10px; text-transform: uppercase; }
.pg-comment-form { display: flex; gap: 10px; }
.pg-comment-form input { flex: 1; min-height: 44px; padding: 0 12px; background: #07060b; border: 1px solid var(--cy-line); color: #fff; font: inherit; }
.pg-comments { list-style: none; margin: 14px 0 0; padding: 0; }
.pg-comments li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cy-line); color: #ddd3ff; }
.pg-comments li p { margin: 4px 0 0; } .pg-comments small { color: #8c80b3; }
.pg-c-av { width: 36px; height: 36px; flex: 0 0 36px; object-fit: cover; background: var(--cy-line); display: inline-block; }

/* ---------- Floating live notifications ---------- */
.pg-float { position: fixed; left: calc(var(--cy-side, 0px) + 18px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900; max-width: min(380px, calc(100vw - 36px));
    display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; background: rgba(13, 10, 22, .96); border: 1px solid rgba(var(--pg-a-rgb), .55); color: #ece6ff; font-size: .9rem;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.pg-float.show { transform: none; opacity: 1; pointer-events: auto; }
.pg-float.urgent { border-color: #fbbf24; }
.pg-float-main { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.pg-float-main b { color: #fff; }
.pg-float-ico { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(var(--pg-a-rgb), .15); }
.pg-float-brand { color: #fff; font-size: 1.05rem; }
.pg-float-x { flex: none; width: 32px; height: 32px; background: none; border: 0; color: #8c80b3; font-size: 1.3rem; cursor: pointer; }
.pg-float-off { position: absolute; right: 8px; bottom: -22px; background: none; border: 0; color: #8c80b3; font-size: .7rem; cursor: pointer; text-decoration: underline; }
.pg-float.show .pg-float-off { bottom: 2px; right: 40px; }
.pg-float-bell { position: fixed; left: calc(var(--cy-side, 0px) + 18px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900; width: 40px; height: 40px; border: 1px solid var(--cy-line); background: rgba(13,10,22,.9); color: #8c80b3; cursor: pointer; }
@media (max-width: 1100px) { .pg-float, .pg-float-bell { left: 12px; } .pg-float { max-width: calc(100vw - 90px); } }
@media (prefers-reduced-motion: reduce) { .pg-float { transition: none; } }

/* ================= 2026-10-11: hero rotator, project cards, live chat, promos, game share ================= */
.premium-hero.cy-hero { position: relative; }
.cy-hero-text.cy-swap { animation: cySwapIn .55s cubic-bezier(.2,.8,.2,1); }
.cy-hero-art.cy-swap { animation: cyArtIn .6s cubic-bezier(.2,.8,.2,1); }
@keyframes cySwapIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes cyArtIn { from { opacity: 0; transform: translateX(30px) skewX(-4deg); } to { opacity: 1; transform: none; } }
.cy-hero-art { cursor: pointer; }
.cy-qmark { display: none; position: relative; width: 100%; height: 540px; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); align-items: center; justify-content: center; flex-direction: column; gap: 6px;
    background: repeating-linear-gradient(135deg, rgba(var(--pg-b-rgb), .14) 0 2px, transparent 2px 18px), radial-gradient(circle at 50% 45%, rgba(var(--pg-a-rgb), .28), #0b0414 70%); }
.cy-qmark span { font-size: clamp(140px, 18vw, 260px); line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 3px var(--pg-a); text-shadow: 0 0 40px rgba(var(--pg-a-rgb), .35); animation: cyQ 2.4s ease-in-out infinite; }
.cy-qmark small { font-family: 'IBM Plex Mono', monospace; letter-spacing: 4px; color: var(--pg-c); font-size: 12px; }
@keyframes cyQ { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.cy-hero-art.is-unknown .cy-hero-img, .cy-hero-art.is-unknown .cy-emblem { display: none; }
.cy-hero-art.is-unknown .cy-qmark { display: flex; }
.cy-btn-soon { cursor: not-allowed; opacity: .82; border: 0; font-family: inherit; }
.cy-dots { position: absolute; left: clamp(18px, 3.5vw, 56px); bottom: 6px; display: flex; gap: 8px; z-index: 3; }
.cy-dots button { width: 26px; height: 6px; border: 0; padding: 0; background: rgba(255,255,255,.18); cursor: pointer; transition: width .3s, background .3s; }
.cy-dots button[aria-selected="true"] { width: 46px; background: var(--pg-a); }
.cy-dots button:hover { background: var(--pg-c); }
/* all 5 projects as cards (hover a name / picture) */
.cy-deck { position: absolute; right: clamp(10px, 2.5vw, 40px); top: 50%; transform: translateY(-50%); width: min(720px, 58%); z-index: 6; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: rgba(9, 6, 16, .94); border: 1px solid rgba(var(--pg-a-rgb), .55); padding: 14px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.deck-open .cy-deck { opacity: 1; pointer-events: auto; }
.cy-deck-head { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 2px; color: var(--pg-c); margin-bottom: 10px; }
.cy-deck-x { background: none; border: 0; color: #cfc4f2; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.cy-deck-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cy-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0 0 10px; background: #120c20; border: 1px solid var(--cy-line); color: #ece6ff; cursor: pointer; font: inherit;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); opacity: 0; transform: translateY(26px) rotate(-3deg) scale(.92); transition: transform .25s, border-color .25s, box-shadow .25s; }
.deck-open .cy-card { animation: cyCardIn .5s cubic-bezier(.2,.9,.25,1.2) forwards; animation-delay: var(--d, 0ms); }
@keyframes cyCardIn { to { opacity: 1; transform: none; } }
.deck-open .cy-card:hover, .cy-card:focus-visible { transform: translateY(-8px) scale(1.03); border-color: var(--pg-a); box-shadow: 0 14px 30px rgba(var(--pg-a-rgb), .25); }
.cy-card.on { border-color: var(--pg-a); }
.cy-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(var(--pg-b-rgb), .35), #0b0414 75%); }
.cy-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cy-card-img b { font-size: 64px; color: transparent; -webkit-text-stroke: 2px var(--pg-a); animation: cyQ 2.4s ease-in-out infinite; }
.cy-card-st { margin: 6px 8px 0; align-self: flex-start; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; background: rgba(var(--pg-b-rgb), .25); color: #e9d5ff; padding: 2px 6px; }
.cy-card-st.live { background: var(--pg-a); color: var(--cy-ink); }
.cy-card strong { margin: 2px 8px 0; font-size: 13px; line-height: 1.2; letter-spacing: .5px; }
.cy-card small { margin: 0 8px; font-size: 11px; color: #a89cc8; }
@media (max-width: 1100px) {
    .cy-deck { position: relative; transform: none; top: auto; right: auto; width: auto; display: none; margin-top: 16px; }
    .deck-open .cy-deck { display: block; }
    .cy-deck-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .cy-qmark { height: 260px; } .cy-qmark span { font-size: 150px; }
    .cy-dots { position: static; grid-column: 1 / -1; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cy-hero-text.cy-swap, .cy-hero-art.cy-swap, .cy-qmark span, .cy-card-img b { animation: none; } .deck-open .cy-card { animation-duration: .01s; } }

/* promos inside "Live on PixelGaunt" */
#live-list li.pg-live-promo { background: linear-gradient(90deg, rgba(var(--pg-a-rgb), .12), transparent 70%); border-left: 3px solid var(--pg-a); padding-left: 10px; }
#live-list li.pg-live-promo a { color: #f3e8ff; text-decoration: none; }
#live-list li.pg-live-promo a:hover b { text-decoration: underline; }
#live-list li.pg-live-promo small { color: var(--pg-c); text-transform: uppercase; font-size: .68rem; letter-spacing: 1px; }

/* game player: Share + Fullscreen (phones too) */
.game-fullscreen-controls { gap: 12px; flex-wrap: wrap; align-items: center; }
.pg-share-msg { flex-basis: 100%; text-align: center; color: var(--pg-c); font-size: .85rem; min-height: 1em; }
.game-fullscreen-controls.is-mobile { margin-top: 12px; }
.game-fullscreen-controls.is-mobile .action-btn { flex: 1 1 140px; min-height: 48px; }

/* live chat */
#scrollToTopBtn { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 24px; }
.pg-chat-btn { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 950; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px; border: 0; cursor: pointer;
    background: var(--pg-a); color: var(--cy-ink, #0b0414); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; clip-path: polygon(0 0, 100% 0, 100% 72%, 88% 100%, 0 100%); box-shadow: 0 10px 30px rgba(var(--pg-a-rgb), .35); }
.pg-chat-btn i { font-size: 1.2rem; }
.pg-chat-btn:hover { filter: brightness(1.1); }
.pg-chat-btn.on { background: #1a0f2e; color: #f3e8ff; }
.pg-chat-dot { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 4px; }
.pg-chat { position: fixed; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 951; width: min(370px, calc(100vw - 24px)); height: min(540px, calc(100vh - 120px)); display: flex; flex-direction: column;
    background: #0d0a16; border: 1px solid rgba(var(--pg-a-rgb), .55); box-shadow: 0 24px 70px rgba(0,0,0,.65); color: #ece6ff; animation: cyChatIn .25s ease-out; }
.pg-chat[hidden] { display: none; }
@keyframes cyChatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pg-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(90deg, rgba(var(--pg-a-rgb), .25), rgba(var(--pg-b-rgb), .2)); border-bottom: 1px solid var(--cy-line); }
.pg-chat-head div { flex: 1; display: flex; flex-direction: column; } .pg-chat-head small { color: #cfc4f2; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pg-chat-head .pg-live-dot { width: 8px; height: 8px; background: #22c55e; }
.pg-chat-av { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--pg-a); color: var(--cy-ink, #0b0414); }
.pg-chat-x { background: none; border: 0; color: #cfc4f2; font-size: 1.6rem; cursor: pointer; line-height: 1; }
.pg-chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pg-cmsg { max-width: 84%; padding: 8px 12px; background: #1a1230; align-self: flex-start; border-left: 2px solid var(--pg-c); }
.pg-cmsg.me { align-self: flex-end; background: rgba(var(--pg-a-rgb), .22); border-left: 0; border-right: 2px solid var(--pg-a); }
.pg-cmsg p { margin: 0 0 3px; white-space: pre-wrap; word-break: break-word; font-size: .92rem; } .pg-cmsg small { color: #a89cc8; font-size: 11px; }
.pg-chat-wait { color: #a89cc8; font-size: .8rem; text-align: center; margin: 4px 0; }
.pg-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pg-chat-chip { background: transparent; border: 1px solid rgba(var(--pg-a-rgb), .55); color: #f3e8ff; font: inherit; font-size: .8rem; padding: 6px 10px; cursor: pointer; }
.pg-chat-chip:hover { background: rgba(var(--pg-a-rgb), .18); }
.pg-chat-form { border-top: 1px solid var(--cy-line); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pg-chat-guest { display: flex; flex-direction: column; gap: 6px; } .pg-chat-guest[hidden] { display: none; }
.pg-chat-guest small { color: #a89cc8; font-size: .75rem; } .pg-chat-guest a { color: var(--pg-c); }
.pg-chat-form input, .pg-chat-form textarea { background: #07060b; color: #fff; border: 1px solid var(--cy-line); padding: 8px 10px; font: inherit; font-size: .9rem; border-radius: 0; }
.pg-chat-form input:focus, .pg-chat-form textarea:focus { outline: none; border-color: var(--pg-a); }
.pg-chat-row { display: flex; gap: 6px; align-items: stretch; } .pg-chat-row textarea { flex: 1; resize: none; }
.pg-chat-send { width: 48px; border: 0; background: var(--pg-a); color: var(--cy-ink, #0b0414); cursor: pointer; font-size: 1.05rem; } .pg-chat-send:disabled { opacity: .5; }
.pg-chat-status { margin: 0; min-height: 1em; font-size: .78rem; color: #fca5a5; }
@media (max-width: 600px) { .pg-chat-btn { height: 48px; padding: 0 14px; } .pg-chat-lbl { display: none; } .pg-chat { right: 8px; left: 8px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); height: min(70vh, 560px); } }
:fullscreen .pg-chat-btn, body:has(#game-container-element:fullscreen) .pg-chat-btn { display: none; }
.game-container-wrapper { flex-wrap: wrap; }
.game-container-wrapper > .game-fullscreen-controls { flex-basis: 100%; width: 100%; }
/* blurred pictures behind the "?" of in-development projects */
.cy-qmark { overflow: hidden; }
.cy-qbg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(14px) brightness(.55) saturate(1.2); transform: scale(1.08); z-index: 0; }
.cy-qmark > span, .cy-qmark > small { position: relative; z-index: 1; }
.cy-card-img { position: relative; }
.cy-card-img img.cy-blur { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); filter: blur(8px) brightness(.55); }
.cy-card-img b { position: relative; z-index: 1; }

/* 2026-10-13: game covers the same shape as Trending (3:4), and "More games" under the player */
.game-grid .card-thumb { aspect-ratio: 3 / 4; }
.game-grid .card-thumb-img, .game-grid .gif-overlay { object-position: center; background-position: center; }
.pg-more { max-width: 1300px; margin: 34px auto 60px; padding: 0 5%; box-sizing: border-box; }
.pg-more .pg-shelf-head { margin-bottom: 16px; }
.pg-more button.pg-link { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--pg-a); }
.pg-more .game-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0 auto; }
@media (max-width: 560px) { .pg-more .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* 2026-10-14: Games page cards in the Trending style (picture with the name on it), about half the old size */
.game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.game-grid .game-card { border: 2px solid var(--cy-line); }
.game-grid .game-card:hover { border-color: var(--pg-a); box-shadow: none; }
.game-grid .card-thumb { aspect-ratio: 3 / 4; }
.game-grid .card-thumb::before { background: linear-gradient(to top, rgba(6, 4, 12, .95) 6%, rgba(6, 4, 12, 0) 55%); }
.game-grid .card-thumb-img { transition: transform .35s ease; }
.game-grid .game-card:hover .card-thumb-img { transform: scale(1.05); }
.game-grid .card-info { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; padding: 0; background: none; display: flex; flex-direction: column-reverse; gap: 2px; pointer-events: none; }
.game-grid .card-title { font-size: .92rem; line-height: 1.2; color: #fff; margin: 0; }
.game-grid .card-genre { font-size: .7rem; letter-spacing: .5px; color: var(--neon-cyan, #22d3ee); margin: 0; }
.game-grid .card-premium-meta { display: none; }
.game-grid .play-overlay { z-index: 3; }
.pg-more .game-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .game-grid, .pg-more .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Trending on the home page: about 25% bigger (wider than the text column on large screens) */
@media (min-width: 1001px) {
    #featured-strip.pg-rail { width: 125%; max-width: calc(100vw - var(--cy-side, 0px) - 40px); position: relative; left: 50%; transform: translateX(-50%); gap: 18px; }
    #featured-strip .pg-tile-info b { font-size: clamp(0.95rem, 1.25vw, 1.15rem); }
}

/* ================= 2026-10-16 ================= */
/* Side menu: everything fits on the screen (no scrolling inside the menu); Login, then Donate at the very bottom */
.nav-links .nav-menu-links { order: 1; } .nav-links .theme-select-container { order: 2; }
.nav-links #main-login-btn { order: 8; } .nav-links .pg-donate-btn { order: 9; }
@media (min-width: 1101px) {
    header#main-header, header#main-header.scrolled { overflow: hidden; overscroll-behavior: contain; gap: clamp(8px, 2.2vh, 22px); padding-top: clamp(12px, 2.6vh, 26px); padding-bottom: clamp(12px, 2.6vh, 26px); }
    header#main-header .pg-logo-hand { width: auto; height: clamp(44px, 9vh, 92px); }
    .nav-links { gap: clamp(6px, 1.4vh, 16px); min-height: 0; }
    .nav-menu-links { gap: clamp(2px, .6vh, 6px); }
    .nav-menu-links a { min-height: clamp(30px, 4.6vh, 44px); }
    #main-login-btn { margin-top: auto; }
    .pg-donate-btn, #main-login-btn { min-height: clamp(34px, 4.8vh, 44px); }
}

/* Trending swaps games every 15 s */
#featured-strip { transition: opacity .4s ease; }
#featured-strip.pg-trend-out { opacity: 0; }

/* Home: "More games coming soon" - 2 boxes in the centre */
.coming-soon-grid.pg-soon-two { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; align-items: stretch; gap: 22px; }
.pg-soon-two .coming-soon-card { aspect-ratio: auto; min-height: 300px; padding: 22px; box-sizing: border-box; text-decoration: none; position: relative; overflow: hidden; }
.pg-soon-dev { cursor: pointer; }
.pg-soon-dev > i, .pg-soon-dev > span, .pg-soon-dev > small { position: relative; z-index: 1; }
.pg-soon-dev > small { color: #cfc4f2; font-size: .85rem; text-align: center; }
.pg-soon-dev > span { color: #fff !important; font-size: .95rem !important; }
.pg-soon-q { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; z-index: 0; }
.pg-soon-q img { width: 100%; height: 100%; object-fit: cover; filter: blur(9px) brightness(.4) saturate(1.2); transform: scale(1.1); }
.pg-soon-q b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); font-size: 150px; line-height: 1; color: transparent; -webkit-text-stroke: 3px var(--pg-a); opacity: .45; animation: cyQ 2.4s ease-in-out infinite; }
.pg-soon-dev:hover { border-color: var(--pg-a) !important; }
.pg-soon-gtd { align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; border-style: solid !important; border-color: rgba(var(--pg-a-rgb), .55) !important;
    background: linear-gradient(160deg, rgba(var(--pg-b-rgb), .18), rgba(13, 10, 22, .92) 60%) !important; }
.pg-soon-logo { width: 78px; height: 78px; object-fit: contain; }
.pg-soon-badge { color: var(--pg-c) !important; font-family: 'IBM Plex Mono', monospace; font-size: .72rem !important; }
.pg-soon-badge i { font-size: .8rem !important; color: var(--pg-c) !important; }
.pg-soon-gtd h3 { margin: 0; color: #fff; font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase; }
.pg-soon-gtd p { margin: 0; color: #cfc4f2; font-size: .9rem; line-height: 1.55; }
.pg-soon-gtd ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: .84rem; color: #e9e3ff; }
.pg-soon-gtd ul b { display: inline-block; min-width: 92px; color: var(--pg-a); font-weight: 700; }
.pg-soon-ctas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.pg-soon-ctas .cy-btn { min-height: 42px; padding: 0 16px; font-size: 12px; }
@media (max-width: 760px) { .coming-soon-grid.pg-soon-two { grid-template-columns: 1fr; } }

/* Big centred page titles (Game Library, Community, In Development) */
.pg-shelf-head.pg-lib-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; margin-bottom: 26px; }
.pg-lib-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; margin: 0; color: #fff; letter-spacing: 2px; }
.pg-lib-head p { margin: 10px auto 0; max-width: 62ch; font-size: 1rem; }
.pg-lib-head .pg-search { width: min(520px, 100%); margin-top: 6px; flex: 0 0 auto; }
.pg-lib-more { text-align: center; margin: 30px 0 0; color: var(--text-muted); }
.pg-lib-more a { color: var(--pg-a); font-weight: 700; }
.pg-lib-more a.cy-btn { color: var(--cy-ink); }

/* Community page: small bug report box */
.pg-bugbox.pg-bugbox-sm { max-width: 560px; margin: 40px auto 0; padding: 16px 18px; }
.pg-bugbox-sm h3 { font-size: .98rem; } .pg-bugbox-sm p { font-size: .82rem; }
.pg-bugbox-sm textarea { min-height: 70px; }

/* In development page */
.pg-dev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 20px; }
.pg-dev-card { display: grid; grid-template-columns: 190px 1fr; background: rgba(13, 10, 22, .92); border: 1px solid rgba(var(--pg-a-rgb), .4); overflow: hidden; opacity: 0; transform: translateY(20px); animation: cyCardIn .55s ease forwards; animation-delay: var(--d, 0ms);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.pg-dev-img { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; background: radial-gradient(circle at 50% 40%, rgba(var(--pg-b-rgb), .35), #0b0414 75%); }
.pg-dev-img img.cy-blur { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); object-fit: cover; filter: blur(10px) brightness(.5); }
.pg-dev-img b { position: relative; font-size: 110px; line-height: 1; color: transparent; -webkit-text-stroke: 3px var(--pg-a); animation: cyQ 2.4s ease-in-out infinite; }
.pg-dev-img small { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 3px; color: var(--pg-c); }
.pg-dev-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pg-dev-st { align-self: flex-start; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; background: rgba(var(--pg-b-rgb), .3); color: #e9d5ff; padding: 3px 8px; }
.pg-dev-body h2 { margin: 4px 0 0; color: #fff; font-size: 1.35rem; letter-spacing: 1px; }
.pg-dev-genre { color: var(--pg-c) !important; font-size: .85rem !important; font-weight: 700; margin: 0; }
.pg-dev-body p { margin: 0; color: #cfc4f2; font-size: .92rem; line-height: 1.55; }
.pg-dev-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.pg-dev-actions .cy-btn { min-height: 42px; padding: 0 16px; font-size: 12px; }
.pg-dev-note { color: var(--pg-c) !important; font-size: .82rem !important; min-height: 1em; }
@media (max-width: 560px) { .pg-dev-card { grid-template-columns: 1fr; } .pg-dev-img { min-height: 180px; } }
@media (prefers-reduced-motion: reduce) { .pg-dev-card { animation: none; opacity: 1; transform: none; } .pg-dev-img b, .pg-soon-q b { animation: none; } }

/* 2026-10-18: Annihilate Protocol */
.cy-title.cy-title-long { font-size: clamp(44px, 6vw, 92px); letter-spacing: -1px; }
.cy-title.cy-title-long span + span { margin-top: 6px; }
.coming-soon-grid.pg-soon-two.pg-soon-three { grid-template-columns: repeat(2, minmax(0, 460px)); }
.pg-soon-three .pg-soon-dev { grid-column: 1 / -1; order: 3; min-height: 200px; }
.pg-soon-q { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100%; }
.pg-soon-q img { height: 100%; }
.pg-soon-gtd ul li { display: grid; grid-template-columns: 96px 1fr; gap: 6px; }
.pg-soon-gtd ul b { min-width: 0; }
.pg-soon-logo.pg-soon-logo-wide { width: min(100%, 260px); height: auto; aspect-ratio: 3 / 1; object-fit: cover; border: 1px solid rgba(var(--pg-a-rgb), .45); }
@media (max-width: 760px) { .coming-soon-grid.pg-soon-two.pg-soon-three { grid-template-columns: 1fr; } }

/* ================= 2026-10-18: Website manager (content from the admin dashboard) ================= */
.pg-cms-hidden { display: none !important; }
@media (min-width: 1001px) { #featured-strip.pg-rail { grid-template-columns: repeat(var(--pg-trend-n, 5), minmax(0, 1fr)); } }
.cy-deck-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.pg-announce { position: relative; z-index: 50; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 9px 16px; font-weight: 600; font-size: .92rem; text-align: center; color: #0b0414; background: var(--pg-a); }
.pg-announce a { color: inherit; font-weight: 800; text-decoration: underline; }
.pg-announce.tone-info { background: #22d3ee; } .pg-announce.tone-warn { background: #fbbf24; } .pg-announce.tone-success { background: #4ade80; }
.pg-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; background: #fbbf24; color: #1a1205; font-weight: 700; padding: 10px 16px; text-align: center; }
.pg-preview-bar a { color: inherit; margin-left: 8px; text-decoration: underline; }
.pg-cms-sec { width: 100%; max-width: 1200px; margin: 30px auto; box-sizing: border-box; }
.pg-cms-h { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 8px; }
.pg-cms-sub { color: var(--text-muted); margin: 0 0 16px; }
.pg-cms-p { color: #cfc4f2; line-height: 1.7; margin: 0 0 12px; max-width: 75ch; }
.pg-cms-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 28px; background: linear-gradient(135deg, rgba(var(--pg-b-rgb), .2), rgba(13, 10, 22, .9)); border: 1px solid rgba(var(--pg-a-rgb), .4); }
.pg-cms-hero.align-center { grid-template-columns: 1fr; text-align: center; } .pg-cms-hero.align-center .cy-ctas { justify-content: center; }
.pg-cms-hero-img, .pg-cms-split-img { width: 100%; max-height: 420px; object-fit: cover; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.pg-cms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.pg-cms-split.img-left .pg-cms-split-img { order: -1; }
.pg-cms-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px; border: 1px solid; }
.pg-cms-promo.tone-pink { background: rgba(var(--pg-a-rgb), .12); border-color: var(--pg-a); } .pg-cms-promo.tone-cyan { background: rgba(34, 211, 238, .1); border-color: #22d3ee; } .pg-cms-promo.tone-gold { background: rgba(251, 191, 36, .1); border-color: #fbbf24; }
.pg-cms-promo-img { width: 120px; height: 90px; object-fit: cover; }
.pg-cms-promo-text { flex: 1 1 260px; } .pg-cms-promo h3 { margin: 0 0 4px; color: #fff; } .pg-cms-promo p { margin: 0; color: #cfc4f2; }
.pg-cms-promo .cy-ctas { margin: 0; }
.pg-cms-note { padding: 18px 22px; border-left: 4px solid #22d3ee; background: rgba(34, 211, 238, .08); }
.pg-cms-note.tone-success { border-color: #4ade80; background: rgba(74, 222, 128, .08); } .pg-cms-note.tone-warning { border-color: #fbbf24; background: rgba(251, 191, 36, .08); }
.pg-cms-note h3 { margin: 0 0 6px; color: #fff; }
.pg-cms-cta { text-align: center; padding: 34px 20px; border: 1px solid rgba(var(--pg-a-rgb), .4); background: rgba(13, 10, 22, .85); }
.pg-cms-cta .pg-cms-p { margin-left: auto; margin-right: auto; } .pg-cms-cta .cy-ctas { justify-content: center; }
.pg-cms-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; overflow: visible; }
.pg-cms-rail .pg-tile, .pg-cms-grid .pg-tile { flex: none; width: 100%; aspect-ratio: 3 / 4; }
.pg-cms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pg-cms-custom-img { width: 100%; max-height: 460px; object-fit: cover; margin: 6px 0 16px; }
@media (max-width: 760px) { .pg-cms-hero, .pg-cms-split { grid-template-columns: 1fr; } .pg-cms-split.img-left .pg-cms-split-img { order: 0; } }

/* ===== Continue playing (Game Library) - only shown to visitors who have played before ===== */
.pg-continue { margin: 0 0 22px; }
.pg-continue.pg-hidden { display: none; }
.pg-continue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pg-continue-head h2 { margin: 0; font-size: 1.15rem; }
.pg-continue-more { background: none; border: 0; padding: 0; color: var(--pg-text, #fff); font: inherit; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pg-continue-more i { font-size: .8em; opacity: .8; transition: transform .2s; }
.pg-continue-more:hover i { transform: translateX(3px); }
.pg-continue-clear { background: none; border: 0; color: var(--pg-muted, #9aa0b4); font: inherit; font-size: .8rem; cursor: pointer; padding: 4px 6px; }
.pg-continue-clear:hover { color: var(--pg-a); }
.pg-continue-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: thin; }
.pg-cont-item { position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 18px; overflow: hidden; scroll-snap-align: start; background: linear-gradient(135deg, var(--pg-a, #ff2e88), var(--pg-b, #22d3ee)); box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: transform .18s, box-shadow .18s; }
.pg-cont-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-cont-item:hover, .pg-cont-item:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--pg-a, #ff2e88), 0 8px 18px rgba(0,0,0,.4); outline: none; }
.pg-cont-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: .68rem; font-weight: 700; line-height: 1.15; color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .18s; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-cont-item:hover .pg-cont-name, .pg-cont-item:focus-visible .pg-cont-name, .pg-cont-noimg .pg-cont-name { opacity: 1; }
.pg-cont-noimg .pg-cont-name { top: 0; display: flex; align-items: center; justify-content: center; padding: 6px; background: none; font-size: .75rem; }
@media (max-width: 560px) { .pg-cont-item { width: 76px; height: 76px; border-radius: 15px; } .pg-continue-row { gap: 9px; } .pg-cont-name { opacity: 1; font-size: .6rem; } }

/* ===== Multiplayer / Online category + card badge ===== */
.pg-cat.pg-cat-mp i { color: #4ade80; }
.pg-mp-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #052e16; background: #4ade80; box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; }
.pg-mp-badge i { font-size: .9em; }
@media (max-width: 560px) { .pg-mp-badge { top: 6px; left: 6px; padding: 2px 6px; font-size: .58rem; } }

/* ===== 2026-10-23: wider game sections - images use the full width on big screens ===== */
.pg-tile .pg-mp-badge { z-index: 2; }
@media (min-width: 1001px) {
    /* Game Library page: Continue playing, categories and the game grid stretch towards the sides */
    .container.pg-wide { max-width: none; padding-left: 2.5%; padding-right: 2.5%; }
    .pg-wide #games-section { max-width: 1760px; padding: 0 1%; }
    .pg-more { max-width: 1760px; padding: 0 2.5%; }
    .pg-wide .game-grid, .pg-more .game-grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
    .pg-wide .pg-cats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .pg-wide .pg-cont-item { width: 112px; height: 112px; border-radius: 20px; }
    /* Home page: Trending fills the whole area next to the side menu */
    #featured-strip.pg-rail { width: calc(100vw - var(--cy-side, 0px) - 56px); max-width: 1760px; gap: 18px; }
}

/* ===== 50% OFF sale prices ===== */
.pg-sale-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 0 2px; }
.pg-was { color: #94a3b8; font-weight: 700; text-decoration: line-through; text-decoration-color: #ff2e88; text-decoration-thickness: 2px; }
.pg-sale-row .pg-was { font-size: 1.25rem; }
.pg-off { display: inline-block; background: #ff2e88; color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; vertical-align: middle; box-shadow: 0 0 14px rgba(255, 46, 136, .45); }
.pg-price-pkr s { color: #94a3b8; text-decoration-color: #ff2e88; }

/* ===== Pink banner = second rotating notification (next to the box on wide screens, above it on phones) ===== */
.pg-welcome.pg-ticker { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; text-align: left; font-size: .92rem; z-index: 901;
    left: calc(var(--cy-side, 0px) + 18px); bottom: calc(100px + env(safe-area-inset-bottom, 0px)); transform: translateY(20px); max-width: min(560px, calc(100vw - var(--cy-side, 0px) - 36px)); pointer-events: none; }
.pg-welcome.pg-ticker.show { transform: none; pointer-events: auto; }
.pg-ticker-main { color: inherit; text-decoration: none; flex: 1; min-width: 0; line-height: 1.3; }
.pg-ticker-main b { color: inherit; font-weight: 900; }
.pg-ticker-main s { opacity: .65; }
.pg-ticker-main i { font-size: 1.05em; }
.pg-ticker-x { flex: none; background: none; border: 0; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .7; padding: 2px 6px; }
.pg-ticker-x:hover { opacity: 1; }
@media (min-width: 1300px) {
    .pg-welcome.pg-ticker { left: calc(var(--cy-side, 0px) + 18px + 380px + 28px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: min(560px, calc(100vw - var(--cy-side, 0px) - 380px - 190px)); }
}
@media (max-width: 1100px) { .pg-welcome.pg-ticker { left: 12px; max-width: calc(100vw - 24px); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* Coming-soon cards: full game art instead of small logos */
.pg-soon-logo.pg-soon-art { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid rgba(var(--pg-a-rgb), .45); }