style.css

/* helper classes: hidden, expanded, disabled */

@font-face {
    font-family: "Noto Sans";
    src: url(./fonts/NotoSans-Regular.ttf);
}

body {
    margin: 0px;
    overflow: hidden;
    --border-size: 1px;
    font-family: "Noto Sans";
    /* font-family: "Source Code Pro"; */
}

* {
    font-family: "Noto Sans";
    box-sizing: content-box;
    /* box-sizing: border-box; */
}
button {
    appearance: none;
    padding: 0px;
}

#menuContainer, #gameContainer, #congratulationsContainer, #transitionContainer {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#canvas, #overlayCanvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#overlayCanvas {
    cursor: crosshair;
}

#sidebar {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: flex;
    width: 100vw;
    align-items: flex-end;
}

#controlSettings {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: grid;
    padding: 4px;
    background-color: #00000066;
    border-right: 2px solid black;
    border-top: 2px solid black;
}

.button {
    width: 48px;
    height: 48px;
    margin: 4px;
    border: none;
    background-color: transparent;
    background-image: url("/img/buttons.png");
    background-size: 3000% 400%;
    background-position: 0% 0%;
    image-rendering: pixelated;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}

.button:hover {
    transform: translateY(-2px);
}
.button:active {
    transform: translateY(2px);
    background-position: 0% 300%;
}

#menuContainer {
    background-color: black;
    opacity: 1;
    transition: 1000ms linear opacity;
}
#menuTitle {
    position: absolute;
    left: 50vw;
    top: 25vh;
    height: 10vh;
    image-rendering: pixelated;
    transform: translate(-50%, -50%);
}
#menuCanvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
    /* transition: 1500ms cubic-bezier(0.3, 0, 0.3, 1) transform;
    transform: translateY(15vh); */
}
#titleContainer {
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: 500ms cubic-bezier(0.5, 0, 0.5, 1) transform;
    transform: translateX(0px);
}
.menuButton {
    position: absolute;
    left: 50vw;
    width: 50vw;
    border: 4px solid white;
    border-style: outset;
    box-shadow: 0px 0px 5px #ffffff;
    background-color: #ffffff33;
    color: white;
    font-size: 3.5vh;
    cursor: pointer;
    user-select: none;
    transition: 50ms linear transform;
    transform: translate(-50%, -50%);
}
.menuButton:hover {
    transform: translate(-50%, -50%) translateY(-2px);
}
.menuButton:active {
    border-style: inset;
    transform: translate(-50%, -50%) translateY(2px);
}
.menuButtonContainer {
    transition: 1500ms cubic-bezier(0.2, 0.2, 0, 1) transform;
    transform: translateY(50vh);
}
#sandboxButton {
    top: 60vh;
}
#puzzlesButton {
    top: 70vh;
}
#multiplayerButton {
    top: 80vh;
}
#volumeSliderButton {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    border: 4px solid white;
    border-style: outset;
    box-shadow: 0px 0px 5px #ffffff;
    background-color: #ffffff33;
    background-image: url("/img/volumeButtons.png");
    background-size: 300% 100%;
    background-position: 0% 0%;
    image-rendering: pixelated;
    cursor: pointer;
}
#volumeSliderButton:active {
    border-style: inset;
}
#volumeSliderContainer {
    position: absolute;
    left: calc(44px + var(--border-size) * 8);
    bottom: 8px;
    width: 120px;
    height: calc(36px + var(--border-size) * 8);
    overflow-x: hidden;
}
#volumeSlider {
    position: absolute;
    appearance: none;
    left: 8px;
    top: 50%;
    width: calc(100% - 8px - var(--border-size) * 8);
    height: 16px;
    margin: 0px;
    border: 4px solid white;
    border-style: outset;
    background-color: #ffffff33;
    transform: translate(calc(-100% - 8px), -50%);
    transition: 250ms ease transform;
}
#volumeSlider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 32px;
    border: 4px solid white;
    border-style: outset;
    background-color: #ffffff;
    cursor: grab;
}
#volumeSlider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 32px;
    border: 4px solid white;
    border-style: outset;
    background-color: #ffffff;
    cursor: grab;
}
#volumeSlider::-webkit-slider-thumb:active {
    cursor: grabbing;
}
#volumeSliderButton:hover + #volumeSliderContainer > #volumeSlider, #volumeSliderContainer:hover #volumeSlider {
    transform: translate(0%, -50%);
}
#menuInformation {
    position: absolute;
    right: 8px;
    bottom: 8px;
    /* border: 4px solid white;
    box-shadow: 0px 0px 5px #ffffff;
    background-color: #ffffff33; */
    color: white;
    /* padding: 4px; */
    text-align: right;
}
#menuInformation a {
    color: cyan;
}

#puzzlesContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 50vw;
    top: 50vh;
    width: calc(100vw - 200px);
    /* width: calc(100vw - 600px); */
    height: calc(100vh - 200px);
    border: 4px solid white;
    background-color: lightgray;
    transition: 500ms cubic-bezier(0.5, 0, 0.5, 1) transform;
    transform: translate(-50%, -50%) translateX(100vw);
}
#puzzlesTitle {
    font-size: 40px;
    text-align: center;
}
.puzzlesHeaderButton {
    appearance: none;
    border: 2px solid black;
    flex-grow: 1;
    margin: 4px;
    cursor: pointer;
    font-size: 18px;
    background-color: white;
}
#puzzlesList {
    position: relative;
    border: 2px solid black;
    margin: 4px;
    /* min-height: 0px; */
    flex-grow: 1;
    overflow: hidden;
}
#officialPuzzlesList, #customPuzzlesList, #createCustomPuzzleContainer {
    position: absolute;
    padding: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    text-align: center;
    overflow-y: scroll;
    transition: 500ms cubic-bezier(0.5, 0, 0.5, 1) transform;
}
#customPuzzlesList {
    transform: translateX(100%);
}
#createCustomPuzzleContainer {
    transform: translateX(200%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.puzzleWorld {
    display: block;
    text-align: center;
    font-size: 24px;
}
/* todo spaghetti */
.puzzleWorld + div {
    line-height: 0px;
}
.puzzle {
    position: relative;
    display: inline-block;
    border: 2px solid black;
    margin: 4px;
    width: 120px;
    height: 120px;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.puzzleCompleted {
    background-color: lime;
    outline: 4px solid lime;
    outline-offset: -6px;
}
.puzzleDownloadButton, .puzzleDeleteButton {
    position: absolute;
    width: 30px;
    height: 30px;
    background-size: 4800% 640%;
    display: none;
}
.puzzle:hover .puzzleDownloadButton, .puzzle:hover .puzzleDeleteButton {
    display: block;
}
.puzzleDownloadButton {
    left: 2px;
    bottom: 2px;
    background-position: -2100% -200%;
}
.puzzleDownloadButton:active {
    background-position: -2100% -300%;
}
.puzzleDeleteButton {
    right: 2px;
    bottom: 2px;
    background-position: -2300% -200%;
}
.puzzleDeleteButton:active {
    background-position: -2300% -300%;
}
#puzzlesCloseButton {
    position: absolute;
    left: 0px;
    top: 0px;
    transform: translate(-50%, -50%);
    background-position: -100% -200%;
}
#puzzlesCloseButton:hover {
    transform: translate(-50%, -50%) translateY(-2px);
}
#puzzlesCloseButton:active {
    background-position: -100% -300%;
    transform: translate(-50%, -50%) translateY(2px);
}
#uploadCustomPuzzleButton, #createCustomPuzzleButton {
    width: calc(100% - 8px - var(--border-size) * 4);
    appearance: none;
    border: 2px solid black;
    margin: 4px;
    cursor: pointer;
    font-size: 18px;
    background-color: white;
}

#createCustomPuzzleTitle {
    font-size: 20px;
}
#createCustomPuzzleSettings {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px;
}
#createCustomPuzzleSettings label {
    text-align: right;
}
#createCustomPuzzleSettings input[type=text], #createCustomPuzzleSettings input[type=number], #createCustomPuzzleSettings textarea {
    appearance: none;
    border: 2px solid black;
}
#createCustomPuzzleSettings textarea {
    resize: vertical;
}
#createCustomPuzzleSettings select {
    border: 2px solid black;
}
#createCustomPuzzleSaveCode {
    appearance: none;
    border: 2px solid black;
    resize: none;
    font-family: 'Courier New', Courier, monospace;
}
#createCustomPuzzleInventoryList {
    display: grid;
    padding: 4px;
    grid-template-columns: auto auto;
    gap: 4px;
    border: 2px solid black;
    border-top: 0px;
    background-color: white;
    max-height: 400px;
    overflow-y: scroll;
}
#createCustomPuzzleObjectivesList {
    display: grid;
    gap: 4px;
    padding: 4px;
    border: 2px solid black;
    background-color: white;
    max-height: 400px;
    overflow-y: scroll;
}
.createCustomPuzzleObjective {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px;
    padding: 4px;
    border: 2px solid black;
}
.createCustomPuzzleObjectiveDeleteButton {
    border: 2px solid black;
    cursor: pointer;
    background-color: red;
    grid-column: span 2;
}
#createCustomPuzzleAddObjectiveButton {
    border: 2px solid black;
    cursor: pointer;
}
#createCustomPuzzleFinishButton {
    border: 2px solid black;
    cursor: pointer;
    grid-column: span 2;
}
#createCustomPuzzleCloseButton {
    position: absolute;
    left: 4px;
    top: 4px;
    background-position: -200% -200%;
}
#createCustomPuzzleCloseButton:hover {
    transform: translateY(-2px);
}
#createCustomPuzzleCloseButton:active {
    background-position: -200% -300%;
    transform: translateY(2px);
}

#multiplayerContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 50vw;
    top: 50vh;
    /* width: calc(100vw - 200px); */
    width: calc(100vw - 600px);
    height: calc(100vh - 200px);
    border: 4px solid white;
    background-color: lightgray;
    transition: 500ms cubic-bezier(0.5, 0, 0.5, 1) transform;
    transform: translate(-50%, -50%) translateX(-100vw);
}
#multiplayerTitle {
    font-size: 40px;
    text-align: center;
}
#multiplayerContainers {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
}
#multiplayerContainer input[type=text], #multiplayerContainer input[type=password], #multiplayerContainer input[type=number] {
    appearance: none;
    border: 2px solid black;
}
#multiplayerSignInContainer, #multiplayerMenuContainer, #multiplayerProfileContainer, #multiplayerGameListContainer, #multiplayerGameLobbyContainer, #multiplayerLoadingContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 500ms cubic-bezier(0.5, 0, 0.5, 1) transform;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#multiplayerMenuContainer, #multiplayerGameListContainer, #multiplayerGameLobbyContainer {
    transform: translateX(100%);
}
#multiplayerProfileContainer {
    transform: translateX(-100%);
}
.multiplayerTitle {
    font-size: 32px;
    text-align: center;
    grid-column: span 2;
}
.multiplayerSignedInText {
    grid-column: span 2;
    text-align: center;
    background-color: white;
    border: 2px solid black;
    padding: 2px;
    min-width: 300px;
}
#multiplayerMenuContainer button, #multiplayerSignInContainer button, #multiplayerProfileContainer button {
    grid-column: span 2;
    text-align: center;
    border: 2px solid black;
    background-color: #00ff00;
    padding: 2px;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
#multiplayerMenuContainer button:hover, #multiplayerSignInContainer button:hover, #multiplayerProfileContainer button:hover {
    transform: translateY(-2px);
}
#multiplayerMenuContainer button:active, #multiplayerSignInContainer button:active, #multiplayerProfileContainer button:active {
    transform: translateY(2px);
}
#multiplayerSignInContainer button:disabled {
    background-color: #00dd00;
    cursor: not-allowed;
}
#multiplayerSignInContainer button:hover:disabled {
    transform: translateY(0px);
}
#multiplayerSignInContainer button:active:disabled {
    transform: translateY(0px);
}
#multiplayerSignInContainer label {
    text-align: right;
}
#multiplayerSignInResponse, #multiplayerProfileResponse {
    grid-column: span 2;
    text-align: center;
}
.multiplayerProfileGroup {
    grid-column: span 2;
    display: grid;
    grid-gap: 4px;
    /* min-height: 0px; */
    border: 2px solid black;
    padding: 4px;
}
/* #multiplayerGameIdInput {
    border: 2px solid black;
    font-size: 16px;
} */
.multiplayerBackButton {
    position: absolute;
    left: 4px;
    top: 4px;
    text-align: center;
    border: 2px solid black;
    background-color: white !important;
    padding: 2px;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
.multiplayerBackButton:hover {
    transform: translateY(-2px);
}
.multiplayerBackButton:active {
    transform: translateY(2px);
}
#multiplayerJoinGameButton {
    border: 2px solid black;
    background-color: #00ff00;
    padding: 2px;
    grid-column: 2;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
#multiplayerJoinGameButton:hover {
    transform: translateY(-2px);
}
#multiplayerJoinGameButton:active {
    transform: translateY(2px);
}
#multiplayerGameList {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2px;
    border: 2px solid black;
    grid-column: span 2;
    overflow-y: scroll;
    text-align: center;
}
/* #multiplayerAccountContainer {
    position: absolute;
    left: 4px;
    background-color: white;
    overflow-y: hidden;
}
#multiplayerAccount {
    padding: 2px;
    cursor: pointer;
    border: 2px solid black;
}
#multiplayerAccountDropdown {
    transform: translateY(-100%);
    transition: 250ms ease transform;
}
#multiplayerAccountContainer:hover #multiplayerAccountDropdown {
    
}
#multiplayerAccountDropdown div {
    padding: 2px;
    cursor: pointer;
}
#multiplayerAccountDropdown div:hover {
    background-color: #dddddd;
} */
.multiplayerGame {
    display: flex;
    margin: 2px;
    padding: 4px;
    border: 2px solid black;
    text-align: left;
}
.multiplayerGameTitle {
    font-size: 20px;
}
.multiplayerGameSubtitle {
    font-size: 12px;
}
.multiplayerGameJoinGameButton {
    display: flex;
    align-items: center;
    text-align: center;
    border: 2px solid black;
    background-color: #00ff00;
    padding: 2px;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
.multiplayerGameJoinGameButton:hover {
    transform: translateY(-2px);
}
.multiplayerGameJoinGameButton:active {
    transform: translateY(2px);
}
#multiplayerCreateGameButton {
    text-align: center;
    border: 2px solid black;
    background-color: #00ff00;
    padding: 2px;
    grid-column: span 2;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
#multiplayerCreateGameButton:hover {
    transform: translateY(-2px);
}
#multiplayerCreateGameButton:active {
    transform: translateY(2px);
}
#multiplayerGameLobbyContainer input {
    grid-column: 2;
}
#multiplayerGameLobbyMap {
    grid-column: span 2;
    margin: auto;
}
#multiplayerGameLobbyMaps {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 4px;
    overflow-y: scroll;
    border: 2px solid black;
    padding: 4px;
}
.multiplayerGameLobbyMap {
    position: relative;
    display: inline-block;
    border: 2px solid black;
    width: 120px;
    height: 120px;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.multiplayerGameLobbyMapSelected {
    outline: 4px solid lime;
    outline-offset: -6px;
}
#multiplayerGameLobbyPlayers {
    grid-column: span 2;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
}
.multiplayerGameLobbyTeamTitle {
    text-align: center;
    grid-row: 1;
}
.multiplayerGameLobbyTeamPlayers {
    display: grid;
    gap: 2px;
    padding: 2px;
    border: 2px solid black;
    grid-row: 2;
}
.multiplayerGameLobbyPlayer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    font-size: 16px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.5);
}
.multiplayerGameLobbyPlayer.draggable {
    background-color: white;
    cursor: grab;
    user-select: none;
}
.multiplayerGameLobbyPlayer.dragging {
    color: transparent;
    border: 2px dashed black;
    background-color: rgba(255, 255, 255, 0.5);
}
.multiplayerGameLobbyPlayer.dragging .multiplayerGameLobbyPlayerButton {
    visibility: hidden;
}
.multiplayerGameLobbyPlayerButton {
    background-color: red;
    border: 2px solid black;
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
.multiplayerGameLobbyPlayerButton:hover {
    transform: translateY(-2px);
}
.multiplayerGameLobbyPlayerButton:active {
    transform: translateY(2px);
}
#multiplayerStartGameButton {
    text-align: center;
    border: 2px solid black;
    background-color: white;
    padding: 2px;
    grid-column: span 2;
    cursor: pointer;
    transition: 50ms linear transform;
    transform: translateY(0px);
}
#multiplayerStartGameButton:hover {
    transform: translateY(-2px);
}
#multiplayerStartGameButton:active {
    transform: translateY(2px);
}
#multiplayerLoadingContainer {
    background-color: lightgray;
    transition: 500ms cubic-bezier(0.5, 0, 0.5, 1) transform, 250ms linear opacity;
}
#multiplayerLoadingSquares {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128px;
    height: 128px;
    transform: translate(-50%, -50%);
}
.multiplayerLoadingSquare {
    position: absolute;
    width: 64px;
    height: 64px;
    outline: 1px solid red;
    background-color: red;
}
#multiplayerLoadingSquare1 {
    animation: loading 3000ms ease-in 0ms infinite;
}
#multiplayerLoadingSquare2 {
    animation: loading 3000ms ease-in -1000ms infinite;
}
#multiplayerLoadingSquare3 {
    animation: loading 3000ms ease-in -2000ms infinite;
}
@keyframes loading {
    0%, 80% {
        left: 0px;
        top: 0px;
    }
    5%, 25% {
        left: 64px;
        top: 0px;
    }
    30%, 50% {
        left: 64px;
        top: 64px;
    }
    55%, 75% {
        left: 0px;
        top: 64px;
    }
}
#multiplayerLoadingTitle {
    position: absolute;
    left: 50%;
    top: calc(50% + 64px);
    font-size: 20px;
    transform: translateX(-50%);
}
#multiplayerCloseButton {
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translate(50%, -50%);
    background-position: -100% -200%;
}
#multiplayerCloseButton:hover {
    transform: translate(50%, -50%) translateY(-2px);
}
#multiplayerCloseButton:active {
    background-position: -100% -300%;
    transform: translate(50%, -50%) translateY(2px);
}

