/* ==========================================================================
   NixCast player skin
   Three looks share one control layout: prime, netflix, classic.
   Everything is sized in rem-free px so 10-foot TV mode can scale it whole.
   ========================================================================== */

.nixp{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:#fff;
  --p-accent:#2F2381;
  --p-bar:rgba(255,255,255,.28);
  --p-scale:1;
  user-select:none;-webkit-user-select:none;
}
.nixp:fullscreen,.nixp:-webkit-full-screen{aspect-ratio:auto;height:100vh}
.nixp video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.nixp *{box-sizing:border-box}

/* ---- watermark ---- */
.nixp-wm{
  position:absolute;z-index:6;pointer-events:none;
  font-size:15px;font-weight:800;letter-spacing:.05em;text-shadow:0 1px 6px rgba(0,0,0,.7);
  max-width:22%;
}
.nixp-wm img{max-width:110px;max-height:46px;object-fit:contain;filter:drop-shadow(0 1px 6px rgba(0,0,0,.6))}
.nixp-wm.top-right{top:18px;right:20px}
.nixp-wm.top-left{top:18px;left:20px}
.nixp-wm.bottom-right{bottom:76px;right:20px}
.nixp-wm.bottom-left{bottom:76px;left:20px}

/* ---- centre states ---- */
.nixp-spinner{
  position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none;
}
.nixp-spinner i{
  width:46px;height:46px;border-radius:50%;
  border:3px solid rgba(255,255,255,.2);border-top-color:#fff;
  animation:nixp-spin .8s linear infinite;
}
@keyframes nixp-spin{to{transform:rotate(360deg)}}
.nixp-spinner[hidden]{display:none}

.nixp-bigplay{
  position:absolute;inset:0;display:grid;place-items:center;z-index:5;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.15));cursor:pointer;border:none;width:100%;
}
.nixp-bigplay span{
  width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.94);color:#0B1B2A;
  display:grid;place-items:center;transition:transform .18s;
}
.nixp-bigplay:hover span{transform:scale(1.07)}
.nixp-bigplay[hidden]{display:none}

.nixp-error{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;text-align:center;
  background:rgba(0,0,0,.86);padding:30px;
}
.nixp-error[hidden]{display:none}
.nixp-error b{display:block;font-size:18px;font-weight:800;margin-bottom:10px}
.nixp-error p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.6;max-width:44ch;margin:0 auto 18px}
.nixp-error button{
  padding:11px 22px;border-radius:6px;border:none;background:#fff;color:#0B1B2A;
  font-weight:700;font-size:14px;cursor:pointer;
}

/* ---- title bar (fades with controls) ---- */
.nixp-top{
  position:absolute;top:0;left:0;right:0;z-index:4;padding:20px 24px 44px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
  transition:opacity .25s;pointer-events:none;
}
.nixp-top h4{font-size:17px;font-weight:700;line-height:1.3}
.nixp-top small{display:block;font-size:12.5px;color:rgba(255,255,255,.66);margin-top:3px}

/* ---- control bar ---- */
.nixp-ctl{
  position:absolute;left:0;right:0;bottom:0;z-index:7;padding:0 18px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.82) 40%,transparent);
  transition:opacity .25s,transform .25s;
}
.nixp.idle .nixp-ctl,.nixp.idle .nixp-top{opacity:0;transform:translateY(6px)}
.nixp.idle{cursor:none}
.nixp.idle .nixp-top{transform:none}

/* progress */
.nixp-scrub{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px}
.nixp-track{position:relative;height:4px;width:100%;border-radius:3px;background:var(--p-bar);overflow:visible}
.nixp-buffer{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.34);border-radius:3px}
.nixp-played{position:absolute;left:0;top:0;bottom:0;background:var(--p-accent);border-radius:3px}
.nixp-knob{
  position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);transition:transform .15s;
}
.nixp-scrub:hover .nixp-knob,.nixp-scrub:focus-within .nixp-knob{transform:translate(-50%,-50%) scale(1)}
.nixp-scrub:hover .nixp-track{height:6px}
/* A live stream with no rewind buffer has nothing to scrub through; one with
   a DVR window behaves like VOD inside that window. */
