:root {
    --darkertxt: rgb(58, 56, 55);
    --darktxt: rgb(99, 99, 99);
    --lighttxt: antiquewhite;
    --lightertxt: white;
    --biggertxt: 40px;
    --bigtxt: 35px;
    --mediumtxt: 27px;
    --smalltxt: 18px;
    --boxsize: 50px;
    --cellsize: 64px;
  }
body {
    max-width: fit-content;
    max-height: 100dvh;
    transform-origin: 0 0;
    font-family: sans-serif;
    overflow: clip;
}
.menu {
    visibility: hidden;
    position: fixed;
}
.menuh {
    visibility: hidden;
    background-color: var(--lighttxt);
    display: flex;
    position: fixed;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: 8px;
    z-index: 3;
}
.menuc {
    visibility: visible;
    background-color: var(--lighttxt);
    display: flex;
    position: fixed;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: 8px;
    z-index: 3;
    animation-name: collapse;
    animation-duration: 0.3s;
    transform-origin: 0 0;
    overflow-y: hidden;
}
.menuc button{
    height: 50px;
    width: 50px;
    background-color: rgb(226, 226, 96);
    font-size: large;
    color: var(--darkertxt);
    font-weight: bold;
    border-radius: 7px;
    margin: 7px;
    animation: overshoot 0.5s;
}

.gamebox span {
    position: static;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-radius: 3px;
    font-weight: bold;
    text-align: center;
    animation-timing-function: ease-out;
    animation-duration: 0.3s;
}
.gamebox div {
    position: static;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-radius: 3px;
    font-weight: bold;
    text-align: center;
    background-color: rgb(141, 133, 133);
}
.gamebox {
    margin-top: 8px;
    display: grid;
    gap: 4px;
    background-color: rgb(110, 105, 102);
    width: fit-content;
    justify-items: center;
    padding: 8px;
    border-radius: 6px;
    transform-origin: 0 0;
}
.header {
    display: flex;
    width: 300px;
    height: 64;
    justify-content: space-between;
    margin-bottom: 5px;
}
.hbuttons button {
    height: 50px;
    width: 50px;
    background-color: rgb(228, 228, 146);
    font-size: xx-large;
    color: var(--darkertxt);
    font-weight: bold;
    border-radius: 7px;
}
#score {
    font-size: var(--bigtxt);
    width: auto;
    color: var(--darkertxt);
    font-weight: bold;
    margin-top: 0;
}
#hscore {
    font-size: 22px;
    text-size-adjust: auto;
    width: 50px;
    font-weight: bold;
    margin-top: 0;
    color: var(--darktxt);
}
.zero {
    font-size: var(--biggertxt);
    color: rgba(141, 133, 133, 0);
    background-color: rgba(141, 133, 133, 0);
}
.two {
    font-size: var(--biggertxt);
    color: var(--darktxt);
    background-color: var(--lighttxt);
}
.four {
    font-size: var(--biggertxt);
    color: var(--darktxt);
    background-color: rgb(223, 207, 168);
}
.eight {
    font-size: var(--biggertxt);
    color: var(--lighttxt);
    background-color: rgb(214, 147, 109);
}
.sixteen {
    font-size: var(--biggertxt);
    color: var(--lighttxt);
    background-color: rgb(226, 123, 110);
}
.thirtytwo {
    font-size: var(--biggertxt);
    color: var(--lighttxt);
    background-color: #f34c4c;
}
.sixtyfour {
    font-size: var(--biggertxt);
    color: var(--lighttxt);
    background-color: red;
}
.onetwentyeight {
    font-size: var(--bigtxt);
    color: var(--lightertxt);
    background-color: rgb(216, 209, 118);
}
.twofiftysix {
    font-size: var(--bigtxt);
    color: var(--lightertxt);
    background-color: rgb(221, 213, 98);
}
.fivetwelve {
    font-size: var(--bigtxt);
    color: var(--lightertxt);
    background-color: rgb(230, 228, 68);
}
.tentwentyfour {
    font-size: var(--mediumtxt);
    color: var(--lightertxt);
    background-color: rgb(236, 234, 55);
}
.twentyfortyeight {
    font-size: var(--mediumtxt);
    color: var(--lightertxt);
    background-color: rgb(223, 223, 0);
}
.higher {
    font-size: var(--smalltxt);
    color: var(--lightertxt);
    background-color: rgb(89, 0, 255);
}
@keyframes new {
from {transform:scale(0.5,0.5);}
to {transform:scale(1,1);}
}
@keyframes toLeft {
from {transform: translateX(64px);}
to {transform: translateX(0px);}
}
@keyframes toRight {
from {transform: translateX(-64px);}
to {transform: translateX(0px);}
}
@keyframes upward {
from {transform: translateY(64px);}
to {transform: translateY(0px);}
}
@keyframes downward {
from {transform: translateY(-64px);}
to {transform: translateY(0px);}
}
@keyframes to4 {
    from {background-color: var(--lighttxt)}
    to {background-color: rgb(223, 207, 168);}
    }
