/* Brewer Evolution glass player */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #f2ce6b; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #e0a92b; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #fff1c4; }
:root { transition: --c1 1.4s ease, --c2 1.4s ease, --c3 1.4s ease; }

/* WebGL scene: soft behind the page while music plays (desktop), full behind Now Playing */
.bp-viz { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; display: block; }
.bp-viz.on { opacity: .42; }
.bp-viz.immersive { z-index: 60; opacity: 1; transition: opacity .45s ease; }
html.bp-has-player body { background: transparent; }
html.bp-has-player { background: var(--bg, #0b0b0b); }
html.bp-has-player main, html.bp-has-player #site-footer, html.bp-has-player body.embed > :not(.bp-viz):not(#player) { position: relative; z-index: 1; }
html.bp-lock, html.bp-lock body { overflow: hidden; }

.bp { --lvl: 0; font-family: "Open Sans", system-ui, sans-serif; color: #fff; }
.bp button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bp svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.bp audio { display: none; }

/* Glass */
.bp-glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(255,255,255,.07)),
    color-mix(in srgb, var(--c2) 6%, rgba(12,11,9,.6));
  -webkit-backdrop-filter: blur(24px) saturate(175%); backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 30px rgba(255,255,255,.03),
    0 24px 60px rgba(0,0,0,.55), 0 0 calc(30px + var(--lvl) * 50px) color-mix(in srgb, var(--c1) calc(14% + var(--lvl) * 30%), transparent);
}
.bp-glass::before { /* light sweep across the glass while music plays */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.13) 48%, transparent 60%) -150% 0 / 60% 100% no-repeat;
}
.bp.is-playing .bp-glass::before { animation: bp-sweep 6s ease-in-out infinite; }
@keyframes bp-sweep { 0% { background-position: -150% 0; } 55%, 100% { background-position: 260% 0; } }

/* Buttons */
.bp-ic { background: none; border: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.82); position: relative; transition: color .2s, background .2s, transform .15s; }
.bp-ic:hover { color: #fff; background: rgba(255,255,255,.08); }
.bp-ic:active { transform: scale(.92); }
.bp-ic.on { color: var(--c1); }
.bp-ic.on::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 8px var(--c1); }
.bp-one { display: none; position: absolute; top: 6px; right: 5px; font: 800 9px/1 Montserrat, sans-serif; font-style: normal; background: var(--c1); color: #000; border-radius: 6px; padding: 2px 3px; }
.bp-ic.one .bp-one { display: block; }
.bp-ic-lg svg { width: 30px; height: 30px; }
.bp-ic-lg { width: 54px; height: 54px; }
.bp-play {
  width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #0b0b0b; flex: none;
  background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--c1) 85%, #fff) 45%, var(--c1));
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 6px 22px color-mix(in srgb, var(--c1) 55%, transparent), 0 0 calc(10px + var(--lvl) * 30px) color-mix(in srgb, var(--c1) 60%, transparent);
  transition: transform .15s;
}
.bp-play:hover { transform: scale(1.06); }
.bp-play:active { transform: scale(.94); }
.bp-play-lg { width: 76px; height: 76px; }
.bp-play-lg svg { width: 32px; height: 32px; }
.bp :focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }

