:root {
  color-scheme: light;
  --ink: #18231e;
  --paper: #fff8df;
  --sun: #f6c85f;
  --coral: #f85f55;
  --sky: #68c8e8;
  --leaf: #3eaa67;
  --shadow: rgba(24, 35, 30, .22);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sun);
}

body {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

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

#camera,
#demo,
#kaleido,
.sunwash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#camera {
  z-index: -4;
  display: none;
  object-fit: cover;
  background: #17231f;
}

#demo {
  z-index: -4;
  display: none;
  touch-action: none;
}

#kaleido {
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}

.sunwash {
  z-index: -3;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.42), transparent 25%),
    linear-gradient(140deg, rgba(255,211,89,.24), rgba(26,80,60,.1));
  mix-blend-mode: screen;
  pointer-events: none;
}

.is-camera #camera,
.is-demo #demo { display: block; }

.is-field::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,27,20,.62), transparent 27%, transparent 66%, rgba(10,27,20,.64));
  pointer-events: none;
}

.is-finished::after { display: none; }

.intro {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 20% 18%, #fff2a6 0 8%, transparent 8.5%),
    radial-gradient(circle at 86% 72%, #7dccb4 0 10%, transparent 10.5%),
    radial-gradient(circle at 12% 82%, #f47664 0 6%, transparent 6.5%),
    linear-gradient(140deg, #ffd863 0 52%, #ef976e 52% 100%);
  transition: opacity .45s ease, visibility .45s ease;
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  border: 3px solid rgba(24,35,30,.75);
  border-radius: 52% 48% 62% 38%;
  opacity: .24;
}

.intro::before { left: -20vw; top: -22vw; transform: rotate(28deg); }
.intro::after { right: -18vw; bottom: -24vw; transform: rotate(-16deg); }

.eyebrow {
  margin: 0 0 12px;
  font-size: clamp(.7rem, 1.3vw, .9rem);
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

h1 {
  position: relative;
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(5.2rem, 18vw, 13rem);
  font-weight: 900;
  line-height: .69;
  letter-spacing: -.055em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

h1 span { display: block; }
h1 span:last-child { margin-left: .22em; color: #fff6d8; text-shadow: 5px 5px 0 var(--ink); }

.lede {
  width: min(570px, 92vw);
  margin: clamp(30px, 5vh, 52px) 0 22px;
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1.42;
}

.entry-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.button {
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 12px 19px;
  font-size: .94rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(24,35,30,.22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(24,35,30,.22); }
.button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(24,35,30,.22); }
.button:focus-visible, .icon-button:focus-visible { outline: 4px solid white; outline-offset: 3px; }
.button-primary { color: #fffaf0; background: var(--ink); }
.button-secondary { color: var(--ink); background: rgba(255,248,223,.76); }
.button-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--coral); }

.privacy {
  margin: 17px 0 0;
  font: 700 .75rem/1.4 system-ui, sans-serif;
  letter-spacing: .02em;
  opacity: .72;
}

.is-field .intro { display: none; opacity: 0; visibility: hidden; pointer-events: none; }

.field-header,
.mode-note,
.badges,
.reticle,
.demo-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.is-field .field-header,
.is-field .mode-note,
.is-field .badges,
.is-field .reticle,
.is-demo .demo-hint { opacity: 1; visibility: visible; }

.field-header {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  color: white;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.wordmark {
  justify-self: start;
  font: 900 clamp(.86rem, 2vw, 1.2rem)/.78 Impact, sans-serif;
  letter-spacing: -.02em;
}

.target-copy { display: grid; justify-items: center; text-align: center; }
.target-copy span { font-size: .65rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.target-copy strong { margin-top: 2px; font: 900 clamp(1.25rem, 3vw, 2rem)/1 Georgia, serif; font-style: italic; }

.icon-button {
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: white;
  background: rgba(13,34,25,.24);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.badges { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(48px, 6.2vw, 72px);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 52% 48% 58% 42%;
  background: rgba(12,29,23,.28);
  box-shadow: 0 6px 24px rgba(0,0,0,.16), inset 0 0 0 5px rgba(255,255,255,.1);
  backdrop-filter: blur(9px);
  transform: rotate(var(--turn, 0deg));
  transition: background .4s ease, transform .45s cubic-bezier(.18,.89,.32,1.28);
}

.badge:nth-child(1) { top: 20%; left: max(16px, env(safe-area-inset-left)); --turn: -7deg; }
.badge:nth-child(2) { top: 20%; right: max(16px, env(safe-area-inset-right)); --turn: 8deg; }
.badge:nth-child(3) { top: 47%; right: max(12px, env(safe-area-inset-right)); --turn: -4deg; }
.badge:nth-child(4) { bottom: 13%; right: max(18px, env(safe-area-inset-right)); --turn: 7deg; }
.badge:nth-child(5) { bottom: 13%; left: max(18px, env(safe-area-inset-left)); --turn: -8deg; }
.badge:nth-child(6) { top: 47%; left: max(12px, env(safe-area-inset-left)); --turn: 5deg; }
.badge::after { content: ""; width: 15%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.75); }
.badge.is-target { animation: badge-pulse 1.3s ease-in-out infinite; }
.badge.is-caught { background: var(--badge-color); transform: rotate(var(--turn, 0deg)) scale(1.07); }
.badge.is-caught::after { display: none; }
.badge svg { width: 78%; height: 78%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.24)); }

@keyframes badge-pulse { 50% { box-shadow: 0 0 0 9px rgba(255,255,255,.18), 0 7px 28px rgba(0,0,0,.18); } }

.reticle {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: clamp(108px, 18vmin, 174px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 15px rgba(0,0,0,.22));
  pointer-events: none;
}

.reticle svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.reticle-track, .reticle-progress { fill: rgba(255,255,255,.045); stroke-width: 3.5; }
.reticle-track { stroke: rgba(255,255,255,.68); stroke-dasharray: 3 7; }
.reticle-progress {
  stroke: white;
  stroke-linecap: round;
  stroke-dasharray: 320.45;
  stroke-dashoffset: 320.45;
  transition: stroke-dashoffset .15s linear;
}
.reticle-glint {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  left: 50%;
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px white;
}

.demo-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 50px));
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 80vw;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  color: white;
  background: rgba(16,37,29,.34);
  font: 800 .7rem/1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: opacity .35s ease;
}

.demo-hint.is-hidden { opacity: 0; }

.mode-note {
  position: absolute;
  z-index: 7;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  color: white;
  font: 800 .68rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  text-transform: uppercase;
}

.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: min(360px, calc(100vw - 40px));
  padding: 14px 18px;
  border-radius: 18px;
  background: #fff8df;
  box-shadow: 0 12px 45px rgba(10,30,20,.28);
  font: 800 .85rem/1.35 system-ui, sans-serif;
  text-align: center;
  transform: translate(-50%, -10%) scale(.9);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.escape-layer { position: absolute; z-index: 16; inset: 0; pointer-events: none; }
.escapee {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(70px, 12vw, 120px);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.28));
  animation: escape 1.05s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes escape {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(8deg); }
  100% { transform: translate(var(--fly-x), var(--fly-y)) scale(.45) rotate(var(--fly-r)); opacity: 0; }
}

