/* The cabinet stays still. Only the sleeves, roller and selected paper strip move. */
.jukebox {
  --enamel: url("assets/juke-enamel.webp");
  --knurl: url("assets/juke-knurl.webp");
  --stock: url("assets/juke-paper.webp");
  --jb-accent: #e6ef74;
  --jb-ivory: #f6e8ce;
  --jb-ink: #241a13;
  --jb-row-height: clamp(44px,6.55dvh,55px);
  --bronze: linear-gradient(103deg,#6f4a32 0%,#dbc3a0 8%,#f7e3c3 17%,#96775a 35%,#d6bc99 52%,#6b4e38 71%,#ead5b7 92%,#876448 100%);
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  color: var(--jb-ivory);
  background: linear-gradient(105deg,#3e0d111c,#21060775),var(--enamel) repeat 0 0 / 70px 83px,#521d1c;
  isolation: isolate;
  user-select: none;
}
.jb-top {
  flex: none;
  min-height: clamp(48px,7dvh,65px);
  display: grid;
  grid-template-columns: clamp(43px,14cqw,66px) minmax(0,1fr) auto;
  align-items: center;
  column-gap: 3.2%;
  padding: 0 4% 0 2%;
  background: linear-gradient(0deg,#1b06083d,transparent 50%);
  box-shadow: inset 0 -1px #e986824d;
}
.jb-back, .jb-step {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  background: transparent;
}
.jb-back svg {width: 25px;height: 21px;fill: none;stroke: currentColor;stroke-width: 2.5;stroke-linecap: square;}
.jb-top h1 {
  margin: 0;
  border-left: 1px solid #dbb99870;
  padding-left: 7%;
  font: 400 clamp(21px,6.5cqw,34px)/1.08 TicketDisplay,Impact,sans-serif;
  letter-spacing: .07em;
  text-shadow: 0 1px 1px #250b07;
  white-space: nowrap;
}
.jb-position {
  border-left: 1px solid #dbb99870;
  padding-left: .85em;
  font: 650 clamp(12px,3.6cqw,18px)/1.1 Manrope,sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.jb-chassis {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(137px,1fr) auto calc(var(--jb-row-height) * var(--jb-visible-rows,3) + 29px) auto;
  gap: clamp(6px,1.1dvh,11px);
  padding: 0 1.6% max(6px,calc(var(--safe-b) + 4px));
  margin: 0 1.4% 1.4%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #380d0f;
  border-radius: 22px 22px 17px 17px;
  box-shadow: inset 0 1px 1px #e990735f,inset 0 0 2px 3px #8f3b344d,inset 0 -3px 8px #160709ac,0 2px 5px #1c0707;
  scrollbar-width: thin;
}
.jb-brand {
  position: relative;
  min-height: clamp(47px,7.8dvh,68px);
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  align-items: center;
  justify-items: center;
  padding: 5px 3%;
  text-align: center;
}
.jb-brand strong {
  display: block;
  font: 600 clamp(14px,4.3cqw,21px)/1.4 "Yu Mincho","Noto Serif JP",serif;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px #35110b;
}
.jb-brand small {
  display: block;
  margin-top: 2px;
  font-size: clamp(8px,2.3cqw,11px);
  font-weight: 750;
  letter-spacing: .27em;
}
.jb-screw {
  display: inline-block;
  position: relative;
  width: clamp(10px,3.6cqw,18px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 37% 28%,#fff2cfaa,transparent 45%),conic-gradient(from 36deg,#4b3426,#c0a383,#f3debd,#5d4433,#b6a080,#4b3426);
  border: 1px solid #8d7156;
  box-shadow: 0 1px 2px #140b0a,0 0 0 1px #48261e;
  pointer-events: none;
}
.jb-screw::after {
  content: "";
  position: absolute;
  top: 47%;left: 13%;right: 13%;
  height: 1px;
  transform: rotate(-38deg);
  background: #3d2b20;
  box-shadow: 0 1px #f0ddba99;
}
.jb-screw.small {width: 8px;position: absolute;z-index: 2;}
.jb-screw.left {left: 8px;}.jb-screw.right {right: 8px;}
.jb-window {
  min-height: 0;
  padding: 5px;
  border-radius: 23px 23px 15px 15px;
  background: var(--bronze);
  box-shadow: inset 0 1px #ffe9ca,inset 0 -2px #503b2c,0 0 0 1px #30100c,0 2px 3px #250a0c;
}
.jb-bay {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  background: radial-gradient(ellipse at 50% 86%,#54402d,#191614 67%,#17120e 87%,#392e25);
  border: 1px solid #31261c;
  border-radius: 18px 18px 10px 10px;
  box-shadow: inset 0 3px 6px #050504e6,inset 4px 0 8px #98806755,inset -4px 0 6px #c6b19666;
}
.jb-bay::after {
  content:"";
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background: linear-gradient(123deg,#f4d6ab16,transparent 16%,#fff2d506 19%,transparent 34%,transparent 70%,#fff0cd0e 77%,transparent 87%);
  border-radius: inherit;
  box-shadow: inset 0 1px 2px #f4ddbc44;
}
#jb-sleeves {position:absolute;inset:0;}
.jb-sleeve {
  --shift: 0%;--lean: 0deg;--yaw: 0deg;--lift: 0%;--size: 1;
  position:absolute;bottom: 8%;left:50%;
  height:min(86%,47cqw);aspect-ratio:1;padding:0;
  transform:translateX(-50%) translateX(var(--shift)) translateY(var(--lift)) perspective(450px) rotateY(var(--yaw)) rotate(var(--lean)) scale(var(--size));
  transform-origin: 50% 100%;
  transition: transform 250ms cubic-bezier(.18,.75,.23,1),filter 220ms ease;
  background:transparent;
  z-index:3;
}
.jb-sleeve[data-slot="-1"] {--shift:-82%;--lift:5%;--lean:-7deg;--yaw:14deg;--size:.86;z-index:1;filter:brightness(.80);}
.jb-sleeve[data-slot="1"]  {--shift:82%;--lift:5%;--lean:7deg;--yaw:-14deg;--size:.86;z-index:1;filter:brightness(.80);}
.jb-disc {
  pointer-events:none;
  position:absolute;z-index:-1;inset:-5% -10% 4% 8%;border-radius:50%;
  background: linear-gradient(30deg,transparent 22%,#b7aba73f 33%,transparent 49%,#a7aaa42a 76%,transparent 85%),
    repeating-radial-gradient(circle at 50% 50%,#10100e 0 1px,#42413c 1.2px,#151512 2px);
  border:1px solid #5a584e;box-shadow:1px 1px 4px #0009;
}
.jb-sleeve img {
  display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;
  border:2px solid #d2bb94;border-radius:2px;
  box-shadow:0 0 0 1px #161310,2px 3px 5px #000c;
}
.jb-ledge {
  position:absolute;z-index:6;left:2%;right:2%;bottom:0;height:8.5%;min-height:10px;pointer-events:none;
  border-radius:3px 3px 0 0;
  background: repeating-linear-gradient(1deg,#ffffff0b 0 1px,transparent 1px 3px),linear-gradient(180deg,#ffefd0 0%,#98785c 11%,#af8e70 40%,#87664d 73%,#422e23 100%);
  box-shadow:0 -1px 0 #291a11,0 -3px 8px #0b080773;
}
.jb-ledge::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,#32221977,#ffdab133 18%,#271a1070 44%,#d7b69355 67%,#3d2a1d99);}
.jb-ledge::before {content:"";position:absolute;z-index:1;left:25%;right:25%;bottom:0;height:calc(100% + 4px);border:1px solid #79614b;border-bottom:0;border-radius:2px 2px 0 0;background:repeating-linear-gradient(1deg,#ffffff12 0 1px,transparent 1px 3px),linear-gradient(105deg,#a1856a,#d2b69a 27%,#917457 70%,#b59b7b);box-shadow:inset 0 1px #f3d9bc,0 0 3px #0c0906a6;}
.jb-drive {padding: 2px 3% 0;}
.jb-drive-rail {
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;position:relative;
  isolation:isolate;min-height:44px;
}
.jb-drive-rail::before {
  content:"";position:absolute;inset:5px 0;z-index:-1;border-radius:11px;
  background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px 2px),var(--bronze);
  border:1px solid #684b35;box-shadow:inset 0 1px #f4dcc0,inset 0 -2px #735640,0 2px 3px #210a07;
}
.jb-step {position:relative;color:#2b2117;font-size:13px;text-shadow:0 1px #ffe4c0;padding:0;}
.jb-step:active{transform:translateY(1px)}
.jb-step span,.jb-slot{pointer-events:none}
.jb-roller {
  --throw:0px;--spin:0px;
  position:relative;height:46px;min-width:0;touch-action:none;cursor:grab;
}
.jb-roller.dragging {cursor:grabbing;}
.jb-slot {
  position:absolute;top:32%;bottom:32%;left:0;right:0;border-radius:5px;
  background:linear-gradient(#160f0b,#2d231b 72%,#514030);
  box-shadow:inset 0 2px 4px #070403,0 1px #f4d7b0,0 -1px #553a28;
}
.jb-grip {
  position:absolute;pointer-events:none;left:50%;top:1px;bottom:1px;width:35%;min-width:54px;max-width:99px;
  transform:translateX(-50%) translateX(var(--throw));
  transition:transform 210ms cubic-bezier(.18,.86,.25,1);
  background:linear-gradient(90deg,#28180c9a,transparent 10%,transparent 88%,#291e159a),
    var(--knurl) repeat-x var(--spin) center / auto 100%,#9f7953;
  border:1px solid #6d5641;border-radius:8px / 18px;
  box-shadow:inset 0 1px 1px #fff3d9b0,inset 0 -2px 3px #412a18ac,0 2px 3px #140b0888;
}
.jb-grip::before,.jb-grip::after {
  content:"";position:absolute;top:7%;bottom:7%;width:5px;border-radius:2px;
  background:linear-gradient(#fff0d6,#947253 22%,#e6cdb0 43%,#825e42 80%,#3c2d21);
  box-shadow:0 0 0 .6px #443023,inset 1px 0 #ebd3b0;
}
.jb-grip::before{left:-5px}.jb-grip::after{right:-5px}.dragging .jb-grip{transition:none}
.jb-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 0;font-size:12px;font-weight:650;letter-spacing:.07em}
.jb-hint::before,.jb-hint::after{content:"";width:23px;height:1px;background:#d7bf9e8c}
.jb-index {
  position:relative;min-height:0;margin:0 1px;padding:12px 6px 8px;
  border:3px solid #814038;border-radius:15px 15px 12px 12px;
  background:var(--stock) repeat 0 0 / 210px 59px,#e2cfaf;
  box-shadow:0 0 0 1px #431611,inset 0 1px #fff0ce,inset 0 0 7px #8a5b36,0 1px 1px #b06354;
}
.jb-index>.jb-screw{top:4px;}
#jb-list {
  position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#9e8160 #ceb797;
  border-top:1px solid #997c5a;border-bottom:1px solid #9f815e;
}
.jb-row {
  display:grid;grid-template-columns:12px 30px minmax(0,1fr);grid-template-areas:"marker number title";gap:5px;align-items:center;white-space:nowrap;
  min-height:var(--jb-row-height);width:100%;text-align:left;padding:5px 8px 5px 3px;
  color:var(--jb-ink);background:transparent;border-bottom:1px solid #a48a68;
  font-family:Manrope,"Yu Gothic UI",sans-serif;font-size:clamp(15px,4.5cqw,22px);font-weight:730;line-height:1.18;
}
.jb-row:last-child{border-bottom:0}.jb-row::before {content:"";grid-area:marker;width:0;height:0;}
.jb-row[aria-pressed="true"] {background:linear-gradient(#ffffff10,#ffffff10),var(--jb-accent);}
.jb-row[aria-pressed="true"]::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid var(--jb-ink);}
.jb-row-number {grid-area:number;font-variant-numeric:tabular-nums;font-size:.9em;font-weight:650;}
.jb-row-title{grid-area:title;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jb-foot{position:relative;text-align:center;padding:clamp(4px,1.4dvh,13px) 0 clamp(25px,5.1dvh,49px);}
.jb-foot .jb-screw{bottom:3px;}
.jb-confirm {
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12%;width:77%;
  min-height:clamp(50px,8.2dvh,74px);padding:8px 12% 8px 9%;background:var(--jb-accent);color:var(--jb-ink);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 8px),0 8px);
  mask:radial-gradient(circle at left center,transparent 6px,#000 6.7px) left/50.2% 100% no-repeat,radial-gradient(circle at right center,transparent 6px,#000 6.7px) right/50.2% 100% no-repeat;
  font-size:clamp(20px,6.5cqw,31px);line-height:1.2;font-weight:850;white-space:nowrap;
}
.jb-confirm::before {content:"";position:absolute;left:15.5%;top:6px;bottom:6px;width:2px;background:repeating-linear-gradient(to bottom,#352820a6 0 3px,transparent 3px 7px);}
.jb-confirm span:last-child{font:500 1.12em/1 Arial,sans-serif}.jb-confirm:active{transform:translateY(1px)}
.jukebox :focus-visible{outline:2px solid #fff1c1;outline-offset:-3px}.jb-row:focus-visible,.jb-confirm:focus-visible{outline-color:var(--jb-ink);}
@media(max-height:660px){
  .jb-chassis{gap:5px;grid-template-rows:auto minmax(114px,1fr) auto calc(var(--jb-row-height) * var(--jb-visible-rows,3) + 29px) auto;}
  .jb-brand{min-height:42px;padding:1px 3%;}.jb-brand small{margin-top:0;}
  .jb-foot{padding:3px 0 20px;}.jb-hint{font-size:10px;margin-top:0;}
}
@media(prefers-reduced-motion:reduce){
  .jb-sleeve,.jb-grip{transition:none;}
}