.nixp.is-live .nixp-scrub{cursor:default}
.nixp.is-live .nixp-knob{display:none}
.nixp.is-live.has-dvr .nixp-scrub{cursor:pointer}
.nixp.is-live.has-dvr .nixp-knob{display:block}
.nixp.is-live.has-dvr .nixp-played{background:#E23A3A}
.nixp.is-live:not(.has-dvr) .nixp-track{opacity:.45}

/* hover thumbnail preview */
.nixp-thumb{
  position:absolute;bottom:26px;transform:translateX(-50%);z-index:9;
  background:#000;border:1px solid rgba(255,255,255,.3);border-radius:4px;overflow:hidden;
  width:168px;pointer-events:none;opacity:0;transition:opacity .14s;
}
.nixp-thumb.on{opacity:1}
.nixp-thumb canvas,.nixp-thumb video{display:block;width:100%;height:94px;object-fit:cover;background:#111}
.nixp-thumb b{display:block;text-align:center;font-size:11.5px;font-weight:600;padding:4px;background:rgba(0,0,0,.85)}

/* buttons row */
.nixp-row{display:flex;align-items:center;gap:6px}
.nixp-btn{
  width:38px;height:38px;display:grid;place-items:center;background:none;border:none;
  color:#fff;cursor:pointer;border-radius:6px;opacity:.92;transition:background .15s,opacity .15s;
}
.nixp-btn:hover{background:rgba(255,255,255,.16);opacity:1}
.nixp-btn.wide{width:auto;padding:0 12px;font-size:13px;font-weight:700;gap:7px}
.nixp-time{font-size:12.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82);padding:0 8px;white-space:nowrap}
.nixp-spacer{flex:1}
/* LIVE / VOD state, always visible so nobody has to guess */
.nixp-livepill,.nixp-vodpill,.nixp-qpill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:4px;
  white-space:nowrap;
}
.nixp-livepill{background:#E23A3A;border:none;color:#fff;cursor:default}
.nixp-livepill i{width:5px;height:5px;border-radius:50%;background:#fff;animation:nixp-blink 1.8s infinite}
/* Behind the live edge: the pill becomes the way back. */
.nixp-livepill.behind{background:rgba(255,255,255,.22);cursor:pointer}
.nixp-livepill.behind:hover{background:rgba(255,255,255,.34)}
.nixp-vodpill{background:rgba(255,255,255,.16);color:rgba(255,255,255,.92)}
.nixp-qpill{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);letter-spacing:.04em}
.nixp-qpill.auto{opacity:.78}
.nixp-qpill[hidden]{display:none}
@keyframes nixp-blink{0%,100%{opacity:1}50%{opacity:.35}}

/* volume */
.nixp-vol{display:flex;align-items:center;gap:0;overflow:hidden}
.nixp-vol input{
  width:0;opacity:0;transition:width .2s,opacity .2s,margin .2s;
  accent-color:#fff;cursor:pointer;height:4px;margin:0;
}
.nixp-vol:hover input,.nixp-vol:focus-within input{width:74px;opacity:1;margin:0 10px 0 4px}

/* settings menu */
.nixp-menu{
  position:absolute;right:16px;bottom:64px;z-index:9;min-width:210px;
  background:rgba(16,20,26,.97);border:1px solid rgba(255,255,255,.12);border-radius:9px;
  padding:8px;backdrop-filter:blur(12px);
}
.nixp-menu[hidden]{display:none}
.nixp-menu h6{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:9px 10px 6px}
.nixp-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 10px;background:none;border:none;color:#fff;font-size:13.5px;text-align:left;
  cursor:pointer;border-radius:6px;font-family:inherit;
}
.nixp-menu button:hover{background:rgba(255,255,255,.1)}
.nixp-menu button[aria-checked=true]::after{content:'✓';font-size:12px;opacity:.9}
.nixp-menu hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:6px 4px}

