@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

.manrope-font {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
}

.featured-image {
    --r: 20px; /* the radius */
    --s: 30px; /* size of inner curve */
    --x: 20px; /* horizontal offset (no percentane) */
    --y: 10px; /* vertical offset (no percentage) */
    
    width: 250px;
    aspect-ratio: 1;
    background: #3FB8AF;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
    --_d:(var(--s) + var(--r));
    mask:
      calc(100% - var(--_d) - var(--x)) 100% var(--_m),
      100% calc(100% - var(--_d) - var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
       calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
      var(--_g) calc(-1*var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(-1*var(--_d) - var(--y));
    mask-repeat: no-repeat;
}

canvas {
    width: 800px!important;
    height: 600px!important;
}
.game-canvas {
    width: 800px!important;
    height: 600px!important;
}
.frame-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.game-frame {  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;  
}

.luckiest-font {
    font-family: 'Luckiest Guy', cursive;  
}

.open-sans {
    font-family: 'Open Sans', sans-serif;
}

.field.error input {
    border:1px solid #EF4444!important;
}

.disabled {
    pointer-events: none;
    opacity: 0.8;
}

.loading:before {
    opacity: 1;
    content: "";
    z-index: 1001;
    display: inline-block;
    height: 1rem!important;
    width: 1rem!important;
    margin-right: 5px;
    border-radius: 50%;
    border: 2px solid white;
    border-color: white transparent white transparent;
    animation: loading-ring 1.2s linear infinite;
}

@keyframes loading-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}