/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #fff #000;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: #000;
}

*::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 0px;
    border: 0px solid #fff;
}

@font-face {
    font-family: 'DejaVuSansMono';
    src: url('fonts/DejaVuSansMono.woff') format('woff');
}

* {
    font-family: "DejaVuSansMono", monospace;
}

html, body {
    margin: 0;
    padding: 0;
}
body {
    background: #000;
    height: 100vh;
    color: #fff;
    font-size: 10px;
    display: flex;
    box-sizing: content-box;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    image-rendering: pixelated;
}

button {
    color: #fff;
    background-color: #000;
    cursor: pointer;
    height: 20px;
    border: 2px solid;
    border-color: #e3e3e3 #979797 #979797 #e3e3e3;
}

button:not(:disabled):hover {
    background-color: #fff;
    color: #000;
}

button.release:not(:disabled):hover {
    background-color: #f00;
    color: #fff;
}

button:disabled,
button:disabled:hover {
    color: #999;
    border-color: #999;
    cursor: not-allowed;
}

.strikethrough {
    text-decoration: line-through;
}

.upside-down {
    display: inline-block;
    transform: scaleY(-1);
}

.ch {
    width: 1ch;
}

a:visited,
a:link {
    color: #fff;
}

#ui {
    display: flex;
}

@keyframes darken {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(0);
    }
}

@keyframes lighten {
    from {
        filter: brightness(0);
    }

    to {
        filter: brightness(1);
    }
}

/** TITLE SCREEN STYLES **/

#titleScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 999;
    font-family: monospace;
    font-size: 15px;
    user-select: none;
    -webkit-user-select: none;
    padding: 5px;

    background: #150616;
    background-image: url(assets/title/background.gif);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 66vh;

    &.go {
        transition: background-position-y 1s ease-in-out;
        background-position-y: 50%;
    }
}

#backgroundStarfield {
    position: absolute;
}

#titleScreen .content{
    position: absolute;
    left: 0px;
    top: 0px;

}
#titleScreen a:link, #titleScreen a:visited {
    color: #fff;
    text-decoration: underline;
}
#titleScreen .logo {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 3px;
    font-size: 9px;
}

@keyframes titleScreen_lightningStrike {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes titleScreen_distantLightningStrike {
    0% { opacity: 1; }
    10%, 100% { opacity: 0; }
}

#titleScreen .lightning {
    animation: titleScreen_lightningStrike 1s ease-out 1s;
    opacity: 0;
    position: absolute;
    white-space: pre;
    line-height: 14px;
    letter-spacing: -2.5px;
    text-shadow:
        0 0 200px #fdff,
        0 0 100px #ffd700;
    transform:
        translateY(-30px)
        translateX(241px)
        scaleX(6%)
        scaleY(40%)
        rotateZ(-43deg);
    z-index: 9999;
}

#titleScreen .distantLightning {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: calc(50% - 50px);
    padding: 0 10%;
    font-size: 8px;
    white-space: pre;
    width: 80vw;
    text-shadow:
        0 0 20px #fdf,
        0 0 10px #ffd700;

    & span {
        opacity: 0;
        animation: titleScreen_distantLightningStrike 10s ease-out infinite;
        padding: 0 10%;
    }

    & :nth-child(1) {
        animation-delay: 3s;
    }

    & :nth-child(2) {
        animation-delay: 7s;
    }

    & :nth-child(3) {
        animation-delay: 5s;
    }
}

#startGameBtn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50px;
    top: 180px;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
    align-content: center;
    border-style: solid;
    border-width: 2px;
    border-top-width: 10px;
    border-color: #ffffff;
    background-color: #000000;
    z-index: 999;

    &:hover {
        border-color: #090;
        color: #0f0;
    }
}

#titleScreen #preloaderStatus {
    cursor: pointer;
    position: absolute;
    left: 50px;
    top: 260px;
    width: 190px;
    height: 54px;
    padding: 8px;
    text-align: center;
    line-height: 0%;
    border-style: solid;
    border-width: 2px;
    border-top-width: 10px;
    border-color: #ffffff;
    background-color: #000000;
    z-index: 999;
}

#titleScreen .loadingBarContainer {
    width: 190px;
    height: 22px;
    background: #090;
    border: 2px solid #0f0;
    display: flex;
    align-items: center;
    position: relative;
    margin: auto;
}

#titleScreen #loadingBar {
    height: 100%;
    width: 0%;
    background: #0f0;
    transition: width .2s;
}

#titleScreen #loadingBarText {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: #000;
    width: 100%;
}

#titleScreen .skipPreloaderBtn {
    position: absolute;
    left: -2px;
    top: 28px;
    width: 194px;
    height: 26px;
    background: #000;
    border: 2px solid #fff;
    color: #fff;
    font-weight: bold;

    &:hover {
        background-color: #fff;
        color: #000;
    }
}


#titleScreen .artwork {
    position: absolute;
    left: 270px;
    top: 220px;
    font-size: 9px;
}

#titleScreen #credits {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 540px;
    left: 30px;
    border-style: solid;
    border-width: 2px;
    border-top-width: 10px;
    border-color: #fff;
    background-color: #000;
    padding: 9px;
    z-index: 999;
}

#titleScreen .starfield {
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
}

@keyframes titleScreen_logoAppear {
    0% {
        color: #fdf0;
    }

    44.9% {
        color: #fdff;
    }

    45% {
        color: #ffff;
    }

    100% {
        color: #ffd700;
    }
}

.logo {
    color: #ffd700;
    animation: titleScreen_logoAppear 2s ease-in-out forwards;
}

#titleScreen.go .logo {
    animation: titleScreen_logoAppear 2s ease-in-out backwards;
}

