@font-face {
    font-family: 'Seravek';
    src: local('Seravek'), local('Seravek-Basic');
    /* Fallbacks just in case */
}

body {
    background-color: #515850; /* Darker, dusty olive-green gray matching the outer casing */
    color: #111111;
    font-family: 'Seravek', 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    max-width: 100vw;
}

.playing-gif {
    position: relative;
    z-index: 10;
}

#container {
    width: 800px; /* Classic Web 1.0 fixed width */
    max-width: 100%;
    overflow-x: hidden;
    margin-top: 50px;
    margin-bottom: 50px;
}

header {
    margin-bottom: 40px;
    font-variant: small-caps;
}

h1 {
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    margin: 5px 0;
    letter-spacing: 2px;
}

h3 {
    font-weight: normal;
    font-style: italic;
    margin: 0;
    font-size: 1.2em;
}

.left-header {
    text-align: left;
    margin-left: 10px;
}

.right-header {
    text-align: right;
    margin-right: 10px;
}

main {
    text-align: center;
}

/* Control Panel Container */
.control-panel-container {
    position: relative;
    display: block;
    margin-bottom: 50px;
    /* Adding perspective context for child elements */
    perspective: 800px; 
}

.control-panel-img {
    display: block;
    max-width: 100%;
    border: 2px solid #222; /* Slightly rough border */
}

/* Overlay Links Style */
.overlay-link {
    --base-color: #45423d;
    --base-blend: multiply;
    --base-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4), -1px -1px 0px rgba(0, 0, 0, 0.3);
    --base-line-color: rgba(0, 0, 0, 0.7); /* Dark enough to stay visible during multiply */
    
    position: absolute;
    color: var(--base-color);
    mix-blend-mode: var(--base-blend);
    text-shadow: var(--base-shadow);
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Seravek', sans-serif;
    transform: rotateZ(1deg) skewY(-0.5deg);
    transition: opacity 0.2s, color 0.2s;
    max-width: 130px; /* Forces long text to wrap */
    line-height: 1.4;
}

/* Invisible expanded touch target for mobile */
.overlay-link::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    z-index: 1; /* Place above the text but inside the link */
}

