/* Match the main site's player shell while retaining HTML5 LightBox. */
#html5-lightbox-overlay {
 background-color: rgba(0,0,0,.88) !important;
 opacity: 1 !important;
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
}
#html5-lightbox-box, #html5-elem-box { overflow: visible !important; }
#html5-elem-data-box {
 position: absolute !important;
 top: 100%; left: 0; z-index: 5;
 width: 100% !important;
 height: auto !important;
 box-sizing: border-box;
 padding: 0 !important;
 background: transparent !important;
}
#html5-text {
 margin: 10px 0 0 !important;
 color: #fff !important; font-size: 14px !important; text-align: center !important;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 20px;
 overflow-wrap: anywhere;
}
#html5-close {
 top: 0 !important; right: 0 !important;
 margin-top: -10px !important; margin-right: -10px !important;
 z-index: 10;
 width: 20px; height: 20px;
 border-radius: 50%; background: #fff; color: #000;
 box-shadow: 0 0 10px rgba(0,0,0,.3);
}
#html5-close img, #html5-next img, #html5-prev img { display: none; }
#html5-close::after {
 content: '×'; display: block;
 font-size: 16px; line-height: 20px; text-align: center;
}
#html5-next, #html5-prev {
 width: 20px; height: 20px;
 margin-top: -10px !important;
 border-radius: 50%; background: rgba(0,0,0,.35); color: rgba(255,255,255,.85);
 opacity: 0; transition: opacity .2s ease .35s;
}
#html5-next { right: 20px !important; }
#html5-prev { left: 20px !important; }
/* Explicit geometry keeps both arrows short and centered within the circle. */
#html5-next::after, #html5-prev::after {
 content: '';
 position: absolute;
 top: 50%; left: 50%;
 width: 12px; height: 12px;
 transform: translate(-50%, -50%);
 background: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10M7 2l4 4-4 4' fill='none' stroke='%23ffffff' stroke-opacity='.85' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#html5-prev::after {
 transform: translate(-50%, -50%) rotate(180deg);
}
#html5-elem-wrap:hover #html5-next, #html5-elem-wrap:hover #html5-prev {
 opacity: 1; transition-delay: 0s;
}
#html5-next:hover, #html5-prev:hover { background: rgba(255,255,255,.3); }
@media (hover: none) {
 #html5-next, #html5-prev { opacity: 1; }
}