@keyframes titleScreen_spireIdle {
    0% {
        transform: translate(0%, 0%);
    }

    5% {
        transform: translate(0.93%, 5.88%);
    }

    10% {
        transform: translate(1.76%, 9.51%);
    }

    15% {
        transform: translate(2.43%, 9.51%);
    }

    20% {
        transform: translate(2.85%, 5.88%);
    }

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

    30% {
        transform: translate(2.85%, -5.88%);
    }

    35% {
        transform: translate(2.43%, -9.51%);
    }

    40% {
        transform: translate(1.76%, -9.51%);
    }

    45% {
        transform: translate(0.93%, -5.88%);
    }

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

    55% {
        transform: translate(-0.93%, 5.88%);
    }

    60% {
        transform: translate(-1.76%, 9.51%);
    }

    65% {
        transform: translate(-2.43%, 9.51%);
    }

    70% {
        transform: translate(-2.85%, 5.88%);
    }

    75% {
        transform: translate(-3%, 0%);
    }

    80% {
        transform: translate(-2.85%, -5.88%);
    }

    85% {
        transform: translate(-2.43%, -9.51%);
    }

    90% {
        transform: translate(-1.76%, -9.51%);
    }

    95% {
        transform: translate(-0.93%, -5.88%);
    }

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

@keyframes titleScreen_spireFlyIn {
    0% {
        transform: rotateX(0deg)
                   rotateY(0deg)
                   translateX(0px)
                   translateY(0px)
                   translateZ(0px);
    }

    50% {
        transform: rotateX(-90deg)
                   rotateY(-2deg)
                   translateX(-140px)
                   translateY(-100px)
                   translateZ(40px);
    }

    /* Quadratic ramp to 360deg (θ = -2 + 362 * s², s = (t-50%)/50%) */

    55% {
        transform: rotateX(-90deg)
                   rotateY(2deg)
                   translateX(-140px)
                   translateY(-157px)
                   translateZ(40px);
    }

    57.5% {
        transform: rotateX(-90deg)
                   rotateY(6deg)
                   translateX(-140px)
                   translateY(-186px)
                   translateZ(40px);
    }

    60% {
        transform: rotateX(-90deg)
                   rotateY(12deg)
                   translateX(-140px)
                   translateY(-214px)
                   translateZ(40px);
    }

    62.5% {
        transform: rotateX(-90deg)
                   rotateY(21deg)
                   translateX(-140px)
                   translateY(-242px)
                   translateZ(40px);
    }

    65% {
        transform: rotateX(-90deg)
                   rotateY(31deg)
                   translateX(-140px)
                   translateY(-271px)
                   translateZ(40px);
    }

    67.5% {
        transform: rotateX(-90deg)
                   rotateY(42deg)
                   translateX(-140px)
                   translateY(-300px)
                   translateZ(40px);
    }

    70% {
        transform: rotateX(-90deg)
                   rotateY(56deg)
                   translateX(-140px)
                   translateY(-328px)
                   translateZ(40px);
    }

    72.5% {
        transform: rotateX(-90deg)
                   rotateY(71deg)
                   translateX(-140px)
                   translateY(-356px)
                   translateZ(40px);
    }

    75% {
        transform: rotateX(-90deg)
                   rotateY(88deg)
                   translateX(-140px)
                   translateY(-385px)
                   translateZ(40px);
    }

    77.5% {
        transform: rotateX(-90deg)
                   rotateY(108deg)
                   translateX(-140px)
                   translateY(-414px)
                   translateZ(40px);
    }

    80% {
        transform: rotateX(-90deg)
                   rotateY(128deg)
                   translateX(-140px)
                   translateY(-442px)
                   translateZ(40px);
    }

    82.5% {
        transform: rotateX(-90deg)
                   rotateY(151deg)
                   translateX(-140px)
                   translateY(-470px)
                   translateZ(40px);
    }

    85% {
        transform: rotateX(-90deg)
                   rotateY(175deg)
                   translateX(-140px)
                   translateY(-499px)
                   translateZ(40px);
    }

    87.5% {
        transform: rotateX(-90deg)
                   rotateY(202deg)
                   translateX(-140px)
                   translateY(-528px)
                   translateZ(40px);
    }

    90% {
        transform: rotateX(-90deg)
                   rotateY(230deg)
                   translateX(-140px)
                   translateY(-556px)
                   translateZ(40px);
    }

    92.5% {
        transform: rotateX(-90deg)
                   rotateY(260deg)
                   translateX(-140px)
                   translateY(-584px)
                   translateZ(40px);
    }

    95% {
        transform: rotateX(-90deg)
                   rotateY(291deg)
                   translateX(-140px)
                   translateY(-613px)
                   translateZ(40px);
    }

    97.5% {
        transform: rotateX(-90deg)
                   rotateY(325deg)
                   translateX(-140px)
                   translateY(-642px)
                   translateZ(40px);
    }

    100% {
        transform: rotateX(-90deg)
                   rotateY(360deg)
                   translateX(-140px)
                   translateY(-670px)
                   translateZ(40px);
    }
}

@keyframes titleScreen_spireIntro {
    0% {
        filter: brightness(1) saturate(0);
        transform: translateY(150px);
    }

    10% {
        filter: brightness(0) saturate(0);
        transform: translateY(130px);
    }

    100% {
        filter: brightness(1) saturate(1);
        transform: translateY(0);
    }
}

#spireContainer {
    filter: brightness(0);
    transform: translateY(150px);
    animation: titleScreen_spireIntro 2s ease-in-out 1s forwards;
    image-rendering: pixelated;
    perspective: 700px;
    perspective-origin: 50% 50%;
    font-size: 9px;
    line-height: 12px;
    position: absolute;
    left: 260px;
    top: 20px;
}

#titleScreen #spireScene {
    margin-top: 260px;
    margin-left: 20px;
    animation: titleScreen_spireIdle 16s linear infinite;
}

#titleScreen.go #spire {
    animation: titleScreen_spireFlyIn 2s ease-in-out forwards;
}

@keyframes titleScreen_closeItUp {
    0% {
        clip-path: rect(0 100% 100% 0);
    }

    50% {
        clip-path: rect(0 100% 8px 0);
    }

    100% {
        clip-path: rect(0 0 8px 0);
    }
}

#titleScreen.go {
    & #startGameBtn,
    & #preloaderStatus,
    & #credits {
        animation: titleScreen_closeItUp .6s ease-in-out forwards;
    }

    & #preloaderStatus {
        animation-delay: .2s;
    }

    & #credits {
        animation-delay: .4s;
    }
}

#spire {
    position: absolute;
    inset: 10px;
    transform-style: preserve-3d;

    & pre {
        position: absolute;
        margin: 0;
        backface-visibility: hidden;
    }
}

.island {
    position: relative;
    transform: rotateX(0deg) translateZ(100px);

    & > div {
        position: absolute;
        top: 0;
        left: 0;

        &.mask {
            background-color: #000;
            color: #1E0C26;
            clip-path: polygon(
                -2px 6px,
                3% 20%,
                10% 36%,
                29% 82%,
                39% 96%,
                40% 87%,
                58% 44%,
                73% 32%,
                92% 17%,
                334px 7px
            );
        }

        &.baseRock {
            color: #623022;
        }

        &.rock {
            color: #BA7;
        }

        &.baseGrass {
            color: #26401A;
        }

        &.grass {
            color: #648C3B;
        }
    }
}

.skyline {
    transform: translateY(-7em);
}

.top {
    transition: transform 1s linear;

    &:nth-child(1) {
        color: #fff;
        transform: translateY(-4em) rotateX(100deg) translateY(-40px) translateZ(30px);
    }

    &:nth-child(2) {
        color: #bbb;
        transform: translateY(-4em) rotateX(100deg) translateY(-40px) translateZ(25px);
    }

    &:nth-child(3) {
        color: #777;
        transform: translateY(-4em) rotateX(100deg) translateY(-40px) translateZ(15px);
    }

    &:nth-child(4) {
        color: #333;
        transform: translateY(-4em) rotateX(100deg) translateY(-40px) translateZ(5px);
        background-color: #000;
    }
}

.go .top {
    &:nth-child(1) {
        transform: translateY(-4em) rotateX(90deg) translateY(-40px) translateZ(120px);
    }

    &:nth-child(2) {
        transform: translateY(-4em) rotateX(90deg) translateY(-40px) translateZ(115px);
    }

    &:nth-child(3) {
        transform: translateY(-4em) rotateX(90deg) translateY(-40px) translateZ(110px);
    }

    &:nth-child(4) {
        transform: translateY(-4em) rotateX(90deg) translateY(-40px) translateZ(105px);
    }
}

/** END OF TITLE SCREEN STYLES **/

