:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  background: #fff7c7;
  color: #263238;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(#bfefff, #fff7c7);
}

main {
  width: min(100%, 760px);
  margin: auto;
  padding: 1rem;
}

.tagasi {
  position: relative;
  z-index: 5;
  display: inline-block;
  padding: .65rem .9rem;
  border: 3px solid #263238;
  border-radius: 999px;
  background: #fff;
  color: #263238;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 3px 3px 0 #263238;
}

.pais {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: .6rem 0;
}

h1 {
  margin: 0;
  font-size: clamp(1.8rem, 8vw, 3rem);
  color: #7b2cbf;
  text-shadow: 3px 3px 0 #fff;
}

.skoor {
  padding: .3rem .8rem;
  border: 3px solid #263238;
  border-radius: 999px;
  background: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  white-space: nowrap;
}

/* The play field: sky, grass, falling broccoli and the stick figure. */
.ala {
  position: relative;
  height: clamp(340px, 60vh, 560px);
  overflow: hidden;
  border: 4px solid #263238;
  border-radius: 22px;
  background: linear-gradient(#8fe3ff, #d4f6ff);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.muru {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  border-top: 4px solid #5cb85c;
  background: #8ee28c;
}

.all {
  text-align: center;
}

p {
  min-height: 1.6em;
  margin: .6rem 0;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  font-weight: 800;
}

.nupp {
  min-height: 52px;
  padding: .75rem 1.1rem;
  border: 3px solid #263238;
  border-radius: 16px;
  background: #ffdd35;
  color: #263238;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: 4px 4px 0 #263238;
  cursor: pointer;
  touch-action: manipulation;
}

.nupp:active {
  translate: 3px 3px;
  box-shadow: 1px 1px 0 #263238;
}

.nupp:focus-visible,
.tagasi:focus-visible,
.brokoli:focus-visible {
  outline: 5px solid #ff4f87;
  outline-offset: 3px;
}

.brokoli {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: none;
}

.brokoli img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.brokoli.pyutud {
  filter: drop-shadow(0 0 7px #ffef5a);
  animation: vingu .3s ease-in-out infinite alternate;
  cursor: default;
}

.brokoli.maandus {
  pointer-events: none;
  animation: lirts .5s ease-out forwards;
}

.tykk {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 3;
  width: 14px;
  height: 14px;
  border: 2px solid #263238;
  border-radius: 50%;
  background: #3fa63a;
  pointer-events: none;
}

.tykk.suur { scale: 1.8; }

.tykk.vars {
  top: -8px;
  left: -4px;
  width: 8px;
  height: 16px;
  border-radius: 4px;
  background: #a5d66b;
}

.uks[hidden],
.lind[hidden] {
  display: none;
}

/* Round 3: the door to hide behind, the bird and its dynamite. */
.uks {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0;
  border: 4px solid #263238;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: #2a1a10;
  perspective: 500px;
  transform-origin: 50% 100%;
  cursor: pointer;
  touch-action: none;
  animation: uks-tuleb .4s ease-out;
}

.uks img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px 999px 0 0;
  transform-origin: 0 50%;
  transition: transform .3s ease;
  pointer-events: none;
}

.uks.lahti img {
  transform: rotateY(-75deg);
}

.uks.raputab {
  animation: raputa .4s ease;
}

.uks:focus-visible {
  outline: 5px solid #ff4f87;
  outline-offset: 3px;
}

.lind {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 70px;
  height: 56px;
  pointer-events: none;
}

.lind img {
  display: block;
  width: 100%;
  height: 100%;
  animation: lehvi .25s ease-in-out infinite alternate;
}

.dunamiit {
  position: absolute;
  top: -20px;
  left: -13px;
  z-index: 4;
  width: 26px;
  height: 40px;
  pointer-events: none;
}

.dunamiit img {
  display: block;
  width: 100%;
  height: 100%;
}

.pauh {
  position: absolute;
  z-index: 4;
  width: 120px;
  height: 120px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6a8 0 20%, #ffb12b 40%, #ff5a2b 65%, transparent 70%);
  pointer-events: none;
  animation: pauh .55s ease-out forwards;
}

.hyyd {
  position: absolute;
  z-index: 4;
  translate: -50% -50%;
  color: #ff4f87;
  font-size: 1.6rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 #fff;
  white-space: nowrap;
  pointer-events: none;
  animation: hyyd .8s ease-out forwards;
}

.juku-koht {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 230px;
  height: 330px;
  transform-origin: 0 0;
  pointer-events: none;
}

.pilv { z-index: 0; }

.juku {
  position: relative;
  width: 230px;
  height: 330px;
  transform-origin: 50% 100%;
}

.pea {
  position: absolute;
  top: 4px;
  left: 73px;
  width: 92px;
  height: 92px;
  border: 8px solid #263238;
  border-radius: 50%;
  background: #ffe09b;
  z-index: 2;
}

/* Hair behind the head sits under the head and the body. */
.juuksed.juuksed-taga { z-index: 0; }

/* Hair canvas drawn by juku.js; this box must match the JL_* constants there. */
.juuksed {
  position: absolute;
  top: -70px;
  left: -70px;
  z-index: 3;
  width: 370px;
  height: 330px;
  pointer-events: none;
}

/* Giant broccoli costume: exactly the falling broccoli (brokoli.svg), drawn
   5.5 times bigger. The face sits in the middle floret, the florets are under
   the head and the stalk covers the body (under the arms and legs). */
.kapuuts {
  position: absolute;
  top: -104px;
  left: -40px;
  z-index: 1;
  width: 319px;
  height: 231px;
  background: url(kostyym-oisik.svg) center / 100% 100% no-repeat;
}

.ylikond {
  position: absolute;
  top: 61px;
  left: 53px;
  width: 132px;
  height: 170px;
  background: url(kostyym-vars.svg) center / 100% 100% no-repeat;
}

.silm {
  position: absolute;
  top: 28px;
  width: 9px;
  height: 12px;
  border-radius: 50%;
  background: #263238;
}

.silm.vasak { left: 22px; }
.silm.parem { right: 22px; }

.suu {
  position: absolute;
  left: 25px;
  bottom: 16px;
  width: 30px;
  height: 15px;
  border-bottom: 6px solid #e53965;
  border-radius: 0 0 50% 50%;
}

/* Hiding behind the door in round 3. */
.juku {
  transition: opacity .3s;
}

.juku.peidus {
  opacity: 0;
}

/* Too hot: the face turns red and shakes. */
.juku.punane .pea {
  background: #ff7a6b;
  animation: varise .08s linear infinite alternate;
}

/* The costume has burst: only the stick figure is left. */
.juku.lohkes .kapuuts,
.juku.lohkes .ylikond {
  display: none;
}

/* Open mouth while eating, and in shock. */
.juku.punane .suu,
.juku.lohkes .suu,
.juku.soob .suu {
  left: 26px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  border: 6px solid #e53965;
  border-radius: 50%;
  background: #7a1730;
}

.keha,
.kasi-paigal,
.kasi-lehvitab,
.jalg {
  position: absolute;
  width: 9px;
  border-radius: 999px;
  background: #263238;
  transform-origin: top center;
}

.keha {
  top: 91px;
  left: 114px;
  height: 135px;
}

.kasi-paigal {
  top: 128px;
  left: 116px;
  height: 104px;
  rotate: 58deg;
}

.juku.loob .kasi-paigal {
  animation: loo .45s ease-in-out;
}

.kasi-lehvitab {
  top: 128px;
  left: 116px;
  height: 104px;
  rotate: -30deg;
}

.kabal {
  position: absolute;
  left: -10px;
  bottom: -16px;
  width: 29px;
  height: 29px;
  border: 7px solid #263238;
  border-radius: 50%;
  background: #ffe09b;
}

/* Zombie knife held in the still hand; the arm is rotated 58deg, so the knife turns back to point up. */
.nuga {
  position: absolute;
  left: calc(50% - 7px);
  bottom: -13px;
  width: 14px;
  height: 76px;
  transform-origin: 50% 85%;
  rotate: -73deg;
  scale: 1.35;
}

.tera {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 56px;
  border: 3px solid #263238;
  border-radius: 100% 2px 3px 3px / 70% 2px 3px 3px;
  background: #e4ebf2;
}

.lima {
  position: absolute;
  top: 6px;
  left: 2px;
  width: 9px;
  height: 30px;
  border-radius: 70% 40% 60% 50%;
  background: #6fdc2f;
}

.tilk {
  position: absolute;
  width: 7px;
  height: 9px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #6fdc2f;
  animation: tilgu 1.6s ease-in infinite;
}

.tilk-uks { top: 30px; left: -4px; }
.tilk-kaks { top: 22px; left: 10px; animation-delay: .8s; }

.pide {
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 12px;
  height: 22px;
  border: 3px solid #263238;
  border-radius: 4px;
  background: #a0522d;
}

.kasi-paigal .kabal {
  z-index: 1;
}

.jalg {
  top: 218px;
  left: 116px;
  height: 112px;
}

.jalg-vasak { rotate: 28deg; }
.jalg-parem { rotate: -28deg; }

.juku.konnib .jalg-vasak { animation: samm-vasak .3s ease-in-out infinite alternate; }
.juku.konnib .jalg-parem { animation: samm-parem .3s ease-in-out infinite alternate; }

.juku.huppab {
  animation: huppa .65s ease;
}

.pilv {
  position: absolute;
  width: 110px;
  height: 38px;
  border-radius: 999px;
  background: rgb(255 255 255 / .85);
}

.pilv::before,
.pilv::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: inherit;
}

