/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #fff;
    border: 1px solid #000;
}

::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

@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;
}

.button {
    box-sizing: border-box;
    border: 2px solid transparent;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;

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

    &:not(:disabled) {
        background-color: #000;
        &:hover  { border-color: #999 #333 #333 #999; }
        &:active { border-color: #333 #999 #999 #333; }
    }

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

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

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

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

    &:disabled {
        opacity: 0.25;
    }
}

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

.flipped {
    transform: scaleX(-1);
}

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

.ch {
    width: 1ch;
}

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

@keyframes loadingSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    border: 16px solid #fff3;
    border-top: 16px solid #61C9F6;
    border-radius: 50%;
    width: 50px;
    aspect-ratio: 1;
    animation: loadingSpin .5s linear infinite;
}

#ui {
    display: flex;
}

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

.tq-ui-cursor {
    width: 44px;
    height: 30px;
    image-rendering: pixelated;
    background-image: url(assets/interface/ui/cursor.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    pointer-events: none;
    z-index: 1000;

    /** Corners **/
    &.left-top,
    &.start-start,
    &.start-top {
        transform: rotate(45deg);
    }

    &.right-top,
    &.end-top,
    &.end-start {
        transform: rotate(135deg) scaleY(-1);
    }

    &.left-bottom,
    &.start-end,
    &.start-bottom {
        transform: rotate(-45deg);
    }

    &.right-bottom,
    &.end-bottom,
    &.end-end {
        transform: rotate(225deg) scaleY(-1);
    }

    /** Edges **/
    &.middle-top,
    &.middle-start {
        transform: rotate(90deg);
    }

    &.middle-end,
    &.middle-bottom {
        transform: rotate(-90deg);
    }

    &.left-start,
    &.left-middle,
    &.left-end,
    &.start-middle {
        transform: rotate(0);
    }

    &.right-start,
    &.right-middle,
    &.right-end,
    &.end-middle {
        transform: scaleX(-1);
    }

    &.flicker {
        animation: tqUiCursor_flicker 80ms steps(2, end) infinite;
        filter: brightness(.5);
    }
}

@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: 1000;
}

#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: 43px;
    top: 160px;
    padding: 2px 6px;
    text-align: center;
    white-space: nowrap;
    align-content: center;
    border-style: solid;
    border-width: 2px;
    border-top-width: 10px;
    border-color: #fff;
    background-color: #000;
    font-size: 12px;
    z-index: 999;

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

#apiToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    font-size: 11px;
    color: #888;

    & input[type="checkbox"] {
        display: none;
    }

    & .slider {
        position: relative;
        width: 28px;
        height: 14px;
        background: #444;
        border: 1px solid #666;
        transition: background 0.2s, border-color 0.2s;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 1px;
            width: 10px;
            height: 10px;
            background: #888;
            transform: translateY(-50%);
            transition: left 0.2s, background 0.2s;
        }
    }

    & .label {
        display: block;
        line-height: 1;
        user-select: none;
    }

    &:has(input:checked) .slider {
        background: #030;
        border-color: #0f0;

        &::after {
            left: 15px;
            background: #0f0;
        }
    }

    &:has(input:checked) .label {
        color: #0f0;
    }
}

#titleScreen #startGameBtn #preloaderStatus {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding: 4px 0;
    margin-top: 8px;
    border: none;
    background-color: transparent;
    cursor: inherit;
}

#titleScreen #startGameBtn .loadingBarContainer {
    width: 100%;
    height: 15px;
    background: #090;
    border-bottom: #ffffff 2px solid;
    display: flex;
    align-items: center;
    position: relative;
    margin: auto;
}

#titleScreen #loadingBar {
    height: 100%;
    width: 0%;
    background: #0f0;
    border-bottom: #ffffff 2px solid;
    transition: width .2s;
}

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


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

#titleScreen #credits {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 540px;
    left: 20px;
    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);
}

#spire .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 #spire .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 **/

#scene {
    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);
    }
}

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

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

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


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

