#hud {
    --smolc-character-frame-height: 14lh;
    --smolc-character-frame-width: 19ch;
    font-family: FT88-School;
    margin-top: auto;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--smolc-character-frame-width) * 5 + 2ch * 5);
    height: calc(var(--smolc-character-frame-height) + 0.5lh);
    position: relative;
    flex-shrink: 0;
    /* scroll-snap-align: end; */
}

#hud .smolc-character-frame {
    /* mask: <source> <position x> <position y> / <pattern size x> <pattern size y> <repeat-mode>*/
    --smolc-character-frame-mask: url(../assets/images/decorations/ripped_side_2.png) -16px center / 32px 57px repeat-y,
        radial-gradient(circle at 0.5em 6em, transparent, transparent 0.3em, white 0.3em) top / calc(100% - 32px) 8em repeat-y,
        url(../assets/images/decorations/ripped_side.png) calc(100% + 13px) center / 32px 59px repeat-y;
    --smolc-text-color: black;
    --smolc-character-frame-nth-ratio: 1;
    color: var(--smolc-text-color);
    padding: 1em;
    position: absolute;
    bottom: 0;
    width: var(--smolc-character-frame-width);
    height: var(--smolc-character-frame-height);
    text-shadow: none;
    filter: drop-shadow(0.2em 0.2em 0.2em black);
    box-sizing: border-box;
    transform-origin: center bottom;
    /* --smolc-character-frame-nth-ratio goes from 0 to 1. */
    /* therefore left value goes from 0 to 100% - frameWidth */
    left: calc((100% - var(--smolc-character-frame-width)) * (1 - var(--smolc-character-frame-nth-ratio)));
    display: flex;
    flex-direction: column;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    transition: 0.2s transform ease-out;
    transform-origin: calc(100% * (1 - var(--smolc-character-frame-nth-ratio))) 100%;
}

#hud .smolc-character-frame:hover,
#hud .smolc-character-frame:active {
    /* transform: translateY(calc(-1 * var(--smolc-character-frame-height) + 3lh)); */
    transform: scale(1.2);
    cursor: pointer;
    z-index: 5;
}

#hud .smolc-character-frame::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--smolc-paper-color);
    background-image: linear-gradient(90deg, transparent 71px, #d4abab 71px, #dd6b6b 73px, transparent 73px), linear-gradient(rgba(170, 164, 206, 0.6) .1em, transparent .1em);
    background-size: 100% 1lh;
    background-position-y: -0.2em;
    mask: var(--smolc-character-frame-mask);
}

#hud .smolc-character-frame>*:not(.smolc-character-frame-portrait) {
    z-index: 2;
    position: relative;
}

/* #hud .smolc-character-frame>div:not(.smolc-character-frame-portrait) {
    display: flex;
    justify-content: space-between;
} */

#hud .smolc-character-frame-name {
    /* font-family: FT88-Gothique; */
    color: var(--smolc-text-color);
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
    display: block;
}

.smolc-tape {
    position: absolute;
    bottom: -0.1em;
    left: 0;
    width: 100%;
    height: calc(100% + 0.2em);
    opacity: 0.9;
    padding: 0.2em;
    filter: drop-shadow(0.5px 0.5px 0.5px silver);
    z-index: -1;
}

#hud .smolc-character-frame:nth-child(3n) .smolc-tape {
    transform: rotate(1deg);
}

#hud .smolc-character-frame:nth-child(3n+ 1) .smolc-tape {
    transform: rotate(-0.8deg);
}

#hud .smolc-character-frame:nth-child(3n + 2) .smolc-tape {
    transform: rotate(0.4deg);
}

.smolc-tape::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f9f795;
    mask: url(../assets/images/decorations/ripped_side_2.png) left center / 32px 100% repeat-y,
        linear-gradient(white, white) center / calc(100% - 64px) 100% no-repeat,
        url(../assets/images/decorations/ripped_side.png) right center / 32px 100% repeat-y;
}

#hud .smolc-character-frame-portrait {
    background-image: url(../assets/images/portraits/default_portrait.png);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    filter: var(--smolc-red-ink-filter);
    mask: var(--smolc-character-frame-mask), linear-gradient(white, transparent) top center / 100% 100% no-repeat;
}

#hud .smolc-ui-bars-wrapper {
    margin-top: auto;
}

#hud .smolc-gauge-line,
#hud .smolc-mind-points-line {
    display: flex;
    justify-content: space-between;
    --text-shadow-blur: 0.05em;
    text-shadow:
        -0.05em -0.05em var(--text-shadow-blur) var(--smolc-paper-color),
        0.05em -0.05em var(--text-shadow-blur) var(--smolc-paper-color),
        -0.05em 0.05em var(--text-shadow-blur) var(--smolc-paper-color),
        0.05em 0.05em var(--text-shadow-blur) var(--smolc-paper-color);
    position: relative;
    z-index: 1;
}

#hud .smolc-mind-points-bar,
#hud .smolc-gauge-bar {
    --smolc-y-offset: 0.15em;
    height: 1lh;
    width: 100%;
    background-image: url(../assets/images/ui/bar_frame.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: calc(-1 * var(--smolc-y-offset));
    margin-bottom: var(--smolc-y-offset);
    transform: scaleX(-1);
}

#hud .smolc-mind-points-bar {
    --smolc-remaining-mind-points: 0.6;
}

#hud .smolc-gauge-bar {
    --smolc-remaining-gauge: 1;
}

#hud .smolc-mind-points-bar::before,
#hud .smolc-gauge-bar::before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(../assets/images/ui/bar_filling.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#hud .smolc-mind-points-bar::before {
    /* mask: <source> <position x> <position y> / <pattern size x> <pattern size y> <repeat-mode> */
    mask: linear-gradient(to right, white, white) 0.2em 0 / calc(100% * var(--smolc-remaining-mind-points)) 100% no-repeat;
    filter: hue-rotate(180deg) brightness(1.3);
}

#hud .smolc-gauge-bar::before {
    mask: linear-gradient(to right, white, white) 0.2em 0 / calc(100% * var(--smolc-remaining-gauge)) 100% no-repeat;
    filter: hue-rotate(240deg) brightness(0.8);
}