:root {
  color-scheme: dark;
  --bg: #15110d;
  --night: #0c1113;
  --dirt: #3b2b1c;
  --grass: #172719;
  --wood: #6d4329;
  --wood-dark: #3c271b;
  --canvas: #f1dfbd;
  --panel: #2a1e19;
  --panel-2: #3a2820;
  --ink: #fff0cf;
  --muted: #d4bc8e;
  --red: #d84538;
  --ticket: #ff8f9b;
  --gold: #f0bf4c;
  --green: #72c171;
  --blue: #4e91bb;
  --line: #8a6741;
  --paint-blue: #2f6f91;
  --paint-red: #b6372d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -12rem, rgba(255, 203, 91, 0.2), transparent 34rem),
    linear-gradient(180deg, var(--night) 0 28rem, var(--grass) 28rem 100%);
  color: var(--ink);
  font-family: "Courier New", monospace;
  overflow-x: hidden;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.fairground-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.fairground-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(90, 61, 31, 0.95), transparent 34%),
    radial-gradient(ellipse at 76% 100%, rgba(77, 50, 28, 0.85), transparent 36%),
    repeating-linear-gradient(6deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, transparent, var(--dirt));
}

.distant-tents {
  position: absolute;
  left: 4vw;
  right: 4vw;
  top: 12rem;
  height: 8rem;
  opacity: 0.72;
  background:
    linear-gradient(135deg, transparent 0 38%, var(--paint-red) 39% 48%, var(--canvas) 49% 58%, transparent 59%) 4% 60% / 12rem 5rem no-repeat,
    linear-gradient(45deg, transparent 0 38%, var(--paint-blue) 39% 48%, var(--canvas) 49% 58%, transparent 59%) 40% 52% / 10rem 5rem no-repeat,
    linear-gradient(135deg, transparent 0 38%, var(--gold) 39% 48%, var(--canvas) 49% 58%, transparent 59%) 78% 58% / 13rem 5rem no-repeat;
  filter: saturate(0.85);
}

.string-lights {
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: 7rem;
  height: 8rem;
  background:
    radial-gradient(circle, var(--gold) 0 4px, transparent 5px) 0 0 / 64px 64px,
    radial-gradient(circle, #ffefe1 0 3px, transparent 4px) 32px 28px / 64px 64px;
  mask-image: linear-gradient(172deg, transparent 0 28%, #000 29% 44%, transparent 45% 100%);
  animation: bulbFlicker 2.6s steps(2) infinite;
}

.fair-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 46px;
}

.fair-header,
.wallet,
.fair-grid {
  display: grid;
  gap: 16px;
}

.fair-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  position: relative;
  border: 4px solid var(--wood-dark);
  background:
    linear-gradient(90deg, rgba(0,0,0,0.16), transparent 24%, rgba(0,0,0,0.18)),
    var(--canvas);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.34);
  color: #301d14;
  padding: 18px;
  transform: rotate(-0.45deg);
}

.kicker,
h1,
h2,
p {
  margin: 0;
}

.kicker,
.wallet span,
.note {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2rem, 6vw, 4.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(216, 69, 56, 0.35);
}

h2 {
  font-size: 1rem;
  text-transform: uppercase;
}

h3 {
  margin: 0;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.top-actions a,
.top-actions button,
.primary,
.booth-button,
.prize {
  border: 3px solid var(--wood-dark);
  background: var(--canvas);
  color: #2a1a12;
  padding: 9px 11px;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

.top-actions a:hover,
.top-actions button:hover,
.primary:hover,
.booth-button:hover,
.prize:hover {
  background: var(--gold);
  color: #27180f;
}

.wallet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.wallet div,
.panel,
.booth-list,
.stage {
  border: 4px solid var(--wood-dark);
  background: rgba(61, 39, 27, 0.96);
  box-shadow: 6px 7px 0 rgba(0,0,0,0.28);
}

.wallet div {
  position: relative;
  padding: 12px;
  min-height: 92px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
    var(--panel-2);
}

.wallet-card::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 13px;
  width: 44px;
  height: 26px;
  opacity: 0.9;
}

.wallet-card.tokens::after {
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 38%, rgba(255,255,255,0.55) 39% 43%, transparent 44%),
    var(--gold);
  box-shadow: -16px -5px 0 -2px #c9952e, -30px 2px 0 -3px #f0bf4c;
}

.wallet-card.tickets::after {
  width: 74px;
  height: 24px;
  border: 2px dashed rgba(82, 24, 30, 0.7);
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(82,24,30,0.28) 12px 14px),
    var(--ticket);
}

.wallet-card.prizes::after {
  content: "🏆";
  display: grid;
  place-items: center;
  width: 46px;
  height: 38px;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--ink);
}

.wallet strong {
  display: block;
  font-size: 2rem;
  color: var(--gold);
}

.message {
  margin: 16px 0;
  border: 3px dashed #7a2630;
  padding: 14px 16px;
  min-height: 48px;
  background:
    radial-gradient(circle at 0 50%, transparent 0 9px, var(--ticket) 10px),
    radial-gradient(circle at 100% 50%, transparent 0 9px, var(--ticket) 10px),
    var(--ticket);
  color: #421a1f;
  font-weight: 800;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.28);
}

.fair-grid {
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  align-items: start;
  margin-top: 20px;
}

.booth-list,
.stage,
.panel {
  position: relative;
  padding: 16px;
}

.booth-list::before,
.panel::before,
.booth-frame::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: -34px;
  height: 34px;
  border: 4px solid var(--wood-dark);
  border-bottom: 0;
  background:
    repeating-linear-gradient(90deg, var(--paint-red) 0 28px, var(--canvas) 28px 56px);
}