/* Mini player */
.bp-mini {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(1100px, calc(100vw - 24px)); z-index: 40;
  transform: translate(-50%, 140%); opacity: 0; transition: transform .55s cubic-bezier(.2,.9,.25,1.15), opacity .35s;
  border-radius: 22px; padding: 10px 14px; overflow: hidden;
  display: grid; grid-template-columns: 56px minmax(130px, 230px) auto 1fr auto; grid-template-areas: "art meta ctrls scrub extra" "note note note note note";
  align-items: center; column-gap: 14px;
}
.bp.show .bp-mini { transform: translate(-50%, 0); opacity: 1; }
.bp-mini-spec { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; opacity: .35; mix-blend-mode: screen; }
.bp-mini > :not(canvas) { position: relative; }
.bp-art { grid-area: art; width: 56px; height: 56px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); padding: 0; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #2a2112, #0e0d0b);
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 calc(var(--lvl) * 26px) color-mix(in srgb, var(--c1) 70%, transparent); }
.bp-art img, .bp-big img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }
.bp-art img[hidden], .bp-big img[hidden] { display: none; }
.bp-art-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.75); }
.bp-art::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 22px no-repeat; opacity: 0; transition: opacity .2s; }
.bp-art:hover::after { opacity: 1; }
.bp-meta { grid-area: meta; min-width: 0; }
.bp-title { font: 700 15px/1.25 Montserrat, sans-serif; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-artist { font-size: 13px; color: rgba(255,255,255,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-ctrls { grid-area: ctrls; display: flex; align-items: center; gap: 4px; }
.bp-scrub { grid-area: scrub; display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 12px/1 Montserrat, sans-serif; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.bp-wave { flex: 1; height: 34px; position: relative; cursor: pointer; touch-action: none; border-radius: 8px; min-width: 80px; }
.bp-wave canvas { width: 100%; height: 100%; display: block; }
.bp-extra { grid-area: extra; display: flex; align-items: center; gap: 2px; }
.bp-vol { display: flex; align-items: center; }
.bp-vol input { width: 86px; accent-color: var(--c1); background: none; border: 0; padding: 0; }
.bp-note { grid-area: note; font-size: 12px; color: color-mix(in srgb, var(--c1) 80%, #fff); text-align: center; }
.bp-note:empty { display: none; }
.bp-mini .bp-note:not(:empty) { margin-top: 4px; }
.bp-note a { color: #fff; text-decoration: underline; font-weight: 700; }

/* Now Playing */
.bp-full { position: fixed; inset: 0; z-index: 61; opacity: 0; transition: opacity .38s ease; }
.bp-full.in { opacity: 1; }
.bp-full[hidden] { display: none; }
.bp-full::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.55), transparent 60%), linear-gradient(rgba(0,0,0,.25), transparent 30%, rgba(0,0,0,.35)); pointer-events: none; }
.bp-full-ui { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-width: 1100px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); gap: 10px; }
.bp-top { display: flex; align-items: center; justify-content: space-between; }
.bp-glass-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); width: 44px; height: 44px; }
.bp-kicker { font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.75); text-shadow: 0 0 18px var(--c1); }
.bp-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.bp-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bp-big {
  --glow: .4; position: relative; width: min(46vh, 74vw, 420px); aspect-ratio: 1; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, #2e2412, #0e0d0b);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 calc(40px + var(--glow) * 60px) color-mix(in srgb, var(--c1) calc(var(--glow) * 60%), transparent);
  will-change: transform; transition: transform .08s linear;
}
.bp-big .bp-art-ph svg { width: 34%; height: 34%; opacity: .8; }
.bp-sheen { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.35), rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12)); mix-blend-mode: overlay; pointer-events: none; }
.bp-panel { position: relative; border-radius: 28px; padding: 18px 22px 14px; width: min(720px, 100%); justify-self: center; }
.bp-fmeta { text-align: center; }
.bp-fmeta .bp-title { font-size: clamp(20px, 3.2vw, 28px); white-space: normal; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.bp-fmeta .bp-artist { font-size: 15px; margin-top: 2px; }
.bp-fmeta .bp-note { margin-top: 6px; font-size: 13px; }
.bp-scrub-lg { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 12px; }
.bp-scrub-lg .bp-wave { height: 52px; flex: none; }
.bp-times { display: flex; justify-content: space-between; }
.bp-fctrls { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 3vw, 22px); margin-top: 8px; }
.bp-queue { position: absolute; right: 18px; top: 70px; bottom: 18px; width: min(340px, calc(100% - 36px)); border-radius: 22px; padding: 14px; overflow: auto; z-index: 2; }
.bp-queue[hidden] { display: none; }
.bp-qhead { font: 700 12px Montserrat, sans-serif; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 4px 6px 10px; }
.bp-queue ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bp-queue li button { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px; border-radius: 12px; text-align: left; }
.bp-queue li button:hover { background: rgba(255,255,255,.08); }
.bp-queue img, .bp-queue .bp-art-ph { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; position: relative; background: rgba(255,255,255,.08); }
.bp-queue b { display: block; font: 700 14px Montserrat, sans-serif; }
.bp-queue small { color: rgba(255,255,255,.6); }
.bp-empty { color: rgba(255,255,255,.6); font-size: 14px; padding: 8px; }