#game {
    width: 100%;
    height: 100%;
    white-space: pre;
    margin-bottom: auto;
    align-content: center;

    font-size: unset;
    margin-top: unset;
    /* Blue sky, dirt ground */
    /*
    background: linear-gradient(
        180deg,
        rgb(48, 89, 105) 0%,
        rgb(48, 89, 105) 50%,
        rgb(71, 54, 19) 50%,
        rgb(71, 54, 19) 100%
    );*/
    /* Bruised sky, gradient dirt ground */
    /*
    background: linear-gradient(
        180deg,
        #950913 0%,
        #060d40 50%,
        #000 50%,
        #513805 100%
    );
    */
    background: linear-gradient(180deg, transparent 30%, rgb(0, 0, 0) 70%, rgb(117, 62, 0) 100%);
    overflow: hidden;
}

@keyframes descendIntoFloor {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-400px);
    }
}

#game.descendingIntoFloor {
    animation: descendIntoFloor 1.2s forwards linear;
}

@keyframes descendFromCeiling {
    from {
        opacity: 0;
        transform: translateY(400px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#game.descendingToNextFloor {
    animation:
        descendIntoFloor 1.2s linear,
        descendFromCeiling 1.2s linear 1.21s;
}

#game.terrain_iceCavern {
    background: linear-gradient(
        180deg,
        rgb(100, 113, 182) 0%,
        rgb(0, 0, 0) 30%,
        rgb(0, 0, 0) 70%,
        rgb(49, 41, 106) 100%
    );
}

@keyframes torchFlicker {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1.14);
    }
    25%, 86% {
        opacity: 0.25;
        transform: scale(1.31);
    }
    50% {
        opacity: 0.325;
        transform: scale(1);
    }
    17%, 75% {
        opacity: 0.275;
        transform: scale(1.22);
    }
}

#game.torch::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    background: radial-gradient(circle, #fff0 30%, #f2bb20cc 80%);
    mix-blend-mode: screen;
    animation: torchFlicker 3s infinite ease-in-out;
}

#game:not(.sightliness) {
    filter: saturate(0.6);
}

#game > .layer {
    position: absolute;
    margin-left: 3.5px;
    top: 0;
    left: 0;
}

#game > .layer.dark {
    filter: brightness(0);
}

#game > .layer.darkening,
#game > .layer.lightening {
    animation-name: darken;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

#game > .layer.lightening {
    animation-name: lighten;
}

#game > .layer.enemy > span {
    color: #fff;
}

.layer.enemy {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}
.layer.enemy pre {
    margin: 0;
    line-height: 1;
    display: inline-block;
    font-size: 12px;
    transform: scale(0.5);
    transform-origin: center center;
    color: #fff;
}

@keyframes layerHealingAnimation {
    from { transform: translateY(0); }
    to { transform: translateY(-100%) };
}

#game > .layer.healing {
    background: linear-gradient(
        0deg,
        #0b00 0%,
        #0b00 10%,
        #0b0f 50%,
        #ffff 55%,
        #080f 60%,
        #0800 90%,
        #0800 100%
    );
    animation-name: layerHealingAnimation;
    animation-duration: 0.76s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    mix-blend-mode: screen;
    width: 100%;
    height: 1000%;
}

#game .layer,
#game span {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
}

#animBattleTransition {
    position: absolute;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    left: 0;
    top: 0;
    background-image: url(assets/transitions/battle-transition.gif);
    background-size: cover;
    background-position: bottom;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 15;
}

#animBattleTransition.active {
    transform: translateY(0);
}

#animBattleTransition.reveal {
    transform: translateY(-100%);
}

#animTorch {
    width: 110px;
    height: 256px;
    image-rendering: pixelated;
    left: 0;
    bottom: 0;
    background-image: url(assets/fp-anim/fp-torch.gif);
    transform: translate(-55px, 256px);
    transition: transform .5s steps(8, jump-end);
}

#animTorch.onscreen {
    transform: translate(0, 0);
}

#animTrombone {
    position: absolute;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    image-rendering: pixelated;
    left: 0;
    bottom: 0;
    background-image: url(assets/fp-anim/fp-trombone.gif);
    transform: translate(250px, 356px);
    transition: transform .5s steps(8, jump-end);
}

#animTrombone.onscreen {
    transform: translate(200px, 100px);
}

#viewport #mouseControl {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#mouseControl * {
    position: absolute;
    width: 100%;
    height: 100%;
}

#mouseControl .turn-left {
    clip-path: polygon(0 0, 25% 25%, 25% 75%, 0 75%);
    cursor: url(assets/cursors/turn-left.cur), nw-resize;
}

#mouseControl .forward {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 75%);
    cursor: url(assets/cursors/up.cur), n-resize;
}

#mouseControl .turn-right {
    clip-path: polygon(75% 25%, 100% 0, 100% 75%, 75% 75%);
    cursor: url(assets/cursors/turn-right.cur), ne-resize;
}

#mouseControl .strafe-left {
    clip-path: polygon(0 75%, 25% 75%, 25% 85%, 0 100%);
    cursor: url(assets/cursors/left.cur), w-resize;
}

#mouseControl .backward {
    clip-path: polygon(25% 85%, 25% 75%, 75% 75%, 75% 85%, 100% 100%, 0 100%);
    cursor: url(assets/cursors/down.cur), s-resize;
}

#mouseControl .strafe-right {
    clip-path: polygon(75% 75%, 100% 75%, 100% 100%, 75% 85%);
    cursor: url(assets/cursors/right.cur), e-resize;
}

#mouseControl .touch {
    clip-path: polygon(10% 15%, 90% 15%, 90% 85%, 10% 85%);
    cursor: url(assets/cursors/touch.cur), grab;
}

#mouseControl .touch:active {
    cursor: url(assets/cursors/grab.cur), grabbing;
}

#mouseControl .attack {
    cursor: url(assets/cursors/attack.cur), crosshair;
}

/** Menu Styles **/
#menu:not(.hidden) {
    background: #000;
    height: 315px;
    width: 360px;
    white-space: pre-wrap;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 4px solid #000;
    padding-bottom: 10px;
    z-index: 9;
}

#menu .landing {
    display: flex;
    flex-direction: column;
}

#menu .title {
    display: none !important;
}

#menu .list {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
    margin-bottom: auto;
    padding-left: 1em;
    min-height: 150px;
    z-index: 9;
}

#menu .option {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

#menu .option.selected {
    background-color: #003;
}

#menu .option:not(.selected)::before {
    content: "  ";
}

#menu .option.selected::before {
    content: "▶ ";
}

#menu .selectionDescription {
    flex-grow: 1;
}

#menu .escapeMessage {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: end;
}
/** End of Menu Styles **/

#animation:not(.hidden) {
    white-space: pre;
    overflow: hidden;
    text-align: initial;
    width: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}

@keyframes explosionColors {
    0% {
        background-color: #FFF5AD;
        opacity: 1;
    }

    32% {
        background-color: #F00;
        opacity: 1;
    }

    38% {
        background-color: #FFBC14;
        opacity: 1;
    }

    45% {
        background-color: #FFF;
        opacity: 1;
    }

    50% {
        background-color: #464FFC;
        opacity: 1;
    }

    100% {
        background-color: #000;
        opacity: 0;
    }
}

#animation.explosion {
    font-size: 12px;
    mix-blend-mode: lighten;
    animation-name: explosionColors;
    animation-duration: 240ms;
    animation-iteration-count: 1;
    animation-direction: forwards;
    animation-timing-function: linear;
}

