*,
*::before,
*::after {
    font: inherit;

    margin: 0;
    padding: 0;
    box-sizing: border-box;

    flex-shrink: 0;
}

html,
body {
    min-height: 100vh;
}

img {
    display: block;
}

/* Root */

:root {
    font-size: 18px;

    --blue: oklch(from royalblue calc(l + 0.05) c h);
    --red: oklch(63.11% 0.2387 32.0573);
    --green: oklch(60.3% 0.3 134.48);
    --orange: oklch(76.96% 0.1692 67.6368);
}

body {
    color: #333;
    background: hsl(240, 100%, 98%);

    font-family: 'Inria Sans', sans-serif;
    line-height: 1.5;

    display: grid;
    justify-items: center;
    align-content: start;

    padding: 6rem 1rem 12rem;
    gap: 1rem;
}

/* Typography */

h1,
h2 {
    font-family: 'Source Code Pro Variable', monospace;
    font-weight: 600;
    line-height: 1.25;
}

h3,
h4 {
    font-family: 'Inria Sans', sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: #000000c6;
}

:root {
    --font-size-base: 16px;
    --line-height: 1;
    --font-size-factor: 1.41;
}

h1 {
    font-size: calc(var(--font-size-base) * pow(var(--font-size-factor), 3));
}

h2 {
    font-size: calc(var(--font-size-base) * pow(var(--font-size-factor), 2));
}

h3 {
    font-size: calc(var(--font-size-base) * var(--font-size-factor));
}

h4 {
    font-size: var(--font-size-base);
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

code {
    font-family: 'Source Code Pro', monospace;
}

a {
    color: oklch(from var(--tint, royalblue) 0.3 c h);
    text-decoration: underline 2px solid;
}

.chip {
    display: inline-block;
    align-content: center;

    height: 1.75rem;
    padding: 0 0.5rem;
    border-radius: 0.25rem;

    color: oklch(from var(--tint) 0.15 0.1 h);
    background: oklch(from var(--tint) calc(l + 0.3) c h);
    box-shadow: 2px 2px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
}

.text-large {
    font-size: 20px;
}

/* Components */

.card {
    padding: 0.75rem;
    border: 2px solid #333;
    border-radius: 0.5rem;

    color: oklch(from var(--tint) 0.15 0.1 h);
    background: linear-gradient(-15deg, var(--tint), oklch(from var(--tint) calc(l + 0.25) c h));
    box-shadow: 3px 3px 0 oklch(from var(--tint) l 0.1 h);

    min-width: 80ch;

    @media screen and (max-width: 768px) {
        min-width: 100%;
    }
}

.tint-blue {
    --tint: var(--blue);
}

.tint-red {
    --tint: var(--red);
}

.tint-green {
    --tint: var(--green);
}

.tint-orange {
    --tint: var(--orange);
}

.stack-v {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    &.center {
        align-items: center;
    }

    > .fill {
        flex-grow: 1;
    }

    @media screen and (max-width: 768px) {
        flex-wrap: wrap;
    }
}

.stack-h {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;

    &.center {
        align-items: center;
    }

    > .fill {
        flex-grow: 1;
    }

    @media screen and (max-width: 768px) {
        flex-wrap: wrap;
    }
}

.fill-w {
    width: 100%;
}

.fill-h {
    height: 100%;
}

.icon {
    font-family: 'Material Symbols Outlined Variable';
    font-weight: 400;
    font-size: 20px !important;

    display: grid;
    place-content: center;
}

input[type='text'],
input[type='number'] {
    max-width: unset;
    height: 2rem;

    padding: 0 0.25rem;
    border: 2px solid #333;
    border-radius: 0.25rem;

    background: #fff;
    color: #333;
    box-shadow: 3px 3px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);

    outline: none;

    &:focus {
        background: oklch(from var(--tint) calc(l + 1) 0.05 h);
    }
}

select {
    height: 2rem;

    padding: 0 0.25rem;
    border: 2px solid #333;
    border-radius: 0.25rem;

    background: #fff;
    color: #333;
    box-shadow: 3px 3px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);

    outline: none;

    &:hover {
        background: oklch(from var(--tint) calc(l + 1) 0.05 h);
    }
}

