* {
    touch-action: manipulation;
}

html {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding: .5rem 1rem;
    background-image: linear-gradient(135deg, #e66465, #9198e5);
    background-size: cover;
    background-repeat: no-repeat;
    animation: bg-animation 10s ease infinite;
    background-size: 400% 400%;
    background-image: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
        linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
        linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
}

body {
    background-color: transparent;
}

small {
    display: block;
    font-style: italic;
}

#gameContainer {
    position: relative;
}

#guessResults,
#guessInput {
    display: flex;
    flex-direction: column;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 2.5rem);
    max-width: 15rem;
    margin: 0 auto;
    gap: .4rem;
    user-select: none;
}

#guessInput {
    grid-template-rows: 2.5rem;
}

#guessResults .tile-container {
    display: contents;
}

.tile-container span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem .45rem;
    box-shadow: #FFFFFF55 0px 0px 8px 4px;
    border-radius: 4px;
    background-color: var(--result-bg);
    color: var(--result-color, rgb(230, 230, 230));
    font-weight: bold;
    text-align: center;
}

#howToPlay .tile-container {
    margin-top: 3px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 2rem;
    gap: .4rem;
    user-select: none;
    width: fit-content;
}

#howToPlay .tile-container span {
    box-shadow: #00000055 0px 0px 8px 4px;
}

#howToPlay .gray {
    color: rgb(85, 85, 85);
}

[data-mode="web"] .yellow:not(.green),
#howToPlay .yellow {
    --result-bg: rgb(252, 252, 96);
    --result-color: rgb(85, 85, 85) !important;
    --bs-btn-color: rgb(85, 85, 85);
    --bs-btn-bg: rgb(252, 252, 96);
    --bs-btn-border-color: rgb(252, 252, 96);
    --bs-btn-hover-color: rgb(85, 85, 85);
    --bs-btn-hover-bg: rgb(227 227 91);
    --bs-btn-hover-border-color: rgb(227 227 91);
    --bs-btn-active-color: rgb(85, 85, 85);
    --bs-btn-active-bg: rgb(205 205 79);
    --bs-btn-active-border-color: rgb(205 205 79);
    --bs-btn-disabled-bg: rgb(205 205 79);
    --bs-btn-disabled-border-color: rgb(205 205 79);
}

[data-mode="web"] .gray,
#howToPlay .gray {
    --result-bg: transparent;
    --bs-btn-bg: transparent;
    background-color: transparent;
    opacity: var(--bs-btn-disabled-opacity);
}

[data-mode="web"] .green,
#howToPlay .green {
    --result-bg: rgb(57, 161, 57);
    --bs-btn-bg: rgb(57, 161, 57);
    --bs-btn-border-color: rgb(57, 161, 57);
    --bs-btn-hover-bg: rgb(47, 146, 47);
    --bs-btn-hover-border-color: rgb(47, 146, 47);
    --bs-btn-active-bg: rgb(37, 124, 37);
    --bs-btn-active-border-color: rgb(37, 124, 37);
    --bs-btn-disabled-bg: rgb(37, 124, 37);
    --bs-btn-disabled-border-color: rgb(37, 124, 37);
}

input::placeholder {
    opacity: .6 !important;
    font-style: italic;
}

#openNameModalBtn {
    position: absolute;
    right: 0; top: .25rem;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 1;
}

#wordleGuessForm {
    position: relative;
}

.future-text {
    font-family: "Wallpoet", sans-serif;
}

.title-container {
    opacity: .9;
}

.game-result {
    text-align: center;
    font-size: 2rem;
    font-family: "Kalam", cursive;
    font-weight: 400;
    color: rgb(255, 255, 255);
    opacity: .9;
    display: none;
    position: relative;
}

[data-state="playing"] #postGameContainer {
    /* display: none; */
    visibility: hidden;
}

[data-state="playing"] .game-result-won {
    display: block;
    visibility: hidden;
}

[data-state="won"] .game-result-won {
    display: block;
    visibility: visible;
}

[data-state="lost"] .game-result-lost {
    display: block;
}

[data-state="won"] .game-result-won b {
    display: inline-block;
    animation: pop 1.6s .5s infinite;
}



#keyboard {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .4rem 0;
}

#gameContainer:not([data-state="playing"]) #keyboard {
    display: none;
}

.keyboard-row {
    display: flex;
    flex-shrink: 0;
    gap: .4rem;
    justify-content: center;
}

.keyboard-row .btn {
    padding: .5rem 0;
    flex-grow: 1;
}

.keyboard-row .btn-key {
    flex-basis: 0;
}

.keyboard-row .btn-delete {
    padding: .5rem 0;
    flex-grow: 1.3;
}

.keyboard-row .btn-enter {
    padding: .5rem 0;
    flex-grow: .7;
}

.keyboard-row-1 {
    padding: 0 .8rem;
}

#hint {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#guessInputContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


#gameContainer:not([data-state="playing"]) #guessInputContainer,
body:not(.dirty) #guessInputContainer {
    display: none;
}

/* #nextGame {
    visibility: hidden;
}

#gameContainer:not([data-state="playing"]) #nextGame {
    display: block !important;
} */

body.dirty #hint {
    display: none;
}

body:not(.dirty) #guessInputContainer {
    visibility: hidden;
}

.clipboard-tooltip {
    --bs-tooltip-bg: #1b9b1b;
}

.clipboard-tooltip .tooltip-inner {
    box-shadow: #f7f7f766 0 0 7px 3px;
}