@keyframes fadeGradient {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#viewport.playerFellIntoAPitAndDied::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #900 40%, #0000 100%);
    opacity: 0;
    pointer-events: none;
    animation: fadeGradient 1s ease-out forwards;
    animation-delay: 2s;
}

#sidePanel {
    margin-left: 0px;
    display: flex;
    flex-direction: column;
}

#battleLog {
    padding: 10px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-y: scroll;
}

#battleLog > * {
    filter: brightness(.5) saturate(.5);
}

#battleLog > :nth-child(1) {
    filter: brightness(1) saturate(1);
}

#battleLog > :nth-child(2) {
    filter: brightness(.8) saturate(.8);
}

#battleLog > :nth-child(3) {
    filter: brightness(.7) saturate(.7);
}

#battleLog > :nth-child(4) {
    filter: brightness(.6) saturate(.6);
}

#minimap,
#portraitArtOverlay {
    padding: 2px;
    white-space: pre;
    font-size: 12px;
}

#minimap {
    border-top: 0;
}

#minimap > span {
    cursor: help;
}

#minimap > span:hover {
    color: #000;
    background-color: #fff;
}

#minimap .crackedFloorSlight,
#minimap .crackedFloor,
#minimap .crackedFloorSevere {
    color: #f00;
}

#minimap .vampire,
.mapCellDetails .enlargedTile.vampire {
    position: relative;

    &::before {
        position: absolute;
        left: calc(50% - (1ch / 2));
        top: 0;
        width: 1ch;
        overflow: hidden;
        content: " ";
        display: inline-block;
        animation: minimapVampireFlap 0.6s infinite;
        color: #f0f;
    }
}

#minimap .vampire {
    width: 1ch;
}

@keyframes minimapVampireFlap {
    0%, 25% {
        content: "v";
        transform: translateY(1px) scaleY(1);
    }

    25.01%, 50% {
        content: "m";
        transform: translateY(0) scaleY(1);
    }

    50.01%, 75% {
        content: "w";
        transform: translateY(-1px) scaleY(-1);
    }

    75.01%, 100% {
        content: "m";
        transform: translateY(-1px) scaleY(1);
    }
}

#portraitArtOverlay.portrait-art {
    position: absolute;
    top: 107px;
    pointer-events: none;
    font-size: 5px;
    line-height: 1;
}

#portraitArtOverlay.chest {
    color: #FAEB4A;
}

#portraitArtOverlay.settings {
    color: #eef;
}

#portraitArtOverlay.inventory {
    color: #fc8;
}

#portraitArtOverlay.erokIdle, #portraitArtOverlay.erokPet {
    color: rgb(255, 214, 138);
    top: 104px; /* lazy fix for clipping over border */
}

#portraitArtOverlay.erokIdle, #portraitArtOverlay.erokPet {
    color: rgb(255, 214, 138);
}

#portraitArtOverlay.pigeon {
    color: rgb(79, 194, 146);
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

#inputBox {
    display: none;
    position: absolute;
    top: 89px;
    left: 0px;
    width: 692px;
    height: 2px;
    border: 2px solid #fff;
    z-index: 9;
}

#inputBox input {
    flex-grow: 1;
    color: #fff;
    background-color: #000;
    font-size: 13px;
    padding: 10px;
    font-size: 16px;
    text-align: left;
    outline: none;
    border: unset;
}

#inputBox input::placeholder {
    color: #d8d8d8;
}

#confirmInputBox,
#closeInputBox {
    border-color: transparent;

    &:hover {
        color: #fff;
        background-color: #090;
        border-color: #3c3 #090 #090 #3c3;
    }

    &:not(:disabled):active {
        background-position: calc(50% + 2px) calc(50% + 2px);
        &::after {
            top: 1px;
            left: 1px;
        }
    }

    &::after {
        content: "✔";
        position: relative;
    }
}

#closeInputBox {
    &:hover {
        background-color: #f00;
        border-color: #f99 #c00 #c00 #f99;
    }

    &::after {
        content: "×";
    }
}

#interface {
    display: grid;
    width: 692px;
    height: 642px;
    gap: 2px;
    padding: 2px;
    background: white;

    grid-template-columns: 220px 368px 100px;
    grid-template-rows: 110px 184px 162px 148px 30px;
    grid-template-areas:
        "battleLog  battleLog   battleLog"
        "topLeft    viewport    inventory"
        "stats      viewport    inventory"
        "controls   party       playerInput"
        "bottomBar  bottomBar   bottomBar";
}

@keyframes interface_reveal {
    from {
        clip-path: rect(0 696px 0 0);
    }

    to {
        clip-path: rect(0 696px 646px 0);
    }
}

#interface.reveal {
    animation: interface_reveal 0.5s cubic-bezier(.77,0,.18,1) forwards;
}

#interface > div {
    background-color: #000;
}

.ui-header {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    color: #000;
    margin: 1px;
    padding: 0 4px;
}

.ui-header.space-between {
    justify-content: space-between;
}

.ui-header.space-around {
    justify-content: space-around;
}

#battleLog      { grid-area: battleLog; }
#topLeft        { grid-area: topLeft; }
#stats          { grid-area: stats; }
#controls       { grid-area: controls; }
#party          { grid-area: party; overflow: hidden; }
#inventory      { grid-area: inventory; }
#playerInput    { grid-area: playerInput; }
#viewport { 
    grid-area: viewport; 
    background-image: url('assets/backgrounds/bg1.png'); 
    background-size: 1472px 341px;
    background-repeat: repeat-x;
    background-position: 0px 0px;
    position: relative;
    overflow: hidden;
}
#bottomBar     {
    grid-area: bottomBar;
    display: flex;
    flex-direction: column;
}

@keyframes nowPlaying_notes {
    0%   { content: "♬"; }
    25%  { content: "♪"; }
    50%  { content: "♩"; }
    75%  { content: "♫"; }
    100% { content: "♬"; }
}

#bottomBar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5ch;
    align-items: center;
    background-image: url('assets/interface/ui/tile1.gif');
    background-repeat: repeat;
    background-size: 25px;
    font-size: 13px;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}

.right-icons {
    display: flex;
    align-items: center;
    gap: 0;
}

#nowPlaying {
    margin-left: 0.5ch;
    display: flex;
    flex-direction: row;
    gap: 0.5ch;
    align-items: center;
    font-size: 13px;
    color: #fff;
    text-shadow: 2px 2px 2px #000;

    &.stopped .track-info {
        font-style: oblique;
    }

    & .icon {
        font-size: 2em;
        margin-right: 0.5ch;
        color: #0ff;
        &::before {
            content: "♫";
        }
    }

    &:not(.stopped) .icon::before {
        animation: nowPlaying_notes 4s steps(4, jump-both) infinite;
    }

    &.stopped .icon {
        color: #f0a;
        &::before {
            content: "∅";
        }
    }
}

#controllerStatusButtonContainer {
    width: 32px;
    height: 30px;
    background-color: #fff;
    display: flex;
    align-content: center;
    justify-content: end;
}

#controllerStatusButton {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #000;
    border: 1px solid #000;

    &:hover {
        background-color: #fff;
        &::after {
            filter: invert();
        }
    }

    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 16px;
        top: 7px;
        left: 5px;
        background-image: url(assets/interface/ui/tardpad.png);
        background-position: center;
        background-size: 20px 16px;
        background-repeat: no-repeat;
    }

    &.connected::after {
        background-image: url(assets/interface/ui/tardpad-connected.png);
    }

    &:not(.connected)::after {
        background-image: url(assets/interface/ui/tardpad-disconnected.png);
    }
}

