.game-video-comparison { --comparison-position: 50%; position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: transparent; touch-action: pan-y; }
.game-video-comparison > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.game-video-comparison .game-video-before { clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0); }
.game-video-comparison .game-video-after { clip-path: inset(0 0 0 var(--comparison-position)); }
.game-video-comparison:not(.is-ready) > video { visibility: hidden; }
.game-video-label-clip { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.game-video-label-clip--before { clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0); }
.game-video-label-clip--after { clip-path: inset(0 0 0 var(--comparison-position)); }
.game-video-label { position: absolute; top: 16px; z-index: 1; padding: 7px 12px; border-radius: 2px; color: #fff; background: #0c171ddd; font: 13px/1.5 Arial, sans-serif; pointer-events: none; }
.game-video-label--before { left: 16px; }
.game-video-label--after { right: 16px; }
.game-video-divider { position: absolute; z-index: 2; inset: 0 auto 0 var(--comparison-position); transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; border-radius: 0; color: #fff; background: transparent; cursor: ew-resize; touch-action: none; }
.game-video-divider::before { content: ''; position: absolute; inset: 0 auto; width: 2px; background: #dccb93; box-shadow: 0 0 4px #0008; }
.game-video-grip { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; border: 1px solid #ead9a3; border-radius: 50%; color: #fff; background: #10232c; box-shadow: 0 2px 8px #0004; }
.game-video-grip > svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-video-divider:hover .game-video-grip { background: #223e49; }
/* The page-wide focus outline must not frame the full-height drag target. */
.game-video-comparison .game-video-divider:focus { outline: none; outline-offset: 0; }
.game-video-divider:focus-visible .game-video-grip { color: #10232c; background: #ead9a3; }
@media (forced-colors: active) { .game-video-divider:focus-visible .game-video-grip { border: 3px solid Highlight; } }
[data-media-preview] > video { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .game-video-label { top: 8px; padding: 4px 7px; font-size: 11px; } .game-video-label--before { left: 8px; } .game-video-label--after { right: 8px; } }