/* Shared Scene UI — Audio Panel & Back Button */

/* Audio panel container */
.ap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: rgba(10,10,18,.75);
  border: 2px solid rgba(255,150,50,.3);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100;
  backdrop-filter: blur(6px);
}

/* Audio toggle button */
.ab {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,150,50,.5);
  background: rgba(255,80,20,.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  transition: all .3s;
}
.ab:hover { background: rgba(255,80,20,.3); }
.ab.on {
  background: rgba(255,80,20,.35);
  border-color: #fa4;
  box-shadow: 0 0 10px rgba(255,120,30,.4);
}
.ab.on .wi { display: flex; }

/* Wave indicator bars */
.wi {
  display: none;
  position: absolute;
  top: -7px;
  right: -3px;
  gap: 1px;
}
.wi span {
  width: 2px;
  background: #fa4;
  border-radius: 1px;
  animation: wb .8s ease-in-out infinite;
}
.wi span:nth-child(1) { height: 5px; }
.wi span:nth-child(2) { height: 8px; animation-delay: .15s; }
.wi span:nth-child(3) { height: 4px; animation-delay: .3s; }
@keyframes wb { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* Volume slider */
.vs {
  -webkit-appearance: none;
  width: 65px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,150,50,.25);
  outline: none;
}
.vs::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f93;
  cursor: pointer;
  border: 2px solid rgba(255,200,100,.5);
}

/* Volume label */
.vl {
  color: rgba(255,180,80,.6);
  font-size: 10px;
  min-width: 24px;
  text-align: center;
}

/* Back button */
.back {
  position: fixed;
  top: 16px;
  left: 16px;
  background: rgba(10,10,18,.65);
  border: 2px solid rgba(255,150,50,.25);
  border-radius: 8px;
  padding: 6px 12px;
  z-index: 100;
  backdrop-filter: blur(6px);
  text-decoration: none;
  color: rgba(255,180,80,.7);
  font-size: 13px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  transition: border-color .3s, color .3s;
}
.back:hover {
  border-color: rgba(255,150,50,.5);
  color: rgba(255,200,100,.9);
}