/* Base Spectrum Button */
.spectrum {
    display: inline-block;
    position: relative;
    padding: 12px 24px;
    border: 3px solid #000;
    font-family: 'Press Start 2P', monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #000;
    text-align: center;
    background: linear-gradient(90deg,
    #ff0000 0%,
    #ff7f00 20%,
    #ffff00 40%,
    #00ff00 60%,
    #0000ff 80%,
    #8b00ff 100%);
    box-shadow: 4px 4px 0 #000;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* Hover — pops like an old CRT highlight */
.spectrum:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000;
    filter: brightness(1.1);
}

/* Active press — old plastic key click feel */
.spectrum:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 #000;
    filter: brightness(0.9);
}

/* Variant 1 — dark background look */
.spectrum-dark {
    border-color: #333;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    background: linear-gradient(90deg,
    #ff0044 0%,
    #ff9900 25%,
    #ffee00 50%,
    #33ff33 75%,
    #00aaff 100%);
}

/* Variant 2 — monochrome CRT scanlines style */
.spectrum-mono {
    background: repeating-linear-gradient(
            to bottom,
            #ccc 0px,
            #ccc 1px,
            #eee 2px,
            #eee 3px
    );
    border: 2px solid #000;
    color: #111;
    box-shadow: 3px 3px 0 #111;
}

/* Optional retro flicker animation */
@keyframes spectrum-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

.spectrum-glow {
    animation: spectrum-glow 1s infinite alternate;
}