/* Guitar Chords Chart CSS Sprites */
/* Image: 1200x1996px with 12 columns and 11 rows of chords */

.chord {
  background-image: url('/chords/diagrams/lessons-guitar-chords-chart.jpg');
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 165px;
  background-size: 1100px 2000px;
  /* Adjusted dimensions to fix sprite alignment */
  overflow: hidden;
  /* Clip to prevent showing adjacent chords */
  transform: scale(0.7);
  transform-origin: top center;
  margin-bottom: -50px;
  /* Compensate for scale to prevent large spacing */
}

/* Row 0: Ab variations */
.chord-ab {
  background-position: -17px -127px;
}

.chord-gsharp-m {
  background-position: -113.6px -127px;
}

.chord-ab-6 {
  background-position: -210.2px -127px;
}

.chord-ab-7 {
  background-position: -306.8px -127px;
}

.chord-ab-9 {
  background-position: -403.4px -127px;
}

.chord-gsharp-m6 {
  background-position: -500px -127px;
}

.chord-gsharp-m7 {
  background-position: -596.6px -127px;
}

.chord-ab-maj7 {
  background-position: -693.2px -127px;
}

.chord-gsharp-dim {
  background-position: -789.8px -127px;
}

.chord-ab-plus {
  background-position: -886.4px -127px;
}

.chord-ab-sus {
  background-position: -983px -127px;
}

/* Row 1: A variations */
.chord-a {
  background-position: -17px -282px;
}

.chord-a-m {
  background-position: -113.6px -282px;
}

.chord-a-6 {
  background-position: -210.2px -282px;
}

.chord-a-7 {
  background-position: -306.8px -282px;
}

.chord-a-9 {
  background-position: -403.4px -282px;
}

.chord-a-m6 {
  background-position: -500px -282px;
}

.chord-a-m7 {
  background-position: -596.6px -282px;
}

.chord-a-maj7 {
  background-position: -693.2px -282px;
}

.chord-a-dim {
  background-position: -789.8px -282px;
}

.chord-a-plus {
  background-position: -886.4px -282px;
}

.chord-a-sus {
  background-position: -983px -282px;
}

/* Row 2: Bb variations */
.chord-bb {
  background-position: -17px -433px;
}

.chord-bb-m {
  background-position: -113.6px -433px;
}

.chord-bb-6 {
  background-position: -210.2px -433px;
}

.chord-bb-7 {
  background-position: -306.8px -433px;
}

.chord-bb-9 {
  background-position: -403.4px -433px;
}

.chord-bb-m6 {
  background-position: -500px -433px;
}

.chord-bb-m7 {
  background-position: -596.6px -433px;
}

.chord-bb-maj7 {
  background-position: -693.2px -433px;
}

.chord-bb-dim {
  background-position: -789.8px -433px;
}

.chord-bb-plus {
  background-position: -886.4px -433px;
}

.chord-bb-sus {
  background-position: -983px -433px;
}

/* Row 3: B variations */
.chord-b {
  background-position: -17px -586px;
}

.chord-b-m {
  background-position: -113.6px -586px;
}

.chord-b-6 {
  background-position: -210.2px -586px;
}

.chord-b-7 {
  background-position: -306.8px -586px;
}

.chord-b-9 {
  background-position: -403.4px -586px;
}

.chord-b-m6 {
  background-position: -500px -586px;
}

.chord-b-m7 {
  background-position: -596.6px -586px;
}

.chord-b-maj7 {
  background-position: -693.2px -586px;
}

.chord-b-dim {
  background-position: -789.8px -586px;
}

.chord-b-plus {
  background-position: -886.4px -586px;
}

.chord-b-sus {
  background-position: -983px -586px;
}

/* Row 4: C variations */
.chord-c {
  background-position: -17px -739px;
}

.chord-c-m {
  background-position: -113.6px -739px;
}

.chord-c-6 {
  background-position: -210.2px -739px;
}

.chord-c-7 {
  background-position: -306.8px -739px;
}

.chord-c-9 {
  background-position: -403.4px -739px;
}

.chord-c-m6 {
  background-position: -500px -739px;
}

.chord-c-m7 {
  background-position: -596.6px -739px;
}

