:root {
  color: #3a2618;
  background: #1f1812;
  font-family: Georgia, "Times New Roman", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: #e8dcc4;
  container-type: inline-size;
}

[data-contract-id] {
  position: absolute;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Approved frames */
img[data-contract-id^="frame-"] {
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

[data-contract-state="pull"] [data-contract-id="frame-grip"] {
  animation: tug calc(var(--t-pull-ms) / 2) ease-in-out 2;
}

[data-contract-state="fart"] [data-contract-id="frame-recoil"] {
  animation: shake var(--t-shake-ms) linear both;
}

@keyframes tug {
  50% { transform: translateX(-0.3cqw); }
}

@keyframes shake {
  0% { transform: scale(1.012) translate(0, 0); }
  6% { transform: scale(1.012) translate(-0.25cqw, 0.14cqw); }
  12% { transform: scale(1.012) translate(0.24cqw, -0.16cqw); }
  18% { transform: scale(1.012) translate(-0.22cqw, -0.1cqw); }
  24% { transform: scale(1.012) translate(0.2cqw, 0.12cqw); }
  32% { transform: scale(1.012) translate(-0.17cqw, 0.1cqw); }
  40% { transform: scale(1.012) translate(0.15cqw, -0.09cqw); }
  50% { transform: scale(1.012) translate(-0.12cqw, -0.07cqw); }
  60% { transform: scale(1.012) translate(0.09cqw, 0.06cqw); }
  72% { transform: scale(1.012) translate(-0.06cqw, 0.04cqw); }
  86% { transform: scale(1.012) translate(0.03cqw, -0.02cqw); }
  100% { transform: none; }
}

/* Primary control on God's finger */
button[data-contract-id="finger-button"] {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 1.2cqw;
  background: transparent;
  cursor: grab;
}

button[data-contract-id="finger-button"]:active { cursor: grabbing; }
button[data-contract-id="finger-button"]:disabled { cursor: default; }
button[data-contract-id="finger-button"]:focus-visible {
  outline: 0.25cqw dashed rgb(255 250 235 / 0.95);
  outline-offset: 0.2cqw;
}

[data-contract-id="fingertip-pulse"] { pointer-events: none; }
[data-contract-id="fingertip-pulse"]::before,
[data-contract-id="fingertip-pulse"]::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 0.18cqw solid rgb(255 248 225 / 0.95);
  box-shadow: 0 0 0.8cqw rgb(255 236 170 / 0.8);
  animation: pulse var(--t-pulse-loop-ms) ease-out infinite;
}
[data-contract-id="fingertip-pulse"]::after { animation-delay: calc(var(--t-pulse-loop-ms) / 2); }

@keyframes pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Native fart gas: rolls in from the right edge along God's forearm */
[data-contract-id="gas-effect"] { pointer-events: none; }
[data-contract-id="gas-effect"] i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgb(196 206 70 / 0.72), rgb(150 168 48 / 0.45) 45%, rgb(120 140 40 / 0) 70%);
  filter: blur(0.35cqw);
  transform: translate(-50%, -50%) scale(1);
}

[data-contract-state="fart"] [data-contract-id="gas-effect"] i {
  animation: gas-roll var(--t-gas-travel-ms) cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--t-gas-travel-ms) * var(--d));
}

@keyframes gas-roll {
  0% { left: 100%; top: 52%; opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  25% { opacity: 1; }
  100% { left: var(--x); top: var(--y); opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

[data-contract-id="gas-effect"][data-contract-visibility="dimmed"] { opacity: 0.3; }

/* Native fanning swishes beside Adam's hand */
[data-contract-id="swish-effect"] { pointer-events: none; }
[data-contract-id="swish-effect"] i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22%;
  aspect-ratio: 2;
  border-radius: 50% 50% 0 0;
  border-top: 0.28cqw solid rgb(58 38 24 / 0.75);
  rotate: var(--r);
  opacity: 0;
  animation: swish calc(var(--t-swish-ms) / 3) ease-in-out 3;
  animation-delay: var(--t-recoil-frame-delay-ms);
}

@keyframes swish {
  0% { opacity: 0; transform: rotate(-14deg) scale(0.8); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: rotate(14deg) scale(1.1); }
}

/* Title */
[data-contract-id="title-block"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  text-shadow: 0 0.1cqw 0.4cqw rgb(255 250 238 / 0.9);
}
[data-contract-id="title-block"] h1 {
  margin: 0;
  font-size: 3.4cqw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a2618;
}
[data-contract-id="title-block"] p {
  margin: 0.6cqw 0 0;
  font-size: 1.7cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #7a2e1c;
}

/* Fixed launch row and mute */
a[data-contract-id],
button[data-contract-id="copy-ca"],
button[data-contract-id="mute-button"] {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(70 48 30 / 0.4);
  border-radius: 999px;
  background: rgb(250 243 228 / 0.84);
  color: #3a2618;
  font: 700 1.05cqw/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.1cqw 0.5cqw rgb(58 38 24 / 0.18);
}
a[data-contract-id]:hover,
button[data-contract-id="copy-ca"]:hover:not(:disabled),
button[data-contract-id="mute-button"]:hover { background: rgb(255 250 238 / 0.96); }
a[data-contract-id][aria-disabled="true"],
button[data-contract-id="copy-ca"]:disabled { cursor: default; opacity: 0.55; }
a[data-contract-id]:focus-visible,
button[data-contract-id="copy-ca"]:focus-visible,
button[data-contract-id="mute-button"]:focus-visible { outline: 3px solid #7a2e1c; outline-offset: 3px; }

button[data-contract-id="mute-button"] { white-space: nowrap; font-size: 0.85cqw; }

[data-contract-id="copy-status"] {
  display: grid;
  align-items: center;
  justify-items: end;
  font: 700 0.95cqw/1 Georgia, "Times New Roman", serif;
  color: #7a2e1c;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}