* { box-sizing: border-box; margin: 0; padding: 0; }
:root { 
    --digital-white: #FFFFFF; 
    --record-red: #FF0000;
}

body { 
    background: #000; 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: background 0.3s ease;
}

/* --- Alternate Universe States (White BG) --- */
body.inverted { background: #fff; }
body.inverted #main-gif { filter: invert(1); }
body.inverted #playlist-entries li,
body.inverted .digital-meta,
body.inverted .status-text { color: #000; }
body.inverted .square-stop { background-color: #000; }
body.inverted .triangle-right { border-left-color: #000; }
/* Dot stays red even in inverted mode for that 'Recording' look */

/* --- Layout --- */
.main-wrapper { display: flex; width: 90vw; max-width: 1200px; gap: 60px; align-items: flex-start; }
.side-panel { flex: 0 0 20%; display: flex; flex-direction: column; gap: 15px; align-items: center; }
.gif-section { cursor: pointer; width: 100%; }
.gif-section img { width: 100%; display: block; }

.interface-section { flex: 2.2; }

/* --- Header & Navigation --- */
.header-row { margin-bottom: 10px; }
.digital-meta { color: var(--digital-white); font-size: 0.7rem; font-family: monospace; }
.blink { animation: digital-blink 1s step-end infinite; }
@keyframes digital-blink { 50% { opacity: 0; } }

/* --- List Styling --- */
#playlist-entries { list-style: none; }
#playlist-entries li {
    font-size: 0.9rem; 
    font-family: 'Digital Numbers', monospace;
    color: var(--digital-white);
    padding: 10px 0;
    cursor: pointer;
    text-transform: uppercase;
}
.meta-text { display: block; font-family: Arial, sans-serif; font-size: 0.6rem; opacity: 0.7; margin-top: 2px; }

/* --- Transport Icons --- */
.transport-controls { display: flex; justify-content: center; gap: 30px; width: 100%; }
.icon-trigger { cursor: pointer; }
.triangle-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid var(--digital-white); }
.square-stop { width: 20px; height: 20px; background-color: var(--digital-white); }

/* --- Playing Indicator (RED DOT) --- */
.status-hidden { opacity: 0; transition: opacity 0.3s; pointer-events: none; height: 20px; }
.status-visible { 
    opacity: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    height: 20px;
}
.status-text { font-family: monospace; font-size: 0.6rem; color: var(--digital-white); letter-spacing: 2px; }
.pulse-dot { 
    width: 6px; 
    height: 6px; 
    background-color: var(--record-red); 
    border-radius: 50%; 
    box-shadow: 0 0 8px var(--record-red); 
    animation: pulse 1.5s infinite; 
}

@keyframes pulse { 
    0% { transform: scale(1); opacity: 1; } 
    50% { transform: scale(1.5); opacity: 0.4; } 
    100% { transform: scale(1); opacity: 1; } 
}

@media (max-width: 768px) {
    .main-wrapper { flex-direction: column; align-items: center; }
    .side-panel { width: 60%; }
}