/* Monster desktop list media v1. Layout and playback presentation belong to the template. */
.monster-list-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #e8edf2; border-radius: 10px; isolation: isolate; text-align: left; }
.monster-list-media--row { width: 384px; max-width: 100%; margin: 14px 0; }
.monster-list-media [hidden] { display: none !important; }
.monster-list-media .monster-list-media__cover { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: #e8edf2; color: #576373; }
.monster-list-media .monster-list-media__poster { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transform: none; }
.monster-list-media .monster-list-media__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #e4ebf1, #f3f6f8); color: #7a8795; font-size: 13px; letter-spacing: .16em; }
.monster-list-media .monster-list-media__play { display: none; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; justify-content: center; gap: 8px; min-width: 90px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; background: rgba(20,30,42,.85); color: #fff; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.monster-list-media-ready .monster-list-media .monster-list-media__play { display: flex; }
.monster-list-media .monster-list-media__play:hover { background: #182d44; }
.monster-list-media .monster-list-media__play:disabled { cursor: wait; opacity: .8; }
.monster-list-media .monster-list-media__triangle { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.monster-list-media .monster-list-media__stage { position: absolute; z-index: 2; inset: 0; background: #101214; }
.monster-list-media .monster-list-media__stage video,
.monster-list-media .monster-list-media__stage iframe { display: block; width: 100%; height: 100%; margin: 0; border: 0; object-fit: contain; }
.monster-list-media .monster-list-media__close { position: absolute; z-index: 4; right: 8px; top: 8px; min-width: 48px; min-height: 32px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.65); border-radius: 6px; background: rgba(16,22,29,.9); color: #fff; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
.monster-list-media .monster-list-media__status { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; margin: 0; padding: 9px 12px; background: rgba(16,22,29,.92); color: #fff; font-size: 12px; line-height: 1.6; }
.monster-list-media .monster-list-media__status a { display: inline; width: auto; height: auto; color: #fff; background: transparent; text-decoration: underline; }
.monster-list-media button:focus-visible,
.monster-list-media a:focus-visible { outline: 3px solid #397ed5; outline-offset: -3px; }
.waterfall .pic .monster-list-media { height: 140px; aspect-ratio: auto; }
.waterfall .pic .monster-list-media .monster-list-media__cover { height: 140px; }
.waterfall .pic .monster-list-media .monster-list-media__poster { min-height: 0; }
.waterfalls .pic .monster-list-media .monster-list-media__poster:hover { transform: none; }