/* Menu principal → JUKEBOX (src/ui/jukebox.js) : la liste des morceaux à gauche, la platine à droite, sur la grille 640×360 */
.px.jb .ptitle { color: var(--cap); }
.px.jb .jb-list { position: absolute; left: 20px; top: 54px; width: 372px; height: 254px; padding: 4px 0;
  background: linear-gradient(180deg, #23143a, #160c25); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink), inset 0 0 0 1px #4a3270;
  transform: rotate(-.6deg); animation: jb-in .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.px.jb .jb-rows { position: relative; }
.px.jb .jb-row { position: relative; display: flex; align-items: center; gap: 6px; height: 19px; padding: 0 8px; cursor: pointer;
  font-family: var(--px-small); font-size: 12px; line-height: 19px; color: var(--bone); white-space: nowrap; }
.px.jb .jb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.px.jb .jb-t b { font-weight: 700; color: var(--cap); }
.px.jb .jb-t em { font-style: normal; }
.px.jb .jb-row.on { background: var(--cap); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translateX(3px); }
.px.jb .jb-row.on .jb-t b { color: var(--blood); }
.px.jb .jb-row.off .jb-t { opacity: .42; text-decoration: line-through; text-decoration-thickness: 1px; }
.px.jb .jb-row.on.off .jb-t { opacity: .62; }
/* la case : cochée = le morceau passe dans tes combats */
.px.jb .jb-ck { flex: none; position: relative; width: 11px; height: 11px; border: 2px solid var(--ink); background: #3dd16b; box-shadow: 1px 1px 0 var(--ink); }
.px.jb .jb-ck::after { content: ''; position: absolute; left: 2px; top: -1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.px.jb .jb-row.off .jb-ck { background: #2b2140; }
.px.jb .jb-row.off .jb-ck::after { display: none; }
.px.jb .jb-row.on.off .jb-ck { background: #fff3d6; }
.px.jb .jb-ck.pop { animation: jb-pop .28s cubic-bezier(.2, 1.8, .4, 1); }
.px.jb .jb-row.res .jb-ck { background: #5b4a78; }
.px.jb .jb-row.res .jb-ck::after { display: none; }
.px.jb .jb-tag { flex: none; font-family: var(--px-small); font-size: 8px; letter-spacing: 1px; padding: 0 4px; line-height: 11px; background: #5b4a78; color: #fff; }
/* l'égaliseur du morceau qui joue */
.px.jb .jb-eq { display: none; flex: none; align-items: flex-end; gap: 1px; width: 11px; height: 10px; }
.px.jb .jb-row.play .jb-eq { display: flex; }
.px.jb .jb-eq i { flex: 1; height: 30%; background: var(--blood); }
.px.jb.playing .jb-eq i { animation: jb-eq .6s ease-in-out infinite alternate; }
.px.jb .jb-eq i:nth-child(2) { animation-delay: -.25s; }
.px.jb .jb-eq i:nth-child(3) { animation-delay: -.45s; }
.px.jb .jb-row.play:not(.on) .jb-t em { color: #ff8a93; }
.px.jb .jb-note { position: absolute; right: 8px; top: 3px; padding: 0 5px; line-height: 13px; font-size: 9px; background: var(--blood); color: #fff; box-shadow: 1px 1px 0 var(--ink); animation: jb-pop .25s both; }
.px.jb .jb-more { position: absolute; right: 6px; font-style: normal; font-size: 10px; color: var(--cap); pointer-events: none; }
.px.jb .jb-more.up { top: -13px; } .px.jb .jb-more.dn { bottom: -13px; }
.px.jb .jb-empty { padding: 30px 12px; text-align: center; font-family: var(--px-small); font-size: 12px; color: #b9a8c8; }

/* la platine */
.px.jb .jb-deck { position: absolute; left: 406px; top: 54px; width: 214px; height: 254px; display: flex; flex-direction: column; align-items: center;
  background: var(--bone); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(.8deg); animation: jb-in .35s .06s cubic-bezier(.2, 1.4, .4, 1) both;
  background-image: radial-gradient(#e7d6b0 1px, transparent 1.2px); background-size: 5px 5px; }
.px.jb .jb-disc { position: relative; flex: none; margin-top: 10px; width: 124px; height: 124px; border-radius: 50%; border: 2px solid var(--ink);
  background: repeating-radial-gradient(circle, #141018 0 1.5px, #221a2c 1.5px 3px); box-shadow: 3px 3px 0 var(--ink);
  animation: jb-spin 1.8s linear infinite; animation-play-state: paused; }
.px.jb .jb-disc::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 40deg, rgba(255, 255, 255, .16) 55deg, transparent 75deg 220deg, rgba(255, 255, 255, .1) 235deg, transparent 255deg); }
.px.jb .jb-disc.spin { animation-play-state: running; }
.px.jb .jb-disc.drop { animation: jb-spin 1.8s linear infinite, jb-drop .35s cubic-bezier(.2, 1.6, .4, 1); }
.px.jb .jb-disc.drop:not(.spin) { animation-play-state: paused, running; }
.px.jb .jb-lab { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle, transparent 0 12px, rgba(0, 0, 0, .18) 12.5px 13.5px, transparent 14px), hsl(var(--h, 45) 80% 55%); display: flex; align-items: center; justify-content: center; }
.px.jb .jb-lab::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.px.jb .jb-now { width: 190px; margin-top: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); }
.px.jb .jb-now small { font-family: var(--px-small); font-size: 8px; letter-spacing: 2px; color: var(--blood); }
.px.jb .jb-ar, .px.jb .jb-ti { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px.jb .jb-ar { font-family: var(--px-font); font-weight: normal; font-size: 17px; line-height: 19px; }
.px.jb .jb-ti { font-family: var(--px-small); font-style: normal; font-size: 12px; line-height: 14px; }
.px.jb .jb-bar { width: 170px; height: 6px; margin-top: 5px; border: 2px solid var(--ink); background: #fff; }
.px.jb .jb-bar i { display: block; height: 100%; width: 0; background: var(--blood); }
.px.jb .jb-time { height: 11px; margin-top: 2px; font-family: var(--px-small); font-size: 9px; color: #5a4a66; }
.px.jb .jb-count { margin-top: auto; width: 100%; padding: 4px 6px; text-align: center; font-family: var(--px-small); font-size: 10px; line-height: 12px; background: var(--ink); color: var(--bone); }
.px.jb .jb-count b { font-family: var(--px-font); font-weight: normal; font-size: 13px; color: #3dd16b; }
.px.jb .jb-count.none b { color: #ff6b76; }
.px.jb .jb-help { position: absolute; left: 0; right: 0; top: 322px; text-align: center; font-family: var(--px-small); font-size: 11px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.px.jb .jb-help b { color: var(--cap); font-weight: 700; }

@keyframes jb-in { from { transform: translateY(30px) rotate(-3deg); opacity: 0; } }
@keyframes jb-pop { 0% { transform: scale(1.7); } 100% { transform: none; } }
@keyframes jb-eq { from { height: 20%; } to { height: 100%; } }
@keyframes jb-spin { to { transform: rotate(360deg); } }
@keyframes jb-drop { 0% { scale: 1.25; } 100% { scale: 1; } }