/* ══════════════════════════════════════════════════════════
   RETRO GAME THEME – Scoped to [data-theme="retro"]
   ──────────────────────────────────────────────────────────
   1. Typography  – Press Start 2P + VT323, no smoothing
   2. Geometry    – Kill all border-radius
   3. Palette     – Dark CRT terminal + neon arcade accents
   4. Imagery     – Pixelated sprite effect, color on hover
   5. Motion      – Stepped (low-fps) transitions
   6. FX          – Scanlines, blinking CTA, dot-grid
   ══════════════════════════════════════════════════════════ */

/* ─── PALETTE: Neon CRT Arcade ─── */
[data-theme="retro"] {
    --cta: #ff0055;
    /* Cyberpunk Magenta */
    --text: #e0e0e0;
    /* Soft terminal white */
    --bg-body: #0a162a;
    /* Dark blue terminal */

    --pixel-magenta: #ff0055;
    --pixel-green: #00ff66;
    /* DOS Green */
    --pixel-cyan: #00ccff;
    /* Arcade Cyan */
    --pixel-yellow: #ffcc00;
    /* Arcade Yellow */

    --card-bg: #1a1a2e;
    /* Deep blue-black */
    --card-border: #333;
}

/* ─── 1. TYPOGRAPHY ─── */

/* Base body */
[data-theme="retro"] body {
    background-color: var(--bg-body) !important;
    color: var(--text) !important;
    font-family: 'VT323', monospace !important;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: unset !important;
    text-rendering: optimizeSpeed !important;
}

