/**
 * Lane Monitor Component Styles
 */

.lane-monitor {
    position: relative;
    background: black;  /* Match stream block background */
    border: var(--border-width) solid var(--center-color, var(--primary-color));
    border-radius: calc(0.37 * var(--scale-base));  /* 4px = 0.37vh on FHD */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.lane-monitor:hover {
    border-color: var(--center-color, #666);
    box-shadow: 0 0 calc(0.93 * var(--scale-base)) rgba(var(--center-color-rgb, 102, 102, 102), 0.3);  /* 0 0 10px */
}

/* Label */
.lane-monitor-label {
    background: var(--center-color, #666);
    color: #fff;
    padding: calc(0.23 * var(--scale-base)) var(--gap-sm);  /* 0.25rem 0.5rem */
    font-size: var(--text-scale-sm);              /* 12px - 14px responsive */
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Image container */
.lane-monitor-image-container {
    position: relative;
    flex: 1;
    background: #000;
    overflow: hidden;
    /* Ensure 16:9 aspect ratio for scoring monitors - except in carousel */
    aspect-ratio: 16 / 9;
    /* ENHANCED: Performance optimizations for smooth loading */
    contain: layout style paint;
    will-change: contents;
    transform: translateZ(0); /* GPU acceleration */
}

/* In carousel layout, let grid control sizing instead of aspect-ratio */
.layout-carousel .lane-monitor-image-container {
    aspect-ratio: unset; /* Let grid control size for proper 1:3:1 ratio */
}

/* Professional animated loading placeholder */
.lane-monitor-image-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(102, 102, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 102, 102, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    background-size: 300% 300%, 300% 300%, 200% 200%;
    animation: laneLoading 3s ease-in-out infinite;
    z-index: 1;
}

/* Bowling pin icon while loading */
.lane-monitor-image-container::after {
    content: '🎳';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;  /* Much bigger - 64px instead of 24px */
    opacity: 0;
    animation: pinPulseRotate 3s ease-in-out infinite;
    z-index: 2;
}

/* Hide loading animation when image loads */
.lane-monitor-image-container.image-loaded::before,
.lane-monitor-image-container.image-loaded::after {
    opacity: 0;
    animation: none;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

/* Subtle loading animation */
@keyframes laneLoading {
    0%, 100% { 
        background-position: 0% 50%, 100% 50%, 0% 0%;
        opacity: 1;
    }
    50% { 
        background-position: 100% 50%, 0% 50%, 100% 100%;
        opacity: 0.8;
    }
}

/* Bowling pin pulse with rotation */
@keyframes pinPulseRotate {
    0%, 100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotate(-5deg);
    }
    50% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1) rotate(5deg);
    }
}

.lane-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill; /* Fill container completely - matches stream video behavior */
    opacity: 0; /* Start invisible to prevent alt text flash */
    transition: opacity 0.3s ease-out;
    /* ENHANCED: Better image rendering */
    image-rendering: optimizeQuality;
    backface-visibility: hidden;
    z-index: 3; /* Above loading animation */
    /* Force GPU acceleration for smooth transitions */
    will-change: opacity;
    transform: translateZ(0);
}

/* Loaded state with smooth fade-in */
.lane-image.loaded {
    opacity: 1;
}


/* Double buffering */
.lane-image.buffer-0,
.lane-image.buffer-1 {
    position: absolute;
}


/* Responsive sizing - Grid layouts only */
.layout-grid .lane-monitor {
    min-width: calc(11.11 * var(--scale-base));   /* 120px = 11.11vh on FHD */
    min-height: calc(7.41 * var(--scale-base));   /* 80px = 7.41vh on FHD */
}

/* Overlay mode specific - flexible sizing for hybrid layouts */
.overlay-monitor .lane-monitor {
    width: 100%;
    height: 100%;
    min-width: 80px;   /* Flexible minimum for overlay contexts */
    min-height: 45px;  /* 16:9 ratio minimum */
    border-radius: calc(0.37 * var(--scale-base));  /* 4px = 0.37vh on FHD */
    box-shadow: 0 calc(0.19 * var(--scale-base)) calc(0.74 * var(--scale-base)) rgba(0, 0, 0, 0.3);  /* 0 2px 8px */
}

.overlay-monitor .lane-monitor-label {
    display: none;  /* No labels in overlay monitors - matches working prototype */
}

.overlay-monitor .lane-monitor-image-container {
    height: 100%;  /* Full height when label is hidden */
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .lane-monitor {
        background: #0a0a0a;
    }
}


/* Loading state spinner */
.lane-monitor-image-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(2.78 * var(--scale-base));   /* 30px = 2.78vh on FHD */
    height: calc(2.78 * var(--scale-base));
    border: var(--border-width) solid #666;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show spinner when loading */
.lane-monitor.loading .lane-monitor-image-container::before {
    opacity: 1;
}

/* Smooth transitions for images */
.lane-monitor-image-container .lane-image {
    transition: opacity 0.3s ease;
}

/* spin animation defined in app.css */


/* Error state */
.lane-monitor.error .lane-monitor-image-container::after {
    content: '⚠';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(1.85 * var(--scale-base));  /* 2rem ≈ 20px = 1.85vh on FHD */
    color: #dc3545;
}

/* Compact mode for grids */
.layout-grid-3x3 .lane-monitor-label,
.layout-grid-4x4 .lane-monitor-label {
    font-size: var(--text-scale-sm);  /* 12px - 14px responsive */
    padding: calc(0.14 * var(--scale-base)) calc(0.28 * var(--scale-base));  /* 0.15rem 0.3rem */
}


/* ==========================================================================
   Accessibility and Performance
   ========================================================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .lane-monitor-image-container .lane-image {
        transition: opacity 0.2s ease;
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
        background: #000;
        border: 2px solid #fff;
    }
    
    .lane-monitor-image-container .lane-image-error {
        background: #000;
        border: 2px solid #dc3545;
    }
}