/*
Theme Name: BrainMeat Theme
Description: A cyberpunk gaming theme for BrainMeat Games featuring neural interfaces, glitch effects, and futuristic aesthetics. Designed for gaming communities with forum integration and responsive design.
Author: BrainMeat Games
Version: 2.9.0
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brainmeat
Tags: cyberpunk, gaming, dark, neon, futuristic, bbpress, forums, responsive, custom-background
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/* ── Anchor offset — prevents fixed header covering jump targets ─── */
[id] {
    scroll-margin-top: clamp(80px, 14vw, 220px);
}

/* ===================================
   CSS VARIABLES (with fallbacks for older browsers)
   =================================== */
:root {
    --deep-black: #0a0a0f;
    --neon-cyan: #00fff9;
    --neon-magenta: #ff006e;
    --neon-yellow: #ffbe0b;
    --neon-orange: #ff7300;
    --neon-purple: #b829ff;
    --blood-red: #ff003c;
    --toxic-green: #39ff14;
}

/* Fallback colors for browsers that don't support CSS variables */
body {
    background: #0a0a0f; /* Fallback */
    background: var(--deep-black);
}

/* ===================================
   GLOBAL STYLES
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--deep-black);
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* ===================================
   ACCESSIBILITY
   =================================== */
/* Visually hidden — readable by screen readers only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================
   BACKGROUND ELEMENTS
   =================================== */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 249, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 249, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -2;
}

.scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    animation: scanline 3s linear infinite;
    z-index: 10;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes scanline {
    0%   { transform: translateY(0);     opacity: 1; }
    50%  { transform: translateY(50vh);  opacity: 0.5; }
    100% { transform: translateY(100vh); opacity: 1; }
}

/* ===================================
   HEADER
   =================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 255, 249, 0.3);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: visible;
}

/* ── Header binary ticker strip ── */
.header-ticker-bar {
    width: 100%;
    overflow: hidden;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(57, 255, 20, 0.18);
    user-select: none;
}

/* Own keyframe defined here — no forward-reference dependency */
@keyframes headerBinaryScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.header-ticker-inner {
    display: inline-block;
    white-space: nowrap;
    animation: headerBinaryScroll 90s linear infinite;
}

.header-ticker-bar span {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.48rem, 0.65vw, 0.62rem);
    color: #39ff14;
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.65), 0 0 10px rgba(57, 255, 20, 0.25);
    letter-spacing: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .header-ticker-inner { animation-play-state: paused; }
}

/* Main header row — logo + nav */
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 3rem;
    /* overflow stays visible so the absolutely-positioned logo is never clipped */
}

/* headerBinaryFade removed — replaced by JS-driven bin-node particles */

/* ── Header binary float particles ─────────────────── */
.header-binary-float {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    /* Only meaningful in the collapsed (hamburger) header layout */
    display: none;
}
/* Show the float layer only when the hamburger layout is active */
@media (max-width: 1400px) {
    .header-binary-float { display: block; }
}

.bin-node {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.52rem, 0.75vw, 0.72rem);
    color: rgba(0, 255, 249, 0.22);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    opacity: 0;
    animation: binNodeFade var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
    will-change: opacity, transform;
}
@keyframes binNodeFade {
    0%, 100% { opacity: 0;               transform: translateY(0); }
    20%       { opacity: var(--op, 0.18); transform: translateY(0); }
    60%       { opacity: var(--op, 0.18); transform: translateY(-5px); }
    85%       { opacity: 0;               transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .header-binary-float { display: none !important; }
}

.logo {
    display: block;
    text-decoration: none;
    line-height: 0; /* remove inline-img gap */
    flex-shrink: 0;
}

.logo-img,
.logo svg {
    width: 196px;
    height: 196px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 229, 204, 0.45));
    transition: filter 0.3s ease;
    display: block;
    overflow: visible;
}

.logo:hover .logo-img,
.logo:hover svg {
    filter: drop-shadow(0 0 18px rgba(0, 229, 204, 0.75)) drop-shadow(0 0 30px rgba(148, 0, 255, 0.3));
}

/* Hero logo — centered, larger */
.hero-logo {
    width: 160px;
    height: 160px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 30px rgba(0, 229, 204, 0.35));
    animation: heroLogoPulse 4s ease-in-out infinite;
}

@keyframes heroLogoPulse {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(0, 229, 204, 0.35)); }
    50%       { filter: drop-shadow(0 0 50px rgba(0, 229, 204, 0.6)) drop-shadow(0 0 80px rgba(148, 0, 255, 0.2)); }
}

/* Mobile logo scaling — min-height matches logo size + padding so logo never clips */
@media (max-width: 768px) {
    .logo-img,
    .logo svg  { width: 130px; height: 130px; }
    .header-main { min-height: calc(130px + 2rem); }
}

@media (max-width: 480px) {
    .logo-img,
    .logo svg  { width: 100px; height: 100px; }
    .hero-logo { width: 130px; height: 130px; }
    .header-main { min-height: calc(100px + 1.75rem); }
}

@media (max-width: 380px) {
    .logo-img,
    .logo svg { width: 90px; height: 90px; }
    .header-main { min-height: calc(90px + 1.5rem); }
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    align-items: center;
}

nav li {
    position: relative;
    flex-shrink: 0; /* never let nav items compress — text must stay on one line */
}

nav a {
    color: #ccc;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(0.68rem, 0.85vw, 0.95rem);
    letter-spacing: clamp(0px, 0.06vw, 1px);
    text-transform: uppercase;
    white-space: nowrap !important;
    position: relative;
    padding: 0.6rem 0.5rem;
    /* Touch target + vertical alignment — declared here so hamburger block can override */
    display: flex;
    align-items: center;
    min-height: 44px;
}

nav a:hover {
    color: var(--neon-cyan);
    text-shadow: 0 0 15px var(--neon-cyan), 0 0 30px rgba(0, 255, 249, 0.3);
    transform: translateY(-2px);
}

/* Cyberpunk glow effect on hover */
nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(0, 255, 249, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 4px;
}

nav a:hover::before {
    opacity: 1;
}

.nav-item-locked .nav-locked {
    color: #888; /* #666 fails 4.5:1 on dark bg — #888 gives ~6.5:1, passes WCAG 1.4.3 */
    cursor: not-allowed;
    position: relative;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(0.68rem, 0.85vw, 0.95rem);
    letter-spacing: clamp(0px, 0.06vw, 1px);
    text-transform: uppercase;
    white-space: nowrap !important;
    padding: 0.8rem 1rem;
    /* Touch target — declared here so hamburger block can override */
    display: flex;
    align-items: center;
    min-height: 44px;
}

.nav-lock-icon {
    margin-left: 0.5rem;
    color: var(--blood-red);
    text-shadow: 0 0 10px var(--blood-red);
}

/* Dropdown styling (if needed) */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 255, 249, 0.3);
    border-radius: 8px;
    padding: 1rem 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown li {
    margin: 0;
}

.dropdown a {
    display: block;
    padding: 0.8rem 1.5rem;
    border-radius: 0;
    font-size: 0.95rem;
}

/* Mobile header handled by HAMBURGER / MOBILE NAV section below */

/* ===================================
   HAMBURGER / MOBILE NAV
   =================================== */
/* Wrapper keeps label + button stacked and centred as one unit */
.nav-toggle-wrap {
    display: none;          /* hidden on desktop (hamburger not shown) */
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.nav-toggle-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.45rem, 0.7vw, 0.65rem);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;   /* clicks pass through to button */
    animation: labelShimmer 2.8s ease-in-out infinite;
}

/* Subtle neon shimmer — slow pulse stays below 3 Hz (WCAG 2.3.1) */
@keyframes labelShimmer {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(0, 255, 249, 0.5), 0 0 16px rgba(0, 255, 249, 0.2);
    }
    50% {
        opacity: 0.72;
        text-shadow: 0 0 14px rgba(0, 255, 249, 0.9), 0 0 28px rgba(0, 255, 249, 0.5), 0 0 42px rgba(0, 255, 249, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-label { animation: none; }
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    position: relative;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--neon-cyan);
    box-shadow: 0 0 6px var(--neon-cyan);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Animate to X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* Nav hamburger fires at ≤1400px — 7 Orbitron items + logo won't fit horizontally
   below ~1565px. Fluid clamp font-size handles the 1400px–1920px zone smoothly.
   Logo sizing is handled by its own breakpoints below. */
@media (max-width: 1400px) {
    /* Show the wrapper (label + button) — hides on desktop */
    .nav-toggle-wrap {
        display: flex;
    }

    /* Hamburger row — logo pinned left, hamburger centred, height NEVER changes */
    .header-main {
        flex-direction: row;
        flex-wrap: nowrap;   /* nav must NOT wrap inside here — it drops below */
        padding: 1.25rem 1.5rem;
        gap: 0;
        position: relative;
        justify-content: center;
        align-items: center;
        /* Tall enough to contain the 160px logo + vertical padding so top:50% is accurate */
        min-height: calc(160px + 2.5rem);
    }

    /* Pin logo to the left — absolutely positioned within .header-main only */
    .logo {
        position: absolute;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Fluid hamburger — large at 1400px, shrinks smoothly down to 380px */
    .nav-toggle {
        width:  clamp(40px, 5vw, 72px);
        height: clamp(28px, 3.5vw, 50px);
    }

    .nav-toggle-bar {
        height: clamp(2px, 0.28vw, 4px);
        border-radius: 3px;
    }

    /* X-animation travel scales with the fluid bar spacing */
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
        transform: translateY(clamp(11px, 1.5vw, 20px)) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
        transform: translateY(clamp(-20px, -1.5vw, -11px)) rotate(-45deg);
    }

    /* Nav is absolutely positioned BELOW .header-main — never affects logo row height */
    #main-nav {
        position: fixed;        /* fixed so it escapes any stacking context */
        top: 0;                 /* JS overrides with header.getBoundingClientRect().bottom */
        left: 0;
        right: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
        background: rgba(10, 10, 15, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 255, 249, 0.25);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        z-index: 9998;          /* below cursor (9999) but above everything else */
    }

    #main-nav.nav-open {
        max-height: 600px;
        padding-top: 0.25rem;
    }

    nav ul {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        padding-top: 0;      /* border now on #main-nav itself */
    }

    nav li {
        width: 100%;
        border-bottom: 1px solid rgba(0, 255, 249, 0.1);
    }

    nav a,
    .nav-item-locked .nav-locked {
        display: block !important; /* override base flex — stack vertically in open menu */
        width: 100%;
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
        white-space: nowrap !important;
    }

    /* Dropdowns become static below desktop */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        background: rgba(0, 0, 0, 0.4);
        box-shadow: none;
    }

    .dropdown li a {
        padding-left: 2rem;
        font-size: 0.9rem;
        color: #aaa;
    }
}