/* Headings – Press Start 2P, forced uppercase */
[data-theme="retro"] h1,
[data-theme="retro"] h2,
[data-theme="retro"] h3,
[data-theme="retro"] h4,
[data-theme="retro"] h5,
[data-theme="retro"] h6,
[data-theme="retro"] .font-display {
    font-family: 'Press Start 2P', cursive !important;
    text-transform: uppercase !important;
    line-height: 1.8 !important;
    color: var(--pixel-magenta) !important;
    -webkit-font-smoothing: none !important;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

[data-theme="retro"] h1,
[data-theme="retro"] h1[class*="text-"] {
    font-size: 3rem !important;
}

[data-theme="retro"] h2,
[data-theme="retro"] h2[class*="text-"] {
    font-size: 1.5rem !important;
}

[data-theme="retro"] h3 {
    font-size: 1.05rem !important;
}

[data-theme="retro"] h4 {
    font-size: 0.9rem !important;
}

@media (min-width: 768px) {
    [data-theme="retro"] h1 {
        font-size: 2rem !important;
    }

    [data-theme="retro"] h2 {
        font-size: 1.5rem !important;
    }
}

/* Body text – VT323 everywhere */
[data-theme="retro"] p,
[data-theme="retro"] span,
[data-theme="retro"] a,
[data-theme="retro"] li,
[data-theme="retro"] div,
[data-theme="retro"] button,
[data-theme="retro"] input,
[data-theme="retro"] label,
[data-theme="retro"] td,
[data-theme="retro"] th {
    font-family: 'VT323', monospace !important;
    -webkit-font-smoothing: none !important;
}

/* Paragraphs and list items */
[data-theme="retro"] p,
[data-theme="retro"] li {
    font-size: 1.5rem !important;
    line-height: 1.55 !important;
    color: #f0f0f0 !important;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Disable gradients on text in retro mode */
[data-theme="retro"] .bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

[data-theme="retro"] .text-transparent {
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
}

/* Force gray utilities to light for dark background */
[data-theme="retro"] .text-gray-300,
[data-theme="retro"] .text-gray-400,
[data-theme="retro"] .text-gray-500,
[data-theme="retro"] .text-gray-600,
[data-theme="retro"] .text-gray-700,
[data-theme="retro"] .text-gray-800,
[data-theme="retro"] .text-gray-900 {
    color: #ccc !important;
}

/* Navbar links */
[data-theme="retro"] nav a,
[data-theme="retro"] .nav-organic a {
    font-size: 1.5rem !important;
    color: var(--pixel-green) !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
}

[data-theme="retro"] nav a:hover,
[data-theme="retro"] .nav-organic a:hover,
[data-theme="retro"] nav a.scroll-active,
[data-theme="retro"] .nav-organic a.scroll-active {
    color: var(--pixel-yellow) !important;
}

/* Scale Tailwind text-* utilities up for VT323 */
[data-theme="retro"] .text-xs {
    font-size: 1rem !important;
}

[data-theme="retro"] .text-sm {
    font-size: 1.2rem !important;
}

[data-theme="retro"] .text-base {
    font-size: 1.4rem !important;
}

[data-theme="retro"] .text-lg {
    font-size: 1.6rem !important;
}

[data-theme="retro"] .text-xl {
    font-size: 1.8rem !important;
}

[data-theme="retro"] .text-2xl {
    font-size: 2rem !important;
}

/* Tiny inline tags */
[data-theme="retro"] [class*="text-\[8px\]"],
[data-theme="retro"] [class*="text-\[10px\]"] {
    font-size: 0.8rem !important;
}

/* ─── 2. GEOMETRY: Kill the Curves ─── */

[data-theme="retro"] .organic-card,
[data-theme="retro"] .nav-organic,
[data-theme="retro"] .btn-organic,
[data-theme="retro"] .hero-frame,
[data-theme="retro"] [class*="rounded"],
[data-theme="retro"] img,
[data-theme="retro"] video {
    border-radius: 0 !important;
}

/* ─── 3. PALETTE: Dark Terminal BG + Dot Grid ─── */

/* Dot grid background on body */
[data-theme="retro"] body {
    background-image: radial-gradient(rgba(0, 255, 102, 0.10) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

/* Section backgrounds → transparent (let dark body show) */
[data-theme="retro"] section {
    background-color: transparent !important;
}

[data-theme="retro"] .bg-white,
[data-theme="retro"] .bg-gray-50,
[data-theme="retro"] [class*="bg-accent-mint\/"] {
    background-color: transparent !important;
}

/* Force text-white utility to remain white */
[data-theme="retro"] [class*="text-white"] {
    color: white !important;
}

/* Accent colors → neon */
[data-theme="retro"] .bg-accent-yellow {
    background-color: var(--pixel-yellow) !important;
}

[data-theme="retro"] .bg-accent-blue {
    background-color: var(--pixel-cyan) !important;
}

[data-theme="retro"] .bg-accent-mint {
    background-color: var(--pixel-green) !important;
}

/* ─── FUNDING PARTNERS → Light panel so dark logos are visible ─── */

[data-theme="retro"] .border-t.border-gray-100 {
    background: #e8e4d9 !important;
    border: 3px solid var(--pixel-yellow) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    box-shadow: 6px 6px 0px var(--pixel-green) !important;
}

[data-theme="retro"] .border-t.border-gray-100 p {
    color: #333 !important;
    text-shadow: none !important;
}

/* Don't pixelate / desaturate the partner logos */
[data-theme="retro"] .border-t.border-gray-100 img {
    filter: none !important;
    image-rendering: auto !important;
    opacity: 1 !important;
}

/* ─── CARDS → Dark Pixel Cards ─── */

[data-theme="retro"] .organic-card {
    background: var(--card-bg) !important;
    border: 3px solid var(--pixel-green) !important;
    box-shadow: 6px 6px 0px var(--pixel-magenta) !important;
    transition: all 0.1s steps(2) !important;
    color: #ccc !important;
}

@media (hover: hover) {
    [data-theme="retro"] .organic-card:hover {
        transform: translate(3px, 3px) !important;
        box-shadow: 3px 3px 0px var(--pixel-magenta) !important;
        border-color: var(--pixel-yellow) !important;
    }
}

/* Card body text */
[data-theme="retro"] .organic-card p,
[data-theme="retro"] .organic-card span,
[data-theme="retro"] .organic-card div {
    color: #ccc !important;
}

[data-theme="retro"] .organic-card h3,
[data-theme="retro"] .organic-card h4 {
    color: var(--pixel-cyan) !important;
}

/* ─── BUTTONS → Pixel Arcade Buttons ─── */

[data-theme="retro"] .btn-organic {
    background-color: var(--pixel-magenta) !important;
    color: white !important;
    border: 3px solid var(--pixel-yellow) !important;
    border-radius: 0 !important;
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    box-shadow: 5px 5px 0px var(--pixel-green) !important;
    transition: all 0.1s steps(2) !important;
    padding: 0.875rem 1.75rem !important;
    -webkit-font-smoothing: none !important;
}

@media (hover: hover) {
    [data-theme="retro"] .btn-organic:hover {
        transform: translate(3px, 3px) !important;
        box-shadow: 2px 2px 0px var(--pixel-green) !important;
        background-color: #cc0044 !important;
    }
}

[data-theme="retro"] .btn-organic:active {
    transform: translate(5px, 5px) !important;
    box-shadow: 0px 0px 0px var(--pixel-green) !important;
}

/* (Blink removed per user request) */

/* ─── NAVBAR → Dark Pixel Nav ─── */

[data-theme="retro"] .nav-organic {
    background: #08082a !important;
    border: 3px solid var(--pixel-green) !important;
    box-shadow: 5px 5px 0px var(--pixel-cyan) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (hover: hover) {
    [data-theme="retro"] .nav-organic:hover {
        transform: translate(2px, 2px) !important;
        box-shadow: 3px 3px 0px var(--pixel-cyan) !important;
    }
}

/* ─── HERO FRAME ─── */
[data-theme="retro"] .hero-frame {
    border: 4px solid var(--pixel-cyan) !important;
    border-radius: 0 !important;
    box-shadow: 10px 10px 0px var(--pixel-magenta) !important;
}

/* ─── 4. IMAGERY: The "Sprite" Effect ─── */

[data-theme="retro"] img,
[data-theme="retro"] video {
    image-rendering: pixelated !important;
    filter: contrast(1.3) saturate(0.5) sepia(0.4) !important;
    transition: filter 0.15s steps(3) !important;
}

@media (hover: hover) {

    [data-theme="retro"] img:hover,
    [data-theme="retro"] video:hover {
        filter: contrast(1.1) saturate(1) sepia(0) !important;
    }

    /* Cards that contain images – hover parent shows full color child */
    [data-theme="retro"] .organic-card:hover img,
    [data-theme="retro"] .organic-card:hover video,
    [data-theme="retro"] .member-card:hover img,
    [data-theme="retro"] .member-card:hover video,
    [data-theme="retro"] .group:hover img,
    [data-theme="retro"] .group:hover video {
        filter: contrast(1.05) saturate(1) sepia(0) !important;
    }
}

/* Don't pixelate SVG icons or emoji */
[data-theme="retro"] svg {
    image-rendering: auto !important;
    filter: none !important;
}

/* ─── 5. MOTION: Stepped Animations ─── */

[data-theme="retro"] *,
[data-theme="retro"] *::before,
[data-theme="retro"] *::after {
    transition-timing-function: steps(2, end) !important;
}

/* animate-pulse → static in retro */
[data-theme="retro"] .animate-pulse {
    animation: none !important;
}

/* ─── 6. FX: Hide Blobs, Scanlines ─── */

/* Hide floating blobs & blur overlay */
[data-theme="retro"] .blob-bg {
    display: none !important;
}

[data-theme="retro"] .fixed.top-0.left-0.w-full.h-32 {
    display: none !important;
}

/* Scanline Overlay (via ::after on body) */
[data-theme="retro"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            transparent 0px,
            transparent 3px,
            rgba(0, 0, 0, 0.08) 3px,
            rgba(0, 0, 0, 0.08) 4px);
}

/* Section patterns → green-tinted dot grid */
[data-theme="retro"] .pattern-dots,
[data-theme="retro"] .pattern-grid,
[data-theme="retro"] .pattern-stripes,
[data-theme="retro"] .pattern-plus,
[data-theme="retro"] .pattern-circles,
[data-theme="retro"] .pattern-confetti {
    background-image: radial-gradient(rgba(0, 255, 102, 0.1) 1px, transparent 1px) !important;
    background-size: 16px 16px !important;
}

/* ─── FOOTER ─── */

[data-theme="retro"] footer,
[data-theme="retro"] #footer-placeholder footer {
    background-color: #06062a !important;
    border-top: 4px solid var(--pixel-yellow) !important;
    border-radius: 0 !important;
}

[data-theme="retro"] footer p,
[data-theme="retro"] footer span,
[data-theme="retro"] footer a,
[data-theme="retro"] footer div {
    color: #aaa !important;
    font-size: 1.3rem !important;
}

[data-theme="retro"] footer a:hover {
    color: var(--pixel-yellow) !important;
}

/* ─── MOBILE MENU ─── */

[data-theme="retro"] #mobile-menu {
    background: #08082a !important;
    border: 3px solid var(--pixel-green) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0px var(--pixel-magenta) !important;
}

[data-theme="retro"] #mobile-menu a {
    color: var(--pixel-green) !important;
}

/* ─── FAQ Items ─── */

[data-theme="retro"] .parent-faq-item,
[data-theme="retro"] .student-faq-item {
    background: var(--card-bg) !important;
    border: 3px solid var(--pixel-cyan) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0px var(--pixel-magenta) !important;
    transition: all 0.1s steps(2) !important;
    color: #ccc !important;
}

[data-theme="retro"] .faq-toggle span {
    color: var(--pixel-cyan) !important;
}

/* FAQ dropdown arrow – Parent: blue ▼ on yellow bg */
[data-theme="retro"] .parent-faq-item .faq-icon-wrapper {
    background-color: var(--pixel-yellow) !important;
    border-color: black !important;
}

[data-theme="retro"] .parent-faq-item .faq-icon-wrapper .faq-icon {
    color: var(--pixel-cyan) !important;
}

/* FAQ dropdown arrow – Student: yellow ▼ on blue bg */
[data-theme="retro"] .student-faq-item .faq-icon-wrapper {
    background-color: var(--pixel-cyan) !important;
    border-color: black !important;
}

[data-theme="retro"] .student-faq-item .faq-icon-wrapper .faq-icon {
    color: var(--pixel-yellow) !important;
}

[data-theme="retro"] .faq-answer {
    color: #bbb !important;
}

/* Section badges – dark text on bright bg */
[data-theme="retro"] span.bg-accent-blue,
[data-theme="retro"] span.bg-accent-yellow {
    color: #111 !important;
}

/* ─── TOPIC JUMP BAR ─── */

[data-theme="retro"] #topic-jump-bar {
    border: 3px solid var(--pixel-green) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0px var(--pixel-cyan) !important;
    background: #08082a !important;
    backdrop-filter: none !important;
}

