@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700');

:root {
    --percent: 0;
}

* {
    box-sizing: border-box;
    font-family: 'Inconsolata', monospace;
    margin: 0;
    font-size: large;
    user-select: none;
    transform-origin: center center;
}

.retro * {
    text-shadow: calc(-1 * var(--anaglyph-depth)) 0 0 #ff000080,
    var(--anaglyph-depth) 0 0 #00ffff80;
}

.retro .red {
    text-shadow: calc(-1 * var(--anaglyph-depth)) 0 0 #ff000040,
    var(--anaglyph-depth) 0 0 #00ffff80;
}

.retro .blue, .hacker-theme.retro .gentle, .hacker-theme.retro .messages::after {
    text-shadow: calc(-1 * var(--anaglyph-depth)) 0 0 #ff000080,
    var(--anaglyph-depth) 0 0 #00ffff40;
}

body {
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    border: 0;
    padding: 0;
    background: #000;
    color: #fff;
}

body, .center, .center-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.center-row {
    flex-direction: row;
}

body:has(> .retro)::before, body:has(> .retro)::after {
    content: '';
}

body::before, body::after {
    --light-scanline: #ffffff0a;
    --dark-scanline: #00000008;
    --scanline-height: 4px;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100dvw;
    height: 100dvh;
    z-index: 99999;
}

body::before {
    background: repeating-linear-gradient(to bottom,
        var(--light-scanline) 0,
        var(--light-scanline) var(--scanline-height),
        var(--dark-scanline) var(--scanline-height),
        var(--dark-scanline) calc(2 * var(--scanline-height))
    );
}

body::after {
    background: repeating-linear-gradient(1deg,
        var(--light-scanline) 0,
        var(--light-scanline) var(--scanline-height),
        #0000 var(--scanline-height),
        #0000 100dvh
    );
    animation: scanline-scroll 10s linear infinite;
}

@keyframes scanline-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100dvh;
    }
}

#viewport {
    --aspect-ratio: calc(16 / 9);
    height: min(100dvh, calc(100dvw / var(--aspect-ratio)));
    width: min(100dvw, calc(100dvh * var(--aspect-ratio)));
    --anaglyph-depth: 1px;
}

#footer {
    background: #00002244;
    backdrop-filter: blur(2px);
    transition: background 0.2s ease-in-out;
    height: calc(100% / 16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1ch;
    padding: 1ch 0 1ch 1ch;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    bottom: 0;
}

#footer-entries {
    display: flex;
    align-items: center;
    gap: 1ch;
    overflow-x: auto;
}

#footer-details {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}

#footer:hover {
    background: #00002266;
}

#arena {
    height: 100%;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

#icons {
    width: calc(100% - 2ch);
    overflow: visible;
    height: calc(100% - (200% / 9 - 100% / 16));
    position: relative;
    margin: 1ch;
}

#desktop-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    container-type: size;
}

#login, #desktop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#login {
    background: #000;
    transition: opacity 0.2s ease-in-out;
    z-index: 2;
}

.gap {
    gap: 1ch;
}

.icon, .large-icon {
    background: #0002;
}

.icon svg, .large-icon svg {
    width: 100%;
    height: 100%;
}

.retro svg, .retro .anaglyph-drop-shadow {
    filter: drop-shadow(calc(-1 * var(--anaglyph-depth)) 0 0 #ff000080)
    drop-shadow(var(--anaglyph-depth) 0 0 #00ffff80);
}

.large-icon {
    width: 6ch;
    height: 6ch;
    padding: 1ch;
    border-radius: 50%;
}

.ellipsis::after {
    content: '';
    animation: ellipsis 0.6s linear infinite;
}

.ellipsis-slow::after {
    content: '';
    animation: ellipsis 2s linear 1 forwards;
}

@keyframes ellipsis {
    0% {content: ''}
    33% {content: '.'}
    67% {content: '..'}
    100% {content: '..'}
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

.pointer:not(.hidden) {
    cursor: pointer;
}

input {
    outline: none;
    margin: 0;
    border: 0;
}

input[readonly] {
    pointer-events: none;
}

#password[type=text]:not(:placeholder-shown) {
    font-style: italic;
    color: gray;
}

#desktop {
    background:
            linear-gradient(to bottom,
            #170bbd 0%, #861bbf 22%, #bf1f84 40%, #cc4539 60%,
            #eb9350 70%,
            #d4493f 76.5%, #c7228a 85%, #861bbf 90%, #170bbd 100%);
    z-index: 1;
}

#desktop::after {
    position: absolute;
    content: '';
    width: 100%;
    bottom: 0;
    height: 30%;
    --ocean: rgba(171, 75, 131, 0.63);
    --inner: #E176B370;
    background: linear-gradient(to right,
    var(--ocean) 0%, var(--inner) 35%,
    rgba(255, 163, 102, 0.69) 50%,
    var(--inner) 65%, var(--ocean) 100%);
    z-index: 0;
}

#desktop * {
    z-index: 1;
}