.booth-list,
.panel {
  margin-top: 34px;
}

.button-grid,
.planned-grid,
.prize-shelf {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.planned-grid {
  margin-bottom: 18px;
}

.booth-button,
.prize {
  width: 100%;
  text-align: left;
}

.planned-booth {
  display: grid;
  gap: 4px;
  border: 2px solid rgba(255, 240, 207, 0.18);
  padding: 8px;
  color: var(--muted);
  background: rgba(0,0,0,0.14);
}

.planned-booth strong {
  color: var(--ink);
}

.stage {
  min-height: 540px;
  margin-top: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,0.16), transparent 18%, rgba(0,0,0,0.16)),
    var(--wood);
}

.stage-sign {
  border: 4px solid var(--wood-dark);
  background: var(--canvas);
  color: #2b1c13;
  padding: 12px;
  margin-bottom: 18px;
  text-align: center;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
  transform: rotate(0.35deg);
}

#stageKicker {
  color: #8a2e28;
  text-transform: uppercase;
}

.stage-body {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  min-height: 390px;
  align-content: center;
  border: 3px solid rgba(46, 28, 18, 0.85);
  background:
    linear-gradient(180deg, rgba(13, 9, 7, 0.2), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 24px),
    #4c3020;
  padding: 18px;
}

.side-row {
  display: grid;
  gap: 16px;
}

.prize.collected {
  border-color: var(--green);
  color: var(--green);
}

.prize {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 54px;
}

.prize.is-selected {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.prize::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}

.prize span {
  min-width: 0;
}

.prize b {
  color: #7a2630;
  font-size: 0.72rem;
  white-space: nowrap;
}

.prize.affordable {
  background: #ffe6a3;
}

.prize.collected {
  background: rgba(114, 193, 113, 0.16);
}

.prize.collected::after {
  content: "CLAIMED";
  position: absolute;
  right: 9px;
  top: 6px;
  color: var(--green);
  font-size: 0.62rem;
  transform: rotate(-8deg);
}

.prize-booth {
  background:
    radial-gradient(circle, rgba(255,255,255,0.12) 0 2px, transparent 3px) 0 0 / 24px 24px,
    var(--panel-2);
}

.prize-shelf {
  padding-top: 8px;
  border-top: 5px solid var(--wood-dark);
}

.prize-detail {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 3px solid var(--wood-dark);
  background: rgba(241, 223, 189, 0.92);
  color: #2a1a12;
  text-align: center;
}

.prize-status {
  color: #7a2630;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.won-prize-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 3px dashed rgba(255, 240, 207, 0.24);
}

.gallery-prize {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-height: 82px;
  border: 2px solid var(--wood-dark);
  background: var(--canvas);
  color: #2a1a12;
  padding: 7px;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.prize-art {
  position: relative;
  width: 118px;
  height: 96px;
  border: 3px solid var(--wood-dark);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.4), transparent 18%),
    #7d5134;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.16);
}

.prize-art.small {
  width: 42px;
  height: 36px;
  border-width: 2px;
}

.prize-art::before,
.prize-art::after {
  content: "";
  position: absolute;
}

.prize-art.crown::before {
  left: 22%;
  right: 22%;
  bottom: 22%;
  height: 36%;
  background:
    linear-gradient(135deg, transparent 0 24%, var(--gold) 25% 62%, transparent 63%) 0 0 / 33% 100%,
    linear-gradient(45deg, transparent 0 24%, var(--gold) 25% 62%, transparent 63%) 50% 0 / 34% 100%,
    linear-gradient(135deg, transparent 0 24%, var(--gold) 25% 62%, transparent 63%) 100% 0 / 33% 100%;
  background-repeat: no-repeat;
}

.prize-art.crown::after {
  left: 25%;
  right: 25%;
  bottom: 18%;
  height: 12%;
  border: 2px solid #7a4a10;
  background: var(--gold);
}

.prize-art.ring::before {
  left: 31%;
  top: 25%;
  width: 38%;
  height: 38%;
  border: 8px solid #e8d6ff;
  border-radius: 50%;
  box-shadow: 0 -14px 0 -5px var(--red);
}