#menuTooltip {
    position: absolute;
    opacity: 0;
    background-color: #ffffffaa;
    border: 2px solid black;
    /* border-radius: 8px; */
    pointer-events: none;
    /* max-width: 200px;
    min-width: min-content; */
    max-width: max-content;
    width: 200px;
}
#menuTooltipName {
    border-bottom: 2px solid black;
    font-weight: bold;
}
#menuTooltipName, #menuTooltipDescription {
    padding: 4px;
}

#multiplayerGameLobbyDraggingPlayer {
    position: absolute;
    cursor: grabbing;
    pointer-events: none;
}

#transitionTop, #transitionBottom {
    width: 100vw;
    height: 50vh;
    background-color: black;
    transition: 1000ms cubic-bezier(0.5, 0, 0.5, 1) transform;
}
#transitionTop {
    transform: translateX(100vw);
}
#transitionBottom {
    top: 50vh;
    transform: translateX(-100vw);
}

#playButton {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background-position: 0% 0%;
}
#playButton:active {
    background-position: 0% 300%;
}
#stepButton {
    grid-row: 2;
    grid-column: 2 / 3;
    background-position: -100% 0%;
}
#stepButton:active {
    background-position: -100% 300%;
}
#simulateButton {
    grid-row: 2;
    grid-column: 3 / 4;
    background-position: -200% 0%;
}
#simulateButton:active {
    background-position: -200% 300%;
}
#slowmodeButton {
    grid-row: 2;
    grid-column: 4 / 5;
    background-position: -300% 0%;
}
#slowmodeButton:active {
    background-position: -300% 300%;
}

.pauseButton {
    background-position: 0% 200% !important;
}
.pauseButton:active {
    background-position: 0% 100% !important;
}

#menuButton {
    grid-row: 1;
    grid-column: 1 / 2;
    background-position: -400% 0%;
}
#menuButton:active {
    background-position: -400% 300%;
}
#settingsButton {
    grid-row: 1;
    grid-column: 2 / 3;
    background-position: -500% 0%;
}
#settingsButton:active {
    background-position: -500% 300%;
}
#screenshotButton {
    grid-row: 1;
    grid-column: 3 / 4;
    background-position: -600% 0%;
}
#screenshotButton:active {
    background-position: -600% 300%;
}
#resetButton {
    grid-row: 1;
    grid-column: 4 / 5;
    background-position: -700% 0%;
}
#resetButton:active {
    background-position: -700% 300%;
}