#desktop::before {
    position: absolute;
    content: '';
    border-radius: 50%;
    --sun: rgba(245, 165, 108, 0.78); /* :) */
    background: radial-gradient(closest-side, var(--sun), var(--sun) 20%, transparent);
    aspect-ratio: 1 / 1;
    left: 50%;
    width: 20%;
    transform: translateX(-50%) translateY(50%);
    bottom: 30%;
}

@keyframes introshake {
    0% {transform: rotate(0deg) scale(110%);}
    20% {transform: rotate(-10deg);}
    55% {transform: rotate(7deg);}
    80% {transform: rotate(-3deg);}
    95% {transform: rotate(1deg);}
}

.desktop-icon {
    text-align: center;
    aspect-ratio: 1 / 1;
    position: absolute;
    width: calc(100% / 16);
    height: calc(100% / 8);
    overflow: visible;
    display: flex;
    transition: transform 0.2s ease-in-out;
}

.desktop-icon:not(.unshaky) {
    animation: introshake 0.25s ease-in-out;
}

.desktop-icon:hover {
    transform: rotate(-5deg) scale(110%);
}

.recyclables {
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
}

.recyclable {
    width: calc(100dvw / 16);
    height: calc(100dvh / 8);
    text-align: center;
}

.desktop-icon-name, .recyclable-label {
    flex-shrink: 0;
}

.desktop-icon-icon, .recyclable-icon {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    white-space: nowrap;
    --screen-height: min(100dvh, calc(100dvw / var(--aspect-ratio)));
    --arena-height: calc(var(--screen-height) - (2 * var(--screen-height) / 9 - var(--screen-height) / 16));
    --row-height: calc(var(--arena-height) / 8);
    font-size: max(calc(var(--row-height) * 0.85 - 1em), 2em);
}

.desktop-icon-icon.terminal-icon, .footer-entry-terminal {
    background: #0f0a12da;
    border-radius: 0.2ch;
    padding: 0 0.4ch;
}

@media (min-aspect-ratio: 9 / 16) {
    #warning { display: none; }
}

#warning {
    position: fixed;
    left: 0;
    top: 0;
    background: #000c;
    width: 100dvw;
    height: 100dvh;
    gap: 0;
    text-align: center;
    z-index: 99;
}

#warning p { margin: 1em }
#warning i { opacity: 0.8 }

.window {
    position: fixed;
    display: flex;
    flex-direction: column;
}

.window.fullscreen {
    width: 100%;
    height: calc(100% * 15 / 16);
    top: 0;
    left: 0;
}

.window.mini {
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
}

.default-theme .window.mini {
    box-shadow: -1px 1px 4px #0004;
}

.window.hidden {
    display: none;
}

.between, .around {
    display: flex;
    align-items: center;
}

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

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

.fullwidth {width: 100%}
.halfwidth {width: 50%}
.fullheight {height: 100%}
.zeroheight {height: 0}
#portfolio-entry, #portfolio-login {
    overflow: hidden;
    transition: height 1s linear;
}

#portfolio-logo {
    color: #88fff0;
}

#back-logo {
    position: absolute;
    width: min(50dvw, calc(50dvh * var(--aspect-ratio)));
    pointer-events: none;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    opacity: 0.4;
}

.padded {padding: 1ch}
.grid-2x2 {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
    place-items: center;
}

.around-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-around;
}

.window-body {
    flex-grow: 1;
    overflow: auto;
}

