:root {
    --void-black: #050505;
    --neon-green: #0f0;
    --alert-red: #ff0055;
    --tech-grey: #1a1a1a;
    --cyan: #0ff;
    --glass: rgba(10, 20, 15, 0.95);
    
    /* --- MASTER FONT STACK --- */
    --main-font: 'Avenir', 'Avenir Next', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* --- CORNER RADIUS --- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;
}

/* --- CUSTOM FONTS --- */
@font-face {
    font-family: 'PsychedelicFlames';
    src: url('../assets/fonts/flames.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    scrollbar-gutter: stable;
}

body, html { 
    margin: 0; 
    padding: 0; 
    background-color: var(--void-black); 
    font-family: var(--main-font); 
    overflow: hidden; 
    
    /* --- THE NUCLEAR LOCK --- */
    position: fixed; 
    width: 100vw;
    height: 100vh; 
    top: 0;
    left: 0;
    /* ------------------------ */

    cursor: default; 
    user-select: none; 
    animation: fadeInPage 1.5s ease-out forwards; 
}

body.corrupted {
    --neon-green: var(--alert-red); 
}

/* --- THE BACKGROUND ANIMATION ENGINE --- */
@keyframes entropySpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- THE ROTATING BACKGROUND IMAGE --- */
body::before {
    content: '';
    position: fixed;
    
    /* Center the origin point for the rotation */
    top: 50%; 
    left: 50%;
    
    /* Oversize the canvas so corners never clip during rotation */
    width: 150vmax; 
    height: 150vmax;
    
    background-image: url('../assets/img/backgrounds/bkgrnd.jpg');
    background-image: -webkit-image-set(
        url('../assets/img/backgrounds/bkgrnd.webp') type('image/webp'),
        url('../assets/img/backgrounds/bkgrnd.jpg') type('image/jpeg')
    );
    background-image: image-set(
        url('../assets/img/backgrounds/bkgrnd.webp') type('image/webp'),
        url('../assets/img/backgrounds/bkgrnd.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    
    opacity: 0.02; 
    z-index: 1; 
    pointer-events: none; 

    /* The magic: 90 seconds, smooth continuous speed, forever */
    animation: entropySpin 90s linear infinite;
}

/* --- INITIALIZE GATEKEEPER --- */
#init-screen {
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: var(--void-black);
    z-index: 100000; /* Sits above absolutely everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

#init-btn {
    background: rgba(0, 20, 0, 0.8);
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    font-family: var(--main-font); /* <-- Updated! */
    font-size: 1.5rem;
    padding: 20px 40px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 10px var(--neon-green);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

#init-btn:hover {
    background: var(--neon-green);
    color: black;
    box-shadow: 0 0 30px var(--neon-green);
}

/* --- PHOTOSENSITIVITY WARNING --- */
#init-screen {
    flex-direction: column; /* Stacks the warning and the button vertically */
    gap: 30px; 
}

#epilepsy-warning {
    max-width: 500px;
    text-align: center;
    padding: 25px;
    border: 1px solid rgba(255, 0, 85, 0.35);
    border-radius: var(--radius-lg);
    background: rgba(10, 5, 8, 0.85);
}

.warning-title {
    color: var(--alert-red);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 15px;
    text-shadow: 0 0 8px var(--alert-red);
    animation: pulseWarning 2s infinite alternate;
}

#epilepsy-warning p {
    color: #ddd;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    font-family: var(--main-font);
}

body.ios-ui #init-screen {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    box-sizing: border-box;
}

body.ios-ui #epilepsy-warning {
    max-width: min(78vw, 300px);
    width: 100%;
    padding: 18px 14px;
    margin: 0 auto;
    box-sizing: border-box;
}

body.ios-ui #epilepsy-warning .warning-title {
    font-size: clamp(0.52rem, 2.65vw, 0.68rem);
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    white-space: nowrap;
}

body.ios-ui #epilepsy-warning p {
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Subtle pulse for the warning title */
@keyframes pulseWarning {
    0% { opacity: 0.8; text-shadow: 0 0 5px var(--alert-red); }
    100% { opacity: 1; text-shadow: 0 0 15px var(--alert-red); }
}

@keyframes fadeInPage { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}

/* --- LOADING SCREEN --- */
#loader { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: var(--void-black); 
    z-index: 10100; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    color: var(--neon-green); 
    transition: opacity 1.2s ease-out;
    pointer-events: auto;
}

#loader.loader-exiting {
    pointer-events: none;
}
#progress-container { 
    width: 350px; height: 20px; 
    border: 2px solid var(--neon-green); 
    margin-top: 20px; position: relative; 
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
#progress-bar { 
    width: 0%; height: 100%; 
    background: var(--neon-green); 
    transition: width 0.1s linear; 
}
#loader-text { 
    text-transform: uppercase; 
    letter-spacing: 2px; min-height: 20px; 
    font-size: 0.9rem; text-align: center; max-width: 80%; 
}
/* --- THE OUROBOROS --- */

#ouroboros-container {
    width: 65px;  /* Cut down from 120px */
    height: 65px; /* Cut down from 120px */
    margin-top: 30px;
}

#ouroboros-svg {
    width: 100%;
    height: 100%;
    animation: spinSnake 4s linear infinite;
    /* This adds the terminal radiation glow */
}

/* This forces every piece of the SVG to become pure neon green */
#ouroboros-svg path, 
#ouroboros-svg circle, 
#ouroboros-svg polygon {
    fill: var(--neon-green) !important;
    stroke: var(--neon-green) !important;
}

@keyframes spinSnake {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}

#ouroboros-path {
    transition: stroke-dashoffset 0.1s linear;
}

body.ios-ui #loader {
    display: block;
}

body.ios-ui #ouroboros-container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 0;
    transform: translate(-50%, -50%);
}

body.ios-ui #loader-text {
    position: absolute;
    top: calc(50% + 48px);
    left: 50%;
    transform: translateX(-50%);
    width: min(80vw, 320px);
    margin: 0;
}

/* --- GOD MODE --- */
body.god-mode { 
    filter: invert(100%); 
    transition: filter 0.2s ease; 
}
body.god-mode h1 { 
    background: var(--neon-green); 
    background-clip: border-box;
    -webkit-background-clip: border-box;
    color: #000; 
    box-shadow: 0 0 20px var(--neon-green); 
    border-radius: var(--radius-xl);
}
body.god-mode h1::after {
    display: none;
}

body.god-mode #panopticon-eye {
    filter: invert(100%);
}

#panopticon-eye.god-rainbow .panopticon-lid,
#panopticon-eye.god-rainbow .panopticon-iris-outer,
#panopticon-eye.god-rainbow .panopticon-iris-mid {
    stroke: url(#panopticon-rainbow);
}

#panopticon-eye.god-rainbow .panopticon-god-pupil {
    fill: url(#panopticon-rainbow);
}

.panopticon-god-pupil {
    display: none;
    font-size: 22px;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: var(--neon-green);
    pointer-events: none;
}

#panopticon-eye.god-active .panopticon-pupil {
    display: none;
}

#panopticon-eye.god-active .panopticon-god-pupil {
    display: block;
}

/* --- UI CONTROLS --- */
.control-panel { 
    position: absolute; 
    top: 20px; 
    left: 30px; /* Anchored Left */
    right: auto !important; 
    z-index: 100; 
    display: flex; 
    z-index: 10001;

    /* NEW: Hide it initially and push it above the viewport */
    opacity: 0;
    transform: translateY(-100px);
    /* Smooth transition for when the .active class is added */
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.5s ease;
    pointer-events: none;
}

/* NEW: The trigger class for the reveal */
.control-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ui-btn { 
    background: rgba(0,0,0,0.7); 
    border: 1px solid var(--neon-green); 
    color: var(--neon-green); 
    padding: 5px 10px; cursor: pointer; 
    font-family: var(--main-font); 
    font-size: 0.8rem; text-transform: uppercase; 
    border-radius: var(--radius-sm);
    transition: all 0.3s; 
}
.ui-btn:hover { 
    background: var(--neon-green); 
    color: #000; 
}

.ui-btn:focus,
#hamburger-icon:focus {
    outline: none;
}

.ui-btn:focus-visible,
#hamburger-icon:focus-visible {
    outline: 2px solid var(--neon-green);
    outline-offset: 3px;
}
body.corrupted .ui-btn { 
    border-color: var(--alert-red); 
    color: var(--alert-red); 
}
body.corrupted .ui-btn:hover { 
    background: var(--alert-red); 
    color: #000; 
}

/* --- ARTIFACTS --- */
.artifact { 
    position: absolute; width: 60px; height: 60px; 
    z-index: 50; cursor: grab; 
    filter: drop-shadow(0 0 5px var(--neon-green)); 
    transition: transform 0.1s; 
}

/* Pizza slices sit above the terminal sliver/panel (terminal is 10004) */
.artifact.artifact-pizza,
.artifact[id^="art-pizza-clone-"] {
    z-index: 10010;
}
.artifact:active { cursor: grabbing; transform: scale(1.1); }
.artifact svg { 
    width: 100%; height: 100%; 
    fill: rgba(0, 20, 0, 0.5); 
    stroke: var(--neon-green); 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
}
.artifact.wrong-slot { animation: errorShake 0.4s ease; }
.artifact.wrong-slot svg { 
    stroke: var(--alert-red); 
    filter: drop-shadow(0 0 5px var(--alert-red)); 
}

@keyframes errorShake { 
    0%, 100% { transform: translate(0, 0) rotate(0deg); } 
    20% { transform: translate(-3px, 0) rotate(-10deg); } 
    40% { transform: translate(3px, 2px) rotate(10deg); } 
    60% { transform: translate(-3px, -1px) rotate(-10deg); } 
    80% { transform: translate(2px, 1px) rotate(10deg); } 
}