.prize-art.mirror::before {
  left: 30%;
  top: 16%;
  width: 40%;
  height: 46%;
  border: 5px solid var(--gold);
  border-radius: 50%;
  background: linear-gradient(135deg, #e8fbff, #7bb7c8);
}

.prize-art.mirror::after {
  left: 47%;
  bottom: 14%;
  width: 8%;
  height: 28%;
  background: var(--gold);
}

.prize-art.duck::before {
  left: 26%;
  top: 35%;
  width: 48%;
  height: 35%;
  border-radius: 55% 60% 45% 45%;
  background: #ffd85f;
}

.prize-art.duck::after {
  left: 55%;
  top: 20%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 63% 43%, #1f160e 0 12%, transparent 13%),
    #ffd85f;
  box-shadow: 15px 8px 0 -8px #e8742f;
}

.prize-art.fruit::before {
  left: 28%;
  top: 25%;
  width: 44%;
  height: 48%;
  border-radius: 48% 52% 45% 55%;
  background:
    radial-gradient(circle at 38% 38%, rgba(255,255,255,0.6), transparent 11%),
    var(--red);
}

.prize-art.fruit::after {
  left: 51%;
  top: 15%;
  width: 18%;
  height: 12%;
  border-radius: 50%;
  background: var(--green);
  transform: rotate(-25deg);
}

.prize-art.panda::before {
  left: 26%;
  top: 19%;
  width: 48%;
  height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, #111 0 10%, transparent 11%),
    radial-gradient(circle at 66% 38%, #111 0 10%, transparent 11%),
    radial-gradient(circle at 50% 57%, #111 0 8%, transparent 9%),
    #f7f2e5;
  box-shadow: -18px -10px 0 -8px #111, 18px -10px 0 -8px #111;
}

.prize-art.envelope::before {
  left: 18%;
  right: 18%;
  top: 30%;
  height: 38%;
  border: 4px solid #6b4930;
  background:
    linear-gradient(135deg, transparent 49%, #6b4930 50% 52%, transparent 53%),
    linear-gradient(45deg, transparent 49%, #6b4930 50% 52%, transparent 53%),
    var(--canvas);
}

.prize-art.small::before {
  transform: scale(0.55);
  transform-origin: center;
}

.prize-art.small::after {
  transform: scale(0.55);
  transform-origin: center;
}

.fortune-machine {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
    #5b1f2a;
}

.fortune-stage-machine {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(380px, 100%);
  border: 5px solid var(--wood-dark);
  padding: 18px;
  box-shadow: 7px 8px 0 rgba(0,0,0,0.28);
}

.fortune-machine::after {
  content: "";
  display: block;
  width: 92px;
  height: 86px;
  margin: 14px auto 0;
  border: 5px solid var(--gold);
  border-radius: 46px 46px 12px 12px;
  background:
    radial-gradient(circle at 50% 38%, #fff0cf 0 8px, transparent 9px),
    radial-gradient(circle at 38% 50%, #20120e 0 4px, transparent 5px),
    radial-gradient(circle at 62% 50%, #20120e 0 4px, transparent 5px),
    linear-gradient(180deg, #32151d, #8d2d3a);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,0.24);
}

.fortune-slip {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  min-height: 72px;
  padding: 12px;
  color: #342117;
  background: var(--canvas);
  border: 2px dashed rgba(52,33,23,0.32);
  transform: rotate(-0.8deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
}

.fortune-slip b {
  display: block;
  border-top: 1px dashed rgba(52,33,23,0.32);
  padding-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.king-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11, 9, 7, 0.78);
  z-index: 20;
}

.king-screen[hidden] {
  display: none;
}

.king-card {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(560px, 100%);
  border: 6px solid var(--gold);
  background:
    repeating-linear-gradient(90deg, rgba(183,55,45,0.16) 0 24px, rgba(241,223,189,0.12) 24px 48px),
    var(--canvas);
  color: #2a1a12;
  padding: 28px;
  text-align: center;
  box-shadow: 12px 14px 0 rgba(0,0,0,0.34);
}

.king-card h2 {
  font-size: clamp(1.8rem, 7vw, 3.6rem);
  line-height: 0.95;
}

.king-crown {
  width: 150px;
  height: 96px;
  background:
    linear-gradient(135deg, transparent 0 24%, var(--gold) 25% 62%, transparent 63%) 0 0 / 33% 100%,
    linear-gradient(45deg, transparent 0 24%, var(--gold) 25% 62%, transparent 63%) 50% 0 / 34% 100%,
    linear-gradient(135deg, transparent 0 24%, var(--gold) 25% 62%, transparent 63%) 100% 0 / 33% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.22));
}

.ring-bell {
  position: relative;
  min-height: 290px;
  display: grid;
  place-items: center;
  width: 240px;
}

.tower {
  position: relative;
  width: 86px;
  height: 280px;
  border: 4px solid var(--ink);
  background: linear-gradient(180deg, rgba(255, 79, 94, 0.3), rgba(255, 209, 102, 0.1));
}

.tower::before {
  content: "";
  position: absolute;
  top: -39px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 8px 8px;
  background: var(--gold);
}

.bell-cap {
  position: absolute;
  top: -62px;
  left: 50%;
  width: 38px;
  height: 28px;
  transform: translateX(-50%);
  border: 3px solid var(--ink);
  border-radius: 50% 50% 8px 8px;
  background: var(--red);
}

.mallet {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 124px;
  height: 38px;
  transform: rotate(-28deg);
  transform-origin: 18px 50%;
  z-index: 3;
}

.mallet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 116px;
  height: 8px;
  border: 2px solid var(--ink);
  background: #8b5a2f;
}

.mallet span {
  position: absolute;
  right: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: var(--gold);
}

.ring-bell.is-striking .mallet {
  animation: malletStrike 820ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.ring-bell.is-striking .tower {
  animation: towerJolt 360ms steps(2) 170ms both;
}

.ring-bell.is-striking .bell-cap {
  animation: bellShake 650ms steps(3) 260ms both;
}

.sweet {
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  height: 18%;
  background: rgba(94, 227, 154, 0.35);
}

.puck {
  position: absolute;
  left: -12px;
  width: 110px;
  height: 12px;
  background: var(--red);
}

.ring-bell.is-striking .puck {
  animation: puckLaunch 820ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.balloon {
  width: 140px;
  aspect-ratio: 1 / 1.16;
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 38% 28%, #ffffff, #81d6ff 18%, #2276c9 78%);
  border: 3px solid var(--ink);
  transition: transform 120ms ease;
}

.balloon.is-burst {
  width: 190px;
  aspect-ratio: 1.7 / 1;
  border-radius: 46% 54% 40% 60%;
  background:
    radial-gradient(circle at 18% 62%, rgba(255, 255, 255, 0.95), transparent 0 9%, rgba(255, 255, 255, 0) 10%),
    radial-gradient(circle at 82% 46%, rgba(255, 255, 255, 0.85), transparent 0 7%, rgba(255, 255, 255, 0) 8%),
    linear-gradient(135deg, #ff9aa5, #ff4050 48%, #9d1728);
  transform: scale(1) !important;
}

.control-row,
.fruit-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.bottle-stack {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  justify-content: center;
  gap: 8px;
  min-height: 170px;
  padding-bottom: 22px;
}

.bottle-stack span {
  display: block;
  width: 62px;
  height: 116px;
  border: 3px solid var(--ink);
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(90deg, #ffffff, #c9f0ff 30%, #5ca8c7);
  transform-origin: 50% 100%;
  transition: transform 360ms steps(4), opacity 240ms steps(3), filter 240ms steps(3);
}

.bottle-stack span:first-child {
  grid-column: 1 / 3;
  justify-self: center;
}

.bottle-stack span.is-fallen {
  filter: brightness(0.8);
  opacity: 0.82;
}

.bottle-stack span:first-child.is-fallen {
  transform: translate(-66px, 55px) rotate(-78deg);
}

.bottle-stack span:nth-child(2).is-fallen {
  transform: translate(-34px, 38px) rotate(-92deg);
}

.bottle-stack span:nth-child(3).is-fallen {
  transform: translate(36px, 38px) rotate(88deg);
}

.bottle-stack[data-fallen="3"] span:first-child.is-fallen {
  transform: translate(-78px, 58px) rotate(-86deg);
}

.bottle-stack[data-fallen="3"] span:nth-child(2).is-fallen {
  transform: translate(-42px, 42px) rotate(-104deg);
}

.bottle-stack[data-fallen="3"] span:nth-child(3).is-fallen {
  transform: translate(46px, 42px) rotate(103deg);
}

.horizontal-meter {
  position: relative;
  width: min(360px, 100%);
  height: 28px;
  border: 3px solid var(--ink);
  background: var(--panel-2);
}

.horizontal-meter .target {
  position: absolute;
  left: 43%;
  top: 0;
  bottom: 0;
  width: 14%;
  background: rgba(94, 227, 154, 0.35);
}

.horizontal-meter .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%;
  background: var(--red);
}

.fruit-wheel {
  position: relative;
  width: 260px;
  height: 260px;
  border: 10px solid var(--gold);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ink) 0 17%, transparent 18%),
    var(--panel-2);
  box-shadow: 0 0 0 6px var(--ink);
  overflow: hidden;
}

.fruit-wheel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 34px solid var(--ink);
  transform: translateX(-50%);
  z-index: 4;
}

.fruit-wheel::after {
  content: "TICKETS";
  position: absolute;
  display: grid;
  place-items: center;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 800;
  z-index: 3;
}

.fruit-wheel-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #b51f32 0 30deg,
    #d0781f 30deg 60deg,
    #c5aa25 60deg 90deg,
    #2e8958 90deg 120deg,
    #386fb8 120deg 150deg,
    #772e8c 150deg 180deg,
    #b51f32 180deg 210deg,
    #d0781f 210deg 240deg,
    #c5aa25 240deg 270deg,
    #2e8958 270deg 300deg,
    #386fb8 300deg 330deg,
    #772e8c 330deg 360deg
  );
}

.fruit-wheel-face.is-spinning {
  animation: fruitWheelSpin 2200ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.fruit-wedge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 26px;
  margin-left: -29px;
  margin-top: -13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.58rem;
  font-weight: 800;
  transform: rotate(var(--angle)) translateY(-88px) rotate(calc(-1 * var(--angle)));
}

.fruit-choices label {
  border: 1px solid var(--line);
  padding: 7px 9px;
  text-transform: uppercase;
}

.duck-pond {
  position: relative;
  width: min(430px, 100%);
  height: 230px;
  border: 6px solid var(--wood-dark);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 22% 35%, rgba(255,255,255,0.22), transparent 20%),
    radial-gradient(ellipse at 78% 68%, rgba(255,255,255,0.18), transparent 18%),
    linear-gradient(180deg, #5cb2c8, #1d6b7a);
  box-shadow: inset 0 -12px 0 rgba(0,0,0,0.18), 7px 8px 0 rgba(0,0,0,0.24);
  overflow: hidden;
}

.water-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.22) 23px 25px, transparent 26px 43px);
  animation: waterDrift 1.6s linear infinite;
  opacity: 0.65;
}

.net-marker {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255,240,207,0.82) 43% 57%, transparent 58%),
    radial-gradient(circle at 50% 22%, transparent 0 18px, rgba(255,240,207,0.82) 19px 22px, transparent 23px);
  transform: translateX(-50%);
  z-index: 3;
}

