:root {
    --white: #FFFCF9;
    --black: #352D39;
    --light-grey: #b8b8b8;
    --grey: #949494;
    --dark-grey: #3d3d3d;
    --light-primary: #98AED7;
    --primary: #809BCE;
    --dark-primary: #6C8CC6;
    --light-secondary: #819E57;
    --secondary: #758E4F;
    --dark-secondary: #6C8448;
    --light-tertiary: #FF7075;
    --tertiary: #FF5A5F;
    --dark-tertiary: #FF474E;
}

.monospace {
    font-family: "Lekton", monospace;
    font-weight: 400;
    font-style: normal;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: var(--black);
    color: var(--white);
    font-size: var(--medium);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--primary);
}

input {
    pointer-events: auto;
}

button, input[type=submit] {
    pointer-events: auto;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    background-color: var(--primary);
    border: none;
    border-radius: var(--large);
    box-shadow: 0 var(--small) var(--dark-primary);
    color: var(--white);
    padding: var(--medium);
    margin-bottom: var(--small);
    box-sizing: border-box;
    text-wrap: nowrap;
}

button:hover, input[type=submit]:hover {
    background-color: var(--light-primary);
}

button:active, input[type=submit]:active {
    background-color: var(--light-primary);
    box-shadow: 0 var(--xsmall) var(--dark-primary);
    transform: translateY(var(--xsmall));
}

button:disabled, input[type=submit]:disabled {
    background-color: var(--grey);
    box-shadow: 0 var(--small) var(--light-grey);
    pointer-events: none;
    cursor: not-allowed;
}

.secondary-button {
    background-color: var(--secondary);
    box-shadow: 0 var(--small) var(--dark-secondary);
}

.secondary-button:hover {
    background-color: var(--light-secondary);
}

.secondary-button:active {
    background-color: var(--light-secondary);
    box-shadow: 0 var(--xsmall) var(--dark-secondary);
}

.tertiary-button {
    background-color: var(--tertiary);
    box-shadow: 0 var(--small) var(--dark-tertiary);
}

.tertiary-button:hover {
    background-color: var(--light-tertiary);
}

.tertiary-button:active {
    background-color: var(--light-tertiary);
    box-shadow: 0 var(--xsmall) var(--dark-tertiary);
}

.long-button {
    padding: var(--medium) var(--xlarge);
}

.circle-button {
    border-radius: 50%;
    aspect-ratio: 1;
    position: relative;
}

.circle-button > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

.no-input {
    pointer-events: none;
}

.input {
    pointer-events: auto;
}

