/* Shared themed video chrome. Used by watch.php and the player's video overlay so the
   two surfaces cannot drift apart. Every colour comes from the active world's tokens
   (theme-bridge.css), so the player dresses itself in whichever world you are in. */
.evp{position:relative;display:block;width:100%;background:#000;border-radius:var(--chrome-radius,14px);overflow:hidden;isolation:isolate}
.evp video{display:block;width:100%;height:auto;background:#000}
.evp [hidden]{display:none!important}
/* Fullscreen must reset the watch/overlay/miniplayer size limits too. :is() keeps
   the standard rules valid in browsers that do not know the WebKit selector. */
.evp:is(:fullscreen,:-webkit-full-screen,[data-fullscreen="window"]){
  position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;min-width:0;min-height:0;flex:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.evp:is(:fullscreen,:-webkit-full-screen,[data-fullscreen="window"]) video{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  min-height:0;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important}
.evp::backdrop{background:#000}
.evp[data-fullscreen="window"]{z-index:2147483647!important}
.evp-fullscreen-ancestor{transform:none!important;filter:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;perspective:none!important;contain:none!important;
  content-visibility:visible!important;will-change:auto!important;clip-path:none!important;isolation:auto!important}
.evp-fullscreen-ancestor:not(html):not(body){overflow:visible!important;z-index:2147483646!important}
body.evp-window-open{overflow:hidden!important}
.evp:is(:fullscreen,:-webkit-full-screen,[data-fullscreen="window"]) .evp-chrome{
  padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left));
  padding-bottom:max(10px,env(safe-area-inset-bottom))}

/* Big centre play, shown only while idle. */
.evp-bigplay{position:absolute;z-index:3;inset:0;margin:auto;width:76px;height:76px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;background:color-mix(in srgb,var(--bg,#07091a) 52%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--glow-shadow,0 0 30px -8px #6cf),0 18px 40px -22px #000;
  transition:opacity .25s ease,transform .25s ease}
.evp-bigplay svg{width:30px;height:30px;fill:var(--fg,#fff);margin-left:3px}
.evp[data-state="playing"] .evp-bigplay{opacity:0;pointer-events:none;transform:scale(.9)}

/* Chrome reveals on hover, focus-within, or while paused; never traps a keyboard user. */
.evp-chrome{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:34px 12px 10px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--bg,#07091a) 88%,transparent) 62%);
  opacity:0;transition:opacity .22s ease;pointer-events:none}
.evp:hover .evp-chrome,.evp:focus-within .evp-chrome,.evp[data-state="paused"] .evp-chrome,.evp[data-idle="0"] .evp-chrome{opacity:1;pointer-events:auto}

/* Scrubber, with the buffered range shown behind the played range. */
.evp-scrub{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.evp-track{position:relative;height:5px;width:100%;border-radius:999px;background:color-mix(in srgb,var(--fg,#fff) 18%,transparent);overflow:hidden}
.evp-buffered{position:absolute;inset:0 auto 0 0;width:0;background:color-mix(in srgb,var(--fg,#fff) 26%,transparent)}
.evp-played{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent-grad,linear-gradient(90deg,#ffc26d,#61e8ff))}
.evp-knob{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--fg,#fff);box-shadow:var(--glow-shadow,0 0 14px -2px #6cf);opacity:0;transition:opacity .18s ease}
.evp-scrub:hover .evp-knob,.evp-scrub:focus-visible .evp-knob{opacity:1}
.evp-scrub:focus-visible{outline:none}
.evp-scrub:focus-visible .evp-track{box-shadow:0 0 0 3px var(--ring,rgba(120,220,255,.5))}

.evp-row{display:flex;align-items:center;gap:6px;margin-top:4px}
.evp-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--fg,#fff);transition:background .2s ease,color .2s ease}
.evp-btn svg{width:19px;height:19px;fill:currentColor;pointer-events:none}
.evp-btn:hover{background:color-mix(in srgb,var(--fg,#fff) 12%,transparent)}
.evp-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring,rgba(120,220,255,.5))}
.evp-btn[aria-pressed="true"]{color:var(--a2,#61e8ff)}
.evp-time{font:600 .74rem/1 ui-monospace,Menlo,Consolas,monospace;color:var(--fg,#fff);opacity:.86;padding:0 4px;white-space:nowrap}
.evp-spacer{flex:1}

/* Volume expands on hover so the row stays compact. */
.evp-vol{display:flex;align-items:center;gap:2px}
.evp-vol input{width:0;opacity:0;transition:width .22s ease,opacity .22s ease;accent-color:var(--a2,#61e8ff);cursor:pointer}
.evp-vol:hover input,.evp-vol:focus-within input{width:72px;opacity:1}

/* Speed and quality menus. */
.evp-menu{position:relative}
.evp-menu>button{min-width:44px;height:38px;padding:0 10px;border:0;border-radius:10px;cursor:pointer;background:transparent;
  color:var(--fg,#fff);font:700 .72rem/1 Inter,sans-serif;transition:background .2s ease}
.evp-menu>button:hover{background:color-mix(in srgb,var(--fg,#fff) 12%,transparent)}
.evp-menu>button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring,rgba(120,220,255,.5))}
.evp-pop{position:absolute;right:0;bottom:46px;min-width:132px;padding:6px;border-radius:12px;
  background:var(--surface-2,#111a2e);border:1px solid var(--line,rgba(170,200,255,.18));box-shadow:var(--shadow-lg,0 30px 60px -35px #000);
  display:grid;gap:2px}
.evp-pop[hidden]{display:none!important}
.evp-pop button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:36px;padding:0 10px;
  border:0;border-radius:8px;cursor:pointer;background:transparent;color:var(--fg,#fff);font:600 .76rem/1 Inter,sans-serif;text-align:left}
.evp-pop button:hover{background:color-mix(in srgb,var(--a2,#61e8ff) 16%,transparent)}
.evp-pop button[aria-checked="true"]{color:var(--a2,#61e8ff)}
.evp-pop button[aria-checked="true"]::after{content:"●";font-size:.6rem}
.evp-pop-title{padding:4px 10px 6px;color:var(--muted,#9fb0d0);font:800 .58rem/1 Orbitron,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}

/* Status line for buffering and errors, announced politely. */
.evp-status{position:absolute;z-index:5;left:12px;top:12px;padding:6px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--bg,#07091a) 72%,transparent);color:var(--fg,#fff);
  font:700 .68rem/1 Inter,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.evp-status[hidden]{display:none!important}
.evp-status[data-kind="error"]{color:var(--danger,#ff5d7a)}
.evp-retry{position:absolute;z-index:6;top:50px;left:12px;min-height:44px;padding:8px 14px;
  border:1px solid var(--line,rgba(170,200,255,.3));border-radius:10px;background:var(--bg,#07091a);
  color:var(--fg,#fff);font:700 .76rem/1 Inter,sans-serif;cursor:pointer}
.evp-retry:focus-visible{outline:3px solid var(--a2,#61e8ff);outline-offset:2px}

@media(pointer:coarse){
  .evp-btn,.evp-menu>button{width:44px;height:44px;min-width:44px}
  .evp-chrome{opacity:1;pointer-events:auto}
  .evp-vol input{width:72px;opacity:1}
}
@media(max-width:600px){
  .evp-row{gap:2px}
  .evp-vol input{display:none}
  .evp-time{font-size:.65rem;padding:0 2px}
  .evp-menu>button{padding:0 6px}
  .evp-btn,.evp-menu{flex-shrink:0}
}
@media(max-width:420px){
  .evp-btn,.evp-menu>button{width:44px;height:44px;min-width:44px}
  .evp-row{display:grid;grid-template-columns:44px 44px minmax(0,1fr) 44px}
  .evp-time{grid-area:1/1/2/3}
  .evp-speed{grid-area:1/3;justify-self:end}
  .evp-pip{grid-area:1/4}
  .evp-play{grid-area:2/1}
  .evp-vol{grid-area:2/2}
  .evp-quality{grid-area:2/3;justify-self:end}
  .evp-fs{grid-area:2/4}
  .evp-spacer{display:none}
}
@media(prefers-reduced-motion:reduce){
  .evp-bigplay,.evp-chrome,.evp-knob,.evp-vol input{transition:none!important}
}