.pond-duck {
  position: absolute;
  left: var(--duck-left);
  top: var(--duck-top);
  display: grid;
  place-items: center;
  width: 54px;
  height: 38px;
  border: 3px solid #7a4a10;
  border-radius: 55% 50% 45% 45%;
  background:
    radial-gradient(circle at 68% 34%, #20120e 0 5%, transparent 6%),
    #ffd85f;
  color: #5b2b16;
  font-weight: 900;
  transform: translate(-50%, -50%);
  animation: duckBob var(--duck-speed) steps(4) infinite;
  animation-delay: var(--duck-delay);
  z-index: 2;
}

.pond-duck::before {
  content: "";
  position: absolute;
  right: -13px;
  top: 14px;
  width: 18px;
  height: 10px;
  border: 2px solid #7a4a10;
  background: #e8742f;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pond-duck.is-picked {
  background:
    radial-gradient(circle at 68% 34%, #20120e 0 5%, transparent 6%),
    #fff0a8;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.12);
  box-shadow: 0 0 0 5px rgba(240, 191, 76, 0.45);
}

.duck-pick-card {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) rotate(-1deg);
  border: 3px solid var(--wood-dark);
  background: var(--canvas);
  color: #2a1a12;
  padding: 8px 12px;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 4;
}

.speed-pitch {
  --pitch-release: 50%;
  display: grid;
  grid-template-columns: 86px minmax(180px, 320px) 96px;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  padding: 16px;
  border: 5px solid var(--wood-dark);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.16) 0 4px, transparent 4px 18px),
    linear-gradient(180deg, #c27c44, #8f542f);
  box-shadow: 7px 8px 0 rgba(0,0,0,0.22);
}

