/**
 * Krypt.os Terminal 
 * Main stylesheet
 * Version: 2.01
 * MORDENKAINEN1260
 * Last Updated: 9/3/2026
 */

/* ==========================================================================
   Contents (By Section)
   ==========================================================================
   1. Fonts
   2. Body
   3. Elements (Video, Terminal, Mixer, Pinpad)
   4. News Ticker
   5. Media Queries
   ========================================================================== */

/* ==========================================================================
   Section 1: Fonts
   ========================================================================== */


@font-face {
    font-family: "Carre-J";
    src: url("Carre-J.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TERMINAL";
    src: url("_decterm.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "LCD";
    src: url("LcdSolid.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "VCR";
    src: url("vcr.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Supercomputer";
    src: url("supercomputer.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Lucida";
    src: url("lucida.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SM";
    src: url("SM.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Noto Symbols";
    src: url("NotoSansSymbols2-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Arial Local";
    src: url("Arial.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Segoe Symbol Local";
    src: url("Segoe UI Symbol.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IBM VGA";
    src: url("IBM_8x14.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Strenuous 3d";
    src: url("Strenuous 3d.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Strenuous Bl";
    src: url("Strenuous Bl.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
   Section 2: Body 
   ========================================================================== */

body {
    background: linear-gradient(45deg, #0a0a0a 5%, #1e1e1e 40%, #3a3a3a 95%);

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    font-family: "Courier New", Courier, monospace;
}

.container {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 35px;
    border-radius: 5px;
    background: linear-gradient(45deg,
            rgb(121, 121, 121) 5%,
            rgb(155, 155, 155) 10%,
            rgb(105, 105, 105) 30%,
            rgb(144, 141, 167) 50%,
            rgb(93, 93, 94) 70%,
            rgb(121, 114, 133) 80%,
            rgb(82, 82, 82) 95%);
    box-shadow: 0px -1px 30px rgb(0, 0, 0);
border-left: 24px solid #555;
    border-right: 27px solid #838383;
    border-top: 22px solid #666;
    border-bottom: 24px solid #444;
}


/* ==========================================================================
   Section 3: Elements (Video, Terminal, Mixer, Pinpad)
   ========================================================================== */

.controller-column {
    flex-shrink: 0;
    margin-left: 40px;
    transform: translateY(-118px);
}



/* REMOTE CONNECTION DISPLAY */
.connection-display {
    position: absolute;
    top: 343px;
    left: 0;
    width: 220px;
    height: 72px;
    box-sizing: border-box;
    padding: 3px 10px 7px;

    background: #050805;
    border-left: 3px solid #555;
    border-right: 3px solid #838383;
    border-top: 3px solid #666;
    border-bottom: 3px solid #444;
    border-radius: 2px;

    color: rgba(200, 200, 200, 0.8);
    font-family: "IBM VGA", monospace;
    font-size: 11px;
    line-height: 1.35;

    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.95),
        inset 0 0 5px rgba(57, 255, 20, 0.15);
}

.connection-title {
    margin-bottom: 3px;
    color: inherit;
}

.connection-active {
    color: inherit;
}


/* Upper Mixer Housing */
.controller-upper-panel {
    position: relative;
    width: 220px;
    height: 400px;
    margin-bottom: 20px;
    transform: translateY(-70px);
    border-radius: 4px;
    box-sizing: border-box;
    background: linear-gradient(45deg,
            rgb(121, 121, 121) 5%,
            rgb(155, 155, 155) 10%,
            rgb(105, 105, 105) 30%,
            rgb(144, 141, 167) 50%,
            rgb(93, 93, 94) 70%,
            rgb(121, 114, 133) 80%,
            rgb(82, 82, 82) 95%);
    border-top: 16px solid #858585;
    border-left: 16px solid #444;
    border-bottom: 16px solid #4a4a4a;
    border-right: 16px solid #8d8d8d;
    box-shadow: 0 -1px 30px rgb(0, 0, 0);
}


/* Pinpad Controller Housing */
.terminal-controller {
    transform: translate(-13px, 17px);
    width: 220px;
    height: 300px;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0px -1px 30px rgb(0, 0, 0);
    box-sizing: border-box;
    color: rgba(200, 200, 200, 0.8);
    background: linear-gradient(45deg,
            rgb(121, 121, 121) 5%,
            rgb(155, 155, 155) 10%,
            rgb(105, 105, 105) 30%,
            rgb(144, 141, 167) 50%,
            rgb(93, 93, 94) 70%,
            rgb(121, 114, 133) 80%,
            rgb(82, 82, 82) 95%);
    border-top: 16px solid #4a4a4a;
    border-left: 16px solid #444;
    border-bottom: 16px solid #4a4a4a;
    border-right: 16px solid #8d8d8d;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

.terminal-controller button[data-number] {
    font-family: "Strenuous Bl", sans-serif !important;
    font-size: 26px;
    color: #a9a9a9;
    text-shadow:
        -1px -1px 0 #181818,
        1px 1px 0 rgba(255, 255, 255, 0.28);
}

.pinpad button {
    font-family: "Strenuous Bl", sans-serif !important;
}

#pinpad-clear,
#pinpad-enter {
    font-size: 26px;
    color: #a9a9a9;
    text-shadow:
        -1px -1px 0 #181818,
        1px 1px 0 rgba(255, 255, 255, 0.28);
}

.pinpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.playback-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.pinpad button,
.playback-controls button {
    min-height: 40px;
    color: #a9a9a9;
    background: linear-gradient(145deg,
            #777 0%,
            #5f5f5f 35%,
            #454545 70%,
            #303030 100%);
    border-top: 3px solid #858585;
    border-right: 2px solid #8d8d8d;
    border-bottom: 2px solid #444;
    border-left: 3px solid #444;
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 1px #222,
        -2px 0 0 #050505,
        0 1px 0 #050505;
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    transition:
        transform 200ms ease,
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
    cursor: pointer;
}

.playback-controls button {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 4px 0 0;
    font-family:
        "Noto Symbols",
        "Segoe Symbol Local",
        sans-serif;
    font-size: 18px;
    line-height: 1;
    text-shadow:
        -1px -1px 0 #181818,
        1px 1px 0 rgba(255, 255, 255, 0.28);
}

.pinpad button:hover,
.playback-controls button:hover {
    color: #a9a9a9;
    background: linear-gradient(145deg,
            #8a8a8a 0%,
            #707070 35%,
            #525252 70%,
            #383838 100%);
}

.pinpad button:active,
.playback-controls button:active {
    color: #a9a9a9;
    background: linear-gradient(145deg,
            #303030 0%,
            #444 35%,
            #5a5a5a 70%,
            #686868 100%);
    border-top: 2px solid #858585;
    border-right: 2px solid #8d8d8d;
    border-bottom: 1px solid #444;
    border-left: 1px solid #444;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px #222,
        -2px 0 0 #050505,
        0 1px 0 #050505;
    transform: scale(0.98);
    transform-origin: center;
}

.pinpad button:focus-visible,
.playback-controls button:focus-visible {
    outline: 2px solid #8fd3ff;
    outline-offset: 2px;
}

/* Video Player - TV */
.tv-frame {
    width: 80vw;
    max-width: 600px;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    position: relative;
    background: #222 url("colorbars3.gif") center/contain no-repeat;
    overflow: hidden;
    box-shadow: inset 0px 0px 30px rgb(0, 0, 0);
    border-top: 9px solid #4a4a4a;
    border-left: 12px solid #8a8a8a;
    border-bottom: 9px solid #757575;
    border-right: 12px solid #535353;
}

.tv-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}

video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: rgb(44, 44, 44);
    position: absolute;
    box-shadow: inset 0px 0px 50px rgb(0, 0, 0);
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
    object-fit: contain;
}

/* Main Terminal */
.terminal {
    position: relative;
    user-select: none;
    width: 80vw;
    max-width: 600px;
    /*background: #1b1b1b;*/
    color: rgb(200, 200, 200, 0.8);
    font-family: "IBM VGA", monospace;
    
    font-weight: normal;
    font-size: 14px;
    line-height: 1.1;
    padding: 0px;
    border-radius: 4px;
    text-align: left;
    white-space: nowrap;
    height: 300px;
    margin-top: 20px;
    overflow-y: auto;
    background: black;
    border-left: 12px solid #888;
    border-bottom: 10px solid #757575;
    border-right: 12px solid #636363;
    border-top: 7px solid #444;
}

.terminal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: url('scanlines.gif') center/cover no-repeat;
    opacity: .1;*/
    pointer-events: none;
    z-index: 1;
}

#terminalText,
.terminal input {
    position: relative;
    z-index: 0;
}

#terminalText {
    max-height: calc(100% - 50px);
    overflow-y: auto;
    /*scrollbar-width: overflow-y;*/
    padding-right: 5px;
    padding-left: 12px;
    padding-bottom: 15px;
    padding-top: 6px;
    z-index: 0;
}

#terminalText::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#terminalText::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

#terminalText::-webkit-scrollbar-track {
    background: #1b1b1b;
}

#terminalText::-webkit-scrollbar-corner {
    background-color: #1b1b1b;
}

/* Terminal Input */
.terminal input {
    background: none;
    border: none;
    color: rgb(200, 200, 200, 0.8);
    font: inherit;
    outline: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    padding: 5px;
    text-align: left;
    padding-left: 12px;
    caret-color: rgb(200, 200, 200, 0.8);

}


/* Mixer Controls */
.mixer-console {
    width: 100%;
    height: 100%;
    padding: 14px 10px;
    box-sizing: border-box;

    color: #d6d6d6;
    background: transparent;
    font-family: "SM", monospace !important;
}

.mixer-title {
    margin: 0 0 16px;
    font-family: "SM", monospace !important;
    font-size: 18px;
    text-align: center;
}

.mixer-controls {
    display: grid;
    grid-template-columns: 40px 70px 40px;
    justify-content: center;
    align-items: start;
    column-gap: 8px;
}

.decibel-channel,
.volume-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.decibel-label,
.volume-label {
    height: 18px;
    margin-bottom: 8px;
    font-family: "SM", monospace !important;

    line-height: 18px;
    text-align: center;
}

.volume-label {
    font-size: 16px;
}

.decibel-label {
    font-size: 16px;
}

.mixer-title,
.decibel-label,
.volume-label {
    color: #a9a9a9;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.9),
        -1px -1px 0 rgba(20, 20, 20, 0.75),
        1px 1px 0 rgba(255, 255, 255, 0.16);
}

.decibel-track {
    position: relative;
    width: 12px;
    height: 250px;
    overflow: hidden;

    background: #080808;
    border: 2px inset #666;
}

.decibel-level {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;

    background: linear-gradient(to top,
            #39d353 0%,
            #39d353 80%,
            #ffd33d 80%,
            #ffd33d 95%,
            #ff4949 95%,
            #ff4949 100%);

    transition: transform 0.08s linear;
}

.volume-slider {
    width: 28px;
    height: 254px;
    margin: 0;

    writing-mode: vertical-lr;
    direction: rtl;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;
}

.volume-channel .volume-slider {
    order: 1;
    margin-top: 26px;
}

.volume-channel .volume-label {
    order: 2;
    margin-top: 14px;
    margin-bottom: 0;
}

.mixer-title {
    transform: translateY(4px);
}

.decibel-label {
    transform: translateY(3px);
}


/* Chrome, Brave, Edge and Safari track */
.volume-slider::-webkit-slider-runnable-track {
    width: 8px;
    height: 100%;

    background: #090909;
    border: 2px inset #666;
    box-shadow:
        inset 0 0 6px rgba(57, 255, 20, 0.4),
        0 0 4px rgba(57, 255, 20, 0.2);
}

/* Chrome, Brave, Edge and Safari slider knob */
.volume-slider::-webkit-slider-thumb {
    width: 38px;
    height: 40px;
    margin-left: -17px;
    transition: transform 100ms ease;

    appearance: none;
    -webkit-appearance: none;

    background: linear-gradient(to bottom,
            #a8a8a8 0%,
            #555 45%,
            #222 55%,
            #777 100%);

    border-top: 2px solid #858585;
    border-right: 2px solid #8d8d8d;
    border-bottom: 2px solid #444;
    border-left: 2px solid #444;
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider:active::-webkit-slider-thumb {
    transform: scale(0.96);
}

/* Firefox track */
.volume-slider::-moz-range-track {
    width: 8px;
    height: 100%;

    background: #090909;
    border: 2px inset #666;
    box-shadow:
        inset 0 0 6px rgba(57, 255, 20, 0.4),
        0 0 4px rgba(57, 255, 20, 0.2);
}

/* Firefox rectangular slider knob */
.volume-slider::-moz-range-thumb {
    width: 38px;
    height: 40px;
    transition: transform 100ms ease;
    background: linear-gradient(to bottom,
            #a8a8a8 0%,
            #555 45%,
            #222 55%,
            #777 100%);
    border-top: 2px solid #858585;
    border-right: 2px solid #8d8d8d;
    border-bottom: 2px solid #444;
    border-left: 2px solid #444;
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider:active::-moz-range-thumb {
    transform: scale(0.96);
}

.terminal-controller button:disabled,
.volume-slider:disabled {
    opacity: 1;
    filter: none;
    cursor: not-allowed;
}

/* ==========================================================================
   Section 4: News Ticker
   ========================================================================== */
.news-ticker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -470px);
    width: 1000px;
    max-width: calc(100vw - 40px);
    height: 44px;
    overflow: hidden;
    box-sizing: border-box;
    background: #050505;
    border-top: 4px solid #636363;
    border-left: 6px solid #444;
    border-right: 6px solid #757575;
    border-bottom: 5px solid #444;
    border-radius: 3px;
}

.news-ticker-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    font-family: "Courier New", Courier, monospace;
    font-size: 15px;
    font-weight: normal;
    color: rgba(200, 200, 200, 0.9);
    line-height: 36px;
    animation: ticker-scroll 300s linear infinite;
    will-change: transform;
}

.ticker-copy {
    display: inline-block;
    transform: scaleY(1.5);
}

.ticker-separator {
    display: inline-block;
    margin: 0 16px;
    color: #39ff14;
}

.ticker-stock {
    color: #ffcc33;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}



/*
             CENTERVILLE
                              |
                +-------------+-------------+
                |                           |
          PUBLIC STRUCTURE            HIDDEN STRUCTURE
                |                           |
                |                     BIGHORN LODGE
                |                           |
                |                     Rufus Galaga
                |                  Current Grand Wizard
                |                           |
                |                    Gideon Monarch
                |                        Founder
                |                           |
                |              +------------+------------+
                |              |            |            |
                |          CORPORATE       MEDIA      GOVERNMENT
                |              |            |            |
                |              |            |            |
                |         KRYPTO CORP    CHANNEL 6   MAYOR'S OFFICE
                |              |            |            |
                |              |            |            |
                |         Dr. Elias      Veronica       Roscoe
                |           Turner         Vale         Royal
                |              |            |            |
                |              +------------+------------+
                |                           |
                |                    INFORMATION /
                |                    EVENT CONTROL
                |                           |
                |                           V
                |                   PUBLIC PERCEPTION
                |                           |
                |                           V
                |                          KSE
                |                 Kryptos Securities
                |                      Exchange
                |                           |
                |                           V
                |                    MARKET BEHAVIOR
                |
                |
                +---------------- CHURCH
                |                    |
                |             Bishop Alistair
                |               McAllister
                |                    |
                |                    ?
                |                    |
                |              BIGHORN LODGE
                |
                |
                +---------- PREAVIS MUSEUM CENTER
                |                    |
                |            Jean Luc Preavis
                |             Curator / Artist /
                |              Film Director
                |                    |
                |                    |
                |               Geno Romano
                |              TV Producer
                |                    |
                |                    V
                |            STAGED / CONTROLLED
                |                MEDIA EVENTS
                |                    |
                |                    V
                +-------------- CHANNEL 6


KRYPTO CORP
    |
    +-- Dr. Elias Turner
    |
    +-- Anonymous Krypto Employees
    |       |
    |       +-- k18441
    |       +-- k77302
    |       +-- [UNKNOWN]
    |
    +-- KRYPT.OS
    |       |
    |       +-- Communications / Archives / Records
    |
    +-- ??????????????????????
            |
            +-- BIGHORN LODGE?


CHANNEL 6 PUBLIC ACCESS
    |
    +-- Veronica Vale
    |       |
    |       +-- Dr. Elias Turner
    |
    +-- Jack Meek
    |
    +-- Geno Romano ?
    |       |
    |       +-- Jean Luc Preavis
    |
    +-- KRYPT.OS ACCESS
            |
            +-- KRYPTO CORP


MAYOR'S OFFICE
    |
    +-- Mayor Roscoe Royal
            |
            +-- Rufus Galaga
            |       |
            |       +-- BIGHORN LODGE
            |
            +-- Dr. Elias Turner
            |
            +-- City Departments / Public Works
                    |
                    +-- Can provide official cover
                        for unexplained activity


PREAVIS MUSEUM CENTER
    |
    +-- Jean Luc Preavis
            |
            +-- Art
            |
            +-- Film production
            |
            +-- Props / locations / personnel ?
            |
            +-- Geno Romano
                    |
                    +-- Staged footage / events ?


CHURCH / DIOCESE
    |
    +-- Bishop Alistair McAllister
            |
            +-- BIGHORN LODGE ?
                    |
                    +-- UNKNOWN ROLE


                    +-----------------------+
                    |    BIGHORN LODGE      |
                    |                       |
                    |    "PROPORTION"       |
                    |         +             |
                    |     "LEVERAGE"        |
                    +-----------+-----------+
                                |
         +----------------------+----------------------+
         |                      |                      |
      MONEY                 INFORMATION             AUTHORITY
         |                      |                      |
        KSE                  CHANNEL 6              CITY HALL
         |                      |                      |
         +----------------------+----------------------+
                                |
                                V
                         PUBLIC BEHAVIOR




*/



/* ==========================================================================
   Section 5: Media Queries
   ========================================================================== */

@media (max-width: 1050px),
(max-height: 990px) {
    .news-ticker {
        display: none !important;
    }
}

@media (max-width: 1050px) {
    .controller-column {
        display: none;
    }
}

@media (max-width: 480px) {

    .tv-frame,
    .terminal,
    .container {
        width: 90vw;
        font-size: 14px;
    }
}

@media (pointer: coarse) {

    #terminalText,
    .terminal input {
        font-size: 14px;
    }
}

@media (pointer: coarse) {
    .news-ticker,
    .controller-column {
        display: none !important;
    }
}