/* <!-- Lucian UX/UI Prompt #308 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#308 --> */
.u308{--ux-surface:#191b1f;--ux-surface-2:#24272d;--ux-ink:#f4f5f6;--ux-ink-3:#abb3bf;--ux-line:#34383f;font-family:inherit;box-sizing:border-box}
.u308.u308-vs{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--ux-surface-2);margin-left:auto;flex-shrink:0}
/* The source's 34 × 28 selection plate sits inside a 44 × 44 touch target. */
.u308 .u308-v{position:relative;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:8px;display:grid;place-items:center;background:none;color:var(--ux-ink-3);flex-shrink:0}
.u308 .u308-v::before{content:'';position:absolute;inset:8px 5px;border-radius:8px;pointer-events:none}
.u308 .u308-v[aria-pressed="true"]{color:var(--ux-ink)}
.u308 .u308-v[aria-pressed="true"]::before{background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line)}
.u308 .u308-v svg{position:relative;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.u308 .u308-v:focus-visible,.u308 .playlist-card:focus-visible{outline:2px solid var(--ux-ink);outline-offset:3px}
.u308 .playlist-art{transform-origin:0 0}
.u308 .playlist-card-copy{display:block;min-width:0}
.u308 .playlist-card{width:100%;min-width:0}
.u308.playlist-grid.is-list{grid-template-columns:minmax(0,1fr);gap:6px}
.u308.is-list .playlist-card{display:flex;align-items:center;gap:12px;padding:9px 0;border-radius:10px}
.u308.is-list .playlist-art{width:38px;height:38px;aspect-ratio:auto;flex:none;border-radius:10px;margin:0;font-size:22px}
.u308.is-list .playlist-art svg{width:22px;height:22px}
.u308.is-list .playlist-card-copy{flex:1;min-width:0}
.u308.is-list .playlist-card small{display:block;margin-top:3px;font-size:12px}
@media(prefers-reduced-motion:reduce){.u308 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Moving artwork must never intercept the neighbouring playlist button. */
.u308 .playlist-art,.u308 .playlist-card-copy{pointer-events:none}

/* Shared visual identity with the PC archive; the stable playlist ID selects a tone. */
.playlist-tone-0{--playlist-tone:#435673}
.playlist-tone-1{--playlist-tone:#4f4867}
.playlist-tone-2{--playlist-tone:#835260}
.playlist-tone-3{--playlist-tone:#496c63}
.playlist-tone-4{--playlist-tone:#9a7845}
.playlist-tone-5{--playlist-tone:#56667e}
.playlist-art.playlist-cover,.detail-cover.playlist-cover{position:relative;isolation:isolate;overflow:hidden;background:var(--playlist-tone);color:#fff}
.playlist-cover::before,.playlist-cover::after{content:'';position:absolute;width:105%;height:105%;border:1px solid #ffffff35;border-radius:50%;z-index:-1;pointer-events:none}
.playlist-cover::before{transform:translate(32%,20%)}
.playlist-cover::after{width:75%;height:75%;transform:translate(-33%,-37%)}
.playlist-cover>svg{width:40px;height:40px;flex:none}
.playlist-cover>.playlist-initial{display:grid;place-items:center;font-style:normal;font-size:48px;line-height:1;font-weight:700;text-align:center}
.u308.is-list .playlist-cover>.playlist-initial{font-size:22px}

/* Compact mobile shelf; retain readable covers on narrow phones. */
@media(max-width:1023px){
 .u308.playlist-grid:not(.is-list){grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:20px 14px}
 .u308:not(.is-list) .playlist-art{margin-bottom:8px;border-radius:10px}
 .u308:not(.is-list) .playlist-cover>svg{width:30px;height:30px}
 .u308:not(.is-list) .playlist-cover>.playlist-initial{font-size:36px}
 .u308:not(.is-list) .playlist-card strong{font-size:14px;line-height:1.45}
 .u308:not(.is-list) .playlist-card small{display:block;margin-top:2px;font-size:11px}
}