.window-body > * {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.circular-button {
    border-radius: 50%;
    background: var(--color);
    height: 100%;
    aspect-ratio: 1 / 1;
    box-shadow: 0 0 1ch #0004 inset;
}

.circular-button:hover {
    box-shadow: 0 0 1ch #0007 inset;
}

.window-buttons {
    height: 100%;
    gap: 1ch;
    font-size: small;
    padding: 0.5ch 0;
}

#viewport {
    --green: #3fb864;
    --yellow: #dfa90e;
    --red: #ea5155;
    --blue: #3f86b8;
    --halfblue: #3f86b888;
    --lightgrey: #D3C9DF;
    --lightergrey: #cac3d3;
    --outline: #827C8A;
    --gentle: #827C8A;
}

.circular-button.toggle { --color: var(--green); }
.circular-button.min { --color: var(--yellow); }
.circular-button.close { --color: var(--red); }
.glass-theme .circular-button.close { --color: #ff598b; }

.footer-entry:not(.open) {
    opacity: 0.8;
    filter: grayscale(0.8);
}

.x-large { font-size: x-large; }

input {
    appearance: none;
}

input[type=checkbox], input[type=radio] {
    width: 1ch;
    aspect-ratio: 1 / 1;
    background: var(--lightgrey);
    outline: 1px solid var(--outline);
}

input[type=radio] {
    border-radius: 50%;
}

input[type=checkbox]:checked, input[type=radio]:checked {
    background: linear-gradient(45deg,
    #170bbd 0%, #861bbf 25%, #bf1f84 55%, #cc4539 90%)
}

input[type=checkbox] {
    border-radius: 25%;
}

.default-theme .window-heading {
    background: linear-gradient(to bottom, #eee, #bbb);
    border: 1px solid #0001;
    border-bottom-width: 0;
    color: black;
}

.default-theme .window.mini .window-heading {
    border-top-left-radius: 1ch;
    border-top-right-radius: 1ch;
}

.default-theme .window-heading, .glass-theme .window-heading {
    padding: 0 1ch;
}

.default-theme .window-light {
    background: #e0d5ed;
    color: #100b15;
}

.default-theme .window-dark {
    background: #100b15;
    color: #e0d5ed;
}

.default-theme .window.mini {
    border-radius: 1ch;
    overflow: hidden;
}

.hacker-theme .window.mini {
    box-shadow: none;
    filter: drop-shadow(-3px 3px 3px #0004);
}

.hacker-theme .window-heading, .hacker-theme .window-body {
    border: 1px solid #18e4c9;
}

.hacker-theme .window-light, .hacker-theme .window-dark, .hacker-theme {
    color: #93fff2;
    background: #0b1512;
}

.hacker-theme .window-heading::before {
    content: '';
    position: absolute;
    height: calc(1em * sqrt(2) + 2px);
    aspect-ratio: 1 / 1;
    right: 100%;
    background: linear-gradient(45deg, #0d7365, #0d7365 calc(50% + 1px), transparent calc(50% + 1px));
    border-left: 1px solid #18e4c9;
    transform: rotate(45deg);
    transform-origin: 0 0;
    left: calc(1em + 1px);
    top: 0;
}

.hacker-theme .window-heading {
    background: #0d7365;
    padding: 0 1ch;
    margin-left: 1em;
    border-left: 0;
    border-bottom: 0;
    border-top-left-radius: 1px;
}

.hacker-theme #desktop {
    filter: saturate(140%) brightness(80%);
}

.glass-theme #desktop {
    filter: contrast(90%);
}

#viewport.hacker-theme {
    --anaglyph-depth: 1.5px;
    --green: #00f448;
    --yellow: #fac053;
    --red: #ff7991;
    --blue: #38b9f8;
    --halfblue: #38b9f888;
    --lightgrey: #0d2520;
    --lightergrey: #13352e;
    --outline: #145c51;
    --gentle: #239180;
}

.hacker-theme input[type=checkbox], .hacker-theme input[type=radio] {
    border-radius: 0;
}

.glass-theme .window.mini .window-light, .glass-theme .window.mini .window-dark {
    height: calc(100% - 1ch);
    transform: translateY(1ch);
}

.glass-theme .window-heading, .glass-theme .window-light, .glass-theme .window-dark {
    backdrop-filter: blur(4px);
}

.glass-theme .window .window-heading, .glass-theme .window .window-light,
.glass-theme .window .window-dark {
    --normal: rgba(240, 153, 192, 0.5);
    --shimmer: rgba(240, 163, 198, 0.67);
    --window-outline: rgba(240, 173, 203, 0.74);
    border: 2px solid var(--window-outline);
    background: linear-gradient(-45deg, var(--normal), var(--normal) 35%, var(--shimmer) 50%, var(--normal) 65%);
}

.glass-theme .window .window-heading {
    background: var(--shimmer);
}

.glass-theme .window.mini .window-heading, .glass-theme .window.mini .window-light, .glass-theme .window.mini .window-dark {
    border-radius: 1ch;
}

.glass-theme .window.fullscreen .window-heading, .glass-theme .window.fullscreen .window-light, .glass-theme .window.fullscreen .window-dark {
    border-radius: 0.25ch;
}

#viewport.glass-theme {
    --green: #b3ffca;
    --yellow: #ffeec5;
    --red: #ffc8a1;
    --blue: #bcd8f1;
    --halfblue: #bcd8f188;
    --lightgrey: rgba(240, 163, 198, 0.5);
    --lightergrey: rgba(240, 163, 198, 0.6);
    --outline: rgba(240, 173, 203, 0.74);
    --gentle: #ffd7f4;
}

.close-all {
    padding-right: 1ch;
}

.close-all::before {
    width: 2ch;
    content: '|';
    opacity: 0;
    transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5ch;
}

.close-all:hover::before {
    background: #fff2;
    opacity: 1;
}

#footer-details > * {
    border-radius: 0.5ch;
    transition: background 0.2s ease-in-out;
    padding: 0 1ch;
}

