/* whyplayer 2 — whycloud live player */
.wp-root{--wp-brand:#2667FF;--wp-sky:#5B8CFF;--wp-berry:#C9184A;--wp-glass:rgba(8,16,38,.58);--wp-line:rgba(255,255,255,.12);position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:inherit;background:#040917;color:#EEF3FF;font-family:"Yekan Bakh","Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;isolation:isolate;container-type:inline-size}
.wp-root *{box-sizing:border-box}
.wp-root:focus-visible{box-shadow:inset 0 0 0 2px var(--wp-sky)}
.wp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity .6s ease;z-index:1}
.wp-root[data-state=live] .wp-video,.wp-root[data-state=paused] .wp-video{opacity:1}
/* idle / ended / error: aurora + logo */
.wp-idle{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center;transition:opacity .5s ease;background:radial-gradient(80% 70% at 50% 40%,#132C66 0%,#091633 50%,#040917 100%)}
.wp-root[data-state=live] .wp-idle,.wp-root[data-state=paused] .wp-idle,.wp-root[data-state=loading] .wp-idle{opacity:0;pointer-events:none}
.wp-aurora{position:absolute;inset:-20%;filter:blur(40px);opacity:.75;pointer-events:none}
.wp-aurora i{position:absolute;width:46%;height:46%;border-radius:50%;mix-blend-mode:screen;animation:wp-drift 16s ease-in-out infinite}
.wp-aurora i:nth-child(1){left:12%;top:18%;background:radial-gradient(circle,rgba(38,103,255,.55),transparent 65%)}
.wp-aurora i:nth-child(2){right:10%;top:30%;background:radial-gradient(circle,rgba(201,24,74,.38),transparent 65%);animation-delay:-5s;animation-duration:19s}
.wp-aurora i:nth-child(3){left:34%;bottom:6%;background:radial-gradient(circle,rgba(91,140,255,.4),transparent 65%);animation-delay:-9s;animation-duration:22s}
@keyframes wp-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8%,-6%) scale(1.15)}66%{transform:translate(-6%,7%) scale(.9)}}
.wp-logo{width:min(220px,40%);height:auto;margin-bottom:16px;position:relative;z-index:1;filter:drop-shadow(0 14px 36px rgba(38,103,255,.55));animation:wp-float 6s ease-in-out infinite}
.wp-idle-t{position:relative;font-size:clamp(14px,2.3cqi,20px);font-weight:800;letter-spacing:-.01em}
.wp-idle-s{position:relative;font-size:clamp(11.5px,1.6cqi,13.5px);color:#9DB0DA;max-width:520px;line-height:1.8}
.wp-idle-dots{position:relative;display:flex;gap:6px;margin-top:8px}
.wp-idle-dots i{width:6px;height:6px;border-radius:50%;background:var(--wp-sky);animation:wp-dot 1.4s ease-in-out infinite}
.wp-idle-dots i:nth-child(2){animation-delay:.2s}.wp-idle-dots i:nth-child(3){animation-delay:.4s}
@keyframes wp-dot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}
.wp-root[data-state=error] .wp-idle-t{color:#FFB4C6}
.wp-root[data-state=error] .wp-idle-dots{display:none}
.wp-rings{position:absolute;top:43%;left:50%;width:0;height:0}
.wp-rings i{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(110,155,255,.38);animation:wp-ring 4.2s cubic-bezier(.2,.6,.3,1) infinite}
.wp-rings i:nth-child(2){animation-delay:1.4s}.wp-rings i:nth-child(3){animation-delay:2.8s}
@keyframes wp-ring{from{transform:scale(.55);opacity:.9}to{transform:scale(3);opacity:0}}
@keyframes wp-float{50%{transform:translateY(-7px)}}
/* loading */
.wp-spin{position:absolute;inset:0;z-index:3;display:none;place-items:center;pointer-events:none}
.wp-root[data-state=loading] .wp-spin,.wp-root.wp-buffering .wp-spin{display:grid}
.wp-spin i{width:58px;height:58px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 25%,var(--wp-sky) 60%,#fff 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:wp-rot .9s linear infinite;filter:drop-shadow(0 0 10px rgba(91,140,255,.7))}
@keyframes wp-rot{to{transform:rotate(360deg)}}
/* top badges */
.wp-top{position:absolute;z-index:4;top:14px;inset-inline:14px;display:flex;align-items:center;gap:7px;pointer-events:none;transition:opacity .3s}
.wp-live,.wp-eye,.wp-title,.wp-hd{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:800;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.wp-live{background:linear-gradient(135deg,#E5294F,var(--wp-berry));color:#fff;box-shadow:0 8px 20px -8px var(--wp-berry),inset 0 1px 0 rgba(255,255,255,.3);letter-spacing:.02em}
.wp-live i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:wp-beat 1.6s infinite}
@keyframes wp-beat{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.wp-root:not([data-state=live]):not([data-state=paused]) .wp-live,.wp-root:not([data-state=live]):not([data-state=paused]) .wp-hd{display:none}
.wp-eye,.wp-hd{background:var(--wp-glass);border:1px solid var(--wp-line)}
.wp-eye svg{width:15px;height:15px;opacity:.85}
.wp-hd{font-size:11px;letter-spacing:.04em}.wp-hd.hi{color:#BFD3FF}.wp-hd[hidden]{display:none}
.wp-title{background:var(--wp-glass);border:1px solid var(--wp-line);font-weight:600;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:auto}
/* big play */
.wp-big{position:absolute;z-index:4;top:50%;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;display:none;place-items:center;background:radial-gradient(circle at 30% 25%,#6E9BFF,var(--wp-brand) 60%);color:#fff;cursor:pointer;box-shadow:0 0 0 12px rgba(38,103,255,.16),0 0 0 24px rgba(38,103,255,.07),0 20px 44px -10px rgba(38,103,255,.85);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.wp-big:hover{transform:scale(1.07)}
.wp-big svg{width:34px;height:34px;margin-inline-start:4px}
.wp-root[data-state=paused] .wp-big{display:grid}
.wp-unmute{position:absolute;z-index:5;bottom:84px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:999px;background:rgba(255,255,255,.96);color:#0B1530;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 14px 34px -10px rgba(0,0,0,.55);animation:wp-pop .45s cubic-bezier(.3,1.5,.5,1)}
.wp-unmute svg{width:18px;height:18px;color:var(--wp-berry)}
.wp-unmute[hidden]{display:none}
@keyframes wp-pop{from{transform:translateX(-50%) scale(.7);opacity:0}}
.wp-toast{position:absolute;z-index:5;top:54px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(5,11,26,.78);border:1px solid var(--wp-line);font-size:12.5px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;animation:wp-pop .35s ease-out}
.wp-toast[hidden]{display:none}
/* stats panel */
.wp-panel{position:absolute;z-index:5;top:52px;inset-inline-start:14px;min-width:220px;padding:12px 14px;border-radius:16px;background:rgba(6,13,32,.82);border:1px solid var(--wp-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:12px;display:grid;gap:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.wp-panel[hidden]{display:none}
.wp-panel b{font-size:12.5px;margin-bottom:2px;color:#fff}
.wp-panel div{display:flex;justify-content:space-between;gap:16px;color:#9DB0DA}.wp-panel em{font-style:normal;color:#EEF3FF;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px}
/* control bar: floating glass */
.wp-bar{position:absolute;z-index:4;bottom:12px;inset-inline:12px;padding:8px 8px 6px;border-radius:18px;background:linear-gradient(180deg,rgba(14,26,58,.62),rgba(6,13,32,.78));border:1px solid var(--wp-line);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s;pointer-events:none}
.wp-root[data-state=live].wp-active .wp-bar,.wp-root[data-state=paused] .wp-bar,.wp-root[data-state=live]:focus-within .wp-bar{opacity:1;transform:none;pointer-events:auto}
.wp-root[data-state=live]:not(.wp-active):not(:focus-within) .wp-top{opacity:.85}
.wp-track{position:relative;height:4px;margin:0 6px 6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.wp-buf{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:inherit;background:rgba(255,255,255,.28);transition:width .6s ease}
.wp-edge{position:absolute;inset:0;background:linear-gradient(90deg,var(--wp-sky),var(--wp-brand) 60%,var(--wp-berry));opacity:.95}
.wp-root.wp-behind .wp-edge{opacity:.45}
.wp-row{display:flex;align-items:center;gap:2px}
.wp-b{width:38px;height:38px;border:0;border-radius:12px;display:grid;place-items:center;background:transparent;color:#fff;cursor:pointer;transition:background .15s,transform .15s}
.wp-b:hover{background:rgba(255,255,255,.12)}.wp-b:active{transform:scale(.94)}
.wp-b svg{width:20px;height:20px}
.wp-b[hidden],.wp-q[hidden]{display:none}
.wp-vol{display:flex;align-items:center}
.wp-range{--v:100%;width:0;opacity:0;transition:width .22s,opacity .22s,margin .22s;height:4px;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:99px;background:linear-gradient(90deg,#fff var(--v),rgba(255,255,255,.25) var(--v))}
/* volume and seek sliders are always left-to-right: dragging right = louder / later */
.wp-range,.wp-seek{direction:ltr}
.wp-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.wp-range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.wp-vol:hover .wp-range,.wp-range:focus{width:86px;opacity:1;margin-inline:6px}
.wp-golive{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;margin-inline-start:6px;border:0;border-radius:999px;background:rgba(201,24,74,.18);color:#FFD3DE;font:inherit;font-size:11.5px;font-weight:800;cursor:default;letter-spacing:.02em}
.wp-golive i{width:7px;height:7px;border-radius:50%;background:#FF4D6D;box-shadow:0 0 8px #FF4D6D}
.wp-root.wp-behind .wp-golive{cursor:pointer;background:rgba(255,255,255,.14);color:#fff}
.wp-root.wp-behind .wp-golive i{background:#9aa7c4;box-shadow:none}
.wp-delay{margin-inline-start:6px;font-size:11px;font-weight:700;color:#9DB0DA;white-space:nowrap}
.wp-delay.ok::before,.wp-delay.mid::before,.wp-delay.bad::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-inline-end:5px;vertical-align:1px}
.wp-delay.ok::before{background:#32D583}.wp-delay.mid::before{background:#FDB022}.wp-delay.bad::before{background:#F97066}
.wp-delay[hidden]{display:none}
.wp-sp{flex:1}
.wp-q{position:relative}
.wp-qbtn{width:auto;padding:0 10px;gap:6px;display:inline-flex;align-items:center;font:inherit;font-size:12px}
.wp-qbtn em{font-style:normal;font-weight:800}
.wp-menu{position:absolute;bottom:50px;inset-inline-end:-6px;min-width:178px;padding:6px;border-radius:16px;background:rgba(8,16,40,.94);border:1px solid var(--wp-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 48px -16px rgba(0,0,0,.75);display:grid;gap:2px;animation:wp-menu .2s ease-out}
@keyframes wp-menu{from{opacity:0;transform:translateY(6px)}}
.wp-menu[hidden]{display:none}
.wp-menu-h{padding:6px 10px 4px;font-size:11px;color:#8193BE;font-weight:700}
.wp-menu button{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border:0;border-radius:10px;background:none;color:#DCE6FF;font:inherit;font-size:13px;cursor:pointer;text-align:start}
.wp-menu button span{display:flex;align-items:center;gap:8px;font-weight:700}.wp-menu button small{font-size:10px;padding:2px 6px;border-radius:6px;background:rgba(91,140,255,.18);color:#BFD3FF;font-weight:800}
.wp-menu button svg{width:16px;height:16px;opacity:0;color:var(--wp-sky)}
.wp-menu button:hover{background:rgba(255,255,255,.07)}
.wp-menu button.on{color:#fff;background:rgba(38,103,255,.16)}.wp-menu button.on svg{opacity:1}
.wp-brand{display:flex;align-items:center;margin-inline-start:6px;padding:0 6px;opacity:.85;transition:opacity .2s}.wp-brand:hover{opacity:1}
.wp-brand img{height:18px}
@container (max-width:560px){.wp-pip,.wp-statsbtn,.wp-delay{display:none}.wp-vol .wp-range,.wp-vol:hover .wp-range{width:64px;opacity:1;margin-inline:4px}.wp-title{display:none}.wp-big{width:64px;height:64px;margin:-32px 0 0 -32px}.wp-brand{display:none}.wp-bar{inset-inline:8px;bottom:8px;border-radius:14px}.wp-top{top:10px;inset-inline:10px}}
@media (prefers-reduced-motion:reduce){.wp-root *{animation:none!important;transition:none!important}}

.wp-watermark{position:absolute;top:18px;right:18px;z-index:4;background:#101b31a8;border:1px solid #ffffff20;padding:9px 13px;border-radius:12px;backdrop-filter:blur(12px);pointer-events:none}.wp-watermark img{display:block;width:96px;height:24px;object-fit:contain}.wp-root .wp-vol{gap:8px;padding:5px 10px;background:#ffffff0c;border:1px solid #ffffff18;border-radius:30px}.wp-root .wp-range{accent-color:#2667ff;width:88px;cursor:pointer}.wp-root .wp-bar{background:linear-gradient(transparent,#07101dec);padding:28px 18px 14px}.wp-recording .wp-bar{opacity:1!important;transform:none!important}.wp-recording .wp-video{object-fit:contain}.wp-vod-heading{position:absolute;left:20px;top:22px;display:grid;gap:8px;color:#fff;max-width:65%;font-size:13px}.wp-vod-heading span{color:#a8c1ff}.wp-vod-message{position:absolute;top:45%;width:100%;text-align:center;color:#c9d7ed;font-size:13px}.wp-vod-message[hidden]{display:none}.wp-seek{display:block;width:100%;accent-color:#2667ff;margin:0 0 14px;cursor:pointer;direction:ltr}.wp-clock{font:12px ui-monospace,monospace;color:#d8e5ff;white-space:nowrap}.wp-speed{border:1px solid #ffffff24;background:#13203a;color:#fff;border-radius:8px;padding:6px;font:12px monospace}.wp-recording .wp-row{gap:12px}.wp-recording .wp-video{width:100%;height:100%}@media(max-width:550px){.wp-watermark{top:10px;right:10px;padding:6px}.wp-watermark img{width:76px}.wp-clock{font-size:10px}.wp-recording .wp-vol .wp-range{width:45px}}
.wp-vod-heading,.wp-vod-message{z-index:3;pointer-events:none}.wp-recording .wp-bar{pointer-events:auto}.wp-root:fullscreen{border-radius:0}
.wp-root .wp-range{opacity:1;margin-inline:6px;background:linear-gradient(90deg,#2667ff var(--v),#ffffff30 var(--v))}.wp-recording .wp-speed{direction:ltr}.wp-vod-heading{background:#101b3180;padding:8px 12px;border-radius:10px;backdrop-filter:blur(8px)}

/* ===== whyplayer 3: glass controls, logo in the control bar, pulse strip ===== */
.wp-root{border-radius:20px;isolation:isolate;box-shadow:0 30px 70px -30px rgba(4,12,32,.65)}
.wp-watermark{display:none!important}
.wp-bar{bottom:14px;inset-inline:14px;padding:8px 10px 6px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)) ,rgba(10,18,40,.38);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.wp-root::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(3,8,22,.55),transparent);opacity:0;transition:opacity .3s}
.wp-root:hover::after,.wp-root[data-state=paused]::after{opacity:1}
.wp-b{border-radius:11px}
.wp-b:hover{background:rgba(255,255,255,.14)}
.wp-track{height:5px;background:rgba(255,255,255,.14)}
.wp-top>span{-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
.wp-eye,.wp-hd,.wp-title{background:rgba(10,18,40,.36)!important;border:1px solid rgba(255,255,255,.14)}
.wp-big{background:rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 20px 50px -16px rgba(38,103,255,.7),inset 0 1px 0 rgba(255,255,255,.35)!important}
.wp-big:hover{transform:scale(1.06)}
.wp-menu{background:rgba(10,18,40,.72)!important;-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
.wp-sep{width:1px;height:20px;margin:0 6px;background:rgba(255,255,255,.18)}
.wp-mark{display:inline-flex;align-items:center;height:32px;padding:0 8px;border-radius:10px;opacity:.78;transition:opacity .2s,background .2s}
.wp-mark:hover{opacity:1;background:rgba(255,255,255,.1)}
.wp-mark img{height:17px;width:auto;display:block}
.wp-brand{display:none!important}
@media (max-width:560px){.wp-mark img{height:14px}.wp-sep{margin:0 3px}.wp-bar{inset-inline:8px;bottom:8px}}

/* pulse strip under the player */
.wp-pulse{--e:0;position:relative;display:flex;align-items:center;gap:14px;height:66px;margin-top:10px;padding:0 16px;border-radius:18px;overflow:hidden;color:#dfe8ff;background:radial-gradient(80% 160% at 50% 0%,color-mix(in srgb,#2667FF calc(var(--e) * 55%),rgba(16,28,60,.92)) 0%,rgba(6,12,28,.94) 70%);border:1px solid rgba(124,172,255,.16);box-shadow:0 18px 40px -24px rgba(4,12,32,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.wp-pulse-m{flex:none;display:flex;align-items:center;gap:10px;min-width:150px;max-width:38%}
.wp-pulse-m b{display:block;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap}
.wp-pulse-m small{display:block;font-size:11px;color:#91a4cb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-pulse-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#5b6b90}
.wp-pulse[data-s=on] .wp-pulse-dot,.wp-pulse[data-s=tap] .wp-pulse-dot{background:#ff4d6d;animation:wp-pulse-b 1.4s infinite}
@keyframes wp-pulse-b{0%{box-shadow:0 0 0 0 rgba(255,77,109,.6)}70%,100%{box-shadow:0 0 0 8px rgba(255,77,109,0)}}
.wp-pulse-lane{position:relative;flex:1;min-width:0;height:44px;border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden}
.wp-pulse-lane::before{content:"";position:absolute;inset:50% 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(124,172,255,.35),transparent)}
.wp-pulse-lane canvas{position:absolute;inset:0;width:100%;height:100%}
.wp-pulse[data-s=idle] canvas{opacity:.6}
@media (max-width:560px){.wp-pulse-m{min-width:0;max-width:44%}.wp-pulse-m small{display:none}}
/* ===== audio-only player ===== */
.wp-audio{aspect-ratio:auto;min-height:168px}
.wp-audio .wp-video{position:absolute;width:1px;height:1px;opacity:0!important;pointer-events:none}
.wp-audio .wp-q,.wp-audio .wp-pip,.wp-audio .wp-fs,.wp-audio .wp-hd{display:none!important}
.wp-audio .wp-idle .wp-logo{width:min(140px,30%);margin-bottom:8px}
.wp-audio .wp-bar{opacity:1!important;transform:none!important;pointer-events:auto!important}
.wp-eq{position:absolute;inset:22px 22px 70px;display:flex;align-items:flex-end;justify-content:center;gap:5px;opacity:0;transition:opacity .4s;z-index:1}
.wp-eq i{flex:1;max-width:10px;height:18%;border-radius:6px;background:linear-gradient(180deg,var(--wp-sky),var(--wp-brand) 60%,var(--wp-berry));animation:wp-eq 1.1s ease-in-out infinite;animation-play-state:paused}
.wp-eq i:nth-child(3n){animation-duration:.8s}.wp-eq i:nth-child(4n+1){animation-duration:1.4s}.wp-eq i:nth-child(5n+2){animation-duration:.95s;animation-delay:-.3s}.wp-eq i:nth-child(7n){animation-delay:-.6s}
.wp-audio[data-state=live] .wp-eq,.wp-audio[data-state=paused] .wp-eq{opacity:1}
.wp-audio[data-state=live] .wp-eq i{animation-play-state:running}
@keyframes wp-eq{0%,100%{height:14%}50%{height:88%}}
@media (prefers-reduced-motion:reduce){.wp-eq i{animation:none;height:40%}}
/* touch screens have no hover: keep the volume slider visible; browsers that do not let pages
   change media volume (iOS) get the mute button only */
@media (hover:none){.wp-root .wp-range{width:72px;opacity:1;margin-inline:6px;height:6px}.wp-root .wp-range::-webkit-slider-thumb{width:18px;height:18px}}
.wp-novol .wp-range{display:none!important}
.wp-range{touch-action:none}
/* live indicator in the bar: only the red dot (the top badge already says "live") */
.wp-golive{width:28px;height:28px;padding:0;justify-content:center;margin-inline-start:4px;flex:none}
.wp-golive span{display:none}
.wp-golive i{width:9px;height:9px}
/* the control row never overflows: items shrink, the brand mark goes first on narrow players */
.wp-row{min-width:0}
.wp-vol{flex:0 1 auto;min-width:0}
.wp-b{flex:none}
@container (max-width:420px){.wp-mark,.wp-sep{display:none!important}.wp-vol .wp-range,.wp-vol:hover .wp-range{width:52px;margin-inline:2px}.wp-b{width:34px;height:34px}}
@media (max-width:420px){.wp-mark,.wp-sep{display:none!important}.wp-root .wp-range{width:52px;margin-inline:2px}.wp-b{width:34px;height:34px}}
/* "turn sound on" sits above the control bar, and at the top on very short players */
.wp-unmute{bottom:112px;max-width:calc(100% - 24px);white-space:nowrap}
@media (max-height:320px){.wp-unmute{bottom:auto;top:46px;height:34px;padding:0 14px;font-size:12.5px}}
/* source disconnected: blurred last picture + calm notice (never a replayed segment) */
.wp-signal{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:8px;padding:20px;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s;background:radial-gradient(70% 60% at 50% 45%,rgba(4,9,23,.25),rgba(4,9,23,.72))}
.wp-signal-on .wp-signal{opacity:1;visibility:visible}
.wp-video{transition:filter .6s ease,transform .6s ease}
.wp-signal-on .wp-video{filter:blur(18px) saturate(.65) brightness(.6);transform:scale(1.08)}
.wp-signal-on .wp-spin,.wp-signal-on .wp-unmute,.wp-signal-on .wp-big,.wp-signal-on .wp-toast{display:none!important}
.wp-signal-i{display:grid;place-items:center;width:clamp(44px,9cqi,62px);height:clamp(44px,9cqi,62px);border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 8px rgba(255,255,255,.03),0 10px 30px -10px rgba(0,0,0,.6);backdrop-filter:blur(6px);margin-bottom:4px;color:var(--wp-signal,#FFC4D2)}
.wp-signal-i svg{width:55%;height:55%}
.wp-signal b{font-size:clamp(13px,2.4cqi,19px);font-weight:800;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.wp-signal small{font-size:clamp(11px,1.6cqi,13.5px);color:rgba(230,238,255,.82);max-width:440px;line-height:1.8}
.wp-signal .wp-idle-dots{display:flex}
.wp-signal-on .wp-live{background:rgba(255,255,255,.14)!important;box-shadow:none!important}
.wp-signal-on .wp-live i{animation:none!important;background:#ffd4de!important}
.wp-audio.wp-signal-on .wp-eq{filter:blur(6px) grayscale(.6);opacity:.5}
@container (max-width:360px){.wp-signal small{display:none}.wp-signal{gap:6px}}
/* ===== themes (?theme=… or the stream's default). The whycloud mark stays in every theme. */
.wp-t-onyx{--t-bg:#050506;--t-idle1:#202024;--t-idle2:#0d0d10;--t-a1:#f5f5f7;--t-a2:#d4d4d8;--t-live:#ff375f;--t-on:#09090b;--t-glass:rgba(14,14,16,.74);--t-menu:rgba(18,18,22,.92);--t-sub:#a1a1aa}
.wp-t-aurora{--t-bg:#021114;--t-idle1:#0d4a4c;--t-idle2:#05232a;--t-a1:#14b8a6;--t-a2:#7dd3fc;--t-live:#f43f5e;--t-on:#fff;--t-glass:rgba(3,30,36,.74);--t-menu:rgba(4,30,36,.94);--t-sub:#94c9cf}
.wp-t-ember{--t-bg:#110604;--t-idle1:#5a1e0c;--t-idle2:#220b06;--t-a1:#ff6a3d;--t-a2:#ffb86b;--t-live:#ff2e63;--t-on:#fff;--t-glass:rgba(34,11,6,.74);--t-menu:rgba(36,12,8,.94);--t-sub:#e3b3a0}
.wp-t-velvet{--t-bg:#0b0515;--t-idle1:#41186b;--t-idle2:#1a0a30;--t-a1:#a855f7;--t-a2:#f0abfc;--t-live:#f43f8e;--t-on:#fff;--t-glass:rgba(22,8,40,.74);--t-menu:rgba(26,10,44,.94);--t-sub:#c9b2e6}
.wp-t-jade{--t-bg:#03100b;--t-idle1:#0e4430;--t-idle2:#062118;--t-a1:#10b981;--t-a2:#a7f3d0;--t-live:#f43f5e;--t-on:#fff;--t-glass:rgba(4,28,19,.74);--t-menu:rgba(6,30,22,.94);--t-sub:#9cc9b6}
.wp-t-gold{--t-bg:#0a0805;--t-idle1:#3d3016;--t-idle2:#17120a;--t-a1:#d6ad5b;--t-a2:#f5e1a8;--t-live:#e11d48;--t-on:#140f05;--t-glass:rgba(22,17,8,.74);--t-menu:rgba(24,19,9,.94);--t-sub:#cdbb92}
.wp-t-ocean{--t-bg:#020b1a;--t-idle1:#0b3a6e;--t-idle2:#04193a;--t-a1:#38bdf8;--t-a2:#a5f3fc;--t-live:#fb7185;--t-on:#03121f;--t-glass:rgba(4,20,44,.74);--t-menu:rgba(5,22,46,.94);--t-sub:#9ec3e6}
.wp-t-pearl{--t-bg:#e9eef6;--t-idle1:#ffffff;--t-idle2:#eef2f9;--t-a1:#2667ff;--t-a2:#2667ff;--t-live:#e5294f;--t-on:#fff;--t-glass:rgba(255,255,255,.86);--t-menu:rgba(255,255,255,.97);--t-sub:#5b6b90}
.wp-root[class*=wp-t-]{--wp-brand:var(--t-a1);--wp-sky:var(--t-a2);--wp-berry:var(--t-live);--wp-signal:var(--t-a2);background:var(--t-bg)}
.wp-root[class*=wp-t-] .wp-idle{background:radial-gradient(80% 70% at 50% 40%,var(--t-idle1) 0%,var(--t-idle2) 52%,var(--t-bg) 100%)}
.wp-root[class*=wp-t-] .wp-aurora i:nth-child(1){background:radial-gradient(circle,color-mix(in srgb,var(--t-a1) 55%,transparent),transparent 65%)}
.wp-root[class*=wp-t-] .wp-aurora i:nth-child(2){background:radial-gradient(circle,color-mix(in srgb,var(--t-live) 34%,transparent),transparent 65%)}
.wp-root[class*=wp-t-] .wp-aurora i:nth-child(3){background:radial-gradient(circle,color-mix(in srgb,var(--t-a2) 40%,transparent),transparent 65%)}
.wp-root[class*=wp-t-] .wp-rings i{border-color:color-mix(in srgb,var(--t-a2) 38%,transparent)}
.wp-root[class*=wp-t-] .wp-idle-s{color:var(--t-sub)}
.wp-root[class*=wp-t-] .wp-bar{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),var(--t-glass)}
.wp-root[class*=wp-t-] .wp-eye,.wp-root[class*=wp-t-] .wp-hd,.wp-root[class*=wp-t-] .wp-title{background:var(--t-glass)}
.wp-root[class*=wp-t-] .wp-hd.hi{color:var(--t-a2)}
.wp-root[class*=wp-t-] .wp-range{background:linear-gradient(90deg,var(--t-a1) var(--v),rgba(255,255,255,.25) var(--v));accent-color:var(--t-a1)}
.wp-root[class*=wp-t-] .wp-big{box-shadow:0 20px 50px -16px color-mix(in srgb,var(--t-a1) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important}
.wp-root[class*=wp-t-] .wp-live{background:linear-gradient(135deg,var(--t-live),color-mix(in srgb,var(--t-live) 72%,#000));box-shadow:0 8px 20px -8px var(--t-live),inset 0 1px 0 rgba(255,255,255,.3)}
.wp-root[class*=wp-t-]:not(.wp-behind) .wp-golive i{background:var(--t-live);box-shadow:0 0 8px var(--t-live)}
.wp-root[class*=wp-t-] .wp-menu{background:var(--t-menu)}
.wp-root[class*=wp-t-] .wp-menu button svg{color:var(--t-a2)}
.wp-root[class*=wp-t-] .wp-menu button.on{background:color-mix(in srgb,var(--t-a1) 18%,transparent)}
.wp-root[class*=wp-t-] .wp-menu button small{background:color-mix(in srgb,var(--t-a1) 18%,transparent);color:var(--t-a2)}
.wp-root[class*=wp-t-] .wp-spin i{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--t-a2) 70%,transparent))}
.wp-root[class*=wp-t-] .wp-unmute svg{color:var(--t-live)}
.wp-root[class*=wp-t-] .wp-signal{background:radial-gradient(70% 60% at 50% 45%,color-mix(in srgb,var(--t-bg) 25%,transparent),color-mix(in srgb,var(--t-bg) 74%,transparent))}
.wp-t-onyx .wp-range::-webkit-slider-thumb,.wp-t-gold .wp-range::-webkit-slider-thumb{background:var(--t-a2)}
.wp-t-onyx .wp-menu button.on,.wp-t-onyx .wp-menu button small{background:rgba(255,255,255,.12);color:#fff}
/* pearl: light glass controls with dark ink */
.wp-t-pearl{color:#0b1530}
.wp-t-pearl .wp-idle-t{color:#0b1530}
.wp-t-pearl .wp-bar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72));border-color:rgba(11,21,48,.08);box-shadow:0 18px 40px -20px rgba(11,21,48,.45),inset 0 1px 0 #fff}
.wp-t-pearl .wp-b,.wp-t-pearl .wp-qbtn em{color:#0b1530}
.wp-t-pearl .wp-b:hover{background:rgba(11,21,48,.07)}
.wp-t-pearl .wp-vol{background:rgba(11,21,48,.05)!important;border-color:rgba(11,21,48,.08)!important}
.wp-t-pearl .wp-range{background:linear-gradient(90deg,var(--t-a1) var(--v),rgba(11,21,48,.15) var(--v))}
.wp-t-pearl .wp-range::-webkit-slider-thumb{background:#fff;box-shadow:0 1px 4px rgba(11,21,48,.35)}
.wp-t-pearl .wp-track{background:rgba(11,21,48,.1)}
.wp-t-pearl .wp-sep{background:rgba(11,21,48,.14)}
.wp-t-pearl .wp-golive{background:rgba(229,41,79,.1);color:#b4173a}
.wp-t-pearl .wp-eye,.wp-t-pearl .wp-hd,.wp-t-pearl .wp-title{background:rgba(255,255,255,.78);color:#0b1530;border-color:rgba(11,21,48,.08)}
.wp-t-pearl .wp-menu{color:#0b1530;border-color:rgba(11,21,48,.1)}.wp-t-pearl .wp-menu button{color:#1d2b4f}.wp-t-pearl .wp-menu-h{color:#5b6b90}
.wp-t-pearl .wp-menu button:hover{background:rgba(11,21,48,.05)}
.wp-t-pearl .wp-mark img{filter:none}
.wp-t-pearl .wp-signal b{color:#fff}
.wp-t-pearl.wp-audio .wp-idle-t,.wp-t-pearl .wp-idle .wp-logo{filter:none}

.wp-root[class*=wp-t-] .wp-bar{-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);border-color:color-mix(in srgb,var(--t-a1) 22%,rgba(255,255,255,.1))}
.wp-root[class*=wp-t-] .wp-play{background:var(--t-a1);color:var(--t-on);border-radius:50%;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--t-a1) 80%,transparent)}
.wp-root[class*=wp-t-] .wp-play:hover{background:color-mix(in srgb,var(--t-a1) 85%,#fff)}
.wp-root[class*=wp-t-] .wp-edge{opacity:.9}
.wp-root[class*=wp-t-] .wp-vol{background:color-mix(in srgb,var(--t-a1) 10%,transparent)!important;border-color:color-mix(in srgb,var(--t-a1) 22%,transparent)!important}
.wp-root[class*=wp-t-] .wp-top .wp-eye,.wp-root[class*=wp-t-] .wp-top .wp-hd,.wp-root[class*=wp-t-] .wp-top .wp-title{border-color:color-mix(in srgb,var(--t-a1) 25%,transparent)}
.wp-root[class*=wp-t-] .wp-big{background:color-mix(in srgb,var(--t-a1) 30%,rgba(255,255,255,.08))!important;border-color:color-mix(in srgb,var(--t-a1) 55%,transparent)!important}
.wp-t-pearl .wp-top .wp-title,.wp-t-pearl .wp-top .wp-eye,.wp-t-pearl .wp-top .wp-hd{background:rgba(255,255,255,.88)!important;color:#0b1530!important}
.wp-t-pearl .wp-play{color:#fff}
.wp-t-pearl::after{background:linear-gradient(0deg,rgba(11,21,48,.16),transparent)}