:root {
  --bg-color: #787878;
  --bg-color-dark:#787878;
  --bg-color-light:#787878;
  --fg-color: #787878;
  --fg-color-dark: #787878;
  --fg-color-light: #787878;

  --accent-1: #787878;
  --accent-1-dark: #787878;
  --accent-1-light: #787878;
  --accent-2: #787878;
  --accent-2-dark: #787878;
  --accent-2-light: #787878;

  --size-w:90dvh;
  --size-mw:90vw;
  --size-h:90dvh;
  --size-mh:90vw;

  --font-size: 18px;
  --frame-width: 16px;

  --smallest-line: .5px;

  --scoreLeft: 4em;
  --score-shadow-start-x:.25em;
  --score-shadow-start-y:-.25em;
  --score-shadow-end-x:-.25em;
  --score-shadow-end-y:.25em;

  --shadow-color: rgba(80,80,80,1);

}

@font-face {
    font-family: 'Micro 5';
    src: url('Micro5-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Apple Emoji';
    src: url('AppleColorEmoji_Subset.ttf') format('truetype');
}

html, body {
  overscroll-behavior: none;
  touch-action: none;
}

html{ height:100%; }
body {
    background-color:var(--bg-color); /*rgba(0,0,0,1);*/
    /*background-image: repeating-linear-gradient(-35deg, rgba(13,13,13,1), rgba(100,100,100,1));*/
    font-family: 'Micro 5',Arial,sans-serif;
    font-size:var(--font-size);
    color:white;
    min-height: 100%;
    display:grid;
    place-items: center;
    padding:0;
    margin:0;

    background-image: url('noise1.svg');
    background-size: 50%;
}

button {
    font-family: 'Micro 5',Arial,sans-serif;
    font-size:inherit;
}

#game-container {
    display: grid;
    place-items: center;
    width:var(--size-w);
    height:var(--size-h);
    max-width:var(--size-mw);
    max-height:var(--size-mh);
    border-radius: calc(var(--smallest-line)*6);
    background-color: var(--fg-color);

    background-image: radial-gradient(circle at center, var(--bg-color) 51%, transparent 52%);
    background-size: 0% 0%;
    background-position: center;
    background-repeat: no-repeat;
    transition:background-image .1s;

    position: relative;
    overflow: hidden;

    text-align: center;

    clip-path: polygon(2% 3%, 99% 0%, 100% 97%,1% 99%);
}


#animal {
    font-size:2.4em;
    margin-top: .5em;
    text-align: center;
    z-index: 102;
    text-shadow: 0 .0625em 0 var(--shadow-color); /*rgba(0,0,0,.25);*/
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    font-family: 'Apple Emoji';
}
#animal::before {
    content:" ";
    position: absolute;
    width: 100%;
    left:0;
    top:100%;
    height: 2px;
    border-radius: 20%;
    background-color: rgba(0,0,0,0);
    transform: translateY(-.25em);
    z-index: 0;
}

.animal {
    width:fit-content;
    z-index: 0;
    font-family: 'Apple Emoji';
}

#arrow {
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:25%;
    height:12.5%;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 0;
    transition:opacity .25s, transform .25s;
}
#arrow.up {
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 90%);
    transform: translate(-50%,-60%);
}
#arrow.right {
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 10% 50%);
    transform: translate(-40%,-50%);
}
#arrow.down {
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%, 50% 10%);
    transform: translate(-50%,-40%);
}
#arrow.left {
    clip-path: polygon(0% 50%, 100% 0%, 90% 50%, 100% 100%);
    transform: translate(-60%,-50%);
}

#arrow.hidden {
    opacity: 0;
    transform: translate(-50%, -50%);
}

#direction {
    font-size:1.6em;
    text-shadow: 0 .06em 0px var(--shadow-color);

    box-shadow: 0 .25em 0 0 white;
    padding:1em;
    position: relative;
    border-radius: .25em;
    z-index: 101;

    background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
    backdrop-filter: blur(calc(var(--smallest-line) * 12));
    -webkit-backdrop-filter: blur(calc(var(--smallest-line) * 12));

    max-width: 32ch;
    margin-left:auto;
    margin-right: auto;
}
#direction::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width:1em;
    height:.75em;
    transform: translateX(-50%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    background-color: white;
    content:" ";
}

#direction,#timer {
    display: none;
}

#lines {
    position: absolute;
    left:0;
    top:0;
    right:0;
    left:0;
    width:100%;
    height:100%;
    transition:all .25s ease-in;
    filter:invert(1);
    -webkit-filter:invert(1);
}
#lines .line {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    background-color: black;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
#lines.hidden {
    transform:scale(0);
    opacity: 0;
}

#pressStart {
    cursor: pointer;
    animation: pressStart 1s infinite;
}
@keyframes pressStart {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#score {
    position: absolute;
    left:var(--scoreLeft);
    color:white;
    font-size:4em;
    text-shadow: .25em .25em 0px var(--bg-color);
    z-index: 100;
}
#score.moving {
    animation: scoreFall infinite 10s linear;
}
@keyframes scoreFall {
    0% {
        top:-2em;
        text-shadow: var(--score-shadow-start-x) var(--score-shadow-start-y) 0px var(--bg-color);
    }
    100% {
        top:100%;
        text-shadow: var(--score-shadow-end-x) var(--score-shadow-end-y) 0px var(--bg-color);
    }
}