#footer-details > *:not(.close-all):hover {
    background: #fff2;
}

#infocard {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% / 16);
    padding: 1ch;
    border-radius: 1ch;
    margin: 1ch;
    background: #00002244;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease-in-out;
    z-index: 98;
}

#infocard:hover {
    background: #00002266;
}

.small {font-size: small;}
.detail {opacity: 0.8;}

.infocard-button {
    background: #9c9cb645;
    border-radius: 1ch;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.infocard-button:hover {
    background: #9c9cb666;
}

#critical-error {
    display: none;
    background: #f001;
}

.red {color: var(--red)}
.yellow {color: var(--yellow)}
.green {color: var(--green)}
.blue, a:visited.blue {color: var(--blue)}

.wiki p, .modal p {
    margin: 1em auto;
}

.wiki p:nth-child(2) {margin-top: 1ch;}
.wiki p:last-child {margin-bottom: 1ch;}
.wiki {padding: 0 1ch;}

.fullscreen .wiki {
    margin: 0 10%;
}

.outlined {
    border: 1px solid var(--outline);
}

.outlined-color {
    color: var(--outline);
}

.lightgrey {
    background: var(--lightgrey);
}

.rounded, .default-theme .rounded-if-not-hacker, .glass-theme .rounded-if-not-hacker {
    border-radius: 1ch;
}

.infobox {
    background: var(--lightgrey);
    float: right;
    width: max(30%, 20ch);
    margin: 0 1ch;
    border: 1px solid var(--outline);
}

.mini-infobox {
    width: max(15%, 20ch);
}

.infobox td {
    vertical-align: top;
}

h2 {
    font-size: x-large;
}

.transmission {
    display: flex;
    width: 100%;
    gap: 1ch;
}

transmission * {
    border-width: 0;
}

.transmission-editable, .transmission-editable:active {
    outline: none;
}

.transmission-editable {
    display: inline-block;
    flex-grow: 1;
    min-width: 0;
    user-select: none;
    cursor: default;
}

.transmission-wrapper * {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}

*::selection {
    background: #fffc;
    color: #000c;
}

.transmission-prefix {
    flex-shrink: 0;
}

.transmission-wrapper .answer > *:not(:last-child) {
    margin-bottom: 1em;
}

.answer td {
    padding-top: 1ch;
}

.transmission-wrapper td:first-child {
    padding-right: 4ch;
}

.transmission-wrapper table {
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
}

.messages {
    display: flex;
    flex-direction: column;
    width: 80%;
}

@keyframes ellipsis3 {
    0% {content: '...'}
    33% {content: '.'}
    67% {content: '..'}
    100% {content: '...'}
}

@keyframes hideellipsis {
    0% {height: fit-content; padding: 1ch;}
    100% {height: 0; padding: 0;}
}