.unselectable {
    user-select: none;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.col {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.fill {
    width: 100%;
    height: 100%;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
}

.quarter-width {
    width: 25%;
}

.full-height {
    height: 100%;
}

.half-height {
    height: 50%;
}

.quarter-height {
    height: 25%;
}

.space-between {
    justify-content: space-between;
}

.flex-center {
    justify-content: center;
}

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.relative {
    position: relative;
}

.clickable {
    cursor: pointer;
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-left {
    position: absolute;
    top: 0%;
    left: 0%;
}

.top-center {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.top-right {
    position: absolute;
    top: 0%;
    right: 0%;
}

.bot-left {
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.bot-center {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.bot-right {
    position: absolute;
    bottom: 0%;
    right: 0%;
}

.no-display {
    display: none;
}

.no-display-option {
    display: none;
}

.hidden {
    visibility: hidden;
}

.scrollable {
    overflow-y: scroll;
}

.faded {
    opacity: 0.5;
}

.greyscale {
    filter: grayscale(100%);
}

.small-gap {
    gap: var(--small);
}

.medium-gap {
    gap: var(--medium);
}

.large-gap {
    gap: var(--large);
}

.small-margin {
    margin: var(--small);
}

.medium-margin {
    margin: var(--medium);
}

.large-margin {
    margin: var(--large);
}

.small-padding {
    padding: var(--small);
    box-sizing: border-box;
}

.medium-padding {
    padding: var(--medium);
    box-sizing: border-box;
}

.large-padding {
    padding: var(--large);
    box-sizing: border-box;
}

.small-text {
    font-size: var(--small-medium);
}

.medium-text {
    font-size: var(--medium-large);
}

.large-text {
    font-size: var(--large);
}

.xl-text {
    font-size: var(--large-xlarge);
}

.xxl-text {
    font-size: var(--xlarge);
}

.center {
    text-align: center;
}

.no-wrap {
    text-wrap: nowrap;
}

.drop-shadow {
    filter: drop-shadow(5px 5px 15px var(--black));
}

.panel {
    pointer-events: auto;
    background-image: linear-gradient(var(--light-secondary), var(--dark-secondary));
    border-radius: var(--medium);
    padding: var(--large);
    box-sizing: border-box;
}

.black-panel {
    pointer-events: auto;
    background-color: var(--black);
    border-radius: var(--medium);
    padding: var(--large);
    box-sizing: border-box;
}

@keyframes yoyo-rotate {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

.yoyo-rotate {
    animation: yoyo-rotate 2s infinite linear;
}

@keyframes spin-in {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(3);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.spin-in {
    animation: spin-in 0.75s ease-in;
}

@keyframes wait-then-fade {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.wait-then-fade {
    animation: wait-then-fade 2s forwards;
}

@keyframes flash-tertiary {
    0% {
        transform: scale(1.2);
        color: var(--tertiary);
    }
    100% {
        transform: scale(1);
        color: var(--white);
    }
}

.flash-tertiary {
    animation: flash-tertiary 0.5s forwards;
}

.xsmall-button {
    width: var(--large);
}

.small-button {
    width: var(--large-xlarge);
}

.medium-button {
    width: var(--large-xlarge-xlarge);
}

.large-button {
    width: var(--xxlarge);
}

#page {
    width: 100%;
    height: 100%;
}

#how-to-play-video {
    aspect-ratio: 16 / 9;
    background-color: var(--black);
}

#main-menu {
    z-index: 999;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    background-color: var(--black);
    border-left: var(--medium) solid var(--grey);
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 500ms cubic-bezier(0.33, 1, 0.68, 1);
}

#main-menu-button {
    border-radius: var(--small);
}

#outer-container {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: var(--small);
}

.date-selector {
    font-size: var(--medium-large);
}

#game-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--small);
}

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

#game > canvas {
    aspect-ratio: 1;
}

#logo-container {
    margin-top: var(--medium-large);
}

#ai-stars {
    width: var(--xxxlarge);
}

#hints-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.timer-container {
    cursor: pointer;
}

.timer-progress-background {
    background-color: var(--grey);
    /* 100% - (.timer-star width / 2) */
    width: 100%;
    height: var(--large-xlarge);
    overflow: hidden;
    border-radius: var(--large);
}

.timer-progress {
    background-color: var(--secondary);
    width: 0%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.hint-ready {
    background-color: var(--primary);
}

.timer-container:hover .timer-progress {
    background-color: var(--light-secondary);
}

.timer-container:hover .hint-ready {
    background-color: var(--light-primary);
}

.timer-container:hover .timer-progress-background {
    background-color: var(--light-grey);
}

.timer-star {
    position: absolute;
    width: var(--large-xlarge);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hint {
    aspect-ratio: 1;
    border: var(--xsmall) solid var(--grey);
    background-color: var(--dark-grey);
    box-sizing: border-box;
    cursor: pointer;
}

.hint:hover {
    background-color: var(--light-grey);
}

.found-hint {
    border: var(--xsmall) solid var(--dark-secondary);
    background-image: linear-gradient(var(--light-secondary), var(--dark-secondary));
}

.found-hint:hover {
    background-image: unset;
    background-color: var(--light-secondary);
}

.star {
    width: var(--large-xlarge);
}

.medal {
    transform: translate(40%, -25%);
}

.medal-img {
    height: var(--xxlarge);
}

.date-selector-button {
    padding: 0px var(--medium);
    border-radius: var(--small);
}

.date-selector-img {
    height: var(--medium);
}

#calendar-container {
    border-radius: var(--medium);
}

.day {
    position: relative;
    width: var(--xlarge);
    aspect-ratio: 1;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 12%;
    border-radius: var(--medium);
    user-select: none;
    cursor: pointer;
}

.day:hover {
    background-color: var(--light-primary);
}

.disabled-day {
    background-color: var(--grey);
    cursor: unset;
}

.disabled-day:hover {
    background-color: var(--grey);
}

.day-of-week {
    width: var(--xlarge);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--large);
    flex: 1 0 12%;
}