#gameSettingsButtonContainer {
    width: 32px;
    height: 30px;
    background-color: #fff;
    display: flex;
    align-content: center;
    justify-content: end;
}

#gameSettingsButton {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #000;
    border: 1px solid #000;

    &.opened:not(:active):not(:hover),
    &:not(.opened):active,
    &:not(.opened):hover {
        background-color: #fff;
        &::after {
            filter: invert();
        }
    }

    &::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        top: 4px;
        left: 4px;
        background-image: url(assets/interface/ui/settings.png);
        background-position: center;
        background-size: 22px;
        background-repeat: no-repeat;
    }

    &:hover::after {
        animation: gameSettingsButton_speen 560ms steps(4, end) infinite;
    }
}

@keyframes gameSettingsButton_speen {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#viewport {
    position: relative;
    overflow: hidden;
}

#infoContainer {
    display: grid;
    gap: 2px;
    padding: 4px;
    grid-template-columns: 1fr 3fr;
    margin-bottom: 2px;
}

#infoContainer > *,
#statContainer > * {
    height: 14px;
    line-height: 14px;
}

#infoContainer > :nth-child(2n) {
    text-align: right;
}

#infoContainer > .BTC {
    padding-right: 1em;
}

#statContainer {
    display: grid;
    gap: 4px;
    padding: 4px;

    grid-template-columns: 3fr 1fr 3fr 1fr;
}

#statContainer > div {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#statContainer > :nth-child(2n) {
    justify-content: right;
}

#partyMembers {
    display: flex;
    flex-direction: column;
    padding: 4px;
    margin-top: 2px;
}

#partyMembers:empty::after {
    content: "You ain't got no party. Go persuade some fools!";
    display: block;
    margin-top: 50px;
    text-align: center;
    color: #fff6;
    font-style: italic;
}

#partyMembers > [data-partyMemberId] {
    background-color: #000;
    clip-path: rect(0 100% 100% 0);
    height: 35px;
    margin-bottom: 8px;
    overflow: hidden;
    transition:
        background-color .5s linear,
        clip-path .5s linear,
        height .5s linear .5s,
        margin-bottom .5s linear .5s;
}

#partyMembers > [data-partyMemberId].sweepItUp {
    background-color: #900;
    clip-path: rect(0 0% 100% 0);
    height: 0;
    margin-bottom: 0;
}

#viewport > .layer,
#viewport > #animation,
#viewport > #animTorch,
#viewport > #menu,
#viewport > #mouseControl {
    position: absolute;
}

#controls {
    display: flex;
    flex-direction: column;
}

.control-list:not(.hidden) {
    display: grid;
    gap: 4px;
    padding: 4px;
    grid-template-columns: 1fr 2fr;
    margin: 4px 2px;
}

#controlsMenu .control-list {
    grid-template-columns: 1fr 1fr;
}

#playerInput {
    background: orange;
}

#playerInput .section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.grid-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#navigationInput {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#battleInput {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

#playerInput button {
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 2px;
    min-width: 30px;
    min-height: 30px;

    &:disabled:hover {
        background-color: unset;
    }

    &:not(:disabled):hover {
        background-color: #00f;
        border-color: #99f #00c #00c #99f;
    }

    &:not(:disabled):active {
        background-position: calc(50% + 2px) calc(50% + 2px);
    }

    &:disabled {
        opacity: 0.25;
    }
}

#navigationInput button {
    image-rendering: pixelated;
}

#battleInput button {
    width: initial;
    height: initial;
}

#playerInput button[name="turn-left"] {
    background-image: url(assets/interface/ui/turn-left.png);
}

#playerInput button[name="forward"] {
    background-image: url(assets/interface/ui/up.png);
}

#playerInput button[name="turn-right"] {
    background-image: url(assets/interface/ui/turn-right.png);
}

#playerInput button[name="strafe-left"] {
    background-image: url(assets/interface/ui/left.png);
}

#playerInput button[name="backward"] {
    background-image: url(assets/interface/ui/down.png);
}

#playerInput button[name="strafe-right"] {
    background-image: url(assets/interface/ui/right.png);
}

#playerInput button[name="attack"] {
    background-image: url(assets/interface/ui/attack.gif);

    &:not(:disabled):hover {
        background-color: #f00;
        border-color: #f99 #c00 #c00 #f99;
    }

    &:not(:disabled):active {
        background-color: #f00;
        border-color: #c00 #f99 #f99 #c00;
    }
}

#playerInput button[name="persuade"] {
    background-image: url(assets/interface/ui/persuade.gif);

    &:not(:disabled):hover {
        background-color: #A23AB4;
        border-color: #d6f #90c #90c #d6f;
    }

    &:not(:disabled):active {
        background-color: #A23AB4;
        border-color: #90c #d6f #d6f #90c;
    }
}

#playerInput button[name="run"] {
    background-image: url(assets/interface/ui/run.gif);

    &:not(:disabled):hover {
        background-color: #00f;
        border-color: #99f #00c #00c #99f;
    }

    &:not(:disabled):active {
        background-color: #00f;
        border-color: #00c #99f #99f #00c;
    }
}

/** @TODO: Simplify/specify this */
#playerInput .section.menu .grid-container {
    & > * {
        flex-grow: 1;
    }

    & > div {
        height: 100%;
        display: flex;
        flex-direction: column;

        & button {
            flex-grow: 1;
        }

        & button[name="up"] {
            background-image: url(assets/interface/ui/up.png);
        }

        & button[name="confirm"] {
            background-image: url(assets/interface/ui/confirm.png);

            &:not(:disabled):hover {
                background-color: #090;
                border-color: #3c3 #090 #090 #3c3;
            }

            &:not(:disabled):active {
                background-color: #090;
                border-color: #090 #3c3 #3c3 #090;
            }
        }

        & button[name="down"] {
            background-image: url(assets/interface/ui/down.png);
        }
    }
}

#playerInput button[name="previous-page"] {
    height: 100%;
    background-image: url(assets/interface/ui/previous.png);
}

#playerInput button[name="next-page"] {
    height: 100%;
    background-image: url(assets/interface/ui/next.png);
}

#inventorySidebarCloseButton {
    width: 100%;

    &:hover {
        color: #fff;
        background-color: #f00;
        border-color: #f99 #c00 #c00 #f99;
    }

    &:not(:disabled):active {
        background-position: calc(50% + 2px) calc(50% + 2px);
        &::after {
            top: 1px;
            left: 1px;
        }
    }

    &::after {
        content: "Close";
        position: relative;
    }
}

#inventorySidebarScrollUp,
#inventorySidebarScrollDown {
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    &:hover:not(:disabled) {
        border-color: #99f #00c #00c #99f;
    }

    &:active:not(:disabled) {
        background-position: calc(50% + 2px) calc(50% + 2px);
    }
}

#inventorySidebarScrollUp {
    background-image: url(assets/interface/ui/scroll-up.png);
}

#inventorySidebarScrollDown {
    background-image: url(assets/interface/ui/scroll-down.png);
}

#inventory > [name] {
    display: flex;
    flex-direction: column;
    height: 273px;
    overflow: hidden;
}

#inventory > [name="main"] {
    height: 333px;
}