.messages::after {
    content: '.';
    animation: ellipsis3 2s linear 5 -1s, hideellipsis 0.2s ease-in-out forwards var(--max-msgdelay);
    background: var(--lightgrey);
    border-radius: 1ch;
    padding: 1ch;
    border-bottom-left-radius: 0;
    opacity: 0.8;
    width: 3ch;
    overflow: hidden;
    color: var(--gentle);
}

.gentle {
    color: var(--gentle);
}

.message {
    animation: appear 0.2s ease-in-out forwards;
    animation-delay: var(--msgdelay);
    opacity: 0;
    border-bottom-left-radius: 0;
    width: fit-content;
    display: block;
    overflow: hidden;
    height: 0;
    margin-bottom: 0;
    padding: 0;
}

.message:last-child {
    animation: appear-nomargin 0.2s ease-in-out forwards;
    animation-delay: var(--msgdelay);
}

.message:nth-child(1) {--msgdelay: 1s}
.message:nth-child(2) {--msgdelay: 3s}
.message:nth-child(3) {--msgdelay: 5s}
.message:nth-child(4) {--msgdelay: 5.5s}
.message:nth-child(5) {--msgdelay: 5.6s}
.message:nth-child(6) {--msgdelay: 5.7s}
.messages::after {--max-msgdelay: 5.7s}

@keyframes appear {
    0% {height: 0; opacity: 0; margin-bottom: 0; padding: 0;}
    100% {height: fit-content; opacity: 1; margin-bottom: 1ch; padding: 1ch;}
}

@keyframes appear-nomargin {
    0% {height: 0; opacity: 0; padding: 0;}
    100% {height: fit-content; opacity: 1; padding: 1ch;}
}

.svg-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.gamebox-wrapper {
    --diffwidth: calc(var(--maxwidth) - var(--minwidth));
    --width: calc(var(--minwidth) + var(--percent) * var(--diffwidth));
    --halfwidth: calc(var(--width) / 2);
    --height: 3em;
    --halfheight: calc(var(--height) / 2);
    --pace: 30s;
    width: 0;
    transform-origin: calc(var(--rotmaxwidth) / 2);
    height: calc(var(--height) + 1px);
    transform: rotate3d(1, 0, 0, 10deg);
    --adelay: calc(var(--percent) * -71.5s);
    animation: spin var(--pace) linear infinite var(--adelay);
    will-change: transform;
    transform-style: preserve-3d;
    position: relative;
}

#desktop .gamebox-wrapper {
    --n-games: 3; /*MODIFY WHEN ADDING NEW GAMES*/
    z-index: calc(var(--n-games) * (1 - var(--percent)));
}

.gamebox-stack-wrapper, .proj-sidebar {
    flex-shrink: 0;
    height: 100%;
    max-width: 50%;
}

.gamebox-stack-wrapper, .proj-stack {
    overflow: auto;
}

.proj-sidebar {
    max-width: 40%;
    display: flex;
    flex-direction: column;
}

.proj-stack {
    flex-grow: 1;
    padding-bottom: 1ch;
}

.proj-listener {
    flex-shrink: 0;
    border-top: 1px solid var(--gentle);
}

.gamebox-wrapper:last-child {
    margin-bottom: calc(var(--minwidth) * sqrt(2) * sin(10deg));
}

.gamebox-wrapper:first-child {
    margin-top: calc(var(--minwidth) * sqrt(2) * sin(10deg));
}

.gamebox-stack {
    --minwidth: 10ch;
    --maxwidth: 16ch;
    --rotmaxwidth: calc(var(--maxwidth) * sqrt(2));
    width: var(--rotmaxwidth);
    color: white;
}

.gamebox {
    position: relative;
    transform: translateX(calc((var(--rotmaxwidth) - var(--width)) / 2));
    transform-style: preserve-3d;
}

@keyframes spin {
    0% {transform: rotate3d(1, 0, 0, -10deg) rotate3d(0, 1, 0, 0deg)}
    100% {transform: rotate3d(1, 0, 0, -10deg) rotate3d(0, 1, 0, 360deg)}
}

.gamebox-tile, .gamebox-lid {
    background: var(--color);
    position: absolute;
    overflow: hidden;
    padding: 1ch;
    cursor: pointer;
    border: 2px solid #0000;
    display: flex;
    align-items: center;
    transform-style: preserve-3d;
}

.gamebox-tile {
    height: var(--height);
    width: var(--width);
    animation: tilebrightness var(--pace) linear infinite;
    gap: 1ch;
    will-change: transform;
}