/* --- SCATTER FILES --- */
.scatter-file { 
    position: absolute; background: #c0c0c0; color: #000; 
    border: 1px solid #fff; border-right-color: #000; 
    border-bottom-color: #000; padding: 4px 8px; 
    font-family: var(--main-font); font-size: 11px; 
    cursor: grab; z-index: 1000; box-shadow: 2px 2px 0px rgba(0,0,0,0.5); 
    user-select: none; display: flex; align-items: center; gap: 5px; 
    border-radius: var(--radius-sm);
    transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.scatter-file:active { 
    cursor: grabbing; border: 1px solid #000; 
    border-right-color: #fff; border-bottom-color: #fff; 
}
.file-icon { 
    width: 12px; height: 16px; background: #fff; 
    border: 1px solid #666; position: relative; 
}
.file-icon::after { 
    content: ''; position: absolute; top: 0; right: 0; 
    border-width: 0 4px 4px 0; border-style: solid; 
    border-color: #c0c0c0 #c0c0c0 #666 #666; 
}

/* --- DOCKING BAY --- */
#docking-bay { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%, 0); /* Default position for mobile */
    display: flex; 
    gap: 20px; 
    z-index: 40; 
    padding-bottom: 40px; /* Keeps the slots hovering just above the bottom edge */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Adds a snappy, futuristic slide */
}

/* Only hide and slide on devices with a real mouse cursor */
@media (hover: hover) and (pointer: fine) {
    #docking-bay {
        /* 120px pushes the 70px slots + 40px padding completely off the bottom of the screen */
        transform: translate(-50%, 120px); 
        
        /* This creates a 150px tall invisible trigger zone above the hidden slots */
        padding-top: 150px; 
    }
    
    #docking-bay:hover {
        /* When the mouse enters the top padding, snap the slots up into view! */
        transform: translate(-50%, 0); 
    }
}
/* Make slots look clickable */
.slot {
    cursor: pointer;
}

/* Style the SVGs injected into the slots */
.slot svg { 
    width: 80%; 
    height: 80%; 
    fill: rgba(0, 20, 0, 0.5); 
    stroke: var(--neon-green); 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    filter: drop-shadow(0 0 5px var(--neon-green));
    transition: transform 0.1s;
}

.slot:active svg {
    transform: scale(0.9); /* Adds a nice click down effect */
}

.slot { 
    width: 70px; 
    height: 70px; 
    border: 2px solid #333; 
    border-radius: 50%; /* Changed from 5px to 50% */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #333; 
    font-size: 0.7rem; 
    background: rgba(0,0,0,0.5); 
    transition: border-color 0.3s, box-shadow 0.3s; 
}
.slot.occupied { border-color: var(--neon-green); border-style: solid; }

/* --- CANVAS --- */
#grid-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    touch-action: none;
    opacity: 0;
    transition: opacity 2.5s ease-out;
}

#grid-canvas.matrix-visible {
    opacity: 1;
    filter: hue-rotate(var(--matrix-hue, 0deg));
}

body:not(.ios-ui) #grid-canvas {
    pointer-events: none;
}

/* --- PANOPTICON EYE --- */
#panopticon-eye {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(110px, 16vw, 190px);
    height: clamp(110px, 16vw, 190px);
    z-index: 12;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2.5s ease-out;
    filter: drop-shadow(0 0 14px rgba(0, 255, 0, 0.35));
}

.panopticon-inner {
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

#panopticon-eye.visible {
    opacity: 0.72;
}

#panopticon-eye.dizzy {
    filter: drop-shadow(0 0 22px rgba(0, 255, 0, 0.55));
}

body.corrupted #panopticon-eye {
    filter: drop-shadow(0 0 18px rgba(255, 0, 85, 0.45));
}

body.corrupted #panopticon-eye.dizzy {
    filter: drop-shadow(0 0 26px rgba(255, 0, 85, 0.65));
}

#panopticon-eye svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.panopticon-socket-fill {
    fill: rgba(0, 20, 0, 0.12);
    stroke: none;
}

.panopticon-socket-inlay {
    fill: url(#panopticon-inlay-shadow);
    stroke: none;
    pointer-events: none;
}

.panopticon-socket-inlay-rim {
    fill: url(#panopticon-inlay-rim);
    stroke: none;
    pointer-events: none;
    mix-blend-mode: multiply;
}

body.god-mode .panopticon-socket-fill,
body.god-mode .panopticon-socket-inlay,
body.god-mode .panopticon-socket-inlay-rim {
    fill: none;
}

body.corrupted .panopticon-socket-fill {
    fill: rgba(20, 0, 5, 0.18);
}

body.corrupted .panopticon-socket-inlay {
    fill: url(#panopticon-inlay-shadow);
    opacity: 0.85;
}

body.corrupted .panopticon-socket-inlay-rim {
    opacity: 0.9;
}

.panopticon-lid {
    stroke: var(--neon-green);
    stroke-width: 3;
    fill: none;
    stroke-linejoin: round;
}

body.corrupted .panopticon-lid {
    stroke: var(--alert-red);
}

.panopticon-iris-outer {
    stroke: var(--neon-green);
    stroke-width: 1.5;
    fill: none;
    opacity: 0.55;
}

.panopticon-iris-mid {
    stroke: var(--neon-green);
    stroke-width: 2;
    fill: none;
    opacity: 0.85;
}

.panopticon-pupil {
    fill: var(--neon-green);
}

body.corrupted .panopticon-iris-outer,
body.corrupted .panopticon-iris-mid {
    stroke: var(--alert-red);
}

body.corrupted .panopticon-pupil {
    fill: var(--alert-red);
}

#panopticon-eye svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.corrupted #grid-canvas.matrix-visible {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    #grid-canvas {
        transition-duration: 0.5s;
    }

    #grid-canvas.matrix-visible {
        filter: none;
    }
}

/* Invisible hover trigger zone extending 100px to the left */
/* --- INTERACTIVE TERMINAL LOG --- */
#terminal-container { 
    position: absolute; bottom: 40px; right: 0; 
    width: 350px; 
    height: 35px; 
    font-family: var(--main-font); 
    font-size: 0.75rem; color: var(--neon-green); 
    background: rgba(0,0,0,0.6); border-left: 2px solid var(--neon-green); 
    padding: 5px 10px; z-index: 10004; display: flex; flex-direction: column;
    justify-content: flex-end; text-shadow: 0 0 3px var(--neon-green); 
    box-sizing: border-box; overflow: hidden; 
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    transition:
        transform 1.5s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.4s ease,
        background 0.3s;
    cursor: pointer;
}

/* Hidden until loader finishes (revealGardenUI adds .garden-ready) */
body.garden-loading #terminal-container,
body:not(.garden-ready) #terminal-container,
#terminal-container[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* In layout, waiting for slide-in (no opacity transition — avoids Tab fade bug) */
body.garden-ready #terminal-container:not([hidden]) {
    display: flex;
}

body.garden-ready #terminal-container.reveal-in {
    opacity: 1;
    pointer-events: auto;
}

/* Docked sliver after chrome reveal */
body.garden-ready #terminal-container.reveal-in.is-sliver:not(.active) {
    transform: translateX(calc(100% - 15px));
}

/* The SUPER generous invisible hitbox */
#terminal-container::before {
    content: ''; position: absolute; 
    top: -100px;    /* Reaches way high up above the terminal */
    bottom: -50px;  /* Reaches past the 40px gap all the way to the bottom edge of your screen */
    left: -150px;   /* Casts a huge 150px net out to the left */
    right: 0; 
    cursor: pointer;
}
body.garden-ready #terminal-container.reveal-in:hover:not(.active) {
    transform: translateX(0);
    background: rgba(0, 20, 0, 0.8);
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        height 0.4s ease,
        background 0.3s;
}

/* --- TERMINAL EATING ANIMATION --- */
@keyframes terminalBurp {
    0% { transform: scale(1); }
    30% { 
        transform: scale(1.05); /* Bulges outward by 5% */
        background: rgba(0, 40, 0, 0.95); /* Flashes a slightly brighter green */
        border-left: 6px solid var(--neon-green); /* Thickens the border */
    }
    100% { transform: scale(1); }
}

.burp-active {
    animation: terminalBurp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#terminal-container.reveal-in.active {
    transform: translateX(0);
    height: 200px;
    opacity: 1;
    cursor: default;
    background: rgba(0,0,0,0.9);
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        height 0.4s ease,
        background 0.3s;
}

#terminal-container.active::before {
    display: none; /* Kills the extra hitbox when fully open so it doesn't block other clicks */
}

#terminal-output { 
    flex-grow: 1; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    pointer-events: none;
    padding-right: 8px; /* Breathing room for the scrollbar */
}

#terminal-container.active #terminal-output {
    opacity: 1; 
    pointer-events: auto; 
}

/* Pushes text to the bottom without breaking the scroll */
.term-entry:first-child {
    margin-top: auto; 
}

/* --- THE NEON SCROLLBAR --- */
#terminal-output::-webkit-scrollbar { 
    width: 6px; 
    display: block; /* Makes it visible again */
}
#terminal-output::-webkit-scrollbar-track { 
    background: rgba(0, 20, 0, 0.4); 
    border-radius: var(--radius-sm);
}
#terminal-output::-webkit-scrollbar-thumb { 
    background: var(--neon-green); 
    border-radius: var(--radius-sm); 
}
body.corrupted #terminal-output::-webkit-scrollbar-thumb { 
    background: var(--alert-red); 
}
.term-entry { 
    margin: 2px 0; animation: fadeInTerm 0.3s forwards; 
    opacity: 0; word-wrap: break-word; 
}
#terminal-output .term-entry em {
    font-style: italic;
    color: var(--cyan);
}
@keyframes fadeInTerm { to { opacity: 1; } }
#terminal-input-line { display: flex; gap: 5px; margin-top: 5px; align-items: center; }

#terminal-container:not(.active) #terminal-input-line {
    pointer-events: none;
}
#term-input { 
    background: transparent; border: none; color: #fff; 
    font-family: var(--main-font); font-size: 0.75rem; 
    width: 100%; outline: none; text-shadow: 0 0 3px #fff; 
}
body.corrupted #terminal-container { 
    border-color: var(--alert-red); color: var(--alert-red); 
    text-shadow: 0 0 3px var(--alert-red); 
}

