@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

:root {
    --zx-black: #000000;
    --zx-blue: #0000D7;
    --zx-red: #D70000;
    --zx-magenta: #D700D7;
    --zx-green: #00D700;
    --zx-cyan: #00D7D7;
    --zx-yellow: #D7D700;
    --zx-white: #D7D7D7;
    --zx-bright-blue: #0000FF;
    --zx-bright-red: #FF0000;
    --zx-bright-magenta: #FF00FF;
    --zx-bright-green: #00FF00;
    --zx-bright-cyan: #00FFFF;
    --zx-bright-yellow: #FFFF00;
    --zx-bright-white: #FFFFFF;
    --bg: #0a0a12;
    --panel-bg: #111120;
}

body {
    background: var(--bg);
    color: var(--zx-bright-cyan);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 215, 215, 0.015) 2px,
        rgba(0, 215, 215, 0.015) 4px
    );
    pointer-events: none;
    z-index: 9999;
    animation: scanScroll 8s linear infinite;
}

@keyframes scanScroll {
    from { transform: translateY(0); }
    to { transform: translateY(4px); }
}

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
}

/* HEADER */
header {
    text-align: center;
    padding: 24px 0 16px;
}

#title {
    font-size: 28px;
    color: var(--zx-bright-white);
    text-shadow: 
        3px 3px 0 var(--zx-blue),
        -1px -1px 0 var(--zx-bright-magenta);
    letter-spacing: 4px;
    margin-bottom: 8px;
}

#subtitle {
    font-size: 8px;
    color: var(--zx-yellow);
    font-style: italic;
    margin-bottom: 12px;
}

#rainbow-bar {
    height: 8px;
    margin: 0 auto;
    max-width: 600px;
    background: linear-gradient(
        90deg,
        var(--zx-bright-red) 0%, var(--zx-bright-red) 12.5%,
        #FF8800 12.5%, #FF8800 25%,
        var(--zx-bright-yellow) 25%, var(--zx-bright-yellow) 37.5%,
        var(--zx-bright-green) 37.5%, var(--zx-bright-green) 50%,
        var(--zx-bright-cyan) 50%, var(--zx-bright-cyan) 62.5%,
        var(--zx-bright-blue) 62.5%, var(--zx-bright-blue) 75%,
        var(--zx-bright-magenta) 75%, var(--zx-bright-magenta) 87.5%,
        var(--zx-bright-white) 87.5%, var(--zx-bright-white) 100%
    );
    border: 2px solid var(--zx-bright-white);
    animation: rainbowPulse 2s ease-in-out infinite alternate;
}

@keyframes rainbowPulse {
    0% { opacity: 0.85; }
    100% { opacity: 1; }
}

/* UPLOAD ZONE */
.upload-zone {
    margin: 24px auto;
    max-width: 600px;
}

.upload-border-anim {
    padding: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--zx-bright-red) 0px, var(--zx-bright-red) 8px,
        var(--zx-bright-yellow) 8px, var(--zx-bright-yellow) 16px,
        var(--zx-bright-green) 16px, var(--zx-bright-green) 24px,
        var(--zx-bright-cyan) 24px, var(--zx-bright-cyan) 32px,
        var(--zx-bright-blue) 32px, var(--zx-bright-blue) 40px,
        var(--zx-bright-magenta) 40px, var(--zx-bright-magenta) 48px
    );
    background-size: 48px 100%;
    animation: loadingBars 1s linear infinite;
}

@keyframes loadingBars {
    from { background-position: 0 0; }
    to { background-position: 48px 0; }
}

.upload-inner {
    background: var(--zx-black);
    border: 2px solid var(--zx-blue);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.upload-inner:hover {
    border-color: var(--zx-bright-cyan);
}

.upload-zone.drag-over .upload-inner {
    border-color: var(--zx-bright-green);
    background: #001100;
}

.tape-icon {
    margin: 0 auto 16px;
    width: 120px;
    height: 80px;
}

.upload-text {
    font-size: 14px;
    color: var(--zx-bright-white);
    margin-bottom: 8px;
}

.upload-subtext {
    font-size: 8px;
    color: var(--zx-cyan);
    margin-bottom: 20px;
}

.rubber-key-btn {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--zx-bright-white);
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border: 3px solid #777;
    border-bottom-color: #222;
    border-right-color: #222;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s;
}

.rubber-key-btn:hover {
    background: linear-gradient(180deg, #666 0%, #444 100%);
}

.rubber-key-btn:active {
    border: 3px solid #222;
    border-bottom-color: #777;
    border-right-color: #777;
    transform: translateY(1px);
}

/* DISPLAY AREA */
#display-area {
    margin-top: 16px;
}

#images-container {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.image-panel {
    text-align: center;
}

.panel-label {
    font-size: 9px;
    color: var(--zx-bright-yellow);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

#original-canvas {
    border: 3px solid var(--zx-white);
    background: var(--zx-black);
    image-rendering: pixelated;
    max-width: 100%;
}

