.video-container {position: relative;width: 100%;margin: 20px auto;background: #000;overflow: hidden;border-radius: 0px;cursor: pointer; transition: cursor 0.3s ease;}
.video-container.cursor-hidden {cursor: none !important;}
body:fullscreen, body:-webkit-full-screen, body:-moz-full-screen,body:-ms-fullscreen {cursor: default !important;overflow: hidden;}
body:fullscreen.cursor-hidden, body:-webkit-full-screen.cursor-hidden, body:-moz-full-screen.cursor-hidden,body:-ms-fullscreen.cursor-hidden {cursor: none !important;}
.video-container.fullscreen {cursor: inherit !important;}
.video-container.fullscreen,.video-container.fullscreen video,.video-container.fullscreen .custom-controls,.video-container.fullscreen .progress-container,.video-container.fullscreen button,.video-container.fullscreen input,.video-container.fullscreen .speed-container,.video-container.fullscreen .volume-container {cursor: inherit !important; }
:fullscreen *:-webkit-full-screen *,
:fullscreen *:-moz-full-screen *,
:fullscreen *:-ms-fullscreen * {cursor: inherit !important;}
.video-wrapper {position: relative;width: 100%;padding-top: 56.25%;overflow: hidden;}
.video-container video {position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;object-fit: contain;transform: translate(-50%, -50%);}
.custom-controls {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0,0,0,0.8));padding: 10px;display: flex;align-items: center;gap: 10px;color: white;transform: translateY(0);opacity: 1;z-index: 10;transition: opacity 0.8s ease 2s, transform 0.3s ease;}
.video-container.playing:not(:hover):not(.touch-active) .custom-controls {opacity: 0;}
.video-container.fullscreen .custom-controls {position: fixed;bottom: 20px;left: 20px;right: 20px;z-index: 9999;transition: opacity 0.8s ease 2s, transform 0.3s ease;}
.controls-wrapper {width: 100%;display: flex;align-items: center;gap: 8px;}
.progress-container {flex: 1;height: 5px;background: #444;cursor: pointer;position: relative;}
.buffer-bar, .progress-bar {position: absolute;height: 100%;top: 0;left: 0;}
.buffer-bar {background: #666;width: 0;}
.progress-bar {background: #f00;width: 0;}
.volume-container {display: flex;align-items: center;gap: 5px;width: 150px;}
.video-container button {background: none;border: none;color: white;cursor: pointer;padding: 5px;}
.video-container input[type="range"] {height: 5px;background: #444;-webkit-appearance: none;cursor: pointer;}
.video-container input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 12px;height: 12px;background: #fff;border-radius: 50%;}
.time-display {color: white;font-family: Arial, sans-serif;font-size: 12px;min-width: 80px;text-align: center;margin-left: 10px;}
.volume-percent {color: white;font-family: Arial, sans-serif;font-size: 12px;min-width: 40px;margin-left: 5px;}
.volume-slider {max-width: 50px;step: 0.05;}
.play-btn, .fullscreen-btn, .mute-btn {width: 30px;font-size: 14px;color: aqua;}
.play-btn, .fullscreen-btn, .volume-slider, .mute-btn:focus {outline: 0px;outline-offset: 0px;}
@media (max-width: 768px) {
.custom-controls {padding: 8px;gap: 5px;}
.volume-container {width: 120px;}
}
.touch-feedback {position: absolute;z-index: 9999;background: rgba(0,0,0,0.7);color: white;padding: 8px 16px;border-radius: 12px;font-size: 16px;pointer-events: none;white-space: nowrap;top: 20px;left: 50%;transform: translateX(-50%);transition: all 0.3s ease-out;box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.center-play-indicator {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 50px;width: 90px;height: 90px;color: white;opacity: 0.8;display: none;pointer-events: none;z-index: 2;transition: opacity 1s;background: rgba(0,0,0,0.7);border-radius: 50%;text-align: center;line-height: 90px;padding: 20px;box-sizing: border-box;}
.video-container.paused .center-play-indicator {display: flex;align-items: center;justify-content: center;}
@media (max-width: 768px) {
.center-play-indicator {font-size: 40px;width: 70px;height: 70px;line-height: 70px;}
}
.speed-container {position: relative;display: inline-block;font-size: 12px;}
.speed-btn {padding: 4px 8px;ursor: pointer;min-width: 40px;text-align: left;transition: all 0.2s;}
.speed-btn:hover {background: rgba(0,0,0,1);}
.speed-options {display: none;position: absolute;bottom: 100%;left: 0;background: rgba(0,0,0,0.3);min-width: 100%;z-index: 999;}
.speed-option {padding: 6px 12px;cursor: pointer;transition: background 0.2s;}
.speed-option:hover {background: rgba(0,0,0,1);}
.speed-option.selected {background: rgba(0,0,0,0.5);font-weight: bold;}
.speed-btn .arrow svg {width: 16px;height: 16px;vertical-align: middle;}