@media (orientation: landscape) {
    :root {
        /* sizes are based on 1327px height */
        --xsmall: 0.3dvh; /* 4px */
        --small: 0.6dvh; /* 8px */
        --small-medium: 0.9dvh; /* 12px */
        --small-medium-medium: 1.1dvh; /* 14px */
        --medium: 1.2dvh; /* 16px */
        --medium-large: 1.4dvh; /* 18px */
        --medium-large-large: 1.8dvh; /* 24px */
        --large: 2.4dvh; /* 32px */
        --large-xlarge: 3.6dvh; /* 48px */
        --large-xlarge-xlarge: 4.2dvh; /* 56px */
        --xlarge: 4.8dvh; /* 64px */
        --xxlarge: 6.9dvh; /* 92px */
        --xxxlarge: 9.6dvh; /* 128px */

        --game-container-size: calc(100dvh - var(--small) - var(--small) - var(--large-xlarge) - var(--small) - var(--small));
    }

    #how-to-play-video {
        max-height: 80dvh;
    }

    #main-menu-button {
        width: var(--xlarge);
    }

    .large-logo {
        height: var(--xxxlarge);
    }

    #outer-container {
        flex-direction: row;
        justify-content: center;
    }

    #game-container {
        width: var(--game-container-size);
        height: var(--game-container-size);
        max-width: calc(100dvw - var(--small) - var(--small) - var(--xxxlarge) - var(--small));
        max-height: var(--game-container-size);
    }

    #hints-container {
        height: 100%;
        flex-direction: column;
    }

    .hint {
        height: 16.66%;
        max-height: var(--xxxlarge);
        border-radius: var(--large);
    }

    #timer-row {
        max-width: var(--game-container-size);
    }

    .timer-text {
        font-size: 2.54dvh;
    }

    .timer-container {
        width: 57%;
    }

    .hint-meter-img {
        margin-left: var(--xsmall);
    }

    .hint-meter-text {
        font-size: var(--medium-large-large);
    }

    .date-selector-button {
        height: 3.7dvh;
    }

    #calendar-container {
        width: 80dvh;
    }

    .day {
        font-size: var(--xlarge);
    }

    .archive-star {
        width: var(--large);
    }

    .archive-medal {
        width: var(--large-xlarge);
    }
}

@media (orientation: portrait) {
    :root {
        /* sizes are based on 720px width */
        --xsmall: 0.6dvw; /* 4px */
        --small: 1.1dvw; /* 8px */
        --small-medium: 1.7dvw; /* 12px */
        --small-medium-medium: 1.9dvw; /* 14px */
        --medium: 2.2dvw; /* 16px */
        --medium-large: 2.5dvw; /* 18px */
        --medium-large-large: 3.3dvw; /* 24px */
        --large: 4.4dvw; /* 32px */
        --large-xlarge: 6.7dvw; /* 48px */
        --large-xlarge-xlarge: 7.8dvw; /* 56px */
        --xlarge: 8.9dvw; /* 64px */
        --xxlarge: 12.8dvw; /* 92px */
        --xxxlarge: 17.8dvw; /* 128px */

        --game-container-size: calc(100dvw - var(--small) - var(--small));
    }

    #main-menu-button {
        width: 12.3dvw;
    }

    .large-logo {
        height: var(--large);
    }

    #outer-container {
        flex-direction: column-reverse;
        justify-content: flex-end;
    }

    #game-container {
        width: var(--game-container-size);
        height: var(--game-container-size);
        max-width: var(--game-container-size);
        max-height: calc(100dvh - var(--small) - var(--xxlarge) - var(--small) - var(--small) - var(--large-xlarge) - var(--small) - var(--small));
    }

    #popup-container {
        transform: scale(0.75);
    }

    #hints-container {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
    }

    .hint {
        width: 16.66%;
        max-width: var(--xxlarge);
        border-radius: var(--medium);
    }

    #timer-row {
        max-width: calc(100dvw - var(--small) - var(--small));
    }

    .timer-text {
        font-size: 4.65dvw;
    }

    .timer-container {
        width: 29%;
    }

    .hint-meter-text {
        font-size: var(--medium-large);
    }

    .date-selector-button {
        height: 6.7dvw;
    }

    #calendar-container {
        width: 100dvw;
        max-width: 73dvh;
    }

    .day {
        font-size: var(--large);
    }

    .archive-star {
        width: var(--medium-large);
    }

    .archive-medal {
        width: var(--large);
    }
}