:root {
  color-scheme: dark;

  font-family:
    "Pretendard",
    "Segoe UI",
    sans-serif;

  --background: #050708;
  --button-top: #edf4ff;
  --button-bottom: #aabbd1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: var(--background);
}

button {
  font: inherit;
}

.app {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 43%,
      #172026 0%,
      #090d10 47%,
      #030506 100%
    );
}

#sceneCanvas {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  outline: none;

  touch-action: none;
}

/* =========================
   로딩
========================= */

.loader {
  position: absolute;
  z-index: 30;
  inset: 0;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      #151d22,
      #030506 72%
    );

  transition:
    opacity 350ms ease,
    visibility 350ms ease;
}

.loader span {
  position: relative;

  width: 64px;
  height: 2px;

  overflow: visible;

  background:
    linear-gradient(
      90deg,
      transparent,
      #dcecff,
      #ffffff,
      #a9cbef,
      transparent
    );

  border-radius: 999px;

  box-shadow:
    0 0 12px rgba(190, 220, 255, 0.8),
    0 0 28px rgba(100, 164, 224, 0.44);

  transform: rotate(-23deg);

  animation:
    loading-sword
    1.1s
    ease-in-out
    infinite;
}

@keyframes loading-sword {
  0% {
    opacity: 0.18;

    transform:
      rotate(-23deg)
      scaleX(0.2);
  }

  45% {
    opacity: 1;

    transform:
      rotate(-23deg)
      scaleX(1);
  }

  100% {
    opacity: 0;

    transform:
      rotate(-23deg)
      translateX(46px)
      scaleX(0.35);
  }
}

.app.is-ready .loader {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}

.app.has-error .loader span {
  background: #d65c65;
  animation: none;
}

/* =========================
   버튼
========================= */

.start-button {
  position: absolute;
  z-index: 10;

  bottom: 24px;
  left: 50%;

  min-width: 132px;
  min-height: 46px;

  padding: 0 24px;

  opacity: 0;

  color: #0c1319;

  background:
    linear-gradient(
      180deg,
      var(--button-top),
      var(--button-bottom)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.82);

  border-radius: 4px;

  font-weight: 900;
  letter-spacing: 0.12em;

  box-shadow:
    0 12px 30px
    rgba(20, 38, 53, 0.36),
    inset 0 1px
    rgba(255, 255, 255, 0.9);

  cursor: pointer;

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

  pointer-events: none;

  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 140ms ease;
}

.app.is-ready:not(.is-running):not(.is-complete)
.start-button {
  opacity: 1;

  transform:
    translate(-50%, 0);

  pointer-events: auto;
}

.start-button:hover:not(:disabled) {
  filter: brightness(1.08);

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

.start-button:active:not(:disabled) {
  transform:
    translate(-50%, 1px);
}

.start-button:disabled {
  cursor: default;
}

.app.is-running .start-button,
.app.is-complete .start-button {
  opacity: 0;

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

  pointer-events: none;
}

@media (max-width: 560px) {
  .start-button {
    bottom: 14px;
    min-height: 43px;
  }
}