/* The split: a full-stage moment at the end of an opening. The 3D slab flies into .spl-stage. */
.split-layer {
  flex-direction: row; gap: clamp(24px, 4vw, 72px);
  --wh: clamp(260px, 60svh, 540px);
}
body[data-step="split"] .live-view[data-show="opening"] .split-layer {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .3s var(--ease-out), visibility 0s;
}
/* The opening layer stays in place (its slab anchor is where the flight starts) but its text steps back. */
body[data-step="split"] .opening-layer > :not(.game-object) {
  opacity: 0; transition: opacity .3s var(--ease-out);
}
body[data-step="split"] .opening-layer { pointer-events: none; }

.spl-stage { flex: none; height: var(--wh); width: calc(var(--wh) * .62); }
.spl-stage .slab-box { width: 100%; height: 100%; }
.spl-side { flex: 1 1 0; min-width: 0; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.spl-card { align-items: flex-end; text-align: right; }
.spl-pay { align-items: flex-start; text-align: left; }

.spl-verdict { font-size: clamp(64px, 13svh, 140px); line-height: .85; padding-bottom: 6px; border-bottom: 6px solid var(--fg-2); }
.spl-verdict.is-hit { border-bottom-color: var(--hit); }
.spl-name { margin-top: 10px; font: 600 16px/1.3 var(--font-ui); letter-spacing: .03em; }
.spl-value { font: 500 13px/1 var(--font-ui); letter-spacing: .06em; color: var(--fg-2); }
.spl-value b { font-size: clamp(36px, 6svh, 60px); line-height: .9; letter-spacing: 0; color: var(--fg); margin-right: 6px; }

.spl-amt {
  font-size: clamp(56px, 11svh, 116px); line-height: .88; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 4px rgba(90, 0, 0, .45), 0 10px 44px rgba(90, 0, 0, .6);
}
.spl-sub { font-size: 15px; line-height: 1.45; color: var(--fg); max-width: 32ch; }
.spl-top { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.spl-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(20, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .16);
  font: 500 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg);
}
.spl-chip b { font-weight: 600; }
.spl-chip.is-me { background: var(--hit); color: var(--hit-ink); border-color: transparent; }
.spl-chip.is-more { color: var(--fg-2); }
.spl-me {
  align-self: flex-start; margin-top: 10px; padding: 10px 16px; border-radius: 12px;
  background: var(--hit); color: var(--hit-ink); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55);
  font: 400 26px/1 var(--font-display); letter-spacing: .01em;
}
.spl-cta { margin-top: 6px; text-decoration: underline; text-underline-offset: 4px; }

/* Sides arrive after the slab has started its flight, from their own edge toward the card. */
.spl-side > * { opacity: 0; transform: translateX(var(--from, 0)); }
.spl-card { --from: -14px; }
.spl-pay { --from: 14px; }
body[data-step="split"] .spl-side > * {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
body[data-step="split"] .spl-side > :nth-child(1) { transition-delay: .25s; }
body[data-step="split"] .spl-side > :nth-child(2) { transition-delay: .3s; }
body[data-step="split"] .spl-side > :nth-child(3) { transition-delay: .36s; }
body[data-step="split"] .spl-side > :nth-child(4) { transition-delay: .42s; }
/* The viewer's own share lands last, once the total has had a moment to count up. */
body[data-step="split"] .spl-side > :nth-child(n+5) { transition-delay: .9s; }

@media (max-width: 760px) {
  .split-layer { flex-direction: column; gap: 10px; --wh: clamp(150px, 26svh, 260px); }
  .spl-side { flex: none; max-width: 100%; align-items: center; text-align: center; gap: 4px; }
  .spl-card, .spl-pay { --from: 0; }
  .spl-card { order: 0; }
  .spl-stage { order: 1; }
  .spl-pay { order: 2; }
  .spl-card .label, .spl-name { display: none; }
  .spl-verdict { font-size: 44px; border-bottom-width: 4px; }
  .spl-value b { font-size: 28px; }
  .spl-amt { font-size: 56px; }
  .spl-sub { font-size: 13px; }
  .spl-top { justify-content: center; }
  .spl-me { align-self: center; font-size: 20px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .spl-side > *, body[data-step="split"] .spl-side > * { transform: none; transition: opacity .2s; transition-delay: 0s; }
}
.split-layer { position: relative; z-index: 1; }
/* Leaving the split: it fades out slowly while the meter settles in behind it. */
.split-layer { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s linear .7s; }
.live-view[data-show="idle"] .idle-layer { transition: opacity .7s var(--ease) .45s, transform .8s var(--ease) .45s, visibility 0s; }