button {
    height: 2rem;

    font-size: 16px;
    font-weight: 700;
    color: #444;

    padding: 0 0.75rem;
    border: 2px solid #333;
    border-radius: 0.25rem;

    color: oklch(from var(--tint) 0.15 0.1 h);
    background: oklch(from var(--tint) calc(l + 0.3) c h);
    cursor: pointer;

    box-shadow: 2px 2px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);

    display: grid;
    place-content: center;
    place-items: center;
    grid-auto-flow: column;
    gap: 0.25rem;

    &:where(:has(.icon:first-child)) {
        padding-left: 0.25rem;
    }

    &.square {
        padding: 0;
        border-radius: 0.25rem;

        width: 2rem;
        height: 2rem;
    }

    &:hover {
        background: oklch(from var(--tint) calc(l + 0.25) c h);
    }

    &:active {
        background: oklch(from var(--tint) calc(l + 0.2) c h);

        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
    }

    &.primary {
        background: var(--accent);
        color: #fff;

        &:hover {
            background: var(--accent-light);
        }

        &:active {
            background: var(--accent-dark);
        }
    }

    .icon {
        font-size: 20px;
    }
}

.leaderboard {
    display: grid;

    place-items: center;

    grid-template-columns: auto auto repeat(var(--question-count), 1fr);
    grid-template-rows: auto auto auto;

    > .questions {
        display: grid;

        grid-column: 3 / -1;
        grid-row: span 2;

        grid-template-columns: subgrid;
        grid-template-rows: subgrid;

        > .question-header {
            display: grid;

            grid-template-columns: subgrid;
            grid-template-rows: subgrid;

            grid-area: span 2 / span 1;

            border-top: 2px solid var(--orange);
            border-right: 2px solid var(--orange);

            border-top-left-radius: 8px;
            border-top-right-radius: 8px;

            background: var(--orange);

            box-shadow: 2px 2px 0 #333;

            /* > .name {
                grid-area: 1 / 1;
                
            } */

            padding: 0.5rem 0.25rem;

            text-align: center;
            font-size: 22px;
            font-weight: 500;
            /* 
            > .score {
                grid-area: 2 / 1;
                font-size: 16px;

                padding: 0.25rem 0.25rem;
            } */

            &:first-child {
                border-left: 2px solid var(--orange);
            }

            position: relative;

            &::after {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;

                border-top-left-radius: 8px;
                border-top-right-radius: 8px;

                border-top: 2px solid #333;
                border-right: 2px solid #333;
                border-left: 2px solid #333;
            }
        }
    }

    > .team-answers-container {
        display: grid;

        grid-template-columns: subgrid;
        grid-template-rows: repeat(var(--team-count), 1fr);

        grid-area: 3 / 1 / -1 / -1;

        > .row {
            display: grid;

            grid-column: 1 / -1;
            grid-row: span 1;

            grid-template-columns: subgrid;
            grid-template-rows: subgrid;

            > .team {
                display: grid;

                grid-template-columns: subgrid;
                grid-template-rows: subgrid;

                grid-area: span 1 / span 2;

                border-left: 2px solid #333;
                border-bottom: 2px solid #333;

                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;

                padding: 0.25rem 0.5rem;
                gap: 1rem;

                color: #fff;
                background: var(--green);

                box-shadow: 2px 2px 0 #333;

                > .name {
                    grid-area: 1 / 1;
                    font-weight: 500;
                }

                > .score {
                    grid-area: 1 / 2;
                    font-size: 16px;
                }
            }

            > .answers {
                display: grid;

                grid-column: 3 / -1;
                grid-row: span 1;

                grid-template-columns: subgrid;
                grid-template-rows: subgrid;

                > .answer {
                    display: grid;
                    place-content: center;

                    background: #fff;

                    border-right: 2px solid #333;
                    border-bottom: 2px solid #333;

                    &:first-child {
                        border-left: 2px solid #333;
                    }

                    &:last-child {
                        box-shadow: 2px 2px 0 #333;
                    }

                    position: relative;
                    cursor: pointer;

                    &:hover {
                        &::after {
                            content: '';
                            position: absolute;

                            top: -2px;
                            left: -2px;
                            right: -2px;
                            bottom: -2px;

                            border: 4px dashed var(--blue);
                        }
                    }
                }
            }

            &:first-child {
                > .team {
                    border-top: 2px solid #333;
                }

                > .answers {
                    > .answer {
                        border-top: 2px solid #333;
                    }
                }
            }

            &:last-child {
                .answer {
                    box-shadow: 2px 2px 0 #333;
                }
            }

            &:hover {
                .team {
                    background: oklch(from var(--green) calc(l + 0.1) c h);
                }

                .answer {
                    background: #e0e0e0;
                }
            }
        }
    }
}

/* Pages */

/* Misc */