@import "./styles/loading.css";
@import "./styles/transition.css";
@import url("https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");

* {
  max-width: 100%;
  word-break: auto-phrase;
}

:root,
body {
  font-family: "RocknRoll One", sans-serif;
  background-color: #333;
  user-select: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
}

#loader-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}

#loader-bg ul {
  padding-inline-start: 3em;
}

#loader-bg li {
  padding: 0.2em 1em 0.2em 0.2em;
}

#loading-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  background: transparent;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 10000;
  margin: auto;
  padding: 10px 20px;
}

#loading-overlay.hide {
  display: none;
}

#kurukuru {
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 50%;
  margin: 1em;
  background: conic-gradient(black, white, transparent);
  animation: just-spin 0.5s linear infinite;
}

#loading-overlay p {
  margin: 1em;
}

@keyframes just-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#visual-content-wrapper {
  background-color: #f0f7ff;
  position: absolute;
  top: 0;
  bottom: 240px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 8/5;
  margin: auto;
}

#visual-content-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#visual-content {
  position: absolute;
  width: 100%;
}

#visual-content > div {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 8/5;
}

#visual-content .hide {
  visibility: hidden;
}

.row-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
}

.row-wrapper.left {
  justify-content: flex-start;
}

.row-wrapper.center {
  justify-content: center;
}

.row-wrapper.right {
  justify-content: flex-end;
}

.nazo-buttons-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: blur-in 0.5s forwards;
}

@keyframes blur-in {
  0% {
    opacity: 0;
    filter: blur(100px);
  }
  0% {
    opacity: 1;
  }
  100% {
    filter: blur(0px);
  }
}

.nazo-button::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  clip-path: path(
    "M 68.364 15.81 l 9.37 28.078 c 2.927 8.845 -1.878 18.403 -10.724 21.33 l -33.904 11.219 c -8.846 2.927 -18.404 -1.878 -21.331 -10.723 l -7.228 -37.015 c -1.806 -9.14 4.15 -18.027 13.29 -19.833 l 30.294 -5.73 c 9.08 -2.086 18.146 3.593 20.233 12.674 Z"
  );
  z-index: -2;
  background-image: url(./img/nazo_button_back.webp);
  filter: hue-rotate(-60deg) brightness(1.2);
  background-size: 80px 80px;
  background-position: 0 0;
  -webkit-animation: back-anim 12s linear infinite normal;
  animation: back-anim 12s linear infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.nazo-button::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  clip-path: path(
    "M 4.098 34.731 l 10.831 -22.127 c 2.7 -7.588 12.926 -12.948 22.687 -10.538 l 24.915 6.741 c 8.599 4.718 11.528 10.497 12.426 18.268 l 2.73 20.076 c -0.048 4.651 -1.682 8.228 -4.6 10.935 l -19.631 15.613 c -6.197 5.67 -14.13 6.091 -21.013 2.542 l -23.298 -18.174 c -7.832 -5.047 -10.093 -15.503 -5.047 -23.336 Z"
  );
  z-index: -1;
  background-image: url(./img/nazo_button_back.webp);
  background-size: 80px 80px;
  background-position: 0 0;
  -webkit-animation: back-anim 12s linear infinite normal;
  animation: back-anim 12s linear infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.nazo-button.clear::before {
  filter: hue-rotate(-90deg) brightness(1.4);
}

.nazo-button.clear::after {
  filter: hue-rotate(-90deg) brightness(1.4);
}

@keyframes back-anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 80px 80px;
  }
}

.nazo-button {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 1;
}

.nazo-button:hover {
  filter: brightness(1.2);
}

.nazo-button:nth-of-type(1) {
  top: 6%;
  left: 2%;
  transform: rotate(25deg);
}

.nazo-button:nth-of-type(2) {
  top: 34%;
  left: -3%;
  transform: rotate(10deg);
}

.nazo-button:nth-of-type(3) {
  bottom: 3%;
  right: 12%;
  transform: rotate(30deg);
}

.nazo-button:nth-of-type(4) {
  bottom: 26%;
  right: 1%;
  transform: rotate(15deg);
}

.nazo-button:nth-of-type(5) {
  bottom: 52%;
  right: -3%;
}

.nazo-button p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5px;
  margin: auto;
  text-align: center;
  height: 1em;
  font-size: 36px;
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#qf-form {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
  padding: 0 2em;
  aspect-ratio: 8/5;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #cccccc99;
}