#inventory > [name] button {
    background-image:
        url(assets/interface/ui/item-border-small-top-left.png),
        url(assets/interface/ui/item-border-small-top-right.png),
        url(assets/interface/ui/item-border-small-bottom-right.png),
        url(assets/interface/ui/item-border-small-bottom-left.png);
    background-repeat: no-repeat;
    background-position:
        top left,
        top right,
        bottom right,
        bottom left;
    background-size: 32px;
    width: 100%;
    height: 105px;
    flex: 0 0 auto;
    position: relative;
    display: flex;

    /** Main Inventory Sidebar Menu **/
    &.items .icon {
        background-image: url(assets/interface/ui/items.png);
    }
    &.weapons .icon {
        background-image: url(assets/interface/ui/weapons.png);
    }
    &.armor .icon {
        background-image: url(assets/interface/ui/armor.png);
    }
    &.rings .icon {
        background-image: url(assets/interface/ui/rings.png);
    }

    /** Items Section **/
    &.items-canOfHamms .icon {
        background-image: url(assets/interface/items/hamms.png);
    }
    &.items-cupOfLean .icon {
        background-image: url(assets/interface/items/lean.png);
    }
    &.items-glassOfToiletWater .icon {
        background-image: url(assets/interface/items/toilet-water.png);
    }
    &.items-alaskaRaisins .icon {
        background-image: url(assets/interface/items/raisins.png);
    }
    &.items-dowsingRod .icon {
        background-image: url(assets/interface/items/dowsing-rod.png);
    }
    &.items-torch .icon {
        background-image: url(assets/interface/items/torch.png);
    }
    &.items-brickOfC4 .icon {
        background-image: url(assets/interface/items/c4.png);
    }
    &.items-tromBone .icon {
        background-image: url(assets/interface/items/trombone.png);
    }
    &.items-carrierPigeon .icon {
        background-image: url(assets/interface/items/carrier-pigeon.png);
    }

    /** Weapons Section **/
    &.weapons-fingerNail .icon {
        background-image: url(assets/interface/weapons/fingernail.png);
    }
    &.weapons-pointyStick .icon {
        background-image: url(assets/interface/weapons/pointy-stick.png);
    }
    &.weapons-wiffleBallBat .icon {
        background-image: url(assets/interface/weapons/wiffle-ball-bat.png);
    }
    &.weapons-nunchucks .icon {
        background-image: url(assets/interface/weapons/nunchucks.png);
    }
    &.weapons-atlatlSpear .icon {
        background-image: url(assets/interface/weapons/atlatl-spear.png);
    }
    &.weapons-bludgeoningMace .icon {
        background-image: url(assets/interface/weapons/bludgeon-mace.png);
    }
    &.weapons-danceClub .icon {
        background-image: url(assets/interface/weapons/dance-club.png);
    }
    &.weapons-cathodeRayTubeMonitor .icon {
        background-image: url(assets/interface/weapons/crt.png);
    }
    &.weapons-magicPencil .icon {
        background-image: url(assets/interface/weapons/magic-pencil.gif);
    }
    &.weapons-goldenWang .icon {
        background-image: url(assets/interface/weapons/golden-wang.gif);
    }

    /** Armor Section **/
    &.armor-pectoralMass .icon {
        background-image: url(assets/interface/armor/pectoral-mass.png);
    }
    &.armor-graphicTee .icon {
        background-image: url(assets/interface/armor/graphic-tee.png);
    }
    &.armor-barrelWithSuspenders .icon {
        background-image: url(assets/interface/armor/barrel.png);
    }
    &.armor-leatherArmor .icon {
        background-image: url(assets/interface/armor/leather-armor.png);
    }
    &.armor-milaneseArmor .icon {
        background-image: url(assets/interface/armor/milanese-armor.png);
    }
    &.armor-blackPlateArmor .icon {
        background-image: url(assets/interface/armor/black-plate-armor.png);
    }
    &.armor-nokiaMail .icon {
        background-image: url(assets/interface/armor/nokia-mail.png);
    }

    /** Rings Section **/
    &.rings-ringOfSexyUnderwear .icon {
        background-image: url(assets/interface/rings/underwear.png);
    }
    &.rings-ringOfFrenchAccent .icon {
        background-image: url(assets/interface/rings/french.png);
    }
    &.rings-ringValentines .icon {
        background-image: url(assets/interface/rings/valentine.png);
    }
    &.rings-ringBloodstream .icon {
        background-image: url(assets/interface/rings/bloodstream-nosering.png);
    }
    &.rings-ringOfHardening .icon {
        background-image: url(assets/interface/rings/cockring.png);
    }
    &.rings-ringPectoralPiercing .icon {
        background-image: url(assets/interface/rings/pectoral-piercing.png);
    }
    &.rings-ringPinkyToe .icon {
        background-image: url(assets/interface/rings/pinkytoe.png);
    }
    &.rings-ringCrack .icon {
        background-image: url(assets/interface/rings/crack.png);
    }
    &.rings-ringGamble .icon {
        background-image: url(assets/interface/rings/gambler.png);
    }
    &.rings-ringEscobar .icon {
        background-image: url(assets/interface/rings/escobar.png);
    }
    &.rings-ringOfSightliness .icon {
        background-image: url(assets/interface/rings/sightliness.png);
    }
    &.rings-ringOfStinky .icon {
        background-image: url(assets/interface/rings/stinky.png);
    }
    &.rings-ringOfAmplifiedAudio .icon {
        background-image: url(assets/interface/rings/amp-audio.png);
    }
}

#inventory > [name="main"] button {
    height: 83px;
}

#inventory > [name] button .container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

#inventory > [name] button .icon {
    width: 86px;
    height: 81px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 10px;
}

#inventory > [name="items"] button .icon {
    top: 4px;
}

#inventory > [name="rings"] button .icon {
    top: 12px;
}

#inventory > [name="main"] button .icon {
    top: 4px;
    width: 58px;
    height: 58px;
}

#inventory > [name] button .label {
    margin-left: auto;
    margin-right: 1ch;
    position: relative;
    top: -8px;
    color: #fff;
    background-color: #0009;
}

#inventory > [name="main"] button .label {
    margin-right: auto;
}

#inventory > [name] button.equipped {
    background-color: #009;
    border-color: #33a #003 #003 #33a;
}

#inventory > [name] button:not(:disabled):hover {
    background-color: #00f;
    border-color: #99f #00c #00c #99f;

    & .label {
        background-color: transparent;
    }

    & .icon {
        filter: invert();
    }
}

#inventory > [name] button:not(:disabled):active {
    background-position:
        top 2px left 2px,
        top 2px right -2px,
        bottom -2px right -2px,
        bottom -2px left 2px;

    & .container {
        top: 2px;
        left: 2px;

        & .label {
            background-color: transparent;
        }

        & .icon {
            filter: invert();
        }
    }
}

#inventory button:disabled {
    opacity: 0.25;
}

.party-member {
    gap: 2px;
    display: flex;
    flex-direction: column;

    &.placeholder {
        & .name {
            color: transparent;
        }

        & .info button.talk,
        & .info button.release {
            cursor: default;
            color: transparent;
            border-color: #262626 #1A1A1A #1A1A1A #262626;
        }
    }
}

