html, body{
  background-color:black;
  color: #dedede;
    width: 100%;
    height: 100%;
margin: 0px;
    padding: 0px;
    border: 0px;
      font-family: "Press Start 2P", system-ui;
  image-rendering: -webkit-optimize-contrast;
}
#canv{
    position: fixed;
    z-index: 10;
    width: 100%;
margin: 0px;
    padding: 0px;
    border: 0px;
    height: 100dvh;
  background: linear-gradient(
    to bottom,
    gray 0%,
    black 40%,
    black 60%,
    #333 100%
  );
    mix-blend-mode: screen;
}

#stats {
    display: none;
}
#treasure {
  position: absolute;
  width: 45dvh;
  height: 50dvh;
  pointer-events: none;
  display: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#instructions {
position: fixed; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 5dvh 5dvh;background: #3bebee; color: black;
width: auto; text-align: center; font-size: 1rem; line-height: 2rem;
}

#instructions a {
    display: table;
    text-decoration: none;
    margin: 20px auto 0px auto;
    padding: 20px;
    background: white;
    color: black;
    text-align: center;
}

#instructions.mobile {
    display: none;
}

#instructions small {
    display: block;
    margin: 40px auto 0px auto;
}

#instructions img {
    height: 15dvh;
    width: auto;
    display: block;
    filter: invert(1);
    margin: 0px auto;
}

#reward {
    width: 100%;
    height: 100%;
    display: none;
background: 
  url("confetti.gif"), radial-gradient(circle, rgba(90, 178, 58, 1) 0%, rgba(123, 75, 180, 1) 100%);    
    background-size: contain;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    padding: 40px;
    z-index: 99999;
    font-size: 24px;
    align-content: center;
    text-align: center;
}

#reward h1 {
    font-weight: 400;    
    font-size: 6dvw;
    line-height: 6dvw;
    color: red;
}

#reward p {
    color: yellow;
    font-size: 1.5rem;
    line-height: 2rem;
}

#reward .links {
    display: table;
    max-width: 700px;
    margin: 0px auto 0px auto;
}

#reward a {
    margin: 30px 10px;
    text-decoration: none; 
    color: yellow;
}

#reward small {
    font-size: 0.8rem;
}

#reward a img {
    height: 50px;
    width: auto;
    display: inline;
    margin: 0px;
    filter: invert(1);
}

#reward a:hover {
    filter: invert(0);
}

/* Mobile-only arrow controls */
#mobilearrows{
  position: fixed;
  z-index: 1;
  display: none; /* enabled via media query */
}

#mobile-controls .mc-btn{
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Up / Down / Left / Right hit areas (tuned to your sprite) */
#mobile-controls .mc-up    { left: 26%; top: 0%;    width: 48%; height: 52%; }
#mobile-controls .mc-down  { left: 26%; bottom: 0%; width: 48%; height: 52%; }
#mobile-controls .mc-left  { left: 0%;  top: 26%;   width: 52%; height: 48%; }
#mobile-controls .mc-right { right: 0%; top: 26%;   width: 52%; height: 48%; }

/* Show only on touch/mobile-sized screens */
@media (hover: none) and (pointer: coarse), (max-width: 820px){

  #mobilearrows{ display: block; width:100dvw;height:100dvh}
    #instructions.mobile {display: block;width: 100dvw;height: 100dvh;align-content: center}
    #instructions.mobile a {margin-bottom: 40px;}
    #instructions.desktop {display: none;}

    .up {
position: fixed; z-index: 1; top: 0px; left: 50%; transform: translateX(-50%); height: 10dvh;
width: auto        
    }    
    
    .down {position: fixed; z-index: 1; bottom: 0px; left: 50%; transform: translateX(-50%); height: 10dvh;
width: auto}
    
    .left {
        position: fixed; z-index: 1; top: 50%; transform: translateY(-50%); left: 0px; width: 10dvh;
height: auto
    }
    
    .right {
        position: fixed; z-index: 1; top: 50%; transform: translateY(-50%); right: 0px; width: 10dvh;
height: auto
    }
    
}



/* Show only on touch/mobile-sized screens */
@media (max-device-width: 920px) and (orientation: landscape){
    #instructions p {padding: 0px 15dvw;}
    #reward p {font-size: 1rem; line-height: 1.5rem;}
    #reward a img {padding: 10px; height: 35px;}
    .up, .down {height: 20dvh}
    .left, .right {width: 20dvh}
    #reward h1 {font-size: 4dvw; line-height: 4dvw}
}

@media (max-width: 820px) and (orientation: portrait){

#reward .links a {
    display: block;
    margin: 10px auto;
}
    
    #reward .links a img {
        height: 35px;
    } 
}