/* --- HUD --- */
#hud { 
    position: absolute; top: 20px; left: 50%; 
    transform: translate(-50%, -150px); z-index: 20; 
    text-align: center; width: 100%; pointer-events: none; 
    display: flex; flex-direction: column; align-items: center; 
    gap: 15px; opacity: 0; 
}

/* --- GHOST REFRESH HINT --- */
#refresh-hint {
    display: none;
    color: var(--neon-green);
    font-family: var(--main-font);
    font-size: 0.75rem;
    letter-spacing: 2px;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 5px var(--neon-green);
    margin-top: auto;
    padding-top: 18px;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

body.corrupted #refresh-hint {
    color: var(--alert-red);
    text-shadow: 0 0 5px var(--alert-red);
}

@keyframes hintFadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    10% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}
#hud.active.anim-drop { animation: animDrop 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#hud.active.anim-rise { animation: animRise 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#hud.active.anim-zoom { animation: animZoom 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#hud.active.anim-slide { animation: animSlide 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#hud.active.anim-glitch { animation: animGlitch 1.5s linear forwards; }

@keyframes animDrop { 0% { transform: translate(-50%, -150px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes animRise { 0% { transform: translate(-50%, 150px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes animZoom { 0% { transform: translate(-50%, 0) scale(3); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes animSlide { 0% { transform: translate(-150%, 0) skewX(-20deg); opacity: 0; } 100% { transform: translate(-50%, 0) skewX(0deg); opacity: 1; } }
@keyframes animGlitch {
    0% { transform: translate(-50%, 0); opacity: 0; }
    20% { opacity: 1; transform: translate(-52%, 5px); filter: hue-rotate(90deg); }
    40% { opacity: 0; transform: translate(-48%, -5px); }
    60% { opacity: 1; transform: translate(-50%, 10px); filter: hue-rotate(180deg); }
    80% { opacity: 0; transform: translate(-49%, -2px); }
    100% { opacity: 1; transform: translate(-50%, 0); filter: hue-rotate(0deg); } /* Snaps back to visible */
}
/* --- FULL SPECTRUM TEXT CYCLE (NO GLOW) --- */
@keyframes textSpectrum {
    0%   { color: hsl(0, 100%, 50%); }
    17%  { color: hsl(60, 100%, 50%); }
    33%  { color: hsl(120, 100%, 50%); }
    50%  { color: hsl(180, 100%, 50%); }
    67%  { color: hsl(240, 100%, 50%); }
    83%  { color: hsl(300, 100%, 50%); }
    100% { color: hsl(360, 100%, 50%); }
}

h1 { 
    font-family: 'PsychedelicFlames', var(--main-font);
    font-weight: normal; 
    font-size: 4.5rem; 
    margin: 0; 
    padding: 25px 40px 10px 40px;
    transform: translateY(4px);
    text-transform: uppercase; 
    letter-spacing: 6px; 

   /* --- THE CENTERING ENGINE --- */
    display: inline-flex;       /* Changes from inline-block to flex */
    align-items: center;        /* Centers vertically (Y-axis) */
    justify-content: center;     /* Centers horizontally (X-axis) */
    
    margin: 0; 
    position: relative; 
    z-index: 100;


    /* --- TEXT RAINBOW --- */
    background: linear-gradient(90deg, 
        hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), 
        hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%)
    );
    background-size: 200% 100%;
    background-position: var(--rainbow-offset, 0%) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
}

/* --- BORDER RAINBOW (The Independent Layer) --- */
h1::after { 
    content: ''; 
    position: absolute; 
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: var(--radius-xl);
    
    background: linear-gradient(90deg, 
        hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), 
        hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%)
    );
    background-size: 200% 100%; 
    background-position: var(--rainbow-offset, 0%) 50%;
    
    z-index: -1; 
    
    /* The Mask that creates the "Hollow" effect */
    padding: 3px; 
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Updated animation to loop seamlessly */
@keyframes gradientShift { 
    0% { background-position: 0% 50%; } 
    100% { background-position: 400% 50%; } 
}

#reroll-eye { display: none; }

#panopticon-eye.flash-anim,
.flash-anim { animation: flash 0.3s ease-out; }
@keyframes flash { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0px var(--neon-green)); } 50% { filter: brightness(2) drop-shadow(0 0 20px #fff); } }

/* --- MODALS --- */
.modal { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; z-index: 20000; }
.modal.wide { width: 700px; }
.modal-content { 
    background: var(--glass); color: #ddd; padding: 40px; 
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 255, 0, 0.25);
    border-left: 5px solid var(--neon-green);
    box-shadow: 10px 10px 30px rgba(0,0,0,0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal h2 { 
    font-family: var(--main-font); /* <-- Added! */
    margin-top: 0; 
    color: var(--neon-green); 
    font-size: 1.5rem; 
    border-bottom: 1px solid #555; 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    cursor: grab; 
}
.modal h2:active { cursor: grabbing; }
.modal.dragging,
.modal.dragging * { user-select: none; }
.modal h2.drag-handle { touch-action: none; }
.icon-spin { width: 30px; height: 30px; display: inline-block; animation: spin3D 4s linear infinite; }
@keyframes spin3D { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.scrollable-content { max-height: 50vh; overflow-y: auto; padding-right: 15px; }
.scrollable-content::-webkit-scrollbar { width: 6px; }
.scrollable-content::-webkit-scrollbar-thumb { background: var(--neon-green); border-radius: var(--radius-sm); }
body.corrupted .scrollable-content::-webkit-scrollbar-thumb { background: var(--alert-red); }

.trophy-case-scroll { max-height: 55vh; }
.trophy-case-intro {
    font-size: 0.85rem;
    color: #888;
    margin: 0 0 12px;
    line-height: 1.5;
}
.trophy-count {
    font-family: var(--main-font);
    color: var(--cyan);
    margin: 0 0 16px;
    letter-spacing: 0.05em;
}
.trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.trophy-card {
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 10px 10px 12px;
    text-align: center;
    background: rgba(0, 12, 0, 0.35);
    min-height: 132px;
    display: grid;
    grid-template-rows: 40px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}
.trophy-card.locked {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 0.55;
}
.trophy-card.unlocked {
    border-color: rgba(0, 255, 0, 0.45);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.12);
}
.trophy-visual {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trophy-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 72px;
}
.trophy-card.locked .trophy-meta {
    visibility: hidden;
}
.trophy-icon {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center center;
}
.trophy-mystery {
    font-family: var(--main-font);
    font-size: 1.75rem;
    line-height: 32px;
    height: 32px;
    color: #555;
    letter-spacing: 0;
}
.trophy-unlock-flash {
    position: fixed;
    top: 16%;
    left: 50%;
    z-index: 1000001;
    pointer-events: none;
    transform: translateX(-50%);
    animation: trophyUnlockFlash 1.35s ease forwards;
}
.trophy-unlock-flash-icon {
    width: 56px;
    height: 56px;
    display: block;
    object-fit: contain;
}
@keyframes trophyUnlockFlash {
    0% { opacity: 0; transform: translateX(-50%) scale(0.65); }
    10% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    20% { opacity: 0.12; transform: translateX(-50%) scale(1); }
    30% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    40% { opacity: 0.12; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    60% { opacity: 0; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.95); visibility: hidden; }
}
.trophy-title {
    font-family: var(--main-font);
    font-size: 0.72rem;
    color: var(--neon-green);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.trophy-card.locked .trophy-title { color: #666; }
.trophy-desc {
    font-size: 0.7rem;
    color: #999;
    line-height: 1.35;
    margin: 0;
}

.modal ul { list-style: none; padding: 0; margin: 0; }
.modal li { margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; }
.stat-row { display: flex; justify-content: space-between; }
.stat-val { color: var(--neon-green); font-weight: bold; text-align: right; max-width: 60%; }
.close-btn { position: absolute; top: 25px; right: 25px; cursor: pointer; color: #555; font-weight: bold; font-size: 1.5rem; z-index: 10; }
.close-btn:hover { color: var(--neon-green); }
a.social-link { color: var(--neon-green); text-decoration: none; border-bottom: 1px dotted var(--neon-green); transition: color 0.3s; cursor: pointer; }
a.social-link:hover { color: #fff; border-bottom-style: solid; }
.project-title { color: var(--neon-green); font-weight: bold; display: block; }
.project-desc { color: #888; font-size: 0.85rem; display: block; font-style: italic; margin-top: 4px; }
.bio-p { line-height: 1.6; margin-bottom: 15px; color: #ddd; }

/* --- BIO PROFILE PICTURE --- */
.bio-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 255, 0, 0.3);
    padding-bottom: 15px;
}

/* --- BIO PROFILE PICTURE --- */
.pfp-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--neon-green);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    overflow: hidden; /* This acts as the clipping mask */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pfp-image {
    width: 125%; /* Zooms the image in by 25% to hide the beige corners */
    height: 125%;
    object-fit: cover;
}

/* --- VAULT GRID --- */
/* Assuming your vault is a 2-column grid */
.vault-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 40px;
}

/* The Magic Rule: Center the last item ONLY if the total is odd */
.vault-grid > .vault-item:last-child:nth-child(odd) {
  grid-column: 1 / -1; /* Spans across all columns */
  justify-self: center; /* Centers the item horizontally */
  width: 50%; /* Prevents the carousel from stretching to fill the whole row */
}
.vault-item { 
    position: relative;
    background: rgba(0,25,0,0.3); 
    border: 1px solid var(--neon-green); 
    height: 180px; /* Made it a bit taller to show off the art */
    overflow: hidden; /* Keeps the images locked inside the box */
    border-radius: var(--radius-md);
    transition: all 0.3s; 
    cursor: pointer;
}

.vault-item:hover { 
    border-style: solid; 
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

/* This styles the actual images and videos inside the grid */
.vault-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(80%) contrast(1.2) brightness(0.8); /* Gives it a raw, muted terminal look */
    transition: filter 0.4s ease;
}

/* Reveals the full, bright, psychedelic color when you hover over it! */
.vault-item:hover .vault-media {
    filter: grayscale(0%) contrast(1) brightness(1); 
}

.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

.vault-item.carousel-container {
    position: relative;
    height: 180px;
    min-height: 180px;
    padding: 0;
}

.carousel-stage {
    position: absolute;
    inset: 0;
}

.carousel-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 11;
    background: none;
    padding: 0;
}

.carousel-controls .carousel-btn {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

/* Grayscale filters to match the other vault items */
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: grayscale(80%) contrast(1.2) brightness(0.8);
  transition: filter 0.4s ease;
  cursor: zoom-in;
}

/* Reveal full color on hover */
.vault-item:hover .carousel-slide {
  filter: grayscale(0%) contrast(1) brightness(1); 
}

/* Terminal-Themed UI Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--neon-green);
  border: 1px solid var(--neon-green);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  opacity: 0; /* Hidden by default so they don't block the art! */
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}

/* Reveal the arrows only when you hover over the box */
.vault-item:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover {
  background: var(--neon-green);
  color: #000;
  box-shadow: 0 0 10px var(--neon-green);
}

/* Force them to the absolute edges using !important to prevent centering glitches */
.prev-btn { left: 0 !important; right: auto !important; }
.next-btn { right: 0 !important; left: auto !important; }

/* --- VAULT LIGHTBOX OVERLAY --- */
#lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9); /* Almost pitch black */
    z-index: 999999; /* Sits above absolutely everything */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indicates you can click to close */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

/* The actual image/video inside the lightbox */
.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    border: 2px solid var(--neon-green);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3); /* Neon glow */
    border-radius: var(--radius-md);
    cursor: default; /* Standard cursor when hovering over the art itself */
    transform: scale(0.9);
    transition: transform 0.3s ease;
    object-fit: contain; /* Ensures the whole image fits on screen */
}

#lightbox-overlay.active .lightbox-content {
    transform: scale(1); /* Gives it a slight "pop in" effect */
}

/* --- BOSS KEY FAKE MAYA CRASH --- */
#boss-key-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #a0a0a0; z-index: 100000; font-family: var(--main-font); cursor: default; }
#boss-key-overlay.active { display: block; }
.win-bg { width: 100%; height: 100%; background: #4a6d8c; }
.win95-window { width: 450px; background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.win95-titlebar { background: #000080; color: white; padding: 3px 5px; font-weight: bold; font-size: 13px; display: flex; justify-content: space-between; }
.win95-content { padding: 25px; display: flex; align-items: flex-start; gap: 20px; color: black; font-size: 13px; line-height: 1.5;}
.win95-icon { width: 40px; height: 40px; background: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 28px; flex-shrink: 0; }
.win95-buttons { text-align: center; margin-bottom: 20px; }
.win95-btn { background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 6px 20px; margin: 0 10px; cursor: pointer; font-family: var(--main-font); font-size: 12px; }
.win95-btn:active { border-top: 2px solid #000; border-left: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }

/* --- SINGULARITY EVENT --- */
#singularity-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: #000;
    z-index: 100030;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--cyan);
}

/* Ritual takes over the full viewport (iOS HUD/terminal sit at ~10004+) */
body.singularity-active #terminal-container,
body.singularity-active #ios-terminal-toggle,
body.singularity-active #playlist-menu,
body.singularity-active #ios-scroll-shell,
body.singularity-active #docking-bay,
body.singularity-active #hud,
body.singularity-active #panopticon-eye,
body.singularity-active #reroll-eye,
body.singularity-active .control-panel,
body.singularity-active #sidebar-menu,
body.singularity-active #refresh-hint,
body.singularity-active #hamburger-icon {
    visibility: hidden !important;
    pointer-events: none !important;
}

#singularity-bg { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-color: #050505; 
    background-image: url('../assets/img/backgrounds/bartek-garbowicz-xJeCLqsBUqc-unsplash.jpg');
    background-image: -webkit-image-set(
        url('../assets/img/backgrounds/bartek-garbowicz-xJeCLqsBUqc-unsplash.webp') type('image/webp'),
        url('../assets/img/backgrounds/bartek-garbowicz-xJeCLqsBUqc-unsplash.jpg') type('image/jpeg')
    );
    background-image: image-set(
        url('../assets/img/backgrounds/bartek-garbowicz-xJeCLqsBUqc-unsplash.webp') type('image/webp'),
        url('../assets/img/backgrounds/bartek-garbowicz-xJeCLqsBUqc-unsplash.jpg') type('image/jpeg')
    );
    background-size: cover; 
    background-position: center; 
    opacity: 0; z-index: 0; 
    animation: fadeInBg 5s ease-in-out forwards; 
}
@keyframes fadeInBg { to { opacity: 0.8; } }

#singularity-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; touch-action: none; cursor: grab; }
#singularity-canvas:active { cursor: grabbing; }

body.ios-ui #singularity-canvas {
    pointer-events: none !important;
    touch-action: none;
}

#poem-container { 
    position: absolute; 
    z-index: 10; 
    font-family: var(--main-font); 
    font-size: 1.2rem; line-height: 2; 
    color: #fff; text-shadow: 0 0 10px cyan; 
    max-width: 800px; padding: 20px; 
    pointer-events: none; 
}

body.singularity-active #poem-container {
    pointer-events: auto;
    touch-action: pan-y;
}

body.singularity-active #singularity-controls {
    z-index: 100050;
    pointer-events: auto;
}

