/* The record box: the on-screen crate that goes with the decks. */
#decks { position: fixed; inset: 0; z-index: 26; pointer-events: none; display: grid; justify-items: center; align-items: end; padding: 0 12px clamp(10px, 2.4vh, 30px); }
#decks[hidden] { display: none; }
.dk-panel { pointer-events: auto; font-size: clamp(10px, min(.84vw, 1.5vh), 15px); color: #e9e6f2; width: min(66em, 100%); border-radius: 1em; padding: .7em .9em .8em;
  background: rgba(13, 12, 20, .84); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); box-shadow: 0 1.6em 4em rgba(0,0,0,.6);
  opacity: 0; transform: translateY(1.4em) scale(.985); transition: opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1); display: grid; gap: .7em; }
.dk-panel.on { opacity: 1; transform: none; }
.dk-panel button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.dk-head { display: flex; align-items: center; gap: .7em; }
.dk-head strong { font-weight: 600; font-size: 1.05em; }
.dk-note { font-size: .86em; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dk-sp { flex: 1; }
.dk-panel .dk-x { width: 1.9em; height: 1.9em; border-radius: 50%; font-size: 1.15em; line-height: 1; background: rgba(255,255,255,.08); }
.dk-panel .dk-x:hover { background: rgba(255,255,255,.2); }
/* now playing */
.dk-now { display: flex; align-items: center; gap: .9em; padding: .55em .7em; border-radius: .7em; background: rgba(255,255,255,.05); }
.dk-nowart { width: 3.6em; height: 3.6em; flex: none; }
.dk-what { display: grid; gap: .15em; min-width: 9em; flex: 0 1 17em; }
.dk-what b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-what span { font-size: .84em; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-ctl { display: flex; align-items: center; gap: .35em; flex: none; }
.dk-ctl button { width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.dk-ctl button:hover { background: rgba(255,255,255,.2); }
.dk-ctl svg { width: 1.15em; height: 1.15em; pointer-events: none; }
.dk-ctl .dk-play { width: 3em; height: 3em; background: #f1ede4; color: #15151b; }
.dk-ctl .dk-play:hover { background: #fff; }
.dk-ctl .dk-play.on { background: #ff3d9a; color: #fff; }
.dk-time { font: 500 .82em 'JetBrains Mono', ui-monospace, monospace; opacity: .75; min-width: 2.6em; text-align: center; flex: none; }
.dk-seek { flex: 1 1 8em; height: 1.5em; position: relative; cursor: pointer; touch-action: none; outline: none; }
.dk-seek::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .3em; margin-top: -.15em; border-radius: 1em; background: rgba(255,255,255,.14); }
.dk-seek i { position: absolute; left: 0; right: 0; top: 50%; height: .3em; margin-top: -.15em; border-radius: 1em; background: linear-gradient(90deg, #ff3d9a, #7a5cff); transform-origin: 0 50%; transform: scaleX(0); }
.dk-seek:focus-visible::before { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
/* the crate: sleeves in a row, grouped by release */
.dk-crate { display: flex; gap: 1.1em; overflow-x: auto; padding: .1em .1em .5em; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.dk-group { display: grid; gap: .4em; flex: none; align-content: start; }
.dk-group > span { font-size: .74em; letter-spacing: .06em; text-transform: uppercase; opacity: .6; white-space: nowrap; }
.dk-row { display: flex; gap: .6em; align-items: start; padding-top: .4em; }
.dk-panel .dk-sleeve { width: 7.4em; display: grid; gap: .4em; text-align: left; flex: none; transition: transform .16s cubic-bezier(.2,.7,.2,1); }
.dk-sleeve:hover { transform: translateY(-.35em); }
.dk-sleeve.on { transform: translateY(-.35em); }
.dk-sleeve .dk-art { width: 7.4em; height: 7.4em; }
.dk-sleeve.on .dk-art { box-shadow: 0 0 0 2px #ff3d9a, 0 .5em 1.4em rgba(255,61,154,.35); }
.dk-sleeve em { font-style: normal; font-size: .82em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-sleeve small { font-size: .72em; line-height: 1.2; opacity: .6; margin-top: -.25em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-art { display: block; width: 100%; height: 100%; border-radius: .25em; background: #24242c center / cover no-repeat; box-shadow: 0 .3em .8em rgba(0,0,0,.5); position: relative; overflow: hidden; }
/* a white label: plain sleeve, hole in the middle, the title written on */
.dk-white { background: #e9e6de; color: #17181c; }
.dk-white i { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #0c0c0f 7%, #f4f1ea 8% 84%, #0c0c0f 86%); }
.dk-white b { position: absolute; left: 7%; right: 7%; bottom: 6%; font-size: .78em; font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-nowart .dk-white b { display: none; }
.dk-none { background: rgba(255,255,255,.06); box-shadow: none; }
.dk-empty { margin: .6em .2em; opacity: .65; }
@media (max-width: 760px) { .dk-note, .dk-time { display: none; } .dk-what { flex-basis: 9em; } }