@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    touch-action: manipulation;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

div {
    color: white;
}

.basic-main {
    color: var(--main-theme-text);
    background-color: var(--main-theme);
}

.blinking {
    animation: blink-main 2s infinite ease-in-out;
}

@keyframes blink-main {
    0% {
        color: var(--main-theme);
    }

    50% {
        color: var(--accent-theme);
    }

    100% {
        color: var(--main-theme);
    }
}

.main-border {
    background-color: var(--main-background);
    border: 5px solid var(--main-theme) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.main-color {
    color: var(--main-theme);
}

.good-card {
    color: var(--main-good);
}

.bad-card {
    color: var(--main-bad);
}

.bad-border {
    background-color: var(--main-background);
    border: 5px solid var(--main-bad) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.btn-primary {
    color: var(--main-theme-text);
    background-color: var(--main-theme);
    border-color: black;
    margin: 1em;
}

    .btn-primary:hover {
        color: var(--main-theme-text);
        margin: 1em;
        background-color: var(--main-theme);
        border-color: var(--main-theme);
    }

.btn-outline-primary {
    color: var(--main-theme);
    background-color: var(--accent-theme);
    border-color: var(--main-theme);
    margin: 1em;
}

    .btn-outline-primary:hover {
        color: var(--main-theme-text);
        margin: 1em;
        background-color: var(--main-theme);
        border-color: var(--main-theme);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--main-theme), 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #cc8f3a;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.first-dot {
    animation: fade-in 1s infinite linear;
    animation-direction: alternate;
    color: var(--main-theme);
    opacity: 0;
}

.second-dot {
    animation: fade-in 1s infinite linear;
    animation-direction: alternate;
    animation-delay: .5s;
    color: var(--main-theme);
    opacity: 0;
}

.third-dot {
    animation: fade-in 1s infinite linear;
    animation-direction: alternate;
    animation-delay: 1s;
    color: var(--main-theme);
    opacity: 0;
}

.fade-in {
    animation: fade-in-ani 1s 1 linear;
    opacity: 1;
}

.opp-card {
    transition: left 1s;
    animation: fade-in-ani 1s 1 linear;
    opacity: 1;
}

.opp-table th, td {
    text-align: center;
    border: 1px solid black;
    padding:1em;
}

.opp-table th:first-child, td:first-child {
    border-left: none;
}

.opp-table th:last-child, td:last-child {
    border-right: none;
}

@keyframes fade-in-ani {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.flex-r-100 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.flex-r {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.flex-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-c-start {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.flex-c-sa {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.flex-r-100-sa {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.flex-r-100-sb {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.flex-r-100-se {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.flex-r-100-sb > div:only-child {
    margin-right: auto; /* Pushes the single item to the left */
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    transition: transform 0.8s;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card .flip-card-inner-flip {
    transform: rotateY(180deg);
}

.flip-card .flip-card-inner-flip-twice {
    transform: rotateX(90deg);
    transition-duration: .75s;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: var(--card-border-radius);
    border: 5px solid black;
    overflow: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-back {
    background-color: #bbb;
}

/* Style the back side */
.flip-card-front {
    transform: rotateY(180deg);
}

button:not(:disabled) {
    box-shadow: rgba(var(--main-theme-rgb), 0.2) 0px 0px 24px, rgba(var(--main-theme-rgb), 0.2) 0px 0px 39px, rgba(var(--main-theme-rgb), 0.2) 0px 0px 60px;
}

a {
    text-decoration: none;
}

.main-page-main-text {
    align-items: start;
    width: fit-content;
}

.card {
    height: var(--card-height);
    width: var(--card-width);
    border-radius: var(--card-border-radius);
    margin: var(--card-margin);
    overflow: hidden;
    border: none;
}

/* Drag and Drop */
.dropzone {
    padding: .5em;
    margin: .5em;
    border: 1px dashed #75868a;
    border-radius:1em;
}

.no-drop {
    border: 2px dashed red;
}

.can-drop {
    border: 2px dashed var(--main-theme);
    cursor: pointer;
}

.draggable {
    margin-bottom: 10px;
    padding: 10px 25px;
    border: 1px solid #424d5c;
    cursor: grab;
    background: #5c6b7f;
    color: #ffffff;
    border-radius: 5px;
    width: 250px;
}

    .draggable:active {
        cursor: grabbing;
    }

.dragging {
    cursor: grabbing;
}

.error-highlight {
    border: 3px solid red;
}

.modal-stuff {
    color: white;
    background-color: #063658;
}

.play-mat {
    background: rgba(var(--main-theme-rgb), .8);
    padding: 0 .5em;
    color: var(--main-theme-text);
    border-radius: 5px;
}

.play-mat-opp {
    background: rgba(var(--main-theme-rgb), .8);
    color: var(--main-theme-text);
    padding: 0 .5em;
    border-radius: 5px;
}

.draw-box {
    border: 1px solid black;
    border-radius: 5px;
    padding: .5em;
}

.modal-content {
    background-color: transparent !important;
}

.gen-modal-dialog {
    margin: 0;
}

.cover-back {
    background-color: #0C0C0C;
    background-image: url('https://www.transparenttextures.com/patterns/dark-mosaic.png');
}

/* Hide scrollbar for Chrome, Safari and Opera */
.mobile-many::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.mobile-many {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.player-block {
    border-radius: 1em;
    border: 2px solid var(--main-theme);
    padding: .25em;
    margin: 5px;
    width: calc(var(--card-width) + 1em);
    transition: all .3s ease;
}

.selectable-player {
    box-shadow: rgba(var(--accent-theme-rgb), 0.5) 0px 0px 24px, rgba(var(--accent-theme-rgb), 0.5) 0px 0px 39px, rgba(var(--accent-theme-rgb), 0.5) 0px 0px 60px;
    cursor:pointer;
}

.turning-gold {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.4), /* Start with 40% opaque gold */
    rgba(255, 215, 0, 0) 33% /* End with 0% opaque (fully transparent) gold */
    );
}

.more-turning-gold {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.4), /* Start with 40% opaque gold */
    rgba(255, 215, 0, 0) 90% /* End with 0% opaque (fully transparent) gold */
    );
}

.all-gold {
    background: rgba(255, 215, 0, 0.4);
}

.my-turn {
    box-shadow: 0 0 16px 4px rgba(197,162,83,0.7);
    border-radius: 1em;
}

.pulse-element {
    animation: pulse 4s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1); /* Starting size */
    }

    50% {
        transform: scale(1.1); /* Peak size */
    }

    100% {
        transform: scale(1); /* Return to starting size */
    }
}

/* Define the animation */
.shake-repeat {
    animation: shake 3s infinite;
}

/* @keyframes rule for the animation */
@keyframes shake {
    /* Rest period: No movement for the first 87.5% of the total animation duration (3.5s of 4s) */
    0% {
        transform: translate(0, 0);
    }

    87.5% {
        transform: translate(0, 0);
    }

    /* Shake movement: Rapid translation and rotation for the remaining 12.5% (0.5s of 4s) */
    90% {
        transform: translate(-2px, -2px) rotate(-1deg);
    }

    92% {
        transform: translate(2px, 2px) rotate(1deg);
    }

    94% {
        transform: translate(-2px, 2px) rotate(0deg);
    }

    96% {
        transform: translate(2px, -2px) rotate(-1deg);
    }

    98% {
        transform: translate(-2px, -2px) rotate(1deg);
    }

    100% {
        transform: translate(0, 0);
    }
    /* End back at the starting position */
}

.adjustable-width-40-100 {
    transition: all .3s ease;
}

:root {
    --card-width: calc(var(--card-height)/14*9);
}

/* Mobile */
@media (max-width: 640.98px) {
    :root {
        --card-height: 11em;
        --card-border-radius: 1em;
        --card-margin: .25em;
        --my-hand-bottom: var(--card-margin);
    }

    .adjustable-width-40-100, .adjustable-width-60-100 {
        width: 90%;
    }

    .adjustable-position-fixed {
        position: relative;
    }

    .hide-in-mobile {
        display: none;
    }

    .mobile-blocker {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('https://images.unsplash.com/photo-1544914379-806667cd9489?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        position: absolute;
        height: 100vh;
        width: 100vw;
        z-index: 1;
    }

    .switch-flex {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

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

    .logo-img {
        width: 75%;
    }
}

/* Desktop */
@media (min-width: 641px) {
    :root {
        --card-height: 14em;
        --card-border-radius: 1em;
        --card-margin: .5em;
        --my-hand-bottom: 0;
    }

    .adjustable-width-40-100 {
        width: 38%;
    }
    
    .adjustable-width-60-100 {
        width: 58%;
    }

    .adjustable-position-fixed {
        position: absolute;
        top: 2em;
        right: 2em;
    }

    .hide-in-desktop {
        display: none;
    }

    .mobile-blocker {
        display: none;
        z-index: -1;
    }

    .switch-flex {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .switch-flex-space {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        flex-wrap: wrap;
    }

    .logo-img {
        width: 25%;
    }
}