/* ===================================
   HERO SECTION
   =================================== */
.hero {
    min-height: 100vh;
    min-height: 100svh; /* iOS 15.4+ — stable viewport height, prevents chrome-jump reflow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--deep-black), #0f0f1f);
}

.hero h1,
.hero .hero-join {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.6rem, 5.5vw, 4.5rem); /* fluid: 1.6rem @ 380px → 4.5rem @ 1300px+ */
    color: var(--neon-cyan);
    text-shadow: 0 0 30px var(--neon-cyan);
    margin-bottom: 2rem;
    letter-spacing: clamp(0px, 0.5vw, 6px);
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.hero .tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.55rem, 2vw, 1.4rem);
    color: var(--neon-yellow);
    margin-bottom: 3rem;
    letter-spacing: clamp(0px, 0.4vw, 3px);
    white-space: nowrap;
    overflow: hidden;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: transparent;
    border: 2px solid var(--neon-magenta);
    color: var(--neon-magenta);
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-button:hover {
    background: var(--neon-magenta);
    color: var(--deep-black);
    box-shadow: 0 0 30px var(--neon-magenta);
    transform: translateY(-3px);
}

/* ===================================
   FLOATING TEXT ANIMATIONS
   =================================== */
.floating-text {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    opacity: 0;
    animation: floatText 12s infinite linear;
    pointer-events: none;
    white-space: nowrap;
}

.floating-text-1 { top: 10%; left: 5%; color: var(--neon-cyan); animation-delay: 0s; }
.floating-text-2 { top: 20%; right: 10%; color: var(--neon-magenta); animation-delay: 2s; }
.floating-text-3 { top: 30%; left: 15%; color: var(--toxic-green); animation-delay: 4s; }
.floating-text-4 { top: 40%; right: 5%; color: var(--neon-yellow); animation-delay: 6s; }
.floating-text-5 { top: 50%; left: 8%; color: var(--neon-purple); animation-delay: 8s; }
.floating-text-6 { top: 60%; right: 20%; color: var(--blood-red); animation-delay: 1s; }
.floating-text-7 { top: 70%; left: 25%; color: var(--neon-cyan); animation-delay: 3s; }
.floating-text-8 { top: 80%; right: 15%; color: var(--neon-magenta); animation-delay: 5s; }
.floating-text-9 { top: 15%; left: 70%; color: var(--toxic-green); animation-delay: 7s; }
.floating-text-10 { top: 35%; right: 30%; color: var(--neon-yellow); animation-delay: 9s; }
.floating-text-11 { top: 55%; left: 60%; color: var(--neon-purple); animation-delay: 11s; }
.floating-text-12 { top: 75%; right: 40%; color: var(--blood-red); animation-delay: 1.5s; }
.floating-text-13 { top: 25%; left: 40%; color: var(--neon-cyan); animation-delay: 3.5s; }
.floating-text-14 { top: 65%; right: 60%; color: var(--neon-magenta); animation-delay: 5.5s; }
.floating-text-15 { top: 85%; left: 45%; color: var(--toxic-green); animation-delay: 7.5s; }

@keyframes floatText {
    0% { opacity: 0; transform: translateX(-100px) translateY(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateX(100px) translateY(-20px); }
}

/* ===================================
   FEATURED GAME SECTION
   =================================== */
.featured-game {
    padding: 6rem 2rem;
    background: rgba(10, 10, 15, 0.9);
    position: relative;
    isolation: isolate;   /* contain filter/animation stacking contexts */
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    /* vw scales with viewport; clamp prevents going below readable min or above 2.5rem */
    font-size: clamp(0.55rem, 2.8vw, 2.5rem);
    letter-spacing: clamp(0px, 0.2vw, 4px);
    color: var(--neon-cyan);
    text-align: center;
    margin-bottom: 4rem;
    text-transform: uppercase;
    text-shadow: 0 0 20px var(--neon-cyan);
    /* break-word only — never break mid-character like "SYNTHET-/IC" */
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    white-space: normal;
}

.game-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.game-card {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.3);
    border-radius: 8px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.project-id {
    font-family: 'Share Tech Mono', monospace;
    color: var(--neon-yellow);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--toxic-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--toxic-green);
    animation: pulse 2s infinite;
}

.status-text {
    font-family: 'Orbitron', sans-serif;
    color: var(--toxic-green);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===================================
   BRAIN IMPLANT GRAPHICS
   =================================== */
.brain-implant-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.brain-implant {
    width: 300px;
    height: 300px;
    filter: drop-shadow(0 0 20px rgba(0, 255, 249, 0.5));
}

.brain-outline {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 2;
    opacity: 0.8;
    animation: brainPulse 4s ease-in-out infinite;
}

.neural-connection {
    stroke: var(--neon-magenta);
    stroke-width: 1.5;
    opacity: 0.6;
    animation: dataFlow 3s ease-in-out infinite;
}

.synapse {
    fill: var(--neon-yellow);
    animation: synapseFlash 2s ease-in-out infinite;
}

.tech-grid {
    stroke: var(--toxic-green);
    stroke-width: 0.5;
    opacity: 0.4;
}

.implant-chip {
    fill: var(--neon-purple);
    stroke: var(--neon-cyan);
    stroke-width: 1;
    animation: chipGlow 3s ease-in-out infinite;
}

.data-stream {
    stroke: var(--neon-cyan);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 10, 5;
    animation: streamFlow 2s linear infinite;
}

.scan-line {
    stroke: var(--blood-red);
    stroke-width: 2;
    animation: brainScan 5s linear infinite;
}

@keyframes brainPulse {
    0%, 100% { stroke-width: 2; opacity: 0.8; }
    50% { stroke-width: 3; opacity: 1; }
}

@keyframes dataFlow {
    0% { opacity: 0.6; stroke-width: 1.5; }
    50% { opacity: 1; stroke-width: 2; }
    100% { opacity: 0.6; stroke-width: 1.5; }
}

@keyframes synapseFlash {
    0%, 100% { opacity: 0.8; r: 3; }
    50% { opacity: 1; r: 4; }
}

@keyframes chipGlow {
    0%, 100% { fill: var(--neon-purple); }
    50% { fill: var(--neon-cyan); }
}

@keyframes streamFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 15; }
}

@keyframes brainScan {
    0% { y1: 50; y2: 50; }
    100% { y1: 250; y2: 250; }
}

.tech-readout {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--neon-cyan);
    border-radius: 4px;
    padding: 1rem;
    font-family: 'Share Tech Mono', monospace;
    min-width: 200px;
}

.readout-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.readout-label {
    color: var(--neon-cyan);
}

.readout-value {
    color: var(--neon-yellow);
    font-weight: bold;
    transition: opacity 0.1s ease;
}

.readout-value.updating {
    animation: readoutFlicker 0.18s ease;
}

@keyframes readoutFlicker {
    0%   { opacity: 1; }
    30%  { opacity: 0.1; color: var(--neon-cyan); }
    60%  { opacity: 0.7; }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .readout-value.updating { animation: none; }
}

.project-title {
    text-align: center;
    margin-top: 2rem;
}

.project-title h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.9rem, 4vw, 2rem);
    color: var(--neon-magenta);
    text-shadow: 0 0 15px var(--neon-magenta);
    margin-bottom: 0.5rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.subtitle {
    font-family: 'Share Tech Mono', monospace;
    color: var(--neon-yellow);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* ===================================
   GAME INFO SECTION
   =================================== */
.game-info {
    padding: 2rem;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 0, 110, 0.3);
    border-radius: 8px;
}

.info-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.classification {
    font-family: 'Share Tech Mono', monospace;
    color: var(--blood-red);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-shadow: 0 0 5px var(--blood-red);
}

.game-info h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.9rem, 4vw, 1.8rem);
    color: var(--neon-cyan);
    text-shadow: 0 0 15px var(--neon-cyan);
    margin-bottom: 1rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.game-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tag {
    background: rgba(0, 255, 249, 0.1);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 3px;
    font-family: 'Share Tech Mono', monospace;
}

.tech-specs {
    margin-bottom: 1.5rem;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    color: #ccc;
}

.spec-icon {
    color: var(--neon-purple);
    font-weight: bold;
}

.game-description {
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #ccc;
}

.status-bar {
    background: rgba(0, 5, 15, 0.85);
    border: 1px solid rgba(0, 255, 249, 0.5);
    border-radius: 4px;
    height: 28px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0, 255, 249, 0.1), inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.status-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        rgba(0, 150, 200, 0.5) 0%,
        rgba(0, 220, 255, 0.75) 35%,
        rgba(0, 255, 249, 0.95) 55%,
        rgba(0, 200, 240, 0.7) 100%
    );
    box-shadow: 0 0 18px rgba(0, 255, 249, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: liquidFill 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards,
               liquidPulse 2.8s ease-in-out 2.8s infinite;
}

/* Top meniscus highlight — makes it look like a liquid surface */
.status-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(200, 255, 255, 0.28) 0%, transparent 100%);
    border-radius: 3px 3px 0 0;
}

/* Moving light gleam across the surface */
.status-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(180, 255, 255, 0.35) 50%,
        transparent 100%
    );
    animation: liquidGleam 2.4s ease-in-out 2.8s infinite;
}

@keyframes liquidFill {
    0%   { width: 0%; }
    100% { width: 50%; }
}

