.wwg {
  --ink: #000;
  --paper: #fff;
  box-sizing: border-box;
  position: relative;
  width: min(100%, 900px);
  margin: .65rem auto;
  padding: clamp(.7rem, 2vw, 1.2rem);
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  z-index: 0;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid currentColor;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
  container-type: inline-size;
}

.wwg *, .wwg *::before, .wwg *::after { box-sizing: border-box; }
.wwg [hidden] { display: none !important; }

.wwg__header { text-align: center; }

.wwg__title {
  margin: 0;
  font-size: clamp(2.35rem, 8vw, 5.1rem);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .9;
}

.wwg__subtitle {
  margin: .3rem 0 .5rem;
  font-size: clamp(.7rem, 2.5vw, .95rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* This area never changes height. Controls may become invisible, but the
   reserved space remains so the stage, timer and main button never jump. */
.wwg__selection-area {
  display: grid;
  grid-template-rows: 58px 50px;
  align-items: center;
  min-height: 108px;
  margin-bottom: .45rem;
}

.wwg__choose-prompt {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
  height: 58px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(.72rem, 2.5vw, .92rem);
  font-weight: 800;
  letter-spacing: .16em;
  visibility: visible;
}

.wwg.has-selection .wwg__choose-prompt,
.wwg.has-started .wwg__choose-prompt {
  visibility: hidden;
}

.wwg__choose-arrow {
  display: block;
  width: clamp(82px, 22vw, 108px);
  height: 36px;
  overflow: visible;
  color: var(--ink);
  transform: rotate(2deg);
  pointer-events: none;
}

.wwg__choose-arrow path {
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.wwg__choices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 2vw, .9rem);
  height: 50px;
  margin: 0;
  visibility: visible;
}

.wwg__choice,
.wwg__control,
.wwg__again {
  min-width: 88px;
  min-height: 46px;
  padding: .6rem .9rem;
  border: 2px solid currentColor;
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
}

.wwg__choice:hover,
.wwg__choice.is-selected,
.wwg__choice[aria-pressed="true"],
.wwg__control:hover,
.wwg__again:hover {
  color: var(--paper);
  background: var(--ink);
}

.wwg__choice:disabled {
  cursor: default;
  opacity: 1;
}

.wwg__choice:disabled:not(.is-selected) {
  color: var(--ink);
  background: var(--paper);
}

.wwg button:focus-visible {
  outline: 4px solid currentColor;
  outline-offset: 3px;
}

.wwg__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2.15 / 1;
  min-height: 160px;
  max-height: 360px;
  overflow: hidden;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: var(--paper);
}

.wwg__art { display: block; width: 100%; height: 100%; }
.wwg__art * { vector-effect: non-scaling-stroke; }