[data-theme="retro"] #topic-jump-bar-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

[data-theme="retro"] #topic-jump-bar a,
[data-theme="retro"] #topic-jump-bar button {
    font-size: 1.1rem !important;
    color: var(--pixel-green) !important;
    font-weight: bold !important;
}

[data-theme="retro"] #topic-jump-bar a:hover,
[data-theme="retro"] #topic-jump-bar button:hover,
[data-theme="retro"] #topic-jump-bar a.scroll-active {
    color: var(--pixel-yellow) !important;
}

/* ─── MODALS ─── */

[data-theme="retro"] #bio-modal>div,
[data-theme="retro"] #pub-modal>div,
[data-theme="retro"] #member-modal>div {
    background: var(--card-bg) !important;
    border: 3px solid var(--pixel-cyan) !important;
    border-radius: 0 !important;
    box-shadow: 10px 10px 0px var(--pixel-magenta) !important;
    color: #ccc !important;
    overflow-y: auto !important;
}

/* Ensure modal content pane scrolls */
[data-theme="retro"] #modal-content-wrapper>div.overflow-y-auto,
[data-theme="retro"] #modal-content-wrapper>div:last-child {
    overflow-y: auto !important;
    max-height: 100% !important;
}

/* Modal close button – high contrast */
[data-theme="retro"] #close-modal,
[data-theme="retro"] [id*="close"] {
    background: var(--pixel-magenta) !important;
    color: white !important;
    border: 3px solid var(--pixel-yellow) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px var(--pixel-green) !important;
    font-size: 1.5rem !important;
}