@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);
    }
}

#scene.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;
}

#animTorch {
    width: 176px;
    height: 256px;
    image-rendering: pixelated;
    left: 0;
    bottom: 0;
    background-image: url(assets/fp-anim/fp-torch.gif);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-200px) translateY(100px);
    transition: transform .5s steps(12, jump-end);
    user-select: none;
    pointer-events: none;
}

#animTorch.onscreen {
    transform: translateX(0) translateY(-10px);
}

#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);
}

#animBouldingBallStrike {
    position: absolute;
    background-repeat: no-repeat;
    width: 41px;
    height: 64px;
    image-rendering: pixelated;
    right: 20px;
    top: -200px;
    background-image: url(assets/interface/ui/boulding-ball-strike.gif);
    background-size: contain;
    background-position: center;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}

#animBouldingBallStrike.onscreen {
    transform: translateY(220px);
}

#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;
    &.attack {
        cursor: url(assets/cursors/attack.cur), crosshair;
    }
}

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

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

#viewportAnimation {
    z-index: 10;
    height: auto;

    /* Fit the video within the viewport, below the "Viewport" header bar */
    position: absolute;
    top: 13px;
    left: 0;
}

@keyframes highlightColor {
  0%   { background-color: #00f; }
  20%  { background-color: #90f; }
  40%  { background-color: #00f; }
  60%  { background-color: #99f; }
  80%  { background-color: #00f; }
  100% { background-color: #000; }
}

.highlight {
    background-color: #00f;
    animation: highlightColor 9s infinite alternate linear;
}

@keyframes targetHighlightColor {
  0%   { background-color: #f00; }
  20%  { background-color: #f09; }
  40%  { background-color: #f00; }
  60%  { background-color: #f99; }
  80%  { background-color: #f00; }
  100% { background-color: #000; }
}

.target-highlight {
    background-color: #f00;
    animation: targetHighlightColor 9s infinite alternate linear;
}

/** 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 {
    display: flex;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

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

#menu .option .cursor {
    width: 2ch;
    flex-grow: 0;
}

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

#menu .option .text {
    flex-grow: 1;
}

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

#menu .escapeMessage {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: end;
}

#menu.blurred {
    color: #ccc;

    & .option.selected {
        background-color: #224;
    }
}

.description {
    min-height: 3em;
}

.stats-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 4ch;
}

.stats-container {
    border: 1px solid #fff;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    & table {
        border-collapse: collapse;
        width: 100%;

        & th,
        & td {
            border: 1px solid #fff;
            border-bottom: none;
            padding: 0 1ch;
            min-width: 4ch;

            &:last-child {
                border-right: none;
            }

            &:first-child {
                border-left: none;
            }
        }

        & td.value {
            text-align: right;
        }

        & th:first-child {
            border: none;
        }
    }
}

/** 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 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;
    text-indent: 2ch hanging;

    & ul {
        margin: 0;
        padding-left: 3ch;
    }

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

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

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

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

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

#minimap {
    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,
.mapCellDetails .crackedFloorSlight,
.mapCellDetails .crackedFloor,
.mapCellDetails .crackedFloorSevere {
    color: #f00;
}

@keyframes sigilGlow {
      0% { color: #FF9E4B; }
     20% { color: #D90077; }
     40% { color: #C00500; }
     60% { color: #FF7600; }
     80% { color: #DF4298; }
    100% { color: #FF0700; }
}

.sigil {
    animation: sigilGlow 8s ease-in-out infinite;
    color: #FF0700;
}

#minimap .vampire,
.mapCellDetails .enlargedCell.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);
    }
}

#minimap .bouldingBall,
.mapCellDetails .enlargedCell.bouldingBall {
    position: relative;

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

.mapCellDetails .enlargedCell.bouldingBall::before {
    top: 0.4ch !important;
}

#minimap .bouldingBall {
    width: 1ch;
}

@keyframes bouldingBallRoll {
    0%, 25% {
        content: "⚉";
        transform: rotate(45deg) scaleX(1) scaleY(1);
    }

    25.01%, 50% {
        content: "⚈";
        transform: rotate(90deg) scaleX(1) scaleY(-1);
    }

    50.01%, 75% {
        content: "●";
        transform: rotate(135deg) scaleX(1) scaleY(1);
    }

    75.01%, 100% {
        content: "⚈";
        transform: rotate(90deg) scaleX(-1) scaleY(-1);
    }
}

/* Portrait sprite-sheet animations */
#portraitContainer {
    --portrait-frame-height: 156px;

    height: 184px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#portraitHeader {
    text-transform: uppercase;
}

#portraitImage {
    display: block;
    height: 156px;
    margin: 6px auto auto;
    image-rendering: pixelated;

    &.flipped {
        transform: scaleX(-1);
    }
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

.offscreen-pixel {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#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    rightSidebar"
        "stats      viewport    rightSidebar"
        "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;
}

.minimap-footer {
    display: flex;
    flex-direction: row;
    gap: 1ch;
    background-color: #a30000;
    color: #ffffff;
    margin: 1px;
    padding: 0 4px;
    justify-content: center;
}

#killCounter::before {
    content: "☠";
    margin-right: 0.5ch;
    font-size: 16px;
    vertical-align: top;
    line-height: 0.65;
}


#battleLog      { grid-area: battleLog; }
#topLeft        { grid-area: topLeft; }
#stats          { grid-area: stats; }
#controls       { grid-area: controls; }
#party          { grid-area: party; overflow: hidden; }
#rightSidebar   { grid-area: rightSidebar; }
#playerInput    { grid-area: playerInput; }
#viewport       { grid-area: viewport; }
#bottomBar {
    grid-area: bottomBar;
    display: flex;
    flex-direction: column;
}

#topLeft {
    overflow: hidden;
}

@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;

    &: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;

    &.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;
}

#playerParty,
#enemyParty {
    height: 153px;
    transition: transform 300ms ease;
}

#playerParty:not(.active),
#enemyParty.active {
    transform: translateY(-153px);
}

.party-members {
    display: flex;
    flex-direction: column;
    padding: 4px;
    margin-top: 2px;
}

#enemyParty .party-members {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2ch;
    padding: 2px;
    cursor: pointer;

    & .party-member.button {
        & > * {
            position: relative;
        }

        &:not(:disabled):active {
            & > * {
                top: 2px;
                left: 2px;
            }
        }
    }
}

.party-members:empty::after {
    display: block;
    margin-top: 50px;
    text-align: center;
    color: #fff6;
    font-style: italic;
}

.party-members > [data-party-member-id] {
    clip-path: rect(0 100% 100% 0);
    height: 35px;
    margin-bottom: 8px;
    overflow: hidden;

    &.sweepItUp {
        transition:
            background-color .5s linear,
            clip-path .5s linear,
            height .5s linear .5s,
            margin-bottom .5s linear .5s;
        background-color: #900;
        clip-path: rect(0 0% 100% 0);
        height: 0;
        margin-bottom: 0;
    }
}

/* Not aesthetic, but visible. Will change later */
.ui-active {
    background-color: orange !important;
    border-color: darkorange !important;
    color: #000;
}

#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;
    line-height: 1.9ch;
}

#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="wait"] {
    background-image: url(assets/interface/ui/wait.png);
    grid-column: span 3;
    image-rendering: initial;
    position: relative;
    top: 13px;
}

#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);
}

.portrait {
    aspect-ratio: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #000;
    transition: transform 1s ease-in-out;
    &::after {
        content: "";
        display: block;
        aspect-ratio: 1;
        background-color: var(--tint-color, #fff);
        mix-blend-mode: multiply;
    }

    background-image: url(assets/portraits/placeholder.png);

    &.player {
        background-image: url(assets/portraits/player.png);
    }
    &.snailSentinel {
        background-image: url(assets/portraits/snailSentinel.png);
    }
    &.stupidDog {
        background-image: url(assets/portraits/stupidDog.png);
    }
    &.keeperOfTheToiletBowl {
        background-image: url(assets/portraits/keeperOfTheToiletBowl.png);
    }
    &.mysteriousScooter {
        background-image: url(assets/portraits/mysteriousScooter.png);
    }
    &.badassFlamingSkeleton {
        background-image: url(assets/portraits/badassFlamingSkeleton.png);
    }
    &.wangRat {
        background-image: url(assets/portraits/wangRat.png);
    }
    &.fridgeOfForgottenLeftovers {
        background-image: url(assets/portraits/fridgeOfForgottenLeftovers.png);
    }
    &.lughead {
        background-image: url(assets/portraits/lughead.png);
    }
    &.pissedOffPoultry {
        background-image: url(assets/portraits/pissedOffPoultry.png);
    }
    &.krampusElf {
        background-image: url(assets/portraits/krampusElf.png);
    }
    &.mimic {
        background-image: url(assets/portraits/mimic.png);
    }
    &.vampire {
        background-image: url(assets/portraits/vampire.png);
    }
}

.portrait-container {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid transparent;
    cursor: help;

    &.clickable {
        cursor: pointer;

        &:hover {
            border-color: #ffd700;
        }
    }

    & .portrait {
        width: 36px;
        height: 36px;
    }

    & > .foreground {
        display: none;
        pointer-events: none;
        width: 50px;
        height: 46.8px;
        position: absolute;
        background-position: center;
        background-repeat: no-repeat;
    }

    &.dead {
        & .portrait {
            filter: grayscale(1);
        }

        & .foreground {
            display: initial;
            background-image: url(assets/portraits/overlays/x.png);
        }
    }

    & .turn-number {
        position: absolute;
        top: 4px;
        left: 4px;
    }
}


#rightSidebar {
    overflow-y: hidden;
}

#battleQueueSection {
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    height: 250px;
    overflow: hidden;
}