.pilv::before {
  width: 46px;
  height: 46px;
  left: 18px;
  bottom: 7px;
}

.pilv::after {
  width: 58px;
  height: 58px;
  right: 12px;
  bottom: 3px;
}

.pilv-uks { top: 12%; left: 4%; }
.pilv-kaks { top: 26%; right: 3%; scale: .7; }

@keyframes tilgu {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: 1; }
  100% { translate: 0 26px; opacity: 0; }
}

@keyframes loo {
  0% { rotate: 58deg; }
  40% { rotate: 150deg; }
  70% { rotate: 25deg; }
  100% { rotate: 58deg; }
}

@keyframes samm-vasak {
  from { rotate: 28deg; }
  to { rotate: -10deg; }
}

@keyframes samm-parem {
  from { rotate: -28deg; }
  to { rotate: 10deg; }
}

@keyframes huppa {
  0%, 100% { translate: 0 0; scale: 1; }
  45% { translate: 0 -50px; scale: 1.05 .95; }
  70% { translate: 0 0; scale: .96 1.04; }
}

@keyframes uks-tuleb {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes raputa {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -4deg; }
  75% { rotate: 4deg; }
}

@keyframes lehvi {
  from { scale: 1 1; }
  to { scale: 1 .85; }
}

@keyframes pauh {
  from { scale: .2; opacity: 1; }
  to { scale: 1.4; opacity: 0; }
}

@keyframes varise {
  from { translate: -3px 0; }
  to { translate: 3px 0; }
}

@keyframes vingu {
  from { scale: 1; }
  to { scale: 1.12; }
}

@keyframes lirts {
  to { scale: 1.4 .3; opacity: 0; }
}

@keyframes hyyd {
  0% { scale: .4; opacity: 1; }
  30% { scale: 1.2; }
  100% { scale: 1; opacity: 0; transform: translateY(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  .tilk { animation: none; }
  .juku.huppab { animation: none; }
  .juku.punane .pea { animation: none; }
}