[data-theme="retro"] #close-modal:hover,
[data-theme="retro"] [id*="close"]:hover {
    background: #cc0044 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px var(--pixel-green) !important;
}

/* ─── BADGES, TAGS, KEYWORDS ─── */

[data-theme="retro"] [class*="shadow-\["] {
    box-shadow: 4px 4px 0px var(--pixel-magenta) !important;
}

[data-theme="retro"] [class*="bg-pink-"],
[data-theme="retro"] [class*="bg-gray-100"] {
    background-color: #1a1a2e !important;
    color: var(--pixel-cyan) !important;
    border: 2px solid var(--pixel-cyan) !important;
}

/* .italic author text */
[data-theme="retro"] .italic {
    color: #bbb !important;
}

/* ─── MEMBER CARDS ─── */

/* Name badges: member cards use bright accent bg → make bg-accent-mint bright in card context */
[data-theme="retro"] .member-card .bg-accent-mint,
[data-theme="retro"] .member-card-trigger .bg-accent-mint {
    background-color: var(--pixel-green) !important;
}

/* Default: accent badges in member cards get dark text for bright bg */
[data-theme="retro"] .member-card div[class*="bg-accent-yellow"],
[data-theme="retro"] .member-card-trigger div[class*="bg-accent-yellow"],
[data-theme="retro"] .member-card div[class*="bg-accent-blue"],
[data-theme="retro"] .member-card-trigger div[class*="bg-accent-blue"],
[data-theme="retro"] .member-card div[class*="bg-accent-mint"],
[data-theme="retro"] .member-card-trigger div[class*="bg-accent-mint"] {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: 1.1rem !important;
    border: 3px solid black !important;
}