.gamebox-name {
    font-size: small;
    font-weight: bold;
}

@keyframes tilebrightness {
    0% {filter: brightness(0.9)}
    50% {filter: brightness(0.4)}
    100% {filter: brightness(0.9)}
}

.gamebox-tile:nth-child(1) {
    transform:
        rotate3d(0, 1, 0, 0deg)
        translate3d(0, 0, var(--halfwidth));
    animation-delay: calc(var(--adelay));
}

.gamebox-tile:nth-child(2) {
    transform:
        rotate3d(0, 1, 0, 90deg)
        translate3d(0, 0, var(--halfwidth));
    animation-delay: calc(var(--adelay) + var(--pace) / -4);
}

.gamebox-tile:nth-child(3) {
    transform:
        rotate3d(0, 1, 0, 180deg)
        translate3d(0, 0, var(--halfwidth));
    animation-delay: calc(var(--adelay) + var(--pace) / -2);
}

.gamebox-tile:nth-child(4) {
    transform:
        rotate3d(0, 1, 0, 270deg)
        translate3d(0, 0, var(--halfwidth));
    animation-delay: calc(var(--adelay) + var(--pace) * -3 / 4);
}

.gamebox-lid {
    width: var(--width);
    height: var(--width);
    transform-origin: 0 0;
    transform: translate3d(0, 0, calc(-1 * var(--halfwidth))) rotate3d(1, 0, 0, 90deg);
    justify-content: center;
    flex-direction: column;
}

.gamebox.trio {
    --color: #cd3ba4;
}

.gamebox.flip7 {
    --color: #20b3ff;
}

.gamebox.onuw {
    --color: #d66935;
}

.gamebox.wandy {
    --color: #35b8a4;
}

.gamebox-wrapper:hover .gamebox-tile, .gamebox-wrapper:hover .gamebox-lid {
    border-color: #fff8;
    animation-play-state: paused;
}

.gamebox-wrapper:hover {
    animation-play-state: paused;
}

.gamebox-wrapper.selected .gamebox-tile, .gamebox-wrapper.selected .gamebox-lid {
    border-color: #fff;
}

.game-blurb-wrapper, .proj-blurb-wrapper {
    flex-grow: 1;
    height: 100%;
    display: flex;
}

.game-blurb, .proj-blurb {
    width: 100%;
    max-height: 100%;
    overflow: auto;
}

.flex {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}

.margin-auto {
    margin: auto;
}

.text-center {
    text-align: center;
}

.badgeset {
    flex-wrap: wrap;
    gap: 1ch;
}

.badge {
    border-radius: 1em;
    border-width: 1px;
    border-style: solid;
    padding: 0 0.5ch;
    gap: 0.5ch;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.badge:hover {
    background: var(--lightergrey);
}

.badge::before {
    content: '';
    display: inline-block;
    border-width: 0.5ch;
    border-style: solid;
    border-color: inherit;
    border-radius: 50%;
}

.badge.red {border-color: var(--red)}
.badge.yellow {border-color: var(--yellow)}
.badge.green {border-color: var(--green)}
.badge.blue {border-color: var(--blue)}

.tooltip-badge {cursor: help}

.openable-image {
    cursor: pointer;
    max-height: min(100dvh, calc(100dvw / var(--aspect-ratio)));
}

.window.mini .openable-image {
    max-height: min(50dvh, calc(50dvw / var(--aspect-ratio)));
}

.modal-image, .openable-image {
    max-width: 100%;
}

.modal-image {
    max-height: 100%;
}

.carousel {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
}

.carousel .icon {
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lightgrey);
    cursor: pointer;
    width: 3ch;
    height: 3ch;
}

.carousel.disabled .icon {
    cursor: default;
    opacity: 0.4;
}

.carousel-inner > * {display: none;}
.carousel[cindex='0'] > .carousel-inner > *[myindex='0'] {display: flex;}
.carousel[cindex='1'] > .carousel-inner > *[myindex='1'] {display: flex;}
.carousel[cindex='2'] > .carousel-inner > *[myindex='2'] {display: flex;}
.carousel[cindex='3'] > .carousel-inner > *[myindex='3'] {display: flex;}
.carousel[cindex='4'] > .carousel-inner > *[myindex='4'] {display: flex;}
.carousel[cindex='5'] > .carousel-inner > *[myindex='5'] {display: flex;}
.carousel[cindex='6'] > .carousel-inner > *[myindex='6'] {display: flex;}
.carousel[cindex='7'] > .carousel-inner > *[myindex='7'] {display: flex;}
.carousel[cindex='8'] > .carousel-inner > *[myindex='8'] {display: flex;}
.carousel[cindex='9'] > .carousel-inner > *[myindex='9'] {display: flex;}
.carousel[cindex='10'] > .carousel-inner > *[myindex='10'] {display: flex;}

