@charset "UTF-8";

@font-face {
    font-family: "C800";
    src: url("/fonts/C800/C800.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Barlow;
    src: url("/fonts/Barlow/BarlowCondensed-SemiBold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

:root {
    --front-color-1: #0a3b3b;
    --front-color-2: white;
    --back-color-1: tomato;
    --back-color-2: sandybrown;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    touch-action: none;
    pointer-events: none;
    font-family: "C800", sans-serif;
    line-height: 0.85em;
    text-transform: uppercase;
}

body {
    background-color: var(--back-color-1);
}

div#overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background-color: var(--back-color-2);
}

div#top {
    position: fixed;
    inset: 0 0 25dvh 0;
}

div#bottom {
    position: fixed;
    inset: 75dvh 0 0 0;
}

div#dot {
    position: fixed;
    width: min(25dvw, 25dvh);
    height: min(25dvw, 25dvh);
    border-radius: min(12.5dvw, 12.5dvh);
    background-color: var(--front-color-1);
    transform: translate(-50%, -50%);
    transition: all 35ms linear;
    opacity: 0;
    pointer-events: auto;
}

div.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 500ms;
}

div#top div.container p {
    letter-spacing: -0.02em;
    color: var(--front-color-1);
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

div#bottom div.container p {
    width: 100dvw;
    font-size: min(6dvw, 4dvh);
    letter-spacing: 0.1em;
    color: var(--front-color-2);
    animation: blink 0.5s infinite;
}

/* ready */

body[data-state="ready"] div.container[data-state="ready"] {
    opacity: 1;
}

div#top div.container[data-state="ready"] p {
    font-size: min(36dvw, 24dvh);
}

div#top div.container[data-state="ready"] p#copyright {
    position: absolute;
    width: 100%;
    font-family: "Barlow", sans-serif;
    font-size: min(4.5dvw, 3dvh);
    letter-spacing: 0.05em;
    margin: 1em 0 0 0;
}

/* starting */

body[data-state="starting"] div.container[data-state="starting"] {
    opacity: 1;
}

div#top div.container[data-state="starting"] p {
    font-size: min(21dvw, 14dvh);
}

body[data-state="starting"] div#overlay {
    height: 100dvh;
    transition: height 1500ms linear;    
}

/* playing */

body[data-state="playing"] div#dot {
    opacity: 1;
}

body[data-state="playing"] div#overlay {
    height: 0%;
    transition: height 10000ms linear;
}

/* ending */

body[data-state="ending"] div.container[data-state="ending"] {
    opacity: 1;
}

div#top div.container[data-state="ending"] p {
    font-size: min(21dvw, 14dvh);
}

/* done */

body[data-state="done"] div.container[data-state="done"] {
    opacity: 1;
}

div#top div.container[data-state="done"] p {
    font-size: min(12dvw, 8dvh);
}

div#top div.container[data-state="done"] p#tap-count {
    font-size: min(39dvw, 26dvh);
    margin: 0 0 0.1em 0;
}

div#top div.container[data-state="done"] p#average-time {
    font-size: min(18dvw, 12dvh);
    margin: 0.75em 0 0.2em 0;
}