/* chalksta Live: feats and rack wins on the video (views/assets/js/live/video-kudos.js). Lives inside #stage. */
.vk-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; container-type: size; font-family: Roboto, Arial, sans-serif; }

/* Corner stack, newest on top. */
.vk-stack { position: absolute; top: clamp(8px, 2cqh, 18px); right: clamp(8px, 1.6cqw, 18px); display: flex; flex-direction: column; align-items: flex-end; gap: clamp(4px, 0.9cqh, 8px); max-width: min(46cqw, 360px); }
.vk-item { display: inline-flex; align-items: center; gap: 0.45em; max-width: 100%; padding: 0.4em 0.75em 0.4em 0.45em; border-radius: 999px; background: rgba(12, 12, 14, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); color: #f4f1ee; font-size: clamp(11px, 1.7cqw, 15px); line-height: 1.2; white-space: nowrap; transition: opacity 0.8s ease, transform 0.45s cubic-bezier(.2,.8,.2,1); }
.vk-item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.vk-item .vk-text { overflow: hidden; text-overflow: ellipsis; }
.vk-item img { width: 1.55em; height: 1.55em; flex: 0 0 auto; }
.vk-item .vk-code { font: 600 0.92em 'Oswald', sans-serif; letter-spacing: 0.04em; color: #fff; background: #e31837; border-radius: 4px; padding: 0.08em 0.4em; }
.vk-item--feat { border-color: rgba(227, 24, 55, 0.55); }
.vk-item--win { background: rgba(12, 12, 14, 0.68); padding-left: 0.75em; font-size: clamp(10px, 1.5cqw, 13px); }
.vk-item--win .vk-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: #7ee2a8; flex: 0 0 auto; }
.vk-item.is-fading { opacity: 0; }

/* Hero: the big slide-in before it flies to the corner. */
.vk-hero { position: absolute; left: 50%; top: 50%; transform-origin: center center; display: flex; align-items: center; gap: clamp(10px, 2cqw, 22px); max-width: 82cqw; padding: clamp(12px, 2.4cqh, 24px) clamp(16px, 3cqw, 32px); border-radius: clamp(12px, 2cqw, 20px); background: linear-gradient(135deg, rgba(20, 20, 23, 0.94), rgba(38, 10, 16, 0.94)); border: 1px solid rgba(227, 24, 55, 0.65); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(227, 24, 55, 0.2) inset; color: #f4f1ee; opacity: 0; transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease; will-change: transform, opacity; }
.vk-hero img.vk-ball { width: clamp(46px, 11cqw, 110px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); }
.vk-hero .vk-title { margin: 0 0 0.15em; font: 600 clamp(20px, 5.4cqw, 54px)/1 'Oswald', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.vk-hero .vk-title span { color: #ff3452; }
.vk-hero .vk-line { margin: 0; font-size: clamp(13px, 2.4cqw, 24px); line-height: 1.25; color: #e8e4e1; }
.vk-hero .vk-line b { color: #fff; }
.vk-hero .vk-code { display: inline-block; font: 600 0.95em 'Oswald', sans-serif; letter-spacing: 0.04em; color: #fff; background: #e31837; border-radius: 5px; padding: 0.04em 0.42em; }
.vk-hero--win { gap: clamp(8px, 1.4cqw, 14px); padding: clamp(8px, 1.6cqh, 14px) clamp(14px, 2.4cqw, 24px); background: rgba(12, 12, 14, 0.9); border-color: rgba(126, 226, 168, 0.55); }
.vk-hero--win .vk-line { font-size: clamp(13px, 2.2cqw, 22px); }
.vk-hero--win .vk-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #7ee2a8; flex: 0 0 auto; font-size: clamp(13px, 2.2cqw, 22px); }

@media (prefers-reduced-motion: reduce) {
  .vk-hero, .vk-item { transition: opacity 0.4s ease; }
}