/* CRT FRAME */
.crt-wrapper {
    position: relative;
}

#crt-frame {
    position: relative;
    display: inline-block;
    background: #1a1a1a;
    border: 6px solid #2a2a2a;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.5),
        0 0 20px rgba(0, 215, 215, 0.1);
}

#border-area {
    padding: 24px;
    background: var(--zx-black);
    display: flex;
    align-items: center;
    justify-content: center;
}

#spectrum-canvas {
    image-rendering: pixelated;
    display: block;
}

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

.scanlines.hidden {
    display: none;
}

.crt-curve {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
    z-index: 3;
}

.crt-curve.hidden {
    display: none;
}

/* CONTROLS */
#controls-panel {
    background: var(--panel-bg);
    border: 3px solid var(--zx-blue);
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ctrl-label {
    font-size: 8px;
    color: var(--zx-bright-green);
    letter-spacing: 1px;
}

.ctrl-label span {
    color: var(--zx-bright-yellow);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dither-group {
    grid-column: span 1;
}

.spec-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--zx-white);
    background: #1a1a2e;
    border: 2px solid var(--zx-blue);
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}

.spec-btn:hover {
    border-color: var(--zx-bright-cyan);
    color: var(--zx-bright-white);
}

.spec-btn.active {
    background: var(--zx-blue);
    color: var(--zx-bright-white);
    border-color: var(--zx-bright-cyan);
}

.spec-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #1a1a2e;
    border: 2px solid var(--zx-blue);
    outline: none;
    cursor: pointer;
}

.spec-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 20px;
    background: var(--zx-bright-cyan);
    border: 2px solid var(--zx-bright-white);
    cursor: pointer;
}

.spec-slider::-moz-range-thumb {
    width: 14px;
    height: 20px;
    background: var(--zx-bright-cyan);
    border: 2px solid var(--zx-bright-white);
    cursor: pointer;
    border-radius: 0;
}

.border-color-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.border-swatch {
    width: 28px;
    height: 28px;
    border: 2px solid #333;
    cursor: pointer;
    transition: border-color 0.15s;
}

.border-swatch:hover {
    border-color: var(--zx-bright-white);
}

.border-swatch.active {
    border-color: var(--zx-bright-white);
    box-shadow: 0 0 6px var(--zx-bright-white);
}

/* ACTION BAR */
#action-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.action-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    padding: 12px 18px;
    border: 3px solid;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
}

.save-btn {
    color: var(--zx-bright-green);
    background: #001a00;
    border-color: var(--zx-bright-green);
}

.save-btn:hover {
    background: #003300;
}

.copy-btn {
    color: var(--zx-bright-yellow);
    background: #1a1a00;
    border-color: var(--zx-bright-yellow);
}

.copy-btn:hover {
    background: #333300;
}

.new-btn {
    color: var(--zx-bright-magenta);
    background: #1a001a;
    border-color: var(--zx-bright-magenta);
}

.new-btn:hover {
    background: #330033;
}

/* PALETTE PREVIEW */
#palette-preview {
    text-align: center;
    margin-bottom: 16px;
    background: var(--panel-bg);
    border: 3px solid var(--zx-blue);
    padding: 12px;
}

#palette-swatches {
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.palette-swatch {
    width: 24px;
    height: 24px;
    border: 2px solid #333;
    position: relative;
    transition: all 0.2s;
}

.palette-swatch.used {
    border-color: var(--zx-bright-white);
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
    transform: scale(1.1);
}

.palette-swatch .swatch-label {
    display: none;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5px;
    color: var(--zx-white);
    white-space: nowrap;
}

.palette-swatch:hover .swatch-label {
    display: block;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 20px 0 12px;
    border-top: 2px solid var(--zx-blue);
    margin-top: 24px;
}

.fun-fact {
    font-size: 7px;
    color: var(--zx-cyan);
    margin-bottom: 10px;
    min-height: 24px;
    line-height: 1.8;
}

.footer-link a {
    font-size: 8px;
    color: var(--zx-bright-magenta);
    text-decoration: none;
}

.footer-link a:hover {
    color: var(--zx-bright-white);
    text-decoration: underline;
}

/* PROCESSING INDICATOR */
#processing-indicator {
    display: none;
    text-align: center;
    padding: 8px;
    font-size: 8px;
    color: var(--zx-bright-yellow);
    animation: blink 0.5s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Responsive */
@media (max-width: 768px) {
    #title {
        font-size: 18px;
    }

    #controls-panel {
        grid-template-columns: 1fr;
    }

    #images-container {
        flex-direction: column;
        align-items: center;
    }

    .action-btn {
        font-size: 7px;
        padding: 8px 12px;
    }
}

@media (max-width: 500px) {
    #title {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .upload-text {
        font-size: 10px;
    }

    .spec-btn {
        font-size: 6px;
        padding: 5px 6px;
    }
}