/* RETRO ENGINE STYLES (Used in Preview & Export) */
.retro-frameset { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 100vh; width: 100%; height: 100vh; overflow: hidden; }
.retro-frame-sidebar { overflow-y: auto; height: 100%; border-right: 4px solid; box-sizing: border-box; padding: 16px; }
.retro-frame-main { overflow-y: auto; height: 100%; padding: 20px; box-sizing: border-box; }

/* Mobile Navbar */
.retro-mobile-nav { display: none; }
.retro-mobile-nav-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 3px solid var(--frame-border); background: var(--sidebar-bg, var(--bg-color)); }
.retro-mobile-nav-title { font-family: var(--font-header); font-weight: bold; font-size: 1.1em; }
.retro-mobile-nav-toggle { background: var(--bg-color); border: 2px outset var(--frame-border); padding: 6px 12px; font-family: var(--font-main); color: var(--text-color); cursor: pointer; font-size: 0.9em; }
.retro-mobile-nav-toggle:active { border-style: inset; }
.retro-mobile-nav-menu { display: none; background: var(--sidebar-bg, var(--bg-color)); border-bottom: 3px solid var(--frame-border); padding: 12px 16px; }
.retro-mobile-nav-menu.open { display: block; }
.retro-mobile-nav-menu ul { list-style: none; padding: 0; margin: 0; }
.retro-mobile-nav-menu li { padding: 8px 0; border-bottom: 1px dashed var(--frame-border); }
.retro-mobile-nav-menu li:last-child { border-bottom: none; }
.retro-mobile-nav-menu a { color: var(--link-color); text-decoration: underline; }

@media (max-width: 768px) {
    .retro-frameset { display: block; height: auto; overflow: visible; }
    .retro-frame-sidebar { display: none; }
    .retro-frame-main { height: auto; overflow: visible; border: none; }
    .retro-mobile-nav { display: block; }
}

/* Force mobile layout via class (for preview) */
.force-mobile .retro-frameset { display: block !important; height: auto !important; overflow: visible !important; }
.force-mobile .retro-frame-sidebar { display: none !important; }
.force-mobile .retro-frame-main { height: auto !important; overflow: visible !important; border: none !important; }
.force-mobile .retro-mobile-nav { display: block !important; }

/* PAGE VISIBILITY LOGIC (For Export) */
.retro-page { display: none; }
.retro-page.active { display: block; }

/* ============================================
   THEMES - Inspired by 98.css, authentic 90s aesthetics
   See CREDITS.md for attribution
   ============================================ */

/* Windows 98 - Authentic 3D beveled look inspired by 98.css */
.theme-win98 {
    --bg-color: #c0c0c0; --text-color: #000; --link-color: #000080;
    --frame-border: #808080; --font-main: "MS Sans Serif", "Arial", sans-serif;
    --font-header: "MS Sans Serif", "Arial", sans-serif; --border-style: solid;
    --sidebar-bg: #c0c0c0;
    --highlight: #fff; --shadow: #808080; --dark-shadow: #404040;
}
.theme-win98 .retro-frame-sidebar {
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}

/* Mac Classic - System 7 inspired, inspired by system.css */
.theme-mac {
    --bg-color: #fff; --text-color: #000; --link-color: #0000EE;
    --frame-border: #000; --font-main: "Geneva", "Helvetica", sans-serif;
    --font-header: "Chicago", "Arial Black", sans-serif; --border-style: solid;
    --sidebar-bg: #fff;
}
.theme-mac .retro-frame-sidebar {
    box-shadow: -1px -1px 0 #000, 1px 1px 0 #000, -2px -2px 0 #fff, 2px 2px 0 #fff;
    border: 2px solid #000;
}

