/* BIBLAMP: the Winamp-style jukebox (2026-10-15). Skinned infomercial blue + yellow. Markup is built by jukebox.js into #bamp. */
#jukebox{scroll-margin-top:10px}
.bamp-wrap{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:26px;max-width:1120px;margin:0 auto;align-items:start}
@media(max-width:900px){.bamp-wrap{grid-template-columns:minmax(0,1fr)}}
.bamp,.bamp-side{min-width:0;max-width:100%}
@media(max-width:480px){.bamp .top{grid-template-columns:118px minmax(0,1fr)}.bamp .time{font-size:36px}.bamp .ctl button{width:38px}.bamp .meta{font-size:14px}}
.bamp{font-family:'VT323','Courier New',monospace;color:#ffe600;user-select:none;-webkit-user-select:none}
.bamp .win{background:linear-gradient(#2b4fd8,#0b1f8f 60%,#071463);border:2px solid #000;box-shadow:inset 1px 1px 0 #8fb0ff,inset -1px -1px 0 #020a3a,6px 6px 0 #000;padding:0 6px 8px;margin-bottom:8px}
.bamp .tb{display:flex;align-items:center;gap:8px;height:24px;margin:0 -6px 6px;padding:0 6px;background:repeating-linear-gradient(#ffe600 0 2px,#c9a200 2px 4px);color:#000;font:16px/24px 'Anton',Impact,sans-serif;letter-spacing:2px}
.bamp .tb b{background:#ffe600;padding:0 8px;margin:0 auto;font-weight:400}
.bamp .tb i{width:14px;height:12px;background:#0b1f8f;border:1px solid #000;font-style:normal;color:#ffe600;font-size:10px;line-height:10px;text-align:center}
.bamp .top{display:grid;grid-template-columns:150px 1fr;gap:6px}
.bamp .lcd{background:#000;border:2px inset #4d6cff;padding:4px 6px;position:relative;height:92px}
.bamp .time{font-size:46px;line-height:40px;color:#ffe600;text-shadow:0 0 6px rgba(255,230,0,.55);letter-spacing:2px;cursor:pointer;text-align:right}
.bamp .time.rem::before{content:'-';position:absolute;left:8px}
.bamp .st{position:absolute;left:6px;top:4px;font-size:14px;color:#6cf}
.bamp canvas{display:block;width:100%;height:40px;margin-top:4px;image-rendering:pixelated}
.bamp .info{display:flex;flex-direction:column;gap:5px;min-width:0}
.bamp .marq{background:#000;border:2px inset #4d6cff;height:30px;overflow:hidden;white-space:nowrap;font-size:24px;line-height:26px;padding:0 6px;color:#ffe600}
.bamp .meta{display:flex;gap:8px;font-size:17px;color:#9fd0ff;align-items:center}
.bamp .meta span{background:#000;border:1px solid #4d6cff;padding:0 5px;color:#ffe600}
.bamp .meta .stereo{margin-left:auto;color:#ffe600}
.bamp .sliders{display:flex;gap:8px;align-items:center;font-size:16px;color:#9fd0ff}
.bamp input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:18px;flex:1;min-width:0;cursor:pointer}
.bamp input[type=range]::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,#1a8f2a,#ffe600,#e3120b);border:1px solid #000;box-shadow:inset 1px 1px 0 #000}
.bamp input[type=range]::-moz-range-track{height:8px;background:linear-gradient(90deg,#1a8f2a,#ffe600,#e3120b);border:1px solid #000}
.bamp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:16px;margin-top:-5px;background:linear-gradient(#fff9b0,#e8c400);border:1px solid #000;box-shadow:1px 1px 0 #000}
.bamp input[type=range]::-moz-range-thumb{width:22px;height:16px;background:linear-gradient(#fff9b0,#e8c400);border:1px solid #000;border-radius:0}
.bamp .seek{display:block;width:100%;margin:6px 0 4px}
.bamp .seek::-webkit-slider-runnable-track{background:#000;border:1px solid #4d6cff}
.bamp .seek::-moz-range-track{background:#000;border:1px solid #4d6cff}
.bamp .ctl{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.bamp .ctl button{font:18px/1 Arial,sans-serif;width:44px;height:34px;background:linear-gradient(#e9eeff,#9aa9d8);border:1px solid #000;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #5a6aa0;color:#071463;cursor:pointer;padding:0}
.bamp .ctl button:active,.bamp .ctl button.on{background:linear-gradient(#9aa9d8,#e9eeff);box-shadow:inset 1px 1px 0 #5a6aa0}
.bamp .ctl .play{background:linear-gradient(#fff9b0,#e8c400)}
.bamp .ctl .tog{width:auto;padding:0 8px;font:16px/1 'VT323',monospace}
.bamp .ctl .tog.on{color:#0a7a2a;background:linear-gradient(#d8ffd0,#8fd77e)}
.bamp .ctl .sp{flex:1}
/* playlist */
.bamp .pl .albums{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}
.bamp .pl .albums button{flex:0 0 74px;background:#000;border:2px solid #4d6cff;padding:2px;cursor:pointer;color:#9fd0ff;font:13px/1.05 'VT323',monospace;text-align:center}
.bamp .pl .albums button.on{border-color:#ffe600;color:#ffe600;box-shadow:0 0 0 2px #ffe600}
.bamp .pl .albums img{display:block;width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:2px}
.bamp .pl .title{font-size:20px;color:#fff;margin:0 0 4px;display:flex;gap:8px}
.bamp .pl .title span{margin-left:auto;color:#9fd0ff}
.bamp .pl ol{list-style:none;margin:0;padding:0;background:#000;border:2px inset #4d6cff;height:300px;overflow-y:auto;font-size:19px;line-height:23px}
.bamp .pl li{display:flex;gap:6px;padding:0 6px;color:#1fdc3a;cursor:pointer;white-space:nowrap}
.bamp .pl li .t{overflow:hidden;text-overflow:ellipsis;flex:1}
.bamp .pl li .d{color:#1fdc3a}
.bamp .pl li.il{color:#3f9c4c}
.bamp .pl li:hover{background:#0b1f8f}
.bamp .pl li.cur{color:#fff;background:#0b1f8f}
.bamp .pl .foot{display:flex;justify-content:space-between;font-size:16px;color:#9fd0ff;margin-top:4px}
/* right column: the CD + buy buttons */
.bamp-side{display:flex;flex-direction:column;gap:16px;align-items:stretch;text-align:center}
.bamp-side .cdshot{width:100%;max-width:520px;margin:0 auto;border:4px solid #000;box-shadow:8px 8px 0 #000;background:#000;display:block;aspect-ratio:1;object-fit:cover}
.bamp-side .now{font-family:'Anton',Impact,sans-serif;font-size:clamp(22px,3vw,32px);text-transform:uppercase;line-height:1.05;color:#fff;text-shadow:3px 3px 0 #000}
.bamp-side .now small{display:block;font:16px/1.3 Arial,sans-serif;text-transform:none;color:#ffe600;text-shadow:none;margin-top:4px}
.bamp-side .bbtn{width:100%}
.bamp-side .free{font:15px/1.4 Arial,sans-serif;color:#fff;opacity:.9}