/*
Theme Name: Nankaii Theme
Version: 1.0
*/


html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;

}

#game-container,
#world {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#slime,
#slime-body {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#slime{
  position:absolute;
  z-index:10;

  width:230px;
  height:230px;
  cursor: grab;
  left:50%;
  top:80%;
}

#slime-body {
    width: 100%;
  height: 100%;
  border-radius:50%;

background:
radial-gradient(
  circle at 35% 30%,
  rgba(255,255,230,.95) 0%,
  rgba(255,240,140,.75) 30%,
  rgba(255,210,0,.45) 60%,
  rgba(220,160,0,.25) 100%
);

  border:
    1px solid rgba(255,255,255,.50);

box-shadow:
  0 0 30px rgba(255,235,120,.45),
  0 0 80px rgba(255,220,80,.25),
  0 0 180px rgba(255,210,0,.10),
  0 0 300px rgba(255,210,0,.04);

  backdrop-filter: blur(4px);
  cursor:grab;

filter:
drop-shadow(
  0 0 10px rgba(255,220,80,.25)
);
}


#slime-body::before {

  content:"";

  position:absolute;

  inset:-40px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,220,80,.25) 0%,
      rgba(255,220,80,.08) 40%,
      transparent 75%
    );

  filter:blur(25px);

  z-index:-1;

  pointer-events:none;

}

#back-wall {

  position:absolute;

  left:50%;
  top:12%;

  width:50%;
  height:35%;

  transform:translateX(-50%);

  border:2px solid
    rgba(255,255,255,.15);

  pointer-events:none;

}

#game-area{
  position:relative;

  width:100%;
  height:100vh;

  overflow:hidden;
}

/*ここからゲーム舞台関係*/

/*ここからゲーム舞台関係*/

/*ここからゲーム舞台関係*/

#world {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#back-area,
#floor-area {
  background-size: 100% 100%;
}

#back-area {
  position: relative;
  height: 20%;
  overflow: hidden;

  background-image: url("https://nankaii.site/wp-content/uploads/office-back.jpg");
  background-size: cover;
  background-position: center;
}

#back-area::before,
#back-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

#back-area::before {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(20, 40, 80, .65) 0%,
      rgba(20, 40, 80, .25) 16%,
      rgba(255, 255, 255, .18) 28%,
      transparent 48%
    );

  mix-blend-mode: multiply;
  transform: scale(0.8);
}

#back-area::after {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 0%,
      transparent 18%,
      rgba(255, 255, 255, .28) 24%,
      transparent 34%,
      rgba(0, 0, 0, .18) 48%,
      transparent 64%
    );

  mix-blend-mode: overlay;
  transform: scale(1.15);
}

#back-area.is-distorted::before {
  opacity: 1;
  transform: scale(1);
}

#back-area.is-distorted::after {
  opacity: 1;
  transform: scale(1);
}

#back-area.is-deep-distorted::before {
  opacity: 1;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(10, 20, 60, .85) 0%,
      rgba(15, 30, 80, .45) 18%,
      rgba(255, 255, 255, .16) 34%,
      transparent 76%
    );

  transform: scale(1.18);
}

#back-area.is-deep-distorted::after {
  opacity: 1;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 0%,
      transparent 20%,
      rgba(255, 255, 255, .34) 23%,
      transparent 48%,
      rgba(0, 0, 0, .28) 52%,
      transparent 88%
    );

  transform: scale(1.08);
}

#back-area.is-final-distorted::before {
  opacity: 1;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(10, 20, 60, .85) 0%,
      rgba(15, 30, 80, .45) 18%,
      rgba(255, 255, 255, .16) 34%,
      transparent 76%
    );

  transform: scale(1.5);
}

#back-area.is-final-distorted::after {
  opacity: 1;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 0%,
      transparent 20%,
      rgba(255, 255, 255, .34) 23%,
      transparent 48%,
      rgba(0, 0, 0, .28) 52%,
      transparent 88%
    );

  transform: scale(1.3);
}


#floor-area {
  height: 80%;
  background-image: url("https://nankaii.site/wp-content/uploads/office-floor.jpg");
  transition:
    transform 0.8s ease,
    filter 0.8s ease;
  transform-origin: center top;
}

#dent-layer {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.dent {
  position:absolute;

  width:32px;
  height:32px;

  transform:translate(-50%, -50%);

  border-radius:50%;

  background:
radial-gradient(
  circle,
  transparent 40%,
  rgba(255,215,0,.6) 65%,
  transparent 80%
);
}

/*揺らす*/

#back-area.is-distorted {
  animation: backWarp 1.2s ease both;
}

#back-area.is-deep-distorted {
  animation: floorWarp 1.2s ease both;
}

#back-area.is-final-distorted {
  animation: finalWarp 1.2s ease both;
}


@keyframes backWarp {
  0% {
    transform: perspective(600px) rotateX(0deg) scale(1);
  }

  45% {
    transform: perspective(600px) rotateX(-18deg) scaleX(1.24) scaleY(1.12);
  }

  100% {
    transform: perspective(600px) rotateX(-14deg) scaleX(1.18) scaleY(1.08);
  }
}

@keyframes floorWarp {
  0% {
    transform: perspective(700px) rotateX(0deg) scale(1);
  }

  45% {
    transform: perspective(700px) rotateX(-18deg) scaleX(1.24) scaleY(1.12);
  }

  100% {
    transform: perspective(700px) rotateX(-14deg) scaleX(1.18) scaleY(1.2);
  }
}

@keyframes finalWarp {
  0% {
    transform: perspective(800px) rotateX(0deg) scale(1);
  }

  45% {
    transform: perspective(800px) rotateX(-18deg) scaleX(1.24) scaleY(1.12);
  }

  100% {
    transform: perspective(800px) rotateX(-14deg) scaleX(1.18) scaleY(1.3);
  }
}

.negative-mode {
  filter: invert(1);
}


#left-wall,
#right-wall{
  position:absolute;
  top:0;
  height:100%;
  width:0px;

  opacity:0;
  pointer-events:none;
}

#left-wall{
  left:0;
}

#right-wall{
  right:0;
}

#left-wall{
  background:red;
  opacity:.3;
}

#right-wall{
  background:blue;
  opacity:.3;
}

#floor-wall{

  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:80px;

  background:red;

  opacity:0;

  z-index:1;
}