.party-member > .info {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.party-member > .info > progress-bar {
    flex-grow: 1;
}

.party-member > .info > .buttons {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

#animEatRat {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
}

.player {
    color: #2aff00;
}
.healingTile {
    color: #6cff74;
}
.treasureChest {
    color: #f19b32;
}
.wall,
.gloryWall,
.noboWall {
    color: #e9ff00;
}
.floor {
    color: #fff;
}
.unexplored {
    color: #545454;
}
.exit {
    color: #f00;
}
.merchant {
    color: #f7f;
}
.gambler {
    color: #ffd700;
}
.erok {
    color: #ffd68a;
}
.pigeon {
    color: #4fc292;
    font-weight: bold;
}
.muted {
    color: #666;
    text-decoration: line-through;
}
.tooExpensive {
    color: #f00;
}

.alignRight {
    text-align: right;
}
.friendly {
    color: #61C9F6;
}
.enemy {
    color: #EC4134;
}
.EXP {
    color: #6EBD70;
}
.LV {
    color: #6EBD70;
}
.BTC {
    color: #FAEB4A;
}
.HP {
    color: #F1483D;
}
.DEF {
    color: #0ff;
}
.STR {
    color: #f7603b;
}
.PRS {
    color: #A23AB4;
}
.END {
    color: #89f39a;
}
.SPD {
    color: #7ec5ee;
}
.LUK {
    color: #f5b609;
}
.LOAD {
    color: #f8d46f;
}
.action {
    color: #EC4134;
}

/**
    * Rendered scene class names
    * These are derived from the names in sceneRenderer.getEntityName()
    * which is also used to identify specific pieces of sceneArt
    *
    * The renderer adds <span> elements around each rendered character with
    * a "scene_character_" prefix. So for example, a "wall"
    */
.scene_character_darkness {
    color: #0009 !important;
    filter: blur(2px);
}

.scene_character_void {
    color: #000 !important;
}

.scene_character_iceWall {
    color: #e8e8ff !important;
    opacity: .8;
}

.scene_character_crackedFloorSlight,
.scene_character_crackedFloor,
.scene_character_crackedFloorSevere {
    color: #000;
}

.layer:not(.darkening):not(.dark):not(.lightening) > .scene_character_rubble1,
.layer:not(.darkening):not(.dark):not(.lightening) > .scene_character_rubble2 {
    display: initial;
}

.scene_character_rubble1,
.scene_character_rubble2 {
    display: none;
    background-color: transparent !important;
    mix-blend-mode: lighten;
    opacity: .2;
}

@keyframes scene_healingTileGlow {
    0% {
        color: #6CFF74;
    }
    25% {
        color: #02B60E;
    }
    50% {
        color: #02868C;
    }
    75% {
        color: #00920A;
    }
    100% {
        color: #8DD702;
    }
}

.scene_character_healingTile {
    animation-name: scene_healingTileGlow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes scene_exitGlow {
    0% {
        color: #FFF000;
    }
    25% {
        color: #FF7400;
    }
    50% {
        color: #FFF000;
    }
    75% {
        color: #CD0074;
    }
    100% {
        color: #FF0000;
    }
}

.scene_character_exit {
    animation-name: scene_exitGlow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes scene_treasureChestGlow {
    0% {
        color: #FFD700;
    }
    100% {
        color: #FFF;
    }
}

.scene_character_treasureChest {
    animation-name: scene_treasureChestGlow;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-out;
    background-color: #793311;
    color: #ffd700;
}

.scene_character_tardspireBanner {
    color: #edc949 !important;
    background: #000;
    mix-blend-mode: luminosity;
}

.scene_character_crater {
    color: #0009 !important;
    background-color: transparent !important;
}

.scene_character_bloodyCrater {
    color: #9009 !important;
    background-color: #3003 !important;
}

/* Tooltip styles */
[role="tooltip"] {
    pointer-events: none;
    min-height: 25px;
    line-height: 25px;
    font-size: 1rem;
    background-color: #000d;
    color: #fff;
    padding: 4px;
    box-shadow: 10px 10px 0 #0006;
}

.mapCellDetails {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    border: 2px solid #fff;
}

.mapCellDetails .enlargedTile {
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    border: 2px solid #fff;

    &.vampire::before {
        width: 40px;
        line-height: 42px;
    }
}

.mapCellDetails .details {
    display: flex;
    flex-direction: column;
    height: 44px;
}

.mapCellDetails .details .coordinates {
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
}

.mapCellDetails .details .name {
    font-size: 18px;
}

@keyframes letsGo {
    0%      { transform: scaleX(1) translateY(2px); }
    24.9%   { transform: scaleX(1) translateY(2px); }

    25%     { transform: scaleX(1) translateY(-2px); }
    49.9%   { transform: scaleX(1) translateY(-2px); }

    50%     { transform: scaleX(-1) translateY(2px); }
    74.9%   { transform: scaleX(-1) translateY(2px); }

    75%     { transform: scaleX(-1) translateY(-2px); }
    99.9%   { transform: scaleX(-1) translateY(-2px); }

    100%    { transform: scaleX(1) translateY(2px); }
}

.player.lets-go {
    display: inline-block;
    animation: letsGo .8s linear infinite;
}

.inventoryTooltip {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 2px solid #fff;
    max-width: 500px;
}

.inventoryTooltip .name {
    font-size: 1.2em;
}

.inventoryTooltip .details {
    display: flex;
    flex-direction: column;
}

.genericTooltip {
    padding: 0 1ch;
    max-width: 500px;
    border: 0;
    color: #000;
    background: #fff;

    &.warning {
        background: #ff0;
    }
}

dialog.modal {
    font-size: 14px;
    min-width: 400px;
    min-height: 150px;
    background: #fff;
    color: #fff;
    padding: 0;
    border: 2px solid #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;

    & > .header {
        background-color: #fff;
        color: #000;
        border: 1px solid #000;
        display: flex;
        height: 20px;

        & > .title {
            user-select: none;
            pointer-events: none;
            padding-left: 20px;
            text-align: center;
            flex-grow: 1;
            line-height: 22px;
        }

        & > button.close {
            color: #000;
            background-color: #fff;
            border-width: 1px;
            border-color: transparent;
            border-style: solid;
            border-left-color: #000;
            border-bottom: 1px solid linear-gradient(
                90deg, #000 0%, #000 10%,
                transparent 10%, transparent 100%
            );
            width: 20px;
            height: 20px;

            &:hover {
                color: #fff;
                background-color: #f00;
                border-color: #f99 #c00 #c00 #f99;
            }

            &:not(:disabled):active {
                background-position: calc(50% + 2px) calc(50% + 2px);
                &::after {
                    top: 1px;
                    left: 1px;
                }
            }

            &::after {
                content: "×";
                position: relative;
            }
        }
    }

    & > .bodyContainer {
        display: flex;
        flex-direction: column;
        background-color: #000;
        flex-grow: 1;
        padding: 1em 2ch;

        & > .body {
            flex-grow: 1;
        }

        & > .footer {
            display: flex;
            justify-content: space-between;

            & > button {
                height: 3em;
                padding: .5em 4ch;

                &:not(:disabled):active {
                    padding:
                        calc(.5em + 2px)
                        calc(4ch  - 2px)
                        calc(.5em - 2px)
                        calc(4ch  + 2px);
                }

                &.primary {
                    color: #fff;

                    &:not(:disabled):hover {
                        background-color: #090;
                        border-color: #3c3 #090 #090 #3c3;
                    }

                    &:not(:disabled):active {
                        background-color: #090;
                        border-color: #090 #3c3 #3c3 #090;
                    }
                }

                &.danger {
                    color: #fff;

                    &:not(:disabled):hover {
                        background-color: #f00;
                        border-color: #f99 #c00 #c00 #f99;
                    }

                    &:not(:disabled):active {
                        background-color: #f00;
                        border-color: #c00 #f99 #f99 #c00;
                    }
                }

                &.ghost {
                    border-color: transparent;
                }
            }
        }
    }
}

dialog.modal::backdrop {
    background-color: #000;
    opacity: 0.8;
}

.layer.enemy.damaged {
    animation: enemyDamaged 0.168s; /* VOCAP: 168ms is how long attack.mp3 is. */
}

.layer.enemy.damaged pre {
    color: red !important;
}

@keyframes enemyDamaged {
    0%   { transform: translate(0,0) skewX(0deg) rotate(0deg); }
    20%  { transform: translate(-4px,0) skewX(-6deg) rotate(-2deg); }
    40%  { transform: translate(4px,0) skewX(6deg) rotate(2deg); }
    60%  { transform: translate(-4px,0) skewX(-8deg) rotate(-3deg); }
    80%  { transform: translate(4px,0) skewX(8deg) rotate(3deg); }
    100% { transform: translate(0,0) skewX(0deg) rotate(0deg); }
}

@keyframes PlayerDamaged {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 0); }
    40% { transform: translate(6px, 0); }
    60% { transform: translate(-4px, 0); }
    80% { transform: translate(4px, 0); }
    100% { transform: translate(0, 0); }
}

#interface.shake {
    animation: PlayerDamaged 0.168s;
}

