/* 90s Hacker Terminal Aesthetic */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: 100px;
}

/* Default theme variables (Hacker) */
:root,
.theme-hacker {
    --primary: #0c0;
    --secondary: #0ff;
    --accent: #ffc107;
    --bg: #000;
    --bg-hover: #002200;
    --text: #c0c0c0;
    --text-bright: #ccc;
    --text-muted: #808080;
    --border: #0a0;
    --error: #f00;
    --disabled: #333;
}

/* Vaporwave theme variables */
.theme-vaporwave {
    --primary: #cf3bcf;
    --secondary: #40e0d0;
    --accent: #ffaa00;
    --bg: #000;
    --bg-hover: #220033;
    --text: #c0c0c0;
    --text-bright: #ccc;
    --text-muted: #808080;
    --border: #cf3bcf;
    --error: #ff4081;
    --disabled: #664488;
}

/* Darcula theme variables */
.theme-darcula {
    --primary: #cc7832;
    --secondary: #6897bb;
    --accent: #bbb529;
    --bg: #2b2b2b;
    --bg-hover: #323232;
    --text: #a9b7c6;
    --text-bright: #e0e0e0;
    --text-muted: #808080;
    --border: #323232;
    --error: #bc3f3c;
    --disabled: #555555;
}

/* Monokai theme variables */
.theme-monokai {
    --primary: #a6e22e;
    --secondary: #66d9ef;
    --accent: #fd971f;
    --bg: #272822;
    --bg-hover: #3e3d32;
    --text: #f8f8f2;
    --text-bright: #ffffff;
    --text-muted: #75715e;
    --border: #49483e;
    --error: #f92672;
    --disabled: #5a5a5a;
}

/* Solarized Dark theme variables */
.theme-solarized-dark {
    --primary: #268bd2;
    --secondary: #2aa198;
    --accent: #b58900;
    --bg: #002b36;
    --bg-hover: #073642;
    --text: #839496;
    --text-bright: #93a1a1;
    --text-muted: #586e75;
    --border: #073642;
    --error: #dc322f;
    --disabled: #445555;
}

/* Dracula theme variables */
.theme-dracula {
    --primary: #50fa7b;
    --secondary: #8be9fd;
    --accent: #f1fa8c;
    --bg: #282a36;
    --bg-hover: #44475a;
    --text: #f8f8f2;
    --text-bright: #ffffff;
    --text-muted: #6272a4;
    --border: #44475a;
    --error: #ff5555;
    --disabled: #6272a4;
}

/* Nord theme variables */
.theme-nord {
    --primary: #88c0d0;
    --secondary: #81a1c1;
    --accent: #ebcb8b;
    --bg: #2e3440;
    --bg-hover: #3b4252;
    --text: #d8dee9;
    --text-bright: #eceff4;
    --text-muted: #4c566a;
    --border: #3b4252;
    --error: #bf616a;
    --disabled: #4c566a;
}

/* Gruvbox Dark theme variables */
.theme-gruvbox {
    --primary: #b8bb26;
    --secondary: #83a598;
    --accent: #fabd2f;
    --bg: #282828;
    --bg-hover: #3c3836;
    --text: #ebdbb2;
    --text-bright: #fbf1c7;
    --text-muted: #928374;
    --border: #504945;
    --error: #fb4934;
    --disabled: #665c54;
}

/* Military/Tactical theme variables */
.theme-tactical {
    --primary: #7cb342;
    --secondary: #ffa726;
    --accent: #ffeb3b;
    --bg: #0d1117;
    --bg-hover: #1a1e24;
    --text: #b0b0b0;
    --text-bright: #e0e0e0;
    --text-muted: #6e7681;
    --border: #2d3a2d;
    --error: #ef5350;
    --disabled: #3a3a3a;
}

/* Companion theme variables - warm, empathetic, continuous */
.theme-companion {
    --primary: #e8a87c;
    --secondary: #9ed9cc;
    --accent: #f4d19b;
    --bg: #1a1410;
    --bg-hover: #2a2220;
    --text: #d4c4b0;
    --text-bright: #f0e6d8;
    --text-muted: #8a7a6a;
    --border: #3a3028;
    --error: #d88884;
    --disabled: #4a4038;
}

/* Therapeutic theme variables - calming, reflective, safe */
.theme-therapeutic {
    --primary: #8fa8c8;
    --secondary: #b8c9a8;
    --accent: #d4b896;
    --bg: #1c1e22;
    --bg-hover: #2a2d32;
    --text: #c4ccd4;
    --text-bright: #e4ecf4;
    --text-muted: #7a8288;
    --border: #3a3e44;
    --error: #c89898;
    --disabled: #4a4e54;
}