.pitcher {
  position: relative;
  width: 76px;
  height: 120px;
}

.pitcher::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 8px;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #f1c28f;
}

.pitcher::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 41px;
  width: 44px;
  height: 62px;
  border: 3px solid var(--ink);
  border-radius: 18px 18px 8px 8px;
  background: var(--red);
}

.pitcher span {
  position: absolute;
  right: 2px;
  top: 51px;
  width: 58px;
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #f1c28f;
  transform: rotate(-34deg);
  transform-origin: 12px 50%;
  z-index: 2;
}

.speed-pitch[data-tier] .pitcher span {
  animation: pitcherThrow 560ms cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

.pitch-lane {
  position: relative;
  height: 126px;
  border: 4px solid var(--ink);
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,0.62) 50%, transparent 51%),
    linear-gradient(180deg, #7caf5a, #3f7b43);
  overflow: hidden;
}

.plate {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 48px;
  height: 34px;
  border: 3px solid var(--ink);
  background: var(--canvas);
  clip-path: polygon(50% 100%, 0 62%, 0 0, 100% 0, 100% 62%);
}

.pitch-ball {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #f8f5df;
  transform: translateY(-50%);
  opacity: 0;
}

.speed-pitch[data-tier] .pitch-ball {
  animation: pitchFlight 680ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.speed-pitch[data-tier="miss"] .pitch-ball {
  top: 24%;
}

.speed-pitch[data-tier="dead-on"] .pitch-ball,
.speed-pitch[data-tier="close"] .pitch-ball {
  box-shadow: 0 0 0 7px rgba(94, 227, 154, 0.42);
}

.radar-sign {
  display: grid;
  gap: 5px;
  place-items: center;
  min-height: 96px;
  border: 4px solid var(--ink);
  background: #20120e;
  color: var(--gold);
  text-align: center;
  box-shadow: inset 0 0 0 4px rgba(255,209,102,0.15);
}

.radar-sign b {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.radar-sign span {
  color: #5ee39a;
  font-size: 1.35rem;
  font-weight: 900;
}

.speed-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: center;
}

.speed-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.speed-controls input {
  width: 96px;
  border: 3px solid var(--ink);
  background: var(--canvas);
  color: #2a1a12;
  padding: 9px;
  font: inherit;
  font-weight: 900;
}

.speed-meter .target {
  left: 72%;
  width: 12%;
}

.skeeball-board {
  --skee-lane: 50%;
  display: grid;
  gap: 10px;
  width: min(520px, 100%);
  padding: 14px;
  border: 5px solid var(--wood-dark);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 18px, transparent 18px 36px),
    linear-gradient(180deg, #9b6339, #5f3724);
  box-shadow: 7px 8px 0 rgba(0,0,0,0.22);
}

.skee-ramp {
  position: relative;
  height: 260px;
  border: 4px solid var(--ink);
  border-radius: 14px 14px 36px 36px;
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(255,255,255,0.18) 20%, transparent 21% 39%, rgba(255,255,255,0.18) 40%, transparent 41% 59%, rgba(255,255,255,0.18) 60%, transparent 61% 79%, rgba(255,255,255,0.18) 80%, transparent 81%),
    linear-gradient(180deg, #d9a45f, #8b542f);
  overflow: hidden;
}

.skee-target {
  position: absolute;
  left: 50%;
  top: 18px;
  width: min(270px, 82%);
  height: 210px;
  transform: translateX(-50%);
}

.skee-cup {
  position: absolute;
  display: grid;
  place-items: center;
  left: 50%;
  border: 4px solid var(--ink);
  background: var(--canvas);
  color: #2a1a12;
  font-weight: 900;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(42, 26, 18, 0.1);
  box-sizing: border-box;
}

.skee-cup b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
}

.cup-10 {
  bottom: 0;
  width: 238px;
  height: 210px;
  z-index: 1;
}

.cup-10 b {
  top: auto;
  bottom: 12px;
  transform: translateX(-50%);
}

.cup-20 {
  bottom: 42px;
  width: 156px;
  height: 126px;
  background: #f1dfbd;
  z-index: 2;
}

.cup-20 b {
  top: auto;
  bottom: 12px;
  transform: translateX(-50%);
}

.cup-30,
.cup-40,
.cup-50 {
  width: 42px;
  height: 42px;
  font-size: 0.82rem;
}

.cup-30 {
  bottom: 84px;
  background: #ffd166;
  z-index: 3;
}

.cup-40 {
  bottom: 126px;
  background: #ff6b6b;
  color: #20120e;
  z-index: 4;
}

.cup-50 {
  bottom: 168px;
  background: var(--gold);
  z-index: 5;
}

.skee-ball {
  position: absolute;
  left: var(--skee-lane);
  bottom: 14px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #f8f5df;
  transform: translateX(-50%);
  opacity: 0;
}

