/* Decorative sprites peeking onto the tracker list page.
   The layer lives inside .sp-page (position: relative), so sprites are anchored
   to the page and scroll with it. */
body:has(.sp-peek-layer) { overflow-x: hidden; }

.sp-page { position: relative; }
.sp-page > header,
.sp-page > .sp-list-layout { position: relative; z-index: 1; }

.sp-peek-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.sp-peek {
    position: absolute;
    height: auto;
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(var(--rot, 0deg));
    transition: transform .7s ease-out, opacity .5s ease-out;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
    user-select: none;
}
.sp-peek.is-in { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)); }

.sp-peek.is-left  { left: var(--edge, -70px);  --from-x: -60px; }
.sp-peek.is-right { right: var(--edge, -70px); --from-x: 60px; }

/* Peeking over the top edge of the leaderboard card */
.sp-list-board { position: relative; }
.sp-peek-top {
    position: absolute;
    top: -52px;
    right: 2.5rem;
    width: 96px;
    height: 52px;
    overflow: hidden;
    pointer-events: none;
}
.sp-peek-top .sp-peek {
    position: static;
    display: block;
    width: 96px;
    filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, .5));
    transform: translateY(40px);
}
.sp-peek-top .sp-peek.is-in { transform: translateY(0); }

@media (max-width: 1100px) {
    .sp-peek-layer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-peek { transition: none; }
}