@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --color-bkg: white;
    --color-tiles: grey;
    --color-text-bkg: lightgrey;
    --color-text: #222;
    --action: salmon;
}

html, body {
    margin: 0px;
    padding: 0px;

    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1rem;
    color: var(--color-text);
}

body, .viewport {
    min-height: 100vh;
    position: relative;
    background: var(--color-bkg);
}

pre {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1rem;
    color: var(--color-text);
    margin: 0px;
}

.tile-btn {
    height: 80px;
    width: 80px;
    background: var(--color-tiles);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    transition: rotate 0.2s;

    &:hover {
        transform: rotate(-3deg);
    }
}

.tile-btn-wide {
    height: 80px;
    background: var(--color-tiles);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;

    transition: rotate 0.2s;
    &:hover {
        transform: rotate(-3deg);
    }
}

.viewport {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;

    .stats {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 180px;
        bottom: 20px;
        display: grid;
        grid-template-rows: repeat(2, 86px);
        row-gap: 20px;

        .timer {
            display: grid;
            grid-template-columns: 120px 50px;
            column-gap: 10px;

            .time {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2rem;
                background: var(--color-tiles);
            }
            .controls {
                display: grid;
                grid-template-rows: repeat(2, 1fr);
                row-gap: 10px;

                .start {
                    background: var(--color-tiles);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    user-select: none;
                    transition: rotate 0.2s;
                    &:hover {
                        transform: rotate(-3deg);
                    }
                }
                .pausereset {
                    background: var(--color-tiles);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    user-select: none;
                    transition: rotate 0.2s;
                    &:hover {
                        transform: rotate(-3deg);
                    }
                }
            }
        }
        .info {
            background: var(--color-tiles);
            padding: 10px;
        }
    }

    .settings {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        display: grid;
        grid-template-rows: 80px auto;
        grid-template-columns: repeat(3, auto);
        row-gap: 20px;
        column-gap: 20px;

        .pallets {

        }
        .saveload {

        }
        .more {

        }
        .area {
            grid-column: 1 / 4;

            .pallets {
                display: flex;
                flex-direction: column;
                row-gap: 20px;
                column-gap: 20px;

                .pallet {
                    position: relative;
                    height: 80px;
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    cursor: pointer;
                    transition: rotate 0.2s;
                    border: 2px solid white;

                    .area {
                        position: absolute;
                        height: 80px;
                        width: 280px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                        font-size: 3rem;
                        text-shadow: 2px 2px 1px #555;
                    }

                    &:hover {
                        transform: rotate(-3deg);
                    }
                }
            }

            .saveload {
                display: grid;
                grid-template-rows: repeat(2, 80px);
                row-gap: 20px;

                .save {
                    background: var(--color-tiles);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 1.2rem;
                    user-select: none;
                    cursor: pointer;
                    transition: rotate 0.2s;

                    &:hover {
                        transform: rotate(-3deg);
                    }
                }

                .load {
                    position: relative;
                    transition: rotate 0.2s;
                    &:hover {
                        transform: rotate(-3deg);
                    }

                    label.overlay {
                        background: var(--color-tiles);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 1.2rem;
                        user-select: none;
                        cursor: pointer;
                        height: 100%;
                    }

                    input#upload {
                        display: none;
                    }

                }
            }

            .more {
                display: grid;
                grid-template-rows: 80px auto;
                row-gap: 20px;

                .listhidden {
                    display: grid;
                    grid-template-rows: 80px auto;
                    row-gap: 20px;

                    .btn {

                    }
                    .list {
                        max-height: 400px;
                        overflow-y: scroll;
                        border: 2px solid white;
                        .row {
                            display: grid;
                            grid-template-columns: 1fr auto;
                            height: 30px;
                            margin: 0px 20px;
                            margin-bottom: 20px;

                            .label {
                                display: flex;
                                align-items: center;
                                padding: 5px;
                            }

                            &:nth-child(2n + 1) .label {
                                background: var(--color-tiles);
                            }

                            .action {
                                display: flex;
                                align-items: center;
                                padding: 5px;
                                background: var(--color-text-bkg);
                                border: 2px solid var(--color-tiles);
                                cursor: pointer;
                                
                                transition: rotate 0.2s;

                                &:hover {
                                    transform: rotate(-3deg);
                                }
                            }
                        }

                    }
                }
            }
        }
    }

    .cardContainer {
        grid-row: 2 / 3;
        grid-column: 2 / 3;

        display: grid;
        grid-template-rows: repeat(3, auto);
        row-gap: 20px;

        .config {
            display: grid;
            grid-template-columns: auto auto 1fr auto;
            column-gap: 20px;

            .hide {

            }
            .skip {

            }
            .reset {
                grid-column: 4 / 5;
            }
        }

        .card {
            width: 486px;
            height: 380px;
            background: var(--color-tiles);
            display: grid;
            row-gap: 20px;
            grid-template-rows: 1fr repeat(3, 100px) 1fr;
            grid-template-columns: 1fr auto 1fr;

            .english {
                grid-row: 3 / 4;
                grid-column: 2 / 3;
                background: var(--color-text-bkg);
                width: 280px;
                height: 80px;
                padding: 10px;
                overflow-y: scroll;
            }

            .pinyin {
                grid-row: 3 / 4;
                grid-column: 2 / 3;
                width: 280px;
                height: 80px;
                padding: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2.5rem;
                background: var(--color-text-bkg);
            }
            .simplified {
                grid-row: 4 / 5;
                grid-column: 2 / 3;
                width: 280px;
                height: 80px;
                padding: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2rem;
                background: var(--color-text-bkg);
            }
        }

        .actions {
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: repeat(2, 1fr);

            .back {
                grid-row: 1 / 2;
                grid-column: 1 / 2;
            }
            .question {
                grid-row: 1 / 2;
                grid-column: 2 / 3;
                display: flex;
                justify-content: flex-end;

                .reveal {

                }
            }
            .answer {
                grid-row: 1 / 2;
                grid-column: 2 / 3;
                display: flex;
                column-gap: 20px;
                justify-content: flex-end;

                .incorrect {

                }
                .correct {

                }
            }
        }
    }
}