/* THE NEW SCROLL UP ANIMATION */
@keyframes scrollPoemUp {
    0% { top: 100%; opacity: 0; }  /* Starts below the screen */
    5% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: -80%; opacity: 0; } /* Drifts high up above the screen */
}

.poem-line { 
    display: block; 
    margin-bottom: 15px; 
    opacity: 0; 
    animation: simpleFade 1s forwards; 
}

@keyframes simpleFade { 
    to { opacity: 1; } 
}

/* FIXED SINGULARITY CONTROLS */
#singularity-controls { 
    position: absolute; bottom: 10%; 
    left: 50%; transform: translateX(-50%); 
    z-index: 10000; display: flex; gap: 20px; 
    opacity: 0; pointer-events: auto; 
}
.singularity-btn { 
    padding: 10px 20px; 
    border: 1px solid var(--neon-green); 
    color: var(--neon-green); 
    cursor: pointer; 
    font-family: var(--main-font); 
    text-transform: uppercase; 
    background: rgba(0,0,0,0.8); 
    border-radius: var(--radius-sm);
    transition: all 0.3s;
    position: relative; 
    z-index: 10000; 
    pointer-events: auto; 
}

@media (hover: hover) and (pointer: fine) {
    .singularity-btn:hover {
        background: var(--neon-green);
        color: black;
        box-shadow: 0 0 15px var(--neon-green);
    }
}

@keyframes btnFadeIn { 
    0% { opacity: 0; transform: translate(-50%, 10px); } 
    100% { opacity: 1; transform: translate(-50%, 0); } 
}
@keyframes crtFlicker {
    0% { opacity: 1; text-shadow: 0 0 15px var(--neon-green); }
    10% { opacity: 0.8; text-shadow: 0 0 10px var(--neon-green), 2px 0 1px rgba(0, 255, 0, 0.4); }
    20% { opacity: 1; text-shadow: 0 0 18px var(--neon-green); }
    30% { opacity: 0.9; text-shadow: 0 0 12px var(--neon-green), -2px 0 1px rgba(0, 255, 255, 0.4); }
    50% { opacity: 1; text-shadow: 0 0 20px var(--neon-green), 1px 0 2px rgba(0, 255, 0, 0.5); }
    60% { opacity: 0.85; text-shadow: 0 0 15px var(--neon-green); }
    80% { opacity: 1; text-shadow: 0 0 22px var(--neon-green), -1px 0 2px rgba(0, 255, 0, 0.4); }
    100% { opacity: 0.95; text-shadow: 0 0 16px var(--neon-green); }
} /* <--- THIS IS THE BRACKET YOU WERE MISSING! */

/* --- SIDEBAR & HAMBURGER MENU --- */
/* Moves the Hamburger container to the TOP LEFT */
/* --- 1. Position the Hamburger (Top Left) --- */
.control-panel { 
    position: absolute; 
    top: 20px; 
    left: 30px; 
    right: auto !important; 
    z-index: 10001; /* High z-index to stay above grid */
    display: flex; 
}

/* --- 2. Position Safe Mode (Top Right) --- */
#mode-btn {
    position: absolute;
    top: 20px;
    right: 30px; 
    left: auto !important;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-100px);
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.5s ease;
}

#mode-btn.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- 3. Hamburger Toggle Logic & Color --- */
#hamburger-icon {
    width: 35px; 
    height: 25px;
    cursor: pointer;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}

#hamburger-icon span { 
    display: block; 
    width: 100%; 
    height: 3px; 
    background: var(--neon-green) !important; /* Force green */ 
    border-radius: var(--radius-pill);
    transition: all 0.3s ease; 
}

/* Optional: Subtle glow boost on hover */
#hamburger-icon:hover span { 
    filter: brightness(1.2);
    box-shadow: 0 0 12px var(--neon-green);
}

/* --- 4. Sidebar Orientation (Left Side) --- */
#sidebar-menu {
    position: fixed;
    top: 0; 
    left: -500px; 
    width: 250px; 
    height: 100vh;
    background: rgba(5, 5, 5, 0.95);
    border-right: 2px solid var(--neon-green); 
    z-index: 9999;
    transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding-top: 100px;
    z-index: 10000;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    overflow: hidden;
}

#sidebar-menu.active { 
    left: 0 !important; 
}

#sidebar-menu::before {
    content: '';
    position: absolute;
    top: 0;
    /* This creates a 500px wide 'shield' to the left of your actual menu */
    left: -500px; 
    width: 500px;
    height: 100%;
    background: rgba(5, 5, 5, 0.95); /* Matches your sidebar color */
    pointer-events: none;
}

#sidebar-menu ul { list-style: none; padding: 0; margin: 0; }

#sidebar-menu li {
    padding: 20px 30px;
    margin: 0 10px;
    color: var(--neon-green);
    font-family: var(--main-font);
    font-size: 1.1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

#sidebar-menu li:hover {
    background: var(--neon-green);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