.qf-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pict-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
}

.pict-wrapper img {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 8/5;
  object-fit: cover;
}

#prol-caption,
#gold-caption,
#end-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.caption-main,
.caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #33333399;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.caption p,
.caption-main p,
#prol-caption p,
#gold-caption p,
#end-caption p {
  margin: 0.5em;
  padding: 0 5%;
}

div.chara-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 8/5;
  overflow: hidden;
}

.chara-wrapper img {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  bottom: -40px;
  margin: auto;
}

.chara-wrapper img:nth-of-type(3n + 1) {
  left: 0;
  right: 0;
}

.chara-wrapper img:nth-of-type(3n + 2) {
  left: -10%;
  right: 50%;
}

.chara-wrapper img:nth-of-type(3n + 3) {
  left: 50%;
  right: -10%;
}

.chara-wrapper img:nth-of-type(n + 4) {
  opacity: 0;
}

.shatter {
  animation: 0.5s shatter;
  animation-fill-mode: forwards;
  animation-iteration-count: 2;
}

#story.shatter {
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes shatter {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(-10px, -20px) rotate(-1deg);
  }
  20% {
    transform: translate(-30px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(30px, 20px) rotate(0deg);
  }
  40% {
    transform: translate(10px, -10px) rotate(1deg);
  }
  50% {
    transform: translate(-10px, 20px) rotate(-1deg);
  }
  60% {
    transform: translate(-20px, 10px) rotate(0deg);
  }
  70% {
    transform: translate(20px, 8px) rotate(-1deg);
  }
  80% {
    transform: translate(-10px, -5px) rotate(1deg);
  }
  90% {
    transform: translate(4px, 8px) rotate(0deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

.shatter-min {
  animation: 0.5s shatter;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.chara-wrapper img.zoom {
  transform-origin: 50% 0%;
  animation: 2s hal-zoom linear;
  animation-fill-mode: forwards;
}

@keyframes hal-zoom {
  3% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(-10px);
  }
  7% {
    transform: translateX(10px);
  }
  9% {
    transform: translateX(-10px);
  }
  11% {
    transform: translateX(10px);
  }
  13% {
    transform: translateX(-10px);
  }
  15% {
    transform: translateX(10px);
  }
  17% {
    transform: translateX(0px);
  }

  40% {
    transform: rotate(0) scale(1);
  }

  70% {
    transform: rotate(540deg) scale(3);
  }

  100% {
    transform: rotate(540deg) scale(3);
  }
}

.chara-wrapper img.sigh {
  animation: 0.6s sigh ease-in;
  animation-fill-mode: forwards;
}

@keyframes sigh {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-30px);
  }
}

.chara-wrapper img.drop {
  animation: 1.2s drop ease-out;
  animation-fill-mode: forwards;
}

@keyframes drop {
  0% {
    opacity: 1;
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(0px);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.chara-wrapper img.attention {
  animation: 0.3s attention;
  animation-fill-mode: forwards;
  animation-iteration-count: 2;
}

@keyframes attention {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.chara-wrapper img.splash {
  transform-origin: 90% 30%;
  animation: 0.4s splash;
  animation-fill-mode: forwards;
  animation-iteration-count: 2;
}

@keyframes splash {
  0% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
    transform: rotate(10deg);
  }
}

.chara-wrapper img.angry {
  animation: 0.8s angry;
  animation-fill-mode: forwards;
}

@keyframes angry {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  5% {
    transform: translate(3px, 0px);
  }
  10% {
    transform: translate(-3px, 0px);
  }
  15% {
    transform: translate(3px, 0px);
  }
  20% {
    transform: translate(-3px, 0px);
  }
  25% {
    transform: translate(2px, 0px);
  }
  30% {
    transform: translate(-2px, 0px);
  }
  35% {
    transform: translate(1px, 0px);
  }
  40% {
    transform: translate(-1px, 0px);
  }
  45% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  50% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.chara-wrapper img.dash {
  animation: 0.2s dash-left linear;
  animation-fill-mode: forwards;
}

@keyframes dash-left {
  0% {
    left: -10%;
  }
  100% {
    left: -200%;
  }
}

.chara-wrapper img.shiver {
  animation: 0.3s shiver linear;
  animation-fill-mode: forwards;
}

@keyframes shiver {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(3px, 0px);
  }
  20% {
    transform: translate(-3px, 0px);
  }
  30% {
    transform: translate(3px, 0px);
  }
  40% {
    transform: translate(-3px, 0px);
  }
  50% {
    transform: translate(2px, 0px);
  }
  60% {
    transform: translate(-2px, 0px);
  }
  70% {
    transform: translate(1px, 0px);
  }
  80% {
    transform: translate(-1px, 0px);
  }
  90% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.chara-wrapper img.bounce {
  animation: 0.15s ease-out alternate bounce;
  animation-fill-mode: none;
  animation-iteration-count: 4;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25px);
  }
}

.chara-wrapper img.appear {
  animation: 0.5s appear linear;
  animation-fill-mode: forwards;
}

@keyframes appear {
  0% {
    opacity: 0;
    filter: contrast(0) brightness(0.5);
  }
  10% {
    opacity: 1;
  }
  100% {
    filter: contrast(1) brightness(1);
  }
}

div#credit {
  background: #f0f7ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 2em;
  width: 100%;
}

#story {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-image: url("./img/story.webp");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 200%;
}

