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

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

dialog {
    margin: auto;
}

a,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
    color: inherit;
}

a {
    text-decoration: none;
}

img,
video,
iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

button,
label,
input {
    cursor: pointer;
}

input[type="reset"],
input[type="submit"],
button {
    border: none;
    background-color: transparent;
}

span:has(> svg:only-child),
svg {
    line-height: 0;
}

ul {
    list-style-type: none;
}

html {
    color-scheme: dark light;
    scroll-behavior: smooth;
    scroll-padding: 6.25rem;
    -webkit-tap-highlight-color: transparent;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body:has(dialog[open]) {
    overflow: hidden;
}

:root {
    --ease-spring: linear(0, -0.0054, 0.0265, 0.0909, 0.182, 0.293, 0.419, 0.554, 0.691, 0.826, 0.953, 1.07, 1.17, 1.26, 1.33, 1.38, 1.41, 1.42, 1.42, 1.4, 1.37, 1.32, 1.28, 1.22, 1.17, 1.11, 1.05, 1, 0.955, 0.914, 0.881, 0.856, 0.838, 0.828, 0.825, 0.829, 0.839, 0.853, 0.872, 0.893, 0.916, 0.94, 0.963, 0.986, 1.01, 1.03, 1.04, 1.05, 1.06, 1.07, 1.07, 1.07, 1.07, 1.07, 1.06, 1.05, 1.04, 1.03, 1.02, 1.01, 1, 0.994, 0.987, 0.981, 0.976, 0.973, 0.971, 0.97, 0.97, 0.972, 0.974, 0.977, 0.98, 0.984, 0.988, 0.993, 0.996, 1, 1, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1, 1, 1, 0.999, 0.998, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
    --surface: hsl(0 0% 98% / 1);
    --sufrace-higher: hsl(0 0% 100% / 1);
    --on-surface: black;

    --ff-primary: "Google Sans Code", monospace;
    --accent: #473bf0;
    --on-accent: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #685dff;
        --surface: hsl(0 0% 5% / 1);
        --sufrace-higher: hsl(0 0% 10% / 1);
        --on-surface: white;
    }
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--ff-primary);
    accent-color: var(--accent);
    height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;

    background-size: cover;
}

footer {
    align-self: end;
    text-align: center;
    padding-block: 1rem;

    a {
        text-decoration: underline;
        text-decoration-color: var(--accent);
    }
}

.focus-ring,
:focus-visible {
    outline-color: var(--accent);
    outline-width: 4px;
    outline-offset: 2px;
    outline-style: solid;
}

.btn {
    padding: 1rem 2rem;
    border-radius: 0.5rem;

    &:active {
        scale: 0.98;
    }

    &.btn-primary {
        background-color: var(--accent);
        color: var(--on-accent);
    }

    &.btn-secondary {
        background-color: rgb(from currentColor r g b / 0.05);
        color: currentColor;
    }
}

h1 {
    font-size: 2rem;
    text-align: center;
}

.wrapper {
    padding-block: 2rem;
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.boxed-shadow {
    background-color: var(--sufrace-higher);
    box-shadow: 0 5px 10px rgb(from var(--on-surface) r g b / 0.05);
    border: 1px solid rgb(from var(--on-surface) r g b / 0.2);
    border-radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    .boxed-shadow {
        box-shadow: none;
        border: 1px solid rgb(from var(--on-surface) r g b / 0.1);
        border-radius: 0.5rem;
    }
}

button.picker {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: 1rem;
    padding-block: 0.8rem;
    anchor-name: --picker;

    &:active {
        scale: 0.98;
    }
}

#calendar {
    --_day-size: 3rem;
    inline-size: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--sufrace-higher);
    grid-template-rows: auto 1fr;
    block-size: calc(100% - 2rem);
    max-inline-size: min(29rem, 100% - 2rem);
    position-anchor: --picker;
    position-area: y-end;
    margin-block-start: 1rem;
    justify-self: anchor-center;
    opacity: 0;
    scale: 0.8;
    position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;

    &:popover-open {
        display: grid;
        opacity: 1;
        scale: 1;
    }

    header {
        position: sticky;
        top: 0;
        background-color: var(--sufrace-higher);
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
        padding: 1rem;
        z-index: 1;
        margin-block-end: 6px;

        button {
            line-height: 0;
            border: 1px solid rgb(from currentColor r g b / 0.2);
            border-radius: 0.3rem;
            inline-size: 2rem;
            block-size: 2rem;
            display: grid;
            place-items: center;

            svg {
                pointer-events: none;
                inline-size: 1rem;
            }
        }

        div {
            position: relative;

            #yeardelta {
                position: absolute;
                inset-inline-start: calc(100% + 0.5rem);
                inset-block-start: 0;
                font-weight: 900;
                font-size: 0.875rem;
                color: var(--accent);
                opacity: 0;

                @media (prefers-color-scheme: dark) {
                    background-color: var(--accent);
                    color: var(--on-surface);
                    padding: 0.2em 0.6em;
                    border-radius: 0.2em;
                }
            }
        }
    }

    #days {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--_day-size), 1fr));
        gap: 0.5rem;
        padding: 1rem;
        padding-block-start: 0;

        &:not(:has(:checked)) .day:first-child,
        & .day:has(:checked) {
            anchor-name: --active-day;
        }

        .day {
            aspect-ratio: 1;
            border-radius: 50%;
            display: grid;
            place-items: center;

            &:hover {
                background-color: rgb(from currentColor r g b / 0.02);
            }

            label {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 0.875rem;
                line-height: 1;
                position: relative;
                pointer-events: none;

                &::after {
                    content: "";
                    pointer-events: auto;
                    position: absolute;
                    inset: 0;
                    scale: 0.2;
                    border-radius: 50%;
                }

                &:has(:checked)::after {
                    background-color: var(--accent);
                    box-shadow: 0 0 0 50px rgb(from var(--accent) r g b / 0.2);

                    @media (prefers-color-scheme: dark) {
                        background-color: currentColor;
                        box-shadow: 0 0 0 50px rgb(from var(--accent) r g b / 0.5);
                    }
                }

                span:last-child {
                    font-size: 0.75rem;
                }
            }
        }
    }

    .focus-ring {
        pointer-events: none;
        position: absolute;
        position-anchor: --active-day;
        inline-size: anchor-size(inline);
        block-size: anchor-size(block);
        inset-inline-start: anchor(start);
        inset-block-start: anchor(start);
        border-radius: 50%;
        transition: all 0.5s ease-in-out;
    }
}

