/* V5 · Part 2 (Act 1 · Evolution, the "mix"): styles only this part uses. Shared look stays in v5.css.
   One dock at the bottom holds the numbers of the moment; the collector album sits in its last cell. */
.p2dock { position: absolute; left: 370px; width: 1180px; bottom: 34px; z-index: 7; display: flex; align-items: stretch; opacity: 0;
  border: 1px solid rgba(29,43,54,.10); border-radius: 18px; background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(29,43,54,.10), 0 2px 6px rgba(29,43,54,.06); overflow: hidden; pointer-events: none; }
.p2dock .m { flex: 1; padding: 14px 22px; border-right: 1px solid rgba(29,43,54,.10); min-width: 0; }
.p2dock .m.txt { flex: 1.5; }
.p2dock .m.slot { flex: 0 0 210px; border-right: 0; }
.p2dock .m.off { display: none; }
.p2dock .k { font: 800 11px 'Nunito Sans', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #6b7785; white-space: nowrap; }
.p2dock b { display: block; font: 500 30px 'Rubik', sans-serif; font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; color: #1d2b36; }
.p2dock b small { font: 500 15px 'Rubik', sans-serif; color: #6b7785; margin-left: 6px; }
.p2dock .m:first-child b { color: #0055bf; }
.p2dock .m.txt b { font-size: 20px; margin-top: 10px; }
.p2dock .m.txt em { display: block; font: 600 14px 'Fredoka', sans-serif; font-style: normal; color: #6b7785; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2dock .prog { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(29,43,54,.06); }
.p2dock .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #e3402b, #f5cd2f, #2fa45a, #2f7bea); }
/* the album, quiet, inside the dock's last cell */
.album.indock { left: 1352px; top: auto; bottom: 48px; width: 190px; gap: 10px; border: 0; background: transparent; box-shadow: none; padding: 8px 6px; }
.album.indock .stack { width: 24px; height: 32px; }
.album.indock .lbl { font-size: 10px; letter-spacing: 1.2px; white-space: nowrap; }
.album.indock b { font-size: 24px; }
/* the chart's own legend, the scene title, the source line */
.p2legend { position: absolute; left: 640px; top: 140px; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 8px 12px; opacity: 0;
  border: 1px solid rgba(29,43,54,.10); border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(29,43,54,.10); }
.p2legend i { width: 14px; height: 12px; border-radius: 2px; background: #f5cd2f; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.p2legend span { font: 600 15px 'Fredoka', sans-serif; color: #1d2b36; }
.p2title { position: absolute; left: calc(70px - var(--ox, 0px)); top: calc(54px - var(--oy, 0px)); z-index: 6; opacity: 0; }
.p2title .k { font: 800 11px 'Nunito Sans', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #0055bf; }
.p2title h2 { font: 600 28px 'Fredoka', sans-serif; margin-top: 4px; color: #1d2b36; }
.p2src { position: absolute; left: calc(70px - var(--ox, 0px)); bottom: 44px; width: 280px; z-index: 6; opacity: 0; font: 700 12px/1.35 'Nunito Sans', sans-serif; color: #8a95a1; }

/* the record pins: each box picture has its own spot in the free space, with a dotted line to its column.
   Hover one to see the box big. */
.p2pins { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 9; pointer-events: none; }
.p2pin { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; }
.p2pin.on { opacity: 1; }
.p2pin:not(.on) .card { pointer-events: none; }
.p2pin .card { width: 104px; padding: 5px 5px 6px; border-radius: 10px; background: #fff; pointer-events: auto; cursor: zoom-in;
  border: 1px solid rgba(29,43,54,.12); box-shadow: 0 8px 22px rgba(29,43,54,.14); transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.p2pin.on .card { animation: p2pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes p2pop { from { transform: scale(.4) } to { transform: scale(1) } }
.p2pin .card img { display: block; width: 100%; height: 56px; object-fit: contain; }
.p2pin .card .y { display: block; margin-top: 4px; font: 500 12px 'Rubik', sans-serif; color: #1d2b36; text-align: center; white-space: nowrap; }
.p2pin .card .y small { color: #6b7785; }
.p2pin .card .nm { display: none; font: 600 12px 'Fredoka', sans-serif; color: #6b7785; text-align: center; }
.p2pin:hover { z-index: 5; }
.p2pin .card:hover { transform: scale(2.4); }
.p2pin .card:hover .nm { display: block; }