/* One chapter, two directions. Only the clipped texture moves. */
.apple-edition #chapter-game.chapter-cost {
  padding: clamp(68px, 9svh, 100px) 5vw clamp(34px, 6svh, 70px);
  overflow: hidden;
}
.apple-edition #chapter-game.chapter-cost .chapter-divider-content {
  max-width: 1250px;
}
.apple-edition #chapter-game.chapter-cost .chapter-number {
  margin-bottom: clamp(12px, 2svh, 20px);
}
.apple-edition #chapter-game.chapter-cost .chapter-title {
  font-size: clamp(54px, 7.2vw, 112px);
  line-height: 1.12;
}
.apple-edition #chapter-game .cost-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 7vw, 110px);
  width: min(100%, 1040px);
  margin: clamp(26px, 4.4svh, 48px) auto 0;
}
.apple-edition #chapter-game .cost-trend {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  height: clamp(270px, 43svh, 420px);
  min-width: 0;
}
.apple-edition #chapter-game .cost-arrow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(155deg, #d6edff 0%, #a8d7ff 52%, #72bbff 100%);
  clip-path: polygon(20% 0, 80% 0, 80% 61%, 100% 61%, 50% 100%, 0 61%, 20% 61%);
}
.apple-edition #chapter-game .cost-trend-up .cost-arrow {
  background: linear-gradient(25deg, #d6edff 0%, #a8d7ff 52%, #72bbff 100%);
  clip-path: polygon(50% 0, 100% 39%, 80% 39%, 80% 100%, 20% 100%, 20% 39%, 0 39%);
}
.apple-edition #chapter-game .cost-arrow-texture {
  --streak-direction: to bottom;
  position: absolute;
  inset: -192px 0;
  display: block;
  /* Irregular, tapered speed trails repeat every 192px for a seamless loop. */
  background-image:
    linear-gradient(var(--streak-direction), transparent 8%, #ffffff90 39%, transparent 40%),
    linear-gradient(var(--streak-direction), transparent 15%, #ffffffb0 72%, transparent 73%),
    linear-gradient(var(--streak-direction), transparent 4%, #ffffff65 27%, transparent 28%),
    linear-gradient(var(--streak-direction), transparent 20%, #ffffffa0 66%, transparent 67%),
    linear-gradient(var(--streak-direction), transparent 12%, #ffffff70 44%, transparent 45%),
    linear-gradient(var(--streak-direction), transparent 2%, #ffffffb0 60%, transparent 61%),
    linear-gradient(var(--streak-direction), transparent 18%, #ffffff85 50%, transparent 51%);
  background-size: 2px 192px, 3px 192px, 2px 192px, 3px 192px, 2px 192px, 3px 192px, 2px 192px;
  background-position: 12% 23px, 25% 117px, 37% 64px, 53% 158px, 64% 7px, 79% 90px, 91% 145px;
  background-repeat: repeat-y;
  animation: cost-texture-down .4s linear infinite paused;
}
.apple-edition #chapter-game .cost-trend-up .cost-arrow-texture {
  --streak-direction: to top;
  animation: cost-texture-up .8s linear infinite paused;
}
.apple-edition #chapter-game.cost-motion-active .cost-arrow-texture {
  animation-play-state: running;
  will-change: transform;
}
.apple-edition #chapter-game .cost-trend-copy {
  width: 100%;
  position: relative;
  color: #113d71;
}
.apple-edition #chapter-game .cost-trend-down .cost-trend-copy {
  transform: translateY(-10%);
}
.apple-edition #chapter-game .cost-trend-up .cost-trend-copy {
  transform: translateY(42%);
}
.apple-edition #chapter-game .cost-trend-copy h3 {
  margin: 0;
  color: inherit;
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow: 0 1px 14px #ffffff70;
}
.apple-edition #chapter-game .cost-inputs {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: clamp(12px, 2vw, 28px);
  margin: clamp(14px, 2.3svh, 24px) auto 0;
}
.apple-edition #chapter-game .cost-inputs figure {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: clamp(34px, 4vw, 52px);
  margin: 0;
}
.apple-edition #chapter-game .cost-inputs svg {
  display: block;
  width: clamp(28px, 3.1vw, 42px);
  height: clamp(28px, 3.1vw, 42px);
  color: #21598c;
}
.apple-edition #chapter-game .cost-inputs figcaption {
  margin: 0;
  color: #295a85;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: .02em;
  white-space: nowrap;
}
@keyframes cost-texture-down {
  from { transform: translateY(-192px); }
  to { transform: translateY(0); }
}
@keyframes cost-texture-up {
  from { transform: translateY(0); }
  to { transform: translateY(-192px); }
}
@media (max-width: 700px) {
  .apple-edition #chapter-game.chapter-cost {
    padding: 76px 16px 44px;
  }
  .apple-edition #chapter-game.chapter-cost .chapter-title {
    font-size: clamp(42px, 11.5vw, 66px);
  }
  .apple-edition #chapter-game .cost-summary {
    gap: 14px;
    margin-top: 36px;
  }
  .apple-edition #chapter-game .cost-trend {
    height: clamp(250px, 42svh, 350px);
  }
  .apple-edition #chapter-game .cost-trend-copy h3 {
    font-size: clamp(23px, 6.4vw, 36px);
  }
  .apple-edition #chapter-game .cost-inputs {
    gap: 7px;
    margin-top: 16px;
  }
  .apple-edition #chapter-game .cost-inputs figure {
    width: 30px;
    gap: 5px;
  }
  .apple-edition #chapter-game .cost-inputs svg {
    width: 25px;
    height: 25px;
  }
  .apple-edition #chapter-game .cost-inputs figcaption {
    font-size: 11px;
  }
}
@media (max-height: 600px) and (min-width: 701px) {
  .apple-edition #chapter-game.chapter-cost { padding-block: 38px 24px; }
  .apple-edition #chapter-game.chapter-cost .chapter-title { font-size: 56px; }
  .apple-edition #chapter-game.chapter-cost .chapter-number { margin-bottom: 8px; }
  .apple-edition #chapter-game .cost-summary { margin-top: 20px; max-width: 850px; }
  .apple-edition #chapter-game .cost-trend { height: 245px; }
  .apple-edition #chapter-game .cost-trend-copy h3 { font-size: 36px; }
}
.apple-edition.motion-off #chapter-game .cost-arrow-texture,
.motion-off .apple-edition #chapter-game .cost-arrow-texture,
html.motion-off #chapter-game .cost-arrow-texture {
  animation: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce), print {
  .apple-edition #chapter-game .cost-arrow-texture {
    animation: none;
    will-change: auto;
  }
}