#confirmdialog {
    border-radius: 0.5rem;
    padding: 1rem;
    border: none;
    max-inline-size: 31.25rem;

    &[open] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    h2 {
        text-align: center;
        font-size: 1.3rem;
        font-weight: 600;
        text-wrap: balance;
        margin-block: 1rem;
    }

    &::backdrop {
        background-color: var(--accent);
    }
}

#info {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;

    .question {
        line-height: 0;
        background-color: var(--accent);
        padding: 0.5rem;
        border-radius: 50%;
        color: var(--on-accent);
    }

    .description {
        font-size: 0.875rem;
        line-height: 1.6;
        position: absolute;
        width: 50ch;
        background-color: var(--sufrace-higher);
        border-radius: 0.5rem;
        border-end-end-radius: 0;
        border: none;
        outline: none;
        padding: 1rem;
        inset-block-start: -1rem;
        inset-inline-end: 0;
        translate: 0 -100%;
        transform-origin: bottom right;
        scale: 0;
        transition: scale 0.2s ease-in-out;

        #info:hover & {
            scale: 1;
        }

        ul {
            margin-block-start: 0.2lh;
            list-style-type: disc;
            list-style-position: outside;
            padding-inline-start: 1em;

            li:not(:last-child) {
                margin-block-end: 0.4lh;
            }
        }
    }
}

.game-wrapper {
    position: fixed;
    inset-inline-start: 1rem;
    inset-block-end: 1rem;

    #hearts {
        line-height: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .heart {
            display: grid;
            place-items: center;
            & > * {
                grid-area: 1/1;
            }

            svg:first-child {
                opacity: 1;
                transition: opacity 0.5s ease;
            }

            &.broken {
                svg:first-child {
                    opacity: 0;
                }
            }

            &:not(.broken) {
                color: var(--accent);
            }
        }
    }

    p {
        margin-block-start: 0.4em;
        #deathscounter {
            font-weight: 700;
        }
    }
}

#gameover {
    --_softness: 2vw;
    padding-block: 0.1em;
    border: none;
    outline: none;
    font-size: 10vw;
    background-color: transparent;
    inline-size: 100%;
    max-inline-size: none;
    text-align: center;
    background-image: linear-gradient(transparent, var(--accent) var(--_softness), var(--accent) calc(100% - var(--_softness)), transparent);
}

#cookiebanner {
    max-inline-size: min(100ch, 100vw);
    outline: none;
    border: none;
    max-block-size: 90vh;
    background-color: var(--sufrace-higher);
    padding: 2rem;
    padding-block-start: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--sufrace-higher);
    font-family: sans-serif;
    text-align: justify;

    &::backdrop {
        background-color: rgb(from var(--surface) r g b / 0.9);
    }

    h2 {
        position: sticky;
        inset-block-start: 0;
        background-color: var(--sufrace-higher);
        padding-block: 2rem;
        font-size: 2rem;
    }

    p {
        --_start-size: 1rem;
        --_end-size: 0.1rem;

        font-size: calc(var(--_start-size) + ((var(--_end-size) - var(--_start-size)) * (sibling-index() / (sibling-count() - 1))));
    }

    .buttons {
        display: grid;
        gap: 1rem;
        margin-block-start: 1rem;

        button {
            padding: 1em;
            text-transform: uppercase;

            &#cookiesreject {
                background-color: rgb(from currentColor r g b / 0.05);
            }

            &#cookiesaccept {
                background-color: var(--accent);
            }
        }
    }
}