/* --- SIDEBAR TEXT ANIMATION --- */
.sidebar-text {
    color: var(--neon-green) !important;
    -webkit-text-fill-color: var(--neon-green); /* Safari bug fix */
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    /* Force GPU rendering to stop the browser from dropping the color */
    transform: translateX(-15px) translateZ(0); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}

/* --- THE HOVER OVERRIDES --- */
#sidebar-menu li:hover .sidebar-text {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important; /* Safari bug fix */
    max-width: 200px; 
    opacity: 1;
    transform: translateX(0) translateZ(0); 
}

#sidebar-menu li:hover .ui-icon {
    filter: brightness(0) !important;
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION OVERRIDES
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    /* 1. Stop the high-contrast CRT strobing on the poems */
    .poem-line {
        animation: none !important;
        opacity: 1 !important;
        text-shadow: 0 0 10px var(--neon-green) !important;
        color: #fff !important;
    }

    /* 2. Replace the violent HUD glitch with a smooth drop */
    #hud.active.anim-glitch {
        animation: animDrop 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    /* 3. Slow the Ouroboros down to a safe, ambient rotation */
    #ouroboros-svg {
        animation-duration: 20s !important;
    }

    /* 4. Disable the rapid flashing on reroll */
    #panopticon-eye.flash-anim,
    .flash-anim {
        animation: none !important;
        filter: brightness(1.5) drop-shadow(0 0 10px var(--neon-green)) !important;
    }

    #panopticon-eye.dizzy {
        animation: none !important;
    }

    #panopticon-eye.visible {
        opacity: 0.55;
    }

    /* 5. Disable the violent error shaking on the combo locks */
    .artifact.wrong-slot, 
    .slot {
        animation: none !important;
    }

    /* 6. Stop the pulse on the warning title */
    .warning-title {
        animation: none !important;
        opacity: 1 !important;
    }

    /* 7. Pause GPU-heavy ambient layers */
    body::before,
    #ouroboros-svg {
        animation-play-state: paused !important;
    }
}

/* --- MOBILE / LOW-POWER PERF MODE --- */
body.perf-lite::before {
    animation-duration: 180s;
    width: 120vmax;
    height: 120vmax;
}

body.perf-lite #ouroboros-svg {
    animation-duration: 12s;
}

@media (max-width: 768px), (pointer: coarse) {
    h1 {
        font-size: 2.75rem;
        letter-spacing: 3px;
        padding: 18px 24px 8px;
    }

    .modal {
        width: min(450px, 92vw);
    }

    .modal.wide {
        width: min(700px, 96vw);
    }

    .modal-content {
        padding: 28px 24px;
    }

    #terminal-container {
        width: min(350px, 85vw);
    }

    #sidebar-menu {
        width: min(250px, 80vw);
    }

    .vault-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }

    .vault-grid > .vault-item:last-child:nth-child(odd) {
        width: 100%;
    }
}

/* --- ARCADE MINIGAME --- */
#arcade-game-container {
    border: 2px solid var(--cyan);
    padding: 20px 24px;
    background: #050505;
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.1);
    text-align: center;
    border-radius: var(--radius-lg);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

#arcade-screen {
    min-height: 120px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: rgba(0, 20, 20, 0.8);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

#sequence-display {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 18px;
    -webkit-overflow-scrolling: touch;
}

#sequence-display .matrix-grid,
#sequence-display .color-square {
    flex: 0 0 auto;
    margin: 2px 4px;
}

#sequence-display .matrix-grid {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* The Color Blocks */
.color-square {
    width: 35px;
    height: 35px;
    border: 2px solid #fff;
    box-shadow: 0 0 10px currentColor; /* Makes the glow match the background color */
    border-radius: var(--radius-sm);
}

/* Specific Colors */
.square-red { background: #ff0055; color: #ff0055; }
.square-blue { background: #0055ff; color: #0055ff; }
.square-green { background: #00ff00; color: #00ff00; }
.square-yellow { background: #ffff00; color: #ffff00; }
.square-cyan { background: #00ffff; color: #00ffff; }
.square-magenta { background: #ff00ff; color: #ff00ff; }

/* The Mystery Block */
.square-hidden { 
    background: transparent; 
    border: 2px solid #fff; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    animation: crtFlicker 2s infinite;
}

#arcade-message {
    color: var(--cyan);
    font-family: var(--main-font);
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
}

/* Answer choices — horizontal row matching sequence-display spacing */
#arcade-controls,
.arcade-answers-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 18px;
    -webkit-overflow-scrolling: touch;
}

#arcade-controls .matrix-grid,
.arcade-answers-row .matrix-grid {
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

body.ios-ui #arcade-controls,
body.ios-ui .arcade-answers-row {
    gap: 10px;
}

body.ios-ui #arcade-controls .interactive-square {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body.ios-ui #sequence-display {
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 14px 18px;
    border-radius: var(--ios-radius-md);
}

body.ios-ui #sequence-display .matrix-grid {
    border-radius: var(--ios-radius-sm);
    overflow: hidden;
}

body.ios-ui #arcade-screen {
    height: auto;
    min-height: 120px;
    padding: 14px 18px;
    border-radius: var(--ios-radius-md);
}

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    gap: 1px;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.matrix-cell {
    width: 100%;
    height: 100%;
    background: transparent; /* "0" is black */
}

/* Answer boxes — clip cells to rounded corners; glow via drop-shadow (not box-shadow) */
.interactive-square.matrix-grid {
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.interactive-square.matrix-grid:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px var(--cyan));
}

/* The clickable choice squares */
.interactive-square {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s;
}

.interactive-square:hover {
    transform: scale(1.2);
    filter: brightness(1.5); /* Makes the neon pop even more when hovered */
}

.interactive-square:active {
    transform: scale(0.9); /* Satisfying click squish */
}

.arcade-btn {
    border-radius: var(--radius-sm);
}

.arcade-btn:hover {
    background: var(--cyan);
    color: #000;
    box-shadow: 0 0 15px var(--cyan);
}

#arcade-score {
    color: var(--cyan);
    font-family: var(--main-font);
    font-size: 1.2rem;
    text-shadow: 0 0 5px var(--cyan);
}

/* --- UI ICONS (Server-Safe Filter Version) --- */
.ui-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
    
    /* Removed the drop-shadow at the end */
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    transition: filter 0.3s ease;
}

body.corrupted .ui-icon {
    filter: brightness(0) saturate(100%) invert(26%) sepia(100%) saturate(7450%) hue-rotate(323deg) brightness(102%) contrast(101%);
}

body.ios-ui.corrupted .ui-icon {
    filter: brightness(0) saturate(100%) invert(24%) sepia(100%) saturate(7000%) hue-rotate(320deg) brightness(103%) contrast(101%);
}

#playlist-menu {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.7);
    border-left: 2px solid var(--neon-green);
    padding: 10px;
    font-family: var(--main-font);
    border-radius: var(--radius-md);
    
    /* CHANGE THIS: Use opacity instead of display:none for smoother reveals */
    opacity: 0; 
    pointer-events: none;
    transition: opacity 1s ease;
}

body:not(.ios-ui) #playlist-menu {
    width: 186px;
    max-width: 186px;
    box-sizing: border-box;
}

body:not(.ios-ui) #track-title {
    max-width: 100%;
}

/* Add this new class to handle the reveal */
#playlist-menu.active {
    opacity: 1;
    pointer-events: auto;
}

/* App chrome above pong HUD overlays (≤10007) */
body:not(.ios-ui) .control-panel.active,
body:not(.ios-ui) #playlist-menu.active {
    position: fixed;
    z-index: 10020;
    pointer-events: auto;
}

#playlist-header {
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--neon-green);
    letter-spacing: 1px;
    min-width: 0;
    display: flex;
}

#track-title {
    flex: 1;
    min-width: 0;
    max-width: min(42vw, 220px);
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: 1.3;
}

.track-title-scroll {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.track-title-marquee.is-static .track-title-scroll {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-title-marquee.is-scrolling .track-title-scroll {
    animation: track-title-marquee var(--marquee-duration, 20s) linear infinite;
    will-change: transform;
}

.track-title-marquee.is-scrolling:hover .track-title-scroll {
    animation-play-state: paused;
}

.track-title-gap {
    display: inline-block;
    padding: 0 1.5em;
    opacity: 0.45;
}

@keyframes track-title-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-offset, -50%)); }
}

@media (prefers-reduced-motion: reduce) {
    .track-title-marquee.is-scrolling .track-title-scroll {
        animation: none;
    }
}

#playlist-controls {
    display: flex;
    gap: 8px;
}

#playlist-controls .ui-btn {
    font-size: 1rem; /* Increases the size of the symbols */
    padding: 2px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#playlist-menu .ui-btn {
    font-size: 0.65rem;
    padding: 3px 8px;
}

body.corrupted #playlist-menu {
    border-color: var(--alert-red);
}

/* --- CHROMATIC ABERRATION GLITCH --- */
@keyframes chromaticFlash {
    0% { 
        transform: translate(2px, 1px) skewX(2deg); 
        text-shadow: 3px 0 0 var(--alert-red), -3px 0 0 var(--cyan);
        filter: drop-shadow(3px 0 0 var(--alert-red)) drop-shadow(-3px 0 0 var(--cyan));
    }
    20% { 
        transform: translate(-3px, -2px) skewX(-2deg); 
        text-shadow: -4px 0 0 var(--alert-red), 4px 0 0 var(--cyan);
        filter: drop-shadow(-4px 0 0 var(--alert-red)) drop-shadow(4px 0 0 var(--cyan));
    }
    40% { 
        transform: translate(2px, 0px) skewX(1deg); 
        text-shadow: 2px 0 0 var(--alert-red), -2px 0 0 var(--cyan);
        filter: none;
    }
    60% { 
        transform: translate(-1px, 3px) skewX(-1deg); 
        text-shadow: -3px 0 0 var(--alert-red), 3px 0 0 var(--cyan);
        filter: drop-shadow(-3px 0 0 var(--alert-red)) drop-shadow(3px 0 0 var(--cyan));
    }
    80% { 
        transform: translate(1px, -1px) skewX(0deg); 
        text-shadow: 3px 0 0 var(--alert-red), -3px 0 0 var(--cyan);
        filter: none;
    }
    100% { 
        transform: translate(0) skewX(0deg); 
        text-shadow: none;
        filter: none;
    }
}