.chord-c-maj7 {
  background-position: -693.2px -739px;
}

.chord-c-dim {
  background-position: -789.8px -739px;
}

.chord-c-plus {
  background-position: -886.4px -739px;
}

.chord-c-sus {
  background-position: -983px -739px;
}

/* Row 5: Db variations */
.chord-db {
  background-position: -17px -892px;
}

.chord-csharp-m {
  background-position: -113.6px -892px;
}

.chord-db-6 {
  background-position: -210.2px -892px;
}

.chord-db-7 {
  background-position: -306.8px -892px;
}

.chord-db-9 {
  background-position: -403.4px -892px;
}

.chord-csharp-m6 {
  background-position: -500px -892px;
}

.chord-csharp-m7 {
  background-position: -596.6px -892px;
}

.chord-db-maj7 {
  background-position: -693.2px -892px;
}

.chord-csharp-dim {
  background-position: -789.8px -892px;
}

.chord-db-plus {
  background-position: -886.4px -892px;
}

.chord-db-sus {
  background-position: -983px -892px;
}

/* Row 6: D variations */
.chord-d {
  background-position: -17px -1046px;
}

.chord-d-m {
  background-position: -113.6px -1046px;
}

.chord-d-6 {
  background-position: -210.2px -1046px;
}

.chord-d-7 {
  background-position: -306.8px -1046px;
}

.chord-d-9 {
  background-position: -403.4px -1046px;
}

.chord-d-m6 {
  background-position: -500px -1046px;
}

.chord-d-m7 {
  background-position: -596.6px -1046px;
}

.chord-d-maj7 {
  background-position: -693.2px -1046px;
}

.chord-d-dim {
  background-position: -789.8px -1046px;
}

.chord-d-plus {
  background-position: -886.4px -1046px;
}

.chord-d-sus {
  background-position: -983px -1046px;
}

/* Row 7: Eb variations */
.chord-eb {
  background-position: -17px -1199px;
}

.chord-eb-m {
  background-position: -113.6px -1199px;
}

.chord-eb-6 {
  background-position: -210.2px -1199px;
}

.chord-eb-7 {
  background-position: -306.8px -1199px;
}

.chord-eb-9 {
  background-position: -403.4px -1199px;
}

.chord-eb-m6 {
  background-position: -500px -1199px;
}

.chord-eb-m7 {
  background-position: -596.6px -1199px;
}

.chord-eb-maj7 {
  background-position: -693.2px -1199px;
}

.chord-eb-dim {
  background-position: -789.8px -1199px;
}

.chord-eb-plus {
  background-position: -886.4px -1199px;
}

.chord-eb-sus {
  background-position: -983px -1199px;
}

/* Row 8: E variations */
.chord-e {
  background-position: -17px -1352px;
}

.chord-e-m {
  background-position: -113.6px -1352px;
}

.chord-e-6 {
  background-position: -210.2px -1352px;
}

.chord-e-7 {
  background-position: -306.8px -1352px;
}

.chord-e-9 {
  background-position: -403.4px -1352px;
}

.chord-e-m6 {
  background-position: -500px -1352px;
}

.chord-e-m7 {
  background-position: -596.6px -1352px;
}

.chord-e-maj7 {
  background-position: -693.2px -1352px;
}

.chord-e-dim {
  background-position: -789.8px -1352px;
}

.chord-e-plus {
  background-position: -886.4px -1352px;
}

.chord-e-sus {
  background-position: -983px -1352px;
}

/* Row 9: F variations */
.chord-f {
  background-position: -17px -1505px;
}

.chord-f-m {
  background-position: -113.6px -1505px;
}

.chord-f-6 {
  background-position: -210.2px -1505px;
}

.chord-f-7 {
  background-position: -306.8px -1505px;
}

.chord-f-9 {
  background-position: -403.4px -1505px;
}

.chord-f-m6 {
  background-position: -500px -1505px;
}

.chord-f-m7 {
  background-position: -596.6px -1505px;
}

.chord-f-maj7 {
  background-position: -693.2px -1505px;
}

.chord-f-dim {
  background-position: -789.8px -1505px;
}