@keyframes to8 {
        from {background-color: rgb(223, 207, 168);}
        to {background-color: rgb(214, 147, 109);}
        }
@keyframes to16 {
            from {background-color: rgb(214, 147, 109);}
            to {background-color: rgb(226, 123, 110);}
        }
@keyframes to32 {
           from {background-color: rgb(226, 123, 110);}
           to {background-color: #f34c4c;}
    }
@keyframes to64 {
        from {background-color: #f34c4c;}
        to {background-color: red;}
 }
@keyframes to128 {
    from {background-color: red;}
    to {background-color: rgb(216, 209, 118)}
}
@keyframes to256 {
    from {background-color: rgb(216, 209, 118)}
    to {background-color: rgb(221, 213, 98);}
}
@keyframes to512 {
    from {background-color: rgb(221, 213, 98);}
    to {background-color: rgb(230, 228, 68);}
}
@keyframes to1024 {
    from {background-color: rgb(230, 228, 68);}
    to {background-color: rgb(236, 234, 55);}
}
@keyframes to2048 {
    from {background-color: rgb(236, 234, 55);
        font-size: var(--bigtxt);}
    to {background-color: rgb(223, 223, 0);
        font-size: var(--mediumtxt);}
}
@keyframes tohigher {
    from {background-color: rgb(223, 223, 0);
        font-size: var(--bigtxt);}
    to {background-color: rgb(89, 0, 255);
        font-size: var(--smalltxt);}
}
@keyframes tohigher2 {
    from {font-size: var(--bigtxt);}
    to {font-size: var(--smalltxt);}
}
@keyframes collapse {
    from {height: 0px;}
    to {height: 64px;}
}
@keyframes overshoot {
    0%   {transform: translateY(-80px);}
    60%  {transform: translateY(6px);}
    100% {transform: translateY(0px);}
  }

.left { 
    grid-area: left; 
    border-radius: 7px 2px 2px 7px;
    border-width: 3px 1px 3px 3px;
    }
.up { 
    grid-area: up; 
    border-width: 3px 1px 1px 1px;
    }
.down { 
    grid-area: down;
    border-width: 1px 1px 3px 1px;
    }
.right { 
    grid-area: right; 
    border-radius: 2px 7px 7px 2px;
    border-width: 3px 3px 3px 1px;
    }
.vcontrols {
display: grid;
height: 128px;
max-width:100vw;
margin-top: 5px;
justify-content: center;
grid-template-columns: 64px 64px 64px;

grid-template-areas:
'left up right'
'left down right';
gap: 1px;
}
.vcontrols > div {
background-color: rgb(161, 153, 153);
color: var(--darktxt);
text-align: center;
font-size: var(--biggertxt);
display: inline-grid;
align-content: space-around;
border-style: solid;
border-color: rgb(110, 105, 102);
cursor: pointer;
}