/* This class will be toggled by JavaScript */
/* Update this specific class at the bottom of your CSS */
body.chromatic-active {
    /* By chaining BOTH animations with a comma, we prevent the fade-in from resetting */
    animation: fadeInPage 1.5s ease-out forwards, chromaticFlash 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* --- VAULT IFRAME INTEGRATION --- */

/* 1. Prevent the thumbnail from stealing the click so the Lightbox can open */
.vault-item iframe.genesis-iframe {
    pointer-events: none; 
}

/* 2. When opened in the Lightbox, target the NEW class the JS creates */
#lightbox-overlay.active iframe.lightbox-content,
#lightbox-overlay.active iframe.genesis-lightbox {
    pointer-events: auto;
    background: #efefef;
    aspect-ratio: 5 / 4;
    width: min(90vw, calc(90vh * 5 / 4));
    height: auto;
    max-height: 90vh;
    max-width: 90vw;
    border: 2px solid var(--neon-green);
}

/* Drop this right above your closing </style> tag */
    .lightbox-overlay {
      display: none; 
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.9);
      z-index: 999999;
      justify-content: center;
      align-items: center;
    }

    .lightbox-overlay.active {
      display: flex;
      opacity: 1;
      visibility: visible;
      z-index: 1000001;
    }
    
    .lightbox-image-wrapper {
      position: relative;
      display: inline-block;
      max-width: 90vw;
      max-height: 90vh;
    }

   #lightbox-img {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
      border: 4px solid var(--neon-green);
      box-shadow: 6px 6px 0px rgba(0, 255, 0, 0.2);
      border-radius: var(--radius-md);
      display: block; /* Removes weird spacing under the image */
    }

/* The updated close button pinned to the top right of the SCREEN */
    .lightbox-close {
      position: fixed;
      top: 30px;
      right: 40px;
      color: var(--neon-green);
      font-size: 32px;
      font-weight: bold;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 1000000;
      line-height: 1;
      padding: 0;
      text-shadow: 0 0 10px var(--neon-green);
      transition: all 0.2s;
    }

    .lightbox-close:hover {
      color: #fff;
      text-shadow: 0 0 20px var(--neon-green);
      background: none;
      box-shadow: none;
    }

   .lightbox-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: var(--neon-green);
      border: 1px solid var(--neon-green);
      padding: 16px 20px;
      cursor: pointer;
      font-size: 24px;
      z-index: 1000000;
      border-radius: var(--radius-sm);
      transition: all 0.2s;
    }

    .lightbox-btn:hover { 
      background: var(--neon-green); 
      color: #000;
      box-shadow: 0 0 15px var(--neon-green);
    }
    
    /* Pull the arrows 20px inward so they sit over the image */
    .lb-prev { left: 20px; }
    .lb-next { right: 20px; }

    .carousel-slide {
      cursor: zoom-in;
    }

html:has(body.ios-ui),
body.ios-ui {
    overscroll-behavior-y: none;
    overscroll-behavior: none;
}

/* --- iOS: vertical HUD rail + sidebar tools --- */
body.ios-ui {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    --ios-radius-sm: 12px;
    --ios-radius-md: 18px;
    --ios-radius-lg: 24px;
    --ios-radius-xl: 32px;
}

/* Rotating 150vmax backdrop is costly on mobile GPUs */
body.ios-ui::before {
    animation: none;
}

body.ios-ui.ios-keyboard-open #ios-scroll-shell {
    overflow: hidden;
    touch-action: none;
}

#ios-scroll-shell {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
}

#ios-scroll-rail {
    position: relative;
    pointer-events: none;
}

body.ios-ui #grid-canvas,
body.ios-ui #panopticon-eye {
    pointer-events: none;
}

body.ios-ui #grid-canvas {
    position: fixed;
    transform: translate(var(--ios-vv-offset-x, 0px), var(--ios-vv-offset-y, 0px));
    contain: strict;
}

body.ios-ui.singularity-active #grid-canvas {
    visibility: hidden;
}

body.ios-ui #panopticon-eye:not(.pong-active) {
    transform: translate(
        calc(-50% + var(--ios-vv-offset-x, 0px)),
        calc(-50% + var(--ios-vv-offset-y, 0px))
    );
}

body.ios-ui .ios-pane {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    pointer-events: none;
}

body.ios-ui .ios-pane-top {
    min-height: 46dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top) + 20px) 16px 28px;
    box-sizing: border-box;
}

body.ios-ui .ios-pane-main {
    position: relative;
    min-height: 100dvh;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

body.ios-ui .ios-scroll-hint {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: clamp(1rem, 4.5vw, 1.35rem);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: rgba(0, 255, 0, 0.72);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.45);
    pointer-events: none;
    user-select: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

body.ios-ui .ios-scroll-hint-top {
    top: calc(env(safe-area-inset-top) + 28px);
}

body.ios-ui .ios-scroll-hint-bottom {
    bottom: calc(env(safe-area-inset-bottom) + 28px);
}

body.ios-ui .ios-scroll-hint.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.ios-ui:not(.garden-ready) .ios-scroll-hint {
    opacity: 0;
    visibility: hidden;
}

body.ios-ui .ios-pane-bottom {
    min-height: 36dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px calc(env(safe-area-inset-bottom) + 32px);
    box-sizing: border-box;
    pointer-events: auto;
}

@media (orientation: landscape) {
    body.ios-ui .ios-pane-top,
    body.ios-ui .ios-pane-main,
    body.ios-ui .ios-pane-bottom {
        min-height: 100svh;
        max-height: 100svh;
        box-sizing: border-box;
    }

    body.ios-ui .ios-pane-top {
        padding-top: calc(env(safe-area-inset-top) + 12px);
        padding-bottom: 12px;
    }

    body.ios-ui .ios-pane-bottom {
        padding-top: 12px;
        padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
    }

    body.ios-ui .ios-pane-main {
        scroll-snap-align: start;
    }
}

body.ios-ui #hud {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    transform: none;
    opacity: 1;
    pointer-events: none;
}

body.ios-ui #hud.active.anim-drop,
body.ios-ui #hud.active.anim-rise,
body.ios-ui #hud.active.anim-zoom,
body.ios-ui #hud.active.anim-slide,
body.ios-ui #hud.active.anim-glitch {
    animation: none;
    transform: none;
    opacity: 1;
}

body.ios-ui #hud h1 {
    font-size: clamp(2rem, 11vw, 3.25rem);
    letter-spacing: 0.12em;
    padding: 16px 22px 10px;
    line-height: 1.05;
}

body.ios-ui #docking-bay {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    padding: 0;
    pointer-events: auto;
}

body.ios-ui .control-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 14px);
    left: 14px;
    bottom: auto;
    right: auto;
    z-index: 10011;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

body.ios-ui.garden-ready .control-panel.active {
    opacity: 1;
    pointer-events: auto;
}

body.ios-ui #mode-btn {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    opacity: 0;
    transform: none;
    width: 100%;
    margin-bottom: 12px;
    font-size: 0.8rem;
    padding: 10px 12px;
    transition: opacity 0.8s ease;
}

body.ios-ui.garden-ready #mode-btn.active {
    opacity: 1;
}

body.ios-ui #playlist-menu {
    position: static;
    bottom: auto;
    left: auto;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    box-sizing: border-box;
    border-left: none;
    border-top: 1px solid rgba(0, 255, 0, 0.25);
    padding-top: 12px;
    background: transparent;
    transition: opacity 0.8s ease;
}

body.ios-ui #playlist-header {
    width: 100%;
}

body.ios-ui #track-title {
    max-width: 100%;
    width: 100%;
}

body.ios-ui.garden-ready #playlist-menu.active {
    opacity: 1;
    pointer-events: auto;
}

body.ios-ui #playlist-controls .ui-btn {
    flex: 1;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

body.ios-ui #sidebar-menu {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding-top: calc(env(safe-area-inset-top) + 72px);
    padding-bottom: 0;
    box-sizing: border-box;
    z-index: 10008;
}

body.ios-ui #sidebar-menu ul {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.ios-ui .ios-sidebar-tools {
    flex-shrink: 0;
    margin-top: auto;
    padding: 14px 16px calc(env(safe-area-inset-bottom) + 14px);
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    background: rgba(5, 5, 5, 0.98);
}

/* iOS: FAB only — no docked sliver; terminal opens full panel when active */
body.ios-ui.garden-ready #terminal-container:not(.active),
body.ios-ui.garden-ready #terminal-container.reveal-in.is-sliver:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.ios-ui.garden-ready #terminal-container.active:not([hidden]) {
    display: flex !important;
    position: fixed;
    width: min(320px, 92vw);
    left: 50%;
    right: auto;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom) + 72px);
    z-index: 10055;
    min-width: 0;
}

body.ios-ui.garden-ready .ios-terminal-toggle:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: calc(env(safe-area-inset-right) + 10px);
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    width: 52px;
    height: 52px;
    z-index: 10060;
    margin: 0;
    padding: 0;
    border: 2px solid var(--neon-green);
    border-radius: var(--ios-radius-md);
    background: rgba(0, 12, 0, 0.92);
    color: var(--neon-green);
    font-family: var(--main-font);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 6px var(--neon-green);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.25);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

body.ios-ui.garden-ready .ios-terminal-toggle:not([hidden]) .ios-terminal-toggle-glyph {
    pointer-events: none;
}

body.ios-ui #terminal-container.active ~ .ios-terminal-toggle:not([hidden]) {
    opacity: 0.35;
}

body.ios-ui #terminal-container.active {
    height: min(220px, 44dvh);
    overflow: hidden;
}

body.ios-ui #panopticon-eye {
    width: clamp(90px, 22vw, 150px);
    height: clamp(90px, 22vw, 150px);
}

@media (pointer: coarse) {
    .vault-item.carousel-container .carousel-controls .carousel-btn {
        opacity: 1;
        padding: 2px 8px;
        font-size: 13px;
        background: rgba(0, 0, 0, 0.4);
    }
}