/* Flicker Animations */
@keyframes flicker-v1 { /* 2 stutters, short hold */
    0%, 95.8%, 96.4%, 97.2%, 100% { color: var(--base-color); mix-blend-mode: var(--base-blend); text-shadow: var(--base-shadow); }
    96%, 96.8%, 97.5%, 99.5% { color: #ffffff; mix-blend-mode: normal; text-shadow: 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); }
}
@keyframes flicker-v2 { /* 4 stutters, long hold */
    0%, 89.8%, 90.4%, 91.2%, 92%, 92.8%, 99.2%, 100% { color: var(--base-color); mix-blend-mode: var(--base-blend); text-shadow: var(--base-shadow); }
    90%, 90.8%, 91.6%, 92.4%, 93.2%, 99% { color: #ffffff; mix-blend-mode: normal; text-shadow: 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); }
}
@keyframes flicker-v3 { /* 3 stutters, medium hold */
    0%, 92.8%, 93.4%, 94.2%, 95%, 99.2%, 100% { color: var(--base-color); mix-blend-mode: var(--base-blend); text-shadow: var(--base-shadow); }
    93%, 93.8%, 94.6%, 95.4%, 99% { color: #ffffff; mix-blend-mode: normal; text-shadow: 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); }
}
@keyframes flicker-v4 { /* 6 erratic stutters, random hold */
    0%, 93.8%, 94.2%, 94.7%, 95.4%, 96%, 96.6%, 97.2%, 99.2%, 100% { color: var(--base-color); mix-blend-mode: var(--base-blend); text-shadow: var(--base-shadow); }
    94%, 94.5%, 95%, 95.8%, 96.3%, 97%, 97.5%, 99% { color: #ffffff; mix-blend-mode: normal; text-shadow: 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); }
}

.overlay-link:hover {
    color: #ffffff !important;
    mix-blend-mode: normal !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8) !important;
    animation: none !important; /* Stop the flicker while interacting */
}

/* Schematic Lines */
.overlay-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    height: 1px;
    background-color: var(--base-line-color);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.overlay-link:hover::after {
    background-color: #ffffff;
    box-shadow: 0 0 4px #ffffff, 0 0 8px #ffffff;
}

/* Custom Schematic Underlines for Each Link */
.link-1::after { left: -10%; width: 130%; } 
.link-2::after { left: -30%; width: 90%; }
.link-3::after { left: 20%; width: 60%; }
.link-4::after { left: 0%; width: 160%; }
.link-5::after { left: 10%; width: 45%; }

.link-6::after { right: -20%; width: 150%; }
.link-7::after { right: 30%; width: 40%; }
.link-8::after { right: -15%; width: 130%; }
.link-rss::after { right: 10%; width: 140%; }

/* Staggered Flicker Delays and Randomized Durations */
.link-1 { animation: flicker-v1 13s infinite -1.2s; }
.link-2 { animation: flicker-v2 17s infinite -8.4s; }
.link-3 { animation: flicker-v3 14s infinite -3.5s; }
.link-4 { animation: flicker-v4 19s infinite -11.2s; }
.link-5 { animation: flicker-v2 15s infinite -2.9s; }
.link-6 { animation: flicker-v1 12.5s infinite -13.7s; }
.link-7 { animation: flicker-v4 16s infinite -5.8s; }
.link-8 { animation: flicker-v3 18s infinite -10.1s; }
.link-rss { animation: flicker-v1 14.5s infinite -7.3s; }

/* 
   Coordinate Positioning for the links.
   Brought inwards to avoid breaching the perimeter.
   Asymmetric vertical spacing and max-width wrapping avoids the hardware.
*/
.link-1 { top: 12%; left: 43%; transform-origin: center left; }
.link-2 { top: calc(28% + 20px); left: 38%; transform-origin: center left; }
.link-3 { top: calc(40% + 15px); left: 35%; transform-origin: center left; white-space: nowrap; max-width: none; }
.link-4 { top: 72%; left: 37%; transform-origin: center left; }
.link-5 { top: 86%; left: 42%; transform-origin: center left; }

.link-6 { top: 24%; right: 18%; text-align: right; transform-origin: center right; }
.link-7 { top: 32%; right: 19%; text-align: right; transform-origin: center right; }
.link-8 { top: 68%; right: 17%; text-align: right; transform-origin: center right; }
.link-rss { top: 88%; right: 20%; text-align: right; transform-origin: center right; font-size: 9px; }

/* 
   ============================
   Auction Page Specifics
   ============================
*/
/* Keep auction text solid and highly legible */
.auction-map .overlay-link {
    --base-color: #ffffff;
    --base-blend: normal;
    --base-shadow: -1px -1px 0px rgba(0,0,0,0.8), 1px 1px 0px rgba(0,0,0,0.8), 1px 1px 2px rgba(0,0,0,0.9);
    --base-line-color: rgba(255, 255, 255, 0.6);
    
    color: var(--base-color);
    mix-blend-mode: var(--base-blend);
    text-shadow: var(--base-shadow);
    opacity: 0.95;
}

.auction-map .overlay-link:hover {
    color: #cccccc;
    opacity: 1;
}

.auction-map .overlay-link::after {
    background-color: var(--base-line-color);
}

.episode-link {
    max-width: 800px; /* Override the 130px default so episode titles don't wrap tightly */
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* Styling for the warning text */
.auction-warning {
    --base-color: #2b332c; /* Dark gray-green */
    --base-blend: normal;
    --base-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), -1px -1px 0px rgba(0, 0, 0, 0.5); /* Etched shadow effect */
    
    margin-top: 50px;
    font-family: 'Seravek Light', 'Seravek ExtraLight', 'Seravek', sans-serif;
    font-weight: 300;
    font-size: min(1.1em, 3.8vw);
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #3b453d; /* Dark green from the control panel */
    border: 2px solid #000000;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    max-width: 96%;
    margin-left: auto;
    margin-right: auto;
    
    color: var(--base-color);
    mix-blend-mode: var(--base-blend);
    text-shadow: var(--base-shadow);
    animation: flicker-v4 16.5s infinite 2.5s;
}

.light-up-yellow {
    animation: none !important;
    mix-blend-mode: normal !important;
    color: #FFCC00 !important;
    text-shadow: 0 0 10px #FFCC00, 0 0 20px #FFCC00 !important;
    transition: all 0.1s ease;
}

.contact-email-flicker {
    --base-color: #414840;
    --base-blend: normal;
    --base-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), -1px -1px 0px rgba(0, 0, 0, 0.6);
    
    animation: flicker-v1 8s infinite !important;
}

/* Immediate flicker on toggle */
.trigger-flicker {
    --base-color: #414840;
    --base-blend: normal;
    --base-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), -1px -1px 0px rgba(0, 0, 0, 0.6);
    animation: instantFlicker 0.4s forwards !important;
}

@keyframes instantFlicker {
    0% { color: var(--base-color); text-shadow: var(--base-shadow); }
    20% { color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff; }
    40% { color: var(--base-color); text-shadow: var(--base-shadow); }
    60% { color: #fff; text-shadow: 0 0 10px #fff; }
    80% { color: #888; text-shadow: 0 0 5px #fff; }
    100% { color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff; mix-blend-mode: normal; }
}


/* 
   ============================
   Auction Page Specifics
   ============================
*/
.auction-1 { top: 60%; left: 10%; transform-origin: center left; }
.auction-2 { top: calc(40% + 20px); left: 25%; transform-origin: center left; }
.auction-3 { top: 32%; left: 45%; transform-origin: center left; }
.auction-4 { top: 65%; right: 20%; text-align: right; transform-origin: center right; }
.auction-5 { top: calc(35% + 20px); right: 5%; text-align: right; transform-origin: center right; }
.auction-6 { top: 80%; right: calc(35% - 20px); text-align: right; transform-origin: center right; }
.auction-7 { top: 75%; left: calc(35% - 40px); transform-origin: center left; }
.auction-8 { top: 15%; left: 15%; transform-origin: center left; }

/* 
   ============================
   Moviola Screen Layout
   ============================
*/
.moviola-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto;
}

.control-panel-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
}
.moviola-container {
    position: relative;
    width: 100%;
    background-color: #000;
    isolation: isolate; /* Force stacking context so mix-blend-mode works across all browsers */
    border: 2px solid #222;
}

.moviola-image-base {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1; /* Bottom Layer */
}

.moviola-screen {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 5; /* Middle Layer (Sandwiched) */
    clip-path: polygon(12.65% 7.14%, 78.65% 1.44%, 80.95% 74.64%, 15.15% 80.04%);
}

.moviola-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10; /* Top Layer */
    mix-blend-mode: screen; 
    pointer-events: none;
    clip-path: polygon(12.65% 7.14%, 78.65% 1.44%, 80.95% 74.64%, 15.15% 80.04%); /* Prevent bezel doubling */
    /* Mask out the center of the screen to remove the hot highlight, keeping the edges dusty */
    -webkit-mask-image: radial-gradient(ellipse 35% 40% at 46% 40%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,1) 100%);
    mask-image: radial-gradient(ellipse 35% 40% at 46% 40%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,1) 100%);
}

