/* The floating panel is the only positioned hit area. */
body.player-ready {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

#coastal-player.coastal-player {
  position: fixed;
  z-index: 900;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(480px, calc(100% - 24px));
  margin: 0;
  padding: 5px 8px 0;
  box-sizing: border-box;
  border: 1px solid rgb(204 161 91 / .48);
  border-radius: 6px;
  background: rgb(8 8 7 / .98);
  color: #efe4cc;
  box-shadow: 0 8px 30px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 232 185 / .045);
  font-family: var(--sans, system-ui, sans-serif);
  line-height: 1.3;
  pointer-events: auto;
  isolation: isolate;
}

#coastal-player.coastal-player,
#coastal-player.coastal-player * {
  box-sizing: border-box;
}

#coastal-player.coastal-player[hidden] {
  display: none;
}

#coastal-player.coastal-player .player-bar {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
}

#coastal-player.coastal-player .player-bar button {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #dfb46b;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

#coastal-player.coastal-player .player-bar button.player-toggle {
  flex-basis: auto;
  width: auto;
  min-width: 70px;
  gap: 6px;
  padding-inline: 8px;
  background: rgb(211 161 78 / .09);
  border-color: rgb(211 161 78 / .18);
}

#coastal-player.coastal-player .player-toggle-label {
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

#coastal-player.coastal-player .player-bar button svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

#coastal-player.coastal-player .player-bar button:focus-visible {
  outline: 2px solid #ffda97;
  outline-offset: -3px;
  background: rgb(211 161 78 / .16);
}

#coastal-player.coastal-player .player-bar button:disabled {
  opacity: .45;
  cursor: default;
}

#coastal-player.coastal-player .player-song {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 3px;
  overflow: hidden;
  color: #f0e5d0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}

#coastal-player.coastal-player canvas.player-equalizer {
  display: block;
  flex: 0 0 92px;
  width: 92px;
  height: 24px;
  margin: 0 3px;
  opacity: .76;
}

#coastal-player.coastal-player .player-status {
  flex: 0 1 auto;
  max-width: 50px;
  margin: 0;
  overflow: hidden;
  color: #b8b0a0;
  font-size: 8px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#coastal-player.coastal-player .player-ribbon {
  width: 100%;
  height: 22px;
  margin: 3px 0 0;
  overflow: hidden;
  border-top: 1px solid rgb(204 161 91 / .18);
  color: #bdab8c;
  font-size: 9px;
  line-height: 21px;
  white-space: nowrap;
}

#coastal-player.coastal-player .player-ribbon-text {
  display: inline-block;
  max-width: none;
  margin: 0;
  padding: 0 5px;
  white-space: nowrap;
  transform: translateX(0);
}

#coastal-player.coastal-player.is-playing .player-ribbon-text {
  /* Start readable, including when Play is clicked while the panel is hovered. */
  animation: coastal-player-ribbon-drift 20s linear infinite;
}

#coastal-player.coastal-player:hover .player-ribbon-text,
#coastal-player.coastal-player:focus-within .player-ribbon-text {
  animation-play-state: paused;
}

@keyframes coastal-player-ribbon-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

#coastal-player.coastal-player .player-song:focus-visible{outline:2px solid #ffda97;outline-offset:3px}
#coastal-player.coastal-player .player-mute[aria-pressed="true"]{opacity:.55}

@media (hover: hover) and (pointer: fine) {
  #coastal-player.coastal-player .player-bar button:enabled:hover {
    background: rgb(211 161 78 / .16);
    color: #ffe0a0;
  }
}

@media (max-width: 460px) {
  #coastal-player.coastal-player {
    padding-inline: 5px;
  }

  #coastal-player.coastal-player .player-bar {
    gap: 1px;
  }

  #coastal-player.coastal-player .player-bar button.player-toggle {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  #coastal-player.coastal-player .player-toggle-label,
  #coastal-player.coastal-player .player-status {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    max-width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  #coastal-player.coastal-player .player-song {
    margin-inline: 2px;
    font-size: 11px;
  }

  #coastal-player.coastal-player canvas.player-equalizer {
    flex-basis: 56px;
    width: 56px;
    height: 22px;
    margin-inline: 2px;
  }
}

@media (max-width: 340px) {
  #coastal-player.coastal-player canvas.player-equalizer {
    flex-basis: 42px;
    width: 42px;
    margin-inline: 1px;
  }

  #coastal-player.coastal-player .player-ribbon {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #coastal-player.coastal-player.is-playing .player-ribbon-text {
    padding-left: 5px;
    animation: none;
    transform: none;
  }
}