@font-face {
  font-family: "Jetbrains Mono";
  src: url("/fonts/JetBrainsMono.ttf");
}

:root {
  --bg-color: #121212;
  --fg-color: #eee;
  font-size: 100%;
  font-family: "Jetbrains Mono";
  font-variant-ligatures: none;
  color-scheme: dark;
}

* {
  font-family: "Jetbrains Mono";
}

html {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--fg-color);
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  width: 100dvw;
  height: 100dvh;
}

.visual-novel {
  display: flex;
  justify-content: start;
  justify-items: start;
  align-items: center;
  align-content: center;
  flex-direction: column;
  flex: 100;
  margin: 1em;
  width: 90%;
  height: 90%;
}

#dialog-line {
  height: 6em;
  min-width: 6em;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-content: center;
  overflow-y: auto;
}

#question-line {
  text-align: center;
  vertical-align: middle;
  height: 4em;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-content: center;
  overflow-y: auto;
}

#image-container {
  height: calc(min(40dvh, 40dvw));
  aspect-ratio: 1/1;

  & > * {
    width: 100%;
    height: 100%;
    position: relative;
    image-rendering: pixelated;
    transition: scale 0.15s;
  }

  &.small {
    height: calc(min(20dvw, 20dvh)) !important;
    & > * {
      display: none !important;
    }
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
  #image-container {
    height: calc(min(65dvh, 65dvw));
  }
}

#choices {
  display: flex;

  flex-direction: column;
  justify-items: start;
  justify-content: start;
  align-items: stretch;
  align-content: center;
  margin: 0 2em 0 2em;
  /*height: 16em;*/
  flex: 10;
  overflow-y: auto;
  overflow-x: hidden;
}

