/* Instrument materials: decorative layers never intercept the playable frets. */
body.bb-studio .bb-mobile-fretboard {
  --wood-light:#68412c;
  --wood-mid:#492c20;
  --wood-dark:#261a15;
  --binding:#b99565;
  background:radial-gradient(ellipse at 50% 65%,#343b3e 0,transparent 65%),linear-gradient(145deg,#202529,#14181c);
  box-shadow:inset 0 1px #ffffff0e;
}
body.bb-studio[data-studio=electric] .bb-mobile-fretboard {
  --wood-light:#d1af70; --wood-mid:#b08a4b; --wood-dark:#886134; --binding:#e0c48c;
}
body.bb-studio[data-studio=distorted] .bb-mobile-fretboard {
  --wood-light:#393333; --wood-mid:#292423; --wood-dark:#141314; --binding:#a7a09a;
}
body.bb-studio[data-studio=bass] .bb-mobile-fretboard {
  --wood-light:#775237; --wood-mid:#573922; --wood-dark:#2d211b; --binding:#be9b70;
}
body.bb-studio[data-studio=banjo] .bb-mobile-fretboard {
  --wood-light:#514138; --wood-mid:#322923; --wood-dark:#181816; --binding:#c6bfa8;
}
body.bb-studio .bb-mobile-fret-scroll {
  position:relative;
  border:1px solid #080a0c;
  border-radius:10px;
  background:#111417;
  box-shadow:0 15px 24px #0007,0 3px 5px #000b,inset 0 1px #fff2;
  scrollbar-color:#8e7961 #171a1c;
}
body.bb-studio .bb-mobile-fret-grid {
  position:relative;
  padding:10px 12px 18px;
  border-top:3px solid var(--binding);
  border-bottom:4px solid var(--binding);
  border-radius:8px;
  background:
    repeating-linear-gradient(0.4deg,transparent 0 2px,#00000015 3px,transparent 4px 7px),
    repeating-linear-gradient(-0.7deg,transparent 0 12px,#fbe1b514 13px,transparent 14px 31px),
    repeating-linear-gradient(0.15deg,#190c0400 0 22px,#190c0425 24px,transparent 28px 63px),
    radial-gradient(ellipse at 40% 10%,#ffe0ac20,transparent 70%),
    linear-gradient(90deg,var(--wood-dark),var(--wood-mid) 15%,var(--wood-light) 55%,var(--wood-mid));
  box-shadow:inset 0 5px 8px #0008,inset 0 -6px 10px #0009,inset 0 1px #fff5;
}
body.bb-studio .bb-mobile-fret-number {
  align-self:start;
  min-height:25px;
  color:#fff0d3;
  font:600 10px/1 'Segoe UI',sans-serif;
  text-shadow:0 1px 3px #000;
}
body.bb-studio .bb-mobile-fret-number.is-marker::after { display:none; }
body.bb-studio .bb-mobile-fret-corner,
body.bb-studio .bb-mobile-string-label {
  background:linear-gradient(90deg,#151719,#282728);
  color:#d6c6b0;
  border-right:1px solid #0009;
  z-index:7;
  text-shadow:0 1px #000;
}
body.bb-studio .bb-mobile-fret-corner { font-size:9px; letter-spacing:.6px; border-radius:5px 0 0 0; }
body.bb-studio .bb-mobile-string-label:last-of-type { border-radius:0 0 0 5px; }
body.bb-studio .bb-mobile-fret,
body.bb-studio .bb-mobile-fret.is-open { border-right:0; overflow:visible; }
body.bb-studio .bb-mobile-fret::after {
  content:'';
  position:absolute;
  right:0; top:0; bottom:0;
  width:5px;
  z-index:2;
  border-radius:2px;
  background:linear-gradient(90deg,#343431,#b7b8ae 22%,#fffff0 42%,#aaaba4 62%,#4e504e);
  box-shadow:2px 0 3px #0008,-1px 0 1px #0006;
  pointer-events:none;
}
body.bb-studio .bb-mobile-fret.is-open::after {
  width:9px;
  background:linear-gradient(90deg,#756956,#efe2bc 24%,#fff6dc 48%,#cebf9b 80%,#7c715e);
  box-shadow:3px 0 5px #0009;
}
body.bb-studio .bb-mobile-fret::before {
  top:50%; left:0; right:0;
  z-index:3;
  height:var(--string-gauge,1px);
  transform:translateY(-50%);
  background:linear-gradient(180deg,#fffbea,#d1cbc0 35%,#716c61 65%,#eee8d6);
  box-shadow:0 2px 2px #000c,0 -0.5px #fff5;
  pointer-events:none;
}
body.bb-studio .bb-mobile-fret.bb-wound-string::before {
  background:
    repeating-linear-gradient(100deg,#30292099 0 1px,#fff2 1px 2.5px),
    linear-gradient(180deg,#fff0cc,#beab84 35%,#625748 65%,#ded1b5);
}
body.bb-studio .bb-mobile-fret span {
  z-index:5;
  min-width:27px;
  height:25px;
  box-sizing:border-box;
  border:1px solid #f6e2bb24;
  color:#f0e7d8;
  background:#1c1a19de;
  box-shadow:0 2px 4px #0008,inset 0 1px #fff1;
  font-size:10px;
  font-weight:600;
}
body.bb-studio .bb-mobile-fret.is-open span { border-color:#fff5; color:#211c16; background:var(--studio-accent); }
body.bb-studio .bb-mobile-fret kbd { z-index:6; }
body.bb-studio .bb-fret-inlay {
  position:absolute;
  left:50%; bottom:-7px;
  width:14px; height:14px;
  transform:translateX(-50%);
  z-index:1;
  border-radius:50%;
  background:conic-gradient(from 35deg,#fffce7,#adbdb9,#f3e7ca,#adc0bd,#f9f4df);
  box-shadow:0 0 0 1px #181410b3,inset 0 1px 2px #fff9,0 1px 2px #0008;
  pointer-events:none;
}
body.bb-studio[data-studio=electric] .bb-fret-inlay {
  background:radial-gradient(circle at 35% 30%,#474440,#111313 75%);
  box-shadow:0 0 0 1px #f6daa299,inset 0 1px 2px #000,0 1px #fff4;
}
body.bb-studio .bb-mobile-fret:hover { background:#fff1; }
body.bb-studio .bb-mobile-fret.bb-studio-sounding::before {
  animation:bb-studio-string-vibrate 150ms ease-out 2;
  filter:brightness(1.5);
}
@keyframes bb-studio-string-vibrate {
  0%,100% { transform:translateY(-50%); }
  20% { transform:translateY(calc(-50% - 1px)); }
  45% { transform:translateY(calc(-50% + 1px)); }
  70% { transform:translateY(calc(-50% - .5px)); }
}
@media(prefers-reduced-motion:reduce) {
  body.bb-studio .bb-mobile-fret.bb-studio-sounding::before { animation:none; }
}
/* Optional mouse strumming uses a pick cursor without changing touch scrolling. */
body.bb-studio .bb-pick-mode .bb-mobile-fret-grid,
body.bb-studio .bb-pick-mode .bb-mobile-fret-grid * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2246%22%20viewBox%3D%220%200%2040%2046%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22body%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23343d48%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23171d25%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23080c12%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22edge%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23c0fbff%22%2F%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%2334dff5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23008ba7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22grip%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%238c99a7%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23414d5a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23202b36%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M20%2044C15%2040%202%2022%202%2012C2-1%2038-1%2038%2012C38%2022%2025%2040%2020%2044Z%22%20fill%3D%22%23000%22%20opacity%3D%22.4%22%2F%3E%3Cpath%20d%3D%22M20%2041C16%2038%203%2021%203%2011C3%200%2037%200%2037%2011C37%2021%2024%2038%2020%2041Z%22%20fill%3D%22url(%23body)%22%20stroke%3D%22%2305090d%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M20%2041C16%2038%203%2021%203%2011C3%200%2037%200%2037%2011C37%2021%2024%2038%2020%2041Z%22%20fill%3D%22none%22%20stroke%3D%22url(%23edge)%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M8%2011C8%205%2031%205%2032%2011%22%20fill%3D%22none%22%20stroke%3D%22%2360717f%22%20stroke-width%3D%22.7%22%20opacity%3D%22.65%22%2F%3E%3Cpath%20d%3D%22M10%2022L20%2036L30%2022%22%20fill%3D%22none%22%20stroke%3D%22%232d3a47%22%20stroke-width%3D%22.8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%225%22%20fill%3D%22%230c121a%22%20stroke%3D%22%2333414e%22%20stroke-width%3D%22.7%22%2F%3E%3Cg%20fill%3D%22url(%23grip)%22%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%221.5%22%20rx%3D%22.75%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2218%22%20width%3D%2212%22%20height%3D%221.5%22%20rx%3D%22.75%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2222%22%20width%3D%228%22%20height%3D%221.5%22%20rx%3D%22.75%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M18%2030L20%2033L22%2030%22%20fill%3D%22none%22%20stroke%3D%22%2342dcef%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 20 41, crosshair;
}
#bb-studio-pick-help { margin-top: 8px; }