.finish {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.4fr);
  gap: 4vw;
  padding: max(40px, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(6vw, env(safe-area-inset-left));
  color: white;
  opacity: 0;
  visibility: hidden;
  transition: opacity .75s ease .25s, visibility .75s ease .25s;
}

.is-finished #kaleido { opacity: 1; transition: none; }
.is-finished .finish { opacity: 1; visibility: visible; transition: none; }
.is-finished .field-header,
.is-finished .badges,
.is-finished .reticle,
.is-finished .mode-note,
.is-finished .demo-hint { opacity: 0; visibility: hidden; pointer-events: none; }

.finish-copy { max-width: 560px; text-shadow: 0 3px 20px rgba(12,30,24,.35); }
.finish h2 {
  margin: 0 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(3.4rem, 7.5vw, 7rem);
  font-style: italic;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
}
.finish-copy > p:not(.eyebrow) { max-width: 34ch; margin: 0 0 24px; font: 700 clamp(1rem, 1.8vw, 1.3rem)/1.45 system-ui, sans-serif; }
.finish .button-primary { border-color: white; }

.parade {
  position: relative;
  align-self: stretch;
  min-height: 360px;
  animation: parade-sway 5s ease-in-out infinite alternate;
}
.parade::after {
  content: "";
  position: absolute;
  inset: 8% 3%;
  border: 3px dashed rgba(255,248,223,.38);
  border-radius: 50%;
  transform: rotate(-9deg);
  animation: trail-turn 9s linear infinite;
}
.parade-creature {
  position: absolute;
  z-index: 1;
  width: clamp(78px, 12vw, 160px);
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.22));
  animation:
    creature-pop .65s cubic-bezier(.2,.9,.25,1.35) var(--delay, 0s) both,
    parade-bob 2.2s ease-in-out calc(.7s + var(--delay, 0s)) infinite alternate;
}
.parade-creature:nth-child(1) { left: 1%; top: 12%; --r: -8deg; --delay: .02s; }
.parade-creature:nth-child(2) { left: 31%; top: 2%; --r: 7deg; --delay: .1s; }
.parade-creature:nth-child(3) { right: 3%; top: 17%; --r: -5deg; --delay: .18s; }
.parade-creature:nth-child(4) { left: 10%; bottom: 4%; --r: 6deg; --delay: .26s; }
.parade-creature:nth-child(5) { left: 42%; bottom: 0; --r: -7deg; --delay: .34s; }
.parade-creature:nth-child(6) { right: 1%; bottom: 9%; --r: 5deg; --delay: .42s; }
@keyframes creature-pop { from { opacity: 0; transform: translate(0, 80px) scale(.15) rotate(-35deg); } to { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--r)); } }
@keyframes parade-bob { from { transform: translateY(-7px) rotate(var(--r)); } to { transform: translateY(13px) rotate(calc(var(--r) * -1)); } }
@keyframes parade-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes trail-turn { to { transform: rotate(351deg); } }

