td.cam.has-stream {
    background: #b6ffd1;
    /* brighter green for active cam */
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 116, 217, 0.10), 0 0 0 2px #7be495;
    font-weight: bold;
    color: #222;
    z-index: 1;
}

td.cam.inactive-cam {
    opacity: 0.4;
    filter: grayscale(60%);
    cursor: default;
    color: #888 !important;
    font-weight: normal;
}

.inactive-cam {
    display: none;
}

/* Make the 0.25X speed button look clickable */
#speed025 {
    font-size: 20px;
    border: 0px;
    font-weight: 700;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Make the 1.0X speed button look clickable */
#speed100 {
    background: #f0f0f0;
    color: #333;
    border: 0px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 20px;
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Active speed button style */
.speed-btn.active {
    background: #0074d9 !important;
    color: #fff !important;
    border-color: #0074d9 !important;
    box-shadow: 0 2px 8px rgba(0, 116, 217, 0.15);
}

#speed050,
#speed150,
#speed200 {
    background: #f0f0f0;
    color: #333;
    border: 0px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 20px;
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#speed025:hover,
#speed025:focus,
#speed050:hover,
#speed050:focus,
#speed100:hover,
#speed100:focus,
#speed150:hover,
#speed150:focus,
#speed200:hover,
#speed200:focus {
    background: #d1eaff;
    color: #0074d9;
    border-color: #0074d9;
    box-shadow: 0 2px 8px rgba(0, 116, 217, 0.10);
    border: 1px solid #0074d9;
}

/* Live button clickable style */
#liveBtn {
    background: #fffbe6;
    color: #d35400;
    border: 1px solid #f7ca77;
    border: 0px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(211, 84, 0, 0.04);
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 100%;
    height: 100%;
}

#liveBtn:hover,
#liveBtn:focus {
    background: #ffe0b2;
    color: #e67e22;
    border-color: #e67e22;
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.10);
}

/* VAR group buttons clickable style */
#varBtn,
#frameBack5,
#frameBack1,
#frameNext1,
#frameNext5 {
    background: #f0f0f0;
    color: #333;
    border: 0px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 20px;
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 100%;
    height: 100%;
}

#varBtn:hover,
#frameBack5:hover,
#frameBack1:hover,
#frameNext1:hover,
#frameNext5:hover,
#varBtn:focus,
#frameBack5:focus,
#frameBack1:focus,
#frameNext1:focus,
#frameNext5:focus {
    background: #ffe0b2;
    color: #e67e22;
    border-color: #e67e22;
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.10);
}

/* Disable hover/focus transitions on coarse pointers (touch devices) to prevent blink */
@media (pointer: coarse) {
    #varBtn,
    #frameBack5,
    #frameBack1,
    #frameNext1,
    #frameNext5 {
        transition: none !important;
    }

    #varBtn:hover,
    #frameBack5:hover,
    #frameBack1:hover,
    #frameNext1:hover,
    #frameNext5:hover,
    #varBtn:focus,
    #frameBack5:focus,
    #frameBack1:focus,
    #frameNext1:focus,
    #frameNext5:focus {
        background: inherit;
        color: inherit;
        border-color: inherit;
        box-shadow: none;
    }
}

#varBtn.active {
    background: #e67e22 !important;
    color: #fff !important;
    border-color: #e67e22 !important;
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.15);
}

/* Keep a disabled look only when class is used (mobile may not use it at all) */
#frameBack5.disabled,
#frameBack1.disabled,
#frameNext1.disabled,
#frameNext5.disabled {
    background: #eee !important;
    color: #bbb !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Timeline buttons clickable style */
td.timeline.timeline-btn {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(21, 101, 192, 0.04);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

td.timeline.timeline-btn:hover,
td.timeline.timeline-btn:focus {
    background: #bbdefb;
    color: #0d47a1;
    border-color: #0d47a1;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.10);
}

#mainHlsVideo::-webkit-media-controls {
    display: none !important;
}

#mainHlsVideo::-webkit-media-controls-enclosure {
    display: none !important;
}

#mainHlsVideo::-webkit-media-controls-panel {
    display: none !important;
}

#mainHlsVideo {
    outline: none;
}

#mainHlsVideo:focus {
    outline: none;
}

.selected-timeline-btn {
    background: #222 !important;
    color: #fff !important;
    border: 2px solid #00ff00 !important;
    font-weight: bold;
}

/* Video container optimizations to prevent blinking/flickering */
#videoContainer {
    /* Force GPU acceleration for smooth zooming */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;

    /* Prevent layout shifts during zoom operations */
    contain: layout style paint;

    /* Smooth rendering optimizations */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

/* Individual video elements optimizations */
#videoContainer video {
    /* Force hardware acceleration for all video elements */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;

    /* Prevent flickering during camera switches */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* Ensure smooth transitions */
    transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
}

/* Desktop video container specific optimizations */
.desktop-video {
    /* Optimize for touch interactions and zooming */
    contain: layout style paint;
    isolation: isolate;

    /* Prevent full page repaints during video zoom */
    will-change: transform;
    transform: translateZ(0);
}

/* Prevent page-level flickering during zoom operations */
body {
    /* Force compositing layer for main page */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    /* Prevent unnecessary repaints */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}