.thumbnail-media{position:relative}.motion-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;z-index:2;transition:opacity .12s}.preview-playing .motion-preview{opacity:1}.preview-playing .play-hover{opacity:0}.motion-toggle{touch-action:manipulation;position:absolute;bottom:9px;left:9px;z-index:3;display:inline-flex;align-items:center;gap:5px;min-height:32px;max-width:calc(100% - 65px);border:1px solid #ffffff35;border-radius:9px;padding:6px 9px;background:#14110de8;color:#ffd08a;font:inherit;font-size:10px;font-weight:650;line-height:1.2;cursor:pointer;box-shadow:0 2px 9px #0004}.motion-toggle .icon{width:15px;height:15px;flex-shrink:0}.motion-toggle[aria-pressed=true]{background:#ff9c00;color:#1d1305}.motion-toggle:focus-visible{outline:2px solid #ff9c00;outline-offset:3px}@media(max-width:400px){.motion-toggle{padding:5px 7px;font-size:9px;gap:4px}.motion-toggle .icon{width:13px;height:13px}}@media(prefers-reduced-motion:reduce){.motion-preview{transition:none}}

/* Keep the poster stable while waiting for a preview: no zoom/dim reset on load. */
.cover[data-motion]:hover img{transform:none;filter:none}

/* Keep animated frames sharp and stable instead of zooming and dimming them. */
.cover.preview-playing .motion-preview{transform:none;filter:none;transition:opacity .12s}
.cover.preview-playing>picture img,.cover.preview-playing>img:not(.motion-preview){transform:none;filter:none;transition:none}

/* Compact visual badge on phones; the transparent touch target remains 44px high. */
@media(max-width:680px){.motion-toggle{height:44px;min-height:44px;bottom:0;left:7px;padding:0 6px;gap:3px;border:0;border-radius:7px;background:transparent;box-shadow:none;isolation:isolate;font-size:9px;line-height:1;white-space:nowrap}.motion-toggle::before{content:"";position:absolute;inset:11px 0;z-index:-1;background:#14110de8;border:1px solid #ffffff35;border-radius:6px}.motion-toggle .icon{width:11px;height:11px}.motion-toggle[aria-pressed=true]{background:transparent;color:#1d1305}.motion-toggle[aria-pressed=true]::before{background:#ff9c00;border-color:#ffb63f}.motion-toggle:focus-visible{outline-offset:-7px}}

@media (max-width: 680px) and (any-pointer: coarse) {
    /* Keep the existing badge appearance; its transparent margins must not steal image taps. */
    .motion-toggle { pointer-events: none; }
    .motion-toggle::before, .motion-toggle > * { pointer-events: auto; }
    .motion-toggle::after { content: ""; position: absolute; inset: 8px 0; pointer-events: auto; }
    .motion-mobile-panel { grid-column: 1 / -1; min-width: 0; width: 100%; flex-basis: 100%; overflow: hidden; border: 1px solid #ad752c; border-radius: 13px; background: #15120e; box-shadow: 0 4px 20px #0005, 0 0 16px #ff990015; }
    .motion-mobile-top, .motion-mobile-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; min-height: 44px; }
    .motion-mobile-bottom { min-height: 52px; }
    .motion-mobile-top > span { color: #ffce88; font-size: 11px; font-weight: 650; }
    .motion-mobile-close { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #655035; border-radius: 8px; background: #2b2116; color: #ffcd88; font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; }
    .motion-mobile-media { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 38svh; background: #090909; }
    .motion-mobile-panel .motion-preview { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
    .motion-mobile-panel.preview-ready .motion-preview { opacity: 1; }
    .motion-mobile-title { min-width: 0; font-size: 12px; line-height: 1.5; color: #f0e8dc; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .motion-mobile-replay { flex: 0 0 auto; min-height: 36px; padding: 7px 11px; border: 1px solid #886130; border-radius: 8px; background: #322311; color: #ffcc83; font: inherit; font-size: 11px; cursor: pointer; touch-action: manipulation; }
    .motion-mobile-replay[hidden] { display: none; }
    .motion-mobile-panel :is(a, button):focus-visible { outline: 2px solid #ffd18c; outline-offset: -3px; }
    .video-card:has(.cover.preview-playing) .cover { outline: 1px solid #e9a140; outline-offset: 2px; }
}