#texture {
    position: absolute;
    left:0;
    top:0;
    right:0;
    left:0;
    width:100%;
    height:100%;
    background-image: url('noise1.svg');
    background-size: 100%;
}



#menu {
    position: fixed;
    display: grid;
    width: 5em;
    background-color: rgba(255,255,255,0);
    background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
    padding:1em;
    color:rgba(200,200,200,1);
    z-index: 20;
    grid-template-rows:auto auto; /* auto 1fr;*/
    gap:.5em;
    text-align:center;
    box-shadow: 0 .25em 0 white;
    border-radius: calc(var(--smallest-line) * 20);
    cursor:move;
    border-top: .5px solid rgba(255,255,255,.2);
    border-bottom: .5px solid rgba(120,120,120,.2);
    backdrop-filter: blur(calc(var(--smallest-line) * 12));
    -webkit-backdrop-filter: blur(calc(var(--smallest-line) * 12));
    font-family: Arial,sans-serif;
    /*right:1em;
    bottom:-1em;*/
    top:calc(100% + 3em);
    left:50%; /*calc(100% - 1em);*/
    transform: translate(-50%, -100%);
}
#menu.topleft {
    transform:inherit;
}
#menu.topright {
    transform:translateX(-100%);
}
#menu.bottomright {
    transform:translate(-100%, -100%);
}
#menu.bottomleft {
    transform:translateY(-100%);
}



#menu #buttons {
    display:grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap:.25em;
    row-gap: 0;
}
#menu #buttons > *:nth-child(2) {
    transform:translateX(calc(-50% - .125em));
}
#menu #buttons > *:nth-child(5) {
    transform:translateX(calc(50% + .125em));
}


#menu button {
    border:none;
    outline:none;
    background-color: rgba(0,0,0,0);
    border:1px solid rgba(200,200,200,1);
    color:rgba(200,200,200,1);
    cursor:pointer;
    padding:1em 1.5em;

    width:4em;
    height:4em;
    padding:0;
    border-radius: 50%;

    box-shadow: 0 .25em 0 0 white;
    text-shadow: 0 .05em 0px black;
}
#menu button {
    background-color: var(--bg-color);
    border-color: var(--bg-color);
    font-size: .6em;
}
#menu button:hover {
    box-shadow: 0 .125em 0 0 white;
    transform: translateY(.125em);
}
#menu button:active {
    box-shadow: 0 0em 0 0 white;
    transform: translateY(.25em);
}
#menu button .arrow {
    padding:0 .5em;
    background-color:white;
    clip-path: polygon(0% 90%, 50% 10%, 100% 90%);
}

#menu button#start-button {
    border:none;
    outline:none;
    background-color: rgba(0,0,0,0);
    border:1px solid rgba(200,200,200,1);
    color:white;
    cursor:pointer;
    padding:.5em .75em;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    border-radius: 0px;
    font-size: .9em;
    height:inherit;

    margin-top:1em;

    border-radius: .25em;

    box-shadow: 0 .125em 0 0 white;
}
#menu button#start-button {
    background-color: var(--bg-color);
    border-color: var(--bg-color);
}
#menu button#start-button:hover {
    transform: translateY(0);
    box-shadow: 0 .125em 0 0 white;
}
#menu button#start-button:active {
    box-shadow: 0 0em 0 0 white;
    transform: translateY(.125em);
}


#menu #info {
    font-size: .4em;
    /*opacity: .6;*/
    margin-top:2em;
    color: rgba(255,255,255,.5);
    text-shadow: 0 -1px 1px rgba(75,75,75,.25);
}

#menu #info p + p:not(#madein) {
    margin-top:-1em;
}

#menu #model,#menu #serial {
}

#menu #madein {
    text-transform: uppercase;
}

#menu input[type=checkbox] {
    appearance: none;
    
    width:2em;
    height:2em;
    margin:auto;
    cursor:pointer;

    position: relative;

    background-image: linear-gradient(to right, white 60%, transparent 60%);
    border:none;
    box-shadow: none;
    border-radius: 50%;

    clip-path: polygon(15% 62.5%, 15% 37.5%, 30% 37.5%, 70% 15%, 110% 0%, 110% 100%, 70% 85%,30% 62.5%);
    opacity: .4;

    transform:scale(.9);
}
#menu input[type=checkbox]::after {
    content:" ";
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:1em;
    height:1em;
    border-radius: 50%;
    border:2px solid white;
    display: none;
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
#menu input[type=checkbox]:checked {
    border:2px solid white;
    opacity: 1;
}
#menu input[type=checkbox]:checked::after {
    display: block;
}



#menu #signature {
    position: absolute;
    width:30%;
    right:.5em;
    top:.5em;
    text-align: right;
}


#menu #sound {
    position: absolute;
    left:.5em;
    top:.5em;
}
#menu #sound input[type=checkbox] {
    transform: scale(.7);
}
#menu #sound > p {
    margin:0px;
    opacity: .6;
    font-size:.6em;
}
#menu #sound > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap:.5em;
    align-items: center;
    justify-content: center;
}
#menu #sound > div p:first-child {
    text-align: right;
    transition:all .25s;
}
#menu #sound > div p:last-child {
    text-align: left;
    transition:all .25s;
}

#menu #logo img {
    max-width:8ch;
    width:100%;
    opacity: .6;
    transform:translate(.75ch,.5ch);
}