html{
    background-color: #000d;
}
body{
    margin:4px;
    width :calc(100vw - 8px);
    height:calc(100vh - 8px);
    --size:60px;
}
body *{
    box-sizing: border-box;
    font:20px helvetica;
    -webkit-text-stroke-width: medium;
    font-variant-caps: small-caps;
}
input{
    font:1.6em;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
}
input:hover{
    transform:scale(1.4);
    color:cyan;
    background-color: #000d;
}

#bar{
    position:absolute;
    right:0;
    top:0;
    margin:16px;
    display: inline-grid;
    grid-auto-flow: column;
    column-gap: 10px;
    align-items: center;
}
#re, #timediv, #level{
    display:inline-block;
    padding:4px;
    color:lawngreen;
    cursor: default;
    transition: all .2s;
}
#re{
    background: url(files/reload.png);
    background-size: cover;
    width:26px;
    height:26px;
}
#level:hover, #timediv:hover{
    transform: scale(1.1) translateY(-2px);
    color: cyan;
}
.alt{
    display: none;
    width:0;
    height:0;
    opacity: 0;
}
#re:hover .alt{
    display: block;
    animation: ani-show .2s cubic-bezier(0,0,0,1.4) forwards;
    animation-delay: .1s;
}
#re:hover .alt>div{
    position: relative;
    width:80px;
    width:fit-content;
    font-size: .8em;
    -webkit-text-stroke-width: thin;
    text-align: center;
    top: 44px;
    left:-25px;
    color: lawngreen;
    padding-left:4px;
    padding-right:4px;
    box-shadow: 0px 0px 8px black;
    background: navy;
    white-space: nowrap;
    cursor: pointer;
}
.marker{
    width:0;
    height:0;
    margin-left:35%;
}
.marker div{
    width: 16px;
    height: 11px;
    /* transform: rotateZ(45deg); */
    top: -8px;
    position: relative;
    background: navy;
    border-radius: 4px;
}

.logo{
    font:24px cursive;
    color:navy;
    font-variant: small-caps;
    background-color: orangered;
    position: relative;
    top:-130px;
    left:-2px;
    border:1px solid cyan;
    padding:8px;
    border-radius: 12px;
    cursor: default;
    border-radius: 100% 100% 2% 100%;
    transform: rotate(50deg);
    width: 64px;
    height:64px;
    animation: anibeat infinite alternate ease-in-out 2s;
}
.logo div{
    transform: rotate(-50deg);
    text-align: center;
    position: relative;
    top:2px;
    left:2px;
}
.tile{
    width:var(--size);
    height:var(--size);
    background:dodgerblue;
    display: inline-block;
    border-radius: 12px;
    transform: rotateZ(-10deg);
    border:4px solid #0002;
    cursor: url(files/ufo.ico), default;
}
.tile:hover{
    border-color: blue;
}
.hov{
    display: none;
    /* display: inline-grid; */
    position: fixed;
}
.start{
    display: inline-grid;
    width:0;
    height: 0;
    transition: all 1s;
}
.start > .tile{
    background: url(files/sad.png);
    background-size: cover;
    border:none;
}
.start:hover > .logo{
    display:none;
}
.hov:hover{
    z-index: 2;
}
.hov:hover > .hov{
    display: inline-grid;
}
.end > .tile{
    background: url(files/smile.png);
    background-size: cover;
    border:none;
    cursor: pointer;
}
.fake{
    animation: anirot infinite alternate ease-in-out 1s;
}
.fake > .tile{
    background: url(files/skull.png);
    background-size: cover;
    border:none;
}


dialog{
    background-color:skyblue;
	text-align:center;
	box-sizing:border-box;
    width:initial;
	width: fit-content;
    min-height: initial;
    padding: 16px;
    border: 8px solid dodgerblue;
    border-radius: 20px;
    top: 120px;
    z-index: 2;
    font-size: min( 2em, 10vw);
}
dialog>div{
    font-size: min( 2em, 10vw);
}
dialog::backdrop {
    background: linear-gradient(0deg, #0f02, transparent);
}
.grid{
    display: grid;
    grid-auto-flow: column;
    justify-content: space-around;
    margin-top: 20px;
}
.anipop{
	animation:anifade ease-in-out 3s;
	animation-delay:-.5s;
}



@keyframes anifade{
	0%{
		opacity:0;
		transform:translateY(-300px);
	}
	25%{
		opacity:.8;
		transform:translateY(0);
	}
	75%{
		opacity:.8;
		transform:translateY(0);
	}
	90%{
		opacity:0;
	}
	100%{
		opacity:0;
		transform:translateY(-300px);
	}
}
@keyframes anirot{
    from {
        transform:rotate(-60deg);
    }
    to{
        transform: rotate(60deg);
    }
}
@keyframes anibeat{
    to{
        transform: scale(1.1) rotate(46deg);
    }
}
@keyframes ani-show{
    100%{
        transform:scale(1.2) translateY(-20px);
        opacity:1;
    }
}