/* niguro [Festival music] (owner, 2026-11-15): the festival song player (niguro-fest-music.js,
   includes/niguro/miti/festmusic.php). Two looks for one element:
   .ng-fmusic--bar   desktop, at the top of the right side column: a thin card (disc, song, play / pause, remove)
   .ng-fmusic--edge  phones and pages without a side column: a round player peeking from the middle of the right
                     screen edge; .is-open slides it out with play / pause and remove beside it */

.ng-fmusic { --fm-warm: linear-gradient(140deg, #ff9f1c 0%, #e2492d 55%, #b5367a 100%); font-family: var(--ng-font); }
.ng-fmusic button { appearance: none; border: 0; background: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; }
.ng-fmusic button:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }

/* the disc: the song's emoji on a warm record that turns while the song plays */
.ng-fmusic__face { position: relative; flex: none; display: grid; place-items: center; }
.ng-fmusic__disc {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 9px, rgba(255, 255, 255, .25) 9.5px 10.5px, transparent 11px), var(--fm-warm);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.ng-fmusic__emoji { font-size: 16px; line-height: 1; }
.ng-fmusic.is-playing .ng-fmusic__disc { animation: ng-fm-spin 6s linear infinite; }
@keyframes ng-fm-spin { to { transform: rotate(360deg); } }

/* three bars that bounce while it plays */
.ng-fmusic__eq { display: none; position: absolute; right: -3px; bottom: -2px; gap: 1.5px; align-items: flex-end; height: 11px; padding: 2px 3px; border-radius: 6px; background: var(--ng-card); box-shadow: 0 1px 3px hsl(0 0% 0% / .2); }
.ng-fmusic__eq i { display: block; width: 2px; height: 3px; border-radius: 1px; background: #e2492d; }
.ng-fmusic.is-playing .ng-fmusic__eq { display: flex; }
.ng-fmusic.is-playing .ng-fmusic__eq i { animation: ng-fm-eq .9s ease-in-out infinite; }
.ng-fmusic.is-playing .ng-fmusic__eq i:nth-child(2) { animation-delay: -.3s; }
.ng-fmusic.is-playing .ng-fmusic__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes ng-fm-eq { 0%, 100% { height: 3px; } 50% { height: 7px; } }

.ng-fmusic__text { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.ng-fmusic__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-fmusic__sub { font-size: 12px; color: var(--ng-sub); }
.ng-fmusic__ctrls { flex: none; display: flex; align-items: center; gap: 4px; }
.ng-fmusic__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.ng-fmusic__btn svg { width: 16px; height: 16px; }
.ng-fmusic__btn--play { background: var(--fm-warm) !important; color: #fff !important; }
.ng-fmusic__btn--play svg { width: 15px; height: 15px; }
.ng-fmusic__btn--x { color: var(--ng-sub); }
.ng-fmusic__btn--x:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }

/* ---------- desktop: the thin bar at the top of the side column ---------- */
/* it carries .card too, so its radius, fill and shadow are the global card's */
.ng-col-side .ng-fmusic--bar.card {
  display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 52px; margin: 0 0 16px; padding: 8px 8px 8px 10px;
}
.ng-fmusic--bar .ng-fmusic__face { cursor: pointer; }

/* ---------- phones: the round player peeking from the right edge ---------- */
.ng-fmusic--edge {
  position: fixed; z-index: 1030; right: 0; top: 50%; display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 999px 0 0 999px; background: var(--ng-card); box-shadow: 0 6px 24px hsl(0 0% 0% / .22);
  transform: translate(calc(100% - 30px), -50%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.ng-fmusic--edge .ng-fmusic__disc { width: 40px; height: 40px; }
.ng-fmusic--edge .ng-fmusic__emoji { font-size: 19px; }
.ng-fmusic--edge .ng-fmusic__text { display: none; }
.ng-fmusic--edge .ng-fmusic__ctrls { padding-right: 6px; }
.ng-fmusic--edge.is-open { transform: translate(0, -50%); }
.ng-fmusic--edge.is-open .ng-fmusic__text { display: grid; max-width: 132px; }
.ng-fmusic--edge:not(.is-open) .ng-fmusic__ctrls { visibility: hidden; }
/* a soft pulse on the peeking disc while the song plays */
.ng-fmusic--edge.is-playing:not(.is-open) .ng-fmusic__disc { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 0 rgba(226, 73, 45, .5); animation: ng-fm-spin 6s linear infinite, ng-fm-pulse 2s ease-out infinite; }
@keyframes ng-fm-pulse { 0% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 0 rgba(226, 73, 45, .45); } 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 12px rgba(226, 73, 45, 0); } }

@media (prefers-reduced-motion: reduce) {
  .ng-fmusic--edge { transition: none; }
  .ng-fmusic.is-playing .ng-fmusic__disc, .ng-fmusic.is-playing .ng-fmusic__eq i, .ng-fmusic--edge.is-playing:not(.is-open) .ng-fmusic__disc { animation: none; }
}