/* BibleDo Jukebox (jb-): Winamp-style chassis, big green PLAY */
.jb-body { padding: 0 !important; background: #1b1b1f; overflow: auto; }
.jb { display: flex; flex-direction: column; gap: 5px; padding: 6px; height: 100%; min-height: 440px; box-sizing: border-box; color: #c8d0d8; font-family: var(--font); background: linear-gradient(#34363d, #1c1d22 40%, #131418); box-shadow: inset 1px 1px #5a5d68, inset -1px -1px #08080a; }
.jb-head { display: flex; align-items: center; gap: 6px; }
.jb-logo { font: 700 14px/1 "Silkscreen", var(--font); color: #7dff6a; text-shadow: 0 0 5px #3f3; letter-spacing: 1px; }
.jb-logo2 { font: 10px/1 "Silkscreen", var(--font); color: #8a93a4; flex: 1; }
.jb-wow { font: 700 10px/1 "Silkscreen", var(--font); color: #ff0; background: #d0262a; padding: 2px 4px; transform: rotate(-4deg); animation: jb-blink 1s steps(2) infinite; }
@keyframes jb-blink { 50% { opacity: .35; } }
.jb-lcd { background: #031004; border: 2px solid; border-color: #08080a #4c4f5a #4c4f5a #08080a; padding: 5px 6px; color: #5dff4e; font-family: var(--mono); box-shadow: inset 0 0 14px rgba(0,255,60,.12); }
.jb-row { display: flex; gap: 8px; align-items: flex-end; justify-content: space-between; }
.jb-left { display: flex; flex-direction: column; }
.jb-state { font: 13px/1 var(--mono); color: #36b52c; letter-spacing: 2px; }
.jb-time { font: 46px/0.9 var(--mono); color: #6dff5a; text-shadow: 0 0 8px #2f2; letter-spacing: 2px; }
.jb-spec { width: 96px; height: 34px; background: #000; border: 1px solid #0b3a0f; image-rendering: pixelated; flex: none; }
.jb-marq { overflow: hidden; white-space: nowrap; margin-top: 4px; border-top: 1px solid #0c4a10; border-bottom: 1px solid #0c4a10; font-size: 17px; line-height: 20px; }
.jb-marq span { display: inline-block; padding-left: 100%; animation: jb-scroll 14s linear infinite; }
@keyframes jb-scroll { to { transform: translateX(-100%); } }
html[data-motion="off"] .jb-marq span { animation: none; padding-left: 0; }
.jb-prog { height: 5px; background: #052007; margin-top: 3px; border: 1px solid #0c4a10; }
.jb-prog i { display: block; height: 100%; width: 0; background: #5dff4e; }
.jb-trans { display: flex; gap: 4px; align-items: stretch; }
.jb-b, .jb-t, .jb-mode { background: linear-gradient(#6a6e7a, #3d4049 50%, #2c2e35); color: #e8ecf4; border: 1px solid #0a0a0c; box-shadow: inset 1px 1px #9aa0ae, inset -1px -1px #1a1b20; font: 13px/1 var(--font); cursor: pointer; }
.jb-b { flex: 1; height: 46px; font-size: 20px; }
.jb-play { flex: 3.2; height: 46px; font: 700 22px/1 "Arial Black", Impact, var(--font); letter-spacing: 2px; color: #04210a; cursor: pointer; border: 2px solid #0a0a0c; background: linear-gradient(#9dff7a, #2fd23a 50%, #1a9a26); box-shadow: inset 2px 2px #d8ffc8, inset -2px -2px #0c5a14, 0 0 10px rgba(60,255,60,.5); text-shadow: 1px 1px #aaffaa; }
.jb-play:hover { filter: brightness(1.1); }
.jb-play:active, .jb.playing .jb-play { background: linear-gradient(#1a9a26, #2fd23a); box-shadow: inset 2px 2px #0c5a14, inset -2px -2px #8dff7a; }
.jb-ctl { display: flex; align-items: center; gap: 4px; }
.jb-t { height: 20px; font: 10px/1 "Silkscreen", var(--font); flex: 0 0 auto; padding: 0 6px; }
.jb-t[aria-pressed="true"], .jb-b:active, .jb-t:active, .jb-mode:active { background: linear-gradient(#2c2e35, #3d4049); box-shadow: inset 1px 1px #111, inset -1px -1px #7a8090; }
.jb-t[aria-pressed="true"] { color: #7dff6a; text-shadow: 0 0 4px #3f3; }
.jb-vl { font: 9px "Silkscreen", var(--font); color: #8a93a4; }
.jb-vol { flex: 1; min-width: 40px; accent-color: #5dff4e; height: 18px; }
.jb-modes { display: flex; gap: 4px; }
.jb-mode { flex: 1; height: 34px; font: 700 13px/1 var(--font); padding: 0 2px; white-space: nowrap; }
.jb-mode.on { background: linear-gradient(#2c2e35, #3d4049); color: #7dff6a; text-shadow: 0 0 5px #3f3; box-shadow: inset 1px 1px #111, inset -1px -1px #7a8090, inset 0 -3px #5dff4e; }
.jb-bookrow { display: flex; align-items: center; gap: 4px; font: 10px "Silkscreen", var(--font); color: #8a93a4; }
.jb-bookrow[hidden] { display: none; }
.jb-bookrow select { background: #0b0c0e; color: #7dff6a; border: 1px solid #50535e; box-shadow: none; font: 15px var(--mono); min-height: 22px; min-width: 0; }
.jb-bookrow select:first-of-type { flex: 1; }
.jb-pane { flex: 1 1 0; min-height: 90px; background: #0b0c0e; border: 1px solid #3a3d48; overflow: auto; }
.jb-list { margin: 0; padding: 0; list-style: none; font: 16px/1.15 var(--mono); }
.jb-list li { display: flex; gap: 6px; padding: 2px 6px; color: #5dff4e; cursor: pointer; min-height: 22px; align-items: center; }
.jb-list li .r { flex: 0 0 96px; color: #36b52c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-list li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-list li .d { color: #36b52c; }
.jb-list li .hl { font: 8px "Silkscreen", var(--font); background: #d0262a; color: #fff; padding: 1px 3px; }
.jb-list li:hover { background: #12301a; }
.jb-list li.cur { background: #1e5a2a; color: #fff; }
.jb-list li.jb-empty { cursor: default; color: #8a93a4; }
.jb-links { display: flex; gap: 6px; }
.jb-link { flex: 1; text-align: center; padding: 6px 4px; font: 700 12px/1 var(--font); color: #000 !important; text-decoration: none !important; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: inset -1px -1px #808080; }
.jb-link.buy { background: #ffe14a; }
.jb-link:active { border-color: #404040 #fff #fff #404040; }
@media (max-width: 640px) { .jb-mode { font-size: 12px; } .jb-list li .r { flex-basis: 72px; } }

.jb-disc { margin: 2px 0; padding: 2px 4px; font: 11px/1.2 "VT323", "Courier New", monospace; color: #5dff6a; background: rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }