/* audio.gonglogic.com — the music packs for games (GameMusicPageController).

   Its title band carries the packs' own art: the pixel dusk scene from the gonglogic header
   (gig-desk products/music/brand/header.py, drawn without its lettering), darkened so the
   title reads over it. Pixel art, so it is never smoothed. `body .title`, because this sheet
   loads before the theme's, whose own .title background would otherwise win. */
body .title {
    background:
        linear-gradient(90deg, rgba(21, 21, 27, .92) 0%, rgba(21, 21, 27, .72) 45%, rgba(21, 21, 27, .25) 100%),
        url("dusk.png") right center / cover no-repeat,
        #15151b;
    image-rendering: pixelated;
}
body .title::after { display: none; }

/* One block per pack (GameMusicPageController) —
   cover and words beside each other, then the SoundCloud player and the track list. */
.gm { padding: 1.5rem 0 3rem; }
.gm-pack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--color-grey-200); }
.gm-pack__art img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.gm-pack__name { margin: 0; font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.4rem); }
.gm-pack__tagline { margin: .25rem 0 0; font-size: 1.15rem; color: var(--color-text-muted); }
.gm-pack__tagline::first-letter { text-transform: uppercase; }
.gm-pack__about { margin: 1rem 0 0; }
.gm-pack__includes { margin: 1rem 0 0; padding-left: 1.2rem; }
.gm-pack__includes li { margin: .3rem 0; }
.gm-pack__buy { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.gm-buy { padding: .55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-accent); color: var(--color-text-main); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; }
.gm-buy:hover, .gm-buy:focus-visible { background: var(--color-grey-50); }
.gm-buy--main { background: var(--color-accent); color: #fff; }
.gm-buy--main:hover, .gm-buy--main:focus-visible { background: var(--color-accent-hover); }
.gm-buy--listen { border-color: var(--color-grey-300); }
.gm-pack__player { grid-column: 1 / -1; width: 100%; height: 450px; border: 0; border-radius: var(--radius-md); }
.gm-pack__tracks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2.5rem; }
.gm-pack__heading { margin: 0 0 .5rem; font-size: 1.05rem; }
.gm-pack__heading span { font-weight: var(--weight-normal); color: var(--color-text-muted); }
.gm-tracks { margin: 0; padding-left: 1.6rem; }
.gm-tracks li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--color-grey-100); }
.gm-tracks__len { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.gm-empty, .gm-more { color: var(--color-text-muted); }
@media (max-width: 48rem) {
    .gm-pack { grid-template-columns: minmax(0, 1fr); }
    .gm-pack__player { height: 400px; }
}


/* The licence, under the packs. */
.gm-licence { margin-top: 1rem; padding: 1.75rem 2rem; border: 1px solid var(--color-grey-200); border-radius: var(--radius-md); background: var(--color-grey-50); }
.gm-licence__title { margin: 0 0 .75rem; font-family: var(--font-heading); font-size: 1.4rem; }
.gm-licence__list { margin: 0; padding-left: 1.2rem; }
.gm-licence__list li { margin: .35rem 0; }
.gm-licence__note { margin: 1rem 0 0; color: var(--color-text-muted); }