/* Ported ring treatment, re-coloured for Khal & Silvie. */
#music-control {
  --kc-ring-size: 48px;
  --ni-ring-gold: #C9A45C;
  --ni-ring-highlight: #E8CF9A;
  --ni-bezel: #C9A45C;
  --ni-bezel-hi: #F0DCA6;
  /* Orbit (−8 px) + gem (−5 px) spin past the core 16 px margin: keep them on screen. */
  right: max(24px, calc(env(safe-area-inset-right) + 16px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  isolation: isolate;
  filter: none;
  color: var(--ni-ring-highlight);
}
#music-control::before,
#music-control::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* El disco: lacre vino con bisel dorado. Sombra de contacto + sombra larga + brillo en el borde interior. */
#music-control::before {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 46% 38% at 33% 26%, rgba(255, 236, 232, .34), rgba(255, 236, 232, 0) 72%),
    radial-gradient(circle at 50% 46%, #7A2E3A 0%, #62222E 58%, #4A1520 100%);
  box-shadow:
    inset 0 1.5px 0 0 var(--ni-bezel-hi),
    inset 0 0 0 1.75px var(--ni-bezel),
    inset 0 0 0 2.75px rgba(240, 220, 166, .22),
    inset 0 -6px 9px rgba(24, 4, 10, .5),
    0 1px 2px rgba(22, 6, 10, .6),
    0 9px 20px rgba(28, 10, 14, .38);
  transition: box-shadow 200ms ease, transform 150ms ease;
}
#music-control::after {
  inset: -10px;
  z-index: 0;
  background: radial-gradient(circle, rgba(232, 207, 154, .22), transparent 70%);
  animation: ni-ring-breath 3s ease-in-out infinite alternate;
}
#music-control .kc-ring__orbit {
  z-index: 2;
  inset: -8px;
  border: 1.5px dashed rgba(201, 164, 92, .88);
  box-shadow: 0 0 8px rgba(232, 207, 154, .14);
  animation-duration: 20s;
}
#music-control .kc-ring__orbit::before {
  top: -5px;
  width: 9px;
  height: 9px;
  margin: 0;
  border-radius: 1.5px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #F0DCA6 0 18%, #A14455 19% 44%, #7A2E3A 45% 72%, #4B1C27 73%);
  box-shadow: 0 0 0 1px var(--ni-ring-highlight), 0 1px 3px rgba(40, 10, 16, .55), 0 0 10px 2px rgba(122, 46, 58, .32);
}
#music-control .kc-ring__letter {
  z-index: 3;
  padding-bottom: 6px;
  font-family: var(--kc-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #F6E8B8;
  /* grabado: sombra oscura arriba, filo claro abajo */
  text-shadow: 0 -1px 0 rgba(30, 4, 10, .9), 0 1px 0 rgba(240, 220, 166, .3), 0 0 6px rgba(30, 4, 10, .35);
  transition: color 200ms ease, text-shadow 200ms ease, transform 200ms ease;
}
#music-control .kc-ring__bars { z-index: 4; bottom: 7px; height: 8px; gap: 1.5px; }
#music-control .kc-bar {
  border-radius: 2px;
  background: linear-gradient(to top, var(--ni-ring-gold), #F0DCA6);
  box-shadow: 0 0 4px rgba(232, 207, 154, .4);
}
#music-control .kc-bar:nth-child(1) { height: 5px; }
#music-control .kc-bar:nth-child(2) { height: 8px; }
#music-control .kc-bar:nth-child(3) { height: 4px; }

#music-control[data-kc-state="paused"] .kc-ring__orbit { border-color: rgba(232, 207, 154, .2); box-shadow: none; }
#music-control[data-kc-state="paused"] .kc-ring__orbit::before { box-shadow: 0 0 0 1px rgba(232, 207, 154, .6); opacity: .55; }
#music-control[data-kc-state="paused"]::after { opacity: .15; animation: none; }
#music-control[data-kc-state="paused"] { --ni-bezel: rgba(201, 164, 92, .5); --ni-bezel-hi: rgba(240, 220, 166, .5); }
#music-control[data-kc-state="paused"] .kc-ring__letter { color: rgba(235, 215, 159, .6); text-shadow: 0 -1px 0 rgba(36, 6, 12, .8); }
#music-control[data-kc-state="paused"] .kc-bar { height: 2px; opacity: .3; }

@media (hover: hover) and (pointer: fine) {
  #music-control:hover { --ni-bezel: #D9B76C; }
  #music-control:hover::before { box-shadow: inset 0 1.5px 0 0 var(--ni-bezel-hi), inset 0 0 0 1.75px var(--ni-bezel), inset 0 0 0 2.75px rgba(240, 220, 166, .3), inset 0 -6px 9px rgba(24, 4, 10, .5), 0 1px 2px rgba(22, 6, 10, .6), 0 10px 24px rgba(28, 10, 14, .42), 0 0 22px rgba(232, 207, 154, .16); }
  #music-control:hover .kc-ring__orbit { border-color: rgba(232, 207, 154, .8); }
  #music-control:hover .kc-ring__letter { color: #F5F0E8; transform: scale(1.08); }
}
#music-control:focus-visible { outline: 2px solid var(--ni-ring-highlight); outline-offset: 4px; }
#music-control:active::before { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  #music-control::after,
  #music-control .kc-ring__orbit,
  #music-control .kc-bar { animation: none !important; }
}
@keyframes ni-ring-breath {
  from { opacity: .35; transform: scale(.92); }
  to { opacity: .85; transform: scale(1.12); }
}