:root {
  color-scheme: dark;

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

  --background: #07080c;
  --button-top: #d9efff;
  --button-bottom: #70b8f8;
}

* {
  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%,
      #253244 0%,
      #111722 41%,
      #06070a 78%
    );
}

#threeCanvas {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  outline: none;

  touch-action: none;
}

.ambient-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 46%,
      transparent 30%,
      rgba(0, 0, 0, 0.2) 65%,
      rgba(0, 0, 0, 0.68) 100%
    );
}

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

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

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      rgba(24, 33, 46, 0.98),
      rgba(5, 6, 9, 0.995) 72%
    );

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

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

  pointer-events: none;
}

.loader-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 18px);

  gap: 5px;

  transform: rotate(45deg);
}

.loader-grid span {
  width: 18px;
  height: 18px;

  background:
    linear-gradient(
      145deg,
      #b5ddff,
      #347fbe
    );

  border-radius: 3px;

  box-shadow:
    0 0 13px
    rgba(84, 168, 237, 0.32);

  animation:
    loader-tile
    780ms
    ease-in-out
    infinite
    alternate;
}

.loader-grid span:nth-child(2) {
  animation-delay: 70ms;
}

.loader-grid span:nth-child(3) {
  animation-delay: 140ms;
}

.loader-grid span:nth-child(4) {
  animation-delay: 210ms;
}

.loader-grid span:nth-child(5) {
  animation-delay: 280ms;
}

.loader-grid span:nth-child(6) {
  animation-delay: 350ms;
}

.loader-grid span:nth-child(7) {
  animation-delay: 420ms;
}

.loader-grid span:nth-child(8) {
  animation-delay: 490ms;
}

.loader-grid span:nth-child(9) {
  animation-delay: 560ms;
}

@keyframes loader-tile {
  from {
    opacity: 0.22;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

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

  bottom: 24px;
  left: 50%;

  min-width: 166px;
  min-height: 48px;

  padding: 0 23px;

  opacity: 0;

  color: #07111b;

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

  border: 1px solid #eff9ff;
  border-radius: 7px;

  font-weight: 900;

  box-shadow:
    0 14px 34px
    rgba(31, 111, 187, 0.3),
    inset 0 1px
    rgba(255, 255, 255, 0.85);

  cursor: pointer;

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

  pointer-events: none;

  transition:
    opacity 280ms ease,
    transform 280ms ease,
    filter 130ms ease;
}

.app.is-ready:not(.is-solving):not(.is-complete)
.solve-button {
  opacity: 1;

  transform:
    translate(-50%, 0);

  pointer-events: auto;
}

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

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

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

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

.app.is-solving .solve-button,
.app.is-complete .solve-button {
  opacity: 0;

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

  pointer-events: none;
}

/* =========================
   파티클
========================= */

.spark-layer {
  position: absolute;
  z-index: 12;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.spark {
  position: absolute;

  top: 50%;
  left: 50%;

  width: var(--spark-size);
  height: var(--spark-size);

  opacity: 0;

  background:
    var(--spark-color);

  border-radius: 50%;

  box-shadow:
    0 0 9px
    var(--spark-color);

  animation:
    spark-burst
    var(--spark-duration)
    ease-out
    forwards;
}

@keyframes spark-burst {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.2);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate(
        calc(
          -50% +
          var(--spark-x)
        ),
        calc(
          -50% +
          var(--spark-y)
        )
      )
      scale(1);
  }
}

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