/* Colors & Variables */
:root {
    --bg-dark: #0f0f1b;
    --bg-darker: #080811;
    --neon-blue: #00f3ff;
    --neon-purple: #b026ff;
    --neon-green: #39ff14;
    --text-main: #e0e0f0;
    --text-muted: #8b8bad;
    
    --bg-gradient-mid: #0a0a14;
    --bg-gradient-bot: #020205;
    --flicker-glow: rgba(0, 243, 255, 0.3);
    --nav-glow: rgba(0, 243, 255, 0.5);
    --dither-color: rgba(0, 243, 255, 0.03);
    
    --font-heading: 'VT323', monospace;
    --font-body: 'Inter', sans-serif;
}


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

html {
    scroll-behavior: smooth;
    /* Prevent layout shifting from overlay scrollbars */
    overflow-y: scroll; 
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Accessibility Focus Outline */
:focus-visible {
    outline: 2px dashed var(--neon-blue);
    outline-offset: 4px;
}

.pixel-text {
    font-family: var(--font-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: normal;
}

/* --- New: Subtle heading CRT flicker --- */
.flicker-text {
    animation: textFlicker 4s infinite;
}

@keyframes textFlicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 1;
        text-shadow: 0 0 5px var(--flicker-glow);
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.8;
        text-shadow: none;
    }
}

/* --- New: Scanline Overlay Toggle --- */
.scanlines {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
    background-size: 100% 4px;
    opacity: 0; /* Off by default */
    transition: opacity 0.3s ease;
}

.scanlines.active {
    opacity: 1;
}

/* UI Toggles container */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Switch Toggle (CRT) */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.slider {
    width: 36px;
    height: 20px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 20px;
    position: relative;
    transition: 0.3s;
    border: 1px solid var(--neon-purple);
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-main);
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .slider {
    background-color: rgba(176, 38, 255, 0.3);
}

.toggle-switch input:focus-visible + .slider {
    outline: 2px dashed var(--neon-blue);
    outline-offset: 2px;
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(16px);
    background-color: var(--neon-purple);
    box-shadow: 0 0 5px var(--neon-purple);
}

.toggle-label {
    font-family: var(--font-heading);
    color: var(--neon-purple);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* Animated Starfield Background */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 90px 40px, #aeb6ff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: drift 100s linear infinite;
    opacity: 0.25;
    will-change: background-position;
}

@keyframes drift {
    0% { background-position: 0 0; }
    100% { background-position: -200px -200px; }
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5%;
    background: rgba(8, 8, 17, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    z-index: 100;
}

.nav-brand {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--neon-blue);
    text-decoration: none;
    text-shadow: 0 0 5px var(--nav-glow);
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo {
    width: 28px;
    height: 28px;
    image-rendering: pixelated; /* Keeps the retro pixel feel sharp */
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent; 
}

.nav-link:hover {
    color: var(--neon-purple);
}

.nav-link.active {
    color: var(--neon-green);
    border-bottom: 2px solid var(--neon-green);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: var(--neon-blue);
    transition: transform 0.3s, opacity 0.3s;
    border-radius: 2px;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Layout */
main {
    padding-top: 80px; 
    max-width: 1200px;
    margin: 0 auto;
}

.section {
    min-height: 80vh;
    padding: 6rem 2rem 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Progress Bar Row */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-title {
    font-size: 3rem;
    color: var(--neon-blue);
    margin-bottom: 0;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

.progress-container {
    width: 200px;
    text-align: right;
}

.progress-text {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--neon-green);
    display: block;
    margin-bottom: 5px;
}

.progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(57, 255, 20, 0.3);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--neon-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
    transition: width 0.5s ease-out;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-primary {
    background: transparent;
    color: var(--neon-blue);
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1);
}

.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--neon-blue);
    color: var(--bg-dark);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
}

.btn-secondary {
    background: transparent;
    color: var(--neon-purple);
    border: 2px solid var(--neon-purple);
}

.btn-secondary:hover, .btn-secondary:focus-visible {
    background: var(--neon-purple);
    color: var(--bg-dark);
    box-shadow: 0 0 20px rgba(176, 38, 255, 0.6);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
}

.btn-outline {
    background: transparent;
    color: var(--neon-green);
    border: 1px solid var(--neon-green);
}

.btn-outline:hover, .btn-outline:focus-visible {
    background: rgba(57, 255, 20, 0.1);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

/* Complete Level Button */
.btn-complete {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    text-transform: uppercase;
}

.btn-complete:hover, .btn-complete:focus-visible {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.btn-complete.completed-state {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

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

/* Search and Filters */
.docs-filters {
    margin-bottom: 1.5rem;
}

.retro-input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-main);
    padding: 0.6rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
    transition: border-color 0.3s;
}

.retro-input:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}

.docs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.tag-btn:hover, .tag-btn:focus-visible {
    border-color: var(--neon-blue);
    color: var(--text-main);
}

.tag-btn[aria-pressed="true"] {
    background: rgba(0, 243, 255, 0.15);
    border-color: var(--neon-blue);
    color: var(--neon-blue);
}

/* Hero Section */
.hero {
    text-align: center;
    align-items: center;
    padding-top: 8rem;
}

/* Hero Art Styles */
.hero-art-container {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 2rem;
    pointer-events: none;
}

.cloud-container {
    position: relative;
    width: 320px;
    height: 200px;
}

