@charset "utf-8";
*{
    /* transition: 300ms cubic-bezier(0.25, 1, 0.5, 1); */
    font-variant-numeric: tabular-nums;
}
*:focus {
    outline: none !important;
}
:root {
    --brand-primary: #eb0049;
}
img{
    max-width: 100%;
    object-fit: cover;
}
svg{
    width: 24px;
    height: 24px;
}
body,
html {
    padding: 0;
    margin: 0;
    position: fixed;
    height: 100%;
    width: 100%;
}

#app{
    touch-action: none;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    max-width: 600px;
    max-height: 1200px;
    margin: auto;
    overflow: hidden;
    /* border: 2px solid #eee; */
}

@media (min-width: 769px) {
    body{
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(22,22,22,1) 0%, rgba(0,0,0,1) 100%);
    }
    #app{
        border-radius: 16px;
        overflow: hidden;
    }
}
.gm-style iframe + div { border:none!important; }

#map {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#header{
    position: absolute;
    z-index: 80;
    top: 0;
    left: 0;
    right: 0;
}
#header .icon{
    padding: 0;
    background-color: transparent;
    font-size: 70px;
    line-height: 1;
    height: auto;
    text-shadow: 6px 12px 1px rgba(0,0,0,0.1);
}
#header .icon img{
    box-shadow: 6px 12px 1px rgba(0,0,0,0.1);
}
#header > .left{
    position: absolute;
    top: 15px;
    left: 15px;
}
#header > .right{
    position: absolute;
    top: 20px;
    right: 20px;
}
#header > .right > button{
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 8px 8px 8px 16px;
    text-shadow: none;
    border-radius: 123px;
    box-shadow: 6px 12px 1px rgba(0,0,0,0.1);
}

#cover{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* background: rgb(255,255,255); */
    /* background: radial-gradient(circle, rgba(255,255,255,0) 35%, rgba(255,255,255,0.9) 95%); */
    pointer-events: none;
}

#system_error{
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.45);
}


.gm-style{
    /* filter: grayscale(1); */
}
.gm-style-moc{
    /* filter: grayscale(1); */

}

#statIcon {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background-color: gray;
    border: 2px solid #FFF;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;

    position: absolute;
    z-index: 99;
    top: 15px;
    right: 15px;
}
#statIcon.loading{
    background-color: rgb(255,0,0);
    background-image: url('https://himeme.net/assets/loading-circle-white.svg');
    transform-origin: right top;
    transform: scale(2);
}
#statIcon.red{
    background-color: rgb(255,0,0);
}
#statIcon.orange{
}
#statIcon.green{
    background-color: rgb(0,255,0);
    top: -30px;
    transition-delay: 1s;
}


/* marker styles */
.gmarker {
    /* background-color: blue; */
    width: 24px;
    height: 24px;
    position: relative;
    transform: scale(1.3);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 24px;
}
.gmarker:not(.active){
    /* filter: grayscale(0.5); */
    /* transform: scale(0.45); */
    transform: scale(0.9);
    opacity: 0.8;
    /* filter: blur(3px); */
}
.gmarker.tmphide{
    /* transform: scale(0.45); */
    transform: scale(0.9);
    opacity: 0.8;
    /* transition: 5s; */
}
.gmarker.focused{
    transform: scale(2.8);
}

#me{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
    animation: hithere 1.3s ease infinite;

    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 24px;

    pointer-events: none;
}
#me.color{
    border-radius: 50%;
    border: 2px solid dashed;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
#me.tmphide{
    transform: scale(0.45);
    animation: none;
}
#watchingPost{
    position: absolute;
    z-index: 85;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;


    background-color: rgba(234, 234, 234, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    opacity: 0;
    pointer-events: none;
    top: 20vh;
}
#watchingPost.show{
    top: 0;
    opacity: 1;
    pointer-events: initial;
    overflow: hidden;
}
#watchingPost > .dropback{
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
#watchingPost > .inner{
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 160px;
    padding: 0;
    overflow: auto;
    border-radius: 16px;

    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    z-index: 90;
    /* -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.9); */
    background-color: #FFF;
}

.anim_hithere{
    animation: anim_hithere 1.3s ease infinite;
}
@keyframes anim_hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}
.anim_rotating{
    animation: anim_rotating 2s ease infinite;
}
@keyframes anim_rotating {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}





#utilBox{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
#utilBox.openDrawer{
    bottom: 0;
}
#utilBox.hide{
    bottom: -160px;
}
#utilBox > #findMyLocation{
    position: absolute;
    z-index: 1;
    top: -120px;
    left: 0;
    width: auto;
    min-width: 50px;
    height: 50px;
    margin-left: 15px;
    border-radius: 10000px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0;
}

#utilBox > #createBtn{
    position: absolute;
    z-index: 1;
    top: -60px;
    left: 0;
    width: auto;
    min-width: 50px;
    height: 50px;
    margin-left: 15px;
    border-radius: 10000px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: rgba(0, 127, 255, 0.9);
    color: #FFF;
    padding: 0 10px;
}
#utilBox > #createBtn.hide{
    left: -80px;
}
#utilBox > #createBtn:active{
    transform: scale(0.85);
}
#utilBox > .articles{
    position: relative;
    z-index: 90;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 15px 15px 0px;
    margin-top: -5px;
    overflow-x: auto;
    overflow-y: hidden;
}
#utilBox > .articles > li{
    position: relative;
    min-width: 100px;
    max-width: 100px;
    height: 65px;
    /* background: #FFF; */
    background-color: rgba(255, 255, 255, 1);
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    box-shadow: 6px 12px 1px rgba(0,0,0,0.1);
    transform-origin: left bottom;
}
#utilBox > .articles > li.active{
    min-width: 150px;
    max-width: 150px;
    height: 90px;
}
#utilBox > .articles > li.focused{
    /* transform: translateY(-15px); */
    transform: scale(1.1);
    z-index: 2;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 6px 12px 1px rgba(0,0,0,0.1);
}
#utilBox > .articles > li:after{
    /* content: ''; */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
}
#utilBox > .articles > li .dot{
    transform: scale(1.2);
    transform-origin: left top;
}
#utilBox > .articles > li.active .dot{
    transform: scale(2.2) translateY(-7px); 
}
#utilBox .glacemorp{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 0;
    pointer-events: none;
}
.dot{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 1em;
    height: 1em;
    font-size: 12px;
}
.dot.big{
    font-size: 32px;
}

.box-shadow,
.dropdown > nav{
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
    box-shadow: 6px 12px 1px rgba(0,0,0,0.1);
}

#modal_chooseface .emojiwrap{
    height: 50vh;
    max-height: 300px;
    margin-top: -10px;
    position: relative;
}
#modal_chooseface .emojiwrap > div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 10px 0 20px;
}
#modal_chooseface .emojiwrap:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 1;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
#modal_chooseface .emojiwrap > div > button{
    padding: 0;
    line-height: 1;
    font-size: 30px;
    height: 1.5em;
    width: 20%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
}
#modal_chooseface .emojiwrap > div > button.active{
    border: 3px solid #333;
    transform: scale(1.8);
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.8);
}

.gif-coin{
    background-image: url('/scope/assets/images/mario-coins.gif');
    width: 35px;
    height: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



#utilBox, #utilBox *, 
#watchingPost, #watchingPost *,
.gmarker, .gmarker *,
#utilBox > .articles > li
{
    transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
}