.choice {
  opacity: 1;
  scale: 1;
  min-width: 10em;

  &.chosen {
    background-color: var(--fg-color);
    color: var(--bg-color);
    filter: brightness(0.8);
    pointer-events: none;
  }

  &.faded {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  &.hidden {
    opacity: 0;
    pointer-events: none;
    scale: 0;
  }
}

button {
  background-color: var(--bg-color);
  color: var(--fg-color);
  border: var(--fg-color) 0.05em solid;
  padding: 0.75em;
  margin: 0.25em;
  transition: background-color 0.2s, color 0.2s, filter 0.1s, opacity 0.75s,
    scale 0.25s;

  &:hover {
    background-color: var(--fg-color);
    color: var(--bg-color);
    cursor: pointer;
    scale: 1.05;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:active {
    background-color: var(--fg-color);
    color: var(--bg-color);
    filter: brightness(0.8);
    scale: 1.05;
  }
}

input {
  background-color: var(--bg-color);
  color: var(--fg-color);
  border: var(--fg-color) 0.05em double;
  padding: 0.75em;
  margin: 0.25em;
  outline: none;

  text-align: center;
  border-radius: 0.5em;
  border-width: 0.2em;

  transition: background-color 0.2s, color 0.2s, filter 0.1s, opacity 0.75s,
    scale 0.25s;

  animation: pulsating normal 2s infinite linear,
    rainbow-border 2s infinite linear;

  &:hover {
    background-color: var(--fg-color);
    color: var(--bg-color);
    cursor: pointer;
    scale: 1.05;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:active {
    background-color: var(--fg-color);
    color: var(--bg-color);
    filter: brightness(0.8);
    scale: 1.05;
  }
}

@keyframes pulsating {
  0% {
    scale: 1;
    /* rotate: -0.5deg; */
  }
  50% {
    scale: 1.02;
    /* rotate: 0.5deg; */
  }
  100% {
    scale: 1;
    /* rotate: -0.5deg; */
  }
}

@keyframes rainbow-border {
  100%,
  0% {
    border-color: rgb(255, 88, 88);
  }
  8% {
    border-color: rgb(255, 127, 0);
  }
  16% {
    border-color: rgb(255, 255, 0);
  }
  25% {
    border-color: rgb(127, 255, 0);
  }
  33% {
    border-color: rgb(0, 255, 0);
  }
  41% {
    border-color: rgb(0, 255, 127);
  }
  50% {
    border-color: rgb(0, 255, 255);
  }
  58% {
    border-color: rgb(0, 127, 255);
  }
  66% {
    border-color: rgb(120, 120, 255);
  }
  75% {
    border-color: rgb(181, 108, 255);
  }
  83% {
    border-color: rgb(255, 0, 255);
  }
  91% {
    border-color: rgb(255, 0, 127);
  }
}
@keyframes waves {
  0% {
    outline: 0px white solid;
    outline-offset: 0em;
  }
  50% {
    outline: 1px white solid;
    outline-offset: 0.5em;
  }
  75% {
    outline: 1px white solid;
    outline-offset: 0.52em;
  }
  80% {
    outline: 1px rgba(255, 255, 255, 0) solid;
    outline-offset: 0.53em;
  }
}

.op {
  transition: opacity 0.5s;
}

.op0 {
  opacity: 0 !important;
}

.op1 {
  opacity: 1 !important;
}

.none {
  display: none;
}

* {
  user-select: none;
  -webkit-user-drag: none;
}

@media (pointer: fine) {
  * {
    scrollbar-color: rgba(255, 255, 255, 0.605) rgba(255, 255, 255, 0);
  }
}

.textbox-indicator {
  bottom: 0;
  right: 0;
  position: relative;
  animation: bobbing 1s infinite ease-in-out;
}

@keyframes bobbing {
  0% {
    transform: translateY(-0.5em);
  }
  50% {
    transform: translateY(-0.15em);
  }
  100% {
    transform: translateY(-0.5em);
  }
}

.textbox {
  transition: border 0.25s;
  border: 1px white solid;

  margin-top: calc(min(12dvh, 8em));

  &.compact {
    margin-top: 0 !important;
  }

  &.hid {
    border: 0px rgba(255, 255, 255, 0) solid !important;
  }

  .indicator-container {
    margin-top: -1em;
    margin-right: 0.5em;
    display: flex;
    align-items: end;
    justify-content: end;
    align-content: end;
    justify-items: end;

    img {
      opacity: 1;
      transition: opacity 0.1s;
    }
  }
  p {
    --paddings: calc(min(5dvw, 2em));
    padding: 0 var(--paddings) 0 var(--paddings);
    margin-top: 0;
    margin-bottom: calc(min(0.1em, --paddings));
  }
}

.disabled {
  display: none;
}

.shaky {
  --shake-magnitude: 4px;
  --shake-rotation: 1.2deg;
  --shake-offset: 0s;
  transform-origin: center;
  animation: shake-random 0.75s linear infinite;
  animation-delay: var(--shake-offset);
  will-change: transform;
}

@keyframes shake-random {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  4% {
    transform: translate(
        calc(0.9 * var(--shake-magnitude)),
        calc(-0.4 * var(--shake-magnitude))
      )
      rotate(calc(0.6 * var(--shake-rotation)));
  }
  8% {
    transform: translate(0, 0) rotate(0);
  }
  12% {
    transform: translate(
        calc(-0.6 * var(--shake-magnitude)),
        calc(0.7 * var(--shake-magnitude))
      )
      rotate(calc(-0.4 * var(--shake-rotation)));
  }
  18% {
    transform: translate(0, 0) rotate(0);
  }
  24% {
    transform: translate(
        calc(0.4 * var(--shake-magnitude)),
        calc(0.2 * var(--shake-magnitude))
      )
      rotate(calc(0.25 * var(--shake-rotation)));
  }
  30% {
    transform: translate(
        calc(-0.2 * var(--shake-magnitude)),
        calc(-0.9 * var(--shake-magnitude))
      )
      rotate(calc(-0.8 * var(--shake-rotation)));
  }
  36% {
    transform: translate(0, 0) rotate(0);
  }
  44% {
    transform: translate(
        calc(0.7 * var(--shake-magnitude)),
        calc(0.5 * var(--shake-magnitude))
      )
      rotate(calc(0.45 * var(--shake-rotation)));
  }
  52% {
    transform: translate(
        calc(-0.9 * var(--shake-magnitude)),
        calc(0.1 * var(--shake-magnitude))
      )
      rotate(calc(-0.15 * var(--shake-rotation)));
  }
  60% {
    transform: translate(0, 0) rotate(0);
  }
  68% {
    transform: translate(
        calc(0.3 * var(--shake-magnitude)),
        calc(-0.7 * var(--shake-magnitude))
      )
      rotate(calc(0.35 * var(--shake-rotation)));
  }
  76% {
    transform: translate(
        calc(-0.4 * var(--shake-magnitude)),
        calc(-0.3 * var(--shake-magnitude))
      )
      rotate(calc(-0.6 * var(--shake-rotation)));
  }
  84% {
    transform: translate(0, 0) rotate(0);
  }
  92% {
    transform: translate(
        calc(0.6 * var(--shake-magnitude)),
        calc(-0.2 * var(--shake-magnitude))
      )
      rotate(calc(0.2 * var(--shake-rotation)));
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

:root {
  /* display size for the pixelated output (how big it appears on screen) */
  --display-size: 256px;
  /* the internal pixel grid we're targeting (64 => 64x64) */
  --pixel-size: 64;
  /* scale = display / pixel-size (set manually if you change sizes) */
  --scale: calc(var(--display-size) / var(--pixel-size));
}

canvas {
  /* canvas internal size = 64x64; CSS size = display-size */
  width: var(--display-size);
  height: var(--display-size);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  border: 2px white solid;
}