.sf-cloud {
    width: 100%;
    height: 100%;
    fill: #00f3ff;
    filter: drop-shadow(0 0 25px rgba(0, 243, 255, 0.6));
    animation: floatingCloud 5s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes floatingCloud {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.invader {
    position: absolute;
    width: 50px;
    height: 38px;
    z-index: 1;
    animation: dropIn 4s infinite ease-out;
    opacity: 0;
}

.invader.i-1 { color: #00f3ff; left: 10px; animation-duration: 4.5s; animation-delay: 0s; }
.invader.i-2 { color: #39ff14; left: 80px; animation-duration: 5s; animation-delay: 1.5s; }
.invader.i-3 { color: #ffeb3b; left: 150px; animation-duration: 4s; animation-delay: 0.5s; }
.invader.i-4 { color: #ff00ff; left: 220px; animation-duration: 4.2s; animation-delay: 2.2s; }
.invader.i-5 { color: #b026ff; left: 280px; animation-duration: 4.8s; animation-delay: 1s; }

.invader svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px currentColor);
}

.monster-trail {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 4px;
    height: 80px;
    background: linear-gradient(to top, currentColor, transparent);
    transform: translateX(-50%);
    opacity: 0.8;
    box-shadow: 0 0 5px currentColor;
}

@keyframes dropIn {
    0% { transform: translateY(50px); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
}

/* Background Grid Overlay */
#grid-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -2;
    pointer-events: none;
    background-position: center;
}

/* Background Floating Ships */
.bg-ship-container {
    position: fixed;
    width: 35px;
    height: 35px;
    z-index: -1;
    opacity: 0.4;
    animation: floatingShip 8s ease-in-out infinite alternate;
}

.bg-ship-container svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px currentColor);
}

.bg-ship-container.s-1 svg { transform: rotate(45deg); }
.bg-ship-container.s-2 svg { transform: rotate(-30deg); }
.bg-ship-container.s-3 svg { transform: rotate(15deg); }
.bg-ship-container.s-4 svg { transform: rotate(-60deg); }

.s-1 { top: 15%; left: 10%; animation-delay: 0s; }
.s-2 { top: 40%; right: 15%; animation-delay: 2s; }
.s-3 { bottom: 20%; left: 20%; animation-delay: 4s; }
.s-4 { top: 25%; right: 10%; animation-delay: 1s; }

@keyframes floatingShip {
    0% { transform: translate(0, 0); }
    100% { transform: translate(15px, -15px); }
}

.hero h1 {
    font-size: 5rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    text-shadow: 3px 3px 0px var(--neon-purple), -2px -2px 0px var(--neon-blue);
}

.hero .subtitle {
    font-size: 1.3rem;
    color: var(--neon-blue);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.hero .description {
    max-width: 600px;
    color: var(--text-muted);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.cta-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

/* Docs Layout */
.docs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    background: rgba(15, 15, 27, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 2.5rem;
}

.docs-sidebar ul {
    list-style: none;
}

.docs-sidebar li.category-group {
    padding: 0;
    margin-bottom: 0.8rem;
    border-left: none;
    cursor: default;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid rgba(0, 243, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--neon-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    transition: background 0.2s, border-color 0.2s;
}

.category-header:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.3);
}

.category-header .chevron {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.category-header.collapsed-header .chevron {
    transform: rotate(-90deg);
}

.nested-list {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 0.5rem;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
}

.nested-list.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

.docs-sidebar li.doc-level-item {
    padding: 0.6rem 1rem;
    margin-bottom: 0.3rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: all 0.2s ease;
    outline: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0 4px 4px 0;
}

/* Filter hidden state */
.docs-sidebar li.category-group.hidden,
.docs-sidebar li.doc-level-item.hidden {
    display: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    display: inline-block;
}

.docs-sidebar li.doc-level-item.completed .status-dot {
    background: var(--neon-green);
    border-color: var(--neon-green);
    box-shadow: 0 0 5px var(--neon-green);
}

.docs-sidebar li.doc-level-item:hover, .docs-sidebar li.doc-level-item:focus-visible {
    color: var(--text-main);
    background: rgba(255,255,255,0.05);
    border-left-color: rgba(255,255,255,0.2);
}

.docs-sidebar li.doc-level-item.active {
    color: var(--neon-blue);
    border-left-color: var(--neon-blue);
    background: rgba(0, 243, 255, 0.05);
}

/* Doc Content Areas */
.docs-content {
    min-height: 400px;
    min-width: 0;
}

.doc-pane {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.doc-pane h3 {
    font-size: 2.2rem;
    color: var(--text-main);
}

.doc-desc {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.05rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.doc-pane h4 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--neon-purple); /* Changed from blue to differ from headings */
    font-size: 1.2rem;
}

.doc-section-text {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 1.05rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.doc-pane ul {
    margin-left: 1.5rem;
    color: var(--text-muted);
}

.doc-pane li {
    margin-bottom: 0.5rem;
}

.doc-references {
    margin-top: 1rem;
    list-style-type: none;
    padding-left: 0 !important;
}

.doc-references li {
    margin-bottom: 0.8rem;
    padding-left: 1rem;
    border-left: 2px solid var(--neon-blue);
}

.retro-link {
    color: var(--neon-blue);
    text-decoration: none;
    font-size: 1.05rem;
    transition: color 0.2s, text-shadow 0.2s;
}

.retro-link:hover, .retro-link:focus-visible {
    color: var(--neon-green);
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.4);
    outline: none;
}

/* Documentation Images */
.doc-image-figure {
    margin: 2.5rem 0;
    text-align: center;
}

.doc-image {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.15);
}

.doc-image-caption {
    margin-top: 0.8rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* Code Blocks Terminal Setup */
.retro-terminal {
    background: #0a0a0f;
    border-radius: 6px;
    border: 1px solid #333;
    overflow: hidden;
    margin: 2rem 0;
    box-shadow: 0 4px 25px rgba(0,0,0,0.4);
    position: relative;
}

.terminal-header {
    background: #1a1a24;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.term-title {
    margin-left: 1rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #888;
}

.copy-btn {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    border-radius: 4px;
    transition: all 0.2s;
}

.copy-btn:hover, .copy-btn:focus-visible {
    background: var(--neon-blue);
    color: var(--bg-dark);
}

.copy-btn.copied {
    background: var(--neon-green);
    color: var(--bg-dark);
    border-color: var(--neon-green);
}

.retro-terminal pre {
    padding: 1.5rem;
    overflow-x: auto;
}

.retro-terminal code {
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    color: var(--neon-green);
    text-shadow: 0 0 2px rgba(57, 255, 20, 0.4);
}

/* Blog Section */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    outline: none;
    display: flex;
    flex-direction: column;
}

.blog-card:hover, .blog-card:focus-within {
    transform: translateY(-5px);
    border-color: var(--neon-purple);
}

.card-meta {
    font-family: var(--font-heading);
    color: var(--neon-purple);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.blog-card h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.blog-card p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* push button to bottom */
}

/* Contenedor Flexbox para alinear: Fantasma - Texto - Fantasma */
.load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Separación entre los fantasmas y el texto */
    cursor: pointer;
    padding: 15px;
    transition: transform 0.2s ease;
    background: transparent;
    border: none;
    font-family: var(--font-heading);
}

/* Pequeño salto al hacer click */
.load-more-btn:active {
    transform: scale(0.95);
}

/* Texto estilo consola */
.terminal-text {
    color: var(--neon-blue);
    font-size: 1.5rem;
    letter-spacing: 2px;
    transition: text-shadow 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

.blink-cursor {
    animation: blink 1s step-end infinite;
}

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

/* Efecto neón al pasar el mouse por todo el botón */
.load-more-btn:hover .terminal-text {
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.4);
}

/* Envoltura para evitar que el fantasma de 140px rompa el diseño al escalarlo */
.ghost-wrapper {
    width: 30px;
    height: 30px;
    position: relative;
}

.ghost { 
    position: absolute; 
    transform: scale(0.2); /* Escala al 20% */
    transform-origin: top left;
}

/* Área invisible para detectar la cercanía del mouse */
.ghost-interaction-area {
    padding: 20px;
    cursor: pointer;
}

/* Efecto neón al pasar el mouse por todo el botón interactivo */
.ghost-interaction-area:hover .terminal-text {
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.4);
}

.show-less-btn {
    color: var(--neon-purple);
    cursor: pointer;
    margin-top: 1rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    display: inline-block;
    padding: 10px;
}

.show-less-btn:hover, .show-less-btn:focus-visible {
    color: var(--neon-blue);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.8), 0 0 20px rgba(0, 243, 255, 0.4);
    outline: none;
}

/* --- CÓDIGO DE COLORES --- */
.red .ghost-body div[id^="top"], .red .ghost-body div[id^="st"], .red .ghost-body .static-flicker { background-color: #ff0000; }
.cyan .ghost-body div[id^="top"], .cyan .ghost-body div[id^="st"], .cyan .ghost-body .static-flicker { background-color: #00ffff; }
.pink .ghost-body div[id^="top"], .pink .ghost-body div[id^="st"], .pink .ghost-body .static-flicker { background-color: #ffb8ff; } /* Rosa */
.orange .ghost-body div[id^="top"], .orange .ghost-body div[id^="st"], .orange .ghost-body .static-flicker { background-color: #ffb852; } /* Naranja/Amarillo */

/* --- ESTRUCTURA DEL FANTASMA --- */
.ghost-body {
    animation: upNDown infinite 1.5s ease-in-out; 
    position: relative;
    width: 140px; height: 140px; display: grid;
    grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(14, 1fr);
    grid-template-areas:
        "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
        "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
        "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
        "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
        "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
        "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
        "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }

#top0 { grid-area: top0; } #top1 { grid-area: top1; } #top2 { grid-area: top2; }
#top3 { grid-area: top3; } #top4 { grid-area: top4; } #st0 { grid-area: st0; }
#st1 { grid-area: st1; } #st2 { grid-area: st2; } #st3 { grid-area: st3; }
#st4 { grid-area: st4; } #st5 { grid-area: st5; }

#an1 { grid-area: an1; animation: flicker0 infinite 0.5s; } #an18 { grid-area: an18; animation: flicker0 infinite 0.5s; }
#an2 { grid-area: an2; animation: flicker1 infinite 0.5s; } #an17 { grid-area: an17; animation: flicker1 infinite 0.5s; }
#an3 { grid-area: an3; animation: flicker1 infinite 0.5s; } #an16 { grid-area: an16; animation: flicker1 infinite 0.5s; }
#an4 { grid-area: an4; animation: flicker1 infinite 0.5s; } #an15 { grid-area: an15; animation: flicker1 infinite 0.5s; }
#an6 { grid-area: an6; animation: flicker0 infinite 0.5s; } #an12 { grid-area: an12; animation: flicker0 infinite 0.5s; }
#an7 { grid-area: an7; animation: flicker0 infinite 0.5s; } #an13 { grid-area: an13; animation: flicker0 infinite 0.5s; }
#an9 { grid-area: an9; animation: flicker1 infinite 0.5s; } #an10 { grid-area: an10; animation: flicker1 infinite 0.5s; }
#an8 { grid-area: an8; animation: flicker0 infinite 0.5s; } #an11 { grid-area: an11; animation: flicker0 infinite 0.5s; }

@keyframes flicker0 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes flicker1 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* OJOS */
#eye, #eye1 { width: 40px; height: 50px; position: absolute; top: 30px; }
#eye { left: 10px; }
#eye1 { right: 30px; }
#eye::before, #eye1::before { content: ""; background-color: white; width: 20px; height: 50px; transform: translateX(10px); display: block; position: absolute; }
#eye::after, #eye1::after { content: ""; background-color: white; width: 40px; height: 30px; transform: translateY(10px); display: block; position: absolute; }

/* PUPILAS */
.pupil-element { 
    width: 20px; 
    height: 20px; 
    background-color: #0000cc;
    position: absolute; 
    top: 45px;
    z-index: 1; 
    transition: transform 0.1s linear;
}

/* Animación automática IDLE */
.idle-eyes {
    animation: eyesMovement infinite 3s;
}

.tracking-active .js-pupil {
    animation: none !important;
}

@keyframes eyesMovement { 0%, 49% { transform: translateX(-5px); } 50%, 99% { transform: translateX(15px); } 100% { transform: translateX(-5px); } }

/* About Section */
.about-card {
    background: rgba(0, 243, 255, 0.05);
    border-left: 4px solid var(--neon-blue);
    padding: 2.5rem;
    border-radius: 0 8px 8px 0;
    max-width: 800px;
}

.about-card p {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
}

/* Blog Modal (Enhanced) */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.blog-modal-layout {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-content {
    background: var(--bg-darker);
    border: 2px solid var(--neon-purple);
    padding: 3rem;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 0 35px rgba(176, 38, 255, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

.modal-body-content {
    overflow-y: auto;
    padding-right: 1rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.modal-body-content p {
    margin-bottom: 1rem;
}

.modal-controls {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
}

.close-modal {
    position: absolute;
    top: 1rem; right: 1.5rem;
    font-size: 2.5rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    background: transparent;
    border: none;
}

.close-modal:hover, .close-modal:focus-visible {
    color: var(--text-main);
    outline: none; 
}

#modal-title {
    color: var(--neon-purple);
    font-size: 2.5rem;
}

/* Back to Top Button */
/* Custom Mario Back to Top Wrapper */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(20px) scale(0.6);
    transform-origin: bottom center;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(0.6);
}

.button-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
}

.mario-button {
    width: 6rem;
    height: 6rem;
    background-color: #da6b34;
    border-radius: 0;
    box-shadow: 5px 5px 0px black;
    z-index: 10;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.coin {
    position: absolute;
    z-index: 1;
    top: 20px; 
    left: calc(50% - 25px); 
    pointer-events: none;
}

.mario-button.is-active {
    animation: hitBlock 0.3s ease-in-out;
}

.mario-button.is-active ~ .coin {
    animation: jump 1s;
}

.mario-button:hover {
    animation: animateBlock 1s infinite;
}

.button-icon {
    position: relative;
    top: 25%;
    left: 63%;
    z-index: 1;
    transform: scale(1.5);
}

.one {
    position: absolute;
    background-color: #DE5917;
    box-shadow: 2px 2px 0px black;
    width: 1rem;
    height: 0.35rem;
    z-index: 10;
}
.one:after {
    content: "";
    position: absolute;
    background-color: #DE5917;
    box-shadow: 2px 2px 0px black;
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(5px,15px);
    z-index: 10;
}
.one:before {
    content: "";
    position: absolute;
    background-color: #DE5917;
    box-shadow: 2px 2px 0px black;
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(5px,25px);
    z-index: 10;
}

.two {
    position: absolute;
    background-color: #DE5917;
    box-shadow: 2px 2px 0px black;
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(-50%,50%);
    z-index: 10;
}
.two::after {
    content: "";
    position: absolute;
    background-color: #DE5917;
    box-shadow: 2px 2px 0px black;
    width: 0.5rem;
    height: 0.8rem;
    transform: translate(190%,-5%);
    z-index: 10;
}
.two::before {
    content: "";
    position: absolute;
    background-color: #DE5917;
    width: 0.7rem;
    height: 0.3rem;
    transform: translate(12px,8px);
    z-index: 10;
}

.dots {
    position: absolute;
    width: 5px;
    height: 5px;
    transform: translate(-20px,-12px);
    background-color: #000;
}
.dots::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    transform: translate(50px,0px);
    background-color: #000;
}

.dots2 {
    position: absolute;
    width: 5px;
    height: 5px;
    transform: translate(-20px,40px);
    background-color: #000;
}
.dots2::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    transform: translate(50px,0px);
    background-color: #000;
}

@keyframes animateBlock {
    0% { background-color: #FFC07B; }
    75% { background-color: #DE5917; }
    100% { background-color: #da6b34; }
}

@keyframes jump {
    0% { transform: translateY(0) rotateY(0deg); }
    50% { transform: translateY(-150px) rotateY(180deg); }
    100% { transform: translateY(0) rotateY(360deg); }
}

@keyframes hitBlock {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }
    
    .docs-sidebar ul {
        display: flex;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    
    .docs-sidebar li {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    
    .docs-sidebar li.active {
        border-left-color: transparent;
        border-bottom-color: var(--neon-blue);
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .hero h1 { font-size: 3.5rem; }
    
    /* Hamburger Menu Overrides */
    .mobile-menu-toggle { display: flex; }
    
    .nav-controls { gap: 1rem; }
    
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(8, 8, 17, 0.98);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }
    
    .nav-links.open {
        max-height: 350px;
        border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    }
    
    .nav-link {
        padding: 1rem 5%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: block;
        width: 100%;
    }

    .nav-link.active {
        background: rgba(0, 243, 255, 0.05);
        border-left: 4px solid var(--neon-green);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-left: calc(5% - 4px);
    }
    
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}




/* --- ESTIL/* --- ESTILOS CSS COMPLETOS Y CORREGIDOS CON SPRINT Y DINOSAURIO --- */
        
body {
    background-color: #111;
    margin: 0;
    padding: 0;
    overflow: hidden; 
}

.marketing-arcade-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10;
}

/* --- PÓCIMA PIXEL ART ESTÁTICA --- */
.pixel-potion {
    width: 4px;  
    height: 4px; 
    background: transparent;
    position: fixed; 
    z-index: 999; 
    top: calc(45% + 15px); 
    right: 50px; 
    opacity: 1; 
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7)); 
    animation: consumePotion 9s linear forwards;
    box-shadow:
        0px 0px #8b4513, 4px 0px #8b4513,
        -4px 4px #aaa, 0px 4px #ccc, 4px 4px #ccc, 8px 4px #aaa,
        -8px 8px #0ff, -4px 8px #0ff, 0px 8px #0ff, 4px 8px #0ff, 8px 8px #0ff, 12px 8px #0ff,
        -8px 12px #0ff, -4px 12px #0ff, 0px 12px #0ff, 4px 12px #0ff, 8px 12px #0ff, 12px 12px #0ff,
        -4px 16px #aaa, 0px 16px #aaa, 4px 16px #aaa, 8px 16px #aaa;
}

/* --- LOADER CHARACTER (Contenedor Móvil) --- */
.loader-character {
    position: fixed;
    top: 45%; 
    z-index: 1000;
    pointer-events: none; 
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8)); 
    animation: chaseSequence 9s linear forwards;
    opacity: 1;
}

/* --- EINSTEIN --- */
.pixel-einstein-detailed {
    width: 4px;  
    height: 4px; 
    background: transparent;
    position: absolute; 
    top: 0;
    
    /* Vinculamos la nueva animación "einsteinTransformation" */
    animation: moveEinstein 9s linear forwards, einsteinTransformation 9s linear forwards;
    
    /* El dibujo base (antes de la animación) será el Vagón */
    box-shadow:
        16px 4px #fff, 20px 4px #fff, 24px 4px #fff, 28px 4px #fff,
        8px 8px #fff, 12px 8px #fff, 16px 8px #fff, 20px 8px #fff, 24px 8px #fff, 28px 8px #fff, 32px 8px #fff,
        0px 12px #fff, 4px 12px #fff, 8px 12px #fff, 12px 12px #fff, 16px 12px #fff, 20px 12px #fff, 24px 12px #fcdcb4, 28px 12px #fcdcb4, 32px 12px #fcdcb4,
        4px 16px #fff, 8px 16px #fff, 12px 16px #fff, 16px 16px #fcdcb4, 20px 16px #fcdcb4, 
        24px 16px #000, 28px 16px #fcdcb4, 32px 16px #fcdcb4,
        4px 20px #fff, 8px 20px #fff, 12px 20px #fff, 16px 20px #fcdcb4, 
        20px 20px #fff, 24px 20px #fff, 28px 20px #fff, 32px 20px #fff, 36px 20px #fff,
        12px 24px #8b4513, 16px 24px #8b4513, 20px 24px #8b4513, 24px 24px #8b4513, 28px 24px #8b4513,
        12px 28px #8b4513, 16px 28px #8b4513, 20px 28px #8b4513, 24px 28px #8b4513, 
        28px 28px #fcdcb4, 32px 28px #aaa, 36px 28px #aaa, 
        12px 32px #8b4513, 16px 32px #8b4513, 20px 32px #8b4513, 24px 32px #8b4513, 40px 32px #aaa, 
        4px 36px #ff003c, 8px 36px #ff003c, 12px 36px #ff003c, 16px 36px #ff003c, 20px 36px #ff003c, 24px 36px #ff003c, 28px 36px #ff003c, 32px 36px #ff003c, 36px 36px #ff003c, 40px 36px #ff003c, 44px 36px #ff003c,
        8px 40px #ff003c, 12px 40px #ff003c, 16px 40px #ff003c, 20px 40px #ff003c, 24px 40px #ff003c, 28px 40px #ff003c, 32px 40px #ff003c, 36px 40px #ff003c, 40px 40px #ff003c,
        12px 44px #000, 16px 44px #000, 28px 44px #000, 32px 44px #000,
        12px 48px #000, 16px 48px #000, 28px 48px #000, 32px 48px #000;
}

/* --- PAC-MAN --- */
.pixel-pacman {
    width: 4px;  
    height: 4px;
    background: transparent;
    position: absolute; 
    top: 10px;         
    animation: movePacman 9s linear forwards, chomp 0.4s infinite;
}


/* ========================================= */
/* --- KEYFRAMES (LA MAGIA DE LA ESCENA) --- */
/* ========================================= */

@keyframes consumePotion {
    0%, 40% { opacity: 1; } 
    45%, 100% { opacity: 0; } 
}

/* --- LA GRAN TRANSFORMACIÓN: Vagón a Dinosaurio --- */
@keyframes einsteinTransformation {
    /* 0% -> 44%: Pelo blanco + Vagón Rojo (Huyendo) */
    0%, 44% {
        box-shadow: 
        16px 4px #fff, 20px 4px #fff, 24px 4px #fff, 28px 4px #fff,
        8px 8px #fff, 12px 8px #fff, 16px 8px #fff, 20px 8px #fff, 24px 8px #fff, 28px 8px #fff, 32px 8px #fff,
        0px 12px #fff, 4px 12px #fff, 8px 12px #fff, 12px 12px #fff, 16px 12px #fff, 20px 12px #fff, 24px 12px #fcdcb4, 28px 12px #fcdcb4, 32px 12px #fcdcb4,
        4px 16px #fff, 8px 16px #fff, 12px 16px #fff, 16px 16px #fcdcb4, 20px 16px #fcdcb4, 
        24px 16px #000, 28px 16px #fcdcb4, 32px 16px #fcdcb4,
        4px 20px #fff, 8px 20px #fff, 12px 20px #fff, 16px 20px #fcdcb4, 
        20px 20px #fff, 24px 20px #fff, 28px 20px #fff, 32px 20px #fff, 36px 20px #fff,
        12px 24px #8b4513, 16px 24px #8b4513, 20px 24px #8b4513, 24px 24px #8b4513, 28px 24px #8b4513,
        12px 28px #8b4513, 16px 28px #8b4513, 20px 28px #8b4513, 24px 28px #8b4513, 
        28px 28px #fcdcb4, 32px 28px #aaa, 36px 28px #aaa, 
        12px 32px #8b4513, 16px 32px #8b4513, 20px 32px #8b4513, 24px 32px #8b4513, 40px 32px #aaa, 
        4px 36px #ff003c, 8px 36px #ff003c, 12px 36px #ff003c, 16px 36px #ff003c, 20px 36px #ff003c, 24px 36px #ff003c, 28px 36px #ff003c, 32px 36px #ff003c, 36px 36px #ff003c, 40px 36px #ff003c, 44px 36px #ff003c,
        8px 40px #ff003c, 12px 40px #ff003c, 16px 40px #ff003c, 20px 40px #ff003c, 24px 40px #ff003c, 28px 40px #ff003c, 32px 40px #ff003c, 36px 40px #ff003c, 40px 40px #ff003c,
        12px 44px #000, 16px 44px #000, 28px 44px #000, 32px 44px #000,
        12px 48px #000, 16px 48px #000, 28px 48px #000, 32px 48px #000;
    }
    
    /* 45% -> 100%: ¡Toma la pócima! Pelo Amarillo + Dinosaurio Verde (Persiguiendo) */
    45%, 100% {
        box-shadow: 
        /* --- PELO AMARILLO --- */
        16px 4px #ff0, 20px 4px #ff0, 24px 4px #ff0, 28px 4px #ff0,
        8px 8px #ff0, 12px 8px #ff0, 16px 8px #ff0, 20px 8px #ff0, 24px 8px #ff0, 28px 8px #ff0, 32px 8px #ff0,
        0px 12px #ff0, 4px 12px #ff0, 8px 12px #ff0, 12px 12px #ff0, 16px 12px #ff0, 20px 12px #ff0, 24px 12px #fcdcb4, 28px 12px #fcdcb4, 32px 12px #fcdcb4,
        /* --- CARA Y OJO --- */
        4px 16px #ff0, 8px 16px #ff0, 12px 16px #ff0, 16px 16px #fcdcb4, 20px 16px #fcdcb4, 
        24px 16px #000, 28px 16px #fcdcb4, 32px 16px #fcdcb4,
        /* --- BIGOTE --- */
        4px 20px #fff, 8px 20px #fff, 12px 20px #fff, 16px 20px #fcdcb4, 
        20px 20px #fff, 24px 20px #fff, 28px 20px #fff, 32px 20px #fff, 36px 20px #fff,
        
        /* --- CABEZA DEL DINOSAURIO (Verde con ojo blanco/negro) --- */
        44px 20px #28a745, 48px 20px #28a745, 52px 20px #28a745,
        12px 24px #8b4513, 16px 24px #8b4513, 20px 24px #8b4513, 24px 24px #8b4513, 28px 24px #8b4513,
        40px 24px #28a745, 44px 24px #28a745, 48px 24px #fff, 52px 24px #000, 56px 24px #28a745,
        
        /* --- ABRIGO MARRÓN, MANO Y HOCICO DEL DINOSAURIO --- */
        12px 28px #8b4513, 16px 28px #8b4513, 20px 28px #8b4513, 24px 28px #8b4513, 
        28px 28px #fcdcb4, /* Mano de Einstein sosteniendo las riendas */
        36px 28px #28a745, 40px 28px #28a745, 44px 28px #28a745, 48px 28px #28a745, 52px 28px #28a745, 56px 28px #28a745, 60px 28px #28a745,
        
        /* --- CUELLO DEL DINOSAURIO Y BASE DEL ABRIGO --- */
        12px 32px #8b4513, 16px 32px #8b4513, 20px 32px #8b4513, 24px 32px #8b4513, 
        32px 32px #28a745, 36px 32px #28a745, 40px 32px #28a745, 44px 32px #28a745, 48px 32px #ff0, 52px 32px #ff0, 56px 32px #28a745,
        
        /* --- SILLA DE MONTAR ROJA Y CUERPO VERDE --- */
        0px 36px #28a745, 4px 36px #28a745, 8px 36px #28a745, 12px 36px #28a745, 16px 36px #c00, 20px 36px #c00, 24px 36px #c00, 28px 36px #28a745, 32px 36px #28a745, 36px 36px #28a745, 40px 36px #28a745, 44px 36px #28a745, 48px 36px #28a745, 52px 36px #28a745,
        
        /* --- BARRIGA AMARILLA Y COLA --- */
        0px 40px #28a745, 4px 40px #28a745, 8px 40px #28a745, 12px 40px #ff0, 16px 40px #ff0, 20px 40px #ff0, 24px 40px #ff0, 28px 40px #28a745, 32px 40px #28a745, 36px 40px #28a745,
        
        /* --- PIERNAS DEL DINOSAURIO --- */
        12px 44px #28a745, 16px 44px #28a745, 28px 44px #28a745, 32px 44px #28a745,
        
        /* --- BOTITAS ROJAS --- */
        16px 48px #d9534f, 20px 48px #d9534f, 32px 48px #d9534f, 36px 48px #d9534f;
    }
}

@keyframes chaseSequence {
    0% { left: -150px; transform: scaleX(1); opacity: 0; }
    5% { opacity: 1; }
    40% { left: calc(100vw - 120px); transform: scaleX(1); }
    45%, 50% { left: calc(100vw - 120px); transform: scaleX(1); }
    51%, 54% { left: 100vw; transform: scaleX(-1); }
    55% { left: 100vw; transform: scaleX(-1); }
    95% { opacity: 1; }
    100% { left: -150px; transform: scaleX(-1); opacity: 0; }
}

@keyframes moveEinstein {
    0%, 50% { left: 0px; }
    51%, 100% { left: -80px; }
}

/* El acelerón rápido de Pac-Man se mantiene */
@keyframes movePacman {
    0%, 10% { left: -450px; }
    40%, 50% { left: -35px; } 
    51%, 100% { left: 0px; }
}

@keyframes chomp {
    0%, 49% {
        box-shadow: 12px 0px #ff0, 16px 0px #ff0, 20px 0px #ff0, 8px 4px #ff0, 12px 4px #ff0, 16px 4px #ff0, 20px 4px #ff0, 24px 4px #ff0, 4px 8px #ff0, 8px 8px #ff0, 12px 8px #000, 16px 8px #ff0, 20px 8px #ff0, 24px 8px #ff0, 28px 8px #ff0, 4px 12px #ff0, 8px 12px #ff0, 12px 12px #ff0, 16px 12px #ff0, 20px 12px #ff0, 0px 16px #ff0, 4px 16px #ff0, 8px 16px #ff0, 12px 16px #ff0, 4px 20px #ff0, 8px 20px #ff0, 12px 20px #ff0, 16px 20px #ff0, 20px 20px #ff0, 4px 24px #ff0, 8px 24px #ff0, 12px 24px #ff0, 16px 24px #ff0, 20px 24px #ff0, 24px 24px #ff0, 28px 24px #ff0, 8px 28px #ff0, 12px 28px #ff0, 16px 28px #ff0, 20px 28px #ff0, 24px 28px #ff0, 12px 32px #ff0, 16px 32px #ff0, 20px 32px #ff0;
    }
    50%, 100% {
        box-shadow: 12px 0px #ff0, 16px 0px #ff0, 20px 0px #ff0, 8px 4px #ff0, 12px 4px #ff0, 16px 4px #ff0, 20px 4px #ff0, 24px 4px #ff0, 4px 8px #ff0, 8px 8px #ff0, 12px 8px #000, 16px 8px #ff0, 20px 8px #ff0, 24px 8px #ff0, 28px 8px #ff0, 4px 12px #ff0, 8px 12px #ff0, 12px 12px #ff0, 16px 12px #ff0, 20px 12px #ff0, 24px 12px #ff0, 28px 12px #ff0, 0px 16px #ff0, 4px 16px #ff0, 8px 16px #ff0, 12px 16px #ff0, 16px 16px #ff0, 20px 16px #ff0, 24px 16px #ff0, 28px 16px #ff0, 4px 20px #ff0, 8px 20px #ff0, 12px 20px #ff0, 16px 20px #ff0, 20px 20px #ff0, 24px 20px #ff0, 28px 20px #ff0, 4px 24px #ff0, 8px 24px #ff0, 12px 24px #ff0, 16px 24px #ff0, 20px 24px #ff0, 24px 24px #ff0, 28px 24px #ff0, 8px 28px #ff0, 12px 28px #ff0, 16px 28px #ff0, 20px 28px #ff0, 24px 28px #ff0, 12px 32px #ff0, 16px 32px #ff0, 20px 32px #ff0;
    }
}

/* Phase 2: Content Upgrades & Fixes */

/* Badges for Editorial Plan */
.badge-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    border-radius: 2px;
    background: rgba(0, 255, 204, 0.1);
    font-family: 'VT323', monospace;
    text-transform: uppercase;
}

.badge-world {
    border-color: var(--neon-purple);
    color: var(--neon-purple);
    background: rgba(176, 38, 255, 0.1);
}

.badge-diff {
    border-color: #f39c12;
    color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
}

.badge-time {
    border-color: var(--text-muted);
    color: var(--text-muted);
    background: rgba(170, 170, 170, 0.1);
}

/* Integrated Navbar Search */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: var(--bg-darker);
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    padding: 0 0.5rem;
    transition: all 0.3s ease;
    z-index: 1001;
    width: 280px; /* Fixed width for better alignment control */
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

.search-bar.hidden {
    display: none;
    pointer-events: none;
}

#global-search-input {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    padding: 0.4rem;
    width: 100%;
    outline: none;
}

#global-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 5px); /* Small gap for a cleaner floating look or 100% for connected */
    right: 0;
    width: 100%; /* Match search-bar width */
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-darker);
    border: 1px solid var(--neon-purple);
    border-radius: 4px;
    list-style: none;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 10px rgba(176, 38, 255, 0.2);
    display: none; /* Hide by default */
}

/* Show only when it has content */
.search-results-dropdown:not(:empty) {
    display: block;
}

.search-results-dropdown li {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.search-results-dropdown li:hover {
    background: rgba(176, 38, 255, 0.1);
}

.search-results-dropdown li h4 {
    color: var(--neon-blue);
    font-size: 1rem;
    margin-bottom: 0.2rem;
    font-family: var(--font-heading);
}

.search-results-dropdown li p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.search-results-dropdown li:last-child {
    border-bottom: none;
}

/* Custom Scrollbar for results */
.search-results-dropdown::-webkit-scrollbar {
    width: 4px;
}
.search-results-dropdown::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}
.search-results-dropdown::-webkit-scrollbar-thumb {
    background: var(--neon-purple);
    border-radius: 2px;
}

/* Ensure Arcade Scene Overlay Doesn't Block Clicks */
.marketing-arcade-scene {
    pointer-events: none;
    z-index: 10;
}

/* Prefers Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    #starfield, 
    .starfield-layer {
        animation: none !important;
    }
    
    .scanlines {
        animation: none !important;
        opacity: 0.1; /* Static mild scanline */
    }
    
    .flicker-text {
        animation: none !important;
    }
}






