*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#151515;color:#f9f5fb;font-family:Arial,sans-serif}
body{background:radial-gradient(ellipse at 50% 35%,#302037 0,#1c1820 48%,#151515 82%)}
#songs{height:calc(100svh - 32px);min-height:590px;max-width:1460px;margin:auto;padding:14px 24px 20px;display:flex;flex-direction:column;gap:14px}
#songs h1{flex:none;margin:0;font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.7px}
.song-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;padding:22px 26px;border:1px solid #4d354f;border-radius:18px;background:linear-gradient(145deg,#302332,#241d28);box-shadow:0 24px 80px #0004}
.song-rule,.song-footer,.player-message{flex-shrink:0}
.song-footer{display:flex;align-items:center;justify-content:space-between;gap:24px}
.song-heading{min-width:0}
.song-heading h2{font-size:clamp(24px,2.6vw,32px);line-height:1.16;font-weight:700;letter-spacing:-.6px;color:#ff83b5;margin:0 0 7px;overflow-wrap:anywhere}
.song-meta{color:#d3c3d6;margin:0;font-size:15px;line-height:1.6}
#song-runtime:not(:empty)::before{content:' · ';padding:0 6px;color:#987e9e}
.video-container{width:100%;flex:1;min-height:200px;background:#090909}
.video-container iframe{display:block;width:100%;height:100%;border:0}
.song-rule{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:17px 22px;border:1px solid #ff83b566;border-radius:12px;background:linear-gradient(135deg,#4b2940,#382332);box-shadow:0 0 24px #ec086318,inset 0 0 18px #ff83b508;text-align:center}
.song-rule::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 32%,#ff4f9c18 42%,#ff83b548 50%,#ff4f9c18 58%,transparent 68%);transform:translateX(-110%);animation:cue-shine 7s ease-in-out .6s infinite}
.song-rule>*{position:relative;z-index:1}
@keyframes cue-shine{0%{transform:translateX(-110%)}32%,100%{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.song-rule::before{animation:none;display:none}}
.song-rule p{font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.35;letter-spacing:-.3px;margin:0}
.random-button{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;border:1px solid transparent;border-radius:9px;background:#ec0863;color:#fff;font:700 17px Arial,sans-serif;padding:15px 24px;min-height:53px;white-space:nowrap;cursor:pointer;box-shadow:0 7px 22px #ec086322}
.random-button svg{width:22px;height:22px;flex:none}
.random-button:hover{background:#ff176f}.random-button:active{transform:translateY(1px)}
.random-button:disabled{opacity:.5;cursor:wait}.random-button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}
.meta-separator{padding:0 6px;color:#987e9e}#youtube-meta{white-space:nowrap}#youtube-meta:has(a[hidden]){display:none}
.youtube-link{font-size:inherit;color:#ffadd0;text-underline-offset:3px;text-decoration-color:#ffadd066}.youtube-link:hover{color:#fff;text-decoration-color:currentColor}
.player-message{color:#ffd0e3;font-size:14px;line-height:1.5;margin:0;text-align:center}
@media(max-width:700px){#songs{height:auto;min-height:calc(100svh - 32px);padding:12px;gap:12px}#songs h1{font-size:23px}.song-card{flex:none;padding:16px;gap:16px;border-radius:14px}.song-footer{flex-direction:column;align-items:stretch;gap:16px}.song-heading h2{font-size:26px}.song-meta{font-size:14px}.random-button{width:100%}.song-rule{padding:16px}.song-rule p{font-size:21px}.video-container{flex:none;height:max(210px,calc((100vw - 58px)*.5625))}}