Game.css

*, *::before, *::after {
  box-sizing: border-box;
  user-select: none;
}
body {
  background: #000;
  color: #B2CDDE;
  font-size: 24px;
  font-family: courier new;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  height: 100vh;
  position: relative;
}
#msg {
  font-size: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #019F35;
}
span {
  display: inline-block;
}
#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2000;
  display: none;
}
#status {
	background-color: #000;
  height: 27px;
  color: white;
}
#sentence {
  text-align: center;
  line-height: 33px;
  color: white;
  background-color: black;
}
#controls {
  background-color: black;
  height: 82px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji";
  filter: grayscale(1);
}
#controls span:hover, #itemlist div:hover {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
}
#controls div {
  float: left;
}
.arrows {
  width: 42px;
}
.arrows span {
  font-size: 40px;
  height: 80px;
  width: 40px;
  line-height: 75px;
  text-align: center;
  background-color: #2d2022;
  margin: 1px;
  cursor: var(--➕);
}
#items {
  width: 463px;
  height: 82px;
  background-color: #2d2022;;
  margin: 1px;
  overflow: hidden;
  position: relative;
}
#itemlist {
  position: absolute;
  left: 0px;
  width: 2000px;
  transition: left 100ms ease-in-out;
}
#itemlist span {
  width: 75px;
  margin: 1px;
  height: 80px;
  text-align: center;
  line-height: 75px;
  font-size: 40px;
}
#commands {
  width: 410px;
  font-size: 0px;
  cursor: var(--➕);
}
#commands span {
  background-color: #2d2022;
  width: 80px;
  margin: 1px;
  height: 80px;
  text-align: center;
  line-height: 75px;
  font-size: 40px;
}
#wrap {
  top: 50vh;
  left: 50vw;
  width: 960px;
  height: 627px;
  position: absolute;
  overflow: hidden;
  transform: scale3d(var(--scale-x), var(--scale-y), 1)  translate(-50%, -50%);
  transform-origin: 0 0;
  opacity: 0;
}
#screen {
  position: relative;
  height: 485px;
  z-index: -2;
  width: 960px;
  perspective: 500px;
  perspective-origin: top;
  background: linear-gradient( #EEE3DF 0% 45%, #F0E0BF 45% 59%, #7B4C3A 59% 100% );
  
  filter: saturate(0.7) blur(0.5px)  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch" result="turbulence" /><feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" /></filter></svg>#waves');
  
}
#screen * {
  position: absolute;
}
#screen.r0 > x-sprite:not(.p4) {
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 45%, transparent 100%);
}
x-ego {
  transform: rotateY(0deg) translate(var(--sprite-left), var(--sprite-top)) translateZ(0);
  will-change: transform;
  filter: contrast(0) opacity(0.4) brightness(1.5);
  transition: all 50ms linear;
}
.shake :not(.feet) {
  animation: shake 0.2s infinite;
  transform: translate(0, 0);
}
@keyframes shake {
  50% {
    transform: translate(-1px, 0);
  }
}
.jump {
  animation: jump 0.2s;
}
@keyframes jump {
  50% {
    top: -10px;
  }
}
x-shadow {
  --shadow-width: var(--sprite-width);
  --shadow-height: calc(var(--sprite-width)/2/3);
  position: absolute;
  bottom: calc(var(--shadow-height)/-2);
  left: 0px;
  width: var(--shadow-width);
  height: var(--shadow-height);
  background: #000;
  border-radius: 40%;
  opacity: 0.5;
  filter: blur(1.2px);
  z-index: 0;
  transform: rotateY(0deg);
}
x-anchor {
  z-index: 500 !important;
}
.anchor:after {
  content: "";
  position: absolute;
  width: 350px;
  height: 50px;
  left: -150px;
  bottom: -25px;
  background-color:transparent;
  border-radius: 50%;
  box-shadow: 0 0 8px #ea4c89, inset 0 0 8px #ea4c89;
}
x-sprite canvas {
  width: 100%;
  height: 100%;
  transform: rotateY(0deg); 
  filter: drop-shadow(0px 2px 6px black);
}
.actor {
  width: 100%;
  height: 100%;
  z-index: 2000;
}
.head {
  border-radius: 50%;
  background: linear-gradient(grey 16px, black 16px 19px, white 19px);
  width: 42px;
  height: 42px;
  top: 7px;
  left: 4px;
  border: solid 3px black;
}
.head:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: grey;
  border-radius: 50%;
  border: solid 3px black;
  top: -9px;
  left: 12px;
  z-index: -1;
}
x-ego .head:after {
  display: none;
}
.body {
  position: relative;
  border-bottom: 86px solid black;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 50px;
  top: 47px;
}
.body:after {
  content: "";
  position: absolute;
  width: 42px;
  border-bottom: 81px solid grey;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  top: 3px;
  left: -11px;
}
.facing1 .body {
  width: 35px;
  border-right-width: 0px;
}
.facing1 .body:after {
  width: 27.5px;
  border-right-width: 0px;
}
.facing2 .body {
  width: 35px;
  left: 15px;
  border-left-width: 0px;
}
.facing2 .body:after {
  width: 27.5px;
  left: 3.5px;
  border-left-width: 0px;
}
.feet {
  top: 114px;
  height: 20px;
  z-index: -1;
}
.feet:before {
  content: "";
  position: absolute;
  width: 3.5px;
  height: 20px;
  background-color: black;
  bottom: -5px;
  left: 15px;
  animation: feet 0.3s ease-out infinite alternate-reverse;
  animation-play-state: paused;
}
.feet:after {
  content: "";
  position: absolute;
  width: 3.5px;
  height: 20px;
  background-color: black;
  bottom: -5px;
  left: 31.5px;
  animation: feet 0.3s ease-out infinite alternate;
  animation-play-state: paused;
}
.walking .feet:before, .walking .feet:after {
  animation-play-state: running;
}
@keyframes feet {
  0% {
    bottom: -5px;
  }
  90% {
    bottom: -15px;
  }
  100% {
    bottom: -15px;
  }
}
.pack {
  width: 40px;
  height: 44px;
  background-color: red;
  top: 51px;
  left: 5px;
  border: solid 3px black;
  z-index: -1;
}
.facing2 .pack {
  width: 20px;
} 
.facing1 .pack {
  width: 20px;
  left: 25px;
}
.facing3 .pack {
  z-index: 0;
}
x-ego .pack {
  display: none;
}
.bubble {
  font-size: smaller;
  font-family: "Comic Sans MS", "Roboto", sans-serif;
  font-weight: bold;
  padding: 15px;
  color: black;
  background: white;
  border-radius: 20px;
  border: 2px solid black;
  box-shadow: 6px 3px black;
  z-index: 1010;
  transform: rotateY(0deg);
}
.bubble:before {
  content: "";
  position: absolute;
  width: 15px;
  display: block;
  bottom: -9px;
  left: var(--left);
  height: 15px;
  transform: rotate(45deg);
  background-color: white;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  box-shadow: 5px 1px black;
  z-index: 1011;
}
.left_wall, .right_wall, .middle_wall, .alcove_wall, .back_wall, .side_wall, .wall1, .wall2, .wall3, .wall4, .wall5 {
  top: 0px;
  background: linear-gradient(
    0deg,
    #F0E0BF 0% 24%,
    #EEE3DF 24% 100%
  );
  filter: brightness(0.95)
}
.left_wall {
  left: -30px;
  transform: rotateY(100deg);
}
.right_wall {
  right: -30px;
  transform: rotateY(-100deg);
}
.wall1, .wall2 {
  filter: brightness(0.9);
}
.back_wall {
  filter: brightness(0.9);
  clip-path: polygon(
    -30px 0, 
    -30px 359px, 
    130px 359px, 
    130px 100px,
    210px 100px,
    210px 359px,
    259px 359px,
    259px 0, 
    -30px 0); 
}
.middle_wall {
  transform: rotateY(90deg);
  box-shadow: -30px 0px black;
  clip-path: polygon(
    -30px 0, 
    -30px 400px, 
    160px 400px, 
    160px 100px, 
    259px 100px, 
    259px 0, 
    -30px 0); 
}
.room4 .middle_wall {
  clip-path: polygon(
    -30px 0, 
    -30px 359px, 
    100px 359px, 
    100px 100px, 
    259px 100px, 
    259px 0, 
    -30px 0); 
}
.side_wall {
  transform: rotateY(90deg);
}
.wall5 {
  transform: rotateY(60deg);
}
.wall3 {
  transform: rotateY(60deg);
  clip-path: polygon(
    -30px 0, 
    -30px 359px, 
     25px 359px, 
     25px 100px, 
     75px 100px, 
     75px 0, 
    -30px 0); 
}
.wall4 {
  transform: rotateY(-60deg);
}
.left_window, .right_window, .window {
  top: 43px;
  background: black;
  background-size: 40px 46px;
  background-image:
    linear-gradient(to right, white 2px, transparent 1px),
    linear-gradient(to bottom, white 2px, transparent 1px);
}
.left_window {
  left: 35px;
  transform: rotateY(100deg);
}
.right_window {
  right: 35px;
  transform: rotateY(-100deg);
}
.window {
  transform: scaleY(0.8);
}
.alcove_wall {
  transform: rotateY(90deg);
  box-shadow: -105px 0px black;
  clip-path: polygon(
    -105px 0, 
    -105px 359px, 
    12px 359px,
    12px 100px,
    100px 100px,
    100px 359px,
    160px 359px, 
    160px 0, 
    -104px 0); 
}
.stairs {
  background-image:
    linear-gradient(45deg, #3e2305 49%, grey 2%, transparent 49%), 
    linear-gradient(135deg, transparent 49%, grey 2%, #3e2305 49%), 
    conic-gradient(transparent 37%, #663a08 0 50%, #854c0b 0 63%, transparent 0);
  background-size: 33px 100px;
  background-repeat: repeat-x;
  clip-path: polygon(0 -35px, 359px -35px, 359px 338px, 25px 74px, 0 49px, -20px 2px);
  background-position: -17px 0, -16px 0, 0px -42px;
  transform: rotate(-45deg);
  filter: drop-shadow(6px 18px 25px black);
}
.room4 .stairs {
  transform: scaleX(-1) rotate(-45deg);
}
.up_stairs {
  content: "";
  right: 0px;
  background: black;
  clip-path: polygon(2px 0, 149px 100px, 470px 100px, 470px 0, 2px 0);
}
.door {
  background-image: linear-gradient(#D6CCC9 0% 55%, #D8CAAC 45% 75%, #6F4434 75% 100% );
  perspective: 350px;
  overflow: hidden;
}
.door:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#EEE3DF 0% 67%, #F0E0BF 67% 100%);
  transition: transform 0.5s;
  transform-style: preserve-3d;
  transform-origin: right center;
  z-index: 16;
  border: #80808080 1px solid;
}
.door.p5:after {
  transform: rotateY(-60deg);
}
.door.p5.p7 {
  transform: scaleX(-1);
  overflow: visible;
}
.door.p5.p7:after {
  transform: rotateY(93deg);
}
.door.p5.p7.shake:after {
  animation: shakedoor 0.1s infinite;
}
@keyframes shakedoor {
  50% {
    transform: rotateY(88deg);
  }
}
.room1 .stairs {
  filter: drop-shadow(6px 18px 25px black) hue-rotate(45deg) brightness(2.5) blur(1px) opacity(0.4);
}
.ghost {
  filter: sepia(1) opacity(0.5);
}
.beer_keg {
  filter: grayscale(1);
}
.down_stairs:after {
  content: "";
  position: absolute;
  width: 100px;
  background-image:
    linear-gradient(45deg, #3e2305 49%, grey 2%, transparent 49%), 
    linear-gradient(135deg, transparent 49%, grey 2%, #3e2305 49%), 
    conic-gradient(transparent 37%, #663a08 0 50%, #854c0b 0 63%, transparent 0);
  background-size: 33px 100px;
  background-repeat: repeat-x;
  clip-path: polygon(0 -35px, 359px -35px, 359px 338px, 25px 74px, 0 49px, -20px 2px);
  background-position: -17px 0, -16px 0, 0px -49px;
  transform: rotate(45deg) scale(1.3);
  height: 100px;
  left: 40px;
  top: 25px;
}
.down_stairs {
  left: 45px;
  bottom: 0px;
  background-color: black;
  clip-path: polygon(74px 0, 179px 0, 179px 70px, 5px 70px, 74px 0);
  box-shadow: #321e1f 32px 18px 16px 9px inset;
  transform: scaleY(1.2);
}
.down_stairs.p7 {
  transform: scaleY(1.2) scaleX(-1);
}
.trapdoor {
  background: #3e2305;
  left: 84px;
  bottom: 0px;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateX(84deg);
  transition: transform 1s;
  outline: #3e2305 4px solid;
}
.trapdoor.open {
  transform: rotateX(84deg) rotateY(-120deg);
}
.picture {
  background: linear-gradient(#AEDDFF 0% 50%, #96C34A 50% 100%);
  outline: outset #F3AD61 8px;
  filter: drop-shadow(0px 0px 1px black);
}
.picture:after {
  content: "🙈";
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 91px;
  font-size: 55px;
}
.picture.m2:after {
  content: "🙉";
}
.picture.m3:after {
  content: "🙊";
}
.picture.m4:after {
  content: "🐵";
}
.stairs2 {
  background: #00000030;
}
.stairs2:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 40px;
  bottom: -40px;
  right: 23px;
  background: linear-gradient( -85deg, #663a08 0% 20%, black 24% 100% );
  transform: skewX(-54deg);
}
.room2 .left_window, .room2 .right_window {
  height: 323px !important;
}
.room6 .left_window, .room6 .right_window {
  display: none;
}
.fireplace:before {
  content: "";
  position: absolute;
  width: 220px;
  border-top: 6px solid #af4d4d;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  height: 130px;
  left: -10px;
  box-shadow: #a4a4a4 0px 124px 0px 0px inset;
  filter: drop-shadow(-1px -1px 3px black);
  z-index: 1;
}
.fireplace:after {
  content: "";
  position: absolute;
  width: 140px;
  height: 90px;
  left: 30px;
  bottom: 0px;
  background: #484848;
  border: 12px grey solid;
  border-bottom: 0px;
  box-shadow: #2e2e2e 0px 5px 8px 10px inset;
  z-index: 2;
}
.couch {
  filter: sepia(0.5);
}
.rug {
  background-color: #6d695c;
  background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 70px 120px;
  transform: rotateX(77deg);
}
.room4 .rug {
  border-radius: 50%;
}
.bed {
  transform: rotateY(-86deg);
  filter: grayscale(1) sepia(1) drop-shadow(-5px 4px 1px black);
}
.alcove {
  background: linear-gradient(
    0deg,
    #333 0% 9%,
    #444 10% 10%,
    #333 11% 22%,
    #222 23% 31%,
    black 32% 100%
  );
  filter: sepia(1);
}
.book_case, .wine_rack {
  background: linear-gradient( 0deg, #3c200b 0% 12%, #281507 20% 100% );
  background-size: 121px 43px;
  border: 6px solid #3c200b;
  filter: drop-shadow(3px -4px 1px black);
}
.book_case ~ .book_case {
  filter: drop-shadow(-3px -4px 1px black);
}
.wine_rack {
  transform: rotateY(100deg);
  filter: drop-shadow(-62px 0px 0px black);
  background-size: 121px 56px;
}
.desk {
  background: #281507;
  transform: rotateX(77deg);
}
.desk:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 45px;
  bottom: -44px;
  background: #281507;
  right: 20px;
  transform: skewX(-41deg);
}
.desk:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 45px;
  bottom: -44px;
  background: #281507;
  left: 0px;
  left: -9px;
  transform: skewX(-22deg);
  filter: drop-shadow(-23px -55px 0px #281507);
}
.room5 .left_window {
  left: 0px;
}
.room5 .right_window {
  right: 0px;
}
.roof {
  background: black;
}
.roof:before {
  content: "";
  position: absolute;
  width: 260px;
  background: black;
  height: 145px;
  top: -40px;
  left: -55px;
  transform: rotate(-30deg);
}
.roof:after {
  content: "";
  position: absolute;
  width: 260px;
  background: black;
  height: 145px;
  top: -40px;
  right: -55px;
  transform: rotate(30deg);
}
.ghost_bed {
  filter: grayscale(1) sepia(1) opacity(0.5) drop-shadow(2px 0px 3px black);
}
.cryptoporticus {
  background-image: linear-gradient(#000, #333);
  border-radius: 90% 90% 0% 0%;
  box-shadow: #333 0px -30px 1px 60px inset;
}
.cryptoporticus.p1:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 90% 90% 0% 0%;
  background: #938bbf;
  opacity: 0.5;
  filter: blur(10px);
}
.fire {
  filter: opacity(0.8) blur(1px) brightness(1.6) drop-shadow(0px -5px 6px orange);
}
.ladder {
  background: linear-gradient(transparent 0% 80%, #333 80% 100%);
  background-size: 40px 25px;
  background-repeat: repeat-y;
  border-left: #333 4px solid;
  border-right: #333 4px solid;
}
.front_wall {
  background: black;
  bottom: 0;
}
.bedroom_door {
  background: #7B4C3A;
}
.outside_doors, .front_door {
  background: #333;
}
.diary, .paper, .bedroom_door, .outside_doors, .front_door {
  transform: rotateX(77deg);
}
.room7 .left_wall, .room7 .right_wall, .room7 .left_window, .room7 .right_window {
  display: none;
}
#screen.room7 {
  background: linear-gradient( 
    #000 0% 4%, 
    #31da81 7% 59%,
    #fdf1d7 60%, 
    #fdf1d7 90%, 
    #fde1b1 100%
    );
}
.river {
  background: linear-gradient(
    to bottom,
    rgb(222, 236, 211, 1) 0%,
    rgb(150, 233, 239, 1) 25%,
    rgb(42, 212, 229, 1) 50%,
    rgba(18, 156, 192, 1) 75%,
    rgba(8, 122, 193, 1) 100%);
  animation: wave ease-in-out 10s infinite;
  overflow: hidden;
}
@keyframes wave {
  0%{
      transform: scaleY(1);
  }
  35%{
      transform: scaleY(1.5);
  }
  69%{
      transform: scaleY(1);
  }
  100%{
      transform: scaleY(1);
  }
}
.river:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, white 0%, transparent 10%, transparent 100%);
  animation: foam ease-in-out 10s infinite;
}
@keyframes foam {
  0%{
      opacity: 0;
  }
  30%{
      opacity: 1;
  }
  50%{
      opacity: 0;
  }
  100%{
      opacity: 0;
  }
}
.sand {
  background: linear-gradient(to bottom, #fdf1d7 0%, #fdf1d7 90%, #fde1b1 100%);
}