@media (max-width: 760px) {
  h1 { font-size: clamp(5rem, 25vw, 8rem); }
  .lede { margin-top: 32px; }
  .entry-actions { flex-direction: column; width: min(320px, 88vw); }
  .entry-actions .button { width: 100%; }
  .privacy { max-width: 330px; }
  .wordmark { display: none; }
  .field-header { grid-template-columns: 44px 1fr 44px; }
  .target-copy { grid-column: 2; }
  .icon-button { grid-column: 3; }
  .badge { width: 48px; }
  .badge:nth-child(1), .badge:nth-child(2) { top: 18%; }
  .badge:nth-child(3), .badge:nth-child(6) { top: 46%; }
  .badge:nth-child(4), .badge:nth-child(5) { bottom: 15%; }
  .finish { grid-template-columns: 1fr; align-content: center; gap: 16px; text-align: center; }
  .finish-copy { margin: 0 auto; }
  .finish-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .finish h2 { font-size: clamp(3.5rem, 16vw, 5.7rem); }
  .parade { min-height: 220px; }
  .parade-creature { width: clamp(66px, 19vw, 100px); }
}

@media (max-height: 660px) and (orientation: landscape) {
  .intro { align-content: center; grid-template-columns: 1fr 1fr; column-gap: 5vw; text-align: left; }
  .intro .eyebrow, .intro h1, .intro .lede { justify-self: start; }
  .intro .eyebrow, .intro h1 { grid-column: 1; }
  .intro .lede, .intro .entry-actions, .intro .privacy { grid-column: 2; }
  .intro .lede { grid-row: 1 / span 2; align-self: end; margin: 0 0 90px; }
  .intro .entry-actions { align-self: center; }
  .intro .privacy { align-self: start; }
  h1 { font-size: min(20vh, 7.5rem); }
  .parade { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}