/* =========================================================
   piOS — CRT / 90s COMPUTER DISPLAY
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: #000;

    overflow: hidden;
}


body {

    color: #eeeeee;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    user-select: none;
}


/* =========================================================
   THEME VARIABLES
   ========================================================= */

:root {

    --main-color: #eeeeee;

    --accent-color: #d9b4ff;

    --accent-dark: rgba(55, 18, 72, 0.95);

    --line-color: rgba(220, 220, 220, 0.70);

    --outer-line-color: rgba(180, 180, 180, 0.60);

    --image-line-color: rgba(220, 220, 220, 0.70);

    --image-glow: rgba(217, 180, 255, 0.08);
}


/* =========================================================
   BLOOD THEME
   ========================================================= */

body.blood-theme {

    --main-color: #eeeeee;

    --accent-color: #ff3030;

    --accent-dark: rgba(75, 8, 8, 0.96);

    --line-color: rgba(255, 45, 45, 0.90);

    --outer-line-color: rgba(255, 40, 40, 0.88);

    --image-line-color: rgba(255, 45, 45, 0.90);

    --image-glow: rgba(255, 25, 25, 0.16);
}


/* =========================================================
   CRT
   ========================================================= */

#crt {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #000;
}


/* =========================================================
   SCREEN
   ========================================================= */

#screen {

    position: absolute;

    width: 94vw;
    height: 92vh;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    background: #020202;

    overflow: hidden;

    border-radius: 0;

    border:
        1px solid
        var(--outer-line-color);

    box-shadow:

        0 0 0 4px #000,

        0 0 0 5px
        var(--outer-line-color),

        0 0 0 9px #000,

        inset
        0 0 70px
        rgba(0, 0, 0, 0.42);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   INTERFACE
   ========================================================= */

#interface {

    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns:
        31% 69%;
}


/* =========================================================
   DIRECTORY
   ========================================================= */

#directory {

    position: relative;

    height: calc(100% - 42px);

    padding:
        48px
        28px
        30px
        32px;

    overflow: hidden;

    border-right:
        1px solid
        var(--line-color);
}


/* =========================================================
   FILE LIST
   ========================================================= */

#file-list {

    display: flex;

    flex-direction: column;

    width: fit-content;
}


/* =========================================================
   FILE ROW
   ========================================================= */

.file {

    position: relative;

    display: grid;

    grid-template-columns:
        190px 130px;

    height: 27px;

    align-items: center;

    cursor: pointer;

    color:
        var(--main-color);

    text-shadow:

        -7px 0 4px
        color-mix(
            in srgb,
            currentColor 24%,
            transparent
        ),

         7px 0 4px
        color-mix(
            in srgb,
            currentColor 24%,
            transparent
        ),

        -3px 0 2px
        color-mix(
            in srgb,
            currentColor 32%,
            transparent
        ),

         3px 0 2px
        color-mix(
            in srgb,
            currentColor 32%,
            transparent
        ),

         0 0 1px
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );

    transition:

        color 0.06s linear,

        background 0.06s linear;
}


/* =========================================================
   FILE NAME
   ========================================================= */

.file-name {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    padding-left: 3px;

    white-space: nowrap;

    z-index: 2;
}


/* =========================================================
   FILE TYPE
   ========================================================= */

.file-type {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    padding-left: 10px;

    white-space: nowrap;

    z-index: 2;
}


.file-type-label {

    white-space: nowrap;
}


/* =========================================================
   DIRECTORY DIVIDER
   ========================================================= */

#directory::after {

    content: "";

    position: absolute;

    left:
        calc(
            32px + 190px
        );

    top: 0;

    bottom: 0;

    width: 1px;

    background:
        var(--line-color);

    pointer-events: none;
}


#directory::before {

    content: "";

    position: absolute;

    left:
        calc(
            32px + 190px + 130px
        );

    top: 0;

    bottom: 0;

    width: 1px;

    background:
        var(--line-color);

    pointer-events: none;
}


/* =========================================================
   HORIZONTAL PHOSPHOR TRAIL
   ========================================================= */

.file::after {

    content: attr(data-text);

    position: absolute;

    left: 3px;

    top: 0;

    color: inherit;

    opacity: 0.16;

    filter:
        blur(1.4px);

    transform:
        scaleX(1.035);

    transform-origin:
        center left;

    white-space: nowrap;

    pointer-events: none;

    text-shadow:

        -8px 0 5px
        currentColor,

         8px 0 5px
        currentColor;
}


/* =========================================================
   HOVER / SELECTED
   ========================================================= */