@keyframes liquidPulse {
    0%, 100% {
        box-shadow: 0 0 14px rgba(0, 255, 249, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 28px rgba(0, 255, 249, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        opacity: 0.88;
    }
}

@keyframes liquidGleam {
    0%   { left: -70%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: 105%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .status-bar-fill {
        width: 50%;
        animation: none;
    }
    .status-bar-fill::after { animation: none; }
}

.status-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 1);
    white-space: nowrap;
    z-index: 2;
}

.preorder-locked-wrapper {
    text-align: center;
}

.security-warning-box {
    background: rgba(255, 0, 60, 0.1);
    border: 1px solid var(--blood-red);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.security-icon {
    color: var(--blood-red);
    font-size: 1.2rem;
}

.security-text {
    font-family: 'Orbitron', sans-serif;
    color: var(--blood-red);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.cta-button-locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: #333;
    border-color: #666;
    color: #666;
}

/* ── CTA button mobile ── */
@media (max-width: 600px) {
    .cta-button {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 0.85rem;
        letter-spacing: 1px;
        padding: 0.9rem 1rem;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }
}
@media (max-width: 380px) {
    .cta-button {
        font-size: 0.75rem;
        letter-spacing: 0;
        padding: 0.8rem 0.75rem;
    }
}

/* ===================================
   PHILOSOPHY SECTION
   =================================== */
.philosophy {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #0a0a0f, #1a0a1f);
    position: relative;
}

.philosophy-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.philosophy-content > p {
    font-size: clamp(0.88rem, 2.2vw, 1.2rem);
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.manifesto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.manifesto-item {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.3);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.manifesto-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-purple));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.manifesto-item:hover {
    transform: translateY(-5px);
    border-color: var(--neon-cyan);
    box-shadow: 0 10px 40px rgba(0, 255, 249, 0.2);
    animation: manifestoShimmer 2.5s linear infinite;
}

.manifesto-item:hover::before {
    opacity: 1;
}

/* Neon colour-cycle shimmer on hover */
@keyframes manifestoShimmer {
    0%   { border-color: var(--neon-cyan);    box-shadow: 0 10px 40px rgba(0, 255, 249, 0.25); }
    25%  { border-color: var(--neon-magenta); box-shadow: 0 10px 40px rgba(255, 0, 110, 0.25); }
    50%  { border-color: var(--neon-purple);  box-shadow: 0 10px 40px rgba(184, 41, 255, 0.25); }
    75%  { border-color: var(--neon-yellow);  box-shadow: 0 10px 40px rgba(255, 190, 11, 0.25); }
    100% { border-color: var(--neon-cyan);    box-shadow: 0 10px 40px rgba(0, 255, 249, 0.25); }
}

/* Shimmer the top stripe through the same colour cycle */
.manifesto-item:hover::before {
    opacity: 1;
    animation: manifestoStripe 2.5s linear infinite;
}

@keyframes manifestoStripe {
    0%   { background: linear-gradient(90deg, var(--neon-cyan),    var(--neon-magenta), var(--neon-purple)); }
    33%  { background: linear-gradient(90deg, var(--neon-magenta), var(--neon-purple),  var(--neon-yellow)); }
    66%  { background: linear-gradient(90deg, var(--neon-purple),  var(--neon-yellow),  var(--neon-cyan)); }
    100% { background: linear-gradient(90deg, var(--neon-cyan),    var(--neon-magenta), var(--neon-purple)); }
}

/* Shimmer the h3 text colour on hover */
.manifesto-item:hover h3 {
    animation: manifestoText 2.5s linear infinite;
}

@keyframes manifestoText {
    0%   { color: var(--neon-cyan);    text-shadow: 0 0 14px rgba(0, 255, 249, 0.7); }
    25%  { color: var(--neon-magenta); text-shadow: 0 0 14px rgba(255, 0, 110, 0.7); }
    50%  { color: var(--neon-purple);  text-shadow: 0 0 14px rgba(184, 41, 255, 0.7); }
    75%  { color: var(--neon-yellow);  text-shadow: 0 0 14px rgba(255, 190, 11, 0.7); }
    100% { color: var(--neon-cyan);    text-shadow: 0 0 14px rgba(0, 255, 249, 0.7); }
}

.manifesto-item h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.9rem, 2.4vw, 1.3rem);
    color: var(--neon-cyan);
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.manifesto-item p {
    color: #ccc;
    line-height: 1.6;
    font-size: clamp(0.82rem, 1.8vw, 1rem);
}

/* ── Manifesto flavor line ── */
.manifesto-flavor {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(0, 255, 249, 0.78); /* was 0.5 — ~3.2:1 FAIL → now ~9.8:1 PASS WCAG 1.4.3 */
    letter-spacing: 0.5px;
    margin: 0.1rem 0 0.5rem;
    font-style: italic;
}

/* ===================================
   FINANCIAL TRANSPARENCY BLOCK
   Scoped under .philosophy-content for specificity parity with .manifesto-item
   =================================== */
.philosophy-content .transparency-block {
    margin-top: 4rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.3);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-align: center;
    /* Always shimmer — same as community sourced card */
    animation: manifestoShimmer 2.5s linear infinite;
}

.philosophy-content .transparency-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-purple));
    opacity: 1;
    animation: manifestoStripe 2.5s linear infinite;
}

.philosophy-content .transparency-block:hover {
    transform: translateY(-5px);
}

.philosophy-content .transparency-block .transparency-title {
    animation: manifestoText 2.5s linear infinite;
}

.philosophy-content .transparency-block .transparency-header {
    margin-bottom: 1rem;
}

.philosophy-content .transparency-block .transparency-tag {
    display: block;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.65rem !important;
    color: var(--neon-yellow) !important;
    letter-spacing: 2px;
    opacity: 0.65;
    margin-bottom: 0.6rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Identical to .manifesto-item h3 */
.philosophy-content .transparency-block .transparency-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(0.75rem, 3vw, 1.3rem) !important;
    color: var(--neon-cyan) !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
    transition: color 0.3s ease, text-shadow 0.3s ease;
    word-break: break-word;
    overflow-wrap: anywhere;
    letter-spacing: 2px;
}

.philosophy-content .transparency-block .transparency-sub {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.72rem !important;
    color: var(--neon-purple) !important;
    letter-spacing: 2px;
    opacity: 0.8;
    margin: 0 0 1.5rem;
}

/* Identical to .manifesto-item p */
.philosophy-content .transparency-block .transparency-desc {
    color: #ccc !important;
    line-height: 1.6 !important;
    font-size: 1rem !important;
    font-family: 'Rajdhani', sans-serif !important;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-content .transparency-block .transparency-reports-note {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.72) !important; /* was 0.35 — ~3.1:1 FAIL → now ~7.2:1 PASS WCAG 1.4.3 */
    letter-spacing: 0.5px;
    margin: 0;
}

.philosophy-content .transparency-block .transparency-coming {
    display: block;
    margin-top: 0.3rem;
    color: var(--neon-yellow) !important;
    opacity: 0.6;
    font-size: 0.7rem !important;
    letter-spacing: 1px;
}

@media (max-width: 500px) {
    .philosophy-content .transparency-block { padding: 1.75rem 1.25rem; }
}

/* ===================================
   PATREON / SUPPORT SECTION
   =================================== */
.patreon-section {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #0a0a0f, #0f0a1f);
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Top gradient rule — matches section divider pattern site-wide */
.section-top-rule {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), var(--neon-purple), transparent);
    opacity: 0.6;
}

/* Classification tag — matches [PROJECT_ID] style used in featured section */
.section-classify {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--neon-yellow);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    opacity: 0.7;
    word-break: break-word;
    overflow-wrap: break-word;
}

.patreon-content {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.patreon-tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.5rem, 1.9vw, 0.95rem);
    color: var(--neon-purple);
    letter-spacing: clamp(0px, 0.5vw, 3px);
    margin-bottom: 1.25rem;
    text-shadow: 0 0 10px var(--neon-purple);
    white-space: nowrap;
    overflow: hidden;
}

.patreon-description {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    color: rgba(200, 210, 230, 0.85);
    line-height: 1.9;
    max-width: 680px;
    margin: 0 auto 3.5rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(0, 255, 249, 0.1);
}

/* ===================================
   PATRON TIER GRID — scoped to .patreon-section to win all specificity battles
   =================================== */
.patreon-section .patron-tiers {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Tier card base ── */
.patreon-section .tier-card {
    background: rgba(4, 8, 16, 0.92) !important;
    border: 1px solid rgba(0, 255, 249, 0.25) !important;
    padding: 2rem 1.5rem 1.75rem !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
    overflow: hidden !important;
    text-align: left !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    width: auto !important;
    float: none !important;
}

/* Scan-line overlay */
.patreon-section .tier-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 255, 249, 0.025) 3px,
        rgba(0, 255, 249, 0.025) 4px
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Corner bracket top-right */
.patreon-section .tier-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 14px !important; height: 14px !important;
    background: rgba(0, 255, 249, 0.35) !important;
    clip-path: polygon(100% 0, 100% 100%, 0 0) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Ensure card content sits above overlays */
.patreon-section .tier-card > * {
    position: relative !important;
    z-index: 2 !important;
}

.patreon-section .tier-card:hover {
    border-color: var(--neon-cyan) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 0 0 1px rgba(0, 255, 249, 0.4),
                0 16px 48px rgba(0, 255, 249, 0.18),
                inset 0 0 30px rgba(0, 255, 249, 0.05) !important;
}

/* ── Featured card ── */
.patreon-section .tier-card.tier-featured {
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 28px rgba(255, 0, 110, 0.22),
                inset 0 0 20px rgba(255, 0, 110, 0.05) !important;
    animation: featuredPulse 3s ease-in-out infinite !important;
}
.patreon-section .tier-card.tier-featured::before {
    background: rgba(255, 0, 110, 0.5) !important;
}
.patreon-section .tier-card.tier-featured::after {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(255, 0, 110, 0.03) 3px, rgba(255, 0, 110, 0.03) 4px
    ) !important;
}
.patreon-section .tier-card.tier-featured:hover {
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 0 1px rgba(255, 0, 110, 0.5),
                0 16px 56px rgba(255, 0, 110, 0.32),
                inset 0 0 30px rgba(255, 0, 110, 0.08) !important;
}

@keyframes featuredPulse {
    0%, 100% { box-shadow: 0 0 28px rgba(255, 0, 110, 0.22), inset 0 0 20px rgba(255, 0, 110, 0.05); }
    50%       { box-shadow: 0 0 48px rgba(255, 0, 110, 0.40), inset 0 0 30px rgba(255, 0, 110, 0.10); }
}

/* ── Free card ── */
.patreon-section .tier-card.tier-free {
    border-color: var(--neon-orange) !important;
}
.patreon-section .tier-card.tier-free::before {
    background: rgba(255, 115, 0, 0.45) !important;
}
.patreon-section .tier-card.tier-free::after {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(255, 115, 0, 0.03) 3px, rgba(255, 115, 0, 0.03) 4px
    ) !important;
}
.patreon-section .tier-card.tier-free:hover {
    border-color: var(--neon-orange) !important;
    box-shadow: 0 0 0 1px rgba(255, 115, 0, 0.45),
                0 8px 32px rgba(255, 115, 0, 0.2) !important;
}
.patreon-section .tier-card.tier-free .tier-rank  { color: rgba(255, 115, 0, 0.65) !important; }
.patreon-section .tier-card.tier-free .tier-name  {
    color: var(--neon-orange) !important;
    text-shadow: 0 0 14px rgba(255, 115, 0, 0.55) !important;
}
.patreon-section .tier-card.tier-free .tier-flavor { color: rgba(255, 165, 80, 0.90) !important; }
.patreon-section .tier-card.tier-free .tier-perks li::before { color: var(--neon-orange) !important; }

