/* Music (/music, 2026-10-23): its own look on top of movies.css and games.css. A dancing hero under a pink mascot,
   FIVE, SIX, SEVEN, EIGHT!, the CHARTS band, then one genre per screen with a dance clip behind huge numbers. */

/* hero: a pink tint over the dancing */
.mu-herovid { opacity: .7; }
.mu-shade { background: linear-gradient(180deg, rgba(255, 126, 202, .26) 0%, rgba(25, 28, 70, .5) 45%, rgba(25, 28, 70, .92) 100%); }
/* the pink screen: FIVE, SIX, SEVEN in navy, EIGHT! in white with a hard navy extrusion */
.mu-zoom .mv-zl { color: var(--navy); }
.mu-zoom .zf { color: #fff; text-shadow: .035em .035em 0 var(--navy), .07em .07em 0 rgba(25, 28, 70, .4); }

/* CHARTS, in caps like BOX OFFICE and HIGH SCORE */
.lv-done-t .c-pink { text-transform: uppercase; }
.lv-done .mv-only a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* the genre screens: a muted, looping clip behind the numbers, faded in once it plays */
.mu-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.mu-vid.on { opacity: 1; }
.mu-slide .gm-title { text-transform: uppercase; }
.mv-cases.mu-cases .gm-huge span { color: var(--pink); }

/* the other songs: a genre tile with sound bars instead of a cover */
.mu-cicon { display: grid; place-items: center; background: var(--g, var(--pink)); color: var(--navy); }
.mu-cicon svg { width: 46%; height: 46%; }