body.ios-ui #lightbox.lightbox-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1000001;
}

body.lightbox-open {
    overflow: hidden;
}

body.ios-ui #lightbox.lightbox-overlay.active {
    display: grid !important;
    opacity: 1;
    visibility: visible;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "image image"
        "prev next";
    align-items: center;
    justify-items: center;
    align-content: center;
    gap: 14px;
    padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px);
    box-sizing: border-box;
}

body.ios-ui #lightbox .lightbox-image-wrapper {
    grid-area: image;
    max-width: min(92vw, 100%);
    max-height: calc(100svh - 130px);
}

body.ios-ui #lightbox #lightbox-img {
    max-height: calc(100svh - 130px);
}

body.ios-ui #lightbox .lightbox-btn {
    position: relative;
    top: auto;
    left: auto !important;
    right: auto !important;
    transform: none;
    padding: 10px 18px;
    font-size: 18px;
}

body.ios-ui #lightbox .lb-prev {
    grid-area: prev;
    justify-self: end;
    margin-right: 10px;
}

body.ios-ui #lightbox .lb-next {
    grid-area: next;
    justify-self: start;
    margin-left: 10px;
}

/* iOS modal reroll eye */
body.ios-ui #refresh-hint {
    display: none !important;
}

body.ios-ui .ios-modal-reroll {
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: auto;
    padding: 10px 0 4px;
    width: 54px;
    height: 54px;
    border: none;
    background: transparent;
    color: var(--neon-green);
    cursor: pointer;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.35));
}

body.ios-ui .ios-modal-reroll.visible {
    display: flex;
}

body.ios-ui .ios-modal-reroll svg {
    width: 100%;
    height: 100%;
}

body.ios-ui.corrupted .ios-modal-reroll {
    color: var(--alert-red);
    filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.35));
}

body.ios-ui .modal-content {
    min-height: 0;
    border-radius: var(--ios-radius-lg);
}

/* --- iOS: rounded corners on all chrome --- */
body.ios-ui #init-btn,
body.ios-ui #progress-container,
body.ios-ui .ui-btn,
body.ios-ui #mode-btn,
body.ios-ui .playlist-btn,
body.ios-ui .singularity-btn,
body.ios-ui .arcade-btn,
body.ios-ui .carousel-btn,
body.ios-ui .close-btn,
body.ios-ui .lightbox-btn {
    border-radius: var(--ios-radius-md);
}

body.ios-ui #terminal-container,
body.ios-ui.garden-ready #terminal-container:not([hidden]),
body.ios-ui #terminal-container.reveal-in,
body.ios-ui #terminal-container.active {
    border-radius: var(--ios-radius-lg);
}

body.ios-ui #terminal-container.active {
    overflow: hidden;
}

body.ios-ui #terminal-input-line {
    border-radius: var(--ios-radius-sm);
    background: rgba(0, 20, 0, 0.35);
    padding: 4px 8px;
    margin-top: 6px;
}

/* iOS: singularity overlay retired — poems live in sidebar modal */
body.ios-ui #singularity-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body:not(.ios-ui) .ios-only-sidebar-item {
    display: none !important;
}

body.ios-ui #ios-poems-item[hidden] {
    display: none !important;
}

body.ios-ui #modal-poems .ios-poems-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    flex: 1 1 auto;
    max-height: min(62vh, 520px);
}

body.ios-ui #modal-poems .ios-poem-list {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 0 8px;
    overflow: visible;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.ios-ui .ios-poem-list-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    margin: 0 0 4px;
    border: 1px solid rgba(0, 255, 0, 0.25);
    border-radius: var(--ios-radius-sm, 6px);
    background: rgba(0, 20, 0, 0.35);
    color: var(--neon-green);
    font-family: var(--main-font);
    font-size: 0.95rem;
    cursor: pointer;
    touch-action: manipulation;
}

body.ios-ui .ios-poem-list-item.active {
    background: rgba(0, 255, 0, 0.15);
    border-color: var(--neon-green);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

body.ios-ui #modal-poems .ios-poem-reader {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

body.ios-ui #ios-poem-body {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--main-font);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--neon-green);
}

body.ios-ui .ios-poem-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 8px;
}

body.ios-ui #modal-poems .modal-content {
    display: flex;
    flex-direction: column;
    max-height: min(88dvh, 720px);
}

body.ios-ui #hud h1 {
    border-radius: var(--ios-radius-lg);
}

body.ios-ui .control-panel {
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

body.ios-ui #playlist-menu {
    border-radius: var(--ios-radius-md);
    border: 1px solid rgba(0, 255, 0, 0.25);
}

body.ios-ui #track-title {
    border-radius: var(--ios-radius-sm);
}

body.ios-ui #sidebar-menu {
    border-radius: 0 var(--ios-radius-xl) var(--ios-radius-xl) 0;
}

body.ios-ui #sidebar-menu li {
    border-radius: var(--ios-radius-md);
}

body.ios-ui .ios-sidebar-tools {
    border-radius: var(--ios-radius-md) var(--ios-radius-md) 0 0;
}

body.ios-ui .modal,
body.ios-ui .modal.wide {
    border-radius: var(--ios-radius-lg);
    overflow: hidden;
}

body.ios-ui .modal h2 {
    border-radius: var(--ios-radius-sm) var(--ios-radius-sm) 0 0;
}

body.ios-ui .scrollable-content {
    border-radius: var(--ios-radius-sm);
}

body.ios-ui .vault-item,
body.ios-ui .carousel-stage,
body.ios-ui .carousel-slide,
body.ios-ui .vault-media,
body.ios-ui .vault-item iframe.genesis-iframe {
    border-radius: var(--ios-radius-md);
}

body.ios-ui .trophy-card,
body.ios-ui #arcade-game-container {
    border-radius: var(--ios-radius-md);
}

body.ios-ui #arcade-screen,
body.ios-ui #sequence-display,
body.ios-ui .interactive-square,
body.ios-ui .matrix-grid {
    border-radius: var(--ios-radius-md);
}

body.ios-ui .pfp-wrapper {
    border-radius: var(--ios-radius-lg);
}

body.ios-ui #lightbox .lightbox-image-wrapper,
body.ios-ui #lightbox #lightbox-img {
    border-radius: var(--ios-radius-md);
}

body.ios-ui #ios-pong-scoreboard,
body.ios-ui #ios-pong-comment,
body.ios-ui #pong-quit-hint {
    border-radius: var(--ios-radius-md);
}

body.ios-ui #ios-pong-scoreboard.visible {
    padding: 10px 22px;
}

body.ios-ui #ios-pong-comment.visible,
body.ios-ui #pong-quit-hint {
    padding: 6px 12px;
    background: rgba(0, 8, 0, 0.55);
}

body.ios-ui .artifact-pizza {
    border-radius: var(--ios-radius-md);
}

body.ios-ui .ios-modal-reroll {
    border-radius: var(--radius-pill);
}

#modal-arcade .modal-content {
    overflow: hidden;
}

#modal-arcade .scrollable-content {
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
}

#modal-vault #refresh-hint,
#modal-vault .ios-modal-reroll,
#modal-arcade #refresh-hint,
#modal-arcade .ios-modal-reroll,
#modal-trophies #refresh-hint,
#modal-trophies .ios-modal-reroll {
    display: none !important;
}

/* --- iOS PANOPTICON PING PONG --- */
.ios-pong-unselectable,
.ios-pong-unselectable * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

body.ios-pong-playing #ios-scroll-shell {
    visibility: hidden;
    overflow: hidden;
    touch-action: none;
    pointer-events: none;
}

body.ios-pong-playing #ios-pong-scoreboard,
body.ios-pong-playing #ios-pong-comment,
body.ios-pong-playing #panopticon-eye,
body.pong-playing:not(.ios-ui) #ios-pong-scoreboard,
body.pong-playing:not(.ios-ui) #ios-pong-comment,
body.pong-playing:not(.ios-ui) #panopticon-eye {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

body.ios-pong-playing .control-panel.active,
body.ios-pong-playing #terminal-container,
body.ios-pong-playing.garden-ready #playlist-menu.active,
body.pong-playing:not(.ios-ui) .control-panel.active,
body.pong-playing:not(.ios-ui) #terminal-container,
body.pong-playing:not(.ios-ui) #playlist-menu.active {
    z-index: 10020;
    pointer-events: auto;
}

body.ios-ui:has(#sidebar-menu.active) .control-panel {
    z-index: 10022;
    pointer-events: auto;
    opacity: 1;
}

body:not(.ios-ui) .ios-pong-eye-tap {
    display: none !important;
    pointer-events: none !important;
}

.ios-pong-eye-tap {
    position: fixed;
    z-index: 10006;
    pointer-events: none;
    touch-action: manipulation;
    background: transparent;
    opacity: 0;
    visibility: hidden;
}

.ios-pong-eye-tap.visible {
    visibility: visible;
    pointer-events: auto;
}

.ios-pong-panel {
    position: fixed;
    z-index: 10006;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
    touch-action: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.ios-pong-panel.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ios-pong-arrow {
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--neon-green);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
    filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.35));
}

.ios-pong-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ios-pong-ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.ios-pong-chevron {
    fill: currentColor;
}

body.corrupted .ios-pong-arrow {
    color: var(--alert-red);
    filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.35));
}

#ios-pong-court {
    position: fixed;
    z-index: 13;
    pointer-events: none;
    touch-action: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#ios-pong-court .pong-ball {
    shape-rendering: geometricPrecision;
}

#ios-pong-court .pong-court-fill {
    fill: rgba(0, 16, 0, 0.28);
    stroke: none;
    pointer-events: none;
}

#ios-pong-court .pong-court-boundary {
    fill: none;
    stroke: var(--neon-green);
    stroke-width: 2.5;
    opacity: 1;
    pointer-events: none;
}

#ios-pong-court .pong-paddle {
    shape-rendering: geometricPrecision;
}

#ios-pong-court.visible {
    opacity: 1;
    visibility: visible;
}