#animDamageTaken {
    position: absolute;
    width: 692px;
    height: 642px;
    padding: -4px;
    background: rgba(255,0,0,0.33) !important;
    opacity: 0;
    pointer-events: none;
    z-index: 69420;
    transition: opacity 0.168s;
}

#animDamageTaken.active {
    opacity: 1;
    animation: PlayerDamaged 0.168s;
}

.control-list span[data-control] img {
    padding: 1px;
    aspect-ratio: 1;
    vertical-align: middle;
}

.gay {
    background: linear-gradient(
        90deg,
        #E60000  0%, #E60000  8%,
        #FF8E00  8%, #FF8E00 16%,
        #FFEF00 16%, #FFEF00 25%,
        #00821B 25%, #00821B 33%,
        #004BFF 33%, #004BFF 42%,
        #780089 42%, #780089 50%,
        #E60000 50%, #E60000 58%,
        #FF8E00 58%, #FF8E00 67%,
        #FFEF00 67%, #FFEF00 75%,
        #00821B 75%, #00821B 83%,
        #004BFF 83%, #004BFF 92%,
        #780089 92%, #780089 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gayness 1s linear infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

@keyframes gayness {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

/* Wave text */
@property --waveTextPhase {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

/* Optional: declare percentage custom properties for nicer interpolation */
@property --brightnessMaxPct {
    syntax: "<percentage>";
    initial-value: 140%;
    inherits: true;
}

@property --contrastMaxPct {
    syntax: "<percentage>";
    initial-value: 120%;
    inherits: true;
}

.waveText {
    display: inline-block;

    /* Wave geometry and timing */
    --amplitudePx: 2px;
    --stepAngle: 22.5deg;
    --speedSec: 1.2s;

    /* Animation phase accumulator */
    --waveTextPhase: 0deg;

    /* Filter maxima (tweak to taste) */
    --brightnessMaxPct: 140%;
    --contrastMaxPct: 120%;

    animation: wave-text-phase var(--speedSec) linear infinite;
}

/* Each letter sits on its own phase offset via --i (we set this in markup) */
.waveText > span {
    display: inline-block;

    /* We compute the instantaneous angle and its sine once, then reuse it */
    --angleNow: calc(
        var(--waveTextPhase) + var(--i) * var(--stepAngle)
    );
    --sineNow: sin(var(--angleNow));

    /* Positive-only component: 0 when at/below baseline, 0..1 when above */
    --sinePositive: max(var(--sineNow), 0);

    /* Vertical wobble */
    transform: translateY(
        calc(var(--amplitudePx) * var(--sineNow))
    );

    /* Filter modulation:
        - At/below baseline: brightness/contrast are 100%.
        - Above baseline: ease up to the configured maxima. */
    color: oklch(
        from currentColor
        calc(l + 0.5 * var(--sinePositive))
        calc(c + 0.2 * var(--sinePositive))
        h
    );

    /* We hint the browser since we animate transform and filter */
    will-change: transform, filter;
}

@keyframes wave-text-phase {
    to {
        --waveTextPhase: 360deg;
    }
}

#vampireFocalPoint {
    position: fixed;
    z-index: 10;
    inset: 0;
    pointer-events: none;
    background: #f00;

    --center-x: 50%;
    --center-y: 50%;
    --radius-start: 240px;
    --radius-end: 16px;

    clip-path:
        circle(var(--radius-start) at var(--center-x) var(--center-y));
    opacity: 0;

    will-change: clip-path, opacity;
}

@keyframes vampireFocalPointShrinkFade {
    0% {
        clip-path: circle(var(--radius-start)
            at var(--center-x) var(--center-y));
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    65% {
        clip-path: circle(var(--radius-end)
            at var(--center-x) var(--center-y));
        opacity: 1;
    }
    100% {
        clip-path: circle(var(--radius-end)
            at var(--center-x) var(--center-y));
        opacity: 0;
    }
}

/* We add this class from JS to play the animation. */
#vampireFocalPoint.is-animating {
    animation-name: vampireFocalPointShrinkFade;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.66, 1);
    animation-fill-mode: forwards;
}

@property --hole-radius {
    syntax: '<length>';
    inherits: false;
    initial-value: 240px;
}

#vampireFocalPointDesaturationOverlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;

    backdrop-filter: saturate(0);
    background: rgba(0, 0, 0, 0.1);

    --center-x: 50%;
    --center-y: 50%;
    --radius-start: 240px;
    --radius-end: 16px;
    --hole-radius: var(--radius-start);

    -webkit-mask: radial-gradient(
        circle var(--hole-radius) at var(--center-x) var(--center-y),
        transparent 0 calc(var(--hole-radius) + 1px),
        #000 calc(var(--hole-radius) + 1px) 100%
    );
    mask: radial-gradient(
        circle var(--hole-radius) at var(--center-x) var(--center-y),
        transparent 0 calc(var(--hole-radius) + 1px),
        #000 calc(var(--hole-radius) + 1px) 100%
    );

    opacity: 0;
    will-change: opacity, mask, -webkit-mask;
}

/* Shrink the hole, then fade the overlay away. */
@keyframes vampireFocalPointDesaturationOverlayShrinkFade {
    0% {
        --hole-radius: var(--radius-start);
        opacity: 1;
    }
    70% {
        --hole-radius: var(--radius-end);
        opacity: 1;
    }
    100% {
        --hole-radius: var(--radius-end);
        opacity: 0;
    }
}

/* We add this class from JS to trigger the animation. */
#vampireFocalPointDesaturationOverlay.is-animating {
    animation-name: vampireFocalPointDesaturationOverlayShrinkFade;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.66, 1);
    animation-fill-mode: forwards;
}