/* Magenta bg badge → white text */
[data-theme="retro"] .member-card div[class*="bg-\[var"],
[data-theme="retro"] .member-card-trigger div[class*="bg-\[var"] {
    color: white !important;
    -webkit-text-fill-color: white !important;
    font-size: 1.1rem !important;
    border: 3px solid black !important;
}

/* "EST." badge – white bg panels inside dark cards → dark bg, bigger text */
[data-theme="retro"] .member-card div.bg-white,
[data-theme="retro"] .member-card-trigger div.bg-white,
[data-theme="retro"] .member-card [class*="bg-white"],
[data-theme="retro"] .member-card-trigger [class*="bg-white"] {
    background-color: var(--card-bg) !important;
    color: var(--pixel-cyan) !important;
    border-color: var(--pixel-cyan) !important;
    font-size: 0.85rem !important;
}

/* "Then" badge on second photo */
[data-theme="retro"] .member-card-trigger .bg-accent-yellow.border-2,
[data-theme="retro"] .member-card .bg-accent-yellow {
    color: #111 !important;
}

/* Category icon boxes (🔬 🎓 etc.) – keep bright bg with dark text */
[data-theme="retro"] div[class*="bg-accent-yellow"][class*="flex"][class*="items-center"][class*="justify-center"] {
    color: #111 !important;
}

