#smolc-console-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* Set a min height to avoid nested flexbox overflow */
    min-height: 0;
    /* scroll-snap-align: end; */
}

#console {
    padding: 1em;
    white-space: pre;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    text-wrap: auto;
    /* text-wrap: balance; */
    background-color: black;
    scrollbar-color: var(--smolc-intense-raspberry) black;
    border: 0.2em ridge silver;
    border-radius: 0.2em;
    box-shadow: 0 0 0.3em currentColor;
    /* margin: 0.5em 0; */
    position: relative;
    box-sizing: border-box;
}

.smolc-console-screen {
    width: 55ch;
    height: 100%;
    max-height: 30lh;
    margin: 0.5em 0;
    position: relative;
    overflow-y: auto;
    border-radius: 0.2em;
}

.smolc-console-screen::after {
    position: absolute;
    top: 0;
    content: " ";
    height: 100%;
    width: 100%;
    background: radial-gradient(ellipse 500% 100% at -3% 0%, #fbf8f1 0%, #fbf8f188 4%, rgba(93, 93, 93, 0.1) 10%, transparent 25%, transparent);
    opacity: 0.3;
    left: 0;
    /* don't capture clicks / scroll */
    pointer-events: none;
}

#smolc-console-lines-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 100%;
}

#console p:not(.smolc-console-title) {
    text-indent: 2ch hanging each-line
}

#console *:not(.smolc-margin-bottom)+.smolc-margin-top {
    margin-top: 1em;
}

#console .smolc-margin-bottom {
    margin-bottom: 1em;
}

#console .smolc-console-title {
    font-family: FT88-Gothique;
    text-align: center;
    font-size: 2em;
}

#console p.smolc-console-title.smolc-margin-bottom.smolc-margin-top {
    margin: 5lh 0
}

#console p.smolc-console-list {
    list-style-type: decimal;
    padding-left: 2em;
}

#console p span {
    text-shadow: 0 0 0.15em var(--smolc-text-color);
    color: var(--smolc-text-color);
}

.smolc-spoons-hud {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    width: 8ch;
    padding: 1em;
    box-sizing: border-box;
    border-bottom: 0.2em ridge silver;
    border-left: 0.2em ridge silver;
    text-align: center;
    background-color: black;
}

.smolc-spoons-hud::before {
    display: inline-block;
    content: " ";
    background-image: url(../assets/images/ui/spoon_icon_2.png);
    filter: var(--smolc-orange-filter) drop-shadow(0 0 0.15em orange);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1lh;
    width: 1ch;
    vertical-align: bottom;
}