.budget-film {
  --film-offset:0ms;
  position: relative;
  height: 270px;
  overflow: hidden;
  border: 2px solid #92ad78;
  border-radius: 17px;
  background:
    linear-gradient(
      #f6f0d4,
      #f7f5e7 67%,
      #d5dfb0 67%);
  isolation: isolate;
}
.budget-world {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.budget-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  left: -10%;
  top: 0;
  background:
    radial-gradient(
      ellipse,
      #fffcdf,
      transparent 70%);
}
.budget-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 13%;
  height: 14%;
  background: #a9be7d55;
  border-radius: 50%;
}
.budget-banner {
  position: absolute;
  right: 5%;
  top: 5%;
  color: #91672f;
  font-weight: 900;
  font-size: 26px;
  line-height: 28px;
  text-align: center;
  transform: rotate(5deg);
}
.budget-banner span {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
}
.budget-actor {
  position: absolute;
  left: -1%;
  bottom: 14%;
  height: 91%;
  aspect-ratio: 4/5;
  transform-origin: 50% 97%;
  animation-name: budget-acting;
  z-index: 3;
}
.budget-film[data-beat="0"] .pose-boast,
.budget-film[data-beat="1"] .pose-shout,
.budget-film[data-beat="2"] .pose-panic,
.budget-film[data-beat="3"] .pose-flop {
  display: block;
}
.budget-cheques {
  position: absolute;
  right: 4%;
  top: 29%;
  width: 142px;
  height: 120px;
  z-index: 2;
}
.budget-cheque {
  position: absolute;
  width: 39px;
  height: 53px;
  padding: 6px 3px;
  border: 2px solid #b59858;
  border-radius: 3px 7px 3px 3px;
  background: #fff8d9;
  color: #7b6b3a;
  box-shadow: 0 2px 0 #c4b275;
  transform-origin: 15% 75%;
  animation-name: budget-cheque-flight;
}
.budget-cheque b {
  display: block;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  font-weight: 850;
  white-space: nowrap;
}
.budget-cheque i {
  display: block;
  width: 80%;
  height: 2px;
  margin: 4px auto 0;
  background: #bdb38c;
}
.budget-cheque span {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 8px;
  color: #a79b70;
}
.budget-cheque .budget-bill {
  display: none;
}
.budget-film[data-bills=true] .budget-cheque {
  border-color: #b96d54;
  background: #fff0dc;
  box-shadow: 0 2px 0 #ca9475;
}
.budget-film[data-bills=true] .budget-promise {
  display: none;
}
.budget-film[data-bills=true] .budget-bill {
  display: block;
  color: #af4c3b;
}
.budget-question {
  position: absolute;
  right: 6%;
  top: 17%;
  font-size: 21px;
  font-weight: 900;
  color: #bd6544;
  transform: rotate(7deg);
  opacity: 0;
}
.budget-film[data-beat="2"] .budget-question {
  opacity: 1;
}
.budget-stamp {
  position: absolute;
  right: 7%;
  top: 49%;
  padding: 5px 8px;
  border: 3px solid #af6250;
  border-radius: 5px;
  color: #af6250;
  background: #fff7e3d9;
  font-size: 18px;
  font-weight: 900;
  transform: rotate(-11deg);
  opacity: 0;
  z-index: 5;
}
.budget-film[data-beat="3"] .budget-stamp {
  opacity: 1;
}
.budget-prize {
  position: absolute;
  right: 8%;
  bottom: 14%;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 60px;
  height: 65px;
  padding: 4px;
  border: 2px solid #8aa258;
  border-radius: 13px;
  background: #f7ffdf;
  opacity: 0;
  z-index: 7;
  animation-name: budget-prize;
}
.budget-prize img {
  width: 39px;
  height: 39px;
  object-fit: contain;
}
.budget-prize b {
  font-size: 10px;
  color: #547231;
}
.budget-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  margin: 0;
  min-height: 23px;
  color: #465c35;
  font-size: 13px;
  line-height: 20px;
  font-weight: 800;
  text-align: center;
  z-index: 8;
}
.budget-actor,
.budget-cheque,
.budget-prize {
  animation-duration: 8000ms;
  animation-timing-function: linear;
  animation-delay: var(--film-offset);
  animation-fill-mode: both;
  animation-play-state: paused;
}
@keyframes budget-acting {
  0%, 24.9% {
    transform: none;
  }
  25% {
    transform: rotate(-4deg) translateY(-6px);
  }
  30% {
    transform: rotate(3deg);
  }
  36% {
    transform: rotate(-3deg);
  }
  43% {
    transform: rotate(3deg);
  }
  51% {
    transform: none;
  }
  52.5% {
    transform: translateY(-7px) rotate(4deg);
  }
  60%, 74.9% {
    transform: rotate(-3deg);
  }
  75% {
    transform: translateY(14px) scale(.92);
  }
  82%, 100% {
    transform: translateY(8px) scale(.95);
  }
}
@keyframes budget-cheque-flight {
  0%, 24.9% {
    transform: translate(-90px, 45px) scale(.1);
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translate(-90px, 45px) scale(.1);
  }
  40%, 52% {
    opacity: 1;
    transform: translate(var(--cx), var(--cy)) rotate(var(--tilt));
  }
  56%, 74.9% {
    opacity: 1;
    transform: translate(var(--cx), var(--cy)) rotate(calc(var(--tilt) * -1));
  }
  75% {
    opacity: 1;
    transform: translate(var(--cx), calc(var(--cy) + 5px)) rotate(20deg);
  }
  88%, 100% {
    opacity: .45;
    transform: translate(var(--cx), calc(var(--cy) + 100px)) rotate(45deg);
  }
}
@keyframes budget-prize {
  0%, 87.4% {
    opacity: 0;
    transform: translateY(-45px) scale(.3);
  }
  87.5% {
    opacity: 1;
    transform: translateY(-45px) scale(.4);
  }
  94% {
    opacity: 1;
    transform: translateY(4px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.budget-film[data-reduced=true] * {
  animation: none !important;
}
.budget-film[data-reduced=true]:not([data-beat="0"]) .budget-cheque {
  opacity: 1;
  transform: translate(var(--cx), var(--cy));
}
.budget-film[data-reduced=true][data-beat="0"] .budget-cheque {
  opacity: 0;
}
.budget-film[data-reduced=true][data-prize=true] .budget-prize {
  opacity: 1;
}
.modal:has(.budget-film) {
  padding: 12px 13px;
}
.modal:has(.budget-film) h2 {
  font-size: 22px;
  margin: 2px 0 8px;
}
.modal:has(.budget-film) .film-reward-note {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 16px;
}
.modal:has(.budget-film) .short-progress {
  margin-top: 8px;
  height: 5px;
}
.modal:has(.budget-film) .modal-actions .btn {
  min-height: 40px;
  margin-top: 6px;
  padding: 8px;
}
.modal:has(.budget-film) .modal-actions .btn:last-child {
  min-height: 30px;
  padding: 3px 8px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 11px;
  color: #81916b;
}
@media (max-height: 700px) {
  .budget-film {
    height: 190px;
  }
  .budget-cheques {
    transform: scale(.78);
    transform-origin: 100% 0;
  }
  .budget-banner {
    font-size: 22px;
    line-height: 23px;
  }
  .budget-banner span {
    font-size: 10px;
  }
  .budget-stamp {
    font-size: 15px;
  }
  .budget-prize {
    width: 49px;
    height: 53px;
    bottom: 15%;
  }
  .budget-prize img {
    width: 28px;
    height: 28px;
  }
  .budget-prize b {
    font-size: 9px;
  }
  .budget-caption {
    font-size: 12px;
    line-height: 17px;
    bottom: 2px;
  }
}
@media (max-width: 360px) {
  .budget-cheques {
    right: 1%;
  }
  .budget-actor {
    left: -2%;
  }
  .budget-question {
    font-size: 17px;
  }
  .budget-stamp {
    right: 3%;
  }
  .modal:has(.budget-film) {
    padding: 10px;
  }
  .modal:has(.budget-film) h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }
}