[data-theme="retro"] .member-card .text-xs,
[data-theme="retro"] .member-card-trigger .text-xs {
    font-size: 1rem !important;
    color: #aaa !important;
}

/* Expertise tags inside member cards */
[data-theme="retro"] .member-card span[class*="bg-gray-50"],
[data-theme="retro"] .member-card-trigger span[class*="bg-gray-50"] {
    background-color: var(--card-bg) !important;
    color: var(--pixel-cyan) !important;
    border-color: var(--pixel-cyan) !important;
}

/* "Active Research" label */
[data-theme="retro"] .member-card-trigger span[class*="text-gray-400"][class*="tracking-widest"],
[data-theme="retro"] .member-card span[class*="text-gray-400"][class*="tracking-widest"] {
    color: var(--pixel-green) !important;
}

/* Alumni cards – bg-white panels */
[data-theme="retro"] div.bg-white[class*="border-2"][class*="border-black"] {
    background-color: var(--card-bg) !important;
    color: #ccc !important;
    border-color: var(--pixel-cyan) !important;
}

[data-theme="retro"] div.bg-white[class*="border-2"] span[class*="font-black"][class*="text-gray-900"] {
    color: #e0e0e0 !important;
}

/* Team member image borders */
[data-theme="retro"] .member-card [class*="border-4"],
[data-theme="retro"] .member-card-trigger [class*="border-4"] {
    border-color: var(--pixel-cyan) !important;
    box-shadow: 6px 6px 0px var(--pixel-magenta) !important;
}

/* ─── PUBLICATION LINK TEXT ─── */

[data-theme="retro"] a[class*="text-\[var\(--cta\)\]"] {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    color: var(--pixel-magenta) !important;
}

/* ─── GENERAL LINKS ─── */

/* "See Full Research Articles" and similar inline-styled links */
[data-theme="retro"] a.btn-organic[class*="bg-white"],
[data-theme="retro"] a[class*="bg-white"] {
    background-color: var(--pixel-magenta) !important;
    color: white !important;
}

/* Any anchor that uses text-[var(--cta)] inline → bright neon */
[data-theme="retro"] a {
    color: var(--pixel-yellow) !important;
}

[data-theme="retro"] a:hover {
    color: var(--pixel-green) !important;
}

/* Restore heading / nav colors (higher specificity) */
[data-theme="retro"] h1 a,
[data-theme="retro"] h2 a,
[data-theme="retro"] h3 a,
[data-theme="retro"] h4 a {
    color: var(--pixel-cyan) !important;
}

[data-theme="retro"] nav a,
[data-theme="retro"] .nav-organic a,
[data-theme="retro"] #topic-jump-bar a {
    color: var(--pixel-green) !important;
    font-size: 1.5rem !important;
}

[data-theme="retro"] nav a:hover,
[data-theme="retro"] .nav-organic a:hover,
[data-theme="retro"] #topic-jump-bar a:hover {
    color: var(--pixel-yellow) !important;
}

[data-theme="retro"] footer a {
    color: #aaa !important;
}

[data-theme="retro"] footer a:hover {
    color: var(--pixel-yellow) !important;
}

/* ─── PUBLICATION CARD YEAR & JOURNAL ─── */

[data-theme="retro"] .pub-card-trigger span[class*="bg-\[var"] {
    font-size: 1rem !important;
    color: #ffffff !important;
    padding: 0.25rem 0.6rem !important;
}

[data-theme="retro"] .pub-card-trigger span[class*="bg-gray-200"] {
    color: #111 !important;
    background-color: #ccc !important;
    font-size: 0.85rem !important;
}

/* Vertically align year + journal badges */
[data-theme="retro"] .pub-card-trigger .flex.flex-wrap {
    align-items: center !important;
}

