/* =========================================================
   BASE
========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #000000;
}


body {
    font-family:
        "IBM Plex Mono",
        monospace;
}



/* =========================================================
   DATABASE
========================================================= */

#database {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #000000;
}



/* =========================================================
   UNIVERSE LIST
========================================================= */

#universe-list {
    position: absolute;

    top: 50%;
    left: 5vw;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
}



/* =========================================================
   UNIVERSE BUTTON
========================================================= */

.universe {
    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0;

    border: none;

    background:
        transparent;

    color:
        rgba(
            57,
            255,
            20,
            0.55
        );

    font-family:
        inherit;

    font-size:
        19px;

    letter-spacing:
        0.05em;

    line-height:
        1;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}



/* =========================================================
   UNIVERSE TERMINAL MARKER
========================================================= */

.terminal-marker {
    width:
        12px;

    opacity:
        0;

    color:
        #39ff14;

    transition:
        opacity 0.2s ease;
}


.universe:hover
.terminal-marker {
    opacity:
        0.8;
}


.universe.active
.terminal-marker {
    opacity:
        1;
}



/* =========================================================
   UNIVERSE HOVER
========================================================= */

.universe:hover {
    color:
        #39ff14;

    text-shadow:

        0 0 4px
        rgba(57, 255, 20, 0.8),

        0 0 10px
        rgba(57, 255, 20, 0.4);
}



/* =========================================================
   ACTIVE UNIVERSE
========================================================= */

.universe.active {
    color:
        #39ff14;

    text-shadow:

        0 0 4px
        rgba(57, 255, 20, 1),

        0 0 12px
        rgba(57, 255, 20, 0.5);
}



/* =========================================================
   LOCKED UNIVERSE
========================================================= */

.universe.locked {
    color:
        rgba(
            57,
            255,
            20,
            0.16
        );

    cursor:
        not-allowed;
}


.universe.locked:hover {
    color:
        rgba(
            57,
            255,
            20,
            0.25
        );

    text-shadow:
        none;
}


.universe.locked
.terminal-marker {
    display:
        none;
}



/* =========================================================
   BRANCH SYSTEM
========================================================= */

#branch-system {
    position: absolute;

    inset: 0;

    pointer-events:
        none;
}



/* =========================================================
   MAIN TRUNK
========================================================= */

#branch-trunk {
    position:
        absolute;

    width:
        0;

    height:
        2px;

    transform:
        translateY(-50%);

    background:
        #39ff14;

    box-shadow:

        0 0 4px
        rgba(57, 255, 20, 1),

        0 0 10px
        rgba(57, 255, 20, 0.45);

    transition:

        width 0.8s

        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}



/* =========================================================
   CHARACTER TREE
========================================================= */

#character-tree {
    position:
        absolute;
}



/* =========================================================
   VERTICAL TREE LINE
========================================================= */

.vertical-tree-line {
    position:
        absolute;

    width:
        2px;

    height:
        0;

    background:
        #39ff14;

    box-shadow:

        0 0 4px
        rgba(57, 255, 20, 0.8),

        0 0 10px
        rgba(57, 255, 20, 0.3);

    transition:

        height 0.7s

        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}



/* =========================================================
   CHARACTER ROW
========================================================= */

.character-row {
    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    transform:
        translateY(-50%);

    pointer-events:
        none;

    visibility:
        hidden;

    opacity:
        0;
}


.character-row.visible {
    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;
}



/* =========================================================
   CHARACTER BRANCH
========================================================= */

.character-branch {
    width:
        0;

    height:
        2px;

    background:
        #39ff14;

    box-shadow:

        0 0 4px
        rgba(57, 255, 20, 0.8),

        0 0 8px
        rgba(57, 255, 20, 0.25);

    transition:

        width 0.4s

        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}


.character-row.visible
.character-branch {
    width:
        38px;
}



/* =========================================================
   CHARACTER BUTTON
========================================================= */

.character {
    display:
        flex;

    align-items:
        center;

    padding:
        0;

    margin-left:
        10px;

    border:
        none;

    background:
        transparent;

    color:
        rgba(
            57,
            255,
            20,
            0
        );

    font-family:
        inherit;

    font-size:
        17px;

    letter-spacing:
        0.05em;

    line-height:
        1;

    cursor:
        pointer;

    text-align:
        left;

    white-space:
        nowrap;

    transition:

        color 0.25s ease,
        text-shadow 0.25s ease;
}



/* =========================================================
   CHARACTER MARKER
========================================================= */

.character-marker {
    display:
        inline-block;

    width:
        0;

    overflow:
        hidden;

    opacity:
        0;

    color:
        #39ff14;

    transition:

        width 0.2s ease,
        opacity 0.2s ease;
}



/* =========================================================
   CHARACTER VISIBLE
========================================================= */

.character-row.visible
.character {
    color:
        rgba(
            57,
            255,
            20,
            0.65
        );
}



/* =========================================================
   CHARACTER HOVER
========================================================= */

.character:hover {
    color:
        #39ff14;

    text-shadow:

        0 0 4px
        rgba(57, 255, 20, 1),

        0 0 12px
        rgba(57, 255, 20, 0.45);
}



/* =========================================================
   CHARACTER HOVER MARKER
========================================================= */

.character:hover
.character-marker {
    width:
        20px;

    opacity:
        1;
}



/* =========================================================
   LOCKED CHARACTER
========================================================= */

.character.locked {
    color:
        rgba(
            57,
            255,
            20,
            0.16
        );

    cursor:
        not-allowed;
}


.character.locked
.character-marker {
    display:
        none;
}



/* =========================================================
   ACTIVE TERMINAL CURSOR
========================================================= */

.universe.active
.terminal-marker {
    animation:

        terminalBlink
        1s
        steps(1)
        infinite;
}


@keyframes terminalBlink {

    0% {
        opacity:
            1;
    }


    50% {
        opacity:
            0;
    }


    100% {
        opacity:
            1;
    }

}



/* =========================================================
   SMALL SCREENS
========================================================= */

@media (
    max-width: 700px
) {

    .universe {
        font-size:
            16px;
    }


    .character {
        font-size:
            14px;
    }

}