/* ── Elite card ── */
.patreon-section .tier-card.tier-elite {
    border-color: var(--neon-purple) !important;
}
.patreon-section .tier-card.tier-elite::before {
    background: rgba(184, 41, 255, 0.45) !important;
}
.patreon-section .tier-card.tier-elite::after {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(184, 41, 255, 0.03) 3px, rgba(184, 41, 255, 0.03) 4px
    ) !important;
}
.patreon-section .tier-card.tier-elite:hover {
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 0 1px rgba(184, 41, 255, 0.45),
                0 16px 48px rgba(184, 41, 255, 0.28),
                inset 0 0 30px rgba(184, 41, 255, 0.06) !important;
}

/* ── Badge ── */
.patreon-section .tier-badge {
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--neon-magenta) !important;
    color: #000 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    padding: 0.2rem 0.85rem !important;
    white-space: nowrap !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%) !important;
    text-shadow: none !important;
    z-index: 3 !important;
}

/* ── Tier rank label ── */
.patreon-section .tier-rank {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.7rem !important;
    color: rgba(0, 255, 249, 0.55) !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    background: none !important;
}
.patreon-section .tier-card.tier-featured .tier-rank { color: rgba(255, 0, 110, 0.65) !important; }
.patreon-section .tier-card.tier-elite .tier-rank    { color: rgba(184, 41, 255, 0.65) !important; }

/* ── Tier name ── */
.patreon-section .tier-name {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: var(--neon-cyan) !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 14px rgba(0, 255, 249, 0.55) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    background: none !important;
}
.patreon-section .tier-card.tier-featured .tier-name {
    color: var(--neon-magenta) !important;
    text-shadow: 0 0 14px rgba(255, 0, 110, 0.55) !important;
}
.patreon-section .tier-card.tier-elite .tier-name {
    color: var(--neon-purple) !important;
    text-shadow: 0 0 14px rgba(184, 41, 255, 0.55) !important;
}

/* ── Tier description ── */
.patreon-section .tier-description {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: clamp(0.72rem, 1.2vw, 0.82rem) !important;
    color: rgba(200, 210, 230, 0.80) !important;
    line-height: 1.55 !important;
    margin: 0.5rem 0 0.75rem !important;
}

/* ── Tier flavor line ── */
/* Colors chosen for ≥4.5:1 contrast on rgba(4,8,16,0.92) card bg — WCAG 1.4.3 AA */
.patreon-section .tier-flavor {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.72rem !important;
    color: rgba(0, 255, 249, 0.75) !important; /* ~9.2:1 — was 0.45 (4.1:1, fail) */
    letter-spacing: 0.5px !important;
    margin: 0.15rem 0 0.4rem !important;
    font-style: italic !important;
}
.patreon-section .tier-card.tier-featured .tier-flavor { color: rgba(255, 140, 185, 0.90) !important; } /* light pink ~7.6:1 — was 2.1:1 */
.patreon-section .tier-card.tier-elite    .tier-flavor { color: rgba(200, 150, 255, 0.90) !important; } /* light purple ~8.5:1 — was 2.0:1 */

/* ── Price ── */
.patreon-section .tier-price {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(1.4rem, 3.8vw, 2.2rem) !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1 !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 0.6rem !important;
    background: none !important;
}
.patreon-section .tier-price span {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: 1px !important;
}

/* ── Perks list ── */
.patreon-section .tier-perks {
    list-style: none !important;
    margin: 0.25rem 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    flex: 1 !important;
    background: none !important;
}
.patreon-section .tier-perks li {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    padding: 0.45rem 0 0.45rem 1.1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative !important;
    line-height: 1.4 !important;
    background: none !important;
    list-style: none !important;
}
.patreon-section .tier-perks li:last-child { border-bottom: none !important; }
.patreon-section .tier-perks li::before {
    content: '▸' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--neon-cyan) !important;
    font-size: 0.7rem !important;
    top: 0.5rem !important;
}
.patreon-section .tier-card.tier-featured .tier-perks li::before { color: var(--neon-magenta) !important; }
.patreon-section .tier-card.tier-elite    .tier-perks li::before { color: var(--neon-purple) !important; }

/* ── Hivemind lottery perk ── */
.patreon-section .tier-perk-lottery {
    margin-top: 0.5rem !important;
    padding: 0.75rem 0.75rem 0.75rem 1.1rem !important;
    background: rgba(184, 41, 255, 0.07) !important;
    border: 1px solid rgba(184, 41, 255, 0.25) !important;
    border-radius: 4px !important;
    line-height: 1.5 !important;
}

.perk-lottery-label {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--neon-purple);
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(184, 41, 255, 0.6);
    margin-bottom: 0.3rem;
}

.perk-lottery-list {
    list-style: none !important;
    padding: 0.35rem 0 0.35rem 0.75rem !important;
    margin: 0.35rem 0 !important;
    border-left: 2px solid rgba(184, 41, 255, 0.3) !important;
}

.perk-lottery-list li {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.15rem 0 0.15rem 0.75rem !important;
    border-bottom: none !important;
    background: none !important;
}

.perk-lottery-list li::before {
    content: '◆' !important;
    color: var(--neon-purple) !important;
    font-size: 0.5rem !important;
    top: 0.3rem !important;
}

.perk-lottery-note {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: rgba(184, 41, 255, 0.55);
    letter-spacing: 0.5px;
    font-style: italic;
    margin-top: 0.4rem;
}

.patreon-cta-btn {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    background: transparent;
    border: 2px solid var(--neon-magenta);
    color: var(--neon-magenta);
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px var(--neon-magenta);
    margin-bottom: 1rem;
}

.patreon-cta-btn:hover {
    background: var(--neon-magenta);
    color: var(--deep-black);
    box-shadow: 0 0 40px var(--neon-magenta);
    text-shadow: none;
    transform: translateY(-2px);
}

.patreon-note {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.footer-patreon-link {
    color: var(--neon-magenta) !important;
    text-shadow: 0 0 6px rgba(255, 0, 110, 0.4);
}

/* ── 5-column compact override — reduces padding/fonts when all 5 cards are active ── */
@media (min-width: 1601px) {
    .patreon-section .patron-tiers {
        gap: 1rem !important;           /* tighter gap gives each card ~6px more width */
    }
    .patreon-section .tier-card {
        padding: 1.5rem 1rem 1.25rem !important;
    }
    .patreon-section .tier-name {
        font-size: 0.7rem !important;
        letter-spacing: 0px !important; /* Orbitron at 0.7rem + 0 tracking fits the longest name */
    }
    .patreon-section .tier-description {
        font-size: 0.68rem !important;
    }
    .patreon-section .tier-flavor {
        font-size: 0.65rem !important;
    }
    .patreon-section .tier-price {
        font-size: clamp(1.1rem, 2.4vw, 1.7rem) !important;
    }
    .patreon-section .tier-perks li {
        font-size: 0.72rem !important;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
}

/* Patreon mobile — scoped to avoid collisions */
@media (max-width: 1600px) {
    .patreon-section .patron-tiers { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 1400px) {
    .patreon-section .patron-tiers { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .patreon-section .patron-tiers { grid-template-columns: 1fr !important; }
    .patreon-cta-btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.8rem !important;
        letter-spacing: 1px;
        padding: 1rem 0.75rem;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    /* patreon-tagline sizing owned by clamp() */
}
@media (max-width: 380px) {
    .patreon-cta-btn {
        font-size: 0.7rem !important;
        letter-spacing: 0 !important;
        padding: 0.85rem 0.5rem !important;
    }
}

/* ===================================
   EMAIL SIGNUP SECTION
   =================================== */
/* ── Binary ticker ── */
.binary-ticker {
    width: 100%;
    overflow: hidden;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(57, 255, 20, 0.15);
    border-bottom: 1px solid rgba(57, 255, 20, 0.15);
    background: rgba(57, 255, 20, 0.03);
    /* No focusable content — pointer-events off keeps it inert */
    pointer-events: none;
    user-select: none;
}

.binary-ticker-inner {
    display: inline-block;
    white-space: nowrap;
}

.binary-ticker-inner {
    animation: binaryScroll 90s linear infinite;
}

.binary-ticker-inner span {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    color: #39ff14; /* toxic neon green */
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.7), 0 0 14px rgba(57, 255, 20, 0.3);
    letter-spacing: 1px;
}

@keyframes binaryScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% = scroll one full duplicate then reset */
}

@media (prefers-reduced-motion: reduce) {
    /* Pause rather than remove — text stays visible, no motion for sensitive users */
    .binary-ticker-inner { animation-play-state: paused; }
}

.email-signup {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #0a0a0f, #0f0a1f);
    position: relative;
    text-align: center;
}

.signup-content {
    max-width: 700px;
    margin: 0 auto;
}


/* ── TRANSMISSION heading — neon red glitch ───────────────────────────── */
#signup-heading {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 900;
    color: #ff003c;
    text-shadow:
        0 0 8px #ff003c,
        0 0 20px #ff003c,
        0 0 40px #ff003c;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    position: relative;
    animation: transmission-glitch 4s infinite;
}

#signup-heading::before,
#signup-heading::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; right: 0;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
}

#signup-heading::before {
    color: #00f0ff;
    text-shadow: -2px 0 #00f0ff;
    animation: glitch-slice-top 4s infinite;
}

#signup-heading::after {
    color: #ff003c;
    text-shadow: 2px 0 #ff8800;
    animation: glitch-slice-bot 4s infinite;
}

@keyframes transmission-glitch {
    0%, 88%, 100% { transform: none; opacity: 1; }
    89%  { transform: skewX(-4deg) translateX(3px); opacity: 0.9; }
    90%  { transform: skewX(3deg)  translateX(-2px); }
    91%  { transform: none; }
    93%  { transform: translateX(-3px) skewX(2deg); opacity: 0.85; }
    94%  { transform: none; opacity: 1; }
}

