/* ---- Background music (YouTube, same behaviour as the Daniel's Apps launch page) ---- */
.music-bar {
  position: fixed; z-index: 3;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: 124px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
@media (orientation: landscape) { .music-bar { width: 150px; } .music-btn, .music-next { font-size: 15px; } }
.music-row { display: flex; gap: 4px; }
.music-btn, .music-next {
  font: inherit; font-weight: 800; font-size: 16px; line-height: 1; color: #1a1a1a; cursor: pointer;
  background: #f5c400; border: 3px solid #1a1a1a; border-radius: 999px;
  padding: 9px 6px; box-shadow: 0 4px 0 #1a1a1a; touch-action: manipulation; white-space: nowrap;
}
.music-btn { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 9px 2px; }
.music-next { flex: 0 0 auto; background: #fff; font-size: 13px; padding: 9px 5px; }
.music-btn:active, .music-next:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1a1a; }
.music-btn:focus-visible, .music-next:focus-visible { outline: 3px solid #4ea1ff; outline-offset: 2px; }
.music-hint {
  font-weight: 800; font-size: 14px; text-align: center; color: #fff; background: #ff6f3c;
  border: 3px solid #1a1a1a; border-radius: 999px; padding: 5px 6px;
  animation: musicNudge 1.2s ease-in-out infinite;
}
@keyframes musicNudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* The player is kept tiny and out of the way; only its sound is used. */
#musicPlayerBox { position: fixed; right: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; overflow: hidden; z-index: 0; }
#musicPlayerBox iframe { width: 200px; height: 200px; border: 0; }
@media (prefers-reduced-motion: reduce) { .music-hint { animation: none; } }

/* Inside the left jukebox column: a normal row above the tune buttons */
.music-bar.in-jukebox { position: static; width: auto; flex: 0 0 auto; gap: 4px; }
.music-bar.in-jukebox .music-btn, .music-bar.in-jukebox .music-next { font-size: 18px; padding: 7px 2px; flex: 1 1 0; }
.music-bar.in-jukebox .music-hint { font-size: 12px; padding: 4px 2px; border-width: 2px; }
/* Song buttons in the jukebox (reuse .tune look; emoji instead of an SVG icon) */
.music-bar.in-jukebox .music-btn { flex: 0 0 auto; width: 100%; }
.yt-tune .tune-emoji { font-style: normal; font-size: 32px; line-height: 1; display: block; }
.yt-tune span { text-align: center; }
.yt-tune:disabled { opacity: .45; }
@media (max-height: 760px) { .yt-tune .tune-emoji { font-size: 26px; } }