/* Left panel colors */
#left .text {
    color: #35FF00e6;
}
#left .panel {
    outline: 1px solid #35FF00e6;
}


/* Right panel colors */
#right .text {
    box-sizing: content-box;
    color: #ffb000e6;
}
#right .panel {
    outline: 1px solid #ffb000e6;
}



.panel {
    display: flex;
    /* font-size: 12px; */
    font-size: 1rem;
    background: #000000ee;
    color: white;

    /* border: 1px solid orange; */
    outline: 1px solid white;
}

img {
    display: flex;
}

.text {
    padding: .5rem .7rem;
    padding-bottom: .7rem;
    padding-right: calc(.7rem + 1ch);
}

/* CHOICE STUFF */
#choice {
    display: flex;
}
.choice {
    display: flex;
    flex-direction: column;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 0.5rem;
    margin: 0;
}
.choice label {
    position: relative;
}

.choice-label {
    padding: .25rem .5rem;
}
.choice input {
    -moz-appearance: none;
    margin: 0;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    opacity: 0;
    
    pointer-events: all;
    cursor: pointer;
}
:checked+.choice-label {
    background: white;
    color: black;
}

.hidden {
    /* color: transparent; */
    visibility: hidden;
}

.cursor {
    position: absolute;
    color: transparent;
    /* box-shadow: inset 0px 0px 0 .5px white; */

    top: 0;
    left: 0;
    transform: translate(100%, 0);

    animation-name: char-cursor;
    animation-direction: alternate;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.char-hidden {
    visibility: hidden;
    position: relative;
}

.char-reveal {
    position: relative;
}

.panel .char-reveal {
    animation-name: char-reveal;
    animation-direction: alternate;
    animation-duration: .35s;
}

.info-text {
    padding: .25em;
    text-shadow: 1px 1px 1px #000;
    font-family: "large";
    /* text-transform: uppercase; */

    filter: drop-shadow(0 0 1px black);
}

.info-text .char-reveal {
    animation-name: location-char-reveal;
    animation-direction: alternate;
    animation-duration: .5s;
}

.info-text .cursor {
    all: revert;

    position: absolute;
    color: transparent;
    /* border-bottom: solid white .5px; */

    top: 0;
    left: 0;
    transform: translate(100%, 0);
}

.info-text-top {
    position: absolute;
    top: 0; left: 0;
}

.info-text-bottom {
    position: absolute;
    bottom: 0; left: 0;
}

.name {
    position: absolute;
    bottom: 0;
    left: 0;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* DEFINE GRID */
/* #grid {
    display: grid;
    grid-template-areas: "left middle right";
    grid-template-columns: 1.2fr auto 0.8fr;
    width: 100%; height: 100%;
} */


#grid {
    display: grid; 
    grid-auto-rows: 1fr; 
    grid-template-columns: 1fr 0.5fr 220px 0.5fr 1fr; 
    width: 100%; height: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr; 
}



/* LEFT */
#left {
    /* border: 1px solid lightskyblue; */
    /* grid-area: left-start / left-start / left-end / middle-end; */
    grid-area: 1 / 1 / 3 / 4;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;

    z-index: 1;
}

/* CENTER */
#center {
    /* border: 1px solid magenta; */
    /* grid-area: middle-start / middle-start / middle-end / middle-end; */
    grid-area: 1 / 2 / 5 / 5; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RIGHT */
#right {
    /* border: 1px solid orange; */
    /* grid-area: right-start / middle-start / right-end / right-end; */
    grid-area: 3 / 4 / 5 / 6;
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
    align-items: flex-end;

    z-index: 1;
}

.log-container {
    width: 350px;
    height: 100%;

    display: flex;

    overflow: hidden;
}

.log-content {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 1em;
}

.log-wipe {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    margin: 1px;
    border-top: 1px solid currentColor;
    background: black;
}

[data-path="location/image"] {
    display: flex;
}

[data-path="location/image"] > * {
    width: 100%;
    height: 100%;
}

@keyframes char-reveal {
    0% {
        box-shadow: inset 0px 0px 0 .5px inherit;
        color: transparent;
    }

    45% {
        color: inherit;
    }

    100% {
        box-shadow: inset 0px 0px 0 .5px transparent;
        color: inherit;
    }
}

@keyframes char-cursor {
    0% {}

    100% {
        /* background: inherit; */
    }
}

@keyframes location-char-reveal {
    0% {
        color: #FFFFFF00;
        text-shadow: 1px 1px 1px #0000;
    }

    100% {
        color: #FFFFFFFF;
        text-shadow: 1px 1px 1px #000F;
    }
}

@keyframes location-fadeout {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}

@keyframes grow-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes grow-out {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes log-wipe {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}