/* ============================================================
   BUNKROS MUSIC (2026-09-27)
   Scene 1: now-playing stage · Scene 2: album grid · docked player
   phone 2 cols · iPad portrait 3 · iPad landscape 4 · desktop 5 · wide 7
   ============================================================ */
.music-page { --mu-glow: rgba(255, 0, 90, .45); }
.mu { position: relative; isolation: isolate; padding-bottom: 150px; }

/* blurred current cover behind everything */
.mu-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mu-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(160%); opacity: .38; transform: scale(1.25); transition: opacity .8s; }
.mu-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 20%, transparent 0%, var(--bg-base) 70%), linear-gradient(180deg, rgba(10,10,15,.4), var(--bg-base) 85%); }
[data-theme="light"] .mu-backdrop img { opacity: .22; }

/* ---------- Scene 1 ---------- */
.mu-hero {
    min-height: 100svh; box-sizing: border-box;
    padding: calc(var(--sh-top-h) + clamp(28px, 6vh, 72px)) var(--gutter) clamp(40px, 8vh, 90px);
    width: min(1320px, 100%); margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 5vw, 80px);
}
.mu-title { font: 900 var(--fs-display)/.98 var(--font-heading); letter-spacing: -.02em; margin: 18px 0 20px; text-transform: uppercase; }
.mu-title em { font-style: normal; background: var(--sh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mu-dot { color: var(--sh-accent); }
.mu-lead { font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.6; color: var(--text-secondary); max-width: 46ch; margin: 0 0 28px; }
.mu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mu-hero-actions .bk-btn[aria-pressed="true"] { border-color: var(--sh-cyan); color: var(--sh-cyan) !important; }

.mu-stage { justify-self: center; width: min(520px, 100%); }
.mu-stage-art { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px -30px var(--mu-glow), 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-1.5deg); transition: transform .8s var(--sh-spring); }
.mu-stage-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .4s; }
.music-page.is-playing .mu-stage-art { transform: rotate(0) scale(1.01); }
.music-page.is-playing .mu-stage-art .mu-eq { display: inline-flex; }
.mu-stage-art .mu-eq { display: none; position: absolute; right: 16px; bottom: 16px; padding: 10px 12px; border-radius: 12px; background: rgba(10,10,15,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mu-stage-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; padding-left: 4px; }
.mu-stage-label { font: 700 var(--fs-label)/1 var(--font-accent); letter-spacing: .22em; text-transform: uppercase; color: var(--sh-accent); }
.mu-stage-title { font: 800 clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem)/1.1 var(--font-heading); }
.mu-stage-artist { color: var(--text-secondary); letter-spacing: .14em; font-size: .85rem; text-transform: uppercase; }

/* equalizer bars */
.mu-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.mu-eq i { width: 4px; height: 30%; border-radius: 2px; background: var(--sh-accent); }
.mu-eq--sm { height: 12px; gap: 2px; margin-right: 6px; display: none; }
.mu-eq--sm i { width: 3px; }
.music-page.is-playing .mu-eq i, .mu-card.is-playing .mu-eq i { animation: muEq .9s ease-in-out infinite; }
.mu-eq i:nth-child(2) { animation-delay: -.3s !important; }
.mu-eq i:nth-child(3) { animation-delay: -.6s !important; }
.mu-eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes muEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ---------- Scene 2: grid ---------- */
.mu-album { width: min(1500px, 100%); margin: 0 auto; padding: clamp(40px, 7vh, 90px) var(--gutter) 40px; box-sizing: border-box; }
.mu-album-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--sh-border); padding-bottom: 14px; }
.mu-album-title { font: 900 var(--fs-h2)/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.mu-album-meta { font: 700 .78rem/1 var(--font-accent); letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); }

