:root {
  color-scheme: dark;
  font-family: Georgia, serif;
  background: #473625;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body { -webkit-tap-highlight-color: transparent; }

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #8d694a;
}

.landscape,
.water,
.atmosphere,
.leaves,
.rewards { position: absolute; inset: 0; }

.landscape {
  background-image: url('./autumn-river.webp');
  background-position: center center;
  background-size: cover;
  transform: scale(1.012);
  filter: saturate(.94) contrast(1.025);
}

.water {
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .87;
  pointer-events: none;
}

.atmosphere {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(41, 30, 23, .11), transparent 20%, transparent 77%, rgba(28, 21, 13, .20)),
    radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(20, 19, 14, .20) 100%);
}

.leaves { z-index: 3; pointer-events: none; }
.rewards { z-index: 4; pointer-events: none; }

.leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

.leaf img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(29, 20, 12, .30));
  transform: scale(var(--stretch, 1));
}

.leaf:focus-visible {
  outline: 2px solid #d9ebc0;
  outline-offset: 7px;
  border-radius: 50%;
}

.leaf.is-resting { transition: opacity 2.7s ease; }
.leaf.is-fading { opacity: 0; pointer-events: none; }

.reward {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #baff83;
  font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(5, 38, 19, .8), 0 0 11px rgba(125, 255, 123, .95), 0 0 27px rgba(62, 224, 85, .42);
  white-space: nowrap;
  animation: reward-rise 1.05s cubic-bezier(.2, .7, .27, 1) both;
}

.reward::before {
  content: '';
  position: absolute;
  inset: -15px -18px;
  border: 1px solid rgba(192, 255, 153, .5);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(78, 246, 113, .35);
  animation: reward-halo 1.05s ease-out both;
}

@keyframes reward-rise {
  0% { opacity: 0; transform: translate(-50%, -5%) scale(.58); }
  18% { opacity: 1; transform: translate(-50%, -45%) scale(1.22); }
  35% { transform: translate(-50%, -75%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -155%) scale(.92); }
}

@keyframes reward-halo {
  0% { opacity: 0; transform: scale(.55); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.5); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-aspect-ratio: 4/5) {
  .landscape { background-position: 48% center; }
  .atmosphere { background: linear-gradient(to bottom, rgba(41, 30, 23, .08), transparent 25%, rgba(28, 21, 13, .18)); }
}

@media (prefers-reduced-motion: reduce) {
  .reward { animation-duration: .55s; }
  .reward::before { animation-duration: .55s; }
}