#vid-stage{position:relative;width:100%;background:#000;overflow:hidden;aspect-ratio:9/16;border-radius:6px}
#vid-media{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;cursor:pointer}

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

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

#vid-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%)}
.vid-playbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:50%;min-width:200px;max-width:320px;aspect-ratio:1/1;padding:14px;border-radius:18px;background:linear-gradient(160deg,#ffe14a,#ffce00);box-shadow:0 10px 40px rgba(255,206,0,.45);animation:vid-throb 1.5s ease-in-out infinite}
@keyframes vid-throb{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.vid-playicon{width:52%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.vid-playicon svg{width:100%;height:100%;display:block}
.vid-playlabel{color:#102255;font:800 clamp(14px,2.4vw,22px)/1.05 'Roboto Slab',Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;text-align:center}

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

#vid-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)}
#vid-resume p{max-width:320px;color:#e6edf3;font:700 18px/1.4 Roboto,Arial,sans-serif;text-align:center}
.vid-resume-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:270px;padding:13px 28px;border:2px solid rgba(255,206,0,.5);border-radius:50px;background:rgba(255,206,0,.1);color:#ffe14a;font:600 15px/1 Roboto,Arial,sans-serif;cursor:pointer;transition:background .2s}
.vid-resume-btn:hover{background:rgba(255,206,0,.22)}
@media(max-width:480px){#vid-resume p{font-size:15px}.vid-resume-btn{width:230px;padding:11px 20px;font-size:13px}}

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