@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body {
    background-color: #222;
    color: #eee;
    font-family: 'Share Tech Mono', monospace;
    user-select: none;
}

#appContainer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.body {
    overflow-y: scroll;
}

.gameSelectBody {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
}

.gameSelectTitle {
    font-size: 1.6rem;
    text-align: center;
    margin: 0.8em;
    margin-bottom: 0.3em;
}

.gameSelect {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gameSelectButtons {
    display: grid;
    grid-template-columns: auto auto auto;
}

.gameSelectButton {
    position: relative;
    box-sizing: border-box;
    margin: min(0.5rem, 2vw);
    font-size: min(3rem, 15vw);
    width: min(6rem, 25vw);
    height: min(5rem, 25vw);
    background-color: #111;
    border: 0.2rem solid #444;
    text-align: center;
    padding-top: 0.21em;

    cursor: pointer;
}

.gameSelectButton:hover {
    background-color: #333;
}

.gameSelectButton .solved {
    position: absolute;
    top: 0rem;
    right: 0.1rem;
    font-size: 1.5rem;
    color: green;
}

.app {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto min-content min-content;
}

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

.header {
    position: relative;
    background-color: #311;
    padding: 0.5em 1em 0.5em 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.title {
    margin-left: 1.5em;
    margin-right: 1.5em;
    font-size: 2em;
    color: #f66;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.rules {
    margin-top: 0.25em;
    font-size: 0.9rem;
}

.rule {
    text-indent: -1em;
    padding-left: 1em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.info {
    position: absolute;
    font-size: 1.4rem;
    top: 0.3rem;
    right: 0.4rem;
    color: #a55;
    cursor: pointer;
}

.info:hover {
    color: #fdd;
}

.guesses {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.guess {
    padding: 0.25em;
    display: flex;
    border: 0.2em solid rgba(0,0,0,0);
    border-radius: 1em;
}

.guess.metTarget {
    border-color: white;
}

.guess .index {
    color: #555;
    font-size: 1.5rem;
    text-align: right;
    width: 1.7rem;
}

.guess .status {
    color: #5bb598;
    font-size: 2rem;
    width: 1.7rem;
}

.guess .cell {
    box-sizing: border-box;
    margin-left: min(0.5rem, 0.5vw);
    margin-right: min(0.5rem, 0.5vw);
    font-size: min(3rem, 9vw);
    width: min(5rem, 15vw);
    height: min(5rem, 15vw);
    border: 0.1rem solid #444;
    text-align: center;
    padding-top: 0.25em;
}

.cell.yellow, .patternCell.yellow {
    background-color: rgb(181, 160, 41);
}

.cell.green, .patternCell.green {
    background-color: rgb(41 118 41);
}

.gameInfoBar {
    background-color: #922;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0.2em;
}

.targets {
    display: flex;
}

.target {
    background-color: rgb(211 22 22);
    padding: 0.3em;
    border-radius: 0.3em;
    font-size: 0.8em;
    display: flex;
    margin-left: 0.5em;
}

.target.met {
    /*background-color: rgb(22, 211, 22);*/
    background-color: white;
}

.patternCell {
    width: 1em;
    height: 1em;
    background-color: #222;
    border: 1px solid #333;
}

.resetButton {
    margin-left: 0.5em;
    margin-right: 0.5em;
    cursor: pointer;
    background-color: #b66;
    color: #311;
    padding: 0.1em 0.6em 0.1em 0.6em;
}

.resetButton:hover {
    background-color: #faa;
}

.keyboard {
    background-color: #311;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    font-size: 1.5rem;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    min-height: 13.5rem;
}

.keyrow {
    display: flex;
    justify-content: center;
    margin-bottom: 0.2em;
}

.key {
    background-color: #655;
    border-radius: 0.2em;
    min-width: min(1.4em, 8.5vw);
    padding-top: 0.8em;
    text-align: center;
    cursor: pointer;
    margin-left: 0.1em;
    margin-right: 0.1em;
}

.key:active {
    background-color: #a99;
}

.key.Enter, .key.Backspace {
    max-width: 2.3em;
    flex-grow: 1;
}

.error {
    color: #f44;
}

.endGameInfo {
    margin-top: 1em;
    padding: 1em;
    background-color: #444;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.endGameInfo .congrats {
    font-size: 2em;
}

.endGameInfo .message {
    color: #aaa;
    margin-top: 0.8em;
}

.endGameInfo .buttons {
    margin-top: 0.8em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.endGameInfo .button {
    background-color: #222;
    padding: 0.8em;
    cursor: pointer;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.endGameInfo .button:active {
    background-color: #666;
}

.endGameInfo .returnLink {
    margin-top: 0.8em;
    background-color: #411;
    border: 0.2em solid #722;
    padding: 0.8em;
    text-align: center;
    cursor: pointer;
    color: #f88;
}

.endGameInfo .returnLink:hover {
    background-color: #611;
}

.resetConfirmationScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.resetConfirmationScreen .message {
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
}

.resetConfirmationScreen .buttons {
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.resetConfirmationScreen .button {
    font-size: 1.3rem;
    padding: 0.5em;
    border: 0.1em solid #444;
    cursor: pointer;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.resetConfirmationScreen .button:hover {
    border-color: #eee;
}

.resetConfirmationScreen .button.confirm {
    background-color: #822;
}

.resetConfirmationScreen .button.cancel {
    background-color: #111;
}