:root {
  --bg: #1a0f2e;
  --bg-deep: #0a0518;
  --fg: #f5ede0;
  --gutter: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  display: flex;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, var(--bg-deep) 100%),
    var(--bg);
}

#touch-zone {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  padding-top: max(var(--gutter), env(safe-area-inset-top));
  padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

#hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 1.1875rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  opacity: 0.55;
  pointer-events: none;
  animation: hint-breath 4.2s ease-in-out infinite;
}

@keyframes hint-breath {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.65; }
}

#hint[data-state="active-full"],
#hint[data-state="picked"] {
  display: none;
}

.finger {
  --c: #f4c465;
  position: absolute;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--c);
  pointer-events: none;
  box-shadow:
    0 0 0 8px color-mix(in oklab, var(--c) 45%, transparent),
    0 0 0 22px color-mix(in oklab, var(--c) 18%, transparent),
    0 0 48px 12px color-mix(in oklab, var(--c) 35%, transparent);
  transition: opacity 220ms ease, transform 220ms ease;
  animation: finger-breath 1.8s ease-in-out infinite;
}

@keyframes finger-breath {
  0%, 100% { transform: scale(0.94); }
  50% { transform: scale(1.06); }
}

#touch-zone[data-state="picked"] .finger:not(.winner) {
  opacity: 0.18;
  transform: scale(0.6);
  animation: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--c) 25%, transparent);
}

.finger.winner {
  z-index: 2;
  animation:
    winner-burst 800ms cubic-bezier(0.16, 0.84, 0.32, 1) forwards,
    winner-pulse 1.6s ease-in-out 800ms infinite;
}

@keyframes winner-burst {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 8px color-mix(in oklab, var(--c) 45%, transparent),
      0 0 0 22px color-mix(in oklab, var(--c) 18%, transparent),
      0 0 48px 12px color-mix(in oklab, var(--c) 35%, transparent);
  }
  40% {
    transform: scale(1.45);
    box-shadow:
      0 0 0 14px color-mix(in oklab, var(--c) 70%, transparent),
      0 0 0 44px color-mix(in oklab, var(--c) 35%, transparent),
      0 0 0 120px color-mix(in oklab, var(--c) 15%, transparent),
      0 0 140px 40px color-mix(in oklab, var(--c) 55%, transparent);
  }
  100% {
    transform: scale(1.3);
    box-shadow:
      0 0 0 12px color-mix(in oklab, var(--c) 65%, transparent),
      0 0 0 36px color-mix(in oklab, var(--c) 28%, transparent),
      0 0 0 96px color-mix(in oklab, var(--c) 12%, transparent),
      0 0 120px 30px color-mix(in oklab, var(--c) 50%, transparent);
  }
}

@keyframes winner-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 12px color-mix(in oklab, var(--c) 65%, transparent),
      0 0 0 36px color-mix(in oklab, var(--c) 28%, transparent),
      0 0 0 96px color-mix(in oklab, var(--c) 12%, transparent),
      0 0 120px 30px color-mix(in oklab, var(--c) 50%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 14px color-mix(in oklab, var(--c) 75%, transparent),
      0 0 0 44px color-mix(in oklab, var(--c) 35%, transparent),
      0 0 0 108px color-mix(in oklab, var(--c) 18%, transparent),
      0 0 160px 40px color-mix(in oklab, var(--c) 60%, transparent);
  }
}