* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    font-size: clamp(0.25rem, min(2vw, 1.5vh), 1rem);
    background: rgba(255, 127, 80, 0.25);
    overflow: hidden;
}

body.obscured * {
    animation-duration: 0s;
}

#board {
    display: flex;
    flex-direction: column;
    border: solid 1px #000000;
    flex: 0 0 calc(min(90vh, 90vw) - 2px);
    height: calc(min(90vh, 90vw) - 2px);
    align-items: center;
    padding: 32px;
    position: relative;
    background: #F5F5F5;
    box-shadow: 0 0 10px 0 rgba(175, 50, 0, 0.5);
}

#setupWindow {
    pointer-events: none;
    position: fixed;
    width: 50%;
    height: 50%;
    border: solid 1px #000000;
    background: white;
    border-radius: 25px;
    box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateX(-50vw) perspective(90px) rotateY(-22.5deg) scale(0.1);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    z-index: 10;
}

#setupWindow.visible {
    pointer-events: all;
    opacity: 1;
    transform: translateX(0vw) perspective(90px) rotateY(0deg) scale(1);
}

#setupWindow.visible.exit {
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw) perspective(90px) rotateY(22.5deg) scale(0.1);
}

#setupWindow #buttonArea {
    display: flex;
    gap: 8px;
}

#setupWindow button,
#notification button {
    height: 50px;
    font-size: 20px;
}

#setupWindow #configArea {
    flex: 1;
}

#userNameInputRow {
    display: flex;
    justify-content: center;
}

#playerCount {
    text-align: center;
    margin-bottom: 8px;
}

#paddedRegion {
    width: 100%;
    height: 100%;
    position: relative;
}

#puzzleRegion {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#guessRegion {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    height: 10%;
    font-size: 150%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#opponentRegion {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 25%;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    display: flex;
}

#keyboardRegion {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    height: 25%;
    padding: 16px 0;
    display: flex;
    align-items: center;
}

#hint {
    font-size: 200%;
    margin-bottom: 2.5%;
}

#puzzle {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.puzzleRow {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.puzzleLetter {
    width: 5%;
    aspect-ratio: 0.8;
    border-radius: 5px;
    font-size: 200%;
    text-align: center;
}

#puzzle.compact .puzzleLetter {
    width: 3%;
}

.puzzleWord {
    display: flex;
    align-items: center;
    font-size: 200%;
}

.puzzleLetter.outlined {
    background: white;
    border: solid 2px black;
    position: relative;
}

.puzzleLetter.active {
    z-index: 2;
}

.goldenColorBackground {
    --background: linear-gradient(135deg, rgb(127, 107, 0), rgb(255, 215, 0), rgb(255, 255, 127), rgb(255, 215, 0), rgb(127, 107, 0));
}

.greenColorBackground {
    --background: rgb(122, 255, 93);
}

.redColorBackground {
    --background: rgb(255, 128, 128);
}

.tileColoredBackground {
    border-radius: 2.5px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--background);
}

.tileColoredBackground.hidden {
    opacity: 0;
}

.puzzleLetter.outlined.active {
    transform: scale(0.5, 0) rotate(0deg);
}

.puzzleLetter.outlined.hidden {
    transform: scale(0.5, 0) rotate(0deg);
}

.puzzleLetterText {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.puzzleLetter.outlined .puzzleLetterText.hidden {
    opacity: 0;
}

#guessLabel {
    display: flex;
    align-items: center;
    gap: 8px;
}

#guess {
    font-size: 200%;
}

.opponent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2%;
    padding: 8px;
}

.opponent,
#opponentColumn2 .opponent:nth-child(even) {
    background: rgba(0, 0, 0, 0.05);
}

.opponent:nth-child(even),
#opponentColumn2 .opponent {
    background: rgba(255, 255, 255, 0.75);
}

#opponentColumn1,
#opponentColumn2 {
    width: 50%;
    padding: 8px;
}

.opponentInfoElement {
    --wiggle-size: 3;
}

.opponentInfoElement.opponentName {
    font-size: 125%;
    flex: 1 1 75%;
    overflow: hidden;
}

.opponentName .content {
    overflow: hidden;
    text-overflow: ellipsis;
}

.opponentInfoElement {
    display: flex;
    flex: 1 1 16.666%;
    align-items: baseline;
    gap: 4px;
}

.opponentInfoElement:not(.opponentName) {
    justify-content: center;
}

.tileIcon {
    background: white;
    border: solid 1px black;
    border-radius: 2px;
    width: 1.125rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 125%;
}

.tileIcon.golden {
    background: linear-gradient(135deg, rgb(127, 107, 0), rgb(255, 215, 0), rgb(255, 255, 127), rgb(255, 215, 0), rgb(127, 107, 0));
}

.opponentGuess .tileIcon.vowel {
    font-size: 50%;
    position: relative;
    flex-direction: column;
}

.opponentGuess .tileIcon div:nth-child(1) {
    position: absolute;
    top: 24%;
    left: 5%;
}

.opponentGuess .tileIcon div:nth-child(2) {
    position: absolute;
    top: 9%;
}

.opponentGuess .tileIcon div:nth-child(3) {
    position: absolute;
    top: 24%;
    right: 17%;
}

.opponentGuess .tileIcon div:nth-child(4) {
    position: absolute;
    bottom: 10%;
    left: 12%;
}