/* Hacker Terminal - CRT phosphor green with scanlines */
.theme-hacker {
    --bg-color: #0a0a0a; --text-color: #33ff33; --link-color: #00ff41;
    --frame-border: #33ff33; --font-main: "Courier New", "Lucida Console", monospace;
    --font-header: "Courier New", monospace; --border-style: solid;
    --sidebar-bg: #050505;
}
.theme-hacker::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none; z-index: 9999;
}
.theme-hacker { text-shadow: 0 0 5px #33ff33; }

/* Geocities Chaos - Authentic tiled background, maximum 90s */
.theme-geocities {
    --bg-color: #000066; --text-color: #ffff00; --link-color: #00ffff;
    --frame-border: #ff00ff; --font-main: "Comic Sans MS", "Chalkboard", cursive;
    --font-header: "Impact", "Arial Black", fantasy; --border-style: ridge;
    --sidebar-bg: #000033;
    background-color: #000066;
    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='star' width='64' height='64' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='32' cy='32' r='2' fill='%23ffff00'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%23ff00ff'/%3E%3Ccircle cx='56' cy='12' r='1.5' fill='%2300ffff'/%3E%3Ccircle cx='16' cy='48' r='1' fill='%23ff00ff'/%3E%3Ccircle cx='48' cy='52' r='1.5' fill='%2300ffff'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='64' height='64' fill='url(%23star)'/%3E%3C/svg%3E");
}

/* Hot Dog Stand - The infamous Windows 3.1 color scheme (improved contrast) */
.theme-hotdog {
    --bg-color: #ff0000; --text-color: #fff; --link-color: #ffff00;
    --frame-border: #000000; --font-main: "Arial", sans-serif;
    --font-header: "Arial Black", sans-serif; --border-style: solid;
    --sidebar-bg: #ffff00;
}
.theme-hotdog .retro-frame-sidebar { background: #ffff00; color: #000; }
.theme-hotdog .retro-frame-sidebar a { color: #c00 !important; }
.theme-hotdog .retro-frame-main { text-shadow: 1px 1px 0 #800; }

/* Space - Realistic starfield with random star positions */
.theme-space {
    --bg-color: #0b0b1a; --text-color: #c8d4ff; --link-color: #5cabff;
    --frame-border: #2a2a5a; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: rgba(10,10,30,0.8);
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
.theme-space::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 47px 83px, #fff, transparent),
        radial-gradient(1px 1px at 192px 32px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 340px 150px, #aaccff, transparent),
        radial-gradient(1px 1px at 520px 67px, #fff, transparent),
        radial-gradient(1px 1px at 97px 215px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 680px 290px, #fff, transparent),
        radial-gradient(1px 1px at 245px 398px, #fff, transparent),
        radial-gradient(2px 2px at 815px 42px, #ffd, transparent),
        radial-gradient(1px 1px at 412px 520px, #fff, transparent),
        radial-gradient(1px 1px at 90px 612px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 580px 180px, #ccddff, transparent),
        radial-gradient(1px 1px at 720px 450px, #fff, transparent),
        radial-gradient(1px 1px at 155px 750px, #fff, transparent),
        radial-gradient(2px 2px at 890px 620px, #ffe, transparent),
        radial-gradient(1px 1px at 350px 85px, #fff, transparent),
        radial-gradient(1px 1px at 628px 710px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 42px 480px, #aaf, transparent),
        radial-gradient(1px 1px at 498px 330px, #fff, transparent),
        radial-gradient(1px 1px at 780px 156px, #fff, transparent),
        radial-gradient(1px 1px at 915px 380px, #fff, transparent),
        radial-gradient(2px 2px at 265px 598px, #ffd, transparent),
        radial-gradient(1px 1px at 1050px 290px, #fff, transparent),
        radial-gradient(1px 1px at 1180px 510px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 1320px 82px, #ddf, transparent),
        radial-gradient(1px 1px at 1450px 690px, #fff, transparent);
    background-size: 1500px 800px;
}

/* Flames - Animated fire gradient */
.theme-flames {
    --bg-color: #1a0500; --text-color: #ffdd44; --link-color: #ff8800;
    --frame-border: #cc3300; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #2a0800;
    background: linear-gradient(0deg, #ff6600 0%, #cc3300 15%, #661100 35%, #330800 60%, #1a0500 100%);
    background-attachment: fixed;
}

/* Ocean Depths - Underwater atmosphere */
.theme-ocean {
    --bg-color: #001828; --text-color: #88ddff; --link-color: #00ffcc;
    --frame-border: #004466; --font-main: "Georgia", serif;
    --font-header: "Arial", sans-serif; --border-style: double;
    --sidebar-bg: rgba(0,30,50,0.85);
    background: linear-gradient(180deg, #000810 0%, #001830 30%, #003355 70%, #004466 100%);
    background-attachment: fixed;
}
.theme-ocean::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image: radial-gradient(ellipse at 20% 80%, rgba(0,180,200,0.1) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 20%, rgba(0,150,180,0.08) 0%, transparent 40%);
}

/* Neon Nights - Cyberpunk glow */
.theme-neon {
    --bg-color: #0a0a12; --text-color: #fff; --link-color: #ff00ff;
    --frame-border: #00ffff; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: solid;
    --sidebar-bg: #12121a;
}
.theme-neon .retro-frame-sidebar {
    border-color: #ff00ff !important;
    box-shadow: 0 0 10px #ff00ff, inset 0 0 10px rgba(255,0,255,0.1);
}
.theme-neon a { text-shadow: 0 0 8px currentColor; }

/* Newspaper - Old broadsheet style */
.theme-newspaper {
    --bg-color: #f4f1e8; --text-color: #1a1a1a; --link-color: #8b0000;
    --frame-border: #8b7355; --font-main: "Georgia", "Times New Roman", serif;
    --font-header: "Times New Roman", serif; --border-style: double;
    --sidebar-bg: #ebe6d9;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Gothic Dark - Victorian darkness */
.theme-gothic {
    --bg-color: #0d0d0f; --text-color: #8888a0; --link-color: #990033;
    --frame-border: #333344; --font-main: "Georgia", serif;
    --font-header: "Times New Roman", serif; --border-style: ridge;
    --sidebar-bg: #151518;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='%23191920' stroke-width='1'/%3E%3C/svg%3E");
}

/* Tropical Paradise - Island vibes */
.theme-tropical {
    --bg-color: #1a4a4a; --text-color: #ffffcc; --link-color: #ffaa00;
    --frame-border: #009999; --font-main: "Comic Sans MS", cursive;
    --font-header: "Impact", fantasy; --border-style: outset;
    --sidebar-bg: #0d3535;
    background: linear-gradient(180deg, #ff8844 0%, #ff6644 15%, #1a4a4a 35%, #0d3535 100%);
    background-attachment: fixed;
}

/* Vaporwave - A E S T H E T I C */
.theme-vaporwave {
    --bg-color: #1a1a2e; --text-color: #ff71ce; --link-color: #01cdfe;
    --frame-border: #b967ff; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: rgba(30,30,50,0.9);
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
}
.theme-vaporwave::before {
    content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgba(255,113,206,0.05) 50%, rgba(255,113,206,0.1) 100%),
                repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(185,103,255,0.03) 50px, rgba(185,103,255,0.03) 51px);
    pointer-events: none;
}

/* Angelfire - Classic free hosting aesthetic */
.theme-angelfire {
    --bg-color: #000022; --text-color: #ffffff; --link-color: #ffff00;
    --frame-border: #ff6600; --font-main: "Verdana", sans-serif;
    --font-header: "Arial Black", sans-serif; --border-style: outset;
    --sidebar-bg: #000033;
    background: #000022 url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23000033'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000033'/%3E%3C/svg%3E");
}

/* Under Construction - Classic 90s WIP site */
.theme-construct {
    --bg-color: #ffff99; --text-color: #000; --link-color: #0000ff;
    --frame-border: #000; --font-main: "Times New Roman", serif;
    --font-header: "Arial", sans-serif; --border-style: solid;
    --sidebar-bg: #ffff66;
    background: repeating-linear-gradient(45deg, #ffff99 0px, #ffff99 20px, #ffcc00 20px, #ffcc00 40px);
}

/* Matrix - Digital rain aesthetic */
.theme-matrix {
    --bg-color: #000800; --text-color: #00ff00; --link-color: #88ff88;
    --frame-border: #004400; --font-main: "Courier New", monospace;
    --font-header: "Courier New", monospace; --border-style: solid;
    --sidebar-bg: #001000;
    background: #000800;
}
.theme-matrix::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0.4;
    background-image: repeating-linear-gradient(0deg, transparent 0px, rgba(0,32,0,0.5) 2px, transparent 4px);
}
.theme-matrix { text-shadow: 0 0 3px #00ff00; }

/* Y2K Silver - Millennium chrome */
.theme-y2k {
    --bg-color: #e8e8f0; --text-color: #333; --link-color: #0066cc;
    --frame-border: #9999aa; --font-main: "Trebuchet MS", sans-serif;
    --font-header: "Tahoma", sans-serif; --border-style: solid;
    --sidebar-bg: linear-gradient(180deg, #f0f0f8 0%, #d8d8e0 100%);
}
.theme-y2k .retro-frame-sidebar {
    background: linear-gradient(180deg, #f0f0f8 0%, #d8d8e0 100%);
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
}

/* Grunge - 90s alternative scene */
.theme-grunge {
    --bg-color: #1e1e18; --text-color: #d0c8a0; --link-color: #e0a050;
    --frame-border: #585848; --font-main: "Georgia", serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #282820;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.8' type='fractalNoise'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}

/* Rave - 90s club flyer */
.theme-rave {
    --bg-color: #000; --text-color: #fff; --link-color: #00ff00;
    --frame-border: #ff00ff; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #0a0a0a;
    background: #000;
}
.theme-rave::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% 50%, #ff00ff22 0deg 30deg, #00ffff22 30deg 60deg, #ffff0022 60deg 90deg, transparent 90deg 120deg);
    opacity: 0.3;
}

/* Barbie Pink - Dream house aesthetic */
.theme-barbie {
    --bg-color: #ff69b4; --text-color: #fff; --link-color: #ff1493;
    --frame-border: #ff00ff; --font-main: "Comic Sans MS", cursive;
    --font-header: "Impact", fantasy; --border-style: outset;
    --sidebar-bg: linear-gradient(180deg, #ff85c1 0%, #ff69b4 100%);
}
.theme-barbie { background: linear-gradient(135deg, #ff9ec4 0%, #ff69b4 50%, #ff1493 100%); }

/* Camo - Military surplus */
.theme-camo {
    --bg-color: #2d3d2d; --text-color: #c0d0c0; --link-color: #90b090;
    --frame-border: #4a5a4a; --font-main: "Courier New", monospace;
    --font-header: "Impact", fantasy; --border-style: outset;
    --sidebar-bg: #3d4d3d;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='20' cy='30' rx='25' ry='15' fill='%23354535'/%3E%3Cellipse cx='60' cy='15' rx='20' ry='12' fill='%23283828'/%3E%3Cellipse cx='45' cy='55' rx='30' ry='18' fill='%23404840'/%3E%3Cellipse cx='10' cy='65' rx='18' ry='12' fill='%23354535'/%3E%3C/svg%3E"), linear-gradient(#2d3d2d, #2d3d2d);
}

/* Area51 - GeoCities UFO/paranormal neighborhood, X-Files vibes */
.theme-area51 {
    --bg-color: #0a0a0a; --text-color: #39ff14; --link-color: #00ff88;
    --frame-border: #1a4a1a; --font-main: "Courier New", monospace;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #0d1a0d;
    background: radial-gradient(ellipse at center, #0a1a0a 0%, #050a05 50%, #000 100%);
}
.theme-area51::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 100px 50px, #39ff14, transparent),
        radial-gradient(1px 1px at 250px 150px, #0f0, transparent),
        radial-gradient(1.5px 1.5px at 400px 80px, #39ff14, transparent),
        radial-gradient(1px 1px at 550px 200px, #0f0, transparent),
        radial-gradient(2px 2px at 700px 120px, #00ff88, transparent),
        radial-gradient(1px 1px at 850px 180px, #39ff14, transparent),
        radial-gradient(1.5px 1.5px at 150px 300px, #0f0, transparent),
        radial-gradient(1px 1px at 350px 350px, #39ff14, transparent),
        radial-gradient(2px 2px at 600px 400px, #00ff88, transparent),
        radial-gradient(1px 1px at 800px 320px, #0f0, transparent);
    background-size: 1000px 500px;
    opacity: 0.6;
}
.theme-area51 { text-shadow: 0 0 8px #39ff14; }

/* Enchanted Forest - GeoCities fantasy neighborhood */
.theme-enchanted {
    --bg-color: #1a2a1a; --text-color: #d4e8d4; --link-color: #b088ff;
    --frame-border: #4a3a6a; --font-main: "Georgia", serif;
    --font-header: "Times New Roman", serif; --border-style: ridge;
    --sidebar-bg: #2a3a2a;
    background: linear-gradient(180deg, #1a2a1a 0%, #1a2030 40%, #2a1a3a 100%);
    background-attachment: fixed;
}
.theme-enchanted::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 80px 120px, #ffdd88, transparent),
        radial-gradient(1px 1px at 200px 80px, #ffee99, transparent),
        radial-gradient(1.5px 1.5px at 350px 200px, #ffdd88, transparent),
        radial-gradient(1px 1px at 500px 100px, #ffee99, transparent),
        radial-gradient(2px 2px at 650px 180px, #ffdd88, transparent),
        radial-gradient(1px 1px at 800px 60px, #ffee99, transparent),
        radial-gradient(1.5px 1.5px at 120px 280px, #ffdd88, transparent),
        radial-gradient(1px 1px at 420px 320px, #ffee99, transparent);
    background-size: 900px 400px;
    opacity: 0.4;
}
.theme-enchanted .retro-frame-sidebar { border-color: #6a4a8a; }

/* Anime - 90s anime fan site aesthetic (Sailor Moon era) */
.theme-anime {
    --bg-color: #ffe8f0; --text-color: #4a2040; --link-color: #cc3399;
    --frame-border: #ff99cc; --font-main: "Comic Sans MS", cursive;
    --font-header: "Arial Black", sans-serif; --border-style: outset;
    --sidebar-bg: linear-gradient(180deg, #fff0f5 0%, #ffe0eb 100%);
}
.theme-anime { background: linear-gradient(135deg, #ffe8f0 0%, #e8f0ff 50%, #fff0e8 100%); }
.theme-anime .retro-frame-sidebar {
    background: linear-gradient(180deg, #fff0f5 0%, #ffe0eb 100%);
    border-color: #ff99cc;
}
.theme-anime::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image:
        radial-gradient(3px 3px at 50px 80px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 150px 120px, rgba(255,200,220,0.6), transparent),
        radial-gradient(3px 3px at 280px 60px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 400px 150px, rgba(200,220,255,0.6), transparent),
        radial-gradient(3px 3px at 550px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 700px 130px, rgba(255,200,220,0.6), transparent);
    background-size: 800px 200px;
}

/* Tripod Blue - Classic Tripod hosting aesthetic */
.theme-tripod {
    --bg-color: #003366; --text-color: #ffffff; --link-color: #99ccff;
    --frame-border: #0066cc; --font-main: "Verdana", sans-serif;
    --font-header: "Arial", sans-serif; --border-style: solid;
    --sidebar-bg: #004080;
}
.theme-tripod .retro-frame-sidebar {
    background: linear-gradient(180deg, #004488 0%, #003366 100%);
    border-color: #0088cc;
}

/* Heartland - GeoCities Americana neighborhood */
.theme-heartland {
    --bg-color: #f5e6d3; --text-color: #4a3a2a; --link-color: #8b4513;
    --frame-border: #8b7355; --font-main: "Georgia", serif;
    --font-header: "Times New Roman", serif; --border-style: ridge;
    --sidebar-bg: #ebe0d0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23f5e6d3'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23e8d8c0' stroke-width='1'/%3E%3C/svg%3E");
}
.theme-heartland .retro-frame-sidebar {
    background: #ebe0d0;
    border-color: #a08060;
}

/* Webmaster Purple - Quintessential 90s webmaster gradient */
.theme-webmaster {
    --bg-color: #1a0a2e; --text-color: #e0d0ff; --link-color: #ff99ff;
    --frame-border: #6633cc; --font-main: "Verdana", sans-serif;
    --font-header: "Arial Black", sans-serif; --border-style: ridge;
    --sidebar-bg: #2a1a4e;
    background: linear-gradient(135deg, #1a0a2e 0%, #0a1a3e 50%, #1a0a2e 100%);
    background-attachment: fixed;
}
.theme-webmaster::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 30px 40px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 120px 80px, #ccccff, transparent),
        radial-gradient(1px 1px at 200px 30px, #fff, transparent),
        radial-gradient(1px 1px at 280px 110px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 380px 60px, #ffccff, transparent),
        radial-gradient(1px 1px at 450px 90px, #fff, transparent),
        radial-gradient(1px 1px at 550px 40px, #ccccff, transparent),
        radial-gradient(1.5px 1.5px at 650px 100px, #fff, transparent),
        radial-gradient(1px 1px at 750px 70px, #ffccff, transparent),
        radial-gradient(1px 1px at 850px 50px, #fff, transparent),
        radial-gradient(1px 1px at 100px 180px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 300px 200px, #ccccff, transparent),
        radial-gradient(1px 1px at 500px 160px, #fff, transparent),
        radial-gradient(1px 1px at 700px 190px, #ffccff, transparent);
    background-size: 900px 250px;
    opacity: 0.7;
}

/* Pirate - Maritime/pirate theme */
.theme-pirate {
    --bg-color: #1a1408; --text-color: #d4a84a; --link-color: #ffcc44;
    --frame-border: #8b6914; --font-main: "Georgia", serif;
    --font-header: "Times New Roman", serif; --border-style: ridge;
    --sidebar-bg: #2a2010;
    background: linear-gradient(180deg, #1a1408 0%, #0a0804 100%);
    background-attachment: fixed;
}
.theme-pirate::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' opacity='0.06'/%3E%3C/svg%3E");
}
.theme-pirate .retro-frame-sidebar { border-color: #aa8030; }

/* Tokyo - GeoCities Japanese culture neighborhood */
.theme-tokyo {
    --bg-color: #fff5f5; --text-color: #333; --link-color: #cc0033;
    --frame-border: #cc0033; --font-main: "Arial", sans-serif;
    --font-header: "Arial Black", sans-serif; --border-style: solid;
    --sidebar-bg: #fff0f0;
}
.theme-tokyo .retro-frame-sidebar {
    background: linear-gradient(180deg, #fff0f0 0%, #ffe8e8 100%);
    border-left: 4px solid #cc0033;
    border-right: none;
}
.theme-tokyo .retro-frame-main {
    border-left: 1px solid #ffcccc;
}

/* ============================================
   FAN SITE THEMES - Inspired by 90s GeoCities fan pages
   ============================================ */

/* Pokemon - Gotta catch 'em all! Primary colors, Pokeball aesthetic */
.theme-pokemon {
    --bg-color: #cc0000; --text-color: #fff; --link-color: #ffcc00;
    --frame-border: #222; --font-main: "Arial", sans-serif;
    --font-header: "Arial Black", sans-serif; --border-style: solid;
    --sidebar-bg: #fff;
}
.theme-pokemon { background: linear-gradient(180deg, #cc0000 0%, #cc0000 48%, #222 48%, #222 52%, #fff 52%, #fff 100%); background-attachment: fixed; }
.theme-pokemon .retro-frame-sidebar { background: #fff; color: #222; border-color: #222; }
.theme-pokemon .retro-frame-sidebar a { color: #cc0000 !important; }
.theme-pokemon .retro-frame-main { background: #cc0000; text-shadow: 1px 1px 0 #990000; }

/* Hello Kitty - Kawaii Sanrio pastel aesthetic */
.theme-hellokitty {
    --bg-color: #ffb6c1; --text-color: #d63384; --link-color: #e91e8c;
    --frame-border: #ff69b4; --font-main: "Comic Sans MS", cursive;
    --font-header: "Arial Rounded MT Bold", "Arial", sans-serif; --border-style: solid;
    --sidebar-bg: #fff0f5;
}
.theme-hellokitty { background: linear-gradient(135deg, #ffb6c1 0%, #fff0f5 50%, #ffe4ec 100%); }
.theme-hellokitty .retro-frame-sidebar { background: #fff0f5; border-color: #ff69b4; }
.theme-hellokitty::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image:
        radial-gradient(3px 3px at 60px 70px, #fff, transparent),
        radial-gradient(2px 2px at 140px 110px, #ffccdd, transparent),
        radial-gradient(3px 3px at 240px 50px, #fff, transparent),
        radial-gradient(2px 2px at 340px 130px, #ffccdd, transparent),
        radial-gradient(3px 3px at 460px 80px, #fff, transparent),
        radial-gradient(2px 2px at 580px 120px, #ffccdd, transparent),
        radial-gradient(3px 3px at 700px 60px, #fff, transparent);
    background-size: 800px 180px;
    opacity: 0.7;
}

/* Dragonball Z - Power level over 9000! Orange/blue Saiyan colors */
.theme-dbz {
    --bg-color: #0a0a1a; --text-color: #ff8c00; --link-color: #00bfff;
    --frame-border: #ff6600; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #0f0f2a;
    background: radial-gradient(ellipse at center, #1a1a3a 0%, #0a0a1a 60%, #000 100%);
}
.theme-dbz .retro-frame-sidebar { border-color: #ff6600; background: linear-gradient(180deg, #0f0f2a 0%, #0a0a1a 100%); }
.theme-dbz { text-shadow: 0 0 10px #ff6600; }
.theme-dbz::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,140,0,0.1) 0%, transparent 50%);
}

/* ============================================
   WRESTLING THEMES - Monday Night Wars era
   ============================================ */

/* WWF Attitude Era - Get ready to suck it! Scratch logo aesthetic */
.theme-wwf {
    --bg-color: #0a0a0a; --text-color: #fff; --link-color: #ff0000;
    --frame-border: #cc0000; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: solid;
    --sidebar-bg: #111;
}
.theme-wwf .retro-frame-sidebar { background: #111; border-color: #cc0000; border-width: 4px; }
.theme-wwf .retro-frame-sidebar::after { content: ""; position: absolute; bottom: 10px; left: 10px; right: 10px; height: 4px; background: #cc0000; }

/* WCW/nWo - New World Order black & white */
.theme-wcw {
    --bg-color: #000; --text-color: #fff; --link-color: #ccc;
    --frame-border: #fff; --font-main: "Courier New", monospace;
    --font-header: "Impact", fantasy; --border-style: solid;
    --sidebar-bg: #0a0a0a;
}
.theme-wcw .retro-frame-sidebar { background: #0a0a0a; border: 3px solid #fff; }
.theme-wcw a { text-decoration: none; border-bottom: 1px solid #fff; }

/* ECW - Extreme! Purple barbed wire grunge */
.theme-ecw {
    --bg-color: #1a0a20; --text-color: #d0d0d0; --link-color: #9933ff;
    --frame-border: #6622aa; --font-main: "Arial", sans-serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #150818;
    background: linear-gradient(180deg, #1a0a20 0%, #0d0510 100%);
}
.theme-ecw .retro-frame-sidebar { background: #150818; border-color: #9933ff; }
.theme-ecw { text-shadow: 1px 1px 2px #000; }

/* ============================================
   GAMING THEMES - N64/PS1/Emulation era
   ============================================ */

/* Video Games - N64/PlayStation era gaming */
.theme-gaming {
    --bg-color: #1a1a2e; --text-color: #00ff00; --link-color: #00ffff;
    --frame-border: #333366; --font-main: "Courier New", monospace;
    --font-header: "Arial Black", sans-serif; --border-style: outset;
    --sidebar-bg: #16213e;
}
.theme-gaming .retro-frame-sidebar {
    background: linear-gradient(180deg, #1a1a3a 0%, #16213e 100%);
    border-color: #4a4a8a;
}
.theme-gaming::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,255,0,0.03) 2px, rgba(0,255,0,0.03) 4px);
}

/* ROM Site - Underground emulation aesthetic */
.theme-roms {
    --bg-color: #0a0a0a; --text-color: #00ff00; --link-color: #ff6600;
    --frame-border: #333; --font-main: "Courier New", monospace;
    --font-header: "Courier New", monospace; --border-style: solid;
    --sidebar-bg: #0f0f0f;
}
.theme-roms .retro-frame-sidebar { background: #0f0f0f; border-color: #00aa00; }
.theme-roms a { color: #ff6600; }
.theme-roms { text-shadow: 0 0 5px #00ff00; }

/* ============================================
   MOVIE THEMES - Horror and Hollywood
   ============================================ */

/* Horror Movies - Blood red slasher aesthetic */
.theme-horror {
    --bg-color: #0a0000; --text-color: #cc0000; --link-color: #ff3333;
    --frame-border: #660000; --font-main: "Georgia", serif;
    --font-header: "Times New Roman", serif; --border-style: ridge;
    --sidebar-bg: #100000;
    background: linear-gradient(180deg, #0a0000 0%, #000 100%);
}
.theme-horror .retro-frame-sidebar { background: #100000; border-color: #880000; }
.theme-horror::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blood'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23blood)' opacity='0.05'/%3E%3C/svg%3E");
}
.theme-horror { text-shadow: 0 0 10px #cc0000; }

/* Movies/Cinema - Golden age Hollywood */
.theme-cinema {
    --bg-color: #1a1a1a; --text-color: #d4af37; --link-color: #ffd700;
    --frame-border: #8b7355; --font-main: "Georgia", serif;
    --font-header: "Times New Roman", serif; --border-style: double;
    --sidebar-bg: #222;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
}
.theme-cinema .retro-frame-sidebar { background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); border-color: #d4af37; }

/* ============================================
   MUSIC THEMES - Metal, Punk, Rock
   ============================================ */

/* Heavy Metal - Flames and darkness */
.theme-metal {
    --bg-color: #0a0000; --text-color: #ff6600; --link-color: #ff0000;
    --frame-border: #cc3300; --font-main: "Times New Roman", serif;
    --font-header: "Impact", fantasy; --border-style: ridge;
    --sidebar-bg: #0f0505;
    background: linear-gradient(0deg, #330000 0%, #1a0000 20%, #0a0000 50%, #000 100%);
    background-attachment: fixed;
}
.theme-metal .retro-frame-sidebar { background: linear-gradient(180deg, #1a0808 0%, #0f0505 100%); border-color: #ff3300; }
.theme-metal { text-shadow: 0 0 5px #ff3300, 0 0 10px #ff0000; }

/* Punk Rock - DIY zine aesthetic, anarchy */
.theme-punk {
    --bg-color: #fff; --text-color: #000; --link-color: #cc0000;
    --frame-border: #000; --font-main: "Courier New", monospace;
    --font-header: "Impact", fantasy; --border-style: solid;
    --sidebar-bg: #f0f0f0;
}
.theme-punk { background: #fff url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23fff'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ccc'/%3E%3C/svg%3E"); }
.theme-punk .retro-frame-sidebar { background: #f0f0f0; border: 3px solid #000; }
.theme-punk .retro-frame-main { border-left: 3px solid #000; }

/* ============================================
   ACTIVISM & COMMUNITY THEMES
   ============================================ */

/* Political Activism - Bold propaganda style */
.theme-activism {
    --bg-color: #1a1a1a; --text-color: #fff; --link-color: #ff3333;
    --frame-border: #cc0000; --font-main: "Helvetica", "Arial", sans-serif;
    --font-header: "Arial Black", sans-serif; --border-style: solid;
    --sidebar-bg: #222;
}
.theme-activism .retro-frame-sidebar { background: #cc0000; color: #fff; border: none; }
.theme-activism .retro-frame-sidebar a { color: #ffcc00 !important; }

.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .blink { animation: none; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}