/* Player card (listen.html): the overlay card sized to fill an iframe, with play and volume. */

:root { --margin: 0px; }

html, body { overflow: hidden; }

body.pos-tl .card, .card {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgb(14, 18, 24);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
body.pos-tl .card.show, .card.show { transform: none; }

.play-btn {
  flex: none;
  align-self: center;
  width: 56px;
  height: 56px;
  margin-left: 14px;
  border: none;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .3s, transform .1s;
}
.play-btn:active { transform: scale(.94); }
.play-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.play-btn svg { width: 28px; height: 28px; fill: currentColor; }
.play-btn .icon-stop, .play-btn.on .icon-play { display: none; }
.play-btn.on .icon-stop { display: block; }
.card.idle .play-btn:not(.on) { background: #3d9cf0; }

.content { padding: 12px 14px; }
.channel { font-size: 24px; }
.captions { font-size: 16px; }
.captions .last-heard { font-size: 14px; }
.card.ready .channel { color: #fff; }
.card.ready .live-dot { animation: none; }

.side { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-right: 14px; }
.meter { padding: 0; height: 64px; }
.volume { width: 80px; accent-color: var(--c); cursor: pointer; }
@media (hover: none), (pointer: coarse) {
  .volume { display: none; }
}

.notice { top: 50%; transform: translate(-50%, -50%); }

/* Narrow iframes (phones) */
@media (max-width: 480px) {
  .play-btn { width: 46px; height: 46px; margin-left: 10px; }
  .play-btn svg { width: 24px; height: 24px; }
  .content { padding: 10px 10px; }
  .channel { font-size: 19px; }
  .captions { font-size: 14px; }
  .meta { display: none; }
  .meter span { width: 4px; }
  .meter { gap: 3px; }
  .side { padding-right: 10px; }
}