#saveCodeSettings {
    position: absolute;
    left: 0px;
    bottom: 128px;
    width: 200px; /* temp values */
    height: 200px;
    padding: 4px;
    background-color: #00000066;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    transition: 200ms ease transform;
    transform: translateX(0px);
}
#saveCodeSettings.hidden {
    transform: translateX(calc(-100% - var(--border-size) * 2));
}
#saveCodeSettingsToggle {
    position: absolute;
    left: 100%;
    bottom: calc(var(--border-size) * -2);
    width: 33px;
    height: 33px;
    background-color: #00000066;
    border: 2px solid black;
    cursor: pointer;
}
#saveCodeSettingsToggle div {
    width: 33px;
    height: 33px;
    background-image: url("/img/arrow.png");
    background-size: 100%;
    image-rendering: pixelated;
    transition: 200ms ease transform;
    transform: scaleX(-1);
}
#saveCodeSettings.hidden #saveCodeSettingsToggle div {
    transform: scaleX(1);
}

#downloadSaveCodeButton {
    background-position: -800% 0%;
}
#downloadSaveCodeButton:active {
    background-position: -800% 300%;
}
#uploadSaveCodeButton {
    background-position: -900% 0%;
}
#uploadSaveCodeButton:active {
    background-position: -900% 300%;
}
#generateSaveCodeButton {
    background-position: -1000% 0%;
}
#generateSaveCodeButton:active {
    background-position: -1000% 300%;
}
#saveCodeText {
    color: white;
}
#saveCode {
    appearance: none;
    border: 2px solid black;
    resize: none;
    font-family: 'Courier New', Courier, monospace;
}

#blueprintSettingsContainer {
    position: absolute;
    left: 0px;
    /* bottom: calc(208px + var(--border-size) * 2); */
    bottom: 208px;
    width: 208px; /* temp values */
    /* height: 208px; */
    height: calc(208px + var(--border-size) * 2);
    background-color: #00000066;
    border-right: 2px solid black;
    border-top: 2px solid black;
    transition: 200ms ease height;
    overflow: hidden;
}
#blueprintSettingsContainer.hidden {
    height: 0px;
}
#blueprintSettings {
    position: absolute;
    left: 0px;
    top: 0px;
    /* bottom: 0px; */
    /* bottom: calc(208px + var(--border-size) * 2); */
    /* top: calc(-100% - var(--border-size) * 2); */
    width: 200px; /* temp values */
    height: 200px;
    padding: 4px;
}
#blueprintSettingsToggle {
    position: absolute;
    left: calc(var(--border-size) * -2);
    top: calc(var(--border-size) * -4 - 33px);
    width: 33px;
    height: 33px;
    background-color: #00000066;
    border: 2px solid black;
    cursor: pointer;
    transition: 200ms ease transform;
    transform: translateY(calc(-208px - var(--border-size) * 2));
}
#blueprintSettingsToggle.hidden {
    transform: translateY(0px);
}
#blueprintSettingsToggle div {
    width: 33px;
    height: 33px;
    background-image: url("/img/arrow.png");
    background-size: 100%;
    image-rendering: pixelated;
    transition: 200ms ease transform;
    transform: rotate(90deg) scaleX(1);
}
#blueprintSettingsToggle.hidden div {
    transform: rotate(90deg) scaleX(-1);
}

#saveBlueprintButton {
    width: 144px;
    height: 30px;
    margin: 2px;
    background-size: 1000% 640%;
    background-position: -400% 0%;
}
#saveBlueprintButton:active {
    background-position: -400% -100%;
}
#uploadBlueprintButton {
    width: 30px;
    height: 30px;
    margin: 2px;
    background-size: 4800% 640%;
    background-position: -2200% -200%;
}
#uploadBlueprintButton:active {
    background-position: -2200% -300%;
}
#blueprintsListText {
    color: white;
}
#blueprintsList {
    border: 2px solid black;
    padding: 1px;
    flex-grow: 1;
    overflow-y: scroll;
}
.blueprint {
    /* height: 50px; */
    margin: 1px;
    border: 2px solid black;
}
.blueprintImg {
    border: 2px solid black;
    margin: 1px;
    width: 52px;
    flex-shrink: 0;
    /* aspect-ratio: 1; */
    background-size: contain;
}
.blueprintName {
    /* color: white; */
    appearance: none;
    border: 2px solid black;
    resize: none;
    /* margin-left: 4px; */
    margin: 2px;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
}
.blueprintCopyButton {
    width: 30px;
    height: 30px;
    margin: 2px;
    background-size: 4800% 640%;
    background-position: -2000% -200%;
}
.blueprintCopyButton:active {
    background-position: -2000% -300%;
}
.blueprintDownloadButton {
    width: 30px;
    height: 30px;
    margin: 2px;
    background-size: 4800% 640%;
    background-position: -2100% -200%;
}
.blueprintDownloadButton:active {
    background-position: -2100% -300%;
}
.blueprintDeleteButton {
    width: 30px;
    height: 30px;
    margin: 2px;
    background-size: 4800% 640%;
    background-position: -2300% -200%;
}
.blueprintDeleteButton:active {
    background-position: -2300% -300%;
}

#history {
    /* overflow-x: scroll; */
    /* height: fit-content; */
    /* flex-grow: 1;
    background: orange; */
}

#pixelPicker {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 8px;
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    /*padding: 2px;*/
    background-color: #00000066;
    border-left: 2px solid black;
    border-top: 2px solid black;
}

.pixelGroup {
    /* display: flex;
    height: 56px;
    max-width: 100vw; */
    /* flex-direction: row-reverse; */
    /* align-items: flex-end; */
    /* padding: 2px; */
    /* mix-blend-mode: difference; */
    /* background-color: #00000066; */
}

.pixelGroupImg {
    width: 48px;
    height: 48px;
    /* margin: 4px; */
    cursor: pointer;
    flex-shrink: 0;
    transition: 50ms linear transform;
    transform: translateY(0px);
    /*background-color: green;*/
    /* background-color: black; */
}

.pixelSubgroups {
    position: absolute;
    right: 0px;
    bottom: 64px;
    display: flex;
    height: 64px;
    max-width: 100vw;
    flex-direction: row-reverse;
    align-items: flex-end;
    padding: 0px 4px;
    /* background-color: #00000033; */
    /* background-color: #000000; */
    background-color: #00000044;
    border-left: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    /* isolation: isolate; */
    opacity: 0;
    transition: opacity linear 200ms;
}

.pixelGroupSelected .pixelSubgroups {
    opacity: 1;
    /* opacity: 0.5; */
}
.pixelGroupSelected .pixelSubgroup {
    width: 56px;
    pointer-events: auto;
}

.pixelSubgroup {
    display: flex;
    flex-direction: column-reverse;
    flex-shrink: 0;
    width: 0px;
    transition: 200ms ease width;
    pointer-events: none;
    align-items: center;
}

.pixelSubgroupImg {
    width: 48px;
    height: 48px;
    margin: 8px 4px;
    transition: 50ms linear transform;
    flex-shrink: 0;
    cursor: pointer;
    transform: translateY(0px);
}
.pixelSubgroupImg.disabled {
    opacity: 0.5;
}

.pixelSubgroup:hover .pixel {
    height: 56px;
}

.pixel {
    display: none;
    width: 64px;
    height: 0px;
    padding: 0px;
    transition: 200ms ease height, 200ms ease padding;
    flex-shrink: 0;
    background-color: #00000044;
    /* background-blend-mode: difference; */
    /* mix-blend-mode: multiply; */
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.pixel.shown {
    display: block;
}
/* .pixel:first-child {
    border-top: 2px solid black;
} */
.pixelSubgroup:hover .pixel.shown:nth-child(2) {
    /* height: 64px; */
    /* padding-bottom: 8px; */
    padding-bottom: 8px;
    border-bottom: 2px solid black;
}
.pixel.shown:not(:has(~.pixel.shown)) {
    border-top: 2px solid black;
}
.pixelImg {
    position: relative;
    width: 48px;
    /* height: 48px; */
    height: calc(100% - 8px);
    /* mix-blend-mode: difference; */
    /* height: 85.71%; */
    /* margin: 14.29%; */
    margin: 8px;
    margin-bottom: 0px;
    transition: 200ms ease outline, 50ms linear transform;
    cursor: pointer;
    transform: translateY(0px);
    background-size: 100% 100%;
    outline: 0px solid white;
}
.pixelImg.disabled {
    opacity: 0.5;
}
/* .pixel:nth-child(2) .pixelImg {
    height: calc(100% - 16px);
    margin-bottom: 8px;
} */
.pixelAmount {
    position: absolute;
    bottom: 0px;
    right: 2px;
    pointer-events: none;
}
.pixelImg .pixelAmount {
    transition: 200ms ease opacity;
    opacity: 0;
}
.pixelSubgroup:hover .pixelAmount {
    opacity: 1;
}
.pixelGroupImg:hover, .pixelSubgroupImg:hover, .pixelImg:hover {
    transform: translateY(-4px);
    outline: 2px solid white;
}
.pixelSubgroup:hover .pixelImg {
    transition: 50ms linear transform;
}

.pixelSelected {
    outline: 0px solid gold;
}
.pixelGroupSelected .pixelGroupImg, .pixelSubgroup:hover .pixelSelected, .pixelSubgroupImg.pixelSelected {
    outline: 4px solid gold;
}
.pixelGroupSelected .pixelGroupImg:hover, .pixelSubgroup:hover .pixelSelected:hover, .pixelSubgroupImg.pixelSelected:hover {
    outline: 4px solid gold;
}

#puzzleOverlay {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 0px;
}
#puzzleInformation {
    /* grid-column: span 2; */
    /* position: absolute;
    right: 0px;
    top: 0px; */
    /* width: 200px;
    height: 200px; */
    align-self: stretch;
    padding: 4px;
    background-color: #00000066;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}
#puzzleName {
    font-size: 20px;
    color: white;
}
#puzzleAuthor {
    font-size: 12px;
    color: white;
    margin-top: -2px;
}
#puzzleObjectives {
    /* grid-column: 2; */
    /* position: absolute;
    right: 0px;
    top: calc(50px + var(--border-size)); */
    padding: 4px;
    background-color: #00000066;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}
