/* 1pen Audio Bar — compact glass box, title above track, coin knob on track */
.onepen-audio{
  --gold:#D4B66C;
  --gold-soft:rgba(212,182,108,.55);
  --track:rgba(255,255,255,.18);
  --arrow-gap:28px;

  /* master vertical reference for coin + arrows */
  --trackY: calc(50% + 30px);

  color:#eae6d0;
  display:inline-flex;
  justify-content:center;
  padding:14px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(20,28,32,.14), rgba(12,16,20,.12));
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(8px) saturate(112%);
  max-width:90vw;
}

/* slider container = positioning context */
.onepen-audio__volwrap{
  position:relative;
  width:min(460px,82vw);
  padding-top:54px;
  padding-inline:var(--arrow-gap);
}

/* title */
.onepen-audio__title{
  position:absolute;
  top:8px; left:0; right:0;
  z-index:3;
  pointer-events:none;
  font-family:"Tangerine", cursive;
  font-size:28px;
  text-align:center;
  color:var(--gold);
}

/* slider */
.onepen-audio__volume{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  background:var(--track);
  border-radius:3px;
}
.onepen-audio__volume::-webkit-slider-thumb{ width:0; height:0; }
.onepen-audio__volume::-moz-range-thumb{ width:0; height:0; }

/* reset buttons */
.onepen-audio__btn,
.onepen-audio__play{
  appearance:none;
  background:none !important;
  border:0;
  cursor:pointer;
}

/* PLAY COIN */
.onepen-audio__play{
  position:absolute;
  z-index:2;
  top:var(--trackY);
  left:calc(var(--trackLeft,0px) + var(--trackWidth,0px) * var(--vol,.5));
  transform:translate(-50%,-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  background-image:url("images/playbtn.webp") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

.onepen-audio__play::before{ display:none !important; }

.onepen-audio__play.is-pause::after{
  content:"";
  position:absolute;
  inset:22px;
  background:linear-gradient(
    90deg,
    rgba(233,243,246,.65) 40%,
    transparent 40% 60%,
    rgba(233,243,246,.65) 60%
  );
  border-radius:3px;
}

/* CHEVRONS — FIXED */
.onepen-audio__prev,
.onepen-audio__next{
  position:absolute;
  z-index:2;
  top:var(--trackY);
  width:28px;
  height:28px;
  transform:translateY(-50%);
  background:none;
  border:0;
}
.onepen-audio__prev{
  left:calc(var(--arrow-gap) * 0.5);
  transform:translate(-50%,-50%);
}

.onepen-audio__next{
  right:calc(var(--arrow-gap) * 0.5);
  transform:translate(50%,-50%);
}


.onepen-audio__prev::before,
.onepen-audio__next::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%) rotate(45deg);
  opacity:.65;
}

.onepen-audio__prev::before{
  border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
}
.onepen-audio__next::before{
  border-right:2px solid var(--gold);
  border-top:2px solid var(--gold);
}