/* Verse Vibes (vb-) */
.vb { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; overflow: auto; height: 100%; box-sizing: border-box; }
.vb-hero { text-align: center; line-height: 1.1; }
.vb-title { font: italic 900 26px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 2px 2px 0 #ff2ec4, 4px 4px 0 #00b8d4; background: linear-gradient(90deg, #1a0050, #5b0f9a); padding: 6px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.vb-sub { font-size: 11px; margin-top: 3px; }
.vb-big { font: 900 20px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; padding: 14px 10px; cursor: pointer; color: #000; background: var(--face, #c0c0c0); border: 0; box-shadow: var(--bevel-btn, inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf); outline: 2px dashed #ff2ec4; outline-offset: -6px; }
.vb-big:active { box-shadow: var(--bevel-in, inset 1px 1px #000, inset -1px -1px #fff); padding-top: 15px; }
.vb-big:focus-visible, .vb-music:focus-visible { outline: 2px solid #00f; outline-offset: 2px; }
.vb-count { min-height: 14px; text-align: center; font-weight: bold; color: #c00; }
.vb-chk { cursor: pointer; }
.vb-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vb-num { width: 56px; }
.vb-music { font: bold 14px/1.1 var(--font, sans-serif); padding: 10px; width: 100%; cursor: pointer; background: var(--face, #c0c0c0); color: var(--text, #000); border: 0; box-shadow: var(--bevel-btn, inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf); }
.vb-music.on { background: #ffe97a; }
.vb-music:disabled { color: #808080; cursor: default; text-shadow: 1px 1px #fff; }
.vb-nowl { font-size: 11px; margin-top: 4px; min-height: 13px; }
.vb-share { display: flex; gap: 4px; align-items: center; }
.vb-link { flex: 1; min-width: 0; font-family: var(--mono, monospace); }
.vb-copied { font-size: 11px; color: #060; }
.vb-note, .vb-tip { font-size: 11px; margin-top: 3px; }
.vb-tip { font-style: italic; }

/* the saver layer */
.vb-saver { overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: none; }
.vb-saver .vb-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vb-saver .vb-in { animation: vb-fade 1s ease-out; }
@keyframes vb-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-motion="off"] .vb-saver .vb-in { animation: none; }
.vb-bar { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; width: min(820px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; box-sizing: border-box; background: #c0c0c0; color: #000; padding: 6px; cursor: default; font: 13px/1.2 "MS Sans Serif", Tahoma, Arial, sans-serif; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 0 6px 22px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s; }
.vb-bar.on { opacity: 1; pointer-events: auto; }
html[data-motion="off"] .vb-bar { transition: none; }
.vb-saver:has(.vb-bar.on) { cursor: default; }
.vb-row { display: flex; gap: 4px; flex-wrap: wrap; }
.vb-bb { flex: 1 1 auto; min-height: 36px; padding: 4px 8px; cursor: pointer; font: bold 13px/1 "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000; background: #c0c0c0; border: 0; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.vb-bb:active { box-shadow: inset 1px 1px #000, inset -1px -1px #fff; }
.vb-bb:disabled { color: #808080; text-shadow: 1px 1px #fff; cursor: default; }
.vb-bb.vb-exit { flex: 0 0 auto; background: #e8b4b4; }
.vb-bb.vb-fs { width: 100%; margin-top: 4px; background: #ffe97a; }


/* saver toolbar: Now Playing + five big beveled buttons */
.vb-now { font: bold 14px/1.25 "MS Sans Serif", Tahoma, Arial, sans-serif; margin: 2px 2px 6px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #000; color: #5dff6a; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }
.vb-now.off { color: #9fcf9f; font-weight: normal; }
.vb-row { flex-wrap: nowrap; gap: 5px; }
.vb-bb.vb-tb { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; }
.vb-tb .g { font-size: 18px; line-height: 1; letter-spacing: -1px; }
.vb-tb .l { font-size: 12px; }
.vb-tb.vb-play { background: #a8e8a0; }
.vb-bb:focus-visible, .vb-cm:focus-visible, .vb-chx:focus-visible { outline: 2px solid #00f; outline-offset: -4px; }
.vb-keys { font-size: 10px; margin: 6px 2px 0; color: #404040; text-align: center; }
@media (hover: none) { .vb-keys { display: none; } }
@media (max-width: 640px) { .vb-bb.vb-tb { min-height: 60px; } .vb-bb.vb-tb .l { font-size: 11px; } }

/* launcher music panel */
.vb-music.vb-choose { margin-top: 6px; font-weight: normal; padding: 8px; }
.vb-mini { display: flex; gap: 3px; margin-top: 6px; }
.vb-mb { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 2px 3px; cursor: pointer; font: 12px/1.1 var(--font, sans-serif); color: var(--text, #000); background: var(--face, #c0c0c0); border: 0; box-shadow: var(--bevel-btn, inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf); }
.vb-mb.on { box-shadow: var(--bevel-in, inset 1px 1px #000, inset -1px -1px #fff); background: #ffe97a; font-weight: bold; }

/* the music chooser: dark 90s dialog, LCD-green, big rows */
.vb-ch { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); cursor: default; }
.vb-ch.inwin { background: #000; }
.vb-chp { display: flex; flex-direction: column; box-sizing: border-box; width: min(580px, calc(100% - 24px)); height: min(86%, 680px); background: #0b120b; color: #5dff6a; font: 16px/1.2 "VT323", "Courier New", monospace; border: 2px solid; border-color: #dfdfdf #404040 #404040 #dfdfdf; box-shadow: 0 8px 30px rgba(0,0,0,.8); }
.vb-ch.inwin .vb-chp { width: 100%; height: 100%; border-width: 0; box-shadow: none; }
.vb-cht { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 10px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: bold 14px/1 "MS Sans Serif", Tahoma, Arial, sans-serif; letter-spacing: 1px; }
.vb-chx { width: 44px; height: 32px; cursor: pointer; font: bold 14px/1 Tahoma, sans-serif; color: #000; background: #c0c0c0; border: 0; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.vb-chn { padding: 8px 10px 4px; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px #1a8a24; }
.vb-cmodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 6px 10px; }
.vb-cm { min-height: 48px; padding: 4px 6px; cursor: pointer; font: bold 14px/1.1 "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000; background: #c0c0c0; border: 0; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.vb-cm.on { background: #5dff6a; box-shadow: inset 1px 1px #000, inset -1px -1px #fff; }
.vb-cbook { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; }
.vb-cbook[hidden] { display: none; }
.vb-cbook select { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; background: #000; color: #5dff6a; border: 2px solid #5dff6a; padding: 0 6px; }
.vb-chhl { display: flex; align-items: center; min-height: 44px; padding: 0 10px; cursor: pointer; font-size: 20px; }
.vb-chhl input { width: 22px; height: 22px; margin-right: 8px; accent-color: #5dff6a; }
.vb-chc { padding: 0 10px 4px; font-size: 16px; color: #3ba545; }
.vb-chl { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0; list-style: none; border-top: 1px solid #1d4a22; border-bottom: 1px solid #1d4a22; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.vb-chl li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; box-sizing: border-box; border-bottom: 1px solid #14301a; cursor: pointer; }
.vb-chl li .g { flex: 0 0 18px; font-size: 16px; }
.vb-chl li .b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vb-chl li .t { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-chl li .r { font-size: 15px; color: #3ba545; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-chl li:hover, .vb-chl li:focus-visible { background: #12301a; outline: none; }
.vb-chl li:focus-visible { box-shadow: inset 0 0 0 2px #5dff6a; }
.vb-chl li.cur { background: #5dff6a; color: #021a06; }
.vb-chl li.cur .r { color: #0b4a14; }
.vb-chl li.vb-che { cursor: default; justify-content: center; color: #3ba545; }
.vb-chf { padding: 6px 10px 8px; display: flex; justify-content: flex-end; }
.vb-cdone { min-width: 120px; }
@media (max-width: 640px) {
  .vb-ch .vb-chp { width: 100%; height: 100%; border-width: 0; }
  .vb-cmodes { grid-template-columns: repeat(2, 1fr); }
  .jb-list .arc { color: #c8a; }
}
.jb-list .arc { font-size: 10px; color: #b9a; margin-left: 4px; white-space: nowrap; }
.vb-chp > * { flex-shrink: 0; }
.vb-chp > .vb-chl { flex: 1 1 auto; flex-shrink: 1; }
.vb-chn { min-height: 26px; box-sizing: border-box; line-height: 1.3; }

/* one-tap music strip (saver bar + launcher) */
.vb-strip { margin-top: 6px; }
.vb-sm { display: flex; flex-wrap: wrap; gap: 5px; }
.vb-bb.vb-sb { flex: 1 1 0; min-width: 84px; min-height: 44px; }
.vb-bb.vb-sb.on { background: #5dff6a; box-shadow: inset 1px 1px #000, inset -1px -1px #fff; }
.vb-tiles { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.vb-tile { flex: 0 0 auto; width: 150px; min-height: 52px; padding: 4px 6px; box-sizing: border-box; cursor: pointer; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; font: 12px/1.15 "MS Sans Serif", Tahoma, Arial, sans-serif; color: #5dff6a; background: #0b120b; border: 0; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }
.vb-tile .t { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-tile .r { color: #3ba545; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-tile.cur { background: #1d4a22; outline: 2px solid #5dff6a; outline-offset: -2px; }
.vb-tile:focus-visible { outline: 3px solid #ffe97a; outline-offset: -3px; }
.vb-tn { padding: 10px; color: #404040; }
@media (max-width: 640px) { .vb-tiles { flex-wrap: wrap; overflow-x: visible; max-height: 130px; overflow-y: auto; } .vb-tile { width: calc(50% - 3px); } .vb-bb.vb-sb { min-width: 70px; font-size: 12px; } }
@media (max-width: 640px) { .vb-bb.vb-sb { min-width: 0; padding: 4px 2px; font-size: 11px; } .vb-bb { min-height: 44px; } .vb-bb.vb-tb { min-height: 50px; } }

.vb-bb.vb-playbig { width: 100%; min-height: 56px; margin-bottom: 6px; font-size: 20px; background: #a8e8a0; }
.vb-bb.vb-playbig.on { background: #ffe97a; }
@media (max-width: 640px) { .vb-tb .l { font-size: 10px; line-height: 1.1; text-align: center; } .vb-bb.vb-tb { min-height: 52px; } .vb-tb .g { font-size: 14px; } .vb-bb.vb-playbig { font-size: 18px; } }

.vb-pill { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; min-height: 52px; padding: 0 26px; cursor: pointer; font: bold 18px "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000; background: #a8e8a0; border: 0; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 0 4px 14px rgba(0,0,0,.6); }
.vb-pill[hidden], .vb-bar.on + .vb-pill { display: none; }
.vb-saver:has(.vb-pill:not([hidden])) { cursor: default; }