.puzzleObjectiveName {
    color: white;
    text-align: center;
}
.puzzleObjectiveProgress {
    position: relative;
    height: 20px;
    border: 2px solid black;
    text-align: center;
}
.puzzleObjectiveProgressBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: green;
    transition: 200ms ease width;
}
.puzzleObjectiveProgressText {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#congratulationsContainer {
    background-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transition: 250ms linear opacity;
}
#congratulationsContainer.hidden {
    opacity: 0;
    pointer-events: none;
}
#congratulations {
    position: absolute;
    left: 50vw;
    top: 30vh;
    transform: translate(-50%, -50%);
    transition: 500ms ease-in-out transform;
    text-align: center;
}
#congratulationsContainer.hidden #congratulations {
    transform: translate(-50%, calc(-50% - 50vh));
}
#congratulationsTitle {
    /* position: absolute;
    left: 50vw;
    top: 25vh;
    transform: translate(-50%, -50%); */
    /* color: black; */
    /* font-size: 8vh; */
    font-size: 50px;
}
#congratulationsSubtitle {
    /* position: absolute;
    left: 50vw;
    top: 25vh;
    transform: translateX(-50%); */
    /* color: black; */
    /* font-size: 8vh; */
    font-size: 18px;
    margin-bottom: 14px;
}
#congratulationsButtons {
    /* position: absolute;
    left: 50vw;
    top: 25vh;
    transform: translate(-50%, 20px); */
}
.congratulationsButton {
    width: 120px;
    border: 4px solid gray;
    border-style: outset;
    /* box-shadow: 0px 0px 5px #ffffff; */
    background-color: #ffffff33;
    color: black;
    /* font-size: 3.5vh; */
    /* font-size: 20px; */
    /* font-size: 16px; */
    margin: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: 50ms linear transform;
}
.congratulationsButton:hover {
    transform: translateY(-2px);
}
.congratulationsButton:active {
    border-style: inset;
    transform: translateY(2px);
}

#multiplayerOverlay {
    position: absolute;
    display: flex;
    /* gap: 8px; */
    left: 50%;
    top: 0px;
    border: 2px solid black;
    border-top: 0px;
    /* padding: 8px; */
    background-color: #00000066;
    transform: translateX(-50%);
}
.multiplayerTeam {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 2px solid black;
    padding: 8px;
    padding-top: 0px;
}
.multiplayerTeam:first-child {
    border: none;
}
.multiplayerTeamName {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 20px;
    color: white;
}
.multiplayerScore {
    background-color: red;
    width: 100%;
    height: 24px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    text-align: center;
    text-wrap: nowrap;
    color: white;
    transition: 200ms ease width;
}
.multiplayerPixelInventory {
    display: flex;
    gap: 8px;
}
.multiplayerPixel {
    position: relative;
    width: 32px;
    height: 32px;
    background-color: red;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.multiplayerPixel:first-child {
    margin: 0px;
}

#multiplayerWinContainer {
    pointer-events: none;
}
#multiplayerWinTitle {
    position: absolute;
    left: 50vw;
    top: 50vh;
    font-size: 80px;
    transform: translate(-50%, -50%);
    transition: 10000ms linear opacity;
}
#multiplayerWinSubtitle {
    position: absolute;
    left: 50vw;
    top: 109px;
    font-size: 20px;
    transform: translateX(-50%);
}

#settingsContainer {
    position: absolute;
    left: 50vw;
    bottom: 100vh;
    width: 50vw;
    height: 50vh;
    padding: 0px;
    border: 2px solid black;
    /* background-color: #ffffff66; */
    background-color: #ffffffaa;
    text-align: center;
    opacity: 0;
    transition: 400ms ease-in-out transform, 300ms linear opacity, 300ms linear display allow-discrete, 300ms linear overlay allow-discrete;
    transform: translate(-50%, 0vh);
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    overflow: visible;
}
#settingsContainer[open] {
    opacity: 1;
    transform: translate(-50%, 50vh);
}
/* #modalContainer[open] #modalBody {
    transform: translateY(calc(50vh + 50%));
} */
@starting-style {
    /* #modalContainer[open] {
        opacity: 0;
    }
    #modalContainer[open] #modalBody {
        transform: translateY(0vh);
    } */
    #settingsContainer[open] {
        opacity: 0;
        transform: translate(-50%, 0vh);
    }
}
#settingsContainer::backdrop {
  background-color: #00000000;
  transition:
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete,
    background-color 0.3s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

#settingsContainer[open]::backdrop {
    background-color: #00000066;
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
    #settingsContainer[open]::backdrop {
        background-color: #00000000;
    }
}
#settingsContainer label {
    text-align: right;
}
#settingsGrid {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settingsGroupTitle {
    grid-column: span 2;
    font-size: 40px;
}
.settingsSubgroupTitle {
    grid-column: span 2;
    font-size: 24px;
}
/* .settingsKeybind {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: auto auto auto;
} */
.settingsKeybindLabel {
}
.settingsKeybindButtons {
    display: flex;
    gap: 4px;
}
.settingsKeybindButton, .settingsKeybindResetButton, #settingsKeybindResetToDefaultsButton {
    border: 4px solid lightgray;
    border-style: outset;
    /* box-shadow: 0px 0px 5px white; */
    background-color: #ffffff66;
    /* color: black; */
    cursor: pointer;
    user-select: none;
    transition: 50ms linear transform;
}
.settingsKeybindButton:hover, .settingsKeybindResetButton:hover, #settingsKeybindResetToDefaultsButton:hover {
    transform: translateY(-2px);
}
.settingsKeybindButton:active, .settingsKeybindResetButton:active, #settingsKeybindResetToDefaultsButton:active {
    border-style: inset;
    transform: translateY(2px);
}
.settingsKeybindButton {
    flex-grow: 1;
}
.settingsKeybindResetButton {
    /* aspect-ratio: 1; */
    width: 50px;
}
#settingsKeybindResetToDefaultsButton {
    grid-column: span 2;
}
#settingsCloseButton {
    position: absolute;
    left: 0px;
    top: 0px;
    transform: translate(-50%, -50%);
    background-position: -100% -200%;
}
#settingsCloseButton:hover {
    transform: translate(-50%, -50%) translateY(-2px);
}
#settingsCloseButton:active {
    background-position: -100% -300%;
    transform: translate(-50%, -50%) translateY(2px);
}

