/* themes/retro.css – neon 80s/90s nostalgia on dark background */

:root {
    --color-bg: #0a0014;
    --color-text: #f0e6ff;
    --color-primary: #e040fb;
    --color-primary-hover: #aa00ff;
    --color-secondary: #00e5ff;
    --color-secondary-hover: #0091ea;
    --color-surface: #130026;
    --color-border: #4a0072;
    --color-accent: #ffea00;
    --font-slogan: 'Courier New', 'Lucida Console', monospace;
    --shadow: 0 4px 24px rgba(224, 64, 251, 0.35);
}

body.theme-retro {
    background: linear-gradient(180deg, #0a0014 0%, #060026 60%, #0a001f 100%);
}

.site-logo {
    background: linear-gradient(90deg, #e040fb, #00e5ff, #ffea00, #e040fb);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: retroShift 3s linear infinite;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes retroShift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hero-title {
    background: linear-gradient(135deg, #e040fb, #00e5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(224, 64, 251, 0.6));
}

.hero-subtitle {
    color: #00e5ff;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.06em;
}

.slogan-box {
    background: #130026;
    border: 2px solid #e040fb;
    border-left: 4px solid #ffea00;
    box-shadow: 0 0 20px rgba(224, 64, 251, 0.3), inset 0 0 20px rgba(0, 229, 255, 0.05);
}

.slogan-text {
    color: #ffea00;
    font-family: 'Courier New', 'Lucida Console', monospace;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(255, 234, 0, 0.6);
}

.btn-primary {
    background: linear-gradient(135deg, #e040fb, #aa00ff);
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid #e040fb;
    box-shadow: 0 0 12px rgba(224, 64, 251, 0.5);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #aa00ff, #6200ea);
    box-shadow: 0 0 24px rgba(224, 64, 251, 0.8);
}

.btn-secondary {
    background: #0d1f3c;
    border: 1px solid #00e5ff;
    color: #00e5ff;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.btn-secondary:hover {
    background: #0a2a4a;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
}

.counter-display {
    color: #00e5ff;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.pack-nav select {
    background-color: #130026;
    color: #f0e6ff;
    border-color: #4a0072;
}

.site-header {
    background: rgba(10, 0, 20, 0.97);
    border-bottom: 2px solid #e040fb;
    box-shadow: 0 2px 20px rgba(224, 64, 251, 0.25);
}

.site-footer {
    background: rgba(10, 0, 20, 0.97);
    border-color: #4a0072;
    color: #00e5ff;
    font-family: 'Courier New', monospace;
}

.pack-label {
    color: #e040fb;
    font-family: 'Courier New', monospace;
}

.mode-card--active {
    border-color: #e040fb;
    box-shadow: 0 0 0 3px rgba(224, 64, 251, 0.35);
}