.skeeball-board[data-tier] .skee-ball {
  animation: skeeRoll 720ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.skeeball-board[data-tier="bonus"] .cup-50,
.skeeball-board[data-tier="center"] .cup-40,
.skeeball-board[data-tier="inner"] .cup-30,
.skeeball-board[data-tier="outer"] .cup-20,
.skeeball-board[data-tier="rim"] .cup-10 {
  box-shadow: 0 0 0 6px rgba(94, 227, 154, 0.62), inset 0 0 0 5px rgba(42, 26, 18, 0.1);
  filter: brightness(1.08);
}

.skeeball-board[data-tier="bonus"] .cup-50 b,
.skeeball-board[data-tier="center"] .cup-40 b,
.skeeball-board[data-tier="inner"] .cup-30 b,
.skeeball-board[data-tier="outer"] .cup-20 b,
.skeeball-board[data-tier="rim"] .cup-10 b {
  background: #5ee39a;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: #20120e;
  padding: 1px 7px;
}

.skee-meter .target {
  left: 44%;
  width: 12%;
}

.ring-toss {
  --ring-landing: 50%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 54px);
  align-items: end;
  justify-content: center;
  gap: 12px;
  width: min(420px, 100%);
  min-height: 210px;
  padding: 34px 18px 28px;
  border: 5px solid var(--wood-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #ffe8a6 0 58%, #9d6132 59% 100%);
  box-shadow: 6px 7px 0 rgba(0,0,0,0.22);
  overflow: hidden;
  isolation: isolate;
}

.ring-toss::before {
  content: "RING TOSS";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  height: 28px;
  border-bottom: 3px solid var(--ink);
  background: var(--green);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.toss-bottle {
  position: relative;
  display: grid;
  place-items: end center;
  width: 46px;
  height: 112px;
  padding-bottom: 9px;
  border: 3px solid var(--ink);
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #6fd6b5 0 19%, #f8fff7 20% 36%, #2d7f77 37% 100%);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 900;
  transform-origin: bottom center;
}

.toss-bottle::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -28px;
  height: 32px;
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #ecfff2;
  z-index: 1;
}

.toss-bottle.is-hit {
  top: -3px;
}

.toss-bottle.is-hit::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: -27px;
  height: 31px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.82), rgba(255,255,255,0) 45%),
    #ecfff2;
  z-index: 5;
  pointer-events: none;
}

.toss-ring {
  position: absolute;
  z-index: 4;
  left: var(--ring-landing);
  top: 146px;
  width: 46px;
  height: 28px;
  border: 8px solid var(--red);
  border-radius: 50%;
  box-shadow: 2px 4px 0 rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateX(-50%) rotate(-12deg);
}

.ring-toss[data-tier] .toss-ring {
  opacity: 1;
  animation: ringTossLand 780ms cubic-bezier(0.2, 0.8, 0.18, 1) both;
}

.ring-toss[data-tier="neck"] .toss-ring {
  top: 55px;
  z-index: 3;
  width: 48px;
  height: 28px;
  border-width: 7px;
  box-shadow: 1px 3px 0 rgba(0,0,0,0.2);
}

.ring-toss[data-tier="miss"] .toss-ring {
  top: 150px;
  border-color: #d74747;
  transform: translateX(-50%) rotate(18deg);
}

.toss-meter .target {
  left: 46%;
  width: 8%;
}

.coin-slider {
  --coin-drop: 50%;
  position: relative;
  width: min(460px, 100%);
  height: 284px;
  border: 6px solid var(--wood-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(180deg, #9bd7e5 0 18%, #6b8793 19% 58%, #45312b 59% 100%);
  box-shadow: 7px 8px 0 rgba(0,0,0,0.22);
  overflow: hidden;
}

.coin-slider::before {
  content: "COIN SLIDER";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  height: 30px;
  border-bottom: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  z-index: 5;
}

.drop-slot {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 42px;
  height: 26px;
  border: 3px solid var(--ink);
  background: #23140f;
  z-index: 4;
}

.drop-slot span {
  position: absolute;
  left: var(--coin-drop);
  top: -7px;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff7b8, var(--gold) 45%, #a55b16);
  transform: translateX(-50%);
}

.pusher-plate {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 92px;
  height: 38px;
  border: 4px solid var(--ink);
  background: linear-gradient(180deg, #f8fff7, #9fb5b1);
  box-shadow: 0 9px 0 rgba(0,0,0,0.18);
  animation: pusherSlide 2100ms ease-in-out infinite alternate;
  z-index: 2;
}

.front-lip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  height: 34px;
  border-top: 5px solid var(--ink);
  background: #20120e;
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  z-index: 4;
}

.ticket-label {
  display: none;
}

.slider-tickets span {
  position: absolute;
  left: var(--strip-left);
  top: calc(96px + var(--strip-progress));
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  width: 48px;
  height: 34px;
  border: 3px solid var(--red);
  border-left-style: dashed;
  border-right-style: dashed;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(157, 23, 40, 0.18) 9px 11px),
    #fff3ba;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 900;
  transform: translateX(-50%);
  transition: top 460ms ease;
  z-index: 4;
}

.slider-tickets span b {
  line-height: 1;
}

.slider-tickets span small {
  color: #6b2c2c;
  font-size: 0.42rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coin-slider[data-tier] .slider-tickets span {
  animation: ticketStripSlide 900ms ease-out both;
}

.slider-tickets span.is-won {
  top: 238px;
  opacity: 0.44;
  transform: translateX(-50%) rotate(10deg);
}

.slider-coins span {
  position: absolute;
  left: var(--coin-left);
  top: calc(134px + (var(--coin-row) * 23px));
  width: 26px;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff6aa, var(--gold) 48%, #9d5d18);
  box-shadow: 2px 3px 0 rgba(0,0,0,0.22);
  transform: translateX(-50%);
  z-index: 3;
}

.slider-coins span.is-new {
  animation: coinShove 1450ms cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

.coin-slider[data-tier] .drop-slot span {
  animation: coinDrop 1450ms cubic-bezier(0.16, 0.76, 0.18, 1) both;
}

.slider-meter .target {
  left: 43%;
  width: 14%;
}

.claw-machine {
  --claw-grip: 0%;
  --claw-x: 86%;
  --claw-home: 86%;
  position: relative;
  width: min(480px, 100%);
  height: 320px;
  border: 6px solid var(--wood-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 32%),
    #6fb7cf;
  box-shadow: 7px 8px 0 rgba(0,0,0,0.22);
  overflow: hidden;
}

.claw-machine::before {
  content: "CLAW";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  height: 34px;
  border-bottom: 4px solid var(--ink);
  background: var(--red);
  color: var(--canvas);
  font-weight: 900;
  letter-spacing: 0.14em;
  z-index: 6;
}

.claw-glass {
  position: absolute;
  inset: 38px 18px 66px;
  border: 4px solid rgba(255,255,255,0.72);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.36) 0 12%, transparent 13% 48%, rgba(255,255,255,0.24) 49% 55%, transparent 56%),
    rgba(255,255,255,0.08);
  z-index: 4;
  pointer-events: none;
}

.claw-rail {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 48px;
  height: 56px;
  border-top: 5px solid var(--ink);
  z-index: 7;
}

.claw-rail::after {
  content: "";
  position: absolute;
  left: var(--claw-x);
  top: 0;
  width: 5px;
  height: 12px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(180deg, var(--ink) 0 5px, transparent 5px 8px),
    var(--ink);
  transform: translateX(-50%);
  transform-origin: top center;
}

.claw-head {
  --claw-tine-x: calc(50% - 2.5px);
  position: absolute;
  left: var(--claw-x);
  top: -10px;
  width: 50px;
  height: 76px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, var(--gold) 0 25px, transparent 26px);
}

