:root {
    --text: #121212;
    --text-white: #f8f8f8;
    --background: #ffffff;
    --tile-bg: #efefe6;
    --tile-bg-selected: #5a594e;
    --yellow: #f9df6d;
    --purple: #ba81c5;
    --blue: #b0c4ef;
    --green: #a0c35a;
    --red: #d63b3b;
    --mistake: #5a594e;
    --stroke: #dfdfdf;
    --font-med: 'FG Med', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-book: 'FG Book', 'Franklin Gothic Book', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fg: 'FG', 'FG Book', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fg-bold: 'FG 700', 'FG Med', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-title: 'KN Con', 'Karnak Condensed', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --row-h: 80px;
    --bounce-height: 10px;
    --shake-amount: 5px;
}

@font-face {
    font-family: 'FG Med';
    src: url(../../../strands/assets/other/fg-med.ttf) format("truetype");
}
@font-face {
    font-family: 'FG Book';
    src: url(../../../strands/assets/other/fg-book.ttf) format("truetype");
}
@font-face {
    font-family: 'FG';
    src: url(../fonts/fg.ttf) format("truetype");
}
@font-face {
    font-family: 'KN Con';
    src: url(../fonts/kc.ttf) format("truetype");
}
@font-face {
    font-family: 'FG 700';
    src: url(../fonts/fg700.woff2) format("woff2");
}

html, body {
    /* Hide scrollbar for Chrome, Safari and Opera */
    ::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE and Edge */
    -ms-overflow-style: none;
}
body {
    color: var(--text);
    background-color: var(--background);
    font-family: var(--font-med);
    font-size: min(18px, 8vw);
    touch-action: manipulation;
}

#notification {
    width: fit-content;
    height: 2.5em;
    align-content: center;
    padding: 0.5em 0.8em;
    margin-bottom: 1em;
    margin-inline: auto;
    
    border-radius: 6px;

    background-color: var(--text);
    color: var(--text-white);
    font-family: var(--font-med);
    opacity: 0%;
}

#playArea {
    margin-top: 10vh;
    margin-bottom: 10vh;
    width: 100%;
    font-family: var(--font-book);
    font-size: 1em;
    z-index: 1;
}

.game {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 16px;
}

#board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: var(--row-h);
    gap: 8px;

    width: min(100%, 630px);
    padding: 0px 8px;
    margin-inline: auto;

    font-size: min(1.15em, 4vw);
    text-transform: uppercase;
}

.banner.colorY { background-color: var(--yellow); }
.banner.colorG { background-color: var(--green); }
.banner.colorB { background-color: var(--blue); }
.banner.colorP { background-color: var(--purple); }
.cell,
.banner {
    display: grid;
    place-items: center;
    border-radius: 6px;
    text-align: center;
}
.cell {
    background: var(--tile-bg);
    transition-property: background, color;
    transition-duration: 250ms, 250ms;
    transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
    font-family: var(--fg-bold);
    cursor: pointer;
    user-select: none;
    z-index: 1;
    line-height: 1em;
    padding: 2px 3px;
}
.cell:active {
    transition-property: scale;
    transition-duration: 350ms;
    scale: 0.879;
    transform-origin: center;
}
.cell.locked {
    cursor: default !important;
    scale: 1.0 !important;
}
.cell.selected {
    background: var(--tile-bg-selected);
    color: var(--text-white);
}
.cell.solved {
    cursor: default;
    z-index: 2 !important;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(calc(var(--bounce-height) * -1)); }
}
.animate-bounce {
    animation: bounce 0.3s ease-in-out;
}
@keyframes wrong {
    0%, 50%, 100% { transform: translateX(0px); }
    10%, 30% { transform: translateX(calc(var(--shake-amount) * -1)); }
    20%, 40% { transform: translateX(var(--shake-amount)); }
}
.animate-wrong {
    animation: wrong 1s ease-in-out;
    opacity: 80%;
}

.banner {
    grid-column: 1 / -1;
    align-content: center;
    gap: 0px;
    color: var(--text);
}
.banner .title {
    font-family: var(--fg-bold);
    padding-top: 1px;
}
.banner .words {
    font-family: var(--fg-book);
    margin-top: -6px;
}

#mistakesText {
    margin: -0.4em 0em -1.15em;

    font-family: var(--fg-book);
    color: var(--mistake);
}
#dots {
    font-family: var(--fg-bold);
    font-size: 2.4em;

    position: relative;
    top: 0.228em;
    left: 0.1em;

    white-space-collapse: preserve;
}
@keyframes fadeAwayBounce {
    0%   { opacity: 100%; transform: scale(1.0); }
    20%  {                transform: scale(1.3); }
    100% { opacity: 0%;   transform: scale(0.0); }
}
#dots > span.hideFade {
    display: inline-block;
    animation: fadeAwayBounce 500ms;
    animation-iteration-count: 1;
    opacity: 0%;
    transform-origin: center;
}
#belowBoard.hideFade {
    transition-property: opacity;
    transition-duration: 500ms;
    opacity: 0%;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#buttons {
    margin-top: 1.7em;
}
.action {
    background-color: #00000000;
    border: 1px solid var(--text);
    border-radius: 9999px;
    padding: 0.6em 1.4em;
    margin: 0px 2px;

    color: var(--text);
    font-family: var(--font-med);
}
.action.disabled {
    opacity: 40%;
    cursor: default;
}
.action.available {
    background-color: var(--text);
    color: var(--text-white);
}

@keyframes fade {
    0%, 100% { color: var(--text); }
    50% { color: #00000000; }
}
.animate-fade {
    animation: fade 1s ease-in-out;
}

#resultsDisplay {
    margin: 1.55em 0em -0.3em;
    line-height: 1.34em;
}
#results {
    width: 8.5em;
}

#codeScreen {
    background-color: var(--background);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 2;
}

.inputInfo {
    color: var(--text);
    height: 1.5em;
    padding: 0em 0.3ch;

    border: 1px solid var(--text);
    border-radius: 6px;

    width: 8ch;

    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
}
.inputInfo::placeholder {
  color: #aaa;
}
#codeButton {
    margin-top: 0.8em;
    width: 18ch;
}
#boardLoadErrorMessage {
    margin-top: 1em;
    font-family: var(--font-book);
    color: var(--red);
}

#loadingScreen {
    background-color: var(--background);
    color: var(--text);
    font-family: var(--font-med);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 3;
}