@keyframes glitch-slice-top {
    0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
    89% { clip-path: inset(0 0 55% 0); transform: translateX(-4px); }
    90% { clip-path: inset(5% 0 60% 0); transform: translateX(3px); }
    91% { clip-path: inset(0 0 100% 0); }
    93% { clip-path: inset(10% 0 50% 0); transform: translateX(-2px); }
    94% { clip-path: inset(0 0 100% 0); transform: none; }
}

@keyframes glitch-slice-bot {
    0%, 88%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
    89% { clip-path: inset(60% 0 0 0); transform: translateX(4px); }
    90% { clip-path: inset(55% 0 5% 0); transform: translateX(-3px); }
    91% { clip-path: inset(100% 0 0 0); }
    93% { clip-path: inset(50% 0 10% 0); transform: translateX(2px); }
    94% { clip-path: inset(100% 0 0 0); transform: none; }
}

.signup-tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.5rem, 1.9vw, 1rem);
    word-break: break-word;
    overflow-wrap: break-word;
    color: var(--neon-magenta);
    letter-spacing: clamp(0px, 0.5vw, 3px);
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px var(--neon-magenta);
}

.signup-description {
    color: #ccc;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.signup-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.signup-input-group {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 560px;
}

.signup-input-group input[type="email"] {
    flex: 1;
    padding: 1rem 1.2rem;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 255, 249, 0.4);
    border-right: none;
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    border-radius: 4px 0 0 4px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 0; /* prevent overflow on mobile */
}

.signup-input-group input[type="email"]:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 249, 0.3);
}

.signup-input-group input[type="email"]::placeholder {
    color: rgba(0, 255, 249, 0.35);
}

.signup-btn {
    padding: 1rem 1.5rem;
    background: transparent;
    border: 2px solid var(--neon-magenta);
    color: var(--neon-magenta);
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-shadow: 0 0 8px var(--neon-magenta);
}

.signup-btn:hover:not(:disabled) {
    background: var(--neon-magenta);
    color: var(--deep-black);
    box-shadow: 0 0 25px var(--neon-magenta);
    text-shadow: none;
}

.signup-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.signup-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 1px;
    min-height: 1.4em;
}

.signup-status.status-success {
    color: var(--toxic-green);
    text-shadow: 0 0 8px var(--toxic-green);
}

.signup-status.status-error {
    color: var(--blood-red);
    text-shadow: 0 0 8px var(--blood-red);
}

.signup-disclaimer {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: #555;
    margin-top: 1rem;
    letter-spacing: 1px;
}
.signup-discord-note {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.75rem;
    letter-spacing: 0.5px;
}
.signup-discord-note a {
    color: rgba(0, 255, 249, 0.65);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 255, 249, 0.25);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.signup-discord-note a:hover,
.signup-discord-note a:focus-visible {
    color: var(--neon-cyan);
    border-bottom-color: var(--neon-cyan);
    outline: none;
}

@media (max-width: 600px) {
    .signup-input-group {
        flex-direction: column;
        gap: 0.8rem;
    }

    .signup-input-group input[type="email"] {
        border-right: 2px solid rgba(0, 255, 249, 0.4);
        border-radius: 4px;
    }

    .signup-btn {
        border-radius: 4px;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        letter-spacing: 0;
        font-size: 0.85rem;
    }

    .signup-input-group input[type="email"]:focus {
        border-color: var(--neon-cyan);
    }
}

/* ===================================
   CONTACT SECTION
   =================================== */
.contact {
    padding: 6rem 2rem;
    background: rgba(10, 10, 15, 0.9);
    text-align: center;
    position: relative;
}

.contact p {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-email {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.3rem;
    color: var(--neon-cyan);
    word-break: break-all;
    text-decoration: none;
    padding: 1rem 2rem;
    border: 2px solid var(--neon-cyan);
    border-radius: 4px;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.contact-email:hover {
    background: rgba(0, 255, 249, 0.1);
    box-shadow: 0 0 30px rgba(0, 255, 249, 0.3);
    text-shadow: 0 0 10px var(--neon-cyan);
}

/* ===================================
   FOOTER
   =================================== */
footer {
    background: var(--deep-black);
    border-top: 1px solid rgba(0, 255, 249, 0.3);
    padding: 2rem;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

footer nav ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

footer nav a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Rajdhani', sans-serif;
}

footer nav a:hover {
    color: var(--neon-cyan);
}

footer p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 768px) {
    .hero h1,
    .hero .hero-join {
        /* clamp() handles font-size — only letter-spacing needs clamping here */
        letter-spacing: clamp(0px, 0.3vw, 3px);
    }

    .section-title {
        /* Tighter scale at mobile — Orbitron is wide; vw × 4.2 keeps long strings on one line */
        font-size: clamp(0.5rem, 4.2vw, 1.6rem);
        letter-spacing: 0;
        margin-bottom: 3rem;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .game-showcase {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .brain-implant {
        width: 250px;
        height: 250px;
    }

    .manifesto {
        grid-template-columns: 1fr;
    }

    .floating-text {
        display: none;
    }
    /* header layout owned by the nav-toggle 1100px block above — no override here */
}

@media (max-width: 480px) {
    .hero {
        padding: 6rem 0.75rem 2rem;
    }

    /* Reduce side padding on ALL content sections so titles have room */
    .featured-game,
    .philosophy,
    .patreon-section,
    .email-signup,
    .contact {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hero h1,
    .hero .hero-join {
        letter-spacing: 0; /* clamp() handles font-size */
    }

    /* tagline sizing owned by clamp() */

    /* Narrow viewport — scale more aggressively so nothing wraps mid-word */
    .section-title {
        font-size: clamp(0.5rem, 4vw, 1.35rem);
        letter-spacing: 0;
        margin-bottom: 2rem;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .section-classify {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* tagline letter-spacing and sizing owned by clamp() */

    .classification {
        font-size: 0.7rem;
        letter-spacing: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .game-card,
    .game-info {
        padding: 1rem;
    }

    .brain-implant {
        width: 200px;
        height: 200px;
    }
}

/* ── 380px — smallest phones (iPhone SE etc.) ── */
@media (max-width: 380px) {
    .hero {
        padding: 5rem 0.5rem 1.5rem;
    }

    .featured-game,
    .philosophy,
    .patreon-section,
    .email-signup,
    .contact {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .hero h1,
    .hero .hero-join {
        letter-spacing: 0; /* clamp() handles font-size */
    }

    .section-title {
        /* Smallest viewport — 3.5vw ensures even "[ SYNTHETIC::PROTOCOL ]" fits at 320px */
        font-size: clamp(0.5rem, 3.5vw, 1.1rem);
        letter-spacing: 0;
        margin-bottom: 1.5rem;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .section-classify {
        font-size: 0.55rem;
        letter-spacing: 0;
    }
}

/* ===================================
   TABLET — 769px to 1400px
   iPad Mini portrait (768px) hits mobile above.
   iPad Air portrait (820px), iPad Pro portrait (1024px), iPad Pro landscape (1366px),
   and narrow laptops up to 1400px all land here.
   Nav hamburger is already active for this entire range (≤1400px block above).
   =================================== */
@media (min-width: 769px) and (max-width: 1400px) {

    /* Logo — between desktop (196px) and mobile (130px) */
    .logo-img,
    .logo svg {
        width: 160px;
        height: 160px;
    }

    /* Hero — slightly less padding than desktop */
    .hero {
        padding: 6rem 2rem 3rem;
    }

    /* Game showcase — 2-col layout */
    .game-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .brain-implant {
        width: 260px;
        height: 260px;
    }

    .game-card,
    .game-info {
        padding: 1.5rem;
    }

    /* Manifesto — lock to 2-col so auto-fit doesn't reflow oddly */
    .manifesto {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section horizontal padding — stop content touching edges */
    .featured-game,
    .philosophy,
    .patreon-section,
    .email-signup,
    .contact {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ===================================
   AUGMENTATION::UPDATES PAGE
   Scoped to .page-updates body class
   =================================== */

/* ── Hide grid, use gradient background on updates page ────── */
.page-updates .bg-grid {
    display: none;
}
.page-updates .scanline {
    display: none;
}
body.page-updates {
    background: linear-gradient(160deg, #0a0a0f 0%, #0d0a1a 40%, #0a0f14 70%, #0a0a0f 100%);
}

/* ── Hero ────────────────────────────────────────────────── */
.updates-hero {
    text-align: center;
    padding: 6rem 2rem 2.5rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.12);
    margin-bottom: 0;
}
.updates-terminal-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    color: rgba(0, 255, 249, 0.55);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.page-updates .term-prompt  { color: rgba(0, 255, 249, 0.7); }
.page-updates .term-at      { color: rgba(255,255,255,0.4); }
.page-updates .term-path    { color: rgba(148, 0, 255, 0.8); }
.page-updates .term-dollar  { color: rgba(255,255,255,0.5); margin: 0 0.4em; }
.page-updates .term-cmd     { color: rgba(255,255,255,0.85); }
.page-updates .term-cursor  {
    display: inline-block;
    color: var(--neon-cyan);
    animation: termBlink 1s steps(1) infinite;
}
@keyframes termBlink { 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
.updates-title {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    margin-bottom: 0.5rem;
}

/* ── Archive nav ─────────────────────────────────────────── */
.upd-archive-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 255, 249, 0.08);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.upd-archive-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 249, 0.35);
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}
.upd-archive-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.upd-archive-link {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    color: rgba(0, 255, 249, 0.5);
    border: 1px solid rgba(0, 255, 249, 0.15);
    padding: 0.3em 0.7em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    letter-spacing: 0.5px;
}
.upd-archive-link:hover {
    color: var(--neon-cyan);
    border-color: rgba(0, 255, 249, 0.45);
    background: rgba(0, 255, 249, 0.06);
}
.upd-archive-link--active {
    color: var(--deep-black);
    background: rgba(0, 255, 249, 0.85);
    border-color: var(--neon-cyan);
    font-weight: 700;
    pointer-events: none;
}
.upd-archive-link:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .upd-archive-nav   { padding: 0.85rem 1rem; gap: 0.5rem; }
    .upd-archive-label { display: none; }
}

/* ── Twin brain neural link ──────────────────────────────── */
.upd-brain-banner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 3rem 2rem 2rem;
    position: relative;
    flex-wrap: nowrap;
}

/* ── Brain node cards — mirrors .game-card from homepage ── */
.upd-node-card {
    width: 200px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.3);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Scan-line overlay */
.upd-node-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0, 255, 249, 0.012) 2px, rgba(0, 255, 249, 0.012) 4px
    );
    pointer-events: none;
    z-index: 0;
    border-radius: 8px;
}
.upd-node-card > * { position: relative; z-index: 1; }

/* ── Scale down homepage shared elements inside small cards ── */
.upd-node-card .card-header {
    margin-bottom: 0.5rem;
}
.upd-node-card .project-id {
    font-size: clamp(0.58rem, 1.1vw, 0.72rem);
}
.upd-node-card .status-text {
    font-size: clamp(0.52rem, 0.9vw, 0.62rem);
}
.upd-node-card .status-dot {
    width: 6px;
    height: 6px;
}
.upd-node-card .status-indicator {
    gap: 0.3rem;
}

/* Right card — magenta accent */
.upd-node-card--right {
    border-color: rgba(255, 0, 110, 0.3);
}
.upd-node-card--right::after {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(255, 0, 110, 0.012) 2px, rgba(255, 0, 110, 0.012) 4px
    );
}
.upd-node-card--right .project-id { color: var(--neon-magenta); }

/* Brain SVG scaled down inside the card */
.upd-implant-wrap {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.upd-implant-wrap .brain-implant {
    width: 140px;
    height: 140px;
    filter: drop-shadow(0 0 10px rgba(0, 255, 249, 0.45));
}
.upd-node-card--right .upd-implant-wrap .brain-implant {
    filter: drop-shadow(0 0 10px rgba(255, 0, 110, 0.45));
}

/* Readout box inside card */
.upd-readout {
    min-width: unset;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.7rem;
    box-sizing: border-box;
}
.upd-readout .readout-line {
    margin-bottom: 0.25rem;
    font-size: 0.68rem;
}
.upd-readout--right {
    border-color: var(--neon-magenta);
}

/* Node title (below readout) */
.upd-node-title {
    margin-top: 0.75rem;
    text-align: center;
}
.upd-node-title h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.4);
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}
.upd-node-card--right .upd-node-title h3 {
    color: var(--neon-magenta);
    text-shadow: 0 0 8px rgba(255, 0, 110, 0.4);
}
.upd-node-title .subtitle {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.5px;
}
.upd-val--active {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.5);
}

/* Neural channel between the two cards */
.upd-neural-channel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 60px;
    max-width: 220px;
    padding: 0 0.5rem;
    align-self: center;
}
.upd-channel-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem;
    color: rgba(0, 255, 249, 0.22);
    letter-spacing: 1px;
    white-space: nowrap;
}
.upd-signal-wave {
    width: 100%;
    height: 46px;
    overflow: visible;
}
.upd-signal-base {
    fill: none;
    stroke: rgba(0, 255, 249, 0.12);
    stroke-width: 1;
    stroke-linecap: round;
}
.upd-signal-pulse {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 40 320;
    stroke-dashoffset: 360;
    animation: neuralPulse 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(0, 255, 249, 0.75));
}
@keyframes neuralPulse {
    0%   { stroke-dashoffset: 360; opacity: 0; }
    8%   { opacity: 0.9; }
    92%  { opacity: 0.9; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .upd-signal-pulse {
        animation: none;
        stroke-dashoffset: 0;
        stroke-dasharray: none;
        opacity: 0.25;
    }
}

/* ── Weapon silhouettes — phase in/out ───────────────────── */
.upd-weapon {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: weaponPhase var(--wpn-dur, 12s) ease-in-out var(--wpn-delay, 0s) infinite;
    transform: rotate(var(--wpn-rot, 0deg));
    filter: drop-shadow(0 0 6px rgba(0, 255, 249, 0.3));
}
@keyframes weaponPhase {
    0%   { opacity: 0; }
    15%  { opacity: var(--wpn-op, 0.07); }
    85%  { opacity: var(--wpn-op, 0.07); }
    100% { opacity: 0; }
}

/* ── Floating cyberpunk text ─────────────────────────────── */
.upd-float-term {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: var(--ft-size, 0.6rem);
    color: rgba(0, 255, 249, var(--ft-op, 0.08));
    letter-spacing: 2px;
    opacity: 0;
    animation: floatTerm var(--ft-dur, 9s) ease-in-out var(--ft-delay, 0s) infinite;
    white-space: nowrap;
    transform: rotate(var(--ft-rot, 0deg));
}
@keyframes floatTerm {
    0%   { opacity: 0;                  transform: translateY(0)    rotate(var(--ft-rot, 0deg)); }
    12%  { opacity: var(--ft-op, 0.08); }
    80%  { opacity: var(--ft-op, 0.08); }
    100% { opacity: 0;                  transform: translateY(-55px) rotate(var(--ft-rot, 0deg)); }
}

/* ── Panels section ──────────────────────────────────────── */
.upd-panels-section {
    padding: 0 2rem 5rem;
    position: relative;
}
.upd-panels-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 2.5rem;
}