/* toast for seek/volume feedback */
.nixp-toast{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  background:rgba(0,0,0,.72);border-radius:8px;padding:14px 20px;font-size:15px;font-weight:700;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.nixp-toast.on{opacity:1}

/* ---- ad overlay ---- */
.nixp-ad{position:absolute;inset:0;z-index:10;background:#000;display:none}
.nixp-ad.on{display:block}
.nixp-ad video{width:100%;height:100%;object-fit:contain}
.nixp-adbar{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  display:flex;align-items:center;gap:14px;
}
.nixp-adlabel{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85)}
.nixp-adlabel a{color:#fff;text-decoration:underline}
.nixp-skip{
  margin-left:auto;padding:10px 18px;border-radius:5px;border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.5);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:inherit;
}
.nixp-skip[disabled]{cursor:default;opacity:.65;border-color:rgba(255,255,255,.25)}
.nixp-adprog{position:absolute;left:0;bottom:0;height:3px;background:#F5C518;z-index:3;width:0}

/* ---- trailer nudge ---- */
.nixp-nudge{
  position:absolute;right:20px;bottom:82px;z-index:6;max-width:290px;
  background:rgba(16,20,26,.94);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:16px 18px;
  backdrop-filter:blur(10px);
}
.nixp-nudge[hidden]{display:none}
.nixp-nudge b{display:block;font-size:14px;font-weight:800;margin-bottom:6px}
.nixp-nudge p{font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.55;margin-bottom:12px}
.nixp-nudge a{
  display:block;text-align:center;padding:10px;border-radius:6px;background:var(--p-accent);
  color:#fff;font-size:13.5px;font-weight:700;text-decoration:none;
}

/* ---- skins ---- */
.nixp.skin-netflix{--p-accent:#E50914}
.nixp.skin-netflix .nixp-ctl{padding-bottom:18px}
.nixp.skin-netflix .nixp-btn{width:42px;height:42px}
.nixp.skin-classic{--p-accent:#FFFFFF;--p-bar:rgba(255,255,255,.35)}
.nixp.skin-classic .nixp-track{height:5px;border-radius:0}
.nixp.skin-classic .nixp-played,.nixp.skin-classic .nixp-buffer{border-radius:0}
.nixp.skin-classic .nixp-btn{border-radius:0}

/* ---- small screens ---- */
@media (max-width:720px){
  .nixp-top{padding:14px 16px 36px}
  .nixp-top h4{font-size:14.5px}
  .nixp-ctl{padding:0 8px 8px}
  .nixp-btn{width:34px;height:34px}
  .nixp-time{font-size:11.5px;padding:0 4px}
  .nixp-vol input{display:none}
  .nixp-wm{font-size:12px}
  .nixp-wm img{max-width:74px}
  .nixp-thumb{width:130px}
  .nixp-thumb canvas,.nixp-thumb video{height:73px}
  .nixp-nudge{right:10px;left:10px;bottom:70px;max-width:none}
}

/* ---- 10-foot mode: bigger hit targets, focus ring that reads across a room ---- */
.nixp.tv{--p-scale:1.5}
.nixp.tv .nixp-btn{width:58px;height:58px}
.nixp.tv .nixp-btn svg{width:28px;height:28px}
.nixp.tv .nixp-time{font-size:19px}
.nixp.tv .nixp-top h4{font-size:27px}
.nixp.tv .nixp-top small{font-size:17px}
.nixp.tv .nixp-track{height:7px}
.nixp.tv .nixp-btn:focus-visible,.nixp.tv .nixp-skip:focus-visible{
  outline:3px solid #fff;outline-offset:2px;background:rgba(255,255,255,.24);
}
.nixp.tv .nixp-menu{min-width:300px;bottom:96px}
.nixp.tv .nixp-menu button{font-size:19px;padding:14px}
.nixp.tv .nixp-skip{font-size:19px;padding:15px 26px}

@media (prefers-reduced-motion:reduce){
  .nixp *,.nixp{transition-duration:.001ms !important;animation-duration:.001ms !important}
}