/* "Read Study →" arrow → black */
/* [data-theme="retro"] .pub-card-trigger a span {
    color: #111 !important;
} */

/* Publication scroll arrows → black */
[data-theme="retro"] button#scroll-left span,
[data-theme="retro"] button#scroll-right span {
    color: #111 !important;
}

/* ─── SECTION DIVIDER BARS → outline only (hollow) ─── */

[data-theme="retro"] div[class*="h-2"][class*="w-32"][class*="rounded-full"] {
    background-color: transparent !important;
    border: 2px solid var(--divider-color, var(--pixel-cyan)) !important;
    height: 0.625rem !important;
}

/* ─── TRAINEE-LED / ACCENT BADGES ─── */

[data-theme="retro"] .bg-accent-mint {
    background-color: #0d2818 !important;
}

[data-theme="retro"] [class*="text-\[var\(--cta\)\]"] {
    color: var(--pixel-green) !important;
}

/* ─── PIXEL EMOJI ─── */

[data-theme="retro"] .emoji,
[data-theme="retro"] [role="img"] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif !important;
    image-rendering: pixelated !important;
    filter: contrast(1.5) saturate(0.6) !important;
}

/* Render all emoji-like text with pixel crunch */
@supports (font-variation-settings: normal) {
    [data-theme="retro"] {
        --emoji-filter: contrast(1.4) saturate(0.5);
    }
}

/* ─── STAT COUNTERS ─── */

[data-theme="retro"] [id^="stat-"] {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 1.5rem !important;
    color: var(--pixel-yellow) !important;
    animation: none !important;
    /* Don't blink the stats */
}

/* Tracking labels (FAMILIES STRONG, etc.) */
[data-theme="retro"] .tracking-widest,
[data-theme="retro"] .uppercase.tracking-widest {
    font-size: 0.85rem !important;
    color: var(--pixel-green) !important;
    font-weight: bold !important;
}

/* ─── COLORED DIVIDERS / BARS ─── */

[data-theme="retro"] .bg-accent-blue.mx-auto {
    background-color: var(--pixel-cyan) !important;
    border-radius: 0 !important;
}

/* ─── Smooth theme transition ─── */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ─── Scrollbar ─── */
[data-theme="retro"]::-webkit-scrollbar,
[data-theme="retro"] #modal-content-wrapper ::-webkit-scrollbar,
[data-theme="retro"] #pub-modal>div ::-webkit-scrollbar {
    width: 12px;
}

[data-theme="retro"]::-webkit-scrollbar-track,
[data-theme="retro"] #modal-content-wrapper ::-webkit-scrollbar-track,
[data-theme="retro"] #pub-modal>div ::-webkit-scrollbar-track {
    background: #0a0a2a;
}

[data-theme="retro"]::-webkit-scrollbar-thumb,
[data-theme="retro"] #modal-content-wrapper ::-webkit-scrollbar-thumb,
[data-theme="retro"] #pub-modal>div ::-webkit-scrollbar-thumb {
    background: var(--pixel-magenta);
    border: 2px solid var(--pixel-green);
}

/* ══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════ */

#theme-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border: 3px solid black;
    box-shadow: 4px 4px 0px black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.1s steps(2);
    background: white;
    border-radius: 0;
    padding: 0;
    line-height: 1;
    animation: none !important;
    /* Never blink the toggle */
}

#theme-toggle-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px black;
}

#theme-toggle-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px black;
}

/* Modern theme active → maroon button */
html:not([data-theme="retro"]) #theme-toggle-btn {
    background: rgb(113, 0, 53);
    color: white;
    border-radius: 12px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
}

/* Retro theme active → neon yellow button */
[data-theme="retro"] #theme-toggle-btn {
    background: var(--pixel-yellow) !important;
    color: black !important;
    border-color: var(--pixel-green) !important;
    box-shadow: 4px 4px 0px var(--pixel-magenta) !important;
    animation: none !important;
}