/* JUMBLEKIT - Circuit Animation Styles */

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

:root {
    --tron-cyan: #00fff7;
    --tron-blue: #0088ff;
    --tron-purple: #9d00ff;
    --tron-orange: #ff6600;
    --glow-intensity: 0.8;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Orbitron', monospace;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#circuitCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

#textCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* Scanline overlay for extra retro feel */
#scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    z-index: 1000;
}

/* Vignette effect */
#vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 999;
}