:root{
            --bg:#000;
            --muted:#ffffff;
            --accent:#ffd400; /* yellow soul */
            --accent-2:#e33b3b; /* red title */
            --panel:#101010;
        }

            /* Handle */
        ::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: rgba(255,0,0,0.8); 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
        }
        ::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(255,0,0,0.4); 
        }
        @font-face {
            font-family: '8bitoperator JVE';
            src: url('../assets/fonts/8bitoperator-JVE.eot');
            src: local('8bitoperator JVE Regular'), local('8bitoperator-JVE'),
                url('../assets/fonts/8bitoperator-JVE.eot?#iefix') format('embedded-opentype'),
                url('../assets/fonts/8bitoperator-JVE.woff2') format('woff2'),
                url('../assets/fonts/8bitoperator-JVE.woff') format('woff'),
                url('../assets/fonts/8bitoperator-JVE.ttf') format('truetype'),
                url('../assets/fonts/8bitoperator-JVE.svg#8bitoperator-JVE') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'JF Dot Shinonome Gothic 14';
            src: url('../assets/fonts/JF-Dot-Shinonome-14-Regular.eot');
            src: local('JF Dot Shinonome Gothic 14 Regular'), local('JF-Dot-Shinonome-14-Regular'),
                url('../assets/fonts/JF-Dot-Shinonome-14-Regular.eot?#iefix') format('embedded-opentype'),
                url('../assets/fonts/JF-Dot-Shinonome-14-Regular.woff2') format('woff2'),
                url('../assets/fonts/JF-Dot-Shinonome-14-Regular.woff') format('woff'),
                url('../assets/fonts/JF-Dot-Shinonome-14-Regular.ttf') format('truetype'),
                url('../assets/fonts/JF-Dot-Shinonome-14-Regular.svg#JF-Dot-Shinonome-14-Regular') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        html,body{
            height:100%;
            background:var(--bg);
            color:var(--muted);
            font-family: '8bitoperator JVE', 'JF Dot Shinonome Gothic 14', 'Segoe UI', Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
            -webkit-font-smoothing: none;
            text-rendering: optimizeLegibility;
        }

        /* pixelated site wrapper */
        .site {
            min-height:100%;
            display:flex;
            flex-direction:column;
        }

        /* top nav */
        .navbar {
            background:linear-gradient(180deg,#3a3a3a 0%, #505050 100%);
            border-bottom:px solid rgba(255,255,255,0.04);
            box-shadow: 0 6px 20px rgba(0,0,0,0.6);
            font-size:12px;
        }
        .brand-title{
            color:var(--accent-2);
            font-size:16px;
            letter-spacing:4px;
            text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
        }

        /* hero */
        .hero {
            padding:6rem 1rem;
            text-align:center;
        }
        .soul {
            display:inline-block;
            width:72px;
            height:72px;
            position:relative;
            margin-bottom:16px;
            transform:scale(1);
            filter:drop-shadow(0 8px 12px rgba(0,0,0,0.6));
        }
        .logo {
            display: block;
            margin: 0 auto;
            max-width: 420px;
            width: 80%;
            height: auto;
            transform: scale(1.5);
        }
        /* simple CSS heart - pixel-friendly */
        .soul::before,.soul::after{
            content:"";
            position:absolute;
            width:36px;
            height:36px;
            background:var(--accent);
            border-radius:10px 10px 0 0;
            top:0;
            left:18px;
            transform-origin:center;
            box-shadow: 0 0 0 3px rgba(0,0,0,0.35);
        }
        .soul::after{
            left:0;
            transform:translateX(18px) rotate(-45deg);
        }
        .soul::before{
            left:18px;
            transform:rotate(45deg);
        }
        .hero h1{
            color:var(--accent-2);
            font-size:28px;
            margin:12px 0 8px;
            letter-spacing:6px;
            text-shadow: 4px 4px 0 rgba(0,0,0,0.6);
        }
        .hero p.lead{
            color:#cfcfcf;
            max-width:820px;
            margin:0 auto;
            font-size:24px;
            letter-spacing:1px;
            line-height:1.8;
        }

        /* sections */
        .panel {
            background:linear-gradient(180deg,var(--panel), #0b0b0b);
            border:4px solid rgba(255,255,255,0.04);
            padding:1rem;
            border-radius:6px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.6);
            margin-bottom:1.25rem;
            font-size:11px;
        }
        .panel .title {
            color:var(--accent);
            font-size:24px;
            margin-bottom:8px;
            text-transform:uppercase;
            letter-spacing:2px;
        }

        /* pixel button */
        .btn-pixel {
            display:inline-block;
            padding:.65rem 1rem;
            color:#0a0a0a;
            background:var(--accent);
            border:3px solid rgba(0,0,0,0.6);
            text-decoration:none;
            font-size:24px;
            letter-spacing:1px;
            box-shadow: 0 6px 0 rgba(0,0,0,0.6);
        }
        .btn-pixel:active { transform:translateY(4px); box-shadow:none; }

        /* footer */
        footer {
            margin-top:auto;
            padding:1.25rem 0;
            text-align:center;
            color:#777;
            font-size:10px;
        }

        /* responsiveness: scale font for large screens */
        @media(min-width:992px){
            .hero h1{ font-size:36px; }
            .hero p.lead{ font-size:13px; }
        }
/* Shared navbar and soul-icon styles (centralized) */
.navbar {
    min-height: 40px; /* Make navbar thinner */
    padding-top: 0.1rem;
    padding-bottom: 0.2rem;
}
.nav-link {
    color: #888 !important; /* Gray text */
    text-shadow: 2px 2px 0 #000; /* Black drop shadow */
    font-weight: bold;
    transition: all 0.2s ease;
}
.navbar-toggler {
    border: none;
    padding: 4px 8px;
}
.navbar-toggler:focus { box-shadow: none; }
.hamburger-icon { display: flex; flex-direction: column; width: 24px; height: 18px; justify-content: space-between; }
.hamburger-line { height: 3px; width: 100%; background-color: #888; border-radius: 2px; transition: all 0.3s ease; }
.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2){ opacity: 0; }
.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }
@media (max-width: 767.98px) {
    .navbar-collapse { text-align: center; }
    .navbar-nav { width: 100%; display: block; }
    .navbar-nav .nav-item { display: block; width: 100%; }
    .navbar-nav .nav-link { display: inline-block; width: auto; padding: .5rem 1rem; }
}
.nav-link.active { color: #fff !important; position: relative; }
.soul-icon { width: 26px; height: 26px; margin-right: .5rem; vertical-align: middle; display: inline-block; border-radius: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.nav-link.active .soul-icon { animation: pulse 1s ease-in-out infinite; transform-origin: center; }
.navbar-nav .nav-link:not(.active):hover::before { content: ""; display: inline-block; width: 26px; height: 26px; margin-right: .5rem; vertical-align: middle; background-image: url('../assets/img/smallheart_bigdreams.png'); background-size: contain; background-repeat: no-repeat; animation: pulse 1s ease-in-out infinite; }

/* Footer styling: grey text with stretched bg-dotmatrix image */
footer {
    border-top: 8px solid #ffffff; /* white separator line */
    background-color: #2f2f2f; /* base grey */
    color: #000000; /* lighter grey text */
    background-image: url('../assets/img/bg-dotmatrix.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; /* stretch to fill */
    padding: 1.5rem 0;
}
footer p, footer .container { color: #bdbdbd; }

/* Social icons (pixel-style) */
.social-links { display:flex; gap:12px; justify-content:center; align-items:center; margin-top:36px; }
.social-btn { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#222,#0f0f0f); border:3px solid rgba(255,255,255,0.06); border-radius:6px; box-shadow: 0 6px 0 rgba(0,0,0,0.6); transition: transform 180ms ease, filter 180ms ease; }
.social-btn img { width:28px; height:28px; display:block; }
.social-btn:hover { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.social-btn:active { transform: translateY(-2px) scale(0.98); }
/* platform color rules removed: icons use colored SVGs from Simple Icons CDN */

/* Slight larger on wide screens */
@media(min-width:992px){
    .social-btn{ width:56px; height:56px; }
    .social-btn img{ width:34px; height:34px; }
}

/* Mobile adjustments for social icons and spacing */
@media (max-width: 767.98px) {
    /* On mobile make the social buttons vertical and large for easy tapping */
    .social-links {
        margin-top: 20px; /* spacing from hero buttons */
        gap: 14px;
        padding: 0 0.5rem;
        justify-content: center;
        flex-direction: column; /* stack vertically */
        align-items: center;
        width: 100%;
    }
    .social-btn {
        width: 64px; /* larger tap target */
        height: 64px;
        border-width: 3px;
        box-shadow: 0 6px 0 rgba(0,0,0,0.6);
        border-radius: 8px;
    }
    .social-btn img { width:36px; height:36px; }
    .social-btn:hover { transform: translateY(-8px) scale(1.04); }

    /* Slight adjustments for very small phones */
    @media (max-width: 420px) {
        .hero p.lead { font-size: 16px; }
        .social-links { gap: 12px; }
        .social-btn { width:56px; height:56px; }
        .social-btn img { width:30px; height:30px; }
    }
}

/* General mobile-friendly adjustments */
@media (max-width: 767.98px) {
    /* Reduce hero spacing for small screens */
    .hero { padding: 3rem 1rem; }
    .logo {
        transform: none;
        max-width: 260px;
        width: 70%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .hero h1 { font-size: 22px; letter-spacing: 3px; }
    .hero p.lead { font-size: 16px; line-height: 1.6; max-width: 100%; padding: 0 0.5rem; }

    /* Panels stack and use full width */
    .panel { padding: 0.75rem; border-width: 3px; margin-bottom: 1rem; }
    .panel .title { font-size: 18px; }

    /* Make pixel buttons stack and be tappable */
    .btn-pixel { display:block; width:100%; box-sizing:border-box; font-size:18px; padding:0.6rem 0.75rem; }
    .btn-pixel + .btn { margin-top: 8px; }

    /* Navbar links smaller on mobile */
    .navbar-nav .nav-link { font-size: 1.25rem !important; padding: 0.5rem 0.75rem; }

    /* Footer spacing */
    footer { padding: 1rem 0; }

    /* Images inside panels and hero scale down */
    img.img-fluid { max-width:100%; height:auto; }
}

/* --- Inline page styles consolidated below ---
   Moved from individual HTML files to central stylesheet for consistency */

/* Hover state for nav links (was inline on several pages) */
.nav-link:hover { color: #ccc !important; }

/* Downloads / About page notice styles (shared) */
.downloads-notice { text-align: center; color: #fff; margin: 3rem 0; }
.downloads-notice .lead-text { font-size: 2.25rem; font-weight: 800; margin-bottom: .5rem; }
.downloads-notice .muted { color: #ccc; font-size: 1.05rem; }

/* Shake animation used on download page */
.shake { display: inline-block; color: #fff; }
@keyframes shake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-6px) rotate(-2deg); }
    30% { transform: translateX(6px) rotate(2deg); }
    45% { transform: translateX(-4px) rotate(-1deg); }
    60% { transform: translateX(4px) rotate(1deg); }
    75% { transform: translateX(-2px) rotate(-0.5deg); }
    100% { transform: translateX(0); }
}
.shake-forever { animation: shake 1.2s ease-in-out infinite; }

/* Small-heart hover before element background path normalized for css context */
.navbar-nav .nav-link:not(.active):hover::before { background-image: url('../assets/img/smallheart_bigdreams.png'); }