/* ═══════════════════════════════════════════════════
   YAVAPAI-APACHE NATION — Audio / Drum Toggle
   Fixed drum icon · Active & muted states
   Does not touch any other stylesheet or component.
═══════════════════════════════════════════════════ */

/* ── DRUM BUTTON CONTAINER ────────────────────── */
.audio-btn {
  position:   fixed;
  bottom:     28px;
  right:      28px;
  z-index:    900;

  width:      42px;
  height:     42px;
  padding:    0;
  border-radius: 50%;

  background:   rgba(8, 4, 8, 0.74);
  border:       1px solid rgba(200, 144, 10, 0.30);

  display:        flex;
  align-items:    center;
  justify-content: center;

  cursor:  pointer;
  opacity: 0.50;

  transition:
    opacity       0.30s ease,
    border-color  0.30s ease,
    background    0.30s ease;

  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.audio-btn:hover {
  opacity:      1;
  border-color: rgba(200, 144, 10, 0.70);
  background:   rgba(8, 4, 8, 0.92);
}

.audio-btn:focus-visible {
  outline:        1px solid rgba(200, 144, 10, 0.55);
  outline-offset: 4px;
}

/* ── DRUM SVG — ACTIVE STATE ──────────────────── */

/* Outer frame ring */
.drum-frame {
  stroke:          var(--sunray-gold);
  stroke-width:    1.4;
  fill:            none;
  transition:
    stroke   0.30s ease,
    opacity  0.30s ease;
}

/* Inner drum head */
.drum-head {
  stroke:          var(--sunray-gold);
  stroke-width:    0.9;
  fill:            rgba(200, 144, 10, 0.09);
  transition:
    stroke   0.30s ease,
    fill     0.30s ease,
    opacity  0.30s ease;
}

/* Decorative tension line — horizon across the head */
.drum-line {
  stroke:          var(--sunray-gold);
  stroke-width:    0.5;
  opacity:         0.22;
  transition:
    stroke   0.30s ease,
    opacity  0.30s ease;
}

/* Beater stick — suggests active playing */
.drum-beater {
  stroke:          var(--canyon-sand);
  stroke-width:    1.8;
  stroke-linecap:  round;
  opacity:         0.62;
  transition:
    opacity  0.30s ease,
    stroke   0.30s ease;
}

/* Tension lugs — short radial marks between hoop and head */
.drum-lug {
  stroke:          var(--sunray-gold);
  stroke-width:    1.2;
  stroke-linecap:  round;
  opacity:         0.44;
  transition:
    stroke   0.30s ease,
    opacity  0.30s ease;
}

/* Mallet bead — filled circle at beater tip */
.drum-mallet {
  fill:            var(--canyon-sand);
  opacity:         0.68;
  transition:
    fill     0.30s ease,
    opacity  0.30s ease;
}

/* ── MUTED STATE ──────────────────────────────── */
.audio-btn.muted {
  opacity:      0.28;
  border-color: rgba(212, 184, 150, 0.16);
}

.audio-btn.muted:hover {
  opacity:      0.58;
  border-color: rgba(212, 184, 150, 0.36);
}

.audio-btn.muted .drum-frame {
  stroke:  var(--canyon-sand);
  opacity: 0.45;
}

.audio-btn.muted .drum-head {
  stroke:  var(--canyon-sand);
  fill:    transparent;
  opacity: 0.32;
}

.audio-btn.muted .drum-line {
  opacity: 0.08;
}

/* Beater and mallet lift away — drum goes silent */
.audio-btn.muted .drum-beater {
  opacity: 0;
}

.audio-btn.muted .drum-mallet {
  opacity: 0;
}

.audio-btn.muted .drum-lug {
  stroke:  var(--canyon-sand);
  opacity: 0.16;
}

/* ── MOBILE ADJUSTMENT ────────────────────────── */
@media (max-width: 480px) {
  .audio-btn {
    bottom: 20px;
    right:  20px;
    width:  38px;
    height: 38px;
  }
}