/* ========================================= */
/* --- FONDO DITHERING OSCURO (Retro/Neon) --- */
/* ========================================= */

/* 1. Capa Base: Degradado oscuro sutil */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -5; /* Lo mandamos bien al fondo */
    pointer-events: none;
    /* Degradado: del azul oscuro de tu variable a un negro casi total */
    background: linear-gradient(
        to bottom,
        var(--bg-dark) 0%, 
        var(--bg-gradient-mid) 50%, 
        var(--bg-gradient-bot) 100%
    );
}

/* 2. Capa de Textura: El patrón pixelado (Dithering) */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -4; /* Por encima del degradado, pero debajo de tu #starfield (-1) */
    pointer-events: none;
    
    /* Patrón de ajedrez semitransparente usando un tono cyan muy tenue */
    background-image:
        linear-gradient(45deg, var(--dither-color) 25%, transparent 25%, transparent 75%, var(--dither-color) 75%, var(--dither-color)),
        linear-gradient(45deg, var(--dither-color) 25%, transparent 25%, transparent 75%, var(--dither-color) 75%, var(--dither-color));
    
    /* Píxeles de 4px: Suficiente para dar textura sin distraer la lectura */
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}


/* ========================================= */
/* --- LIGHT MODE VARIABLES --- */
/* ========================================= */
body.light-mode {
    --bg-dark: #f0f0f5; /* Fondo claro */
    --bg-darker: #e0e0e8; /* Contenedores claros */
    --text-main: #1a1a24; /* Texto oscuro */
    --text-muted: #666677; /* Texto secundario */
    
    /* Oscurecemos los neones para que se lean sobre fondo blanco */
    --neon-blue: #0055cc;
    --neon-purple: #8800cc;
    --neon-green: #008800;
    
    --bg-gradient-mid: #e8e8f0;
    --bg-gradient-bot: #d0d0dc;
    --flicker-glow: rgba(0, 85, 204, 0.2);
    --nav-glow: rgba(0, 85, 204, 0.2);
    --dither-color: rgba(0, 0, 0, 0.03); /* Subtle dark dithering for light mode */
}

