:root { --loop-black: #050505; --radius: 28px; --glass: rgba(255, 255, 255, 0.1); --verge-blue: #34b3f3; }
body { background: var(--loop-black); color: #fff; font-family: 'Inter', sans-serif; margin: 0; overflow: hidden; }

#tv-engine { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
video { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: opacity 2s; background: #000; }
.active-video { opacity: 1; z-index: 2; }
.hidden-video { opacity: 0; z-index: 1; }

#ui-wrapper { position: relative; z-index: 10; height: 100vh; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transition: opacity 0.5s; }
header.loop-header { display: flex; align-items: center; padding: 4vh 5vw; }
#verge-logo { font-size: 2.2rem; font-weight: 900; flex: 1; }
.pill-nav { background: var(--glass); padding: 8px; border-radius: 50px; display: flex; backdrop-filter: blur(25px); }
.nav-btn { padding: 12px 30px; border-radius: 40px; font-weight: 700; cursor: pointer; }
.nav-btn.active { background: #fff; color: #000; }

.shelf-title { margin: 4vh 5vw 2vh; font-size: 1.5rem; color: #777; }
.card-row { display: flex; gap: 25px; padding: 0 5vw; overflow-x: auto; scrollbar-width: none; }
.loop-card { min-width: 450px; height: 280px; border-radius: var(--radius); background-size: cover; position: relative; cursor: pointer; border: 4px solid transparent; transition: 0.3s; }
.loop-card:hover { transform: scale(1.03); border-color: #fff; }
.loop-card.rock { background-image: linear-gradient(to top, #000, transparent), url('./Screenshot\ 2026-05-09\ at\ 9.24.41\ AM.png'); }

.modal { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; padding: 10vh 5vw; }
#modalTitle { font-size: 8rem; margin: 0; letter-spacing: -4px; }
.btn-play { background: #fff; color: #000; padding: 20px 50px; border-radius: 15px; font-size: 1.5rem; font-weight: bold; cursor: pointer; border: none; }