/* Pop Music lesson. All rules scoped under .pm-* */
.pm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pm-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.pm-hero img { display: block; width: 260px; max-width: 100%; max-height: 32vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }

/* ---------- the song strip ---------- */
.pm-song { width: 100%; max-width: 340px; padding: 10px 12px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pm-time { font: 700 14px var(--mono); color: var(--dim); margin-bottom: 6px; }
.pm-track { position: relative; height: 34px; border-radius: 8px; background: rgba(234, 227, 215, .05); }
.pm-blk { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border-radius: 8px; border: 2px solid var(--bg); overflow: hidden; white-space: nowrap; transition: left .45s ease, width .45s ease; }
.pm-blk.in { background: #3A3F63; color: #C9CCE6; }
.pm-blk.ve { background: #4B6BFF; color: #fff; }
.pm-blk.ch { background: var(--gold); color: #2A1B00; }
.pm-blk.gr { background: #2B3150; color: var(--dim); }
.pm-song.sing .pm-blk.ve { box-shadow: 0 0 14px rgba(75, 107, 255, .8); }
.pm-ph { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; left: 0; border-radius: 2px; background: #FFF6D8; box-shadow: 0 0 6px rgba(255, 246, 216, .9); }
.pm-line { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--mint); }
.pm-line em { position: absolute; right: 6px; top: -2px; transform: translateY(-100%); font-style: normal; font-size: 12px; font-weight: 800; color: var(--mint); white-space: nowrap; }
.pm-ticks { position: relative; height: 18px; margin-top: 4px; }
.pm-ticks span { position: absolute; transform: translateX(-50%); font: 600 12px var(--mono); color: var(--faint); }
.pm-ticks span:first-child { transform: none; }
.pm-ticks span:last-child { transform: translateX(-100%); }

/* ---------- the crowd ---------- */
.pm-cw { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pm-crowd { display: grid; grid-template-columns: repeat(10, 12px); gap: 5px; }
.pm-crowd i { width: 12px; height: 12px; border-radius: 50%; background: var(--violet-bright); transition: background .25s, transform .25s; }
.pm-crowd i.off { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(234, 227, 215, .22); transform: scale(.8); }
.pm-cl { font-size: 14px; color: var(--dim); }
.pm-cl b { font: 800 16px var(--mono); color: var(--text); }
.btn.pm-skip { background: var(--raised); color: var(--text); box-shadow: 0 5px 0 rgba(0,0,0,.4); border: 2px solid var(--line-strong); }

@media (max-height: 700px) {
  .pm-hero img { max-height: 26vh; }
  .pm-crowd { grid-template-columns: repeat(10, 9px); gap: 3px; }
  .pm-crowd i { width: 9px; height: 9px; }
  .pm-sc { gap: 8px; }
  .pm-song { padding: 8px 10px 4px; }
  .pm-time { margin-bottom: 4px; }
}