.animal-audio-ai { display: none; }

.zoo-audio-player {
  /* Barvy */
  --_clr-audioplayer-track:        #ddd;
  --_clr-audioplayer-progress:     #333;
  --_clr-audioplayer-btn-bg:       #fff;
  --_clr-audioplayer-btn-bg-hover: #f0f0f0;
  --_clr-audioplayer-btn-border:   #ccc;
  --_clr-audioplayer-lang-fg:      #555;
  --_clr-audioplayer-lang-active:  #333;

  /* Velikosti */
  --_sz-audioplayer-circle:     64px;  /* průměr kruhu */
  --_sz-audioplayer-ring:        3px;  /* tloušťka progress linky */
  --_sz-audioplayer-btn-inset:   3px;  /* mezera mezi kruhem a tlačítkem */
  --_sz-audioplayer-icon:       28px;  /* velikost SVG ikony */
  --_sz-audioplayer-lang:       var(--fs-base-lg);  /* velikost písma zkratek jazyků */
  --_sz-audioplayer-gap:         1rem; /* mezera mezi kruhem a jazyky */
  --_sz-audioplayer-lang-gap:  0.6rem; /* mezera mezi zkratkami jazyků */

  --_ico-audioplayer-volume: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'/%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14'/%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'/%3E%3C/svg%3E");
  --_ico-audioplayer-pause:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_sz-audioplayer-gap);
  padding-block-start: var(--spacing);
  padding-inline: var(--spacing);
}

.zoo-circle {
  position: relative;
  width:  var(--_sz-audioplayer-circle);
  height: var(--_sz-audioplayer-circle);
  flex-shrink: 0;
  cursor: pointer;
}

.zoo-circle svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  pointer-events: none;
  width:  var(--_sz-audioplayer-circle);
  height: var(--_sz-audioplayer-circle);
}

.zoo-track {
  fill: none;
  stroke: var(--_clr-audioplayer-track);
  stroke-width: var(--_sz-audioplayer-ring);
}

.zoo-ring {
  fill: none;
  stroke: var(--_clr-audioplayer-progress);
  stroke-width: var(--_sz-audioplayer-ring);
  stroke-linecap: round;
}

.zoo-btn {
  position: absolute;
  inset: var(--_sz-audioplayer-btn-inset);
  border-radius: 50%;
  background: var(--_clr-audioplayer-btn-bg);
  border: 0.5px solid var(--_clr-audioplayer-btn-border);
  transition: background 0.15s;
  pointer-events: none;
}

.zoo-btn::after {
  content: var(--_ico-audioplayer-volume);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.zoo-circle.playing .zoo-btn::after {
  content: var(--_ico-audioplayer-pause);
}

.zoo-circle:hover .zoo-btn {
  background: var(--_clr-audioplayer-btn-bg-hover);
}

.zoo-langs {
  display: flex;
  gap: var(--_sz-audioplayer-lang-gap);
  align-items: center;
}

.zoo-lang {
  font-size: var(--_sz-audioplayer-lang);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--_clr-audioplayer-lang-fg);
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}

.zoo-lang.active {
  color: var(--_clr-audioplayer-lang-active);
  border-bottom-color: var(--_clr-audioplayer-lang-active);
}