.actor-pose {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  -webkit-user-select: none;
  user-select: none;
}
.cartoon-tool-fx {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 250px;
  z-index: 45;
  display: none;
  pointer-events: none;
}
.cartoon-tool-fx.show {
  display: block;
}
.ct-spotlight {
  position: absolute;
  top: -12px;
  right: -5px;
  bottom: 0;
  left: -5px;
  background:
    radial-gradient(
      ellipse,
      #e5f1c8ef 8%,
      #c8eea4b8 47%,
      transparent 73%);
}
.ct-actor {
  position: absolute;
  left: -9px;
  bottom: 18px;
  height: calc(100% - 20px);
  aspect-ratio: 4/5;
  z-index: 3;
  transform-origin: 45% 95%;
}
.ct-actor-placeholder {
  background: #c8eea4;
}
.ct-actor-placeholder .actor-pose {
  mix-blend-mode: multiply;
}
.cartoon-tool-fx[data-phase=intro] .pose-boast {
  display: block;
}
.cartoon-tool-fx[data-phase=action] .pose-shout {
  display: block;
}
.cartoon-tool-fx:is([data-phase=result], [data-phase=exit]) .pose-panic {
  display: block;
  animation: ct-panic-out .35s step-end both;
}
.cartoon-tool-fx:is([data-phase=result], [data-phase=exit]) .pose-flop {
  display: block;
  animation: ct-flop-in .35s step-end both;
}
.cartoon-tool-fx[data-phase=action] .ct-actor {
  animation: ct-shove 1.05s ease-in-out both;
}
.cartoon-tool-fx:is([data-phase=result], [data-phase=exit]) .ct-actor {
  animation: ct-recoil .6s ease-out both;
}
.ct-speech {
  position: absolute;
  top: 2px;
  left: 104px;
  right: 4px;
  min-height: 38px;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 5px 9px;
  border: 2px solid #403c30;
  border-radius: 15px 15px 15px 3px;
  background: #fffceb;
  color: #3f4e30;
  box-shadow: 0 2px 0 #83945f44;
  text-align: center;
}
.ct-speech::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -9px;
  width: 11px;
  height: 11px;
  border: 2px solid #403c30;
  border-width: 0 0 2px 2px;
  background: #fffceb;
  transform: skewY(-25deg);
}
.ct-speech b {
  font-size: 20px;
  line-height: 25px;
  font-weight: 900;
}
.ct-speech .ct-shout,
.ct-speech .ct-after {
  display: none;
}
.ct-speech .ct-after {
  font-size: 12px;
  line-height: 17px;
  font-weight: 750;
}
.cartoon-tool-fx[data-phase=action] .ct-before {
  display: none;
}
.cartoon-tool-fx[data-phase=action] .ct-shout {
  display: block;
}
.cartoon-tool-fx:is([data-phase=result], [data-phase=exit]) .ct-before {
  display: none;
}
.cartoon-tool-fx:is([data-phase=result], [data-phase=exit]) .ct-after {
  display: block;
}
.ct-props {
  position: absolute;
  top: 49px;
  left: 132px;
  right: 5px;
  bottom: 26px;
  z-index: 2;
}
.ct-card {
  position: absolute;
  left: calc(50% - 24px);
  top: 16px;
  width: 48px;
  height: 62px;
  display: grid;
  grid-template-rows: 40px 14px;
  justify-items: center;
  padding: 3px 2px;
  border: 1.5px solid #7d8f5d;
  border-radius: 6px;
  background: #fffdf3;
  box-shadow: 0 3px 0 #91a76c;
  transform: translateX(var(--x0));
}
.ct-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.ct-card b {
  color: #2f713b;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}
.cartoon-tool-fx[data-tool=bomb][data-phase=action] .ct-card {
  animation: ct-card-pop 1.05s ease-in-out both;
}
.cartoon-tool-fx:is([data-tool=bomb], [data-tool=stash]):is([data-phase=result], [data-phase=exit]) .ct-card {
  visibility: hidden;
}
.ct-poof {
  position: absolute;
  top: 13px;
  right: 6px;
  bottom: 0;
  left: 6px;
  opacity: 0;
  z-index: 4;
}
.ct-poof i {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 60%;
  height: 65%;
  border: 2px solid #6b7851;
  border-radius: 50%;
  background: #fffbe6;
}
.ct-poof i:nth-child(2) {
  left: 35%;
  top: 20%;
  width: 55%;
}
.ct-poof i:nth-child(3) {
  left: 30%;
  top: 0;
  width: 42%;
}
.ct-poof b {
  position: absolute;
  left: 30%;
  top: 21%;
  color: #a7442e;
  font: 900 28px/1.2 "Microsoft JhengHei", sans-serif;
  transform: rotate(-12deg);
}
.cartoon-tool-fx[data-phase=action] .ct-poof {
  animation: ct-poof .9s .35s ease-out both;
}
.ct-folder {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 94px;
  height: 64px;
  border: 3px solid #614c32;
  border-radius: 5px 9px 10px 10px;
  background: #cba565;
  z-index: 5;
}
.ct-folder::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -11px;
  width: 39px;
  height: 11px;
  border: 3px solid #614c32;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #cba565;
}
.ct-folder i {
  position: absolute;
  top: 11px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border: 3px solid #614c32;
  border-radius: 6px 6px 9px 9px;
  background: #eed69b;
}
.ct-folder b {
  position: absolute;
  top: 25px;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  color: #79552b;
  font-size: 15px;
  line-height: 20px;
}
.cartoon-tool-fx[data-tool=stash][data-phase=action] .ct-card {
  animation: ct-file-away 1.05s ease-in-out both;
}
.cartoon-tool-fx[data-tool=stash][data-phase=action] .ct-folder {
  animation: ct-folder-snap 1.05s ease-out both;
}
.cartoon-tool-fx[data-tool=stash] .ct-poof {
  inset: auto -3px -3px auto;
  width: 110px;
  height: 80px;
}
.cartoon-tool-fx[data-tool=shuffle][data-phase=action] .ct-card {
  animation: ct-whirl 1.05s ease-in-out both;
}
.cartoon-tool-fx[data-tool=shuffle]:is([data-phase=result], [data-phase=exit]) .ct-card {
  transform: translateX(var(--x1));
}
.ct-wind {
  position: absolute;
  left: 5%;
  right: 5%;
  top: -2px;
  height: 100%;
  border: 4px solid #e5f7c7;
  border-left-color: #6da882;
  border-right-color: #6da882;
  border-radius: 50%;
  opacity: 0;
}
.cartoon-tool-fx[data-tool=shuffle][data-phase=action] .ct-wind {
  animation: ct-wind 1.05s ease-out both;
}
.ct-chips {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 5;
}
.ct-chips i {
  position: absolute;
  width: 11px;
  height: 15px;
  border: 2px solid #fff4cd;
  background: var(--topic);
  border-radius: 3px;
  opacity: 0;
}
.ct-chips i:nth-child(1) {
  --dx:-65px;
  --dy:-25px;
}
.ct-chips i:nth-child(2) {
  --dx:-38px;
  --dy:35px;
}
.ct-chips i:nth-child(3) {
  --dx:-12px;
  --dy:-42px;
}
.ct-chips i:nth-child(4) {
  --dx:18px;
  --dy:34px;
}
.ct-chips i:nth-child(5) {
  --dx:43px;
  --dy:-35px;
}
.ct-chips i:nth-child(6) {
  --dx:65px;
  --dy:19px;
}
.cartoon-tool-fx[data-tool=bomb][data-phase=action] .ct-chips i {
  animation: ct-chip 1.05s ease-out both;
}
.ct-result {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #376c35;
  font-size: 12px;
  line-height: 22px;
  font-weight: 800;
  text-shadow:
    0 1px #f5ffdf,
    1px 0 #f5ffdf,
    -1px 0 #f5ffdf,
    0 -1px #f5ffdf;
}
.ct-result img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}
.cartoon-tool-fx[data-phase=exit] {
  opacity: 0;
  transition: opacity .2s;
}
#app[data-chapter-tool-fx=stash] .stash-bar {
  outline: 2px solid #ad8344;
  outline-offset: 1px;
}
.cartoon-tool-fx[data-reduced=true] * {
  animation: none !important;
}
.cartoon-tool-fx[data-reduced=true] .pose-panic {
  display: none;
}
.chapter-tray-burst {
  position: absolute;
  pointer-events: none;
}
.chapter-tray-burst i {
  position: absolute;
  width: 7px;
  height: 10px;
  border: 1px solid #fff7df;
  border-radius: 2px;
  background: var(--topic);
}
@keyframes ct-shove {
  0% {
    transform: translateX(-6px) rotate(-6deg);
  }
  30% {
    transform: translateX(12px) rotate(5deg);
  }
  52% {
    transform: translateX(8px) rotate(0);
  }
  70% {
    transform: translateX(13px) rotate(4deg);
  }
  100% {
    transform: translateX(3px);
  }
}
@keyframes ct-recoil {
  0% {
    transform: translateX(4px) translateY(-6px) rotate(-6deg);
  }
  50% {
    transform: translateX(-15px) translateY(9px) rotate(-10deg);
  }
  100% {
    transform: translateX(-10px) translateY(5px) rotate(-5deg);
  }
}
@keyframes ct-panic-out {
  0%, 99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ct-flop-in {
  0%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ct-card-pop {
  0%, 20% {
    transform: translateX(var(--x0));
    opacity: 1;
  }
  50% {
    transform: translateX(0) translateY(7px) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translateX(var(--x0)) translateY(-30px) rotate(25deg) scale(.25);
    opacity: 0;
  }
}
@keyframes ct-poof {
  0% {
    opacity: 0;
    transform: scale(.2);
  }
  35% {
    opacity: 1;
    transform: scale(1.2);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes ct-file-away {
  0%, 15% {
    left: calc(50% - 24px);
    top: 16px;
    transform: translateX(var(--x0));
    opacity: 1;
  }
  75% {
    left: calc(100% - 75px);
    top: calc(100% - 75px);
    transform: translateY(8px) scale(.7);
    opacity: 1;
  }
  100% {
    left: calc(100% - 75px);
    top: calc(100% - 65px);
    transform: translateY(12px) scale(.5);
    opacity: 0;
  }
}
@keyframes ct-folder-snap {
  0%, 60% {
    transform: rotate(0);
  }
  70% {
    transform: rotate(-9deg) scale(1.1);
  }
  83% {
    transform: rotate(7deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ct-whirl {
  0% {
    transform: translateX(var(--x0));
  }
  33% {
    transform: translateX(0) translateY(-32px) rotate(-75deg);
  }
  66% {
    transform: translateX(var(--x1)) translateY(24px) rotate(65deg);
  }
  100% {
    transform: translateX(var(--x1));
  }
}
@keyframes ct-wind {
  0% {
    opacity: 0;
    transform: rotate(0) scale(.5);
  }
  25% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(300deg) scale(1.1);
  }
}
@keyframes ct-chip {
  0%, 52% {
    opacity: 0;
    transform: translate(0, 0);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(110deg);
  }
}
.forest-film {
  --film-offset:0ms;
  position: relative;
  height: 270px;
  overflow: hidden;
  border: 2px solid #92ad78;
  border-radius: 17px;
  background:
    linear-gradient(
      #c8e6ed 0%,
      #e5f5dd 65%,
      #b7d779 65%,
      #d5e99a);
  isolation: isolate;
}
.forest-world {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: 50% 75%;
  animation-name: forest-camera;
}
.forest-cloud {
  position: absolute;
  top: 9%;
  width: 53px;
  height: 17px;
  border-radius: 50%;
  background: #ffffffb8;
  animation-name: forest-cloud-drift;
}
.forest-cloud::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 13px;
  width: 26px;
  height: 22px;
  border-radius: 50%;
  background: inherit;
}
.cloud-a {
  left: 5%;
}
.cloud-b {
  right: 5%;
  top: 17%;
  transform: scale(.75);
}
.forest-hill {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 60%;
  height: 50%;
  background: #c8e89c;
  border-radius: 50% 55% 0 0;
}
.forest-soil {
  position: absolute;
  left: 70%;
  bottom: 18%;
  width: 92px;
  height: 33px;
  border: 3px solid #8b7044;
  border-radius: 50%;
  background: #c8a577;
  transform: translateX(-50%);
}
.forest-tree {
  position: absolute;
  left: 70%;
  bottom: 28%;
  width: 78px;
  height: 100px;
  transform: translateX(-50%);
  opacity: .45;
  animation-name: forest-expect;
}
.forest-tree i {
  position: absolute;
  left: 0;
  top: 17px;
  width: 51px;
  height: 49px;
  border: 3px dashed #7c9a58;
  border-radius: 50%;
  background: #c4e29388;
}
.forest-tree i:nth-child(2) {
  left: 27px;
  top: 20px;
}
.forest-tree i:nth-child(3) {
  left: 18px;
  top: 0;
  width: 46px;
}
.forest-tree b {
  position: absolute;
  left: 34px;
  top: 57px;
  width: 10px;
  height: 43px;
  border: 2px dashed #8e9a65;
  border-top: 0;
}
.forest-actor {
  position: absolute;
  left: 1%;
  bottom: 2%;
  height: 92%;
  aspect-ratio: 4/5;
  transform-origin: 43% 96%;
  animation-name: forest-acting;
  z-index: 3;
}
.forest-film[data-beat="0"] .pose-boast,
.forest-film[data-beat="1"] .pose-shout,
.forest-film[data-beat="2"] .pose-panic,
.forest-film[data-beat="3"] .pose-flop {
  display: block;
}
.forest-words {
  position: absolute;
  left: 34%;
  top: 52%;
  z-index: 4;
}
.forest-words b {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: 20px;
  line-height: 26px;
  color: #fff9dc;
  font-weight: 950;
  -webkit-text-stroke: 1px #806b42;
  paint-order: stroke fill;
  text-shadow: 1px 2px #7b774855;
  opacity: 0;
}
.forest-words b:nth-child(1) {
  animation-name: forest-word-one;
}
.forest-words b:nth-child(2) {
  animation-name: forest-word-two;
}
.forest-words b:nth-child(3) {
  animation-name: forest-word-three;
}
.forest-paper {
  position: absolute;
  left: 70%;
  bottom: 23%;
  width: 25%;
  max-width: 96px;
  height: 40%;
  border: 3px solid #806137;
  border-radius: 3px 12px 4px 4px;
  background: #fff5d5;
  box-shadow: 4px 4px 0 #8e774e33;
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 100%;
  opacity: 0;
  animation-name: forest-paper-grow;
  z-index: 2;
}
.forest-paper i {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 20px;
  height: 19px;
  border: 3px solid #806137;
  border-top: 0;
  border-right: 0;
  border-radius: 0 8px 0 5px;
  background: #e5cf98;
}
.forest-paper b {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 3px;
  color: #89602d;
}
.forest-paper span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 3px;
  background: #d4bf87;
}
.forest-paper span:last-child {
  bottom: 5px;
}
.forest-dust {
  position: absolute;
  left: 52%;
  bottom: 15%;
  width: 38%;
  height: 31%;
  opacity: 0;
  transform-origin: 50% 100%;
  animation-name: forest-dust-pop;
  z-index: 4;
}
.forest-dust i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55%;
  height: 55%;
  border: 2px solid #9ba774;
  border-radius: 50%;
  background: #f8efcf;
}
.forest-dust i:nth-child(2) {
  left: 35%;
  height: 70%;
}
.forest-dust i:nth-child(3) {
  left: 25%;
  bottom: 20%;
  height: 65%;
}
.forest-prize {
  position: absolute;
  left: 86%;
  bottom: 26px;
  width: 63px;
  height: 62px;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  opacity: 0;
  animation-name: forest-prize-drop;
  z-index: 5;
}
.forest-prize img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 #fff5d5);
}
.forest-prize b {
  padding: 0 5px;
  border-radius: 9px;
  background: #fff7d8;
  color: #537735;
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
}
.forest-film .forest-caption {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  z-index: 6;
  margin: 0;
  color: #3d6238;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  font-weight: 850;
  text-shadow:
    0 1px #f5ffdd,
    1px 0 #f5ffdd,
    -1px 0 #f5ffdd;
}
.forest-world,
.forest-cloud,
.forest-tree,
.forest-actor,
.forest-words b,
.forest-paper,
.forest-dust,
.forest-prize {
  animation-duration: 8000ms;
  animation-timing-function: linear;
  animation-delay: var(--film-offset);
  animation-fill-mode: both;
  animation-play-state: paused;
}
.film-reward-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.film-reward-note img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.modal:has(.forest-film) {
  padding: 12px 13px;
}
.modal:has(.forest-film) h2 {
  font-size: 22px;
  margin: 2px 0 8px;
}
.modal:has(.forest-film) .film-reward-note {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 16px;
}
.modal:has(.forest-film) .short-progress {
  margin-top: 8px;
  height: 5px;
}
.modal:has(.forest-film) .modal-actions .btn {
  min-height: 40px;
  margin-top: 6px;
  padding: 8px;
}
.modal:has(.forest-film) .modal-actions .btn:last-child {
  min-height: 30px;
  padding: 3px 8px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 11px;
  color: #81916b;
}
@keyframes forest-camera {
  0%, 51% {
    transform: none;
  }
  52.5% {
    transform: translate(2px, 0) rotate(.5deg);
  }
  54% {
    transform: translate(-2px, 1px) rotate(-.5deg);
  }
  56%, 100% {
    transform: none;
  }
}
@keyframes forest-cloud-drift {
  from {
    translate: -4px 0;
  }
  to {
    translate: 7px 0;
  }
}
@keyframes forest-expect {
  0%, 50% {
    opacity: .45;
  }
  54%, 100% {
    opacity: 0;
  }
}
@keyframes forest-acting {
  0%, 24.9% {
    transform: none;
  }
  25% {
    transform: translateX(5px) rotate(3deg);
  }
  29% {
    transform: translateX(0) rotate(-2deg);
  }
  33% {
    transform: translateX(5px) rotate(3deg);
  }
  37% {
    transform: translateX(0) rotate(-2deg);
  }
  41% {
    transform: translateX(5px) rotate(3deg);
  }
  45% {
    transform: translateX(0) rotate(-2deg);
  }
  49% {
    transform: translateX(5px) rotate(3deg);
  }
  52.5% {
    transform: translate(-8px, -13px) rotate(-9deg);
  }
  58% {
    transform: translate(-13px, 0) rotate(-4deg);
  }
  74.9% {
    transform: translate(-8px, 0) rotate(-3deg);
  }
  75% {
    transform: translate(-14px, 7px) rotate(-7deg);
  }
  83%, 100% {
    transform: translate(-11px, 5px) rotate(-4deg);
  }
}
@keyframes forest-word-one {
  0%, 24.9% {
    opacity: 0;
    transform: scale(.4);
  }
  25% {
    opacity: 1;
    transform: scale(.6);
  }
  41% {
    opacity: 1;
    transform: translate(105px, 48px) rotate(12deg) scale(1.05);
  }
  43%, 100% {
    opacity: 0;
    transform: translate(105px, 48px) scale(.3);
  }
}
@keyframes forest-word-two {
  0%, 30.9% {
    opacity: 0;
    transform: scale(.4);
  }
  31% {
    opacity: 1;
    transform: scale(.6);
  }
  47% {
    opacity: 1;
    transform: translate(100px, 45px) rotate(-10deg) scale(1.05);
  }
  49%, 100% {
    opacity: 0;
    transform: translate(100px, 45px) scale(.3);
  }
}
@keyframes forest-word-three {
  0%, 35.9% {
    opacity: 0;
    transform: scale(.4);
  }
  36% {
    opacity: 1;
    transform: scale(.6);
  }
  51% {
    opacity: 1;
    transform: translate(106px, 49px) rotate(8deg) scale(1.05);
  }
  53%, 100% {
    opacity: 0;
    transform: translate(106px, 49px) scale(.3);
  }
}
@keyframes forest-paper-grow {
  0%, 52% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  53% {
    opacity: 1;
    transform: translateX(-50%) scaleY(.08);
  }
  65% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.12) rotate(4deg);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1) rotate(-3deg);
  }
  75%, 100% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1) rotate(2deg);
  }
}
@keyframes forest-dust-pop {
  0%, 51.9% {
    opacity: 0;
    transform: scale(.1);
  }
  52% {
    opacity: 1;
    transform: scale(.4);
  }
  58% {
    opacity: 1;
    transform: scale(1);
  }
  65%, 100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes forest-prize-drop {
  0%, 87.4% {
    opacity: 0;
    transform: translate(-50%, -70px) scale(.4);
  }
  87.5% {
    opacity: 1;
    transform: translate(-50%, -55px) scale(.5);
  }
  94% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
.forest-film[data-reduced=true] * {
  animation: none !important;
}
.forest-film[data-reduced=true][data-beat="1"] .forest-words b {
  opacity: 1;
  position: relative;
  display: block;
  font-size: 15px;
  line-height: 19px;
}
.forest-film[data-reduced=true]:is([data-beat="2"], [data-beat="3"]) .forest-tree {
  opacity: 0;
}
.forest-film[data-reduced=true]:is([data-beat="2"], [data-beat="3"]) .forest-paper {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}
.forest-film[data-reduced=true][data-prize=true] .forest-prize {
  opacity: 1;
}
@media (max-height: 700px) {
  .forest-film {
    height: 190px;
  }
  .forest-film .forest-caption {
    font-size: 12px;
    line-height: 17px;
  }
  .forest-paper b {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 2px;
  }
  .forest-prize {
    width: 50px;
    height: 48px;
  }
  .forest-prize img {
    width: 31px;
    height: 31px;
  }
  .forest-prize b {
    font-size: 8px;
    line-height: 12px;
  }
}
@media (max-width: 360px) {
  .ct-speech {
    left: 95px;
    right: 0;
  }
  .ct-speech b {
    font-size: 17px;
    line-height: 22px;
  }
  .ct-speech .ct-after {
    font-size: 11px;
    line-height: 16px;
  }
  .ct-props {
    left: 123px;
    right: 0;
  }
  .ct-card b {
    font-size: 9.5px;
  }
  .ct-result {
    font-size: 10px;
  }
  .ct-result img {
    width: 20px;
    height: 20px;
  }
  .modal:has(.forest-film) {
    padding: 10px;
  }
  .modal:has(.forest-film) h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }
}