.file:hover,
.file.selected {

    color:
        var(--accent-color);

    background:
        var(--accent-dark);

    text-shadow:

        -8px 0 4px
        color-mix(
            in srgb,
            currentColor 28%,
            transparent
        ),

         8px 0 4px
        color-mix(
            in srgb,
            currentColor 28%,
            transparent
        ),

        -3px 0 2px
        color-mix(
            in srgb,
            currentColor 38%,
            transparent
        ),

         3px 0 2px
        color-mix(
            in srgb,
            currentColor 38%,
            transparent
        );
}


.file:hover::after,
.file.selected::after {

    opacity: 0.22;

    filter:
        blur(1.5px);

    transform:
        scaleX(1.045);

    text-shadow:

        -10px 0 5px
        currentColor,

         10px 0 5px
        currentColor;
}


/* =========================================================
   SELECTION ARROW
   ========================================================= */

.file.selected::before {

    content: ">";

    position: absolute;

    left: -18px;

    color:
        var(--accent-color);

    text-shadow:

        -7px 0 4px
        currentColor,

         7px 0 4px
        currentColor,

        -3px 0 2px
        currentColor,

         3px 0 2px
        currentColor;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.file.separator {

    color: #aaaaaa;

    cursor: default;
}


.file.separator:hover {

    color: #aaaaaa;

    background:
        transparent;
}


/* =========================================================
   BLOOD-ONLY FILES
   ========================================================= */

.blood-file {

    display: none;
}


/*
    They become visible only while
    Blood Theme is active.
*/

body.blood-theme .blood-file {

    display: grid;
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

#information {

    position: relative;

    height: calc(100% - 42px);

    padding:
        48px
        38px
        30px
        38px;

    overflow: hidden;
}


/* =========================================================
   CLOCK
   ========================================================= */

#clock {

    position: absolute;

    top: 46px;

    right: 38px;

    color:
        var(--accent-color);

    white-space: nowrap;

    cursor: pointer;

    text-shadow:

        -7px 0 4px
        color-mix(
            in srgb,
            currentColor 22%,
            transparent
        ),

         7px 0 4px
        color-mix(
            in srgb,
            currentColor 22%,
            transparent
        ),

        -3px 0 2px
        color-mix(
            in srgb,
            currentColor 30%,
            transparent
        ),

         3px 0 2px
        color-mix(
            in srgb,
            currentColor 30%,
            transparent
        );
}


/* =========================================================
   IMAGE CONTAINER
   ========================================================= */

#image-container {

    position: absolute;

    left: 38px;
    right: 38px;

    top: 105px;
    bottom: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   IMAGE
   ========================================================= */

#ark-image {

    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border:
        1px solid
        var(--image-line-color);

    padding: 3px;

    background:
        rgba(0, 0, 0, 0.20);

    filter:

        drop-shadow(
            0 0 7px
            var(--image-glow)
        );

    transition:

        border-color 0.25s ease,

        filter 0.25s ease;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

#bottom-bar {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 42px;

    border-top:
        1px solid
        var(--line-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        30px
        0
        32px;

    color:
        var(--main-color);

    text-shadow:

        -7px 0 4px
        color-mix(
            in srgb,
            currentColor 22%,
            transparent
        ),

         7px 0 4px
        color-mix(
            in srgb,
            currentColor 22%,
            transparent
        );
}


/* =========================================================
   PASSWORD OVERLAY
   ========================================================= */

#password-overlay {

    position: absolute;

    inset: 0;

    z-index: 100;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(0, 0, 0, 0.18);
}


/*
    Only visible when JavaScript
    adds the .open class.
*/

#password-overlay.open {

    display: flex;
}


/* =========================================================
   PASSWORD WINDOW
   ========================================================= */

#password-window {

    width: 340px;

    min-height: 150px;

    padding:
        18px
        22px;

    background:
        #030303;

    border:
        1px solid
        var(--accent-color);

    box-shadow:

        0 0 0 3px #000,

        0 0 0 4px
        var(--accent-color),

        inset
        0 0 30px
        rgba(0, 0, 0, 0.65);

    color:
        var(--accent-color);

    text-shadow:

        -6px 0 4px
        color-mix(
            in srgb,
            currentColor 24%,
            transparent
        ),

         6px 0 4px
        color-mix(
            in srgb,
            currentColor 24%,
            transparent
        );
}


/* =========================================================
   PASSWORD TITLE
   ========================================================= */

#password-title {

    text-align: center;

    margin-bottom: 22px;

    letter-spacing: 2px;
}


