/* =========================================
   SIDE SCREENS (Desktop Only)
   ========================================= */
.feed-side-screen {
    display: none;
    /* Mobile default */
    position: fixed;
    top: 63%;
    /* Lowered to clear stories area */
    width: 336px;
    height: 216px;
    transform: translateY(-50%);
    z-index: 10;
    /* Behind menu overlay but above bg */
    pointer-events: none;
}

@media (min-width: 1200px),
(max-height: 500px) and (orientation: landscape) {

    /* Only show on large screens where there is space OR landscape mobile */
    .feed-side-screen {
        display: block;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .feed-side-screen {
        width: 150px;
        /* Reduced size for mobile landscape */
        height: 100px;
        top: 60%;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }

    .feed-side-screen.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .screen-left {
        left: 2%;
    }

    .screen-right {
        right: 2%;
    }
}


.screen-left {
    left: 8%;
    transform: translateY(-50%) perspective(800px) rotateY(25deg);
}

.screen-right {
    right: 8%;
    transform: translateY(-50%) perspective(800px) rotateY(-25deg);
}

/* Reusing Club Classes but creating local mapping if needed. */
/* Assuming feed.html imports style.css and we add this TO style.css or creating feed-screens.css? 
   Let's append to style.css (feed/style.css). */

/* Import or define Holo Styles if not global. 
   Club styles were in club.css. Feed is style.css. 
   I need to duplicate or port the Holo Styles. */

/* HOLO FRAME BASE */
.holo-screen-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 245, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.2), inset 0 0 30px rgba(0, 245, 255, 0.1);
    background: rgba(0, 20, 30, 0.2);
    backdrop-filter: blur(3px);
    overflow: hidden;
}

/* Corners (Cyan Default) */
.holo-screen-frame::before,
.holo-screen-frame::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--rift-cyan, #00F5FF);
    box-shadow: 0 0 10px var(--rift-cyan, #00F5FF);
    z-index: 20;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.holo-screen-frame::before {
    top: -1px;
    left: -1px;
}

.holo-screen-frame::after {
    bottom: -1px;
    right: -1px;
    transform: rotate(180deg);
}

/* ORANGE VARIANT (Right) */
.frame-orange {
    border-color: rgba(245, 125, 31, 0.4);
    box-shadow: 0 0 20px rgba(245, 125, 31, 0.2), inset 0 0 30px rgba(245, 125, 31, 0.1);
}

.frame-orange::before,
.frame-orange::after {
    background: var(--rift-rust, #F57D1F);
    box-shadow: 0 0 10px var(--rift-rust, #F57D1F);
}

/* DISPLAY CONTENT */
.holo-screen-display {
    position: absolute;
    inset: 4px;
    background: #000;
    overflow: hidden;
    filter: brightness(1.1) contrast(1.2) sepia(0.2) hue-rotate(180deg) saturate(1.8);
    /* Cyan filter default (hue-rotate 180 makes red->cyan approx) */
}

.frame-orange .holo-screen-display {
    filter: brightness(1.1) contrast(1.2) sepia(0.4) hue-rotate(0deg) saturate(2);
    /* Rust/Orange look */
}

.holo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* SCANLINES */
.holo-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0, 245, 255, 0.1) 2px, rgba(0, 245, 255, 0.2) 4px);
    background-size: 100% 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

.scanlines-orange {
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(245, 125, 31, 0.1) 2px, rgba(245, 125, 31, 0.2) 4px);
}

/* HUD */
.holo-hud-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: monospace;
    font-size: 10px;
    color: var(--rift-cyan, #00F5FF);
    border: 1px solid var(--rift-cyan, #00F5FF);
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
}

.hud-orange {
    color: var(--rift-rust, #F57D1F);
    border-color: var(--rift-rust, #F57D1F);
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.blink {
    animation: blink 1s step-start infinite;
}