#ios-pong-court.visible .pong-court-fill {
    pointer-events: auto;
}

#ios-pong-court.visible.is-paused .pong-court-fill {
    fill: rgba(0, 16, 0, 0.42);
}

#ios-pong-court.visible.is-paused .pong-court-boundary {
    opacity: 0.72;
}

body.ios-ui #panopticon-pong {
    display: none;
}

#ios-pong-quit {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 24px);
    transform: translateX(-50%);
    z-index: 10007;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1.5px solid rgba(0, 255, 0, 0.42);
    border-radius: 50%;
    background: rgba(0, 8, 0, 0.78);
    color: var(--neon-green);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#ios-pong-quit:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

@media (orientation: landscape) {
    body.ios-pong-playing #ios-pong-quit:not([hidden]),
    body.pong-playing:not(.pong-keyboard-mode) #ios-pong-quit:not([hidden]) {
        top: calc(env(safe-area-inset-top) + 10px);
        right: calc(env(safe-area-inset-right) + 10px);
        left: auto;
        bottom: auto;
        transform: none;
    }
}

body.pong-keyboard-mode #ios-pong-quit {
    display: none !important;
    pointer-events: none !important;
}

.ios-pong-quit-icon {
    display: block;
    width: 18px;
    height: 18px;
    position: relative;
}

.ios-pong-quit-icon::before,
.ios-pong-quit-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.ios-pong-quit-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ios-pong-quit-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.corrupted #ios-pong-quit {
    color: var(--alert-red);
    border-color: rgba(255, 0, 85, 0.42);
    background: rgba(20, 0, 6, 0.78);
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.18);
}

body.ios-pong-fading #panopticon-eye.pong-active,
body.ios-pong-fading #panopticon-eye.pong-active #panopticon-pong,
body.ios-pong-fading #ios-pong-court.visible,
body.ios-pong-fading .ios-pong-panel.visible,
body.ios-pong-fading #ios-pong-scoreboard,
body.ios-pong-fading #ios-pong-quit,
body.ios-pong-fading #ios-pong-comment,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active #panopticon-pong,
body.pong-fading:not(.ios-ui) #ios-pong-court.visible,
body.pong-fading:not(.ios-ui) #ios-pong-scoreboard,
body.pong-fading:not(.ios-ui) #ios-pong-quit,
body.pong-fading:not(.ios-ui) #ios-pong-comment {
    opacity: 0 !important;
    transition: opacity 0.48s ease;
    pointer-events: none !important;
}

body.ios-pong-fading #panopticon-eye.pong-active .panopticon-lid,
body.ios-pong-fading #panopticon-eye.pong-active .panopticon-iris-outer,
body.ios-pong-fading #panopticon-eye.pong-active .panopticon-iris-mid,
body.ios-pong-fading #panopticon-eye.pong-active .panopticon-pupil,
body.ios-pong-fading #panopticon-eye.pong-active .panopticon-god-pupil,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-lid,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-iris-outer,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-iris-mid,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-pupil,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-god-pupil {
    opacity: 1 !important;
    transition: opacity 0.48s ease;
}

body.ios-pong-fading #panopticon-eye.pong-active .panopticon-socket-fill,
body.ios-pong-fading #panopticon-eye.pong-active .panopticon-socket-inlay,
body.ios-pong-fading #panopticon-eye.pong-active .panopticon-socket-inlay-rim,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-socket-fill,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-socket-inlay,
body.pong-fading:not(.ios-ui) #panopticon-eye.pong-active .panopticon-socket-inlay-rim {
    opacity: 1 !important;
    transition: opacity 0.48s ease;
}

body.ios-pong-playing #panopticon-eye.pong-active .panopticon-lid,
body.ios-pong-playing #panopticon-eye.pong-active .panopticon-iris-outer,
body.ios-pong-playing #panopticon-eye.pong-active .panopticon-iris-mid,
body.ios-pong-playing #panopticon-eye.pong-active .panopticon-pupil,
body.ios-pong-playing #panopticon-eye.pong-active .panopticon-god-pupil,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-lid,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-iris-outer,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-iris-mid,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-pupil,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-god-pupil {
    opacity: 1 !important;
}

body.ios-pong-playing #panopticon-eye.pong-active .panopticon-socket-fill,
body.ios-pong-playing #panopticon-eye.pong-active .panopticon-socket-inlay,
body.ios-pong-playing #panopticon-eye.pong-active .panopticon-socket-inlay-rim,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-socket-fill,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-socket-inlay,
body.pong-playing:not(.ios-ui) #panopticon-eye.pong-active .panopticon-socket-inlay-rim {
    opacity: 0.72 !important;
}

#panopticon-eye.eye-move-anim,
body.ios-pong-playing #panopticon-eye,
body.pong-playing:not(.ios-ui) #panopticon-eye {
    z-index: 14;
    transition:
        top 0.64s cubic-bezier(0.25, 0.75, 0.35, 1),
        left 0.64s cubic-bezier(0.25, 0.75, 0.35, 1),
        width 0.64s cubic-bezier(0.25, 0.75, 0.35, 1),
        height 0.64s cubic-bezier(0.25, 0.75, 0.35, 1),
        opacity 0.35s ease;
}

#ios-pong-comment {
    position: fixed;
    z-index: 10005;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--main-font);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    line-height: 1.35;
    color: rgba(0, 255, 0, 0.78);
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#ios-pong-comment.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

body.corrupted #ios-pong-comment {
    color: rgba(255, 0, 85, 0.78);
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.35);
}

#pong-quit-hint {
    position: fixed;
    z-index: 10005;
    margin: 0;
    padding: 0 8px;
    font-family: var(--main-font);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(0, 255, 0, 0.62);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

body.corrupted #pong-quit-hint {
    color: rgba(255, 0, 85, 0.62);
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.35);
}

#pong-start-hint,
#konami-start-hint {
    position: fixed;
    z-index: 10005;
    margin: 0;
    padding: 0 8px;
    font-family: var(--main-font);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: rgba(0, 255, 0, 0.52);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    transform: translate(-50%, -24px);
}

#pong-start-hint.hint-drop-in,
#konami-start-hint.hint-drop-in {
    animation: pongHintDropIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes pongHintDropIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -24px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes pongHintFadeInOut {
    0% { opacity: 0; transform: translate(-50%, 10px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -10px); }
}

#pong-start-hint .pong-hint-arrow,
#konami-start-hint .pong-hint-arrow {
    display: inline-block;
    font-size: 1.65rem;
    letter-spacing: 0.16em;
    line-height: 1;
    color: rgba(0, 255, 0, 0.52);
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.38);
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

#pong-start-hint .pong-hint-arrow.is-confirmed,
#konami-start-hint .pong-hint-arrow.is-confirmed {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

body.corrupted #pong-start-hint,
body.corrupted #konami-start-hint {
    color: rgba(255, 0, 85, 0.52);
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.28);
}

body.corrupted #pong-start-hint .pong-hint-arrow,
body.corrupted #konami-start-hint .pong-hint-arrow {
    color: rgba(255, 0, 85, 0.52);
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.28);
}

body.corrupted #pong-start-hint .pong-hint-arrow.is-confirmed,
body.corrupted #konami-start-hint .pong-hint-arrow.is-confirmed {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

body.pong-playing:not(.ios-ui) #ios-pong-court {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 0 18px rgba(0, 255, 0, 0.28);
}

body.pong-playing:not(.ios-ui) #ios-pong-court .pong-court-fill {
    fill: rgba(0, 16, 0, 0.32);
}

body.pong-playing:not(.ios-ui) #ios-pong-court .pong-court-boundary {
    stroke-width: 2.5;
}

body:not(.ios-ui) #panopticon-pong {
    display: none !important;
}

body.pong-playing:not(.ios-ui) #ios-pong-scoreboard {
    border-radius: var(--radius-sm);
}

body.pong-playing:not(.ios-ui) #ios-pong-comment {
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    background: rgba(0, 8, 0, 0.55);
}

#panopticon-pong {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#panopticon-eye.pong-active #panopticon-pong {
    opacity: 1;
}

#panopticon-eye.pong-active .panopticon-lid,
#panopticon-eye.pong-active .panopticon-iris-outer,
#panopticon-eye.pong-active .panopticon-iris-mid,
#panopticon-eye.pong-active .panopticon-pupil,
#panopticon-eye.pong-active .panopticon-god-pupil {
    opacity: 0;
    transition: opacity 0.35s ease;
}

#panopticon-eye.pong-active .panopticon-socket-fill,
#panopticon-eye.pong-active .panopticon-socket-inlay,
#panopticon-eye.pong-active .panopticon-socket-inlay-rim {
    opacity: 0.35;
}

.pong-paddle {
    stroke: var(--neon-green);
    stroke-width: 3.5;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.45));
}

.pong-ball {
    fill: var(--neon-green);
    stroke: none;
    filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.65));
}

body.corrupted .pong-paddle {
    stroke: var(--alert-red);
    filter: drop-shadow(0 0 4px rgba(255, 0, 85, 0.45));
}

body.corrupted .pong-ball {
    fill: var(--alert-red);
    filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.65));
}

body.corrupted #ios-pong-court .pong-court-fill {
    fill: rgba(24, 0, 8, 0.28);
}

body.corrupted #ios-pong-court .pong-court-boundary {
    fill: none;
    stroke: var(--alert-red);
}

#ios-pong-scoreboard {
    position: fixed;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10005;
    display: none;
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    font-family: var(--main-font);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: var(--neon-green);
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.35);
    background: rgba(0, 8, 0, 0.82);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

#ios-pong-scoreboard.visible {
    display: flex;
}

#ios-pong-scoreboard.score-drop {
    animation: pongScoreDropBelow 0.65s cubic-bezier(0.25, 1, 0.45, 1) forwards;
}

@keyframes pongScoreDropBelow {
    0% { transform: translate(-50%, -10px); opacity: 0; }
    70% { transform: translate(-50%, 3px); opacity: 1; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

body.corrupted #ios-pong-scoreboard {
    color: var(--alert-red);
    border-color: rgba(255, 0, 85, 0.35);
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.5);
}