.opponentGuess .tileIcon div:nth-child(5) {
    position: absolute;
    bottom: 10%;
    right: 19%;
}

.opponentLostTurns .content {
    position: relative;
    font-size: 125%;
    font-weight: bold;
}

.opponentLostTurns .lostTurnsLabel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
}

#keyboard {
    width: 100%;
}

#keyboard .row {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
}

#keyboard .row:not(:last-child) {
    margin-bottom: 8px;
}

#keyboard .key {
    width: 5%;
    aspect-ratio: 0.8;
    background: white;
    border-radius: 5px;
    font-size: 200%;
    border: solid 2px black;
    padding: 0;
    cursor: pointer;
    position: relative;
}

#keyboard .key.disabled {
    filter: contrast(0.25) brightness(1.5);
    cursor: initial;
}

.keyLetter {
    z-index: 1;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#m_key {
    margin-right: 5%;
}

.parenthetical {
    font-size: 75%;
}

.appear {
    animation: appear 0.5s forwards;
}

.wiggle {
    animation: wiggle 2s forwards;
}

.fadeIn {
    animation: fadeIn 200ms forwards;
}

.squashStretchHop {
    animation: squashStretchHop 1s forwards linear;
}

.delayed {
    animation-delay: 1s;
}

.opponentName:has(.stupidIdiot),
.opponentName .content:has(.stupidIdiot) {
    overflow: visible;
}

.stupidIdiot {
    display: inline-block;
    animation: growForever 10000s forwards;
}

.stupidIdiot div {
    display: inline-block;
    animation: bounce 0.35s infinite alternate cubic-bezier(0, 0.5, 0.5, 1), colorCycle 2s infinite;
    animation-delay: var(--delay);
    background: linear-gradient(90deg, red, orange, yellow, yellow, yellowgreen, green, blue, purple, red);
    background-clip: text;
    color: transparent;
    background-size: 100px;
}

#timer {
    display: none;
    position: absolute;
    left: 2%;
    top: 2%;
    width: 100%;
    height: 50px;
}

#timerText {
    position: absolute;
    left: 7px;
    top: 6px;
    z-index: 2;
    font-size: 32.5px;
}

#timerShape {
    position: absolute;
}

#mute {
    position: absolute;
    right: 2%;
    top: 2%;
    opacity: 0.75;
    z-index: 100;
}

#mute * {
    cursor: pointer;
}

#mute .hidden {
    display: none;
}

#pieBackground {
    stroke: black;
    stroke-width: 1.25px;
}

.confetti {
    position: absolute;
    z-index: 9999999999;
    pointer-events: none;
}

#sunWrapper {
    pointer-events: none;
    position: fixed;
    width: min(100vh, 100vw);
    height: min(100vh, 100vw);
    left: calc((100vw - min(100vh, 100vw)) / 2);
    top: calc(((100vh - min(100vh, 100vw)) / 2) - 4%);
    opacity: 0;
    transform: scale(0, 0);
    transition: transform 0.5s ease-in, opacity 0.5s ease-in-out;
}

#sunWrapper.visible {
    --max-scale: 1.5;
    transform: scale(1, 1);
    animation: growForever 0.5s alternate 2 ease-out;
    animation-delay: 0.5s;
    opacity: 1;
}

#sunWrapper:after {
    content: "";
    background: white;
    mix-blend-mode: screen;
    position: absolute;
    left: 20%;
    right: 20%;
    top: 20%;
    bottom: 20%;
    border-radius: 50%;
    filter: blur(125px);
}

#sunPopin {
    width: 100%;
    height: 100%;
    opacity: 0.75;
    transform: scale(0.5, 0);
    animation: spin 20s linear infinite;
}

#sunPopin:after {
    content: "";
    background: yellow;
    left: 20%;
    right: 20%;
    top: 20%;
    bottom: 20%;
    position: absolute;
    border-radius: 50%;
    filter: blur(125px);
    mix-blend-mode: screen;
}

.sunRay {
    background: yellow;
    mix-blend-mode: screen;
    width: 75%;
    height: 75%;
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 12.5%;
    bottom: 12.5%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes appear {
    0% {
        transform: scale(0.5, 0);
    }

    50% {
        transform: scale(1.1, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes wiggle {
    0% {
        /* transform: scale(0.5, 0) rotate(0deg); */
        /* Let it start wherever it already was on animation start */
    }

    30% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(0deg);
    }

    50% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(0deg);
    }

    55% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(20deg);
    }

    60% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(-20deg);
    }

    65% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(20deg);
    }

    70% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(0deg);
    }

    80% {
        transform: scale(var(--wiggle-size, 1.5), var(--wiggle-size, 1.5)) rotate(0deg);
    }

    100% {
        transform: scale(1, 1) rotate(0deg);

    }
}

@keyframes squashStretchHop {
    0% {
        transform: scale(1, 1) translateY(0);
    }

    20% {
        transform: scale(1.1, 0.75) translateY(25%);
    }

    43% {
        transform: scale(0.9, 1.25) translateY(-40%);
    }

    66% {
        transform: scale(1, 1) translateY(-80%);
    }

    100% {
        transform: scale(1, 1) translateY(0);
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes colorCycle {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes growForever {
    0% {
        transform: scale(var(--min-scale, 1), var(--min-scale, 1));
    }

    100% {
        transform: scale(var(--max-scale, 4), var(--max-scale, 4));
    }
}