/* Education theme variables - bright, energetic, growth-oriented */
.theme-education {
    --primary: #f4a261;
    --secondary: #2a9d8f;
    --accent: #e9c46a;
    --bg: #1a1a1a;
    --bg-hover: #2a2a2a;
    --text: #d4d4d4;
    --text-bright: #f4f4f4;
    --text-muted: #888888;
    --border: #3a3a3a;
    --error: #e76f51;
    --disabled: #4a4a4a;
}

/* Resurrection theme variables - ethereal, memorial, profound */
.theme-resurrection {
    --primary: #a78bfa;
    --secondary: #818cf8;
    --accent: #c4b5fd;
    --bg: #0f0f14;
    --bg-hover: #1a1a24;
    --text: #c4c4d4;
    --text-bright: #e4e4f4;
    --text-muted: #7a7a8a;
    --border: #2a2a3a;
    --error: #b4a4c4;
    --disabled: #3a3a4a;
}

/* Robotics theme variables - industrial, precise, mechanical */
.theme-robotics {
    --primary: #00d4ff;
    --secondary: #7c9fb0;
    --accent: #ffa500;
    --bg: #0a0e12;
    --bg-hover: #1a2228;
    --text: #b0c4d0;
    --text-bright: #e0f0ff;
    --text-muted: #6a7a85;
    --border: #2a3a45;
    --error: #ff6b6b;
    --disabled: #3a4a55;
}

body {
    font-family: 'Courier New', 'Courier', monospace;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    padding: 20px 0;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 100;
}

header::after {
    content: '';
    display: block;
    max-width: 900px;
    margin: 20px auto 0;
    border-bottom: 2px solid var(--border);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.logo {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: bold;
    animation: blink 1.5s infinite;
}

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

nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

nav a {
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    padding: 8px 15px;
    transition: all 0.3s;
}

nav a:hover {
    background: var(--primary);
    color: var(--bg);
}

/* Hero Section */
.hero {
    padding: 60px 0;
}

.hero::after {
    content: '';
    display: block;
    max-width: 900px;
    margin: 60px auto 0;
    border-bottom: 2px solid var(--border);
}

.echoverse-bg {
    background-image: url('city_village_fantasy_battle.png');
    height: 600px;
}

.graphic {
    margin-bottom: 30px;
}

.ascii-art {
    color: var(--primary);
    font-size: 1.2rem;
    overflow-x: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.tagline {
    color: var(--text);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Main Sections */
section {
    padding: 60px 0;
}

section::after {
    content: '';
    display: block;
    max-width: 900px;
    margin: 60px auto 0;
    border-bottom: 1px solid var(--border);
}

section h2 {
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

section p {
    margin-bottom: 15px;
    color: var(--text);
}

/* Use Cases */
.use-case-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.use-case-link:hover {
    text-decoration: none !important;
}

.use-case {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    transition: all 0.3s;
}

.use-case h3 {
    color: var(--secondary);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.use-case p {
    color: var(--text);
}

.use-case:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.use-case-link:hover .use-case {
    border-color: var(--primary);
    background: var(--bg-hover);
}


/* Links */
a {
    color: var(--secondary);
    text-decoration: none;
}

a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Highlighted quote section */
.highlight {
    background: var(--bg-hover);
}

.highlight::before {
    content: '';
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 60px;
    border-top: 2px solid var(--border);
}

.highlight::after {
    content: '';
    display: block;
    max-width: 900px;
    margin: 60px auto 0;
    border-bottom: 2px solid var(--border);
}

.quote {
    font-size: 1.3rem;
    color: var(--primary);
    text-align: center;
    font-style: italic;
    margin-bottom: 20px;
}

.hero-title {
    color: var(--primary);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.echoverse-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--primary);
    font-weight: bold;
}

/* Footer */
footer {
    padding: 40px 0;
    text-align: center;
}

footer::before {
    content: '';
    display: block;
    max-width: 900px;
    margin: 0 auto 40px;
    border-top: 2px solid var(--border);
}

footer p {
    margin-bottom: 10px;
    color: var(--text-muted);
}

footer a {
    color: var(--text-muted);
    margin: 0 10px;
}

footer a:hover {
    color: var(--primary);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .ascii-art {
        font-size: 0.9rem;
    }

    .tagline {
        font-size: 1rem;
    }

    section h2 {
        font-size: 1.5rem;
    }

    nav {
        width: 100%;
    }

    nav a {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    header {
        padding: 10px 0;
    }

    .logo {
        font-size: 1.2rem;
    }

    .ascii-art {
        font-size: 0.7rem;
    }

    nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        font-size: 0.7rem;
    }

    nav a {
        padding: 6px 8px;
        flex: 1 1 auto;
        text-align: center;
        min-width: 0;
    }

    .use-case {
        padding: 15px;
    }
}

/* Feature list styling */
.feature-list {
    list-style: none;
    padding-left: 0;
}

.feature-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    color: var(--text);
}

.feature-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

.feature-list strong {
    color: var(--secondary);
}