.moviola-video {
    position: absolute;
    /* Physically mold the video to the screen's skewed shape to prevent cropping */
    top: 7.14%;
    left: 12.65%;
    width: 66%;
    height: 73.5%;
    object-fit: fill; 
    filter: contrast(1.2) brightness(1.1) sepia(0.1); 
    transform-origin: top left;
    transform: rotate(-4.9deg) skewX(-2.9deg) scale(1.02); /* Skew and scale slightly to bleed past clip-path */
}

/* Force native aspect ratio in fullscreen to prevent stretching/squashing */
.moviola-video:-webkit-full-screen {
    object-fit: contain !important;
    transform: none !important;
}
.moviola-video:fullscreen {
    object-fit: contain !important;
    transform: none !important;
}

/* Control Panel Grid below the TV */
.control-panel-block {
    background-color: transparent; 
    border: none;
    margin-top: 30px;
    padding: 20px 0;
    display: flex;
    flex-direction: column; /* Vertical list */
    justify-content: center;
    align-items: center; /* Center them under the monitor */
    gap: 12px;
    z-index: 5;
    position: relative;
    box-sizing: border-box;
}

.playlist-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.control-panel-block .episode-btn {
    display: inline-block;
    padding: 2px 0;
    background-color: transparent;
    border: none;
    text-decoration: none;
    font-family: 'Seravek Light', 'Seravek ExtraLight', sans-serif;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    cursor: pointer;
    
    /* Etched Text Styling matching .auction-warning */
    color: #2b332c;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), -1px -1px 0px rgba(0, 0, 0, 0.5);
}

.control-panel-block .episode-btn:hover,
.control-panel-block .episode-btn.active {
    background-color: transparent;
    color: #FFCC00; 
    text-shadow: 0 0 10px #FFCC00, 0 0 20px #FFCC00;
    border: none;
}
.auction-home { top: 5%; left: 5%; transform-origin: center left; }