.mu-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px) clamp(12px, 1.4vw, 22px); }
.mu-card {
    display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
    font: inherit; -webkit-tap-highlight-color: transparent;
}
.mu-card-art { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 16px 34px -18px rgba(0,0,0,.9); transition: transform .45s var(--sh-spring), box-shadow .4s; }
.mu-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--sh-ease), filter .4s; }
.mu-card-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.mu-card-no { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 5px 8px; border-radius: 8px; background: rgba(10,10,15,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 .72rem/1 var(--font-accent); letter-spacing: .1em; color: #fff; }
.mu-card-btn {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: var(--sh-grad); box-shadow: 0 10px 24px -6px rgba(255,0,90,.7);
    opacity: 0; transform: translateY(8px) scale(.85);
    transition: opacity .3s, transform .45s var(--sh-spring);
}
.mu-card-btn .fa-play { margin-left: 3px; }
.mu-card-btn .fa-pause { display: none; }
.mu-card-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 4px; background: rgba(255,255,255,.15); opacity: 0; transition: opacity .3s; }
.mu-card-progress span { display: block; height: 100%; width: 0; background: var(--sh-grad); }
.mu-card-copy { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px 0; }
.mu-card-title { font: 700 clamp(.95rem, .9rem + .2vw, 1.05rem)/1.25 var(--font-heading); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mu-card-dur { display: inline-flex; align-items: center; font: 600 .85rem/1 var(--font-accent); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (hover: hover) {
    .mu-card:hover .mu-card-art { transform: translateY(-4px); box-shadow: 0 26px 44px -20px var(--mu-glow); }
    .mu-card:hover .mu-card-art img { transform: scale(1.05); }
    .mu-card:hover .mu-card-btn { opacity: 1; transform: none; }
}
.mu-card:active .mu-card-art { transform: scale(.97); }
.mu-card:focus-visible { outline: none; }
.mu-card:focus-visible .mu-card-art { outline: 3px solid var(--sh-accent); outline-offset: 3px; }
@media (hover: none) { .mu-card-btn { opacity: 1; transform: none; width: 44px; height: 44px; font-size: .9rem; } }

/* active + playing states */
.mu-card.is-current .mu-card-art { box-shadow: 0 0 0 2px var(--sh-accent), 0 24px 44px -18px var(--mu-glow); }
.mu-card.is-current .mu-card-btn { opacity: 1; transform: none; }
.mu-card.is-current .mu-card-progress { opacity: 1; }
.mu-card.is-current .mu-card-title { color: var(--sh-accent); }
.mu-card.is-playing .mu-card-btn .fa-play { display: none; }
.mu-card.is-playing .mu-card-btn .fa-pause { display: inline; }
.mu-card.is-playing .mu-eq--sm { display: inline-flex; }

/* ---------- Docked player ---------- */
.mu-player {
    position: fixed; z-index: 995; left: 50%; bottom: calc(18px + var(--sh-safe-b));
    width: min(860px, calc(100vw - var(--sh-rail-w) - 2 * 150px));
    margin-left: calc(var(--sh-rail-w) / 2);
    transform: translate(-50%, 0);
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 14px; align-items: center;
    padding: 10px 14px 10px 10px; border-radius: 22px;
    background: var(--sh-glass-strong); border: 1px solid var(--sh-border-2);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 40px -18px var(--mu-glow);
    transition: transform .5s var(--sh-ease), opacity .4s;
}
.mu-player[data-state="idle"] { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.mu-player-art { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.mu-player-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mu-player-meta strong { font: 700 .98rem/1.2 var(--font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-player-meta span { font: 600 .72rem/1 var(--font-accent); letter-spacing: .16em; color: var(--text-secondary); text-transform: uppercase; }
.mu-player-ctrl { display: flex; align-items: center; gap: 6px; }
.mu-ctl { width: 44px; height: 44px; border-radius: 14px; border: 0; background: none; color: var(--sh-text); display: grid; place-items: center; font-size: 1rem; cursor: pointer; transition: background-color .2s, transform .3s var(--sh-spring); }
.mu-ctl:hover { background: var(--sh-surface-2); }
.mu-ctl:active { transform: scale(.88); }
.mu-ctl--main { width: 52px; height: 52px; border-radius: 50%; background: var(--sh-grad); color: #fff; font-size: 1.1rem; box-shadow: 0 10px 24px -8px rgba(255,0,90,.7); }
.mu-ctl--main:hover { background: var(--sh-grad); filter: brightness(1.1); }
.mu-ctl--main .fa-play { margin-left: 3px; }
.mu-player-seek { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px; }
.mu-time { font: 600 .78rem/1 var(--font-accent); color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 34px; }
#muDur { text-align: right; }
#muSeek { flex: 1; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; margin: 0; --p: 0%; }
#muSeek::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--sh-accent) var(--p), var(--sh-border-2) var(--p)); }
#muSeek::-moz-range-track { height: 5px; border-radius: 3px; background: var(--sh-border-2); }
#muSeek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--sh-accent); }
#muSeek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,0,90,.35); }
#muSeek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.music-page.player-on .hud-container { opacity: 0; pointer-events: none; }

/* ---------- Breakpoints ---------- */
@media (min-width: 1500px) { .mu-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 1200px) and (max-width: 1499px) { .mu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* iPad landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .mu-hero { padding-top: clamp(40px, 8vh, 80px); padding-right: calc(var(--gutter) + 50px); }
    .mu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mu-player { width: calc(100vw - var(--sh-rail-w) - 120px); }
}
/* iPad portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    .mu-hero { grid-template-columns: 1fr; padding: 56px calc(var(--gutter) + 50px) 48px var(--gutter); text-align: left; min-height: auto; gap: 36px; }
    .mu-stage { justify-self: start; width: min(460px, 78%); display: grid; grid-template-columns: 1fr; }
    .mu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mu-player { width: calc(100vw - var(--sh-rail-w) - 110px); }
    .mu-album { padding-right: calc(var(--gutter) + 50px); }
}
/* phone */
@media (max-width: 767px) {
    .mu { padding-bottom: 170px; }
    .mu-hero { grid-template-columns: 1fr; min-height: auto; gap: 26px; padding: calc(var(--sh-top-h) + 26px) 18px 28px; }
    .mu-title { margin: 14px 0 14px; }
    .mu-lead { margin-bottom: 20px; }
    .mu-hero-actions .bk-btn { flex: 1 1 0; padding: 0 1rem; white-space: nowrap; }
    .mu-stage { order: -1; width: 100%; display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
    .mu-stage-art { border-radius: 18px; transform: none; }
    .mu-stage-art .mu-eq { right: 8px; bottom: 8px; padding: 6px 7px; height: 14px; }
    .mu-stage-meta { margin: 0; }
    .mu-album { padding: 20px 16px 30px; }
    .mu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .mu-card-art { border-radius: 14px; }
    .mu-card-no { left: 8px; top: 8px; }
    .mu-card-btn { right: 8px; bottom: 8px; }
    .mu-player {
        left: 10px; right: 10px; width: auto; margin: 0; transform: none;
        bottom: calc(var(--sh-bot-h) + 6px);
        grid-template-columns: 46px minmax(0, 1fr) auto; padding: 8px 8px 8px 8px; border-radius: 20px; gap: 4px 10px;
    }
    .mu-player[data-state="idle"] { transform: translateY(160%); }
    .mu-player-art { width: 46px; height: 46px; border-radius: 10px; }
    .mu-player-ctrl { gap: 0; }
    .mu-ctl { width: 42px; height: 42px; }
    .mu-ctl--main { width: 46px; height: 46px; }
    .mu-player-seek { gap: 8px; }
    .mu-time { font-size: .72rem; min-width: 30px; }
}
@media (max-width: 360px) {
    .mu-player #muPrev { display: none; }
    .mu-stage { grid-template-columns: 88px 1fr; }
}
/* phone landscape: keep the stage compact */
@media (max-height: 500px) and (orientation: landscape) {
    .mu-hero { min-height: auto; grid-template-columns: 1.3fr .7fr; padding-top: calc(var(--sh-top-h) + 16px); }
    .mu-stage { width: min(240px, 100%); }
}