/* MIT Copyright (c) 2026 [Marco4413](https://github.com/Marco4413/WordGame) */

:root {
    --color-scheme-darkness:  calc(100% * (1 - var(--color-scheme)));
    --color-scheme-lightness: calc(100% * (    var(--color-scheme)));
    --char-correct-background:     color-mix(in srgb, #008000 var(--color-scheme-darkness), #00d200 var(--color-scheme-lightness));
    --char-wrong-place-background: color-mix(in srgb, #a16300 var(--color-scheme-darkness), #db8700 var(--color-scheme-lightness));
    --char-not-found-background:   color-mix(in srgb, #484848 var(--color-scheme-darkness), #d0d0d0 var(--color-scheme-lightness));
}

body {
    display: flex;
    flex-direction: column;

    margin: 0px;
    min-height: 100vh;
}

body > #word-game {
    flex-grow: 1;
}

#message {
    min-height: 1lh;
}

#message,
.button, button, input,
.keyboard-char,
.keyboard-key,
.board-item {
    font-size: 10pt;
}

label[for=dark-mode] {
    font-size: 10pt;
}

input[id=dark-mode][type=checkbox] {
    transform: scale(1);
}

.keyboard-key-down {
    translate: 0 0.2em;
}

.keyboard-key-touch {
    background-color: var(--background-color-dark);
}

#settings {
    margin: 1em;
}

#word-game {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1em;
}

.keyboard,
.board {
    width: fit-content;
    margin: 0.5em;
}

.keyboard-row,
.board-row {
    display: flex;
}

.keyboard-row {
    justify-content: center;
    flex-wrap: wrap;
}

.keyboard-char,
.keyboard-key,
.board-item {
    border: 0.1em solid transparent;
    border-color: var(--background-color-dark);
    border-radius: 1em;
    /* margin: -0.05em; */

    width: 2em;
    height: 2em;
    text-align: center;
    align-content: center;
    /* margin: 0.1em; */
}

.keyboard-char,
.keyboard-key {
    cursor: pointer;
    user-select: none;
    /* https://stackoverflow.com/questions/13620670/prevent-clickable-div-from-being-highlighted-in-android-webview
       https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-tap-highlight-color
     */
    -webkit-tap-highlight-color: transparent;
}

.keyboard-key {
    width: fit-content;
    padding-left: 1em;
    padding-right: 1em;
}

.keyboard-char.char-not-found {
    visibility: hidden;
}

@keyframes a-flip-card {
    0% {
        rotate: y 0deg;
        background-color: transparent;
    }
    50% {
        rotate: y 90deg;
        background-color: transparent;
    }
    50.1% {
        rotate: y 270deg;
        background-color: var(--a-flip-card-background-color);
    }
    100% {
        rotate: y 360deg;
        background-color: var(--a-flip-card-background-color);
    }
}

.char-correct,
.char-wrong-place,
.char-not-found {
    --a-flip-card-color: var(--text-color-dark);
    animation: a-flip-card 0.5s ease-out;
}

.char-correct {
    --a-flip-card-background-color: var(--char-correct-background);
    background-color: var(--char-correct-background);
}

.char-wrong-place {
    --a-flip-card-background-color: var(--char-wrong-place-background);
    background-color: var(--char-wrong-place-background);
}

.char-not-found {
    --a-flip-card-background-color: var(--char-not-found-background);
    background-color: var(--char-not-found-background);
}

@media only screen and (min-width: 768px) {
    #message,
    .button, button, input,
    .keyboard-char,
    .keyboard-key,
    .board-item {
        font-size: 20pt;
    }

    label[for=dark-mode] {
        font-size: 20pt;
    }

    input[id=dark-mode][type=checkbox] {
        transform: scale(1.5);
    }

    .keyboard-char,
    .keyboard-key {
        margin: 2.5px;
    }
}