/* KC-MUSIC-BUTTON — Yin-Yang only; reveal after the Gate, spin only during playback. */
.kc-float {
  --yy-light: var(--ivory-light, #f9ebdf);
  --yy-deep: var(--espresso, #4f210d);
  position: fixed;
  z-index: 9000;
  right: calc(clamp(18px, 3vw, 28px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(80px, 10vh, 88px) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--yy-deep);
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.kc-float[hidden] { display: none !important; }
.kc-float.visible { opacity: 1; animation: kc-float-in 800ms cubic-bezier(.22, 1, .36, 1) backwards; }
/* Depth sits on a static disc behind the spinning yin-yang: a filter on the spinning node would re-raster every frame. */
.kc-float::before { content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 2px 8px rgba(79, 33, 13, .28), 0 1px 2px rgba(79, 33, 13, .22); pointer-events: none; }
@keyframes kc-float-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.kc-float:focus { outline: none; }
.kc-float:focus-visible { outline: 2px solid var(--yy-deep); outline-offset: 4px; }

/* The supplied Ying geometry is the whole visible control: no face, glow, ring, or bars. */
.kc-float .yin-yang {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(79, 33, 13, .5);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--yy-light) 50%, var(--yy-deep) 50%);
  transform-origin: center;
  animation: spin-yin-yang 4s linear infinite;
  animation-play-state: paused;
}
.kc-float.is-playing .yin-yang { animation-play-state: running; }
.kc-float .yin-yang::before,
.kc-float .yin-yang::after {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}
.kc-float .yin-yang::before { top: 0; background: var(--yy-deep); }
.kc-float .yin-yang::after { bottom: 0; background: var(--yy-light); }
.kc-float .yin-yang .dot {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  transform: translateX(-50%);
}
.kc-float .yin-yang .dot.white { top: 25%; background: var(--yy-light); }
.kc-float .yin-yang .dot.black { bottom: 25%; background: var(--yy-deep); }
.kc-float.is-playing .yin-yang { animation: spin-yin-yang 4s linear infinite; }
@keyframes spin-yin-yang { to { transform: rotate(360deg); } }

/* One short, dismissible announcement sits beside the mark, never inside it. */
.music-toast {
  position: fixed;
  z-index: 8999;
  right: calc(clamp(18px, 3vw, 28px) + 66px + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(80px, 10vh, 88px) + 5px + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: min(250px, calc(100vw - 106px));
  padding: 8px 11px;
  border: 1px solid rgba(249, 235, 223, .34);
  border-radius: 9px;
  background: rgba(79, 33, 13, .96);
  color: var(--ivory-light, #f9ebdf);
  font: 500 12px/1.35 var(--font-body, Arial, sans-serif);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.music-toast[hidden] { display: none !important; }
.music-toast.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .kc-float, .music-toast { transition-duration: .01ms !important; }
  .kc-float.visible { animation: none; }
  .kc-float *, .kc-float *::before, .kc-float *::after { animation: none !important; }
}