.wwg__line,
.wwg__cloud,
.wwg__cannon-outline,
.wwg__figure-line,
.wwg__chute,
.wwg__cord {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wwg__line { stroke-width: 3; }
.wwg__cloud { stroke-width: 3; }
.wwg__cannon-outline { fill: var(--paper); stroke-width: 5; }
.wwg__cannon-dark { fill: var(--ink); }
.wwg__figure-head { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.wwg__helmet { fill: var(--ink); stroke: var(--ink); stroke-width: 3; }
.wwg__helmet-line { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; }
.wwg__eye { fill: var(--ink); }
.wwg__figure-line { stroke-width: 5; }
.wwg__chute { fill: var(--paper); stroke-width: 5; }
.wwg__cord { stroke-width: 3; }

.wwg__runner,
.wwg__flyer,
.wwg__parachutist { opacity: 0; }

.wwg__timer-wrap {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: .25rem 0 0;
}

.wwg__timer {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(1.8rem, 7.3vw, 4.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.08em;
  text-align: center;
}

.wwg__actions {
  display: grid;
  place-items: center;
  min-height: 56px;
}

.wwg__control,
.wwg__again {
  grid-area: 1 / 1;
  min-width: min(100%, 220px);
  min-height: 52px;
}

.wwg__visible-result {
  min-height: 1.4em;
  margin: .35rem 0 0;
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 900;
  letter-spacing: .18em;
  text-align: center;
}

.wwg__credit {
  margin: .7rem 0 0;
  font-size: clamp(.62rem, 2vw, .76rem);
  text-align: center;
}

.wwg__game-over {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 2rem;
  color: #fff;
  background: #000;
}

.wwg.is-late .wwg__game-over { display: grid; }
.wwg.is-late > :not(.wwg__game-over):not(.wwg__status) { visibility: hidden; }

.wwg__game-over-main {
  align-self: center;
  text-align: center;
}

.wwg__game-over-title {
  margin: 0 0 1.8rem;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(2.4rem, 10vw, 6rem);
  font-weight: 700;
  letter-spacing: .02em;
  word-spacing: -.18em;
  white-space: nowrap;
}

.wwg__game-over .wwg__again {
  color: #fff;
  background: #000;
  border-color: #fff;
}

.wwg__game-over .wwg__again:hover {
  color: #000;
  background: #fff;
}

.wwg__game-over .wwg__credit { margin: 0; }

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

.wwg.is-early .wwg__head-in-cannon,
.wwg.is-success .wwg__head-in-cannon { opacity: 0; }

.wwg.is-early .wwg__runner {
  animation: wwg-run-away 2.35s cubic-bezier(.2,.75,.25,1) both;
}

.wwg.is-early .wwg__runner-arm-a,
.wwg.is-early .wwg__runner-leg-b {
  transform-origin: 0 0;
  animation: wwg-limb-a .22s .9s linear 7 alternate;
}

.wwg.is-early .wwg__runner-arm-b,
.wwg.is-early .wwg__runner-leg-a {
  transform-origin: 0 0;
  animation: wwg-limb-b .22s .9s linear 7 alternate;
}

.wwg.is-success .wwg__cannon {
  animation: wwg-recoil .45s ease-out both;
}

.wwg.is-success .wwg__flyer {
  animation: wwg-flight 7.1s cubic-bezier(.22,.68,.2,1) both;
}

.wwg.is-success .wwg__parachutist {
  animation: wwg-descent 7.1s ease-in-out both;
}

@keyframes wwg-run-away {
  0% { opacity: 0; transform: translate(450px, 258px) scale(.86); }
  7% { opacity: 1; transform: translate(450px, 275px) scale(.9); }
  28% { opacity: 1; transform: translate(505px, 350px) scale(.96); }
  40% { opacity: 1; transform: translate(548px, 393px) scale(1); }
  94% { opacity: 1; transform: translate(1010px, 393px) scale(1); }
  100% { opacity: 0; transform: translate(1040px, 393px) scale(1); }
}

@keyframes wwg-limb-a {
  from { transform: rotate(-32deg); }
  to { transform: rotate(32deg); }
}

@keyframes wwg-limb-b {
  from { transform: rotate(32deg); }
  to { transform: rotate(-32deg); }
}

@keyframes wwg-recoil {
  0% { transform: translateY(0); }
  35% { transform: translateY(13px); }
  100% { transform: translateY(0); }
}

@keyframes wwg-flight {
  0% { opacity: 0; transform: translate(450px, 258px) scale(.86); }
  3% { opacity: 1; transform: translate(450px, 238px) scale(.86); }
  18% { opacity: 1; transform: translate(448px, 60px) scale(.7); }
  36% { opacity: 1; transform: translate(466px, -140px) scale(.42); }
  50% { opacity: 1; transform: translate(510px, -285px) scale(.18); }
  54%, 100% { opacity: 0; transform: translate(526px, -300px) scale(.16); }
}

@keyframes wwg-descent {
  0%, 53% { opacity: 0; transform: translate(610px, -220px) scale(.42); }
  58% { opacity: 1; transform: translate(610px, -130px) scale(.5); }
  73% { opacity: 1; transform: translate(636px, 55px) scale(.68); }
  90% { opacity: 1; transform: translate(656px, 328px) scale(.92); }
  100% { opacity: 1; transform: translate(660px, 373px) scale(1); }
}

@container (max-width: 540px) {
  .wwg { padding: .65rem; }
  .wwg__selection-area { grid-template-rows: 54px 48px; min-height: 102px; }
  .wwg__choose-prompt { height: 54px; }
  .wwg__choices { height: 48px; gap: .35rem; }
  .wwg__choice { min-width: 0; flex: 1 1 0; padding-inline: .3rem; }
  .wwg__stage { min-height: 150px; }
  .wwg__timer-wrap { min-height: 68px; }
  .wwg__credit { line-height: 1.4; }
}

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

@media (forced-colors: active) {
  .wwg,
  .wwg__choice,
  .wwg__control,
  .wwg__again,
  .wwg__stage { forced-color-adjust: auto; }
}