/* pixel-inja — shared base for all pixel/inja templates */
:root {
    --bg: #1a1a2e;
    --card-bg: #16213e;
    --text: #c7d2e0;
    --text-secondary: #7b8ca3;
    --accent: #ff6b35;
    --accent-glow: #ff9f45;
    --border: #2a3a5c;
    --divider: #2a3a5c;
    --code-bg: #0f1425;
    --code-shadow: none;
    --progress-bg: #2a3a5c;
    --nav-hover-bg: #1e2d4a;
    --green: #4ade80;
    --yellow: #facc15;
    --pink: #f472b6;
    --cyan: #22d3ee;
}

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

body {
    font-family: 'Courier New', 'Source Code Pro', 'Noto Sans SC', monospace;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.8;
    image-rendering: pixelated;
}

.site-stats-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--accent);
    line-height: 1.5;
}

.scanlines {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 4px
    );
}

.pixel-stars {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 230px 80px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 310px 50px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 400px 100px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 500px 30px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 600px 90px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 700px 60px, rgba(255,255,255,0.15), transparent);
}

.pixel-deco {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--accent);
    font-size: 0.5rem;
    letter-spacing: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    animation: blink 1.5s infinite;
}

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

.cover-header {
    text-align: center;
    padding: 3rem 0;
    margin-bottom: 2rem;
    border: 4px solid var(--accent);
    border-image: repeating-linear-gradient(
        45deg,
        var(--accent),
        var(--accent) 4px,
        var(--bg) 4px,
        var(--bg) 8px
    ) 4;
    background: var(--card-bg);
    box-shadow:
        0 0 0 4px var(--bg),
        0 0 0 8px var(--accent),
        0 0 20px rgba(255, 107, 53, 0.3);
}

.cover-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 2.2rem;
    color: var(--accent);
    text-shadow: 2px 2px 0 var(--bg), 4px 4px 0 var(--accent);
    letter-spacing: 0.15em;
    line-height: 2;
    image-rendering: pixelated;
}

.cover-subtitle {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: var(--accent-glow);
    letter-spacing: 0.3em;
    margin-top: 0.5rem;
}

.cover-footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding-top: 2rem;
    font-family: 'Courier New', 'Noto Sans SC', monospace;
}

@media (max-width: 768px) {
    .pixel-deco {
        font-size: 0.35rem;
        letter-spacing: 0.3rem;
    }
    .cover-header {
        padding: 2rem 0;
        margin-bottom: 1.5rem;
        border-width: 3px;
        box-shadow:
            0 0 0 3px var(--bg),
            0 0 0 6px var(--accent),
            0 0 15px rgba(255, 107, 53, 0.3);
    }
    .cover-title {
        font-size: 1.2rem;
        text-shadow: 1px 1px 0 var(--bg), 3px 3px 0 var(--accent);
    }
    .cover-subtitle {
        font-size: 0.55rem;
        letter-spacing: 0.15em;
    }
    .cover-footer {
        font-size: 0.7rem;
        padding-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .pixel-deco {
        font-size: 0.25rem;
        letter-spacing: 0.2rem;
    }
    .cover-header {
        padding: 1.5rem 0;
        margin-bottom: 1rem;
        border-width: 2px;
        box-shadow:
            0 0 0 2px var(--bg),
            0 0 0 4px var(--accent),
            0 0 10px rgba(255, 107, 53, 0.3);
    }
    .cover-title {
        font-size: 0.85rem;
        text-shadow: 1px 1px 0 var(--bg), 2px 2px 0 var(--accent);
        letter-spacing: 0.08em;
    }
    .cover-subtitle {
        font-size: 0.4rem;
        letter-spacing: 0.1em;
    }
    .cover-footer {
        font-size: 0.6rem;
        padding-top: 1rem;
    }
}