.chord-f-plus {
  background-position: -886.4px -1505px;
}

.chord-f-sus {
  background-position: -983px -1505px;
}

/* Row 10: F# variations */
.chord-fsharp {
  background-position: -17px -1658px;
}

.chord-fsharp-m {
  background-position: -113.6px -1658px;
}

.chord-gb-6 {
  background-position: -210.2px -1658px;
}

.chord-fsharp-7 {
  background-position: -306.8px -1658px;
}

.chord-fsharp-9 {
  background-position: -403.4px -1658px;
}

.chord-fsharp-m6 {
  background-position: -500px -1658px;
}

.chord-fsharp-m7 {
  background-position: -596.6px -1658px;
}

.chord-gb-maj7 {
  background-position: -693.2px -1658px;
}

.chord-fsharp-dim {
  background-position: -789.8px -1658px;
}

.chord-gb-plus {
  background-position: -886.4px -1658px;
}

.chord-gb-sus {
  background-position: -983px -1658px;
}

/* Row 11: G variations */
.chord-g {
  background-position: -17px -1811px;
}

.chord-g-m {
  background-position: -113.6px -1811px;
}

.chord-g-6 {
  background-position: -210.2px -1811px;
}

.chord-g-7 {
  background-position: -306.8px -1811px;
}

.chord-g-9 {
  background-position: -403.4px -1811px;
}

.chord-g-m6 {
  background-position: -500px -1811px;
}

.chord-g-m7 {
  background-position: -596.6px -1811px;
}

.chord-g-maj7 {
  background-position: -693.2px -1811px;
}

.chord-g-dim {
  background-position: -789.8px -1811px;
}

.chord-g-plus {
  background-position: -886.4px -1811px;
}

.chord-g-sus {
  background-position: -983px -1811px;
}

/* ========================================
   AUGMENTED CHORD ALIASES (aug = plus)
   ======================================== */

/* Row 0: Ab/G# augmented */
.chord-ab-aug {
  background-position: -886.4px -127px;
}

.chord-gsharp-aug {
  background-position: -886.4px -127px;
}

/* Row 1: A augmented */
.chord-a-aug {
  background-position: -886.4px -282px;
}

/* Row 2: Bb augmented */
.chord-bb-aug {
  background-position: -886.4px -433px;
}

.chord-asharp-aug {
  background-position: -886.4px -433px;
}

/* Row 3: B augmented */
.chord-b-aug {
  background-position: -886.4px -586px;
}

/* Row 4: C augmented */
.chord-c-aug {
  background-position: -886.4px -739px;
}

/* Row 5: Db/C# augmented */
.chord-db-aug {
  background-position: -886.4px -892px;
}

.chord-csharp-aug {
  background-position: -886.4px -892px;
}

/* Row 6: D augmented */
.chord-d-aug {
  background-position: -886.4px -1046px;
}

/* Row 7: Eb augmented */
.chord-eb-aug {
  background-position: -886.4px -1199px;
}

.chord-dsharp-aug {
  background-position: -886.4px -1199px;
}

/* Row 8: E augmented */
.chord-e-aug {
  background-position: -886.4px -1352px;
}

/* Row 9: F augmented */
.chord-f-aug {
  background-position: -886.4px -1505px;
}

/* Row 10: F#/Gb augmented */
.chord-fsharp-aug {
  background-position: -886.4px -1658px;
}

.chord-gb-aug {
  background-position: -886.4px -1658px;
}

/* Row 11: G augmented */
.chord-g-aug {
  background-position: -886.4px -1811px;
}

/* Responsive scaling - adjust size while maintaining aspect ratio */
@media (max-width: 768px) {
  .chord {
    width: 60px;
    height: 109px;
    background-size: 720px 1198px;
  }

  /* Scale all background positions by 0.6 */
  .chord-gsharp-m,
  .chord-a-m,
  .chord-bb-m,
  .chord-b-m,
  .chord-c-m,
  .chord-csharp-m,
  .chord-d-m,
  .chord-eb-m,
  .chord-e-m,
  .chord-f-m,
  .chord-fsharp-m,
  .chord-g-m {
    background-position-x: -60px;
  }

  /* Add more scaled positions as needed */
}