#battleQueueSection,
#battleQueueSection + #inventory {
    transition: transform .1s ease-in;
}

#battleQueueSection:not(.open),
#battleQueueSection:not(.open) + #inventory {
    transform: translateY(-250px);
}

#battleQueueSection.open,
#battleQueueSection.open + #inventory {
    transform: translateY(0);
}

#battleQueueSection #battleQueue {
    filter: brightness(0);
    transition: filter .4s ease-in;
}

#battleQueueSection.open #battleQueue {
    filter: brightness(1);
}

#battleQueue {
    height: 234px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-direction: column;

    & > div {
        --x: 0;
        --y: 0;

        position: absolute;

        transform: translate(var(--x), var(--y));
        transition: transform 300ms ease;

        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: pixelated;
    /*
        width: 36px;
        height: 36px;
    */

        width: 50px;
        height: 46.8px;





        /*


        --translate-x: 0;
        --scroll-duration: 5s;
        --steps: 1;

        width: fit-content;
        height: 23.4px;
        padding: 0 1ch;
        line-height: 23.4px;
        transform: translateX(0);
        transition: transform var(--scroll-duration);
        transition-timing-function: steps(var(--steps));

        &:hover {
            transform: translateX(var(--translate-x ));
        }
        */
    }
}

.battle-queue-modal {
    display: flex;
    flex-direction: row;
    border: 4px double #fff9;
    min-width: 300px;

    &.friendly {
        color: #fff;
        background:
            linear-gradient(#000, #000) padding-box,
            linear-gradient(#00f, #00f) border-box;
    }

    &.enemy {
        color: #fff;
        background:
            linear-gradient(#000, #000) padding-box,
            linear-gradient(#f00, #f00) border-box;
    }

    & .column {
        display: flex;
        flex-direction: column;

        &.left .portrait {
            width: 72px;
            height: 72px;
            mask-size: contain;
        }

        &.right {
            gap: 1em;
            padding: 0 1ch;
            flex-grow: 1;
        }
    }

    & .actor {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        & .top {
            display: flex;
            justify-content: space-between;
            gap: 1ch;
        }

        & .name {
            font-size: 1.5em;
        }

        & .stat {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1ch;

            & progress-bar {
                flex-grow: 1;
            }
        }
    }
}

#inventorySidebarCloseButton {
    width: 100%;

    background-color: #900;
    border-color: #c00 #600 #600 #c00;

    &: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;

    &[name="weapons"] {
        & > [data-id="goldenWang"]              { order:  0; }
        & > [data-id="magicPencil"]             { order:  1; }
        & > [data-id="cathodeRayTubeMonitor"]   { order:  2; }
        & > [data-id="danceClub"]               { order:  3; }
        & > [data-id="bludgeoningMace"]         { order:  4; }
        & > [data-id="atlatlSpear"]             { order:  5; }
        & > [data-id="nunchucks"]               { order:  6; }
        & > [data-id="wiffleBallBat"]           { order:  7; }
        & > [data-id="pointyStick"]             { order:  8; }
        & > [data-id="fingerNail"]              { order:  9; }
    }

    &[name="armor"] {
        & > [data-id="nokiaMail"]               { order:  0; }
        & > [data-id="blackPlateArmor"]         { order:  1; }
        & > [data-id="milaneseArmor"]           { order:  2; }
        & > [data-id="leatherArmor"]            { order:  3; }
        & > [data-id="barrelWithSuspenders"]    { order:  4; }
        & > [data-id="graphicTee"]              { order:  5; }
        & > [data-id="pectoralMass"]            { order:  6; }
    }

    &[name="rings"] {
        & > [data-id="ringOfSexyUnderwear"]     { order:  0; }
        & > [data-id="ringOfFrenchAccent"]      { order:  1; }
        & > [data-id="ringValentines"]          { order:  2; }
        & > [data-id="ringBloodstream"]         { order:  3; }
        & > [data-id="ringOfHardening"]         { order:  4; }
        & > [data-id="ringPectoralPiercing"]    { order:  5; }
        & > [data-id="ringPinkyToe"]            { order:  6; }
        & > [data-id="ringCrack"]               { order:  7; }
        & > [data-id="ringGamble"]              { order:  8; }
        & > [data-id="ringEscobar"]             { order:  9; }
        & > [data-id="ringOfSightliness"]       { order: 10; }
        & > [data-id="ringOfStinky"]            { order: 11; }
        & > [data-id="ringOfAmplifiedAudio"]    { order: 12; }
    }

    & button.unequippable {
        background-color: #900;
        border-color: #c00 #600 #600 #c00;
    }
}

#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);
    }
    &.items-phialOfSeed .icon {
        background-image: url(assets/interface/items/seed.png);
    }
    &.items-lodeGun .icon {
        background-image: url(assets/interface/items/lode-gun.png);
    }
    &.items-ballzooka .icon {
        background-image: url(assets/interface/items/ballzooka.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;
}

#inventory .empty-message {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    color: #aaa;
    text-wrap: auto;
    flex-direction: column;
    text-align: center;
    font-size: 1.5em;
    padding: 1ch;

    & .left-pad {
        padding-left: 0.5ch;
    }

    & .large {
        font-size: 1.5em;
    }
}

@keyframes tqUi_flyAway {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

.tq-ui-fly {
    position: absolute;
    top: 440px;
    left: 620px;
    pointer-events: none;

    width: 6px;
    height: 6px;
    image-rendering: pixelated;
    background-image: url(assets/interface/ui/fly.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    offset-path: path(
        "M 0.20886855,-0.06675415 C 40.456208,-97.118023 -54.251021,-168.98913 \
        -29.125009,-221.88764 9.1398253,-302.4477 3.0065923,-311.92452 \
        -12.332906,-358.86617 -26.968823,-403.65474 -25.257239,-544.86478 \
        55.528491,-642.52549"
    );
    offset-rotate: auto;
    animation: tqUi_flyAway 2s ease-in-out forwards;
    transform: rotate(45deg) scale(2);
}

.party-member {
    gap: 1ch;
    display: flex;
    flex-direction: row;

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

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

    &:not(.ui-active) .name.clickable {
        color: #fff;
        cursor: pointer;
        text-decoration: underline;

        &:hover {
            background-color: #126d00;
        }
    }

    &.ui-active .info button {
        visibility: hidden;
    }

    & > .portrait {
        width: 35px;
        height: 35px;
    }

    &.dead {
        filter: grayscale(1);

        & > .portrait {
            background-image: url(assets/portraits/overlays/x.png);
            &::after {
                display: none;
            }
        }
    }

    & > .container {
        flex-grow: 1;
        gap: 2px;
        display: flex;
        flex-direction: column;
    }
}

.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, #animPigeonKill {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
}

.player {
    color: #2aff00;
}

@keyframes minimap_healingTileGlow {
    0% {
        color: #6cff74;
    }
    25% {
        color: #42f64e;
    }
    50% {
        color: #42c6cc;
    }
    75% {
        color: #40d24a;
    }
    100% {
        color: #cdff42;
    }
}

.healingTile {
    color: #6cff74;
    animation: minimap_healingTileGlow 5s linear alternate infinite;
}
.treasureChest,
.destroyedTreasureChest {
    color: #f19b32;
}
.wall,
.gloryWall,
.noboWall {
    color: #e9ff00;
}
.floor {
    color: #fff;
}
.unexplored {
    color: #545454;
}
.exit,
.pit {
    color: #f00;
}

@keyframes stunned {
      0%    { color: #f78080; }
     33%    { color: #e687bd; }
     67%    { color: #ffd6a0; }
    100%    { color: #e687bd; }
}

.stunned {
    animation: stunned 1s linear alternate infinite;
}

.merchant {
    color: #f7f;
}
.gambler, .gold {
    color: #ffd700;
}
.erok {
    color: #ffd68a;
}
.pigeon {
    color: #4fc292;
    font-weight: bold;
}
.muted {
    color: #666;
    text-decoration: line-through;
}
.good {
    color: #0f0;
}
.bad,
.tooExpensive {
    color: #f00;
}
.run {
    color: #00f;
}
.gray {
    color: #888;
}

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

.crater {
    color: #555;
}

.bloodyCrater {
    color: #900;
}

/* 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 .enlargedCell {
    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 {
    margin-top: 8px;
    display: flex;
    flex-direction: column;

    & .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2ch;
    }

    & .coordinates {
        font-style: italic;
    }

    & .name {
        font-size: 18px;
    }

    & .party {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 40ch;
        padding: 0 3ch;
    }
}

@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: 540px;
}

.inventoryTooltip .header {
    display: flex;
    justify-content: space-between;
    gap: 1ch;
    vertical-align: top;
}

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

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

.inventoryTooltip .info {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-top: 1em;
}

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

    &.good {
        background: #090;
        color: #fff;
    }

    &.bad {
        background: #f00;
        color: #fff;
    }

    &.warning {
        background: #ff0;
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: 999;
    pointer-events: auto;
}

dialog.modal {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 1000;

    user-select: none;
    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:not(:disabled) {
                    color: #fff;

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

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

                &.danger:not(:disabled) {
                    color: #fff;

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

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

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

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

dialog.modal .body .tardboard {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1ch;
    margin-bottom: 2em;

    & > * {
        margin: 0 auto;

        &:last-child {
            margin-bottom: 2ch;
        }
    }
}

@keyframes rumble {
     0% { transform: translate(0); }
     1% { transform: translate(0); }
    10% { transform: translate(3px, 1px); }
    20% { transform: translate(-1px, 3px); }
    30% { transform: translate(3px, -1px); }
    20% { transform: translate(-1px, -3px); }
    50% { transform: translate(3px, 1px); }
    60% { transform: translate(-1px, 3px); }
    70% { transform: translate(3px, -1px); }
    80% { transform: translate(1px, 3px); }
    90% { transform: translate(-1px, -1px); }
    100%{ transform: translate(0);} }

.rumble {
    animation:
        rumble 1ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s 800
        normal forwards;
}

@keyframes damage-rumble {
     0% { background-color: #ffff; transform: translate(0); }
     1% { background-color: #900f; transform: translate(0); }
    10% { background-color: #900d; transform: translate(-2px, -2px); }
    20% { background-color: #900b; transform: translate(2px, -2px); }
    30% { background-color: #9009; transform: translate(-2px, 2px); }
    40% { background-color: #9007; transform: translate(2px, 2px); }
    50% { background-color: #9005; transform: translate(-2px, -2px); }
    60% { background-color: #9004; transform: translate(2px, -2px); }
    70% { background-color: #9003; transform: translate(-2px, 2px); }
    80% { background-color: #9002; transform: translate(-2px, -2px); }
    90% { background-color: #9001; transform: translate(2px, -2px); }
    100%{ background-color: #9000; transform: translate(0);} }

.damage-rumble {
    animation:
        damage-rumble 1ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s 800
        normal forwards;
}

.layer.enemy .damaged {
    --duration: 0.168s;
    animation: enemyDamaged var(--duration);

    & .art {
        animation: enemyDamagedColor var(--duration);
    }
}

@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 enemyDamagedColor {
    from { color: #f00; }
    to { color: unset; }
}

@keyframes enemyCrtFlashed {
    0%, 9.999% {
        filter: invert(1);
    }

    10%, 19.999% {
        filter: invert(0);
    }

    20%, 29.999% {
        filter: invert(1);
    }

    30%, 39.999% {
        filter: invert(0);
    }

    40%, 49.999% {
        filter: invert(1);
    }

    50%, 59.999% {
        filter: invert(0);
    }

    60%, 69.999% {
        filter: invert(1);
    }

    70%, 79.999% {
        filter: invert(0);
    }

    80%, 89.999% {
        filter: invert(1);
    }

    90%, 100% {
        filter: invert(0);
    }
}

.layer.enemy .crt-flashed {
    --duration: 0.5s;
    animation: enemyCrtFlashed var(--duration);
}

.layer.enemy .poked {
    --duration: 0.6s;
    animation: enemyPoked var(--duration) linear;
}

.layer.enemy .poked .art {
    animation: enemyPokedColor var(--duration) linear;
}

@keyframes enemyPoked {
    0% {
        transform: matrix3d(
            1, 0, 0, 0.001,
            0, 1, 0, 0.0005,
            0, 0, 1, 0,
            1, 1, 0, 1
        );
    }

    50% {
        transform: matrix3d(
            0.7, 0.2, 0, 0.003,
            0, 1, 0, 0.001,
            0, 0, 1, 0,
            1, 1, 0, 0.9
        );
    }

    20%, 49.999%,
    70%, 100% {
        transform: matrix3d(
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            1, 1, 0, 1
        );
    }
}

@keyframes enemyPokedColor {
    0%, 50% {
        color: #f00;
    }

    10%,
    49.999%, 60%,
    100% {
        color: #f78080;
    }
}

@keyframes enemyDanceClubHits {
    /* Riser */
    0% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(1) hue-rotate(0);
    }

    14.15% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(5) brightness(1) hue-rotate(0);
    }

    /* Kick, slide */
    18.78% {
        transform: translateX(-90px) skewX(20deg) scale(1, 1);
        filter: contrast(1) brightness(5) hue-rotate(2000deg);
    }

    /* Pre-Bass, end slide */
    33.85% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(3) hue-rotate(1800deg);
    }

    /* Bass */
    33.86% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(1) hue-rotate(1340.2deg);
    }

    /* Clap, slide */
    48% {
        transform: translateX(90px) skewX(-20deg) scale(1, 1);
        filter: contrast(1) brightness(5) hue-rotate(1340deg);
    }

    62.45% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(3) hue-rotate(1140deg);
    }

    62.46% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(1) hue-rotate(660.2deg);
    }

    70% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(5) hue-rotate(660deg);
    }

    77.515% {
        transform: translateX(0) skewX(0) scale(-1, 1);
        filter: contrast(1) brightness(3) hue-rotate(460deg);
    }

    92.49% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(1) hue-rotate(260deg);
    }

    100% {
        transform: translateX(0) skewX(0) scale(1, 1);
        filter: contrast(1) brightness(1) hue-rotate(0);
    }
}

