/* Play Along: original characters with recorded piano, bass and acoustic percussion. */
#chordy, #barry, #tomtom {
  max-width: 940px;
  padding: 28px;
  background: radial-gradient(ellipse at 50% 40%, #fff 25%, #f0eaff 100%);
  border: 2px solid #ddd0f8;
  border-radius: 28px;
  box-shadow: 0 12px 36px #46226814;
}
#chordy .inst-panel__name, #barry .inst-panel__name, #tomtom .inst-panel__name { color: #302053; font-size: 1.8rem; }
#chordy .inst-panel__tip, #barry .inst-panel__tip, #tomtom .inst-panel__tip { color: #635279; margin-bottom: 6px; font: 500 .9rem/1.45 Jost, sans-serif; text-transform: none; }
.instrument-status { text-transform: none; text-align: center; min-height: 1.5em; color: #635279; font: 500 .8rem/1.5 Jost, sans-serif; }
.sound-retry { display: block; margin: 10px auto; padding: 12px 20px; border: 2px solid #654299; border-radius: 99px; background: #fff; color: #302053; cursor: pointer; }
.sound-retry[hidden] { display: none; }
#chordy .inst-now, #barry .inst-now, #tomtom .inst-now { margin: 12px auto; min-height: 32px; justify-content: center; background: #e9dff680; box-shadow: none; border: 0; }
#chordy .inst-now__label, #barry .inst-now__label, #tomtom .inst-now__label { color: #635279; }
#chordy .inst-now__note, #barry .inst-now__note, #tomtom .inst-now__note { color: #6235a1; text-shadow: none; }
#chordy .song-bar, #barry .song-bar, #tomtom .song-bar { margin-top: 16px; gap: 10px; }
#chordy .song-bar .lbl, #barry .song-bar .lbl, #tomtom .song-bar .lbl { color: #635279; font: 600 .86rem/1.5 Jost, sans-serif; letter-spacing: 0; text-transform: none; }
#chordy .song-btn, #barry .song-btn, #tomtom .song-btn {
  justify-content: center; min-height: 46px; color: #412562; background: #fff;
  border: 2px solid #d4c3ed; box-shadow: 0 3px 0 #e1d5f2; font-size: 1.08rem;
}
#chordy .song-btn:hover, #barry .song-btn:hover, #tomtom .song-btn:hover { background: #f9edff; border-color: #9e6bcc; }
#chordy .song-btn[aria-pressed="true"], #barry .song-btn[aria-pressed="true"], #tomtom .song-btn[aria-pressed="true"] { background: #6932a3; color: #fff; border-color: #6932a3; }
#chordy button:disabled, #barry button:disabled, #tomtom button:disabled { cursor: wait; opacity: .5; }
#chordy button:focus-visible, #barry button:focus-visible, #tomtom button:focus-visible { outline: 3px solid #a029c4; outline-offset: 4px; }

/* Each transparent hit area sits on its own piece of the unchanged kit art. */
#tomtom .drumkit { display: block; width: 100%; max-width: 760px; margin: 0 auto; }
.kit-picture { position: relative; width: 100%; aspect-ratio: 3 / 2; isolation: isolate; }
.drumkit-art { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
#tomtom .kit-hit {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
  aspect-ratio: auto; padding: 0; gap: 3px; border: 0; border-radius: 42%;
  background: transparent; box-shadow: none; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, box-shadow .12s ease;
}
#tomtom .kit-hit .pad__label {
  color: #302053; background: #ffffffed; border: 1px solid #49346044;
  border-radius: 99px; padding: 4px 9px; box-shadow: 0 2px 5px #26143233;
  font: 700 clamp(.65rem, 1.35vw, .94rem)/1.15 Jost, sans-serif; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
#tomtom .kit-hit .pad__hint { font: 700 .65rem/1 Jost, sans-serif; color: #fff; text-shadow: 0 1px 3px #111, 0 0 4px #111; }
#tomtom .kit-hit--kick { justify-content: flex-end; padding-bottom: 0; }
#tomtom .kit-hit--crash, #tomtom .kit-hit--openhat,
#tomtom .kit-hit--hat, #tomtom .kit-hit--cymbal { border-radius: 50%; }
#tomtom .kit-hit:hover { background: #ffeb7622; box-shadow: 0 0 0 2px #ffef9b66; }
#tomtom .kit-hit.is-hit { transform: translate(-50%, -50%); background: #ffe96d55; box-shadow: 0 0 0 3px #ffe768, 0 0 24px #ffe76888; }
#tomtom .kit-hit.is-hit .pad__label { background: #ffed7d; }
.kit-extras { display: flex; justify-content: center; margin-top: 4px; }
#tomtom .kit-extra {
  min-height: 48px; width: auto; padding: 10px 24px; gap: 10px; flex-direction: row;
  aspect-ratio: auto; border-radius: 99px; border: 2px solid #dec3e4;
  background: #fff0f9; color: #622761; box-shadow: 0 3px 0 #ead7ed; touch-action: manipulation;
}
#tomtom .kit-extra .pad__label { font-size: 1.05rem; }
#tomtom .kit-extra .pad__hint { color: #806080; }
#tomtom .kit-extra.is-hit { transform: translateY(2px); background: #ffe981; }