/* Schematic lines for auction links */
.auction-1::after { left: 10%; width: 150%; }
.auction-2::after { left: -20%; width: 80%; }
.auction-3::after { left: 0%; width: 120%; }
.auction-4::after { right: 20%; width: 100%; }
.auction-5::after { right: -10%; width: 140%; }
.auction-6::after { right: 10%; width: 80%; }
.auction-7::after { left: -10%; width: 110%; }
.auction-8::after { left: 30%; width: 60%; }
.auction-home::after { left: -5%; width: 120%; }

/* --- Potato Readers Page --- */
.potato-header-container {
    margin-bottom: 40px;
    color: white;
}

.potato-left-header {
    text-align: left;
    margin-left: 10px;
    font-variant: small-caps;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    font-size: 1.2em;
}

.potato-main-header {
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    margin: 5px 0;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: 'Seravek', sans-serif;
}

.potato-sub-header {
    text-align: right;
    font-size: 1.2rem;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 3px;
    color: var(--base-line-color);
    margin: 10px 10px 0 0;
    font-weight: normal;
    font-family: 'Seravek', sans-serif;
}

/* Potato Readers Image Map Links Layout */
.pr-link-1 { top: 23.6%; left: 30.3%; }
.pr-link-2 { top: 47.8%; left: 27.8%; }
.pr-link-3 { top: 62.2%; left: 61.3%; }
.pr-link-6 { top: 28.9%; left: 70.6%; }

/* Schematic lines for Potato Readers */
.pr-link-1::after { left: -15%; width: 120%; }
.pr-link-2::after { left: 5%; width: 85%; }
.pr-link-3::after { left: -10%; width: 60%; }
.pr-link-6::after { left: 0%; width: 150%; }

/* Schematic lines for Field Recordings */
.fr-link-1::after { left: 15%; width: 135%; }
.fr-link-2::after { left: -5%; width: 115%; }
.fr-link-3::after { left: -20%; width: 140%; }

.pr-home { top: 85%; left: 89.9%; }
.pr-home::after { left: -5%; width: 120%; }



/* Yellow glow override for the etched text */
.etched-link.yellow-hover:hover {
    color: #FFCC00 !important;
    text-shadow: 0 0 10px #FFCC00, 0 0 20px #FFCC00 !important;
}

.etched-link.yellow-hover:hover::after {
    background-color: #FFCC00 !important;
    box-shadow: 0 0 4px #FFCC00, 0 0 8px #FFCC00 !important;
}

.potato-lower-header {
    text-align: right;
    margin-right: 10px;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    font-size: 1.2em;
}

.etched-text {
    margin-top: 40px;
    font-size: 1.1em;
    color: #414840; /* Slightly darker than the background */
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), -1px -1px 0px rgba(0, 0, 0, 0.6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.5px;
}

.etched-link {
    font-size: 1.1em !important;
    color: #414840 !important;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), -1px -1px 0px rgba(0, 0, 0, 0.6) !important;
    letter-spacing: 0.5px !important;
    font-family: 'Seravek', sans-serif !important;
    font-weight: normal !important;
    text-decoration: none;
}

.etched-link::after {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.etched-link:hover::after {
    background-color: #ffffff !important;
}

/* S8 Video Player bounds and SVG mask */
.s8-video-wrapper {
    position: absolute;
    top: 27%;
    left: 32%;
    width: 36.5%;
    height: 40%;
    z-index: 5;
    
    /* Perfect feathered mask applied via Data URI to bypass iOS bugs */
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpolygon points='2.5,6 98.6,3.37 97.3,99 3.2,93.8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpolygon points='2.5,6 98.6,3.37 97.3,99 3.2,93.8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    
    /* Outward glow */
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.4));
    
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.s8-video-active {
    opacity: 1;
}

#s8-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#s8-player:-webkit-full-screen {
    object-fit: contain !important;
}
#s8-player:fullscreen {
    object-fit: contain !important;
}

.s8-btn-on { top: 44.0%; left: 17.94%; }
.s8-btn-off { top: 53.85%; left: 17.94%; }

/* Universal Corner Navigation Buttons */
.nav-btn-back { position: absolute; top: auto; bottom: -30px; left: 0; }
.nav-btn-home { position: absolute; top: -30px; left: 0; }

/* Schematic lines for Navigation buttons */
.s8-btn-on::after { left: 45%; width: 40%; }
.s8-btn-off::after { left: 15%; width: 35%; }
.nav-btn-back::after { left: 65%; width: 25%; }
.nav-btn-home::after { left: -5%; width: 30%; }

