.player { cursor:pointer; }
.player button,.player input { cursor:pointer; }
.player-expanded { background:linear-gradient(145deg,#17112a 0%,#090714 70%); bottom:70px; box-shadow:0 -30px 80px #000b; display:grid; gap:clamp(1.5rem,4vw,4rem); grid-template-columns:minmax(220px,380px) minmax(220px,.7fr) minmax(300px,1.2fr); left:0; max-height:calc(100vh - 70px); overflow:auto; padding:clamp(2rem,6vw,6rem); position:fixed; right:0; z-index:49; }
.player-expanded[hidden] { display:none; }
.player-close { background:#ffffff10; border:1px solid #ffffff25; border-radius:50%; color:#fff; cursor:pointer; font-size:2rem; height:48px; line-height:1; position:absolute; right:1.5rem; top:1.5rem; width:48px; }
.expanded-art { align-self:center; aspect-ratio:1; background:linear-gradient(135deg,#6939d8,#ff4fcf 50%,#ffb23e); border-radius:24px; box-shadow:0 30px 90px #0009; display:grid; overflow:hidden; place-items:center; width:100%; }
.expanded-art img { height:100%; object-fit:cover; width:100%; }
.expanded-art span { font:700 4rem 'Space Grotesk',sans-serif; transform:rotate(-8deg); }
.expanded-info { align-self:center; }
.expanded-info h2 { font-size:clamp(2.5rem,5vw,5rem); margin:.2em 0; }
.expanded-info p { color:var(--muted); font-size:1.1rem; }
.expanded-description,.expanded-reactions { border-top:1px solid var(--line); display:block; margin-top:1.5rem; padding-top:1.25rem; }
.expanded-play-metric { margin:.75rem 0 0; }
.expanded-play-metric strong { color:#fff; }
.expanded-badges { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.vibe-badge { background:linear-gradient(135deg,#2cffd933,#a94fff33); border:1px solid #2cffd966; border-radius:999px; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.02em; padding:.38rem .65rem; text-transform:uppercase; }
.expanded-description #expanded-description-text { color:#fff; font-size:1rem; line-height:1.65; margin:.65rem 0 0; white-space:pre-wrap; }
.expanded-reaction-counts { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.75rem; }
.expanded-reaction-count { align-items:center; background:#ffffff0d; border:1px solid #ffffff1f; border-radius:999px; display:inline-flex; font-size:1.2rem; gap:.4rem; min-height:38px; padding:.35rem .7rem; }
.expanded-reaction-count b { font-size:.82rem; }
.expanded-lyrics { border-left:1px solid var(--line); max-height:60vh; overflow:auto; padding-left:clamp(1.5rem,4vw,4rem); }
#expanded-lyrics-text { font-size:1.1rem; line-height:1.9; margin-top:1.25rem; white-space:pre-wrap; }
@media(max-width:900px){.player-expanded{grid-template-columns:minmax(180px,280px) 1fr}.expanded-lyrics{border-left:0;border-top:1px solid var(--line);grid-column:1/-1;max-height:none;padding:2rem 0 4rem}}
@media(max-width:600px){.player-expanded{bottom:64px;grid-template-columns:1fr;max-height:calc(100vh - 64px);padding:4.5rem 1.25rem 2rem}.expanded-art{margin:auto;max-width:280px}.expanded-info{text-align:center}.expanded-info h2{font-size:2.5rem}.expanded-lyrics{grid-column:auto;text-align:left}.player-close{right:1rem;top:1rem}}