:root{--bg:#07060B;--s2:#161320;--s3:#1F1B2B;--line:#2A2538;--text:#F2F0F7;--text2:#A9A3BC;--accent:#D7FF1E;--crit:#FF5C77}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
button,input{font:inherit;color:inherit}
#app{min-height:100%;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:16px;max-width:1280px;margin:0 auto}
body.embed #app{padding:0;max-width:none;grid-template-rows:1fr;gap:0;height:100%}
body.embed .hd{display:none}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hd .org{font-weight:700;letter-spacing:-.02em;font-size:18px}.hd .org b{color:var(--accent)}
.hd .ttl{color:var(--text2);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;width:100%;align-self:start;border:1px solid var(--line)}
body.embed .stage{border-radius:0;border:0;height:100%;aspect-ratio:auto}
video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.wait,.gate,.audio-only{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(60% 60% at 50% 40%,#7B5CFF33,transparent 70%),var(--bg)}
.wait h2,.gate h2,.audio-only h2{margin:0;font-size:clamp(18px,3vw,26px);letter-spacing:-.02em;font-weight:500}
.wait p,.gate p,.audio-only p{margin:0;color:var(--text2);max-width:46ch}
.gate form{display:grid;gap:10px;width:min(320px,80vw);margin:6px auto 0}
.gate input{background:#07060B80;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.gate input:focus{outline:2px solid var(--accent);outline-offset:1px}
.btn{background:var(--accent);color:#07060B;border:0;border-radius:11px;padding:10px 16px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #3A3450}
.err{color:var(--crit);min-height:1.3em;margin:0}
.bars{display:flex;gap:4px;align-items:flex-end;height:28px;justify-content:center}
.bars i{width:5px;background:var(--accent);border-radius:2px;animation:vu 1s ease-in-out infinite}.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}.bars i:nth-child(4){animation-delay:.6s}
@keyframes vu{0%,100%{height:30%}50%{height:100%}}
@media (prefers-reduced-motion:reduce){.bars i{animation:none;height:60%}}
.ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:10px 12px;background:linear-gradient(transparent,#000c);opacity:0;transition:opacity .2s}
.stage:hover .ctl,.stage:focus-within .ctl,.stage.show .ctl{opacity:1}
.ctl .sp{flex:1}
.ib{background:none;border:0;cursor:pointer;color:#fff;padding:8px 10px;border-radius:10px;font-size:14px}
.ib:hover,.ib:focus-visible{background:#ffffff22;outline:none}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:.06em;font-family:ui-monospace,Menlo,monospace}
.live i{width:8px;height:8px;border-radius:50%;background:#FF2442;box-shadow:0 0 10px #FF2442}
.menu{position:absolute;right:12px;bottom:56px;background:#1A1724;border:1px solid #3A3450;border-radius:12px;padding:6px;display:none;min-width:170px;z-index:5}
.menu.on{display:grid}
.menu button{background:none;border:0;text-align:left;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--text)}
.menu button:hover,.menu button:focus-visible{background:var(--s3);outline:none}
.menu button[aria-checked="true"]{color:var(--accent)}
.toast{position:absolute;left:12px;top:12px;right:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;background:#1A1724ee;border:1px solid #FF9A1F66;border-radius:12px;padding:10px 14px;font-size:14px;z-index:6}
.toast[hidden]{display:none}
.conn{position:absolute;top:12px;right:12px;font-size:12.5px;background:#000a;border-radius:8px;padding:4px 10px;z-index:4}
[hidden]{display:none!important}
.hd .org{min-width:0}
/* chatul goLive: lângă video pe ecrane late, sub video pe telefon */
body.with-chat #app{max-width:1500px;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr}
body.with-chat .hd{grid-column:1/-1}
.chat{display:flex;flex-direction:column;min-height:0;max-height:min(78vh,720px);background:var(--s2);border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start}
.chd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text2)}
.chd b{color:var(--text);font-size:14px}
.chl{flex:1;overflow-y:auto;padding:8px 12px;display:grid;align-content:start;gap:6px;min-height:200px;scrollbar-width:thin}
.cmsg{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.cmsg b{color:var(--text2);font-weight:600;margin-right:4px}
.cmsg i{font-style:normal;font-size:11px;padding:0 5px;border-radius:4px;background:#ffffff14;color:var(--text2);margin-right:4px}
.cmsg i.s-yt{background:#FF003326;color:#FF8A99}.cmsg i.s-ig{background:#E1306C26;color:#FF8FB6}.cmsg i.s-tw{background:#9146FF2e;color:#C7A6FF}
.cmsg.org b{color:var(--accent)}.cmsg.paid{background:#FF9A1F14;border-radius:8px;padding:4px 6px}
.chf{display:grid;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.chf input{background:#07060B80;border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
.chf input:focus{outline:2px solid var(--accent);outline-offset:1px}
.chr{display:flex;gap:6px}.chr input{flex:1}
.chf .btn{padding:9px 14px}
.chf .err{font-size:13px;min-height:0}
body.embed.with-chat #app{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:1fr}
body.embed .chat{border-radius:0;border:0;border-left:1px solid var(--line);max-height:none;height:100%}
@media (max-width:900px){body.with-chat #app,body.embed.with-chat #app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.chat{max-height:60vh}body.embed .chat{border-left:0;border-top:1px solid var(--line);height:auto;max-height:45vh}}
.lt{position:absolute;left:4%;bottom:14%;z-index:2;max-width:min(78%,620px);display:grid;gap:2px;padding:10px 14px 11px;border-radius:12px;background:#07060Bcc;border-left:3px solid var(--accent,#D7FF1E);color:#F2F0F7;animation:ltin .35s ease-out;pointer-events:none}
.lt strong{font-size:13px;font-weight:500;color:var(--accent,#D7FF1E)}
.lt span{font-size:clamp(14px,2.2vw,18px);line-height:1.35;overflow-wrap:anywhere}
@keyframes ltin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lt{animation:none}}
/* spectatorii de acum: pastilă discretă sus-stânga, defalcarea pe platforme la hover sau tap */
.vw{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:99px;background:#07060B99;backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset 0 0 0 1px #ffffff1f,0 8px 24px -12px #000;font-size:13px;color:#F2F0F7cc;cursor:default;user-select:none;animation:vwin .4s ease-out;transition:background .2s}
.vw:hover,.vw.open,.vw:focus-visible{background:#07060Bd9;outline:none}
.vw-d{width:8px;height:8px;border-radius:50%;background:#FF2442;box-shadow:0 0 0 0 #FF244299;animation:vwp 2s ease-out infinite}
.vw b{font:600 14px/1 ui-monospace,Menlo,monospace;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vw-h{display:inline-flex;align-items:center;gap:6px;padding-left:9px;margin-left:1px;border-left:1px solid #ffffff26;cursor:pointer}
.vw-h i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.vw-h b{font-size:13px;color:var(--accent)}
.vw-p{position:absolute;left:0;top:calc(100% + 8px);min-width:230px;display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:#14111Df2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px #ffffff1a,0 18px 40px -16px #000;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s,transform .18s}
.vw.open .vw-p{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover){.vw:hover .vw-p{opacity:1;transform:none}}
.vw-bar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;margin-bottom:2px}
.vw-bar i{height:100%;min-width:3px;transition:flex .6s ease}
.vw-r{display:flex;align-items:center;gap:8px;font-size:13px;color:#F2F0F7bf}
.vw-r i{width:8px;height:8px;border-radius:2px;flex:none}
.vw-r b{margin-left:auto;font-size:13px}
.vw-r.tot{padding-top:8px;border-top:1px solid #ffffff1a;color:#fff}
@keyframes vwp{0%{box-shadow:0 0 0 0 #FF244299}70%,100%{box-shadow:0 0 0 7px #FF244200}}
@keyframes vwin{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.vw,.vw-d{animation:none}}
@media (max-width:520px){.vw{left:8px;top:8px;padding:5px 10px 5px 9px;gap:6px}.vw-l{display:none}.vw-h{padding-left:7px}}
/* ---------- aspectul ales în Setări › Player ---------- */
:root{--r:14px}
body.shape-soft{--r:8px} body.shape-square{--r:0px}
.stage{border-radius:var(--r)}
body.font-serif{font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif}
body.font-round{font-family:ui-rounded,'SF Pro Rounded','Nunito','Quicksand',system-ui,sans-serif}
body.font-mono{font-family:ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace}
body.no-head .hd{display:none} body.no-head:not(.embed) #app{grid-template-rows:1fr}
/* controalele: bară (implicit), plutitor (pastilă cu sticlă), minimal (doar ce trebuie, fără fundal) */
body.ctl-float .ctl{left:12px;right:12px;bottom:12px;border-radius:calc(var(--r) + 2px);padding:6px 8px;background:#07060Bb8;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px #ffffff1f,0 12px 30px -14px #000}
body.ctl-float .menu{bottom:66px}
body.ctl-min .ctl{background:none;padding:10px}
body.ctl-min .ctl .ib{background:#07060B8c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.ctl-min .ctl .live{display:none} body.ctl-min #ql{font-size:0;padding:8px 11px} body.ctl-min #ql::before{content:'⚙';font-size:14px}
/* logo peste video */
.logo{position:absolute;z-index:2;pointer-events:none;object-fit:contain;filter:drop-shadow(0 2px 10px #0008);transition:opacity .2s}
.logo.s-s{height:7%} .logo.s-m{height:10%} .logo.s-l{height:15%}
.logo.p-tl{left:3%;top:4%} .logo.p-tr{right:3%;top:4%} .logo.p-bl{left:3%;bottom:6%} .logo.p-br{right:3%;bottom:6%}
.stage.show .logo.p-bl,.stage.show .logo.p-br,.stage:hover .logo.p-bl,.stage:hover .logo.p-br{bottom:calc(6% + 46px)}
.stage:has(.vw:not([hidden])) .logo.p-tl{top:calc(4% + 44px)}
/* ecranul de dinainte: fundal cu strălucire (implicit), în culoarea accentului sau simplu; numărătoarea inversă */
body.wbg-accent .wait{background:radial-gradient(70% 70% at 50% 35%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 72%),var(--bg)}
body.wbg-plain .wait{background:var(--bg)}
.cd{margin:10px 0 0!important;display:grid;gap:2px;justify-items:center}
.cd b{font:600 clamp(18px,3.2vw,28px)/1.2 ui-monospace,Menlo,monospace;color:var(--accent);letter-spacing:-.02em}
.cd span{font-size:14px;color:var(--text2)}
/* „Atinge pentru sunet” */
.unm{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:4;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:99px;background:var(--accent);color:#07060B;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 10px 30px -10px #000;animation:unm 2.4s ease-in-out infinite}
@keyframes unm{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.unm{animation:none}}
/* previzualizarea din setări: o scenă care se mișcă lin în locul transmisiei */
.stage.mock{background:radial-gradient(40% 55% at 30% 35%,#F2D59A55,transparent 70%),radial-gradient(35% 45% at 72% 30%,#7B5CFF55,transparent 70%),linear-gradient(180deg,#1B1530,#0B0912 70%);background-size:140% 140%;animation:mock 14s ease-in-out infinite alternate}
.stage.mock video{visibility:hidden}
.stage.mock::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(transparent,#0006);pointer-events:none}
@keyframes mock{from{background-position:0% 0%}to{background-position:100% 60%}}
body.preview .hd .org b{color:var(--accent)}
/* ecranele din player se scalează după mărimea lui (telefon, embed mic) */
.stage{container-type:inline-size}
.wait h2,.gate h2,.audio-only h2{font-size:clamp(15px,4.2cqi,26px)}
.wait p,.gate p,.audio-only p{font-size:clamp(12px,2.6cqi,15px)}
.cd b{font-size:clamp(15px,4.6cqi,28px)}
.wlogo{display:block;margin:0 auto 6px;height:clamp(22px,11cqi,72px);max-width:60cqi;object-fit:contain}
.stage:has(.wait:not([hidden])) .logo,.stage:has(.gate:not([hidden])) .logo{display:none}

/* derularea înapoi în live: bara cu toată transmisia, momentele marcate (capitole), „Înapoi la live” */
.ctl{flex-wrap:wrap}
.dvr{flex-basis:100%;padding:2px 4px 6px}
.dv-t{position:relative;height:5px;border-radius:3px;background:#ffffff33;cursor:pointer;touch-action:none;transition:height .12s}
.dv-t:hover,.dv-t:focus-visible{height:8px;outline:none}
.dv-f{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent)}
.dv-k{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #00000055;opacity:0;transition:opacity .12s}
.dv-t:hover .dv-k,.dv-t:focus-visible .dv-k{opacity:1}
.dv-m{position:absolute;top:-2px;bottom:-2px;width:3px;margin-left:-1.5px;border-radius:2px;background:#fff;opacity:.85;pointer-events:none}
.dv-tip{position:absolute;bottom:16px;transform:translateX(-50%);white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;background:#1A1724;border:1px solid #3A3450;border-radius:8px;padding:4px 8px;font-size:12px;pointer-events:none}
.live{background:none;border:0;color:#fff;cursor:default;padding:6px 8px;border-radius:10px}
.live.behind{cursor:pointer;color:var(--text2,#bbb)}
.live.behind i{background:#8a8a8a;box-shadow:none}
.live.behind:hover,.live.behind:focus-visible{background:#ffffff22;color:#fff;outline:none}
.dv-time{font:12.5px ui-monospace,Menlo,monospace;color:#ddd}
.menu.chm{right:auto;left:12px;max-height:50vh;overflow:auto;min-width:220px}
.menu.chm b{font:12px ui-monospace,Menlo,monospace;color:var(--accent);margin-right:6px}
body.ctl-min .ctl .dvr{display:none}