.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:16px}
.rv-card{position:relative;border:1px solid #e0bd5238;border-radius:16px;padding:22px;background:radial-gradient(ellipse at 100% 0,#e8b43b14,transparent 65%),#150b0e;display:flex;flex-direction:column;gap:16px;min-width:0;box-shadow:0 14px 40px #0006}
.rv-stars{color:#f1cf6a;font-size:1.05rem;letter-spacing:3px;text-shadow:0 0 10px #e8b43b55;direction:ltr;text-align:start}.rv-stars span{color:#f5efdf26;text-shadow:none}
[dir=rtl] .rv-stars{text-align:right}
.rv-player{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#0d0608;border:1px solid #f5efdf14;min-width:0}
.rv-btn{flex:none;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:linear-gradient(180deg,#ffd86a,#d99a22);box-shadow:0 6px 18px #e8b43a40,inset 0 1px 0 #fff6d2aa;transition:transform .15s}
.rv-btn:hover{transform:scale(1.06)}.rv-btn:focus-visible{outline:2px solid #f1d273;outline-offset:3px}
.rv-btn svg{width:20px;height:20px;fill:#3a0b17}.rv-btn .s,.rv-player.on .rv-btn .p{display:none}.rv-player.on .rv-btn .s{display:block}
[dir=rtl] .rv-btn .p{transform:none}
.rv-wave{flex:1;min-width:0;height:40px;cursor:pointer;display:block}
.rv-player time{flex:none;font:600 .8rem/1 system-ui,sans-serif;color:#d8d3c1;font-variant-numeric:tabular-nums;direction:ltr;min-width:34px;text-align:center}
.rv-text{margin:0;font-size:.95rem;line-height:1.95;color:#e6e0cf}
.rv-card footer{display:flex;align-items:center;gap:10px;margin-top:auto}
.rv-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#f1cf6a;background:#e0bd5214;border:1px solid #e0bd5255}
.rv-card footer b{font-size:.95rem;color:#f5efdf}.rv-card footer small{margin-inline-start:auto;font-size:.75rem;color:#a9a799}
@media(max-width:520px){.rv-card{padding:18px}.rv-btn{width:42px;height:42px}.rv-player{gap:9px;padding:9px}}
/* cinematic: gold light behind the card, moving rim light, soft top flare */
.rv-grid{padding:6px 6px 24px;margin-top:-14px}
.rv-card{isolation:isolate;overflow:visible;border-color:#e6c56855;background:radial-gradient(120% 90% at 85% -10%,#f1cf6a1f,transparent 55%),radial-gradient(90% 70% at 0% 110%,#8a1a3a40,transparent 60%),linear-gradient(160deg,#1d0d12,#120609 60%,#0d0507);box-shadow:0 0 0 1px #f1cf6a14 inset,0 1px 0 #fff3 inset,0 30px 80px -20px #000c,0 0 60px -10px #e8b43b40,0 0 140px -30px #b0284f66;animation:rvBreath 6s ease-in-out infinite}
.rv-card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--rv-a,0deg),transparent 0 62%,#ffe08a 72%,#fff6d0 75%,#e8b43b 78%,transparent 88%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rvSpin 7s linear infinite;pointer-events:none}
.rv-card:after{content:"";position:absolute;z-index:-1;inset:-18% -10%;border-radius:50%;background:radial-gradient(closest-side,#e8b43b2e,#b0284f22 55%,transparent);filter:blur(28px);pointer-events:none}
.rv-player{background:linear-gradient(180deg,#0c0507,#14080b);border-color:#f1cf6a22;box-shadow:inset 0 2px 12px #000a}
.rv-btn{box-shadow:0 0 0 4px #e8b43b1c,0 0 26px #f1cf6a66,0 8px 20px #0008,inset 0 1px 0 #fff6d2}
.rv-player.on .rv-btn{animation:rvPulse 1.6s ease-in-out infinite}
.rv-player.on .rv-wave{filter:drop-shadow(0 0 6px #f1cf6a88)}
.rv-stars{text-shadow:0 0 14px #f1cf6a99,0 0 2px #fff6}
@property --rv-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rvSpin{to{--rv-a:360deg}}
@keyframes rvBreath{50%{box-shadow:0 0 0 1px #f1cf6a1f inset,0 1px 0 #fff3 inset,0 30px 80px -20px #000c,0 0 80px -6px #e8b43b5c,0 0 170px -20px #b0284f80}}
@keyframes rvPulse{50%{box-shadow:0 0 0 8px #e8b43b10,0 0 40px #f1cf6a99,0 8px 20px #0008,inset 0 1px 0 #fff6d2}}
@media(prefers-reduced-motion:reduce){.rv-card,.rv-card:before,.rv-player.on .rv-btn{animation:none}}
.rv-card{border-color:#f1cf6a80;box-shadow:0 0 0 1px #f1cf6a22 inset,0 1px 0 #fff4 inset,0 30px 80px -20px #000d,0 0 50px -5px #e8b43b66,0 0 160px -10px #c0305a88}
.rv-card:after{inset:-35% -18%;background:radial-gradient(closest-side,#f1cf6a40,#c0305a33 50%,transparent);filter:blur(36px)}
@keyframes rvBreath{50%{box-shadow:0 0 0 1px #f1cf6a33 inset,0 1px 0 #fff4 inset,0 30px 80px -20px #000d,0 0 75px 0 #e8b43b88,0 0 200px 0 #c0305aa0}}
/* compact card: name + stars on top, player under, no label */
.rv-card{padding:12px 16px;gap:10px}
.rv-top{display:flex;align-items:center;gap:10px}
.rv-top b{font-size:.95rem}
.rv-top .rv-stars{margin-inline-start:auto;font-size:.95rem}