body.light-mode #starfield {
    opacity: 0;
}

/* Modificaciones específicas para Light Mode para no perder el estilo */
body.light-mode .navbar {
    background: rgba(240, 240, 245, 0.95);
    border-bottom: 1px solid rgba(0, 85, 204, 0.2);
}

body.light-mode .retro-terminal {
    background: #eaeaef;
    border-color: #ccc;
}

body.light-mode .docs-layout, 
body.light-mode .modal-content {
    background: rgba(240, 240, 245, 0.9);
    border-color: #ccc;
}

/* Botón del Toggle */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--neon-blue);
    color: var(--text-main);
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.theme-toggle-btn:hover {
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

/* ========================================= */
/* --- EL CANVAS DE TRANSICIÓN --- */
/* ========================================= */
#pixel-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none; /* No bloquea clics */
    z-index: 999999; /* Por encima de TODO */
}

/* ========================================= */
/* --- CONTENEDOR DEL ICONO TV --- */
/* ========================================= */
.tv-icon-btn {
    background: transparent;
    border: none;
    width: 60px;  
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: none;
    border-radius: 12px;
    transition: background 0.3s;
}



.retro-tv-wrapper {
    position: relative;
    transform: scale(0.1); 
    transform-origin: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none; 
}

.tv-icon-btn:hover .retro-tv-wrapper {
    transform: scale(0.11); 
}
.tv-icon-btn:active .retro-tv-wrapper {
    transform: scale(0.09); 
}

