/* Player em tela cheia. As barras de teste da TV aparecem quando não há sinal. */
.player{position:fixed;inset:0;z-index:100;background:#000;color:#fff;overflow:hidden}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player.hide-ui{cursor:none}
.p-bars{position:absolute;inset:0;display:none;place-items:center;
  background:
    linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.57%,#00c0c0 0 42.85%,#00c000 0 57.14%,#c000c0 0 71.43%,#c00000 0 85.71%,#0000c0 0) top/100% 67% no-repeat,
    linear-gradient(90deg,#0000c0 0 14.28%,#131313 0 28.57%,#c000c0 0 42.85%,#131313 0 57.14%,#00c0c0 0 71.43%,#131313 0 85.71%,#c0c0c0 0) 0 70%/100% 8% no-repeat,
    linear-gradient(90deg,#00214c 0 17%,#fff 0 34%,#32006a 0 51%,#131313 0) bottom/100% 25% no-repeat,#131313}
.player[data-state=error] .p-bars{display:grid}
.p-card{display:grid;gap:.5rem;justify-items:center;max-width:min(88%,30rem);padding:1.6rem 2rem;text-align:center;background:#080b0aee;border:1px solid #ffffff26;border-radius:18px;backdrop-filter:blur(6px)}
.p-card small{font:600 .75rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--warn)}
.p-card strong{font:700 1.5rem var(--display)}
.p-card span{color:var(--muted);font-size:.95rem}
.p-card .btn{margin-top:.5rem}
.p-spin{position:absolute;inset:0;display:none;place-items:center;pointer-events:none}
.player[data-state=loading] .p-spin{display:grid}
.p-spin i{width:3.4rem;height:3.4rem;border-radius:50%;border:4px solid #ffffff26;border-top-color:var(--accent);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(1turn)}}

.p-osd{position:absolute;left:clamp(1rem,4vw,3.5rem);top:6rem;display:flex;align-items:baseline;gap:1rem;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none;text-shadow:0 2px 16px #000d}
.player.osd-on .p-osd{opacity:1;transform:none}
.p-osd b{font:600 clamp(2rem,6vw,4.2rem)/1 var(--mono);letter-spacing:-.05em;color:var(--b-yellow)}
.p-osd span{font:600 clamp(1.1rem,2vw,1.6rem) var(--display)}

.p-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:1rem;padding:1.2rem clamp(1rem,4vw,3.5rem) 3rem;background:linear-gradient(#000c,transparent);transition:opacity .25s}
.p-title{min-width:0;flex:1}
.p-title h3{font-size:1.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-title p{color:#c5ccd1;font-size:.9rem}
.live-tag{display:inline-flex;align-items:center;gap:.5rem;font:700 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bad)}
.live-tag::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

.p-bottom{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.8rem;padding:4rem clamp(1rem,4vw,3.5rem) 1.4rem;background:linear-gradient(transparent,#000d);transition:opacity .25s}
.player.hide-ui .p-top,.player.hide-ui .p-bottom{opacity:0;pointer-events:none}
.player:not(.paused)[data-state=playing] .p-osd{transition-delay:0s}

.p-epg{display:grid;gap:.5rem;max-width:44rem;padding:.9rem 1.1rem;background:#080b0ad9;border:1px solid #ffffff1f;border-radius:16px;backdrop-filter:blur(6px)}
.p-epg>div{display:flex;align-items:baseline;gap:.8rem}
.p-epg b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1.1rem var(--display)}
.p-epg em{font:500 .8rem var(--mono);color:var(--muted);font-style:normal}
.p-epg .next{color:var(--muted);font-size:.9rem}
.tag{flex:none;padding:.15rem .5rem;border-radius:6px;background:var(--b-yellow);color:#1a1500;font:700 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tag.dim{background:#ffffff1f;color:var(--muted)}
.track{--p:0%;position:relative;height:.38rem;border-radius:3px;overflow:hidden;background:var(--spectrum)}
.track i{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--p));background:#10162e;transition:width 1s linear}

.p-seek{display:flex;align-items:center;gap:.9rem;font:500 .85rem var(--mono);color:#dfe4e8}
.player.is-live .p-seek,.player.is-live #pPrev,.player.is-live #pNext{display:none}
.seek{position:relative;flex:1;height:.5rem;border-radius:99px;background:#ffffff30}
.seek .buf,.seek .fill{position:absolute;inset:0 auto 0 0;border-radius:99px;width:0}
.seek .buf{background:#ffffff40}
.seek .fill{background:var(--accent)}
.seek input{position:absolute;inset:-.7rem 0;width:100%;height:1.9rem;margin:0;opacity:0;cursor:pointer}
.p-btns{display:flex;align-items:center;gap:.4rem}
.pbtn{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border:0;border-radius:50%;background:none;color:#fff;transition:background .15s,transform .15s}
.pbtn:hover{background:#ffffff26}
.pbtn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 24px var(--glow)}
.pbtn small{position:absolute;font:700 .55rem var(--font);pointer-events:none}
.pbtn.big{width:3.6rem;height:3.6rem;background:#fff;color:#080b0a}
.pbtn.big:hover{background:#e6e9eb;transform:scale(1.05)}
.player .ic-pause,.player .ic-mute{display:none}
.player:not(.paused) .ic-play{display:none}.player:not(.paused) .ic-pause{display:block}
.player.muted .ic-vol{display:none}.player.muted .ic-mute{display:block}
.player:not(.is-live) .live-only{display:none}
#pVol{width:6rem;accent-color:var(--accent)}

@media (max-width:640px){
  #pVol{display:none}
  .p-osd{top:5rem}
}