[v-cloak] {
    visibility: hidden;
    display: none;
    border: red 1px solid;
}

@font-face {
    font-family: text;
    src: url(/res/fonts/font.ttf);
}

@font-face {
    font-family: font;
    src: url(/res/fonts/christmas_day.otf);
}

:root {
    --main-hue: 50;
    --main-saturation: 12%;
    --main-lightness: 28%;

    --main-hue-50: 50;
    --main-saturation-50: 10%;
    --main-lightness-50: 22%;
    --main-neutral: #4A4840;
    --main-text-neutral: #6A6860;

    --main-neutral-disabled: #9A988E;
    --main-text-neutral-disabled: #A8A69C;

    --color-bg: #E8E6DC;
    --color-brown: #4A4840;
    --color-gold: #8A8678;
    --color-paper: #F0EEE6;
    --color-text: #3A3832;
}

body {
    user-select: none;
}

.font {
    font-family: 'font', sans-serif;
    font-size: 2rem;
    font-weight: regular;
    letter-spacing: .1rem;
}

.text {
    font-family: 'text', sans-serif;
    font-size: 2rem;
    font-weight: regular;
}

.card {
    font-family: 'text', sans-serif;
    cursor: pointer;
}

.player-card {
    transition: transformation 0.2s ease;
}

.selected {
    transform: translateY(-1.5rem);
}

.debug {
    border: 1px solid red;
}

.debug-in > * {
    border: 1px solid red;
}

@keyframes bounceHorizontal {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(25%);
    }
}

.bounce-h {
    animation: bounceHorizontal 1s infinite;
}

@layer utilities {
    .fade-move {
        transition: all 0.5s ease;
    }
    .fade-enter-active, .fade-leave-active {
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);;
    }
    .fade-enter-from {
        transform: translateY(-50px);
    }
    .fade-leave-to {
        transform: translateY(50px);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-7px); }
    20%, 40%, 60%, 80% { transform: translateX(7px); }
}

.disabled:active {
    animation: shake 2s;
    transition: transform 0.3s ease;
}

.bg-hand {
    /* background-color: hsla(var(--main-hue), var(--main-saturation), 30%, .6) */
    background-color: hsla(var(--main-hue-50), var(--main-saturation-50), var(--main-lightness-50), .4)
}

.bg-main-disabled,
.border-main-disabled,
.ring-main-disabled {
    background-color: var(--main-neutral-disabled)
}

.text-main-disabled {
    color: var(--main-text-neutral-disabled)
}

.bg-main,
.border-main,
.ring-main {
    background-color: var(--main-neutral)
}

.text-main {
    color: var(--main-text-neutral)
}

/* background: radial-gradient(#777, #000); */

.number-card {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    color: transparent; /* text-transparent  */
    border-width: 4px; /* border-4 */
    background-color: transparent;
    background-size: contain;
}

.number-card-slot {
    border-width: 0; /* border-black */
    background-color: transparent;
    box-shadow: none;
}

.number-card-0 { border-color: none; background-color: #9ca3af; background-image: url(/res/img/card-0.png); }
.number-card-1 { border-color: black; background-color: #F95987; background-image: url(/res/img/card-1.png); }
.number-card-2 { border-color: black; background-color: #F42E49; background-image: url(/res/img/card-2.png); }
.number-card-3 { border-color: black; background-color: #FF9C49; background-image: url(/res/img/card-3.png); }
.number-card-4 { border-color: black; background-color: #FCD619; background-image: url(/res/img/card-4.png); }
.number-card-5 { border-color: black; background-color: #C0CE7F; background-image: url(/res/img/card-5.png); }
.number-card-6 { border-color: black; background-color: #e5846b; background-image: url(/res/img/card-6.png); }
.number-card-7 { border-color: black; background-color: #3759B3; background-image: url(/res/img/card-7.png); }
.number-card-8 { border-color: black; background-color: #AC489B; background-image: url(/res/img/card-8.png); }

#bg.main .text {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: regular;
}

#bg.main .font {
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: regular;
    letter-spacing: normal;
}

#bg.main {
    background-color: var(--color-bg);
}

#bg.main::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22%3E%3Cpath d=%22M30,5 L55,30 L30,55 L5,30Z%22 fill=%22none%22 stroke=%22%234A4840%22 stroke-width=%221%22/%3E%3C/svg%3E');
    background-size: 60px 60px;
}

body.main {
    position: relative;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: var(--color-bg);
}