/* Song cards: playing state */
.track.bp-now { border-color: color-mix(in srgb, var(--c1) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 50%, transparent), 0 12px 40px color-mix(in srgb, var(--c1) 22%, transparent); }
.playbtn { background: radial-gradient(circle at 30% 25%, #fff, var(--accent) 50%) !important; border: 1px solid rgba(255,255,255,.6) !important; transition: transform .15s; display: grid; place-items: center; }
.playbtn:hover { transform: scale(1.08); }
.bp-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.bp-eq i { width: 3px; background: currentColor; border-radius: 2px; animation: bp-eq .9s ease-in-out infinite; }
.bp-eq i:nth-child(2) { animation-delay: -.3s; } .bp-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes bp-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.bp-paused .bp-eq i { animation-play-state: paused; }
#site-footer, footer { padding-bottom: 150px; }
body.embed .list { padding-bottom: 150px; }

@media (max-width: 760px) {
  .bp-mini { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "art meta ctrls" "scrub scrub scrub" "note note note"; row-gap: 6px; padding: 10px 12px 8px; border-radius: 20px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
  .bp-art { width: 48px; height: 48px; border-radius: 12px; }
  .bp-extra, .bp-hide-sm { display: none; }
  .bp-wave { height: 26px; }
  .bp-panel { padding: 14px 14px 10px; border-radius: 24px; }
  .bp-queue { top: 64px; }
}
@media (max-height: 640px) and (min-width: 761px) { .bp-big { width: min(38vh, 300px); } }
@media (prefers-reduced-motion: reduce) {
  .bp.is-playing .bp-glass::before { animation: none; }
  .bp-eq i { animation: none; height: 60%; }
  .bp-mini { transition: opacity .2s; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .bp-glass { background: rgba(18,18,24,.94); } }

/* Home-page embed list */
body.embed .item { transition: border-color .3s, box-shadow .3s, background .3s; }
body.embed .item .bp-eq { display: none; color: var(--c1); margin-left: 4px; vertical-align: -1px; }
body.embed .item.bp-now { border-color: color-mix(in srgb, var(--c1) 65%, transparent); background: color-mix(in srgb, var(--c1) 8%, var(--panel)); box-shadow: 0 0 24px color-mix(in srgb, var(--c1) 20%, transparent); }
body.embed .item.bp-now .bp-eq { display: inline-flex; }
.playbtn-sm { width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; background: radial-gradient(circle at 30% 25%, #fff, var(--accent) 50%) !important; }

/* Full-screen mode */
.bp-full .bp-ring { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
.bp-topr { display: flex; gap: 8px; }
.bp-mini { cursor: pointer; }
.bp-mini button, .bp-mini input, .bp-mini a, .bp-mini .bp-wave { cursor: pointer; }
.bp-full .bp-top, .bp-full .bp-panel, .bp-full .bp-queue { transition: opacity .7s ease, transform .7s ease; }
.bp-full.cinema { cursor: none; }
.bp-full.cinema .bp-top, .bp-full.cinema .bp-panel { opacity: 0; pointer-events: none; }
.bp-full.cinema .bp-top { transform: translateY(-14px); }
.bp-full.cinema .bp-panel { transform: translateY(24px); }
.bp-full.cinema .bp-big { box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 calc(60px + var(--glow) * 110px) color-mix(in srgb, var(--c1) calc(var(--glow) * 70%), transparent); }
.bp-hint { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); font: 600 11px Montserrat, sans-serif; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.55); opacity: 0; transition: opacity .8s ease 1.2s; pointer-events: none; white-space: nowrap; z-index: 1; }
.bp-full.cinema .bp-hint { opacity: 1; animation: bp-hint 4s ease-in-out 2s forwards; }
@keyframes bp-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bp-full .bp-top, .bp-full .bp-panel { transition: none; } }