#name {
  background: url("./img/name.webp");
  width: 240px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  margin-right: auto;
}

#message-frame {
  z-index: 10;
  width: 800px;
  height: 200px;
  margin: 0;
  background-image: url("./img/message_frame.webp");
  border-radius: 20px;
}

#message {
  display: block;
  position: relative;
  max-width: 80%;
  text-align: center;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -25%);
  font-size: 1.2rem;
  opacity: 1;
  line-height: 1.5;
}

#message p {
  animation: blurAnime 0.4s;
}

#map-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  margin: auto;
  padding-bottom: 10px;
  width: 100%;
  height: 100%;
  background: #33333399;
  flex-direction: column;
}

#map-modal:not(.hide),
#nazo-modal:not(.hide) {
  animation: 0.5s blur-in;
  animation-fill-mode: forwards;
}

#map-wrapper {
  max-width: 600px;
  max-height: 600px;
  aspect-ratio: 1;
  width: 90vw;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  background: url(./img/map_back.webp);
  background-size: 100% 100%;
}

#map-wrapper > img {
  position: absolute;
  width: 300%;
  height: 300%;
  max-width: 300%;
  top: -150%;
  left: -150%;
  margin: auto;
  object-fit: cover;
  animation: spin 64s linear infinite;
  transform-origin: 50% 50%;
  mix-blend-mode: overlay;
  filter: hue-rotate(180deg);
  opacity: 0.7;
}
#map-wrapper > img:nth-of-type(2) {
  top: -50%;
  left: -50%;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#map-modal.hide {
  z-index: -100;
}

.div-button.hide {
  display: none;
}

#nazo-modal.hide {
  display: none;
}

#map-util {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  width: 90vw;
}

#map-dialog-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #33333399;
  max-width: 600px;
  width: 90vw;
  min-height: 3rem;
  margin: 0;
}

#map-dialog {
  color: white;
  margin: 0;
  animation: 0.5s blur-in;
  animation-fill-mode: forwards;
}

@keyframes blur-in {
  0% {
    opacity: 0;
    filter: blur(50px);
  }
  20% {
    opacity: 1;
  }
  100% {
    filter: blur(0px);
  }
}

div#buttons-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 4rem;
}

#nazo-modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #66666666;
  justify-content: center;
  align-items: center;
  z-index: 100;
  margin: auto;
  padding-bottom: 10vh;
}

#modal-inner {
  width: 90vmin;
  height: 90vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#hint-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
}

#hint-button {
  font-size: 0.9em;
}

#hint-wrapper p {
  color: white;
}

#hint-button.hidden,
#hint-c-button.hidden {
  visibility: hidden;
}

#nazopic-wrapper {
  max-height: 70%;
}

#submit-form {
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#check-modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #66666666;
  justify-content: center;
  align-items: center;
  z-index: 100;
  margin: auto;
  padding-bottom: 10vh;
}

#check-modal.hide {
  display: none;
}

#check-form {
  display: grid;
  grid-template-columns: 1fr repeat(4, 2fr) 1fr;
  gap: 0.5em;
}

#north-button {
  grid-column: 3/5;
  grid-row: 1/2;
}