/* =========================================================
   PASSWORD INPUT LINE
   ========================================================= */

#password-line {

    display: flex;

    align-items: center;

    gap: 9px;

    width: 100%;
}


/* =========================================================
   PASSWORD INPUT
   ========================================================= */

#password-input {

    width: 100%;

    height: 24px;

    padding:
        2px
        6px;

    background:
        #000;

    border:
        1px solid
        var(--accent-color);

    outline: none;

    color:
        var(--accent-color);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    caret-color:
        var(--accent-color);

    text-shadow:

        -5px 0 3px
        currentColor,

         5px 0 3px
        currentColor;
}


#password-input:focus {

    box-shadow:

        0 0 8px
        color-mix(
            in srgb,
            var(--accent-color) 30%,
            transparent
        );
}


/* =========================================================
   PASSWORD ERROR
   ========================================================= */

#password-error {

    display: none;

    margin-top: 13px;

    text-align: center;

    color:
        var(--accent-color);

    letter-spacing: 1px;
}


#password-error.visible {

    display: block;
}


/* =========================================================
   PASSWORD HINT
   ========================================================= */

#password-hint {

    margin-top: 16px;

    text-align: center;

    font-size: 11px;

    opacity: 0.65;
}


/* =========================================================
   CRT SCANLINES
   ========================================================= */

#scanlines {

    position: absolute;

    inset: 0;

    z-index: 50;

    pointer-events: none;

    background:

        repeating-linear-gradient(

            to bottom,

            rgba(255, 255, 255, 0.028)
            0px,

            rgba(255, 255, 255, 0.028)
            1px,

            rgba(0, 0, 0, 0.10)
            2px,

            rgba(0, 0, 0, 0.10)
            4px
        );

    opacity: 0.72;
}


/* =========================================================
   GRAIN
   ========================================================= */

#noise {

    position: absolute;

    inset: -50%;

    z-index: 60;

    pointer-events: none;

    opacity: 0.055;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    animation:
        noise-move
        0.18s
        steps(2)
        infinite;
}


@keyframes noise-move {

    0% {
        transform:
            translate(0, 0);
    }

    25% {
        transform:
            translate(2%, -1%);
    }

    50% {
        transform:
            translate(-1%, 2%);
    }

    75% {
        transform:
            translate(1%, 1%);
    }

    100% {
        transform:
            translate(0, 0);
    }
}


/* =========================================================
   VIGNETTE
   ========================================================= */

#vignette {

    position: absolute;

    inset: 0;

    z-index: 55;

    pointer-events: none;

    background:

        radial-gradient(

            ellipse at center,

            transparent 54%,

            rgba(0, 0, 0, 0.10) 68%,

            rgba(0, 0, 0, 0.30) 85%,

            rgba(0, 0, 0, 0.58) 100%
        );
}


/* =========================================================
   SCREEN GLOW
   ========================================================= */

#screen-glow {

    position: absolute;

    inset: 0;

    z-index: 45;

    pointer-events: none;

    box-shadow:

        inset
        0 0 100px
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   CRT SHAKE
   ========================================================= */

#screen.shake {

    animation:
        crt-shake
        0.16s
        steps(2);
}


@keyframes crt-shake {

    0% {

        transform:
            translate(-50%, -50%);
    }

    20% {

        transform:
            translate(
                calc(-50% - 3px),
                calc(-50% + 1px)
            );
    }

    40% {

        transform:
            translate(
                calc(-50% + 3px),
                calc(-50% - 1px)
            );
    }

    60% {

        transform:
            translate(
                calc(-50% - 2px),
                -50%
            );
    }

    80% {

        transform:
            translate(
                calc(-50% + 2px),
                -50%
            );
    }

    100% {

        transform:
            translate(-50%, -50%);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body {
        font-size: 11px;
    }

    #screen {

        width: 96vw;

        height: 94vh;
    }

    #interface {

        grid-template-columns:
            45% 55%;
    }

    #directory {

        padding:
            35px
            12px
            20px
            18px;
    }

    #information {

        padding:
            35px
            15px
            20px
            18px;
    }

    #clock {

        top: 35px;

        right: 15px;
    }

    #image-container {

        left: 15px;
        right: 15px;

        top: 85px;
        bottom: 20px;
    }

    #bottom-bar {

        padding:
            0
            15px
            0
            18px;

        font-size: 10px;
    }

    .file {

        grid-template-columns:
            145px 110px;
    }


    #password-window {

        width: 280px;
    }
}