/* ── Three-column container grid ─────────────────────────── */
.upd-panels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* ── Base neon container — mirrors homepage tier-card ─────── */
.upd-container {
    background: rgba(4, 8, 16, 0.92);
    border: 1px solid rgba(0, 255, 249, 0.25);
    padding: 2rem 1.5rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.upd-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0, 255, 249, 0.015) 3px, rgba(0, 255, 249, 0.015) 4px
    );
    pointer-events: none;
    z-index: 1;
}
.upd-container::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: clamp(10px, 1.5vw, 18px);
    height: clamp(10px, 1.5vw, 18px);
    border-top: 2px solid rgba(0, 255, 249, 0.5);
    border-right: 2px solid rgba(0, 255, 249, 0.5);
    z-index: 2;
}
.upd-container > * { position: relative; z-index: 2; }
.upd-container:hover {
    border-color: var(--neon-cyan);
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(0, 255, 249, 0.3),
                0 12px 40px rgba(0, 255, 249, 0.12),
                inset 0 0 20px rgba(0, 255, 249, 0.03);
}

/* ── Magenta variant ──────────────────────────────────────── */
.upd-container--magenta {
    border-color: rgba(255, 0, 110, 0.28);
}
.upd-container--magenta::after {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(255, 0, 110, 0.015) 3px, rgba(255, 0, 110, 0.015) 4px
    );
}
.upd-container--magenta::before { border-color: rgba(255, 0, 110, 0.5); }
.upd-container--magenta:hover {
    border-color: var(--neon-magenta);
    box-shadow: 0 0 0 1px rgba(255, 0, 110, 0.3),
                0 12px 40px rgba(255, 0, 110, 0.12),
                inset 0 0 20px rgba(255, 0, 110, 0.03);
}

/* ── Purple variant ───────────────────────────────────────── */
.upd-container--purple {
    border-color: rgba(148, 0, 255, 0.28);
}
.upd-container--purple::after {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(148, 0, 255, 0.015) 3px, rgba(148, 0, 255, 0.015) 4px
    );
}
.upd-container--purple::before { border-color: rgba(148, 0, 255, 0.5); }
.upd-container--purple:hover {
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 1px rgba(148, 0, 255, 0.3),
                0 12px 40px rgba(148, 0, 255, 0.12),
                inset 0 0 20px rgba(148, 0, 255, 0.03);
}

/* ── Container internals ──────────────────────────────────── */
.upd-container-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.82rem, 1.8vw, 1rem);
    font-weight: 700;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(0, 255, 249, 0.3);
    margin-bottom: 0.4rem;
    word-break: normal;
    overflow-wrap: break-word;
}
.upd-container--magenta .upd-container-title {
    color: var(--neon-magenta);
    text-shadow: 0 0 12px rgba(255, 0, 110, 0.3);
}
.upd-container--purple .upd-container-title {
    color: var(--neon-purple);
    text-shadow: 0 0 12px rgba(148, 0, 255, 0.3);
}
.upd-container-flavor {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.upd-container-body {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upd-empty-state {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.18);
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 2.2;
}
.upd-state-label {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.65rem;
    letter-spacing: 1px;
}
.upd-state-sub {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

/* ── Glitch states: CYCLE IN PROGRESS (red) + CHECK BACK (cyan) ── */
.upd-glitch-red,
.upd-glitch-cyan {
    display: inline-block;
    position: relative;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    animation: updGlitchBase 4s infinite;
}
.upd-glitch-red {
    color: #ff2244;
    text-shadow: 0 0 10px rgba(255, 34, 68, 0.7);
}
.upd-glitch-cyan {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.7);
}
.upd-glitch-red::before,
.upd-glitch-red::after,
.upd-glitch-cyan::before,
.upd-glitch-cyan::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}
.upd-glitch-red::before {
    left: 2px;
    text-shadow: -1px 0 rgba(255, 200, 0, 0.8);
    animation: updGlitchA 4s infinite linear alternate-reverse;
    clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
    opacity: 0;
}
.upd-glitch-red::after {
    left: -2px;
    text-shadow: 1px 0 rgba(255, 80, 0, 0.7);
    animation: updGlitchB 4.5s infinite linear alternate-reverse;
    clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
    opacity: 0;
}
.upd-glitch-cyan::before {
    left: 2px;
    text-shadow: -1px 0 rgba(255, 0, 110, 0.8);
    animation: updGlitchA 5s infinite linear alternate-reverse;
    clip-path: polygon(0 15%, 100% 15%, 100% 45%, 0 45%);
    opacity: 0;
}
.upd-glitch-cyan::after {
    left: -2px;
    text-shadow: 1px 0 rgba(148, 0, 255, 0.8);
    animation: updGlitchB 5.5s infinite linear alternate-reverse;
    clip-path: polygon(0 60%, 100% 60%, 100% 88%, 0 88%);
    opacity: 0;
}
@keyframes updGlitchBase {
    0%, 91%, 100% { transform: translate(0); }
    92%  { transform: translate(-1px, 1px); }
    94%  { transform: translate(1px, -1px); }
    96%  { transform: translate(-1px, 0); }
    98%  { transform: translate(0); }
}
@keyframes updGlitchA {
    0%, 87%, 100% { opacity: 0; }
    88%  { opacity: 0.85; clip-path: polygon(0 15%, 100% 15%, 100% 40%, 0 40%); }
    91%  { opacity: 0.85; clip-path: polygon(0 30%, 100% 30%, 100% 55%, 0 55%); }
    93%  { opacity: 0; }
}
@keyframes updGlitchB {
    0%, 89%, 100% { opacity: 0; }
    90%  { opacity: 0.75; clip-path: polygon(0 50%, 100% 50%, 100% 72%, 0 72%); }
    93%  { opacity: 0.75; clip-path: polygon(0 62%, 100% 62%, 100% 90%, 0 90%); }
    95%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .upd-glitch-red,
    .upd-glitch-cyan { animation: none; }
    .upd-glitch-red::before,
    .upd-glitch-red::after,
    .upd-glitch-cyan::before,
    .upd-glitch-cyan::after { display: none; }
}

