/* MeloMak 2.0 music gallery: only displayed when approved tracks exist.
   2026-10-22 (#120): compact tiles — cover with Play, title, one-line description. */
.showcase{margin:24px 0 66px;padding:42px 0 20px;border-top:1px solid var(--line)}
.showcase .section-title{margin-bottom:28px}
.showcase-lead{max-width:660px;color:var(--muted);line-height:1.65;margin-top:10px}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:22px 18px}
.showcase-tile{display:flex;flex-direction:column;gap:10px;min-width:0}
.showcase-cover{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;
 background:var(--soft);box-shadow:0 10px 26px rgba(0,0,0,.10);transition:transform .15s ease,box-shadow .15s ease}
.showcase-cover:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.16)}
.showcase-cover:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.showcase-cover-img{display:block;width:100%;height:100%;object-fit:cover}
.showcase-cover.is-neutral{background:linear-gradient(135deg,var(--accent),#2a1d4a)}
.showcase-cover.is-neutral::before{content:"♪";position:absolute;left:14px;top:8px;font:700 34px/1 var(--title,inherit);color:rgba(255,255,255,.55)}
.showcase-play-icon{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
 background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .15s ease}
.showcase-play-icon::before{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #1d1630}
.showcase-tile.is-playing .showcase-play-icon::before{left:19px;top:18px;width:6px;height:20px;border:0;background:#1d1630;box-shadow:12px 0 0 #1d1630}
.showcase-cover:hover .showcase-play-icon{transform:scale(1.06)}
.showcase-duration{position:absolute;right:9px;bottom:9px;padding:3px 8px;border-radius:100px;background:rgba(14,10,24,.72);color:#fff;
 font:600 12px/1.4 var(--body,inherit);font-variant-numeric:tabular-nums}
.showcase-duration:empty{display:none}
.showcase-tile-info{min-width:0}
.showcase-tile-title{font:700 16px/1.3 var(--title,inherit);margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.showcase-tile-line{margin:3px 0 0;font:500 13px/1.45 var(--body,inherit);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showcase-cta{display:block;min-height:48px;margin:28px auto 0;padding-left:28px;padding-right:28px}
@media(max-width:600px){.showcase{padding-top:30px;margin-bottom:40px}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .showcase-play-icon{width:48px;height:48px;margin:-24px 0 0 -24px}.showcase-play-icon::before{left:19px;top:14px;border-width:10px 0 10px 16px}
 .showcase-tile.is-playing .showcase-play-icon::before{left:15px;top:14px}.showcase-cta{width:100%}}
@media(prefers-reduced-motion:reduce){.showcase-cover,.showcase-play-icon{transition:none}.showcase-cover:hover{transform:none}}