/* CRT.css - Complete CSS for RTTY Art Viewer */

/* === CRT Mode Styling === */
body.crt-mode {
    background-color: black !important;
    color: #00FF66;
    font-family: "Courier New", Courier, monospace;
    text-shadow: 0 0 5px #00FF66, 0 0 10px #00FF66, 0 0 20px #00FF66;
}

    /* Container glow (if you use .crt-container) */
    body.crt-mode .crt-container {
        background-color: black;
        color: #00FF66;
        padding: 20px;
        border: 2px solid #00FF66;
        box-shadow: 0 0 20px #00FF66;
    }

    /* Headings, labels, paragraphs */
    body.crt-mode h1,
    body.crt-mode h2,
    body.crt-mode label,
    body.crt-mode p {
        color: #00FF66;
        text-shadow: 0 0 2px #00FF66, 0 0 4px #00FF66;
    }

    /* Inputs, buttons, selects */
    body.crt-mode input,
    body.crt-mode button,
    body.crt-mode select {
        background-color: black;
        color: #00FF66;
        border: 1px solid #00FF66;
    }

        /* Checkbox accent color */
        body.crt-mode input[type="checkbox"] {
            accent-color: #00FF66;
        }

    /* Download button styling */
    body.crt-mode .download-button {
        color: #00FF66;
        border: 1px solid #00FF66;
        padding: 6px 10px;
        text-decoration: none;
    }

        body.crt-mode .download-button:hover {
            background-color: #00FF66;
            color: black;
        }

/* === File Picker Styling === */
.file-input {
    width: 350px;
}

/* === Pixelated RTTY Image Styling === */
.rtty-image {
    transform-origin: top left;
    transform: scale(1);
    image-rendering: pixelated;
/*    
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
*/
    filter: none !important;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

/* === Custom Range Slider for ALL Browsers (incl. Safari) === */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 300px;
    height: 6px;
    background: #ccc;
    border-radius: 3px;
    margin: 0;
    padding: 0;
}

    /* WebKit track (Chrome, Safari, Edge) */
    input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        background: #ccc;
        border-radius: 3px;
    }

    /* WebKit thumb (Chrome, Safari, Edge) */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: #00FF66;
        border-radius: 50%;
        cursor: pointer;
        margin-top: -4px; /* center thumb */
    }

    /* Firefox track & thumb */
    input[type="range"]:-moz-range-track {
        width: 100%;
        height: 6px;
        background: #ccc;
        border-radius: 3px;
    }

    input[type="range"]:-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: #00FF66;
        border-radius: 50%;
        cursor: pointer;
    }

    /* IE/Edge Legacy */
    input[type="range"]::-ms-track {
        width: 100%;
        height: 6px;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    input[type="range"]::-ms-fill-lower {
        background: #ccc;
        border-radius: 3px;
    }

    input[type="range"]::-ms-fill-upper {
        background: #ccc;
        border-radius: 3px;
    }

    input[type="range"]::-ms-thumb {
        width: 14px;
        height: 14px;
        background: #00FF66;
        border-radius: 50%;
        cursor: pointer;
        margin-top: 0;
    }