#west-button {
  grid-column: 2/4;
  grid-row: 2/3;
}

#east-button {
  grid-column: 4/6;
  grid-row: 2/3;
}

#south-button {
  grid-column: 3/5;
  grid-row: 3/4;
}

#check-true-button {
  grid-column: 2/4;
}

#check-false-button {
  grid-column: 4/6;
}

#check-form:not(.check-2) .div-button.check-2,
#check-form.check-2 .div-button:not(.check-2) {
  display: none;
}

#scroll-up-button {
  position: absolute;
  bottom: -80px;
  right: 50%;
  width: 80px;
  height: 56px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #e8f0fc;
}

#scroll-down-button {
  position: absolute;
  bottom: -80px;
  left: 50%;
  width: 80px;
  height: 56px;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  background: #e8f0fc;
}

.scroll-button:hover {
  filter: brightness(1.2);
}

.scroll-button.hide {
  display: none;
}

.div-button {
  margin: 0.5rem;
  padding: 0.3rem 1.2rem;
  background: bisque;
  border: 3px solid #333;
  border-radius: 1em;
  box-shadow: 0 3px 0 0 #333;
  font-size: 1.2rem;
  text-align: center;
}

.div-button.ignore {
  background: slategray;
}

.div-button:not(.ignore):hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 #333;
}

.div-button:not(.ignore):active {
  transform: translateY(3px);
  box-shadow: 0 0px 0 0 #333;
}

input[type="text"] {
  min-width: 200px;
  height: 2.5rem;
  font: 1.5rem sans-serif;
  box-sizing: border-box;
  width: 60%;
  padding: 0.3em;
  transition: 0.3s;
  letter-spacing: 1px;
  color: #aaaaaa;
  border: 2px solid #1b2538;
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  margin: 0 auto;
  display: block;
  text-align: center;
}

.flash {
  animation: flash 1s;
}

@keyframes flash {
  0% {
    background-color: rgb(0, 255, 140);
  }

  60% {
    background-color: rgb(255, 255, 255);
  }
}

.shake {
  animation: shake 1s;
}

@keyframes shake {
  0% {
    background-color: red;
    transform: translate(2px, 0px);
  }

  10% {
    transform: translate(-2px, 0px);
  }

  20% {
    transform: translate(2px, 0px);
  }

  30% {
    transform: translate(-2px, 0px);
  }

  40% {
    transform: translate(2px, 0px);
  }

  50% {
    transform: translate(-2px, 0px);
  }

  60% {
    background-color: rgb(255, 255, 255);
    transform: translate(0px, 0px);
  }
}

#submit-form .hide {
  display: none;
}

@media screen and (max-width: 768px) {
  div#visual-content-wrapper {
    top: 0;
    bottom: 10vh;
    aspect-ratio: 5/4;
  }
  #visual-content > div {
    aspect-ratio: 5 / 4;
  }
  .pict-wrapper img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
  }

  div.chara-wrapper {
    aspect-ratio: 5/4;
  }

  #submit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #ans-box {
    grid-column: 1/3;
  }

  #qf-form {
    aspect-ratio: 5/4;
  }

  #message-frame {
    width: 100vw;
    height: 40vw;
    margin: 0;
    background-image: url(./img/message_frame_mobile.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }

  #message {
    font-size: 1rem;
  }

  #name {
    background: url(./img/name.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 40vw;
    height: 10vw;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    font-size: 12px;
  }

  .nazo-button:nth-of-type(1) {
    top: 6%;
    left: 2%;
    transform: scale(0.8) rotate(25deg);
  }

  .nazo-button:nth-of-type(2) {
    top: 34%;
    left: -3%;
    transform: scale(0.8) rotate(10deg);
  }

  .nazo-button:nth-of-type(3) {
    bottom: 3%;
    right: 12%;
    transform: scale(0.8) rotate(30deg);
  }

  .nazo-button:nth-of-type(4) {
    bottom: 26%;
    right: 1%;
    transform: scale(0.8) rotate(15deg);
  }

  .nazo-button:nth-of-type(5) {
    bottom: 52%;
    right: -3%;
    transform: scale(0.8);
  }

  #scroll-up-button {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80px;
    height: 56px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #e8f0fc;
  }

  #scroll-down-button {
    position: absolute;
    bottom: -80px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80px;
    height: 56px;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    background: #e8f0fc;
  }
}