:root {
  color-scheme: light;

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

  --paper: #eee9df;
  --paper-dark: #d7d0c3;
  --ink: #231820;
}

* {
  box-sizing: border-box;
}

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

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: var(--paper);
}

button {
  font: inherit;
}

.app {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 43%,
      #f8f4eb 0%,
      var(--paper) 58%,
      var(--paper-dark) 100%
    );
}

#inkCanvas {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  outline: none;

  touch-action: none;
}

.paper-grain {
  position: absolute;
  z-index: 2;
  inset: 0;

  opacity: 0.07;

  pointer-events: none;

  background-image:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(45, 35, 27, 0.4) 0,
      rgba(45, 35, 27, 0.4) 0.45px,
      transparent 0.75px,
      transparent 4px
    );

  background-size:
    7px 7px;

  mix-blend-mode: multiply;
}

/* =========================
   로딩 화면
========================= */

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

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      #f6f2e9,
      #ded7cb
    );

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

.loader span {
  width: 23px;
  height: 23px;

  background: var(--ink);

  border-radius:
    52% 48% 57% 43% /
    45% 58% 42% 55%;

  box-shadow:
    0 0 18px
    rgba(35, 24, 32, 0.25);

  animation:
    loader-ink
    900ms
    ease-in-out
    infinite
    alternate;
}

@keyframes loader-ink {
  from {
    opacity: 0.3;

    transform:
      scale(0.6)
      rotate(0deg);
  }

  to {
    opacity: 1;

    transform:
      scale(1.15)
      rotate(35deg);
  }
}

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

  pointer-events: none;
}

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

/* =========================
   시작 버튼
========================= */

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

  bottom: 24px;
  left: 50%;

  min-width: 154px;
  min-height: 47px;

  padding: 0 22px;

  opacity: 0;

  color: #f8f3ea;

  background:
    linear-gradient(
      160deg,
      #38252f,
      #1f161c
    );

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

  border-radius:
    51% 49% 46% 54% /
    54% 44% 56% 46%;

  font-weight: 800;

  box-shadow:
    0 13px 30px
    rgba(30, 20, 26, 0.25),
    inset 0 1px
    rgba(255, 255, 255, 0.15);

  cursor: pointer;

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

  pointer-events: none;

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

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

  transform:
    translate(-50%, 0);

  pointer-events: auto;
}

.reveal-button:hover:not(:disabled) {
  filter: brightness(1.12);

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

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

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

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

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

  pointer-events: none;
}

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