.carousel-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nowrap {
    white-space: nowrap;
}

.h-oscillator {
    animation: h-oscillate 2s ease-in-out infinite;
}

@keyframes h-oscillate {
    0% {transform: translateX(0)}
    50% {transform: translateX(2px)}
    100% {transform: translateX(0)}
}

.flicker {
    animation: flicker 1.5s linear 1 forwards;
}

@keyframes flicker {
    0% {opacity: 0.8}
    5% {opacity: 0.5}
    15% {opacity: 0.8}
    25% {opacity: 0.5}
    30% {opacity: 0.7}
    32% {opacity: 0.5}
    40% {opacity: 0.8}
    50% {opacity: 0.5}
    65% {opacity: 0.4}
    100% {opacity: 1}
}

.visit-button {
    color: inherit;
    background: var(--lightgrey);
    padding: 1ch;
    border-radius: 1ch;
    text-decoration: none;
    display: flex;
}

.visit-button:hover {
    background: var(--lightergrey);
}

.proj-stack-entry {
    cursor: pointer;
}

.proj-stack-entry.selected {
    box-shadow: 0 0 2px inset var(--gentle);
    cursor: default;
}

.proj-stack-entry:hover, .proj-stack-entry.selected {
    background: var(--lightgrey);
    /*border: 1px solid var(--gentle);*/
}

.seekbar {
    --seekbar: var(--green);
    border-radius: 3px;
    height: 3px;
    width: 100%;
    box-shadow: 0 0 1px inset var(--gentle);
    animation: seekbar 20s linear infinite;
    background-image: linear-gradient(to right, var(--seekbar) 0, var(--seekbar) 50%, var(--lightgrey) 50%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
}

.hacker-theme .seekbar {
    --seekbar: #93fff2;
}

@keyframes seekbar {
    0% {background-position: 100% 0}
    100% {background-position: 0 0}
}

.music-button {
    background: var(--lightgrey);
    cursor: pointer;
}

.music-button:hover {
    box-shadow: 0 0 1px inset var(--gentle);
}

.music-button:active {
    transform: translateY(1px);
}

.trackicon {
    flex-shrink: 0;
    font-size: x-large;
}

.trackname-wrapper {
    flex-grow: 1;
    overflow-x: hidden;
    position: relative;
}

.trackname {
    padding-left: 100%;
    animation: marquee 10s linear infinite;
    white-space: nowrap;
    width: fit-content;
}

@keyframes marquee {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}

.default-theme .trackname-wrapper::after, .hacker-theme .trackname-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    --margin: 25%;
    background: linear-gradient(to right,
        var(--background),
        transparent var(--margin),
        transparent calc(100% - var(--margin)),
        var(--background) 100%);
}

.default-theme .trackname-wrapper::after {
    --background: #e0d5ed;
}

.hacker-theme .trackname-wrapper::after {
    --background: #0b1512;
}

.wiki h2 {
    border-bottom: 2px solid var(--outline);
    display: flow-root;
}

.wiki h2 + p {
    margin-top: 0;
}

.wiki a {
    color: var(--blue);
    text-decoration: none;
    cursor: pointer;
}

.wiki a:hover {
    text-decoration: underline;
}

.wiki svg {
    height: 1em;
    width: 1em;
    margin-left: 0.5ch;
}

.wiki sup, .wiki sup a {
    font-size: small;
}

body {
    transition: filter 0.4s ease-in-out;
}

.lowpower {
    filter: brightness(0.9) sepia(0.4) grayscale(0.1) contrast(1.2);
}

.desktop-icon.selected, #blue-rect {
    background: var(--halfblue);
}

#blue-rect {
    border: 2px solid var(--blue);
    background: var(--halfblue);
    display: none;
    position: fixed;
}

.logo-description {
    text-align: center;
    font-size: x-large;
    font-style: italic;
}