/* ── CTA ──────────────────────────────────────────────────── */
.upd-cta-wrap {
    text-align: center;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid rgba(0, 255, 249, 0.1);
}
.upd-cta-tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
}

/* ── Nav footer ──────────────────────────────────────────── */
.updates-nav-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(0, 255, 249, 0.1);
    max-width: 1100px;
    margin: 0 auto;
}

/* ── REVERT_DATA_STREAM — back button ───────────────────── */
.forum-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    color: var(--neon-cyan);
    text-decoration: none;
    border: 1px solid rgba(0, 255, 249, 0.35);
    padding: 0.55rem 1.1rem;
    letter-spacing: 1.5px;
    position: relative;
    transition: color 0.25s, border-color 0.25s, box-shadow 0.25s;
    background: rgba(0, 255, 249, 0.04);
    cursor: pointer;
}
.forum-back-home::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 10px; height: 10px;
    border-top: 2px solid var(--neon-cyan);
    border-left: 2px solid var(--neon-cyan);
}
.forum-back-home::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 10px; height: 10px;
    border-bottom: 2px solid var(--neon-cyan);
    border-right: 2px solid var(--neon-cyan);
}
.forum-back-home:hover {
    color: #fff;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 14px rgba(0, 255, 249, 0.25);
    background: rgba(0, 255, 249, 0.08);
}

/* ── END_OF_LOG — subtle glitch outside the button ───────── */
.updates-eof {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.16);
    letter-spacing: 1px;
    display: inline-block;
    position: relative;
    animation: updGlitchBase 10s infinite;
}
@media (prefers-reduced-motion: reduce) {
    .updates-eof { animation: none; }
}