.nav-btn-fs { position: absolute; top: auto; bottom: -30px; left: auto; right: 0; }
.nav-btn-fs::after {
    left: auto;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 36px;
    background-color: transparent !important;
    border-right: 1px solid var(--base-line-color);
    border-bottom: 1px solid var(--base-line-color);
}
.nav-btn-fs:hover::after {
    background-color: transparent !important;
    border-color: #ffffff;
    box-shadow: 1px 1px 4px #ffffff, inset -1px -1px 4px #ffffff;
}

/* 35mm Thumbnail Marquee */
.marquee-container {
    position: relative;
    width: 100%;
    height: clamp(60px, 17.5vw, 140px); /* Scales proportionally on mobile */
    overflow: hidden;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #222;
    z-index: 20;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-top-container {
    border-bottom: none; /* Flushes nicely with the top of the image */
}

.marquee-bottom-container {
    border-top: none; /* Flushes nicely with the bottom of the image */
}

.marquee-content {
    display: inline-flex;
    height: 100%;
    will-change: transform;
    transform: translateZ(0); /* Force GPU compositing layer */
    backface-visibility: hidden;
}

/* 
  Top marquee has 18 images. Bottom has 6.
  To move at the exact same physical speed: Top takes 30s, Bottom takes 10s.
  At 12 fps: 30s * 12fps = 360 frames. 10s * 12fps = 120 frames.
*/
.marquee-top {
    animation: filmScroll 30s steps(360, end) infinite;
}

.marquee-bottom {
    animation: filmScroll 10s steps(120, end) infinite;
}

.marquee-content img {
    height: 100%;
    margin-right: 15px;
    border: 1px solid #111;
}

@keyframes filmScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 35mm Hotspots */
.hotspot {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10;
}

/* Schematic Lines for 35mm */
.schematic-wrapper {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 5;
}

.schematic-line-v {
    position: absolute;
    bottom: 0;
    left: -0.5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.9);
    transition: all 0.2s ease;
}

/* Hover Subtle Greenish Glow */
#btn-left:hover ~ #schematic-left .schematic-line-v,
#btn-center:hover ~ #schematic-center .schematic-line-v,
#btn-right:hover ~ #schematic-right .schematic-line-v {
    background: rgba(200, 255, 200, 0.6);
    box-shadow: 0 0 3px rgba(150, 255, 150, 0.4), 1px 1px 0px rgba(0,0,0,0.9);
}

.schematic-wrapper.random-glow .schematic-line-v {
    background: rgba(200, 255, 200, 0.6);
    box-shadow: 0 0 3px rgba(150, 255, 150, 0.4), 1px 1px 0px rgba(0,0,0,0.9);
    transition: none !important; /* Forces sharp flickers */
}

/* Lightbox Gallery Overlay */
.gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gallery-content {
    max-width: 90%;
    max-height: 80vh;
    border: 2px solid #555;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


.gallery-close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.gallery-close-btn:hover {
    color: #FFCC00;
}

/* Flicker Out Effect for Center Button Random Image */
.flicker-out {
    animation: flickerOut 0.5s forwards;
}

@keyframes flickerOut {
    0% { opacity: 1; filter: brightness(1) contrast(1); }
    10% { opacity: 0; }
    20% { opacity: 1; filter: brightness(2) contrast(1.5); }
    30% { opacity: 0.2; }
    40% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0; }
    60% { opacity: 0.8; }
    70% { opacity: 0; }
    80% { opacity: 0.4; }
    90% { opacity: 0.1; }
    100% { opacity: 0; display: none; }
}

/* Flicker In Effect */
.flicker-in {
    animation: flickerIn 0.5s forwards;
}

@keyframes flickerIn {
    0% { opacity: 0; }
    10% { opacity: 0.1; }
    20% { opacity: 0.4; }
    30% { opacity: 0; }
    40% { opacity: 0.8; }
    50% { opacity: 0; }
    60% { opacity: 1; filter: brightness(1); }
    70% { opacity: 0.2; }
    80% { opacity: 1; filter: brightness(2) contrast(1.5); }
    90% { opacity: 0; }
    100% { opacity: 1; filter: brightness(1) contrast(1); }
}

/* Center button random hold overlay */
.center-hold-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    display: none;
    cursor: pointer;
    object-fit: cover;
}

/* Playlist Accordion */
.playlist-header {
    cursor: pointer;
    font-variant: small-caps;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.playlist-header:hover {
    opacity: 1;
}
.playlist-tracks {
    display: none;
    flex-direction: column;
    margin-bottom: 20px;
}
.playlist-tracks.open {
    display: flex;
}


/* Fix iOS scrubbing scroll */
.etched-progress-container, #etched-progress-container {
    touch-action: none;
}