/* Barry hosts a simple row of pluckable notes, with clearly visible strings. */
#barry .bass-stage { display: flex; align-items: center; gap: 26px; max-width: 810px; margin: 18px auto; }
#barry .bass-friend { width: 150px; height: auto; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 8px 6px #47272b22); }
#barry .bass {
  flex: 1; min-width: 0; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px;
  padding: 20px 14px; border: 4px solid #795038; border-radius: 20px;
  background: linear-gradient(180deg, #674130, #43281e); box-shadow: 0 6px 0 #31211d22;
}
#barry .bass::before { background: repeating-linear-gradient(0deg, transparent 0 18px, #e4d3b488 19px 20px, transparent 21px 36px); }
#barry .bass::after { display: none; }
#barry .bstring {
  aspect-ratio: auto; min-height: 104px; min-width: 44px; width: 100%; padding: 10px 0;
  border: 2px solid #f8dab5; border-radius: 12px; gap: 10px;
  background: #fff5dc; color: #422950; box-shadow: 0 4px 0 #27131b66;
  touch-action: manipulation;
}
#barry .bstring__note { font: 700 1.75rem/1 Jost, sans-serif; }
#barry .bstring__hint { color: #786349; font: 600 .72rem/1 Jost, sans-serif; }
#barry .bstring:hover { background: #ffecac; }
#barry .bstring.is-hit { background: #ffe16a; transform: translateY(3px); border-color: #f8bd35; }
@media (max-width: 760px) {
  #barry .bass-stage { gap: 16px; }
  #barry .bass-friend { width: 120px; }
  #barry .bass { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; gap: 10px; }
  #barry .bstring { min-height: 70px; }
}
@media (max-width: 520px) {
  #chordy, #barry, #tomtom { padding: 20px 10px; border-radius: 20px; }
  #chordy .inst-panel__name, #barry .inst-panel__name, #tomtom .inst-panel__name { font-size: 1.5rem; }
  #chordy .inst-panel__tip, #barry .inst-panel__tip, #tomtom .inst-panel__tip { font-size: .8rem; padding-inline: 5px; }
  #tomtom .kit-hit .pad__label { padding: 3px 5px; font-size: .61rem; }
  #tomtom .kit-hit .pad__hint { display: none; }
  #tomtom .kit-hit--kick { padding-bottom: 0; }
  #barry .bass-stage { gap: 10px; }
  #barry .bass-friend { width: 78px; }
  #barry .bass { padding: 12px 8px; gap: 8px 5px; border-width: 3px; }
  #barry .bstring { min-width: 0; min-height: 64px; }
  #barry .bstring__note { font-size: 1.45rem; }
  #chordy .song-bar, #barry .song-bar, #tomtom .song-bar { gap: 8px; }
  #chordy .song-btn, #barry .song-btn, #tomtom .song-btn { padding: 10px 14px; }
}

/* Chordy keeps his original drawing beside a full, finger-friendly keyboard. */
#chordy .keyboard-stage { display: flex; gap: 20px; align-items: center; margin: 18px auto; max-width: 830px; }
#chordy .keyboard-friend { width: 210px; height: auto; flex: 0 0 auto; }
#chordy .keyboard { flex: 1; min-width: 0; width: 100%; height: 216px; margin: 0; padding: 0; overflow: visible; display: block; background: #382d46; border: 8px solid #382d46; border-radius: 12px; box-shadow: 0 7px 0 #cfc4e0; }
#chordy .pkey { position: absolute; top: 0; left: var(--key-x); margin: 0; width: 12.5%; height: 100%; min-width: 0; padding: 0 0 13px; background: linear-gradient(#fffefa,#fff8e9); border: 1px solid #ae9da8; border-radius: 0 0 6px 6px; display: flex; align-items: flex-end; justify-content: center; touch-action: manipulation; }
#chordy .pkey--black { width: 7.5%; height: 60%; transform: translateX(-50%); border: 1px solid #1b1129; background: linear-gradient(#584663,#251a35); z-index: 2; }
#chordy .pkey__note { font: 700 1.3rem/1 Jost,sans-serif; color: #442d5d; bottom: 34px; }
#chordy .pkey__hint { font: 600 .7rem/1 Jost,sans-serif; color: #735e7c; }
#chordy .pkey--black .pkey__hint { color: #e4d8ed; }
#chordy .pkey.is-hit { transform: translateY(2px); background: #ffe779; }
#chordy .pkey--black.is-hit { transform: translate(-50%,2px); background: #a65cda; }
#chordy .pkey:focus-visible { outline-offset: -4px; z-index: 3; }
@media(max-width:760px) {
  #chordy .keyboard-stage { flex-direction: column; gap: 4px; }
  #chordy .keyboard-friend { width: 190px; }
  #chordy .keyboard { flex: none; height: 200px; max-width: 590px; }
}
@media(max-width:520px) {
  #chordy .keyboard-friend { width: 168px; }
  #chordy .keyboard { height: 175px; border-width: 5px; }
  #chordy .pkey__note { font-size: 1rem; }
  #chordy .pkey__hint { font-size: .64rem; }
}

.instrument-controls { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; }
.stop-audio { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 44px; padding: 9px 22px; background: #602984; color: #fff; border: 2px solid #602984; border-radius: 99px; font: 600 .95rem/1.25 Jost,sans-serif; text-transform: none; cursor: pointer; }
.stop-audio:hover { background: #482061; border-color: #482061; }
.keyboard-stop-hint { font: 500 .76rem/1.3 Jost,sans-serif; text-transform: none; color: #635279; }
.inst-tabs .inst-tab[data-instrument-tab="bass"][aria-selected="true"], .inst-tabs .inst-tab[data-instrument-tab="drums"][aria-selected="true"] { color: #241336; }
@media (max-width:420px) {
  #barry .bass-stage { flex-direction: column; }
  #barry .bass-friend { width: 100px; }
  #barry .bass { width: 100%; }
}

#tomtom .kit-hit--kick .pad__label { position: absolute; top: 100%; margin-top: 2px; }
#tomtom .kit-hit--kick .pad__hint { position: absolute; top: calc(100% + 29px); }