/* Screen 3, CLIMB THE SPLIT: a sticky arcade tower that climbs as the page scrolls. */
.tower { position: relative; height: 320vh; border-top: var(--line-lg) solid var(--ink); }
.tower__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px);
  padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto;
}
.tower__info { align-self: center; display: grid; gap: 18px; justify-items: start; max-width: 560px; }
.tower__title { font-size: clamp(44px, 6.4vw, 100px); }
.tower__lede { max-width: 44ch; font-size: clamp(16px, 1.3vw, 19px); }
.tower__five { display: grid; gap: 8px; }
.tower__five .t-pix { font-size: 11px; }
.tower__heads { display: flex; gap: 6px; }
.tower__heads span {
  width: 52px; height: 52px; background-color: var(--chalk); background-repeat: no-repeat;
  border: var(--line) solid var(--ink); box-shadow: 0 5px 0 var(--p1);
}
.tower__record { display: flex; gap: 14px; }
.tower__record p {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 18px 6px; min-width: 132px;
  border: var(--line-lg) solid var(--ink); box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.tower__record p:first-child { background: var(--p1); color: var(--chalk); }
.tower__record p:last-child { background: var(--p2); color: var(--chalk); }
.tower__record .t-pix { font-size: 14px; }
.tower__record b { font-size: 58px; line-height: 1; font-variant-numeric: tabular-nums; }
.tower__status { font-size: 13px; padding: 5px 10px 4px; background: var(--ink); color: var(--yellow); }

/* ---------- the tower ---------- */
.tower__view { position: relative; height: 100%; overflow: hidden; }
.tower__view::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; translate: -50% 0;
  background: var(--ink);
}
.tower__stack { position: relative; display: grid; gap: 10px; padding: 50vh 0; will-change: transform; }
.tower__marker {
  position: absolute; z-index: 3; top: 58%; left: 0; translate: 0 -50%;
  padding: 6px 10px 5px 8px; font-size: 12px; color: var(--chalk); background: var(--p1);
  border: 2px solid var(--ink);
}
.tower__marker::after {
  content: ''; position: absolute; left: 100%; top: 50%; translate: 0 -50%;
  border-block: 12px solid transparent; border-left: 12px solid var(--ink);
}

.plate {
  position: relative; display: grid; grid-template-columns: 56px 1fr 82px; align-items: center; gap: 12px;
  width: min(84%, 440px); height: 54px; margin: 0 auto; padding: 0 0 0 14px;
  background: var(--chalk); border: var(--line) solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  transform: skewX(calc(var(--slash) * -1));
}
.plate > * { transform: skewX(var(--slash)); }
.plate:nth-child(odd) { translate: -18px 0; }
.plate:nth-child(even) { translate: 18px 0; }
.plate__num { font-size: 11px; }
.plate__label { font-size: 18px; font-stretch: 125%; }
.plate__res {
  align-self: stretch; display: grid; place-items: center; font-size: 26px; font-style: normal;
  border-left: var(--line) solid var(--ink); background: var(--yellow-deep); transform: none;
}
.plate.is-current { background: var(--yellow); outline: 4px solid var(--p1); outline-offset: 3px; }
.plate.is-played .plate__res { animation: tile-pop calc(var(--frame) * 6) steps(3, end); }
.plate.is-w .plate__res { background: var(--p1); color: var(--chalk); }
.plate.is-l .plate__res { background: var(--p2); color: var(--chalk); }
.plate.is-out { background: var(--yellow-deep); }
.plate.is-out .plate__res { background: var(--ink); color: var(--chalk); }

.plate--boss { height: 84px; width: min(96%, 520px); background: var(--ink); color: var(--yellow); }
.plate--boss .plate__label { font-size: 30px; }
.plate--boss .plate__num { color: var(--chalk); }
.plate--boss .plate__res { font-size: 28px; border-left-color: var(--chalk); background: var(--ink-soft); }
.plate--boss:first-child { margin-top: 0; }
.plate--boss:first-child .plate__label::before { content: '★ '; color: var(--yellow); }

/* ---------- PERFECT ---------- */
.tower__perfect {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  visibility: hidden;
}
.tower__perfect.is-on { visibility: visible; }
.tower__perfect::before {
  content: ''; position: absolute; left: -5%; right: -5%; top: 50%; height: 32%; translate: 0 -50%;
  background: var(--ink); transform: skewY(calc(var(--slash) * -1));
}
.tower__perfect p {
  position: relative; font-size: clamp(64px, 12.5vw, 200px); color: var(--yellow); font-style: italic;
  text-transform: uppercase;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 12px 12px 0 var(--p2);
  rotate: calc(var(--slash) * -1);
}