.layer.enemy .dance-club-hits {
    --duration: 1.332s;
    animation: enemyDanceClubHits var(--duration);
}

@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;
}

.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;

    & > * {
        min-width: 1ch;
    }
}

/* 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;
    mix-blend-mode: darken;

    --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;
}

/* Party Member Menu Styles */
.party-member-info {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.party-divider {
    border-top: 2px solid #fff;
    display: flex;
    padding-bottom: 8px;
}

.edit-name-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    background-image: url(assets/interface/ui/edit.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    min-width: auto;
    border: 2px solid;
    border-color: #e3e3e3 #979797 #979797 #e3e3e3;
    image-rendering: initial;
}

.edit-name-btn:not(:disabled):hover {
    background-color: #00f;
    border-color: #99f #00c #00c #99f;
}

.edit-name-btn:not(:disabled):active {
    background-position: calc(50% + 2px) calc(50% + 2px);
}

.name-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.save-name-btn,
.cancel-name-btn {
    padding: 2px 6px;
    font-size: 0.8em;
    min-width: auto;
}

.rename-input {
    background: #000000;
    border: 1px solid #ffffff;
    color: #fff;
}

.rename-input:focus {
    outline: none;
    border-color: #ffffff;
}

.save-name-btn {
    background-color: #008104;
}

.cancel-name-btn {
    background-color: #000000;
}

.party-member-persuasion {
    margin-bottom: 1rem;
}

.party-member-persuasion .persuasion-text {
    margin-top: 0.5rem;
    margin-left: 0.7rem;
    padding-left: 0.4rem;
    color: #A23AB4;
    font-style: italic;
    border-left: 2px solid #A23AB4;
    background-color: #a23ab421;
}

.party-member-art {
    font-size: 2px;
    white-space: pre;
    flex-shrink: 0;
    line-height: 1;
    margin-bottom: auto;
}

.party-member-main-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ascii-art-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.party-member-art {
    font-size: 2px;
    white-space: pre;
}

.party-member-info {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
}

.party-member-portrait-border {
    border: outset 5px #4b2e0242;
    background-image: url(assets/interface/ui/tile2.png);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 170px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

button[data-feed-button] {
    width: 120px;
    height: 30px;
    padding: 2px;
    background-image: url(assets/interface/items/seed.png);
    background-size: 40px 40px;
    background-position: left center;
    background-repeat: no-repeat;
    min-width: 40px;
    min-height: 40px;
    border: 2px solid;
    border-color: #e3e3e3 #979797 #979797 #e3e3e3;
    image-rendering: initial;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    font-size: 10px;
    color: #fff !important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 27px;
    padding-top: 23px;
    align-self: flex-start;
}

button[data-feed-button]::after {
    content: "HEAL";
    position: absolute;
    top: 30%;
    left: 50%;
    font-size: 14px;
    color: #fff;
    pointer-events: none;
}

button[data-feed-button]:not(:disabled):hover {
    background-color: #0a0;
    border-color: #9f9 #0c0 #0c0 #9f9;
}

button[data-feed-button]:not(:disabled):hover::after {
    color: #fff;
}

button[data-feed-button]:not(:disabled):active {
    background-position: calc(left + 2px) calc(center + 2px);
}

button[data-feed-button]:not(:disabled):active::after {
    top: calc(30% + 2px);
    left: calc(50% + 2px);
}

button[data-feed-button]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #000000;
    color: #666;
}

button[data-feed-button]:disabled::after {
    color: #666;
}