/* The Muugart player: Winamp's shape, the site's colours. */
.amp { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 340px; max-width: calc(100vw - 2rem); background: linear-gradient(#171b28, #10131c); color: #efe9df; border-radius: 4px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 0 #ffb86b; font-family: "Barlow Semi Condensed", Bahnschrift, "Arial Narrow", sans-serif; user-select: none; }
.amp[hidden], .amp-pill[hidden] { display: none; }
.amp button { font-family: inherit; }
.amp-title { display: flex; align-items: center; gap: .1rem; padding: .35rem .35rem .3rem .7rem; background: repeating-linear-gradient(transparent 0 2px, rgba(255,184,107,.07) 2px 3px); }
.amp-logo { flex: 1; font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #ffb86b; }
.amp-t { border: 0; background: none; color: #a9a59c; width: 24px; height: 22px; padding: 0; line-height: 1; font-size: 1rem; border-radius: 2px; cursor: pointer; display: grid; place-items: center; }
.amp-t:hover { color: #efe9df; background: rgba(255,255,255,.08); }
.amp-t svg { width: 13px; height: 13px; }
.amp-main { display: flex; gap: .6rem; padding: .3rem .7rem .4rem; }
.amp-screen { flex: none; width: 152px; background: #05060a; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 18px rgba(0,0,0,.9); padding: .3rem .35rem .2rem; display: flex; flex-direction: column; }
.amp-time { font-size: 1.55rem; font-weight: 700; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #ffb86b; text-shadow: 0 0 8px rgba(255,184,107,.55); }
.amp-vis { display: block; width: 100%; height: 44px; margin-top: .2rem; }
.amp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.amp-marquee { overflow: hidden; white-space: nowrap; background: #05060a; border-radius: 2px; padding: .3rem .4rem; font-size: .82rem; color: #ffd9a8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.amp-marquee span { display: inline-block; padding-left: 100%; animation: amp-run 14s linear infinite; }
.amp:not(.playing) .amp-marquee span { animation-play-state: paused; }
@keyframes amp-run { to { transform: translateX(-100%); } }
.amp-meta { display: flex; gap: .5rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #a9a59c; }
.amp-meta span { background: rgba(255,255,255,.05); padding: .15rem .35rem; border-radius: 2px; }
.amp-state { color: #ffb86b; }
.amp input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.amp input[type=range]::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,.12); border-radius: 2px; }
.amp input[type=range]::-moz-range-track { height: 4px; background: rgba(255,255,255,.12); border-radius: 2px; }
.amp input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 10px; margin-top: -3px; background: #ffb86b; border-radius: 2px; box-shadow: 0 0 8px rgba(255,184,107,.6); }
.amp input[type=range]::-moz-range-thumb { width: 14px; height: 10px; border: 0; background: #ffb86b; border-radius: 2px; }
.amp-seek { display: block; width: calc(100% - 1.4rem); margin: .1rem .7rem .2rem; height: 16px; }
.amp-ctl { display: flex; align-items: center; gap: .15rem; padding: .1rem .5rem .55rem; }
.amp-b { border: 0; background: rgba(255,255,255,.05); color: #efe9df; width: 30px; height: 26px; padding: 0; border-radius: 2px; cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); }
.amp-b:hover { background: rgba(255,255,255,.1); color: #ffb86b; }
.amp-b.on { color: #ffb86b; box-shadow: inset 0 -2px 0 #ffb86b; }
.amp.playing .amp-play { color: #ffb86b; }
.amp.waiting .amp-play { animation: amp-wait 1.2s ease-in-out infinite; }
@keyframes amp-wait { 50% { background: rgba(255,184,107,.35); } }
.amp-right { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.amp-vol { width: 62px; height: 16px; margin: 0 .2rem; }
.amp-note { margin: -.2rem .7rem .55rem; font-size: .74rem; letter-spacing: .08em; color: #ffb86b; }
.amp-note[hidden] { display: none; }
.amp-list { list-style: none; margin: 0; padding: .3rem .4rem .5rem; max-height: 180px; overflow-y: auto; background: #0b0d14; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); border-radius: 0 0 4px 4px; }
.amp-list[hidden] { display: none; }
.amp-list button { display: block; width: 100%; text-align: left; border: 0; background: none; color: #a9a59c; font-size: .84rem; padding: .35rem .5rem; border-radius: 2px; cursor: pointer; }
.amp-list button:hover { color: #efe9df; background: rgba(255,255,255,.05); }
.amp-list li.cur button { color: #ffb86b; }
.amp-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; align-items: center; gap: .5rem; max-width: 15rem; border: 0; border-radius: 99px; padding: .45rem .9rem .45rem .7rem; background: #141824; color: #efe9df; font: .8rem/1.2 "Barlow Semi Condensed", Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: .04em; cursor: pointer; box-shadow: 0 14px 34px -10px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,184,107,.35); }
.amp-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-pill i { font-style: normal; color: #ffb86b; }
.amp-pill.playing i { animation: amp-beat 1s ease-in-out infinite; }
@keyframes amp-beat { 50% { transform: scale(1.3); } }
.mbar-music { border: 0; background: none; color: inherit; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 2px; cursor: pointer; opacity: .85; }
.mbar-music:hover { opacity: 1; background: rgba(255,255,255,.1); }
.mbar-music svg { width: 18px; height: 18px; }
/* the little window of its own */
body.player-window { margin: 0; background: #0b0d14; min-height: 100vh; display: grid; place-items: center; }
body.player-window .amp { position: static; width: 100%; max-width: 420px; }
@media (max-width: 600px) { .amp { right: .5rem; bottom: .5rem; } .amp-pill { right: .6rem; bottom: .6rem; max-width: 60vw; } }
@media (prefers-reduced-motion: reduce) { .amp-marquee span { animation: none; padding-left: 0; } .amp-pill.playing i, .amp.waiting .amp-play { animation: none; } }
@media print { .amp, .amp-pill { display: none !important; } }