/* ── Binary float — occasional 0/1 digits drifting upward ── */
.upd-binary-float {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.upd-bin-digit {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: rgba(0, 255, 249, var(--op, 0.1));
    animation: updBinFloat var(--dur, 6s) ease-in var(--delay, 0s) forwards;
    pointer-events: none;
    user-select: none;
}
@keyframes updBinFloat {
    0%   { transform: translateY(0)    scale(1);   opacity: 0; }
    10%  { opacity: var(--op, 0.1); }
    88%  { opacity: var(--op, 0.1); }
    100% { transform: translateY(-70px) scale(0.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .upd-binary-float { display: none; }
}

/* ── Nav active page / section — toxic green glow ───────── */
nav a[aria-current="page"],
nav a.nav-active {
    color: var(--toxic-green) !important;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.65),
                 0 0 22px rgba(57, 255, 20, 0.25) !important;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet landscape / small desktop: 2-column panels, tighten neural channel */
@media (max-width: 960px) {
    .upd-panels-grid    { grid-template-columns: repeat(2, 1fr); }
    .upd-neural-channel { max-width: 160px; }
}

/* Tablet portrait and below: panels go 1-column */
@media (max-width: 620px) {
    .upd-panels-grid    { grid-template-columns: 1fr; }
}

/* Small tablet / large phone — cards stay side by side but shrink */
@media (max-width: 700px) {
    .updates-hero        { padding: 5rem 1.25rem 2rem; }
    .upd-panels-section  { padding: 0 1.25rem 4rem; }
    .updates-nav-footer  { padding: 1.25rem; }
    .upd-node-card       { width: 165px; padding: 0.75rem; }
    .upd-neural-channel  { max-width: 80px; min-width: 30px; }
    .upd-implant-wrap .brain-implant { width: 115px; height: 115px; }
    .upd-readout         { font-size: 0.62rem; }
    .upd-readout .readout-line { font-size: 0.6rem; }
}

/* Mobile: stack brain cards vertically */
@media (max-width: 540px) {
    .upd-brain-banner    { flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; }
    .upd-node-card       { width: 260px; }
    .upd-implant-wrap .brain-implant { width: 130px; height: 130px; }
    .upd-neural-channel  { flex-direction: row; width: 260px; max-width: 260px; }
    .upd-signal-wave     { height: 36px; }
}

/* Small phone */
@media (max-width: 480px) {
    .updates-hero        { padding: 5rem 1rem 1.75rem; }
    .upd-panels-section  { padding: 0 1rem 3rem; }
    .upd-container       { padding: 1.5rem 1.25rem 1.5rem; }
    .updates-nav-footer  { flex-direction: column; align-items: flex-start; }
    .upd-node-card       { width: 220px; }
    .upd-implant-wrap .brain-implant { width: 110px; height: 110px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   JS-INJECTED OVERLAYS — matrix rain, code overlay, featured title sequence
   Hidden by default; .active class makes them visible
   ───────────────────────────────────────────────────────────────────────── */

/* Matrix rain (1s and 0s) */
.matrix-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.matrix-effect.active {
    opacity: 1;
    visibility: visible;
}
.matrix-character {
    position: absolute;
    top: -20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: rgba(0, 255, 249, 0.55);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.8);
    animation: matrixFall linear 1 forwards;
    pointer-events: none;
    will-change: transform;
}
@keyframes matrixFall {
    0%   { transform: translateY(-20px); opacity: 1; }
    80%  { opacity: 0.6; }
    100% { transform: translateY(110vh); opacity: 0; }
}

/* Code rain overlay (C++ snippets scrolling right → left) */
.brain-programming-text {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.brain-programming-text.active {
    opacity: 1;
    visibility: visible;
}
.programming-line {
    position: absolute;
    left: 110%;
    white-space: nowrap;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    color: rgba(0, 255, 249, 0.12);
    text-shadow: 0 0 6px rgba(0, 255, 249, 0.3);
    animation: codeScroll linear 1 forwards;
    pointer-events: none;
    will-change: transform;
}
@keyframes codeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-250vw); }
}

/* Featured title sequence — h2 after SVG is injected */
.featured-title-seq.fp-settled {
    color: transparent;
    text-shadow: none;
    font-size: 0;
    line-height: 0;
    padding: 0;
    overflow: visible;
}
.featured-title-seq.fp-settled .synthetic-protocol-logo--hero {
    font-size: initial;
    line-height: initial;
}

/* Featured title sequence glitch states */
.fp-glitching {
    animation: fpGlitch 0.4s steps(2) forwards;
    color: var(--neon-magenta, #ff00ff);
}
.fp-settled {
    color: var(--neon-cyan, #00fff9);
    text-shadow: 0 0 20px rgba(0, 255, 249, 0.6);
}
@keyframes fpGlitch {
    0%   { clip-path: inset(0 0 80% 0); transform: translateX(-4px); }
    25%  { clip-path: inset(40% 0 40% 0); transform: translateX(4px); }
    50%  { clip-path: inset(60% 0 20% 0); transform: translateX(-2px); }
    75%  { clip-path: inset(20% 0 60% 0); transform: translateX(2px); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* Reduced motion: skip all overlay animations */
@media (prefers-reduced-motion: reduce) {
    .matrix-effect,
    .brain-programming-text { display: none !important; }
    .fp-glitching { animation: none; }
}

/* ── Faded scanning thumbprint overlay — follows cursor/finger ───────────── */
.fp-overlay {
    position: fixed;
    left: -300px;       /* off-screen until JS moves it on first interaction */
    top: -300px;
    width: 72px;
    height: auto;
    pointer-events: none;
    z-index: 9000;
    opacity: 0;
    color: var(--neon-cyan);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}
.fp-overlay.fp-visible {
    opacity: 0.4;
}

.fp-overlay-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.fp-overlay-svg ellipse,
.fp-overlay-svg line {
    stroke: var(--neon-cyan);
}

.fp-scan-beam {
    stroke: var(--neon-cyan);
    stroke-width: 2;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--neon-cyan));
    animation: fpBeamScan 3.5s ease-in-out infinite;
}

@keyframes fpBeamScan {
    0%   { transform: translateY(12px); opacity: 0; }
    8%   { opacity: 0.9; }
    92%  { opacity: 0.9; }
    100% { transform: translateY(228px); opacity: 0; }
}

@media (max-width: 600px) {
    .fp-overlay { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-overlay.fp-visible { opacity: 0.35; }
    .fp-scan-beam { animation: none; }
}

/* ── Electrical spark blips ─────────────────────────────────────────────── */
.electrical-sparks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
    overflow: hidden;
}

.spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 6px 2px var(--neon-cyan),
                0 0 12px 4px rgba(0, 255, 249, 0.4);
    animation: sparkBlip 0.8s ease-out forwards;
    pointer-events: none;
}

/* type-2: magenta */
.spark.type-2 {
    background: var(--neon-magenta, #ff00ff);
    box-shadow: 0 0 6px 2px var(--neon-magenta, #ff00ff),
                0 0 12px 4px rgba(255, 0, 255, 0.4);
}

/* type-3: toxic green */
.spark.type-3 {
    background: var(--toxic-green);
    box-shadow: 0 0 6px 2px var(--toxic-green),
                0 0 12px 4px rgba(57, 255, 20, 0.4);
}

/* type-4: blood red */
.spark.type-4 {
    background: var(--blood-red, #ff003c);
    box-shadow: 0 0 6px 2px var(--blood-red, #ff003c),
                0 0 12px 4px rgba(255, 0, 60, 0.4);
}

@keyframes sparkBlip {
    0%   { transform: scale(0);   opacity: 1; }
    40%  { transform: scale(1.8); opacity: 0.9; }
    100% { transform: scale(0.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .electrical-sparks { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLITCH EFFECTS — hero text, declarations, section headers
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── .glitch — REJECT THE NORM / JOIN THE COLLECTIVE ── */
.glitch {
    position: relative;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
.glitch::before {
    color: var(--neon-magenta);
    text-shadow: none;
    animation: glitchTop 4s infinite linear;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    opacity: 0;
}
.glitch::after {
    color: var(--neon-cyan);
    text-shadow: none;
    animation: glitchBot 5s infinite linear;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    opacity: 0;
}
@keyframes glitchTop {
    0%, 88%, 100% { opacity: 0; transform: translate(0); }
    89% { opacity: 0.85; transform: translate(-3px, -2px);
          clip-path: polygon(0 10%, 100% 10%, 100% 38%, 0 38%); }
    91% { opacity: 0.85; transform: translate(3px, 1px);
          clip-path: polygon(0 5%, 100% 5%, 100% 30%, 0 30%); }
    93% { opacity: 0; }
}
@keyframes glitchBot {
    0%, 91%, 100% { opacity: 0; transform: translate(0); }
    92% { opacity: 0.7; transform: translate(3px, 2px);
          clip-path: polygon(0 62%, 100% 62%, 100% 88%, 0 88%); }
    94% { opacity: 0.7; transform: translate(-3px, -1px);
          clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
    96% { opacity: 0; }
}

/* ── FOR THE PEOPLE BY THE PEOPLE — blood red, neon glow, subtle glitch ── */
.people-declaration-wrapper {
    text-align: center;
    margin-bottom: 2.5rem;
    overflow: hidden;
}
.people-declaration {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1rem, 3.5vw, 2.4rem);
    color: var(--blood-red);
    text-shadow: 0 0 18px rgba(255, 0, 60, 0.8),
                 0 0 40px rgba(255, 0, 60, 0.3);
    letter-spacing: clamp(2px, 0.5vw, 8px);
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    animation: peopleGlitch 6s infinite;
}
.people-declaration::before,
.people-declaration::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.people-declaration::before {
    color: var(--neon-magenta);
    text-shadow: none;
    animation: peopleGlitchA 6s infinite;
    clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
    opacity: 0;
}
.people-declaration::after {
    color: var(--neon-yellow);
    text-shadow: none;
    animation: peopleGlitchB 7s infinite;
    clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
    opacity: 0;
}
@keyframes peopleGlitch {
    0%, 93%, 100% { transform: translate(0); }
    94% { transform: translate(-2px, 1px); }
    96% { transform: translate(2px, -1px); }
    98% { transform: translate(0); }
}
@keyframes peopleGlitchA {
    0%, 90%, 100% { opacity: 0; }
    91% { opacity: 0.8; transform: translate(-3px, 0); }
    93% { opacity: 0; }
}
@keyframes peopleGlitchB {
    0%, 93%, 100% { opacity: 0; }
    94% { opacity: 0.6; transform: translate(3px, 0); }
    96% { opacity: 0; }
}

/* ── ALL FORMS OF CREDITS ACCEPTED — big, glitchy ── */
.credits-declaration-wrapper {
    text-align: center;
    margin-bottom: 2rem;
    overflow: hidden;
}
.credits-declaration {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.1rem, 3.8vw, 2.8rem);
    color: var(--blood-red);
    text-shadow: 0 0 20px rgba(255, 0, 60, 0.8),
                 0 0 45px rgba(255, 0, 60, 0.3);
    letter-spacing: clamp(2px, 0.5vw, 8px);
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    animation: creditsGlitch 5s infinite;
}
.glitch-credits::before,
.glitch-credits::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.glitch-credits::before {
    color: var(--neon-magenta);
    text-shadow: none;
    animation: creditsGlitchA 5s infinite;
    clip-path: polygon(0 15%, 100% 15%, 100% 50%, 0 50%);
    opacity: 0;
}
.glitch-credits::after {
    color: var(--neon-purple);
    text-shadow: none;
    animation: creditsGlitchB 6s infinite;
    clip-path: polygon(0 58%, 100% 58%, 100% 85%, 0 85%);
    opacity: 0;
}
@keyframes creditsGlitch {
    0%, 91%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 1px); }
    94% { transform: translate(3px, -1px); }
    96% { transform: translate(-1px, 0); }
    98% { transform: translate(0); }
}
@keyframes creditsGlitchA {
    0%, 88%, 100% { opacity: 0; }
    89% { opacity: 0.85; transform: translate(-3px, 0); }
    92% { opacity: 0; }
}
@keyframes creditsGlitchB {
    0%, 90%, 100% { opacity: 0; }
    91% { opacity: 0.7; transform: translate(3px, 0); }
    94% { opacity: 0; }
}

/* ── Section headers — subtle glitch (no data-text, translate only) ── */
.section-title {
    animation: sectionGlitch 7s infinite;
}
@keyframes sectionGlitch {
    0%, 94%, 100% { transform: translate(0); text-shadow: 0 0 20px var(--neon-cyan); }
    95% { transform: translate(-2px, 1px); text-shadow: 2px 0 var(--neon-magenta), 0 0 20px var(--neon-cyan); }
    97% { transform: translate(2px, -1px); text-shadow: -2px 0 var(--neon-purple), 0 0 20px var(--neon-cyan); }
    99% { transform: translate(0); }
}

/* Reduced motion: disable all glitch animations */
@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after,
    .people-declaration::before,
    .people-declaration::after,
    .glitch-credits::before,
    .glitch-credits::before,
    .glitch-credits::after { display: none; }
    .section-title,
    .people-declaration,
    .credits-declaration { animation: none; }
    .philosophy-content .transparency-block { animation: none; }
}

/* SYNTHETIC::PROTOCOL SVG LOGO */
@keyframes spLogoWarp {
    0%   { opacity: 0; transform: scaleX(0.15) skewX(-18deg); filter: brightness(3) blur(4px); }
    30%  { opacity: 1; transform: scaleX(1.08) skewX(3deg);   filter: brightness(1.8) blur(0px); }
    55%  { transform: scaleX(0.97) skewX(-1deg); filter: brightness(1.2); }
    75%  { transform: scaleX(1.02) skewX(0.5deg); }
    100% { opacity: 1; transform: scaleX(1) skewX(0deg); filter: brightness(1); }
}

.synthetic-protocol-logo {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
}

/* Hero — plays warp automatically when JS injects the img */
.synthetic-protocol-logo--hero {
    max-width: 640px;
    margin: 0 auto;
    animation: spLogoWarp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Game card project-title — no warp, static display */
.project-title .synthetic-protocol-logo {
    max-width: 320px;
    margin: 0 auto 0.5rem;
}

/* Game info panel — full width of panel, static */
.synthetic-protocol-logo--gameinfo {
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
}
.synthetic-protocol-logo--gameinfo > svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure inline SVGs fill their wrapper divs */
.synthetic-protocol-logo > svg,
.synthetic-protocol-logo--updates > svg,
.synthetic-protocol-logo--hero > svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Updates page logo wrap */
.upd-protocol-logo-wrap {
    text-align: center;
    padding: 2rem 1rem 0;
    position: relative;
    min-height: 60px;
}
.upd-protocol-loading {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    color: var(--neon-cyan);
    letter-spacing: 4px;
    text-shadow: 0 0 10px var(--neon-cyan);
    transition: opacity 0.3s ease;
    margin-bottom: 0.5rem;
}
.upd-protocol-loading.upd-protocol-glitching {
    animation: updProtocolGlitch 0.6s ease forwards;
}
.upd-protocol-loading.upd-protocol-hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
@keyframes updProtocolGlitch {
    0%   { transform: translate(0);        opacity: 1; }
    20%  { transform: translate(-4px,2px);  opacity: 0.7; filter: hue-rotate(90deg); }
    40%  { transform: translate(4px,-2px);  opacity: 0.9; }
    60%  { transform: translate(-2px,1px);  opacity: 0.6; filter: hue-rotate(-90deg); }
    80%  { transform: translate(2px,-1px);  opacity: 0.8; }
    100% { transform: translate(0);        opacity: 0; }
}
.synthetic-protocol-logo--updates {
    max-width: clamp(280px, 70vw, 600px);
    opacity: 0;
    transform: scaleX(0.4) skewX(-8deg);
    transition: opacity 0.5s ease 0.1s, transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s;
    display: block;
    margin: 0 auto;
}
.synthetic-protocol-logo--updates.upd-protocol-logo-visible {
    opacity: 1;
    transform: scaleX(1) skewX(0deg);
}

/* ── SP Card loading → warp transition (project-title + game-info) ── */
.sp-card-wrap {
    position: relative;
    text-align: center;
}
.sp-card-loading {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    color: var(--neon-cyan);
    letter-spacing: 4px;
    text-shadow: 0 0 10px var(--neon-cyan);
    text-align: center;
    padding: 0.5rem 0;
    transition: opacity 0.3s ease;
}
.sp-card-loading.sp-card-loading--glitching {
    animation: updProtocolGlitch 0.6s ease forwards;
}
.sp-card-loading.sp-card-loading--hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.sp-card-logo {
    opacity: 0;
    /* no static transform — avoids stacking context over fixed nav */
}
.sp-card-logo.sp-card-logo--visible {
    opacity: 1;
    animation: spLogoWarp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (max-width: 768px) {
    .synthetic-protocol-logo--updates { max-width: 90vw; }
    .synthetic-protocol-logo--hero    { max-width: 90vw; }
    .fp-overlay { width: 60px; }
}

/* ── Mobile performance ───────────────────────────────────────────────────
   iOS Safari repaints position:fixed elements with background-image on every
   scroll frame due to rubber-band scroll. bg-grid and scanline are the main
   culprits — removing them eliminates the biggest scroll jank source on iPhone.
   Brain SVG animations use stroke-width/r/fill which trigger paint rather than
   composite — pausing them removes 6 concurrent paint-triggering animations.
   100svh (already on .hero above) prevents chrome-jump layout recalculations. */
@media (max-width: 768px) {
    header,
    #main-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .header-binary-float { display: none !important; }
    .floating-text        { display: none !important; }

    /* Remove fixed-position repaint sources */
    .bg-grid  { display: none; }
    .scanline { display: none; }

    /* Pause brain SVG animations — stroke-width, r, y1/y2, fill all trigger paint */
    .brain-outline,
    .neural-connection,
    .synapse,
    .implant-chip,
    .data-stream,
    .scan-line { animation-play-state: paused; }

    /* Scan beam runs even when fp-overlay is invisible — pause it on mobile */
    .fp-scan-beam { animation-play-state: paused; }
}

/* ── Developer Notes entries ─────────────────────────────────────────────── */
.upd-note-entry {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 255, 249, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}
.upd-note-entry:last-child {
    border-bottom: none;
}
.upd-note-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    color: rgba(0, 255, 249, 0.45);
    letter-spacing: 2px;
}
.upd-note-link {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--neon-yellow);
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
.upd-note-link:hover,
.upd-note-link:focus {
    color: #fff;
    text-shadow: 0 0 12px var(--neon-yellow);
    text-decoration: underline;
}