@font-face {
    font-family: PilcrowRounded;
    src: url(PilcrowRounded-Heavy.otf);
}

body { margin: 0; }
canvas { display: block; }
html { box-sizing: border-box; }
html, body { height: 100%; }
*, *:before, *:after { box-sizing: inherit; }
h1,p {
    position: relative;
    color: rgb(255, 255, 255);
    font-family: PilcrowRounded;
}
img {
    pointer-events: none;
}

#unity-container {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#unity-canvas {
    width: 100%;
    height: 100%;
}

#loading-cover {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 80%;

}

#loading-word {
    display: flex;
}
#loading-word img {
    max-width: 7%;
}

.background {
    width: 100%;
    height: 100%;
    filter: brightness(0.5);
    position: absolute;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

#unity-loading-img {
    display: block;
    margin-left: auto;
    max-width: 50%;
}

#unity-loading-img img {
    max-width: 100%;
    width: 471px;
    height: 88px;
    background: transparent;
}

.loading-letter-anim {
    position: relative;
    animation: jumping 6s infinite;
    animation-delay: var(--delay);
}

@keyframes jumping {
    0% { bottom: 0px; transform: rotate(0deg); }
    9% { bottom: 20px; }
    18%,100% { bottom: 0px; transform: rotate(360deg); }
}

.loading-star-anim {
    position: relative;
    animation: var(--anim) 2s infinite;
    animation-delay: 0s;
}

@keyframes stardrop-L1 {
    0% { bottom: 30px; right: -10px; transform: rotate(0deg); opacity: 1.0; }
    50% { bottom: 40px;}
    100% { bottom: 35px; right: 20px; transform: rotate(360deg); opacity: 0.0; }
}
@keyframes stardrop-L2 {
    0% { bottom: 30px; right: -20px; transform: rotate(0deg); opacity: 1.0; }
    50% { bottom: 40px;}
    100% { bottom: 35px; right: 30px; transform: rotate(360deg); opacity: 0.0; }
}
@keyframes stardrop-R1 {
    0% { bottom: 30px; left: -10px; transform: rotate(0deg); opacity: 1.0; }
    50% { bottom: 40px;}
    100% { bottom: 35px; left: 20px; transform: rotate(360deg); opacity: 0.0; }
}
@keyframes stardrop-R2 {
    0% { bottom: 30px; left: -20px; transform: rotate(0deg); opacity: 1.0; }
    50% { bottom: 40px;}
    100% { bottom: 35px; left: 30px; transform: rotate(360deg); opacity: 0.0; }
}

#unity-loading-bar {
    position: relative;
    margin-top: 5%;
}

#game-logo {
    position: relative;
    max-width: 50%;
    max-height: 50%;
    width: auto;
    height: auto;
}

#game-logo img {
    max-width: 100%;
    width: 5911px;
    height: 3622px;
    background: transparent;
}

#unity-progress-bar-empty {
    width: 100%;
    height: 28px;
    margin: 10px 0px;
    
    -webkit-mask-image: url('./images/Bar_Loading_mask.png');
    mask-image: url('./images/Bar_Loading_mask.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; 
    -webkit-mask-size: 100% 28px;
    mask-size: 100% 28px;
}

#unity-progress-bar-empty img {
    position: absolute;
    width: 100%;
    height: 28px;
}

#unity-progress-bar-full {
    position: absolute;
    width: 0%;
    height: 100%;
    background: transparent;
}

.light #unity-progress-bar-empty {
    border-color: black;
}

.light #unity-progress-bar-full {
    background: black;
}

#unity-loading-flavor-text {
    font-size: 25px;
}

.spinner,
.spinner:after {
    border-radius: 50%;
    width: 5em;
    height: 5em;
}

.spinner {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    transform: translateZ(0);
    animation: spinner-spin 1.1s infinite linear;
}

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


.walletconnect-modal__footer {
    flex-wrap: wrap;
}
#walletconnect-wrapper{
    z-index: 9 !important;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.modal-item {
    display: block; 
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    scale: 80%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@keyframes arrow-2landscape {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(-150px) rotate(45deg); opacity: 0.8;}
    30% { opacity: 1; } 
    50% { transform: translate(-50%, -50%) rotate(180deg) translateX(-180px) rotate(45deg); }
    70% { opacity: 0; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(-150px) rotate(45deg); opacity: 0;}
}
@keyframes arrow-2portrait {
    0% { transform: scaleX(-1) translate(50%, -50%) rotate(0deg) translateX(-180px) rotate(45deg); opacity: 0.8;}
    30% { opacity: 1; } 
    50% { transform: scaleX(-1) translate(50%, -50%) rotate(180deg) translateX(-150px) rotate(45deg); }
    70% { opacity: 0; }
    100% { transform: scaleX(-1) translate(50%, -50%) rotate(360deg) translateX(-180px) rotate(45deg); opacity: 0;}
}

@keyframes phone-2landscape {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(-9deg); }
    30% { transform: translate(-50%, -50%) rotate(0deg); }
    70% { transform: translate(-50%, -50%) rotate(99deg); }
    75% { transform: translate(-50%, -50%) rotate(90deg); }
    100% { transform: translate(-50%, -50%) rotate(90deg); }
}
@keyframes phone-2portrait {
    0% { transform: translate(-50%, -50%) rotate(90deg); }
    25% { transform: translate(-50%, -50%) rotate(90deg); }
    30% { transform: translate(-50%, -50%) rotate(99deg); }
    70% { transform: translate(-50%, -50%) rotate(0deg); }
    75% { transform: translate(-50%, -50%) rotate(-9deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}