.claw-head b,
.claw-head::before,
.claw-head::after {
  position: absolute;
  top: 27px;
  width: 5px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  transform-origin: top center;
}

.claw-head b {
  left: var(--claw-tine-x);
  transform: rotate(0deg);
}

.claw-head::before {
  content: "";
  left: var(--claw-tine-x);
  transform: rotate(-26deg);
}

.claw-head::after {
  content: "";
  left: var(--claw-tine-x);
  transform: rotate(26deg);
}

.claw-machine[data-tier] .claw-head {
  animation: clawPlayCycle 7200ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.claw-machine[data-tier] .claw-rail::after {
  animation: clawCableCycle 7200ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.claw-machine[data-tier] .claw-head::before {
  animation: clawLeftGrip 7200ms ease-in-out both;
}

.claw-machine[data-tier] .claw-head b {
  animation: clawCenterGrip 7200ms ease-in-out both;
}

.claw-machine[data-tier] .claw-head::after {
  animation: clawRightGrip 7200ms ease-in-out both;
}

.claw-pile {
  position: absolute;
  inset: 86px 20px 56px;
  z-index: 2;
}

.claw-plush {
  --plush-tilt: 0deg;
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 55% 45% 48% 52%;
  background: var(--gold);
  color: #2a1a12;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 3px 5px 0 rgba(0,0,0,0.2);
  transform: translate(-50%, -50%) rotate(var(--plush-tilt));
}

.claw-plush::before,
.claw-plush::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: inherit;
  z-index: -1;
}

.claw-plush::before {
  left: 4px;
}

.claw-plush::after {
  right: 4px;
}

.claw-plush.bear { background: #b98557; }
.claw-plush.duck { background: #ffd85f; }
.claw-plush.star { background: #ffef7a; clip-path: polygon(50% 0, 62% 32%, 96% 35%, 68% 55%, 78% 90%, 50% 70%, 22% 90%, 32% 55%, 4% 35%, 38% 32%); }
.claw-plush.cat { background: #caa7e8; }
.claw-plush.frog { background: #5ee39a; }
.claw-plush.fruit { background: #ff6b6b; }

.claw-plush.is-targeted {
  box-shadow: 0 0 0 6px rgba(94, 227, 154, 0.48), 3px 5px 0 rgba(0,0,0,0.2);
}

.claw-machine[data-tier="full-carry"] .claw-plush.is-targeted {
  animation: plushCarryWin 7200ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.claw-machine[data-tier="chute-drop"] .claw-plush.is-targeted {
  animation: plushChuteDrop 7200ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.claw-machine[data-tier="lift-drop"] .claw-plush.is-targeted {
  animation: plushLiftDrop 7200ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.claw-machine[data-tier="empty"] .claw-plush.is-targeted {
  box-shadow: 3px 5px 0 rgba(0,0,0,0.2);
}

.prize-chute {
  position: absolute;
  right: 18px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 128px;
  height: 40px;
  border: 4px solid var(--ink);
  background: #20120e;
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 900;
  z-index: 5;
}

.claw-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  justify-content: center;
  width: min(480px, 100%);
}

.claw-controls label {
  display: grid;
  flex: 1 1 260px;
  gap: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.claw-controls input[type="range"] {
  width: 100%;
  accent-color: var(--red);
  cursor: grab;
}

.claw-controls input[type="range"]:active {
  cursor: grabbing;
}

.result {
  border: 2px solid var(--green);
  padding: 12px;
  color: var(--green);
}

@media (max-width: 920px) {
  .fair-header,
  .fair-grid {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .wallet {
    grid-template-columns: 1fr;
  }

  .speed-pitch {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@keyframes malletStrike {
  0% { transform: rotate(-28deg) translate(0, 0); }
  42% { transform: rotate(16deg) translate(24px, -6px); }
  58% { transform: rotate(7deg) translate(17px, 0); }
  100% { transform: rotate(-20deg) translate(0, 0); }
}

@keyframes puckLaunch {
  0% { bottom: 0; }
  68% { bottom: var(--result-force); }
  100% { bottom: var(--result-force); }
}

@keyframes towerJolt {
  0% { transform: translateX(0); }
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@keyframes bellShake {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-10deg); }
  50% { transform: translateX(-50%) rotate(9deg); }
  75% { transform: translateX(-50%) rotate(-5deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes fruitWheelSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--spin-rotation)); }
}

@keyframes waterDrift {
  from { transform: translateY(0); }
  to { transform: translateY(43px); }
}

@keyframes duckBob {
  0% { margin-top: 0; }
  50% { margin-top: -7px; }
  100% { margin-top: 0; }
}

@keyframes pitcherThrow {
  0% { transform: rotate(-34deg); }
  44% { transform: rotate(28deg) translate(7px, -2px); }
  100% { transform: rotate(-12deg); }
}

@keyframes pitchFlight {
  0% {
    left: 8px;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  18% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 42px);
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
  }
}

@keyframes skeeRoll {
  0% {
    bottom: 14px;
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  16% {
    opacity: 1;
  }
  72% {
    bottom: 182px;
  }
  100% {
    bottom: 202px;
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes ringTossLand {
  0% {
    top: 12px;
    opacity: 0;
    transform: translateX(-50%) scale(1.2) rotate(-32deg);
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pusherSlide {
  from { transform: translateY(-6px); }
  to { transform: translateY(16px); }
}

@keyframes coinDrop {
  0% {
    top: -7px;
    transform: translateX(-50%) scale(1);
  }
  48% {
    top: 78px;
    transform: translateX(-50%) scale(0.96);
  }
  100% {
    top: 130px;
    transform: translateX(-50%) scale(0.92);
  }
}

@keyframes coinShove {
  0% {
    top: 90px;
    transform: translateX(-50%) scale(0.96);
  }
  48% {
    top: 128px;
  }
  100% {
    top: calc(134px + var(--coin-shove));
    transform: translateX(-50%) scale(1);
  }
}

@keyframes ticketStripSlide {
  0%, 34% {
    top: calc(96px + var(--strip-before));
  }
  100% {
    top: calc(96px + var(--strip-progress));
  }
}

@keyframes clawPlayCycle {
  0% {
    left: var(--claw-x);
    top: -10px;
  }
  8% {
    left: var(--claw-x);
    top: -10px;
  }
  36% {
    left: var(--claw-x);
    top: 94px;
  }
  48% {
    left: var(--claw-x);
    top: 94px;
  }
  76% {
    left: var(--claw-x);
    top: -10px;
  }
  92% {
    left: var(--claw-home);
    top: -10px;
  }
  100% {
    left: var(--claw-home);
    top: -10px;
  }
}

@keyframes clawCableCycle {
  0% {
    left: var(--claw-x);
    height: 12px;
  }
  8% {
    left: var(--claw-x);
    height: 12px;
  }
  36% {
    left: var(--claw-x);
    height: 116px;
  }
  48% {
    left: var(--claw-x);
    height: 116px;
  }
  76% {
    left: var(--claw-x);
    height: 12px;
  }
  92% {
    left: var(--claw-home);
    height: 12px;
  }
  100% {
    left: var(--claw-home);
    height: 12px;
  }
}

@keyframes clawLeftGrip {
  0%, 34% { transform: rotate(-26deg); }
  46%, 92% { transform: rotate(0deg); }
  100% { transform: rotate(-26deg); }
}

@keyframes clawCenterGrip {
  0%, 100% { transform: rotate(0deg); }
}

@keyframes clawRightGrip {
  0%, 34% { transform: rotate(26deg); }
  46%, 92% { transform: rotate(0deg); }
  100% { transform: rotate(26deg); }
}

@keyframes plushCarryWin {
  0%, 49% {
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  76% {
    margin-left: 0;
    margin-top: -86px;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  92% {
    margin-left: var(--plush-carry);
    margin-top: -86px;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  98% {
    margin-left: var(--plush-carry);
    margin-top: -86px;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  100% {
    margin-left: var(--plush-carry);
    margin-top: 14px;
    opacity: 0.14;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
}

@keyframes plushChuteDrop {
  0%, 49% {
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  76% {
    margin-left: 0;
    margin-top: -78px;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  92% {
    margin-left: var(--plush-near-carry);
    margin-top: -78px;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  97% {
    margin-left: var(--plush-near-carry);
    margin-top: -18px;
    transform: translate(-50%, -50%) rotate(calc(var(--plush-tilt) + 8deg));
  }
  100% {
    margin-left: var(--plush-near-carry);
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--plush-tilt) - 6deg));
  }
}

@keyframes plushLiftDrop {
  0%, 49% {
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  66% {
    margin-left: 0;
    margin-top: -54px;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
  75% {
    margin-left: 3px;
    margin-top: -34px;
    transform: translate(-50%, -50%) rotate(calc(var(--plush-tilt) + 10deg));
  }
  86%, 100% {
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(var(--plush-tilt));
  }
}