.tv-antennas { position: absolute; top: -40px; left: 50%; width: 100px; height: 40px; transform: translateX(-50%); }
.antenna { position: absolute; bottom: 0; width: 6px; height: 50px; background-color: #555; border: 2px solid #000; }
.antenna.left { left: 20px; transform: rotate(-30deg); }
.antenna.right { right: 20px; transform: rotate(30deg); }
.antenna::after { content: ""; position: absolute; top: -8px; left: -4px; width: 10px; height: 10px; background-color: #ff4e69; border: 2px solid #000; }

.tv-body { background-color: #8b8b99; width: 320px; height: 240px; border: 6px solid #000; box-shadow: inset -8px -8px 0px rgba(0,0,0,0.3), inset 8px 8px 0px rgba(255,255,255,0.2), 10px 10px 0px rgba(0,0,0,0.5); display: flex; padding: 20px; box-sizing: border-box; position: relative; z-index: 2; }
.tv-screen-bezel { background-color: #222; flex-grow: 1; border: 4px solid #000; box-shadow: inset 4px 4px 0px rgba(0,0,0,0.6); padding: 10px; display: flex; }
.tv-screen { background-color: #111; width: 100%; height: 100%; position: relative; overflow: hidden; border: 2px solid #000; }
.tv-panel { width: 60px; margin-left: 15px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.dial { width: 30px; height: 30px; background-color: #444; border: 2px solid #000; border-radius: 50%; position: relative; box-shadow: inset -2px -2px 0px rgba(0,0,0,0.5); }
.dial::after { content: ""; position: absolute; top: 4px; left: 50%; width: 4px; height: 10px; background-color: #000; transform: translateX(-50%); }
.speaker { width: 40px; flex-grow: 1; background-image: linear-gradient(transparent 3px, #000 3px); background-size: 100% 6px; border: 2px solid #000; }
.tv-legs { position: absolute; bottom: -15px; width: 100%; display: flex; justify-content: space-between; padding: 0 40px; box-sizing: border-box; z-index: 1; }
.leg { width: 16px; height: 20px; background-color: #333; border: 2px solid #000; }

.screen-content { position: absolute; top: 50%; left: 50%; width: 0%; height: 0%; background-color: #fff; transform: translate(-50%, -50%); opacity: 0; }
.tv-screen::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 4px; pointer-events: none; z-index: 10; }

.retro-tv-wrapper.is-on .screen-content { animation: turnOnCRT 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.retro-tv-wrapper.is-off .screen-content { animation: turnOffCRT 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards; }

@keyframes turnOnCRT {
    0% { width: 0%; height: 2px; opacity: 1; background-color: #fff; }
    50% { width: 100%; height: 2px; opacity: 1; background-color: #fff; }
    100% { width: 100%; height: 100%; opacity: 1; background-color: #00f3ff; }
}
@keyframes turnOffCRT {
    0% { width: 100%; height: 100%; opacity: 1; background-color: #00f3ff; }
    50% { width: 100%; height: 2px; opacity: 1; background-color: #fff; }
    99% { width: 0%; height: 2px; opacity: 1; background-color: #fff; }
    100% { width: 0%; height: 0%; opacity: 0; }
}
.retro-tv-wrapper.is-on .tv-screen { box-shadow: 0 0 30px rgba(0, 243, 255, 0.4); }

/* ========================================= */
/* --- SKULL LIGHT/DARK TOGGLE --- */
/* ========================================= */
.theme-toggle-scaler {
  transform: scale(0.12); /* Reduces the 500x300 container to 60x36 */
  width: 60px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-skull {
  --sz: 100px; /* Base scale for all internal math */
  --ttf: ease-in-out;
  --bone: #888;
  position: relative;
  width: calc(var(--sz) * 5);
  height: calc(var(--sz) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-skull input {
  display: none;
}

.skull-label {
  position: absolute;
  width: calc(var(--sz) * 4);
  height: calc(var(--sz) * 2);
  background: #141414;
  border-radius: var(--sz);
  overflow: hidden;
  box-shadow: 0 0 calc(var(--sz) * 0.2) calc(var(--sz) * 0.2) #000000, 0 0 calc(var(--sz) * 0.5) calc(var(--sz) * 0.2) #0b0b10 inset;
  cursor: pointer;
}

.toggle-skull .thumb {
  position: absolute;
  width: calc((var(--sz) * 2) - (var(--sz) * 0.25));
  height: calc((var(--sz) * 2) - (var(--sz) * 0.25));
  top: calc((var(--sz) * 0.1) + (var(--sz) * 0.02));
  left: calc(100% - ((var(--sz) * 2) - (var(--sz) * 0.33)) - ((var(--sz) * 0.1) + (var(--sz) * 0.1)));
  border-radius: var(--sz);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; 
  animation: move-skull-left 0.5s var(--ttf) 0.5s;
  animation-fill-mode: forwards;
}

.toggle-skull input:checked + label .thumb {
  left: calc((var(--sz) * 0.1) + (var(--sz) * 0.02));
  animation: move-skull-right 0.5s var(--ttf) 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move-skull-right {
  0% { left: calc((var(--sz) * 0.1) + (var(--sz) * 0.02)); }
  100% { left: calc(100% - ((var(--sz) * 2) - (var(--sz) * 0.33)) - ((var(--sz) * 0.1) + (var(--sz) * 0.1))); }
}

@keyframes move-skull-left {
  0% { left: calc(100% - ((var(--sz) * 2) - (var(--sz) * 0.33)) - ((var(--sz) * 0.1) + (var(--sz) * 0.1))); }
  100% { left: calc((var(--sz) * 0.1) + (var(--sz) * 0.02)); }
}

.toggle-skull .thumb > * {
  position: absolute;
  animation: unselected 1.5s var(--ttf) 0s reverse;
  animation-fill-mode: forwards;
  filter: drop-shadow(0px 20px 20px #000); /* Scaled from 2px */
}

.toggle-skull input:checked + label .thumb * {
  animation: selected 1.5s var(--ttf) 0s;
  animation-fill-mode: forwards; 
}

@keyframes selected {
  0%, 50% {--bone: #888;}
  50%, 100% {--bone: #fff;}
}

@keyframes unselected {
  0%, 50% {--bone: #888;}
  50%, 100% {--bone: #fff;}
}

@supports (-moz-appearance:none) {
  .toggle-skull .thumb > * {
    --bone: #888;
  } 
  .toggle-skull input:checked + label .thumb * {
    --bone: #fff;
  }
}

.pixel-skull {
  width: 100%;
  height: 100%;
  image-rendering: auto; /* Scaled cleanly with SVG, avoiding subpixel tearing */
}

@keyframes check-on {
  0% { right: -65%;}
  25%, 33% { right: 0%; }
  66%, 80% { right: -50%;  }
  100% { right: -65%;  }
}

@keyframes check-off {
  0% { right: -65%;}
  25%, 33% { right: 0%; }
  66%, 80% { right: -50%;  }
  100% { right: -65%;  }
}

.toggle-skull .arm-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  right: -65%;
  animation: check-off 1.5s var(--ttf) 0s reverse;
  --bone: #fff;
}

.toggle-skull input:checked + label .arm-wrapper {
  animation: check-on 1.5s var(--ttf) 0s;
}

.toggle-skull .arm {
  position: absolute;
  width: calc(var(--sz) * 1.6);
  height: calc(var(--sz) * 0.5);
  right: 2%;
  top: calc(50% - calc(var(--sz) * 0.25));
}

.toggle-skull .bone {
  background: var(--bone);
  width: calc(var(--sz) * 0.8);
  height: calc(var(--sz) * 0.2);
  position: absolute;
  transform: rotate(0deg);
  top: calc(var(--sz) * 0.15);
  right: calc(var(--sz) * -0.4);
}

.toggle-skull .bone:before, .toggle-skull .bone:after,
.toggle-skull .big:before, .toggle-skull .big:after  {
  content: "";
  background: var(--bone);
  width: calc(var(--sz) * 0.15);
  height: calc(var(--sz) * 0.15);
  position: absolute;
  left: calc(var(--sz) * -0.05);
  top: calc(var(--sz) * -0.05);
  box-shadow: calc(var(--sz) * 0.8) 0 0 0 var(--bone);
}

.toggle-skull .bone:after {
  top: calc(100% - calc(var(--sz) * 0.1));
}

.toggle-skull .arm > .bone + .bone {
  top: calc(var(--sz) * 0.15);
  left: calc(var(--sz) * 0.05);
  height: calc(var(--sz) * 0.085);
  width: calc(var(--sz) * 1.05);
  box-shadow: 0 calc(var(--sz) * 0.115) 0 0 var(--bone);
}
.toggle-skull .arm > .bone + .bone:before, .toggle-skull .arm > .bone + .bone:after {
  box-shadow: calc(var(--sz) * 1.015) 0 0 0 var(--bone);
}

.toggle-skull .arm > .bone + .bone:after {
  top: 100%;
}

.toggle-skull .hand {
  position: absolute;
  --balls: var(--bone) calc(var(--sz) * 0.05), #fff0 calc(calc(var(--sz) * 0.05) + 1px) 100%;
  background: 
    radial-gradient(circle at 91% 29%, var(--balls)), 
    radial-gradient(circle at 92% 49%, var(--balls)), 
    radial-gradient(circle at 91% 69%, var(--balls)), 
    radial-gradient(circle at 76% 21%, var(--balls)), 
    radial-gradient(circle at 78% 39%, var(--balls)), 
    radial-gradient(circle at 79% 58%, var(--balls)), 
    radial-gradient(circle at 78% 78%, var(--balls));
  width: calc(var(--sz) * 0.7);
  height: calc(var(--sz) * 0.5);
  left: calc(var(--sz) * -0.7);
  z-index: 0;
}

.toggle-skull .hand .bone, .toggle-skull .big {
  width: calc(var(--sz) * 0.3);
  left: calc(var(--sz) * 0.135);
  height: calc(var(--sz) * 0.075);
}

.toggle-skull .hand .bone:before, .toggle-skull .hand .bone:after,
.toggle-skull .big:before, .toggle-skull .big:after {
  width: calc(var(--sz) * 0.08);
  height: calc(var(--sz) * 0.08);
  top: calc(var(--sz) * -0.025);
  left: calc(var(--sz) * 0.225);
  box-shadow: none;
}
.toggle-skull .hand .bone:after,
.toggle-skull .big:after {
  top: calc(var(--sz) * 0.0125);
}

.toggle-skull .hand .bone:nth-child(1) {
  transform: rotate(5deg) translateY(calc(var(--sz) * -0.1)) translateX(calc(var(--sz) * 0.015));
  filter: drop-shadow(calc(var(--sz) * -0.3) 0px 0px var(--bone));
}

.toggle-skull .hand .bone:nth-child(2) {
  transform: rotate(0deg) translateX(calc(var(--sz) * 0.05));
  filter: drop-shadow(calc(var(--sz) * -0.3) 0px 0px var(--bone));
}

.toggle-skull .hand .bone:nth-child(3) {
  transform: rotate(-2deg) translateY(calc(var(--sz) * 0.115)) translateX(calc(var(--sz) * 0.05));
  filter: drop-shadow(calc(var(--sz) * -0.3) 0px 0px var(--bone));
}

.toggle-skull .hand .bone:nth-child(4) {
  transform: rotate(-5deg) translateY(calc(var(--sz) * 0.23)) translateX(calc(var(--sz) * 0.05));
  filter: drop-shadow(calc(var(--sz) * -0.3) 0px 0px var(--bone));
}

.toggle-skull .big {
  background: var(--bone);
  height: calc(var(--sz) * 0.1) !important;
  position: absolute;
  left: calc(var(--sz) * -0.425) !important;
  top: calc(var(--sz) * 0.115);
  z-index: 1;
  filter: drop-shadow(calc(var(--sz) * -0.25) 0px 0px var(--bone)) drop-shadow(0 0 10px #000);
}

/* --- CUSTOM RETRO CURSORS --- */
body, html {
    cursor: url('Images/Cursor/pixel.cur'), auto;
}

/* Links and Interactive Elements */
a, button, [role="button"], input[type="button"], input[type="submit"], 
.btn, .tag-btn, .category-header, .doc-level-item, .toggle-switch, .retro-btn-small, .nav-link, label, .slider {
    cursor: url('Images/Cursor/pixel link.cur'), pointer !important;
}

/* Text Inputs */
input[type="text"], input[type="search"], textarea, .retro-input {
    cursor: url('Images/Cursor/pixel text here.ani'), text !important;
}

/* Disabled/Not-Allowed state */
:disabled, .disabled {
    cursor: url('Images/Cursor/pixel no.cur'), not-allowed !important;
}

/* Wait State */
.loading, .loading-module, .loading-txt {
    cursor: url('Images/Cursor/pixel wait.ani'), wait !important;
}
/* Responsive Mario Back-to-Top Button */
@media (max-width: 900px) {
    .back-to-top {
        bottom: 5rem;
        right: 0.5rem;
        transform: translateY(20px) scale(0.35);
        transform-origin: bottom right;
    }
    .back-to-top.visible {
        transform: translateY(0) scale(0.35);
    }
}
@media (max-width: 600px) {
    .back-to-top {
        bottom: 4rem;
        right: 0.5rem;
        transform: translateY(20px) scale(0.25);
        transform-origin: bottom right;
    }
    .back-to-top.visible {
        transform: translateY(0) scale(0.25);
    }
}