#addKeybindContainer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0px;
    margin: 0px;
    border: none;
    background-color: #ffffffaa;
    text-align: center;
    font-size: 60px;
    opacity: 0;
    pointer-events: none;
    transition: 300ms linear opacity;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}
#addKeybindContainer[open] {
    opacity: 1;
    pointer-events: auto;
}
#addKeybindContainer::backdrop {
    opacity: 0;
}

#tooltip {
    position: absolute;
    opacity: 0;
    background-color: #ffffffaa;
    border: 2px solid black;
    /* border-radius: 8px; */
    pointer-events: none;
    /* max-width: 200px;
    min-width: min-content; */
    max-width: max-content;
    width: 200px;
    transition: 200ms linear opacity;
}
#tooltipName {
    /* border-bottom: 2px solid black; */
    font-weight: bold;
}
#tooltipName, #tooltipDescription {
    padding: 4px;
}

.pixelCostImg {
    width: 16px;
    height: 16px;
    transform: translateY(2px);
}

/* #modalContainer {
    position: absolute;
    width: 100vw;
    height: 100vh; */
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* background-color: #00000066; */
    /* background-color: transparent;
    opacity: 0;
    transition: 300ms linear opacity, 300ms linear display allow-discrete, 300ms linear overlay allow-discrete; */
    /* backdrop-filter: blur(4px); */
    /* transition-behavior: allow-discrete; */
    /* pointer-events: none; */
/* } */
/* #modalContainer[open] {
    opacity: 1;
}
#modalBody {
    position: absolute;
    bottom: 100vh;
    left: calc(25vw - 20px);
    width: 50vw;
    padding: 4px 4px;
    border: 2px solid black; */
    /* background-color: lightgray; */
    /* background-color: #ffffff66;
    text-align: center;
    transition: 400ms ease-in-out transform;
    transform: translateY(0vh);
} */
#modalContainer {
    position: absolute;
    left: 50vw;
    bottom: 100vh;
    width: 50vw;
    padding: 4px 4px;
    border: 2px solid black;
    /* background-color: #ffffff66; */
    background-color: #ffffffaa;
    text-align: center;
    opacity: 0;
    transition: 400ms ease-in-out transform, 300ms linear opacity, 300ms linear display allow-discrete, 300ms linear overlay allow-discrete;
    transform: translate(-50%, 0vh);
}
#modalContainer[open] {
    opacity: 1;
    transform: translate(-50%, 50vh);
}
/* #modalContainer[open] #modalBody {
    transform: translateY(calc(50vh + 50%));
} */
@starting-style {
    /* #modalContainer[open] {
        opacity: 0;
    }
    #modalContainer[open] #modalBody {
        transform: translateY(0vh);
    } */
    #modalContainer[open] {
        opacity: 0;
        transform: translate(-50%, 0vh);
    }
}
#modalContainer::backdrop {
  background-color: #00000000;
  transition:
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete,
    background-color 0.3s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

#modalContainer[open]::backdrop {
    background-color: #00000066;
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
    #modalContainer[open]::backdrop {
        background-color: #00000000;
    }
}
#modalTitle, #modalContent {
    width: calc(100% - 16px);
    margin: 8px;
}
#modalTitle {
    font-size: 32px;
    font-weight: bold;
}
#modalContent {
    font-size: 14px;
}
.modalButton {
    /* display: flex;
    align-items: center; */
    width: 96px;
    background-size: 1000% 400%;
    /* font-family: "Noto Sans"; */
    /* font-family: "Source Code Pro"; */
    font-weight: 500;
    font-size: 24px;
}
.modalButton {
    width: 96px;
    font-size: 24px;
    margin: 4px;
    border: 4px solid white;
    border-style: outset;
    box-shadow: 0px 0px 5px #ffffff;
    background-color: #ffffff33;
    /* color: white; */
    cursor: pointer;
    user-select: none;
    transition: 50ms linear transform;
}
.modalButton:hover {
    transform: translateY(-2px);
}
.modalButton:active {
    border-style: inset;
    transform: translateY(2px);
}
#modalYes {
    border-color: lime;
    background-color: #00ff0033;
    box-shadow: 0px 0px 5px lime;
    background-position: -400% -200%;
}
#modalYes:active {
    background-position: -400% -300%;
}
#modalNo {
    border-color: red;
    background-color: #ff000033;
    box-shadow: 0px 0px 5px red;
    background-position: -300% -200%;
}
#modalNo:active {
    background-position: -300% -300%;
}
#modalOk {
    background-color: #ffffff66;
    background-position: -200% -200%;
}
#modalOk:active {
    background-position: -200% -300%;
}