/* v3.2 player widget — dark "energy diagnostic" skin, amber/teal accents */
#vx-stage{position:relative;width:100%;background:#000;overflow:hidden;aspect-ratio:16/9}
#vx-media{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;cursor:pointer}

#vx-load{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0d12}
.vx-spin{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,255,255,.12);border-top-color:#ffb02e;animation:vx-turn .8s linear infinite}
@keyframes vx-turn{to{transform:rotate(360deg)}}
.vx-pct{margin-top:12px;color:#e6edf3;font:600 18px/1 Inter,Arial,sans-serif}

#vx-bar{position:absolute;left:0;bottom:0;width:100%;height:6px;z-index:6;background:rgba(255,255,255,.08)}
#vx-barfill{height:100%;width:0;background:#ffb02e;transition:width .4s ease}
#vx-prog{position:absolute;left:0;bottom:0;width:100%;height:9px;z-index:7;display:none;background:rgba(255,255,255,.1)}
#vx-progfill{height:100%;width:0;background:#2dd4bf;border-radius:0 4px 4px 0;transition:width .3s linear}

#vx-veil{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(ellipse at center,rgba(0,0,0,.45),transparent 72%)}
.vx-playbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:34%;min-width:160px;max-width:300px;aspect-ratio:1/1;border-radius:18px;background:linear-gradient(160deg,#ffb02e,#ff7a18);box-shadow:0 10px 40px rgba(255,122,24,.45);animation:vx-throb 1.5s ease-in-out infinite}
@keyframes vx-throb{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.vx-playicon{width:54%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.vx-playicon svg{width:100%;height:100%;display:block}
.vx-playlabel{color:#1a1205;font:800 clamp(13px,1.9vw,21px)/1 Oswald,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}

#vx-pause{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;z-index:7;pointer-events:none;transition:opacity .3s}
#vx-pause svg{width:64px;height:64px;fill:rgba(255,255,255,.88);filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}

#vx-resume{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:rgba(6,9,13,.9)}
#vx-resume p{max-width:320px;color:#e6edf3;font:700 18px/1.4 Inter,Arial,sans-serif;text-align:center}
.vx-resume-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:270px;padding:13px 28px;border:2px solid rgba(255,176,46,.5);border-radius:50px;background:rgba(255,176,46,.1);color:#ffd591;font:600 15px/1 Inter,Arial,sans-serif;cursor:pointer;transition:background .2s}
.vx-resume-btn:hover{background:rgba(255,176,46,.22)}
@media(max-width:480px){#vx-resume p{font-size:15px}.vx-resume-btn{width:230px;padding:11px 20px;font-size:13px}}

.vx-err{padding:24px;color:#e6edf3;font:600 16px/1.5 Inter,Arial,sans-serif;text-align:center}
.vx-retry{display:inline-block;margin-top:8px;color:#ffb02e;font-size:14px;text-decoration:underline}
